Large-Scale Web Development with JavaScript


Published on

This presentations discusses the critical technologies to build large-scale Web applications, including MVC architectures such as Backbone.js, Asynchronous Module Definition with require.js, and TypeScript.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Left is older and has been around for a long timeRight is newer approach and more interesting as the Web is not about the page anymore but about the applications
  • 1- They help organize the application 2- Convention over Configuration (of Rails)
  • Large-Scale Web Development with JavaScript

    1. 1. Large-Scale Web Development with JavaScript Navid Ahmadi Ph.D. in Computer Science October 30, 2013
    2. 2. MVC Data Model View – Template Controller View Model Binder (Observer) Router REST JSON
    3. 3. Web Software Architectures DB DB Controllers, Routers, Model, UI Templates Data management Authentication Server Client User Input, Events Data Generated UI Model, View, Controllers, User input and Event Handling UI Styling, Validation • • • • Rails, .NET MVC,… Thin client More Secure Web Pages • • • • Backbone, Angular, … Thick client Rich and Responsive Web applications Data
    4. 4. JS challenges JS apps get cluttered quickly – Missing organization – Over 2K lines are hard to manage – No support for modules, packages, namespaces Dynamic language 1. MVC 2. TypeScript – No static type checking, No Refactoring tools – Variable scopes are not clear – Software fails at runtime Build and deploy – Minification and obfuscation should be done explicitly – Hard to create builds based on configurations 3. AMD
    5. 5. Client-side MVC in JavaScript View (HTML Template) Loads into DOM Controller Sends user actions Updates the DOM Creates the Binder Updates the Model (triggered by the user or the system) Binder (observer) Sends Updates Data Model Client (observable) Server Routes Rest of the Software
    6. 6. JS-based MVC Libraries
    7. 7. Backbone.js Used in Groupon Now!, Hulu, Delicious, Khan Academy, Foursquare,… Main concepts – – – – Model Collection View Router
    8. 8. Backbone Model* * Available at
    9. 9. Extending a Model
    10. 10. Observing the changes in the Model Observable
    11. 11. Binding the Model to the REST API POST /user : Server returns the ‘id’
    12. 12. Retrieving Model’s data from the Server GET /user/1
    13. 13. Update/Delete from the Server PUT /user/1 DELETE /user/1
    14. 14. Backbone Collection
    15. 15. Backbone View
    16. 16. Connecting the View to the Model* *
    17. 17. Backbone Router
    18. 18. Backbone Pros and Cons Pros – – – – Tied to Underscore.js Lightweight (6K V1.1.0) Very flexible Works offline • Using LocalStorage • Optimistic since V0.9 Cons – Verbose (e.g., GPL vs DSL) – REST-oriented
    19. 19. Asynchronous Module Definition AMD – – – – Allows creating packages, modules, and dependencies Automatically backed by a minifier (Closure compiler, Uglify) Cons: Does not allow circular dependencies has.js – – Feature detection – build configuration • Dead code removal by Closure Compiler
    20. 20. TypeScript Superset of JavaScript – Compiler (.ts => .js) – Open-source Language features: – – – – Static Type Checking Interfaces Classical Inheritance Generics Microsoft Visual Studio Plugin – Intellisense – Refactoring (e.g., variable renaming)
    21. 21. Other MV* solutions Angular: MVW – Complete development framework – Two-way binding of View and Model – Increases development speed • 5K lines backbone app reported to become 750 lines – Opinionated Knockout – KO.Observable() Explore
    22. 22. Other goodies Git, Github, Bitbucket Responsive Design – Bootstrap Glyph Icons, FontAwesome NoSQL Databases – MongoDB Server-side JS – Node.js CSS frameworks – LESS, Blueprint,… Real-time apps – Meteor, Derby, Firebase, Pusher Continuous Integration, Test-driven design – Buster, Jasmine, TestSwarm
    23. 23. Conclusions Build large-scale Web applications with – MVC (Code Organization, Separation of Concerns) – AMD (Code Organization, Easy Deployment) – TypeScript (Static Type Checking) JS dev has been revolutionized in the last 5 years – Stay updated with the newest technologies – Consider integrating new tools into your projects – Consider migrating your existing projects!
    24. 24. About Me ASP.NET developer in 2002-2005 When C# was still in beta! Got into JavaScript development in 2006 2007-08: Created a Game Engine and Compiler – JS + Canvas Agent – 4K LOC Gallery Agent Gallery Depiction Editor 2009-11: Created an Online Game Design Environment Depiction – Front-end: JS + Dojo; Backend: Drupal + Nginx Editor – 15+K LOC UX design for novice users – Game level editor – Visual Programming Language Conditions Programming Environment Actions