Transcript Building Single Page Application

BUILDING SINGLE
PAGE APPLICATION
ORI CALVO
[email protected]
Client vs. Server


The web world is changing focus
We want web application not just web site
 Better
UX
 Mobile
 HTML5

As result more application logic moves to the client
side
 Security
?
The Challenge


Writing a lot of JavaScript is not easy
Good news
 Dev
Tools have better support for JavaScript
 Browsers have better debugging capabilities
 Libraries are far more mature then before

Bad news
 Still
no complier checking
 Refactoring is not supported well
Solution 1

Don’t write JavaScript.
 Use
a Java/C#/CoffeScript/XXX to JavaScript
complier
 Enjoy type checking
 Enjoy refactoring
 Hard to simulate advanced JavaScript capabilities
 Might be hard to integrate 3rd party JavaScript
libraries
Solution 2





Become JavaScript expert
Master the language until it feels natural
JavaScript has cons and pros
Embrace the good things. Ignore the bad
Wait for a new language specification
Structuring Web Application



No matter the approach you choose
Dealing with a lot of client side code requires
structure and discipline
Currently, there is no dominate library/framework
for structuring web application
 AngularJS,
Backbone
 Batman, CanJS
 Ember, Meteor
 Knockout, Spine
Demo


Demonstrate how we can use well known libraries to
create Single Page Application
While keeping reasonable design and maintainable
code
Architecture



Model – logical class the manages state and rules
View – Class that manages UI (DOM element)
App – Class that co-ordinate Models and Views
 Controller


like
All code and views are uploaded up front
Server is used only for
 Fetching
startup code
 Loading/Saving data
Architecture





Model – Plain JavaScript class
View – A wrapper around KnockoutJS template
App – Plain…
Router – A wrapper around Backnone’s router to
manage browser URL
Template – A CSHTML managed by ASP.NET MVC
Let’s Script
Something …