fowa2013: the rise of single page applications
DESCRIPTION
In the last couple of years we have seen an explosion of single-page applications beyond the traditional complex applications, making its way into the mainstream and the consequent appearance of frameworks to facilitate the creation of these apps. In this session we will cover the motivations and implications of creating single-page apps, as well as the current state of the industry, the trends that are starting to arise in the field and the role of nodejs to facilitate the initial render process on the server side before handing over the control to the browser, as a way to speed up the initial rendering on mobile devices.TRANSCRIPT
![Page 1: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/1.jpg)
#FOWA
![Page 3: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/3.jpg)
![Page 4: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/4.jpg)
![Page 5: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/5.jpg)
The Time Machine (2002)
![Page 6: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/6.jpg)
Safety Not Guaranteed (2012)
![Page 7: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/7.jpg)
![Page 8: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/8.jpg)
The rise ofsingle-page applications
![Page 9: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/roddh/7998107606/
![Page 10: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/diverkeith/379540273/
![Page 11: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/11.jpg)
from web applicationsto single-page applications
![Page 12: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/12.jpg)
evolution of web applications
![Page 13: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/13.jpg)
urls
![Page 14: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/14.jpg)
url fragments
![Page 15: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/15.jpg)
websites
![Page 16: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/16.jpg)
ajax
![Page 17: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/17.jpg)
complex apps became popular
![Page 18: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/18.jpg)
our amazing big brains
http://www.flickr.com/photos/pennstatelive/8972110324/
![Page 19: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/19.jpg)
http://www.flickr.com/photos/indigotimbre/66258903/
![Page 20: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/20.jpg)
back/forward buttons were patchedusing fragments to improve usability
![Page 21: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/21.jpg)
the broken webwas eventually fixed
![Page 22: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/22.jpg)
performance
![Page 23: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/23.jpg)
we hack things to avoiddisrupting the workflow witha full page reload to fulfill anaction as a consequence of a
user interaction
![Page 24: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/24.jpg)
single-page applications
![Page 25: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/25.jpg)
support for multiple statesto react to user interaction
![Page 26: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/26.jpg)
![Page 27: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/27.jpg)
users can switch betweendifferent states in no time
![Page 28: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/28.jpg)
... and doing so without breakingany of the core features of the web
(history, url, openness)
![Page 29: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/29.jpg)
building single-pageapplications today
![Page 30: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/30.jpg)
Mojito
EmberJS
AngularJSRendr
BackboneMeteor
DerbyJS
YAF
React
![Page 31: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/31.jpg)
support a chain of user interactionsto fulfill an operation without
a full page refresh
![Page 32: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/32.jpg)
patterns
![Page 33: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/33.jpg)
MV* for the win
![Page 34: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/34.jpg)
url driven web applications
![Page 35: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/35.jpg)
conventions over configurations
![Page 36: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/36.jpg)
libraries over frameworks
![Page 37: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/37.jpg)
UI data bindings
![Page 38: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/38.jpg)
the /#!/ugly/ url is fading out
![Page 39: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/39.jpg)
initial rendering on the server
![Page 40: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/40.jpg)
nodejs as the server runtime
![Page 41: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/41.jpg)
server produces the initial state of the application, then passing the control to the browser to continue function
as a single page application
![Page 42: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/42.jpg)
![Page 43: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/43.jpg)
progressive enhancement,graceful degradation,
and performance as a feature
![Page 44: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/44.jpg)
performance as a way toenhance user experience
![Page 45: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/45.jpg)
only seconds of our users’ attention
![Page 46: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/46.jpg)
![Page 47: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/47.jpg)
modown is a set of libraries and components to powersingle page applications
![Page 48: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/48.jpg)
modown is coming soon!
![Page 49: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/49.jpg)
npmjs.org/search?q=modowngithub.com/yui/
github.com/yahoo/
![Page 50: FOWA2013: The rise of single page applications](https://reader030.vdocument.in/reader030/viewer/2022020217/549c6459ac7959c92a8b470a/html5/thumbnails/50.jpg)
Thanks
@caridy