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.

1. Large-Scale Web Development
with JavaScript
Navid Ahmadi
Ph.D. in Computer Science
October 30, 2013

2. MVC
Data Model
View
– Template
Controller
View Model
Binder (Observer)
Router
REST
JSON

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. 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. 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. JS-based MVC Libraries
http://todomvc.com/

7. Backbone.js
http://backbonejs.org/
Used in Groupon Now!, Hulu, Delicious, Khan Academy,
Foursquare,…
Main concepts
–
–
–
–
Model
Collection
View
Router

8. Backbone Model*
* Available at http://backbonetutorials.com/

9. Extending a Model

10. Observing the changes in the Model
Observable

11. Binding the Model to the REST API
POST /user : Server returns the ‘id’

12. Retrieving Model’s data from the Server
GET /user/1

13. Update/Delete from the Server
PUT /user/1
DELETE /user/1

14. Backbone Collection

15. Backbone View

16. Connecting the View to the Model*
* http://stackoverflow.com/questions/5651629/backbone-js-collections-and-views/5656433#5656433

17. Backbone Router

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. 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. 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. 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. 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. 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. 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