25
Structured Web Apps Tim Tian

Structured web apps

Embed Size (px)

Citation preview

Page 1: Structured web apps

Structured  Web  Apps  

Tim  Tian  

Page 2: Structured web apps

Outline  

•  Front  End  Development  Challenges  •  JavaScript  Frameworks  •  New  Languages  

2  

Page 3: Structured web apps

Frond  End  Development  Challenges  

•  JavaScript,  DOM  and  BOM  NaFve  API  •  Web  App  Infrastructure  •  Rich  ApplicaFon  Architecture  •  UI  InteracFon  •  Development  Toolchain  

3  

Page 4: Structured web apps

NaFve  API  Problems  (1/2)  

•  Hard  to  Use  •  Browser  CompaFbility  Issues  

4  

Page 5: Structured web apps

NaFve  API  Problems  (2/2)  •  Early  Frameworks  (e.g.  jQuery)  all  focus  on  fixing  these  

issues.  –  DOM  tree  query  and  manipulaFon  –  DOM  event  handling  –  Ajax  

•  Simplify  XMLH[pRequest  API  •  Enhance  it’s  semanFc  (Deferred  &  Promises)  

–  JavaScript  Language  Enhancements  •  UFlity  Libraries.  e.g.  underscore.Js,  Lo-­‐Dash  

•  HTML  5,  ECMAScript  5,  ECMAScript  Harmony  and  CSS3  –  New  APIs  are  eliminaFng  the  necessity  of  these  frameworks,  e.g.  document.querySelector,  CSS3  animaFons  

5  

Page 6: Structured web apps

Web  App  Infrastructure  (1/4)  

•  Modularity  – Problems  

•  Avoid  Global  Variables  ConflicFng  •  Dependency  Management  •  Build  and  Package  

– Standards  •  AMD  (Asynchronous  Module  DefiniFon)  

–  RequireJS,  Dojo  •  CommonJS  

–  Node.js  

6  

Page 7: Structured web apps

Web  App  Infrastructure  (2/4)  •  Object-­‐Oriented  Programming  

–  JavaScript  is  a  prototype-­‐based  language  •  simulate  many  class-­‐based  features  

–  Frameworks  •  YUI  extend  •  MooTools  Class  •  Dojo  •  Prototype  •  Backbone.Model.extend  •  etc.  

–  Reference  •  Douglas  Crockford  –  Classical  Inheritance  in  JavaScript  •  John  Resig  –  Simple  JavaScript  Inheritance  •  Nicholas  Zakas  –  Does  JavaScript  need  classes?  

7  

Page 8: Structured web apps

Web  App  Infrastructure  (3/4)  

•  Customized  Event  System  – Event  Driven  Architecture  – Design  Pa[erns  

•  Pub-­‐Sub  •  Observer  •  Mediator  

– Example  •  Dojo  Pub-­‐Sub  •  Jquery  trigger  /  on  

8  

Page 9: Structured web apps

Web  App  Infrastructure  (4/4)  

•  Widget  – Widget  DefiniFon  –  Inter-­‐widget  CommunicaFon  

•  e.g.  Tuplespace  for  inter-­‐widget  communicaFon  –  Sheng  Tian  

– Example  •  Dojo  gadget  •  jQuery  UI  widget  

9  

Page 10: Structured web apps

Rich  ApplicaFon  Architecture  (1/2)  

•  SeparaFon  of  UI,  Business  Logic,  and  Data  ManipulaFon  – MV*  Pa[erns  

•  MVC  Design  Pa[ern  •  MVP  (Model-­‐View-­‐Presenter)  •  MVVM  (Model-­‐View-­‐ViewModel)  

•  Reference  – Addy  Osmani  -­‐  Journey  Through  The  JavaScript  MVC  Jungle  

10  

Page 11: Structured web apps

Rich  ApplicaFon  Architecture  (2/2)  •  Data  Binding  –  Bind  the  data  with  UI  

•  Data  SynchronizaFon  –  e.g.  Backbone.Model.sync  

•  Template  Rendering  – Mustache  –  Underscore  Template  –  Dojo  Django  Template  

•  Router,  History  Management  –  Single  Page  ApplicaFon,  e.g.  YouPost  

•  Backward  /  Forward  Bu[on,  e.g.  Backbone.Route  /  Backbone.History  

11  

Page 12: Structured web apps

UI  InteracFon  

•  Effects  and  AnimaFons  – e.g.  jQuery  effects  – CSS3  animaFons  

•  UI  Widgets  – e.g.  YUI,  Dojo,  ExtJs,  jQueryUI  

•  Drawing  – HTML5  Canvas  2D,  Canvas  WebGL  3D  – SVG  /  VML,  e.g.  Raphael,  D3.js  

12  

Page 13: Structured web apps

Development  Toolchain  (1/3)  

•  JavaScript  Build  and  OpFmizer  – Google  Closure  Library  – RequireJS  – Dojo,  YUI,  etc.  

•  Task  Manager  – Grunt.js  –  Jake  

13  

Page 14: Structured web apps

Development  Toolchain  (2/3)  

•  Package  Management  (Like  Maven  in  Java)  – Twi[er  Bower  – Ender.js  (open  module  JavaScript  framework)  – Volo.js  – Component  

14  

Page 15: Structured web apps

Development  Toolchain  (3/3)  

•  JavaScript  Unit  Test  Tools  – QUnit    –  An  easy-­‐to-­‐use  JS  unit  tesFng  framework  –  Jasmine  –  A  behavior-­‐driven  development  framework  

– Mocha  –  A  feature-­‐rich  JS  test  framwork  running  on  node  and  the  browser  

•  Browser  AutomaFon  Test    – Selenium  IDE  &  WebDriver  – Dojo  ObjecFve  Harness  (DOH)  

15  

Page 16: Structured web apps

JavaScript  Frameworks  Summary  (1/3)  

•  API  Wrappers  Frameworks  –  Example  

•  jQuery  •  MooTools  

–  Pros  •  Lighweight  •  Easy  to  use  

–  Cos  •  Have  to  spend  too  much  Fme  on  choosing  other  frameworks  •  May  cause  bad  code  quality  

16  

Page 17: Structured web apps

JavaScript  Frameworks  Summary    (2/3)  

•  Full-­‐Featured  Frameworks  –  Examples  

•  Dojo  •  YUI  •  ExtJs  •  Google  Closure  Library  

–  Pros  •  Good  code  quality  •  Well-­‐documented  •  All  covered,  usually  no  third  party  libraries  required  

–  Cons  •  Heavyweight  •  Steep  Learning  Curve  

17  

Page 18: Structured web apps

JavaScript  Frameworks  Summary    (3/3)  •  Single  Page  ApplicaFon  

–  Example  •  MVC:  Ember.js,  AngularJS  •  MVP:  Backbone.js  •  MVVM:  Knockout.js  •  Event  Driven:  Twi[er  Flight  

–  Pros  •  Less  server  requests  •  Be[er  UI  experience  •  Specially  suit  for  rich  /  complex  client  applicaFon  

–  Problems  •  Architecture  style  

–  MVC,  MVP  or  MVVM  •  Intrusive  and  exclusive  Frameworks  

–  Intrusive  and  exclusive:  Ember.js  and  AngularJS,  Twi[er  Flight  –  Non-­‐intrusive:  Backbone.js  and  Knockout.js  

•  View  –  String  based  template  (Ember.js,  Backbone.js)  –  DOM  enhancement  (AngularJS,  Knockout.js)  

18  

Page 19: Structured web apps

New  Languages  

•  TypeScript,  by  Microsoq  •  CoffeeScript  •  ClosureScript  •  Dart,  by  Google  

19  

Page 20: Structured web apps

TypeScript  •  A  Typed  Superset  of  JavaScript  that  compiles  to  plain  

JavaScript  •  Superset  of  ECMAScript  6  •  Created  by  Anders  Hejlsberg,  father  of  Pascal  and  C#  

20  

TypeScript   JavaScript  

Page 21: Structured web apps

CoffeeScript  •  A  li[le  language  that  compiles  into  JavaScript  •  An  a[empt  to  expose  the  good  parts  of  JavaScript  in  a  simple  way  •  GitHub  languages  ranking  10  and  sFll  raising  

•  Simple  Syntax  (Combine  of  Python  and  Ruby)  •  Fully  object-­‐oriented  •  Always  follows  the  best  pracFce  of  JavaScript  

–  e.g.  No  global  variables,  no  ‘with’  keyword  

•  Editor:  Sublime  Text  •  Debug:  Firebug  +  Source  map  

21  

CoffeeScript  

JavaScript  

Page 22: Structured web apps

ClojureScript  

•  ClojureScript  is  Lisp  for  Frond  end  development  

22  

Page 23: Structured web apps

Dart  

•  Dart  is  a  new  language  but  looks  similar  to  JavaScript  •  It’s  targeFng  for  applicaFon  development  •  Language  Features  –  Classes  –  OpFonal  types  –  Lexical  scoping  –  Libraries  –  Isolates  

•  All  dart  code  runs  inside  of  isolates.  Each  isolate  has  its  own  memory  heap.  

–  Toolability  

23  

Page 24: Structured web apps

Trend  

•  Web  Apps  are  becoming  more  dynamic,  be[er  user  experience  

•  Logic  are  moving  from  server  side  to  client  side  •  noBackend  in  Front-­‐Trends  2013  –  noBackend  is  an  approache  to  decouple  apps  from  backends,  by  abstracFng  backend  tasks  with  frontend  code.  This  allows  frontend  developers  to  focus  on  user  experience  and  gives  backend  developers  more  flexibility  on  the  implementaFon  side.  

24  

Page 25: Structured web apps

Q  &  A  

25