ประสบการณ์ 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 ตัวใหม่ๆแทน)