Thursday, September 27, 2007

Tapestry กับ Wicket

หลายคนคงสงสัยว่า เจ้าสองตัวนี้มันมีอะไรที่ต่างกัน
Keng Tong (ซึ่งเป็น committer ของ Tapestry, และเป็นคนเขียนหนังสือ Enjoy Tapestry)
เขาเฉลยให้ฟังแล้ว

My thoughts on the differences between Tapestry and Wicket

I've never seen any code that is as good quality as the Tapestry code

เห็นด้วยว่า code ของ Tapestry นี่มันดีจริงๆ

Wicket tend to have more working functions than Tapestry (tree component, more ajax functions, modal dialog, dynamic images, wizard. role based authorization, captcha, breadcrumb, ...).

ใช่เลย อย่าลืมตามไปอ่านเหตุผลด้วยว่า ทำไม...

Related link from Roti

Wednesday, September 26, 2007

ประสบการณ์ Dojo 0.9

ช่วงนี้กำลังนั่งทำ Orangegears กับน้อง sand เสียเป็นส่วนใหญ่
สิ่งที่ผมต้องการสร้างความแตกต่างระหว่าง Ofbiz กับ Orangegears ก็คือ UI
ช่วงนี้ก็เลยนั่งลอง prototype ความเป็นไปได้ในการใช้ Dojo มาเป็น layer ในส่วน UI
ซึ่งก็พบความแตกต่างระหว่าง 0.9 และ 0.4 จำนวนหนึ่ง
ก็เลยมา blog ไว้

เริ่มด้วยความแตกต่างระหว่าง 0.4 กับ 0.9 ที่สัมผัสได้
  1. ความเร็วในการ parse
    เดิมใน Dojo 0.4 ปัญหาที่เราพบก็คือ dojo.parser ทำงานช้า
    ในกรณีที่เรามี DOM tree ที่ใหญ่มากๆ, dojo.parser จะทำงานช้าในแบบที่รับไม่ได้
    (ซึ่งมันมีวิธีการแก้ไข โดยการ scope ส่วนที่ dojo.parser ทำงานให้มีขนาดเล็กลง)
    ใน Dojo 0.9 ความเร็วในการ parse เพิ่มขึ้นอย่างมาก
    เข้าใจว่าได้แรงบันดาลใจมาจาก JQuery ซึ่งสามารถ scan DOM ได้เร็วมากๆ

    ผลพลอยได้จากการที่ parser มันเร็ว ก็คือ style การเขียนที่เปลี่ยนไป
    แนวทางการเขียนแบบ declarative ถูก encourage มากขึ้น
    ส่งผลให้ code ดูสวยและอ่านง่ายขึ้น (สำหรับ developer ที่สายตาคุ้นกับ xml สไตล์ flex, xul แล้ว)

    ข้างล่างคือตัวอย่าง code ที่ผมลองเขียนใน Orangegears ดู
    เป็นหน้าจอที่แสดง Tree ของผังบัญชี
    style การเขียนเป็นแบบ declarative
    <!-- Store น่าจะเปรียบได้กับพวก DataProvider ใน flex-->
    <div dojoType="dojo.data.ItemFileReadStore"
    jsId="financial.accountCharts"
    url = "getAccountTreeJson">
    </div>

    <!-- Tree Widget -->
    <div id="accountCharts"
    dojoType="dijit.Tree"
    store="financial.accountCharts" <!-- link เข้าหา DataProvider ข้างบน -->
    label="Accounts">

    <!-- เชื่อม script นี้เข้ากับ event onClick เข้า Tree widget นี้
    สังเกตว่า type มีค่าเป็น dojo/connect
    -->
    <script type="dojo/connect" event="onClick" args="item">
    var glAccountId = financial.accountCharts.getValue(item, "glAccountId");
    dojo.xhrGet({
    url: "getGlAccountJson",
    handleAs: "json",
    content: {glAccountId: glAccountId},
    load: function(obj, ioArgs) {
    dijit.byId("glAccountTypeId").setValue("");
    dijit.byId("glAccountClassId").setValue("");
    dijit.byId("glAccountForm").setValues(obj);
    }
    });
    </script>

    </div>

  2. Layout Widget
    ใน Dojo 0.9 มันมี Layout Widget เพิ่มขึ้นมา
    ทำให้การสร้าง App สะดวกขึ้นอย่างเห็นได้ชัด
    ทำให้เราเป็นอิสระจาก CSS มากขึ้น (ไม่งั้นก็มัวไปนั่ง control CSS ให้ได้รูปแบบตามที่เราต้องการ)


ในเรื่องของ source code ของ Dojo
style การเขียนส่วนใหญ่ยังคล้ายคลึงกับ 0.4 อยู่
ถ้าไล่ code 0.4 เป็น ก็สามารถใช้ 0.9 ได้เลย
โดยใน 0.9 นี้, dojo rewrite widget system ใหม่ในชื่อ package ว่า dijit
ผลจากการ rewrite ก็ทำให้จำนวน object, function ในส่วน Widget มันลดลง เป็นระบบระเบียบมากขึ้น
การไล่ code ที่เกี่ยวกับ UI ก็เลยทำได้ง่ายขึ้น
(บ้างอย่างก็ง่ายขึ้น, บางอย่างก็งงๆ เพราะมีความเป็น generic มากไปหน่อย)

Bug ใน Dojo 0.9
เท่าที่ใช้มาพึ่งเจอแค่ bug ตัวเดียวซึ่งก็ร้ายแรงอยู่
เป็นเรื่องเกี่ยวกับ การ reload content ใน ContentPane
ซึ่งแก้ไขโดยเปลี่ยนไปใช้ code จาก SVN โดยตรง
(หนีเสือ แต่อาจจะไปเจอจระเข้ เพราะมีความเสี่ยงมากขึ้นกับ bug ตัวใหม่ๆแทน)

Related link from Roti