Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Large-Scale Web Development
with JavaScript
Navid Ahmadi
Ph.D. in Computer Science
October 30, 2013
MVC
Data Model
View
– Template

Controller
View Model
Binder (Observer)
Router
REST
JSON
Web Software Architectures
DB

DB

Controllers, Routers,
Model, UI Templates

Data management
Authentication

Server
Clien...
JS challenges
JS apps get cluttered quickly
– Missing organization
– Over 2K lines are hard to manage
– No support for mod...
Client-side MVC in JavaScript
View
(HTML Template)

Loads into DOM

Controller

Sends user actions
Updates the DOM

Create...
JS-based MVC Libraries

http://todomvc.com/
Backbone.js
http://backbonejs.org/
Used in Groupon Now!, Hulu, Delicious, Khan Academy,
Foursquare,…

Main concepts
–
–
–
...
Backbone Model*

* Available at http://backbonetutorials.com/
Extending a Model
Observing the changes in the Model

Observable
Binding the Model to the REST API

POST /user : Server returns the ‘id’
Retrieving Model’s data from the Server
GET /user/1
Update/Delete from the Server

PUT /user/1

DELETE /user/1
Backbone Collection
Backbone View
Connecting the View to the Model*

* http://stackoverflow.com/questions/5651629/backbone-js-collections-and-views/5656433#...
Backbone Router
Backbone Pros and Cons
Pros
–
–
–
–

Tied to Underscore.js
Lightweight (6K V1.1.0)
Very flexible
Works offline
• Using Loc...
Asynchronous Module Definition
AMD
–
–
–
–

http://requirejs.org/
Allows creating packages, modules, and dependencies
Auto...
TypeScript
Superset of JavaScript
– Compiler (.ts => .js)
– Open-source

Language features:
–
–
–
–

Static Type Checking
...
Other MV* solutions
Angular: MVW
– Complete development framework
– Two-way binding of View and Model
– Increases developm...
Other goodies
Git, Github, Bitbucket
Responsive Design
– Bootstrap

Glyph Icons, FontAwesome
NoSQL Databases
– MongoDB

Se...
Conclusions
Build large-scale Web applications with
– MVC (Code Organization, Separation of Concerns)
– AMD (Code Organiza...
About Me

http://www.linkedin.com/in/nahmadi
navid.ai@gmail.com

ASP.NET developer in 2002-2005
When C# was still in beta!...
Upcoming SlideShare
Loading in …5
×

Large-Scale Web Development with JavaScript

1,608 views

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

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 http://todomvc.com/
  7. 7. Backbone.js http://backbonejs.org/ Used in Groupon Now!, Hulu, Delicious, Khan Academy, Foursquare,… Main concepts – – – – Model Collection View Router
  8. 8. Backbone Model* * Available at http://backbonetutorials.com/
  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* * http://stackoverflow.com/questions/5651629/backbone-js-collections-and-views/5656433#5656433
  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 – – – – http://requirejs.org/ Allows creating packages, modules, and dependencies Automatically backed by a minifier (Closure compiler, Uglify) Cons: Does not allow circular dependencies has.js – https://github.com/phiggins42/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 http://www.typescriptlang.org 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 www.todomvc.com
  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 http://www.linkedin.com/in/nahmadi navid.ai@gmail.com 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

×