#feecbr	

@caridy
The rise of	


single-page applications
Caridy Patiño	


Principal Frontend Engineer at Yahoo!	

!

caridy@yahoo-inc.com	

@caridy
modown
The Time Machine (2002)

the future!
what is coming next?

http://www.flickr.com/photos/roddh/7998107606/
the next big wave

http://www.flickr.com/photos/diverkeith/379540273/
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
need for speed

http://www.flickr.com/photos/pennstatelive/8972110324/
users were happy with
the broken web

http://www.flickr.com/photos/indigotimbre/66258903/
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	

u...
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
Rendr
AngularJS

Backbone

EmberJS

Meteor
DerbyJS

YAF

React

Mojito
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
time to consume information

*.js, *.css

data
data

data
data

browser

FE Box
...
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)
isomorphic app
server runtime

app code

client runtime

rest/API	


Data
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
opinionated framework vs library-foundation

libraries
app
foundation
app framework
app code

app
code

libraries
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
The rise of single-page applications
The rise of single-page applications
The rise of single-page applications
The rise of single-page applications
Upcoming SlideShare
Loading in …5
×

The rise of single-page applications

2,290 views

Published on

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.

Published in: Technology, Education

The rise of single-page applications

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

×