Post on 06-May-2015
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