Seven Versions of One Web Application


Published on

These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Seven Versions of One Web Application

  1. 1. Yakov Fain, Farata Systems 7 Versions of One Web Application
  2. 2.  
  3. 3. We’ll  Review  7  Versions  of  the  UI  of  this  Single  Page  Applica?on   SPA:  One  Web  page,  AJAX  calls  bring  the  data  as  needed,  CSS  hides/shows  HTML  elements  
  4. 4. …  and  the  7  versions  are…   1.  HTML/AJAX   2.  HTML  +  Responsive  Web  Design   3.  With  jQuery  library     4.  With  Ext  JS  framework   5.  Modularizing  HTML5   6.  With  jQuery  Mobile   7.  With  Sencha  Touch  
  5. 5. Wireframing  with  Balsamiq  Mockups  
  6. 6. V1:  HTML,  JS,  CSS,  AJAX,  JSON   //  Loading  data    with  AJAX  and  parsing  JSON                                   func9on  loadData(dataUrl)  {    var  xhr  =  new  XMLH+pRequest();'GET',  dataUrl,  true);      xhr.onreadystatechange  =  func9on()  {      if  (xhr.readyState  ==  4)  {        if  (xhr.status  ==  200)  {          var  jsonData  =  xhr.responseText;            //parse  json  data          var  campaignsData  =  JSON.parse(jsonData).campaigns;          showCampaignsInfo(campaignsData);        }  else  {          console.log(xhr.statusText);        }      }    }    xhr.send(null);   }  
  7. 7. Demo:  Debugging  in  Chrome  
  8. 8. Oops…A  Smaller  Screen  
  9. 9. V2:  Responsive  Web  Design(RWD)   •  Should  we  create  separate  versions  for  desktop  and   mobile?   •  How  many  versions  of  the  UI  to  create?   •  Can  we  have  a  single  HTML  version  for  all  devices?   •  CSS  Media  Queries  –    layouts  based  on  screen  width   •  Seing  CSS  Breakpoints   •  Pros  and  Cons  of  RWD    
  10. 10. Remember  the  wireframe  for  desktops?  
  11. 11. Wireframing  for  a  table  in  portrait    
  12. 12. Wireframing  for  large  phones  
  13. 13. Wireframing  for  smaller  phones   These  are  the  wireframes  for  3  phone  screens  
  14. 14. V2:  Demo   1.  Basic  Media  Queries   2.  Responsive  Header   3.  Responsive   Dona?on   4.  Responsive  Final  
  15. 15. RWD  Pros  and  Cons   •  RWD  is  good  for  publishing  info.  Mobile  frameworks  can  be  a   beker  choice  for  interac?ve  apps   •  RWD  allows  to  have  a  single  app  code  base   •  Mobile  versions  of  an  app  may  need  limited  func?onality  and   specific  naviga?on   •  RWD  means  larger  traffic  (heavy  CSS)  –  no  good  for  slower   connec?ons   •  Mobile  frameworks  offer  more  na?ve  look  and  feel  of  the  UI     Libraries  of  responsive  UI  components:   Bootstrap:  hkp://   Seman?c  UI:  hkp://seman?c-­‐          
  16. 16. V3:  With  jQuery  Library   •  Learning  jQuery  is  easy  for  designers  –  mostly  HTML.   •  40  –  50%  of  top  Web  sites  use  jQuery  (see         •  It’s  a  light-­‐weight  addi?on  to  your  app  –  33Kb  gzipped,  minified   •  Shorter  than  in  JS  syntax  for  DOM  Browsing     •  $()  –  pass  it  a  String,    pass  it  a  func?on     •  There  are  thousands  plugins  in  jQuery  Plugin  Registry  
  17. 17. DOM  Querying  &  Func?on  Chaining  
  18. 18. An  AJAX  call  in  jQuery   The  shortcut  methods:  $.get(),  $.post(),  $.getJSON()  
  19. 19. V3:  Demo  with  jQuery  
  20. 20. V4:  With  Sencha  Ext  JS  Framework   •  Ext  JS  has  rich  library  of  enterprise-­‐grade  components,  e.g.  grids,  charts   •  Cool  code  generator  Sencha  CMD   •  Promotes  MVC  architecture   •  Some  code  reuse  for  mobile  app  with  Sencha  Touch   •  The  “weight”  of  the  app  substan?ally  increases   •  If  you  decided  to  go  with  Ext  JS,  there  is  no  easy  way  out   •  Doesn’t  support  Responsive  Web  Design   •  Has  steep  learning  curve  –  has  no  HTML,  but  new  JS-­‐based  syntax  
  21. 21. Ext  JS:    index.html  and  app.js  
  22. 22. Ext  JS:    index.html  and  app.js  
  23. 23. Ext  JS  MVC  
  24. 24. Genera?ng  a  project  with  Sencha  CMD   sencha  -­‐sdk  /Library/ext-­‐4.2  generate  app  HelloWorld  /Users/yfain11/hello  
  25. 25. The  View  Fragment:  DonateForm.js    
  26. 26. V4:  Demo  with  Ext  JS  
  27. 27. V5:  Modularizing  UI   •  Large  apps  should  be  modularized  to  avoid  loading  all  code  at  once.   •  Mul?ple  <script> tags  may  depend  on  each  other  and  have  to   be  loaded  in  certain  order.   •  Need  to  be  able  to  specify  dependencies  between  the  modules.   Need  to  avoid  pollu?ng  global  scope  and  name  conflicts.     Manually  wri?ng  Modules  doesn’t  solve  these  issues.   •  Today:  CommonJS  and  Async  Module  Defini?on  (AMD)  specs   •  Tomorrow:  ECMAScript  6  spec  (a.k.a.  Harmony)  defines  modules.  
  28. 28. One  way  of  implemen?ng  Module  Pakern   Passing  inside  the  module  a  reference  to  the  global  window  object    
  29. 29. CommonJS  is  an  effort  to  standardize  JS  APIs.   CommonJS  Modules  defines  3  variables  for  modules:                -­‐  requires          -­‐  exports          -­‐  module   Node.js  framework  implements  CommonJS  Modules  spec  and   provides  these  global  variables.  
  30. 30. Code  Sample  With  CommonJS  
  31. 31. CommonJS  Pros  and  Cons   Pros:     •  Simple  API     Cons:   •  Mainly  for  the  server-­‐side  JavaScript.  Web  browsers  don’t  have     require,  export,  and  module  variables.       •  The  require  method  is  synchronous.       •  CommonJS  API  is  suitable  for  loading  JS  files,  but  can’t  load  CSS     and  HTML.  
  32. 32. Asynchronous  Module  Defini?on  (AMD)   AMD  is  a  proposal  for  async  loading  of  both  the  module  and  its   dependencies  in  Web  browsers.       You  provide  define  and  require  func?ons:     define(! module_id, // optional! [dependencies],! function (){! // This function runs once when the module and its dependencies are loaded! }! );! ! ! require(["main"], function() {! console.log(”The module main is loaded");! });! !   ! ! ! The  func?on  define  defines  the  module  and  returns  it  once  it’s  needed.     The  require  executes  the  given  func?on  checking  that  the  dependencies  were  loaded.    
  33. 33. Save  The  Child  Modularized  With  RequireJS   Lis?ng  modules  in  config.js  
  34. 34. V5  Demo:  With  RequireJS  
  35. 35. main.js  (fragment)  
  36. 36. “Way  To  Give”  Module  Defini?on  
  37. 37. V6:  With  jQuery  Mobile   •  Easy  to  learn.  Built  on  top  of  jQuery  Core  library   •  HTML5  allows  crea?ng  custom  non-­‐visible  akributes.  They   have  to  start  with  data-:   <div data-role="page" id="Stats"> •  The  UI  shows  one  page  at  a  ?me   •  Light-­‐weight  (90Kb  gZipped)  
  38. 38. Mul?-­‐Page  Template   <body> <!-- Page 1 --> <div data-role="page" id="Donate” > ... </div> <!-- Page 2 --> <div data-role="page" id="Stats” > ... </div> </body> The  content  of  mul?ple  pages  is  located  in  one  file.     When  the  app  starts,  only  the  first  page  is  displayed  
  39. 39. Mul?-­‐Page  Template  (cont.)   <body> <!-- Page 1 --> <div data-role="page" id="Donate"> <div data-role="header" >...</div> <div data-role="content" >...</div> <div data-role="footer" >...</div> </div> <!-- Page 2 --> <div data-role="page" id="Stats"> ... </div> </body>
  40. 40. Naviga?on  Bar   <div data-role="navbar"> <ul> <li> <a href="#Who-We-Are">Who We Are</a> </li> <li> <a href="#What-We-Do">What We Do</a> </li> <li> <a href="#Where-We-Work">Where We Work</a> </li> <li> <a href="#Way-To-Give">Way To Give</a> </li> </ul> </div>
  41. 41. Ripple  Emulator  
  42. 42. The  Back  Bukon   <div data-role="page" id="Stats" data-add-back-btn="true"> <div data-role="header" > <h1>Statistics</h1> </div> Statistics will go here </div>
  43. 43. Single-­‐Page  Template   An  HTML  file  contains  the  content  of  a  single  page.     <div data-role="navbar"> <ul> <li> <a href="page-1.html" data-transition="slideup">Page #1</a> </li> <li> <a href="#" class="ui-state-persist">Page #2</a> </li> <li> <a href="page-3.html" data-transition="slideup">Page #3</a> </li> <li> <a href="page-4.html" data-transition="slideup">Page #4</a> </li> </ul> </div>
  44. 44. V6:  Demo  With  jQuery  Mobile  
  45. 45. V7:  With  Sencha  Touch   •  Sencha  Touch  is  a  smaller  brother  of  Ext  JS   •  It  comes  with  mobile  versions  of  lists,   forms,  toolbars,  bukons,  charts,  audio,   video,  carousel  etc.   •  Jumpstart  development  with  genera?ng   the  app  with  Sencha  CMD.   •  Package  the  Sencha  Touch  app  as  na?ve  
  46. 46. The  app.JS   Ext.applica?on({          name:  'SSC',            requires:  [                  'Ext.MessageBox'          ],            views:  [                  'About',                  'CampaignsMap',                  'DonateForm',                  'DonorsChart',                  'LoginForm',                  'LoginToolbar',                  'Main',                  'Media',                  'Share',                  'ShareTile'          ],            stores:  [                  'Campaigns',                  'Countries',                  'Donors',                  'States',                  'Videos'          ],x            controllers:  [                  'Login'          ],            launch:  func?on()  {                  //  Destroy  the  #appLoadingIndicator  element        'appLoadingIndicator').destroy();                    //  Ini?alize  the  main  view                  Ext.Viewport.add(Ext.create('SSC.view.Main'));          },            onUpdated:  func?on()  {                  Ext.Msg.confirm(                          "Applica?on  Update",                          "This  applica?on  has  just  successfully  been  updated   to  the  latest  version.  Reload  now?",                          func?on(bukonId)  {                                  if  (bukonId  ===  'yes')  {                                          window.loca?on.reload();                                  }                          }                  );          }   });  
  47. 47. The  Landing  Page  
  48. 48. Login  Controller  
  49. 49. Donors  Store  
  50. 50. jQuery  Mobile  or  Sencha  Touch?   Use  jQuery  Mobile  if:     •  You  are  afraid  of  being  locked  up  with  any  one  vendor.     •  You  need  your  applica?on  to  work  on  most  of  the  mobile  pla€orms.   •  You  prefer  declara?ve  UI  and  hate  debugging  JavaScript.  
  51. 51. jQuery  Mobile  or  Sencha  Touch?   Use  Sencha  Touch  if:     •  You  like  to  have  a  rich  library  of  pre-­‐created  UI   •  Your  applica?on  needs  smooth  anima?on   •  You  are  into  MVC     •  You  want  to  package  your  applica?on  as  a  na?ve  one   •  You  want  your  applica?on  to  look  as  close  to  the  na?ve  ones     as  possible  
  52. 52. V7:  Demo  With  Sencha  Touch  
  53. 53. Where  to  go  next?   Google  Dart  Language:   hkps://     Google  Angular  Dart  Framework:   hkps://    
  54. 54. Links   •  7  versions  of  the  Save  The  Child  app:   hkp://   •  Enterprise  Web  Dev  book:   hkp://       •  My  employer:       hkp://     •  My  Twiker:  @yfain