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 applications for desktop and mobile devices. 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 as the new bread of what we call isomorphic javascript applications.TRANSCRIPT
![Page 1: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/1.jpg)
#feecbr @caridy
![Page 2: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/2.jpg)
The rise of single-page applications
![Page 3: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/3.jpg)
Caridy Patiño Principal Frontend Engineer at Yahoo! [email protected] @caridy
![Page 4: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/4.jpg)
![Page 5: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/5.jpg)
modown
![Page 6: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/6.jpg)
The Time Machine (2002)
the future!
![Page 7: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/roddh/7998107606/
what is coming next?
![Page 8: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/diverkeith/379540273/
the next big wave
![Page 9: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/9.jpg)
from web applications to single-page applications
to “isomorphic” applications
![Page 10: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/10.jpg)
evolution of web applications
![Page 11: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/11.jpg)
urls
![Page 12: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/12.jpg)
url #fragments
![Page 13: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/13.jpg)
websites
![Page 14: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/14.jpg)
ajax (web 2.0)
![Page 15: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/15.jpg)
complex apps became popular
![Page 16: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/pennstatelive/8972110324/
need for speed
![Page 17: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/17.jpg)
http://www.flickr.com/photos/indigotimbre/66258903/
users were happy with the broken web
![Page 18: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/18.jpg)
back/forward buttons patched by using #fragments
![Page 19: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/19.jpg)
the broken web was fixed
![Page 20: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/20.jpg)
we hack things to avoid disrupting the workflow with a full page reload to fulfill an action as a consequence of a
user interaction
![Page 21: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/21.jpg)
only seconds of our users’ attention
![Page 22: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/22.jpg)
it is all about performance
![Page 23: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/23.jpg)
single-page applications
![Page 24: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/24.jpg)
support for multiple states to react to user interaction
![Page 25: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/25.jpg)
![Page 26: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/26.jpg)
users can switch between different states in no time
![Page 27: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/27.jpg)
building single-page applications today
![Page 28: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/28.jpg)
Mojito
EmberJS
AngularJSRendr
BackboneMeteor
DerbyJS
YAF
React
![Page 29: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/29.jpg)
support a chain of user interactions to fulfill an operation without
a full page refresh
![Page 30: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/30.jpg)
the problem with single page applications
![Page 31: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/31.jpg)
client side MVC as we know it!
index.html
*.js, *.css
datadata
data
data
browser FE Box CDN API
time
to c
onsu
me
info
rmat
ion
![Page 32: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/32.jpg)
isomorphic applications
![Page 33: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/33.jpg)
url driven web applications
![Page 34: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/34.jpg)
isomorphic apps are single-page apps without breaking any of the core
features of the web (history, openness, url, seo)
![Page 35: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/35.jpg)
app code
client runtime
server runtime
Datarest/API
isomorphic app
![Page 36: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/36.jpg)
writing application code that runs in multiple runtimes
(server and client)
![Page 37: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/37.jpg)
rendering initial state on the server, then let the browser takes over
![Page 38: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/38.jpg)
server passes the control to the browser to continue function as a
single page application
![Page 39: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/39.jpg)
![Page 40: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/40.jpg)
progressive enhancement, graceful degradation,
and performance as a feature
![Page 41: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/41.jpg)
performance as a way to enhance user experience
![Page 42: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/42.jpg)
recommendations for building isomorphic applications
![Page 43: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/43.jpg)
MVC* for the win
![Page 44: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/44.jpg)
conventions over configurations
![Page 45: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/45.jpg)
avoid opinionated frameworks when building complex apps
![Page 46: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/46.jpg)
app framework
libraries
app foundation
app code libraries
app code
opinionated framework vs library-foundation
![Page 47: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/47.jpg)
libraries over frameworks
![Page 48: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/48.jpg)
use template engines to do UI data bindings
![Page 49: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/49.jpg)
/#!/dont-do-it/
![Page 50: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/50.jpg)
![Page 51: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/51.jpg)
nodejs as the server runtime
![Page 52: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/52.jpg)
building blocks rather than prescriptions
![Page 53: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/53.jpg)
building blocks for isomorphic javascript applications
![Page 54: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/54.jpg)
extending express
![Page 55: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/55.jpg)
ES6 centric
![Page 56: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/56.jpg)
we call it “modown”
![Page 57: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/57.jpg)
modown is a set of libraries and components to power single page applications
![Page 58: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/58.jpg)
modown components
mojito-next (yui, search)
hermes (flickr)
assembler (touchdown)
![Page 59: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/59.jpg)
npmjs.org/search?q=modown
![Page 60: The rise of single-page applications](https://reader033.vdocuments.mx/reader033/viewer/2022052820/548500ee5806b5c2588b4699/html5/thumbnails/60.jpg)
Thanks @caridy