Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1eWJEwD. Steven Sanderson explains how to write abstract and testable application logic without any DOM clutter with Knockout.js and how Knockout automatically updates app’s UI whenever needed. Filmed at qconlondon.com. Steven Sanderson is a JavaScript enthusiast, Knockout.js creator, Bristolian, Developer at Microsoft. Twitter: @stevensanderson

1. RICH HTML/JS APPS
with
STEVEN SANDERSON, MICROSOFT
@STEVENSANDERSON
KNOCKOUT.JS, MOBILE
SERVICES
and no web server

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/html5-js-knockoutjs

3. Presented at QCon London
www.qconlondon.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. WHAT’S IN THIS TALK?
2. CLOUD BACKENDS
1. KNOCKOUT.JS
3. MOBILE APPS
FUN
NO WEB
SERVER
BUZZWORDS MAGIC
AZURE
SPA
MODELS
VIEWS
VIEWMODELS
PHONEGAP
APP STORES
iOS
ANDROID
WINDOWS PHONE

5. RICH WEB APPS: WHAT’S THE PROBLEM?

6. KNOCKOUT.JS & MVVM
MODEL
Server / DB JavaScript + observables HTML + bindings
MIT LICENSE
ON GITHUB
~ 3 YEARS OLD
MODEL
VIEW
VIEWMODEL
VIEW
MODEL
VIEWAUTO!

7. Let’s DO
AN APP!

8. wwwsrv01 wwwsrv02
sqldb-master prod-san-backup
nginx-proxy
BACKEND SERVICEas a

9. TODAY: SO SOON:

12. STEVE’S MISCELLANY OF PERSONAL OPINIONS
DEVELOP IN A BROWSER
STYLE FOR RETINAUSE WEBKIT REMOTE DEBUGGER
CSS TRANSITIONSCOMMERCIAL ARTWORKPLUGINS ARE EASY
One Multiple
Web dev Depends Use HTML+JS
Native mobile dev Go Native Depends
SKILL SET
TARGET PLATFORM
PHONEGAP TIPS
iOS-SPECIFIC TIPS

13. SUMMARY
2. CLOUD BACKENDS
1. SINGLE-PAGE WEB APPS
3. MOBILE APPS
FUN
NO WEB
SERVER
BUZZWORDS MAGIC
AZURE
KNOCKOUT.JS
MODELS
VIEWS
VIEWMODELS
PHONEGAP
APP STORES
iOS
ANDROID
WINDOWS PHONE

14. PhoneGap
Knockout.js
MobileServices.js
Native
filesystem
Browser
(public access)
Windows Azure Mobile Service ASP.NET MVC site
AppBackend

15. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/html5-js-
knockoutjs