Building single page applications

Editor's Notes

• #2: Please keep your eye on notes – some slides contain a lot of good extra insight!
• #7: “App-like user experience”Touch navigationInstant response to your clicksFluid transitions between pagesCached & pre-fetched contentBinding to your own (or 3rd party) RESTful APIEase of populating modelsReplacement for Flash or Java in your web pagese.g. FlipBoard, LinkedIn iPadHybrid (native) HTML5 applicationse.g. FlipBoard, LinkedIn iPadApache Cordova, Embedded WebViews, Tizen, Windows 8Mobile version of your web sitem.veikkaus.fi, plus.hbl.fi, app.ft.com
• #10: Note: Ease of development = (design, implementation, testing, maintenance)Testing and maintenance are the hard partsServer-sideThe good old way; write that server-side templateDevelopment: There are dozens of FWs for every major language for thisHow to deal with user state? Store on cookie; Store on session  memory  clustering?Selenium will test your site alrightUX: How to get that app-like experience with 500ms clicks? Transitions? Animations?Robots: No problem if you usecanonicalurls & pagesthemselvesdon’trequireuserstateServer-side + AJAXDevelopment: The problem is in transmitting the UI state & synchronize it in both ends;The simple test: Click refresh on an AJAX page – did you get what you expected?How did you plan to test your system after all? What does your API look like?Spaghetti architectureUX: Can be made fast & responsive, but it’s tedious.Robots: If you’ve got even a single bit that is rendered on client side only, I’m sorry.PJAXDevelopment: The concept is very simple but I’m not aware of any widely used, ready-made frameworks for itBold attempts: https://github.com/defunkt/jquery-pjax, https://github.com/rails/turbolinksNo idea on how to automate testing on itUX: The pages can be pretty fast, but likely the future states are not anticipated & cacheable (like in SPAs)Robots: Twitter actually did SPA before and moved back to PJAX (I believe they missed the searchability too much)SPADevelopment: Clean model (most of the FWs use MVC model, and the future content can be fetched within model without affecting the current view)Usually server-side API is RESTful & clean and hence can be tested easily; testing the client UI is a bit so-soUX: Can have all the bells and whistlesRobots & old browsers: Test for Google (likely won’t work), other crawlers won’t work; IE7/8 and feature phone browsers will cause headacheSPA is not always the only choice, there are reasons for other choices, tooWhy Twitter went back SPA to PJAX:http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
• #11: In the end, all of the frameworks do the same thing. There is no need to switch between them on-project basis (learning always takes some time)Backbone: Simple MVC model, only ~ 800 LOC. Your grandmother would get it. No data bindings built in.Angular.js: “What DOM should have been”. Sophisticated data binding with DOM and your JavaScript model.Knockout: One of the earliest frameworks. Data binding with some enforcements on your coding styleEmber: The biggest framework (by LOC). Very object-oriented (you will drift away from DOM)
• #14: Utility toolbelts:jQuery: The de-facto DOM manipulation libraryUnderscore.js: Object and Array manipulationClient-side templating engines:Handlebars: Simple templating language that does not break HTMLDust.js: Feature-rich templating language (partials, streaming etc.)ModularizationRequire.js: Module framework for JavaScriptLESS and SASS: Stylesheet languages done rightBrowser compatibilityModernizr: HTML5 and CSS3 feature detectionUI Widget FrameworksBootstrap: Customizable UI widgetsjQuery Mobile: ThemableiOS like widgets for mobile UisBuilding & Test AutomationGrunt: JavaScript/Node.js based build systemJasmine: Behavior-driven test framework; works for TDD-style processQUnit: JavaScript unit testing framework developed by jQuery communityServer APIs made easy:Node.js: JavaScript server-side stack; great for quick no nonsense API servers;express.js: Web application framework for Node.jsApplication BoilerplatesYeoman: An ambitious, grunt-based boilerplate creation utility servers;Backbone boilerplate: Simple creation of Backbone based appsHTML Boilerplates & CSS Grids320andup: Responsive boilerplate with special emphasis on mobileHTML5 Boilerplate: The classic HTML5 app structureSemantic.gs: Easy an customizable CSS grid systemPackaging into a native app:Apache Cordova: ex. PhoneGap; packaging as a hybrid app for multi-platform
• #15: Browser controls:Back/ForwardReloadBookmarkingSome samples on handling URL rewriteshttp://www.josscrowcroft.com/2012/code/htaccess-for-html5-history-pushstate-url-routing/
• #16: In most of the cases the flat model is ok, because you don’t want to display multiple levels of hierarchy in a single page/viewYou can extend Backbone to support deeper structures, you will need it if you want to avoid making multiple server queriesIf your structure is static, your Collection can nest other Collections as children (AFAIK Collections can’t have Collections in place of Models)You need to write a custom parse() that will notify your child collections abIt’s complicated…Backbone has a fundamental flaw in blocking input validation:In most of the cases, the user input (e.g. for text) is invalid; Backbone blocks that. The workaround is to
• #17: For better real-time communications support, see socket.io
• #18: When using Angular, you don’t need to do a single thing to map your model changes back to DOM
• #19: Note: In most of the cases you would just want to re-render the view (unless it owns the whole DOM) for changing the state in the UI.Exception cases:You have an input form and you don’t want to lose focusYour DOM subset is huge (e.g. a whole list of a few hundred items)Some highly interactive things like sliders
• #20: Each template engine works the same wayCompile the template into JavaScript function  JavaScript functionCall with parameters  HTML stringApply the string into DOM -> DOM elementsAngular is different in this regard, as the “templates” are readily as part of DOM and the manipulation happens on DOM level, not HTML levelIn basic use, comparing engines is almost pointless - pick one and stick to itSome things you might want to look for if you have a fancy application & complex templatesLocalisationTemplate inheritance (when you have a lot of redundant pages)Streaming (especially if you use the same template engine on server-side)