• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Structured web apps
 

Structured web apps

on

  • 432 views

 

Statistics

Views

Total Views
432
Views on SlideShare
432
Embed Views
0

Actions

Likes
1
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Structured web apps Structured web apps Presentation Transcript

    • Structured  Web  Apps   Tim  Tian  
    • Outline   •  Front  End  Development  Challenges   •  JavaScript  Frameworks   •  New  Languages   2  
    • Frond  End  Development  Challenges   •  JavaScript,  DOM  and  BOM  NaFve  API   •  Web  App  Infrastructure   •  Rich  ApplicaFon  Architecture   •  UI  InteracFon   •  Development  Toolchain   3  
    • NaFve  API  Problems  (1/2)   •  Hard  to  Use   •  Browser  CompaFbility  Issues   4  
    • 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  
    • 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  
    • 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  
    • 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  
    • 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  
    • 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  
    • 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  
    • 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  
    • Development  Toolchain  (1/3)   •  JavaScript  Build  and  OpFmizer   – Google  Closure  Library   – RequireJS   – Dojo,  YUI,  etc.   •  Task  Manager   – Grunt.js   – Jake   13  
    • Development  Toolchain  (2/3)   •  Package  Management  (Like  Maven  in  Java)   – Twi[er  Bower   – Ender.js  (open  module  JavaScript  framework)   – Volo.js   – Component   14  
    • 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  
    • 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  
    • 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  
    • 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  
    • New  Languages   •  TypeScript,  by  Microsoq   •  CoffeeScript   •  ClosureScript   •  Dart,  by  Google   19  
    • 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  
    • 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  
    • ClojureScript   •  ClojureScript  is  Lisp  for  Frond  end   development   22  
    • 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  
    • 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  
    • Q  &  A   25