Structured web apps
2 likes662 views
The document discusses challenges in front-end web development and how JavaScript frameworks address these challenges. It covers topics like native JavaScript APIs, modularity, object-oriented programming, events, widgets, and development tooling. Frameworks help with issues like browser compatibility, dependency management, and architecture patterns for rich web apps. New languages like TypeScript and CoffeeScript also compile to JavaScript to help development.
More Related Content
What's hot (20)
Viewers also liked (7)
Similar to Structured web apps (20)
Recently uploaded (20)
Structured web apps
- 1. Structured Web Apps Tim Tian
- 2. Outline • Front End Development Challenges • JavaScript Frameworks • New Languages 2
- 3. Frond End Development Challenges • JavaScript, DOM and BOM NaFve API • Web App Infrastructure • Rich ApplicaFon Architecture • UI InteracFon • Development Toolchain 3
- 4. NaFve API Problems (1/2) • Hard to Use • Browser CompaFbility Issues 4
- 5. 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
- 6. 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
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. Development Toolchain (1/3) • JavaScript Build and OpFmizer – Google Closure Library – RequireJS – Dojo, YUI, etc. • Task Manager – Grunt.js – Jake 13
- 14. Development Toolchain (2/3) • Package Management (Like Maven in Java) – Twi[er Bower – Ender.js (open module JavaScript framework) – Volo.js – Component 14
- 15. 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
- 16. 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
- 17. 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
- 18. 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
- 19. New Languages • TypeScript, by Microsoq • CoffeeScript • ClosureScript • Dart, by Google 19
- 20. 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
- 21. 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
- 22. ClojureScript • ClojureScript is Lisp for Frond end development 22
- 23. 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
- 24. 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
- 25. Q & A 25