Download - The rise of single-page applications
#feecbr @caridy
The rise of single-page applications
Caridy Patiño Principal Frontend Engineer at Yahoo! [email protected] @caridy
modown
The Time Machine (2002)
the future!
http://www.flickr.com/photos/roddh/7998107606/
what is coming next?
http://www.flickr.com/photos/diverkeith/379540273/
the next big wave
from web applications to single-page applications
to “isomorphic” applications
evolution of web applications
urls
url #fragments
websites
ajax (web 2.0)
complex apps became popular
http://www.flickr.com/photos/pennstatelive/8972110324/
need for speed
http://www.flickr.com/photos/indigotimbre/66258903/
users were happy with the broken web
back/forward buttons patched by using #fragments
the broken web was fixed
we hack things to avoid disrupting the workflow with a full page reload to fulfill an action as a consequence of a
user interaction
only seconds of our users’ attention
it is all about performance
single-page applications
support for multiple states to react to user interaction
users can switch between different states in no time
building single-page applications today
Mojito
EmberJS
AngularJSRendr
BackboneMeteor
DerbyJS
YAF
React
support a chain of user interactions to fulfill an operation without
a full page refresh
the problem with single page applications
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
isomorphic applications
url driven web applications
isomorphic apps are single-page apps without breaking any of the core
features of the web (history, openness, url, seo)
app code
client runtime
server runtime
Datarest/API
isomorphic app
writing application code that runs in multiple runtimes
(server and client)
rendering initial state on the server, then let the browser takes over
server passes the control to the browser to continue function as a
single page application
progressive enhancement, graceful degradation,
and performance as a feature
performance as a way to enhance user experience
recommendations for building isomorphic applications
MVC* for the win
conventions over configurations
avoid opinionated frameworks when building complex apps
app framework
libraries
app foundation
app code libraries
app code
opinionated framework vs library-foundation
libraries over frameworks
use template engines to do UI data bindings
/#!/dont-do-it/
nodejs as the server runtime
building blocks rather than prescriptions
building blocks for isomorphic javascript applications
extending express
ES6 centric
we call it “modown”
modown is a set of libraries and components to power single page applications
modown components
mojito-next (yui, search)
hermes (flickr)
assembler (touchdown)
npmjs.org/search?q=modown
Thanks @caridy
