Wednesday, October 29, 2014

Backbone.js Part 1

JavaScript වලින් Large App ලියන අයට Backbone.js වලින් structure එකක් දෙන්න පුලුවන්.

Backbone.js වලින් අපට Object කීපයක් හදල දෙනවා. ඒවා Extend කරල හදල අපේ Object වලින් වැඩකරගන්න පුලුවන්.

Backbone JS Pattern එකේ MVC වලින් Controller කොටස නෑ. View එකින් DOM එක access කරනවා. Logic එක තියෙන්නේ View එකේ. View එකට අවශ්‍ය Data, Model හෝ  Collection එකකින් ගන්න පුලුවන්. Single Page App එක්ක හදනවනම් View අතර මාරු වෙන්න Router එක පාවිච්චි කරන්න පුලුවන්.
 

Backbone Dependency විදිහට Jquery, underscorejs දෙන්න ඕන. DOM වැඩ වලට Jquery ඕන වෙනවා. Object (JSON) , Array manipulate කරන්නේ underscore වලින්.

  • Backbone Objects Extend කරන හැටි
Backbone global variable එකක් විදිහට initialize වෙන නිසා Backbone.xxx කියල use කරන්න පුලුවන්.


  • හැදන Object වලට අපිට ඕන properties දෙන්නෙ මෙහෙමයි.


  • Object Use කරන හැටි
Backbone.js පාවිච්චි කරන හැටි ගැන දල අදහසක් එකක් තියෙනම් දැනට ඇති.

App එකක් හදන්න ඕන කරන Patterns, Events, Sync, Template, Require.js  ගැන ඊලග ලිපි වලින් කියන්නම්.හදිස්සිනම්

Friday, August 1, 2014

HTML5 Data Attributes

ගොඩක් වෙලාවට අපි HTML Form වල වැඩ කරද්දි input type="hidden" element, value තියාගන්න පාවිච්චිකරනවා.

ඒකෙ අවාසි ටිකක් තියනවා

1.  ඒ values අපිට Submit එකේදි Server එකට යවන්න ඕන නැත්නම්, අන්වශ්ය Data පිරිනු ලොකු FORM Request එකක් හැදිල තමයි Submit වෙන්නෙ.
2. element අස්සෙ තවත් hidden element තියනකොට format එකක්  තේරුම් ගන්නත් අමරුයි.

Data attribute වලින් ඔය ප්‍රශ්න විසදන්න පුලුවන්.

අදහසක් ආවද?

ඕනම element  එකක dataset කියන attribute එකින් set කරපු value එක ගන්න පුලුවන්. සම්පුර්න JSON එකක් උනත්. අමතර hidden elemnt ඕන කරන්නෑ.
oz වෙනුවට කැමති නමක් ගන්න.

Data ගන්න වගේම Set කරන්න ක්‍රම තියනවා.

  ඔය tip එක හොදටම ඇති. Jquery පාවිච්චි කරන අය අනිවර්යයෙන් $.data() බලන්න.

As වල ප්‍රයෝජන

As Keyword එක අපිට ඕන වෙන්නෙ Mysql වල තියන alias (an alternate name) හැකියාව පාවිච්චිකරන්න.

 උදා:-

 1. දිග table,column name කෙටි කරගන්න.



2. එකම table එක නැවත නැවත join  වලට ගන්න.(Querying a Tree with Adjacency List)

idzone z_name idzone_parent zone_cat
1 Srilanka 111
2 Galle 1 112
3 Karapitiya 2 113




As නොතිබුනා නම් ඒක ලියන්න වෙන්නෙ මෙහෙමයි.

Friday, July 11, 2014

Javascript Performance Tips


Scripting Languages වලදි code එකේ speed එක තියෙන්නෙ ගොඩක් developer ගාවනේ. (JVM එකෙන් පොඩි අඩුපාඩු හදනවා). මගේ මුල්ම POST එකෙන් ලගකදි යාලුවෙක්(තඩී) කරපු Code එකක් ටිකක් optimize කරල Explain කරන්නම්.

එයාට ඕන උනේ Ajax එකකින් Combo Box එකක් populate කරගන්න.
මේ තියෙන්නෙ එයා ලියපු code එක. jquery ajax callback function එකක්.

  success: function(data) {  
       var x = JSON.parse(data);  
       for (var i = 0; i < x.length; i++) {  
         $('#dist_combo').append('<option>' + x[i]['name'] + '</option>')  
       }  
  }  

ok. දන් මොනවද අවුල් ?

1. loop එකක් ඇතුලෙ jquery selector එකක්.
    - එක හදපුගමන් මේක ok(not best). එත් තව ලස්සන tips ඉගෙනගන්න මෙක හදමු.

  success: function(data) {  
       var x = JSON.parse(data), dcmb = $('#dist_combo');  //select it just once
       for (var i = 0; i < x.length; i++) {  
         dcmb.append('<option>' + x[i]['name'] + '</option>')  
       }  
  }  

2. මේකෙ loop එක පුරාවටම නැවත නැවත x  වල length එක count වෙනව.
අපි loop එක ඇතුලෙදි x json එක අඩු වැඩි නොකරන නිසා, එකපාරින් length එක ගමු.

  success: function(data) {  
       var x = JSON.parse(data), dcmb = $('#dist_combo');  
       for (var i = 0,len = x.length; i < len; i++) {  //cache length (PHP same)
         dcmb.append('<option>' + x[i]['name'] + '</option>')  
       }  
  }  

3. jquery append() වලට වඩා innerHTML and jquery html() speed නිසා තනි String එකක් හදල දෙමු.

  success: function(data) {  
       var x = JSON.parse(data) , str = '';  
       for (var i = 0,len = x.length; i < len; i++) {  
         str += ('<option>' + x[i]['name'] + '</option>');  
       }  
       $('#dist_combo').html(str);  // or innerHTML as you like
  }  

4. දැන් මේක ටිකක් slow උනා. javascript string concatnation is bad.

  success: function(data) {  
       var x = JSON.parse(data) , str = [];  
       for (var i = 0,len = x.length; i < len; i++) {  
         str.push('<option>' + x[i]['name'] + '</option>');  // collect them
       }  
       $('#dist_combo').html(str.join());  //join array
     }  


දැන් සුපිරියි.

theory කියවනවට වඩා example එකකින් ඉගෙනගන්න එක හොදයි නේ.
 මේ කරපු දෙවල් තවත් speed+ලේසි කරන විදි තියනව (HTML Templating). ඒක next post එකකින් කියන්නම්.