Caridy Patiño is a principal frontend engineer at Yahoo who discusses the evolution of web applications from traditional websites to single-page applications (SPAs). SPAs support multiple interactive states without reloading the page, improving performance and usability. Popular SPA frameworks today include React, AngularJS, EmberJS, and Backbone. SPAs initially render on the server for faster load times and then use the browser to handle further interactivity like a traditional desktop application.

1. #FOWA

2. Caridy Patiño
Principal Frontend Engineer at Yahoo!
caridy@yahoo-inc.com
@caridy

5. The Time Machine (2002)

6. Safety Not Guaranteed (2012)

8. The rise of
single-page applications

9. http://www.flickr.com/photos/roddh/7998107606/

10. http://www.flickr.com/photos/diverkeith/379540273/

11. from web applications
to single-page applications

12. evolution of web applications

13. urls

14. url fragments

15. websites

16. ajax

17. complex apps became popular

18. our amazing big brains
http://www.flickr.com/photos/pennstatelive/8972110324/

19. http://www.flickr.com/photos/indigotimbre/66258903/

20. back/forward buttons were patched
using fragments to improve usability

21. the broken web
was eventually fixed

22. performance

23. we hack things to avoid
disrupting the workflow with
a full page reload to fulfill an
action as a consequence of a
user interaction

24. single-page applications

25. support for multiple states
to react to user interaction

27. users can switch between
different states in no time

28. ... and doing so without breaking
any of the core features of the web
(history, url, openness)

29. building single-page
applications today

30. Rendr
AngularJS
Backbone
EmberJS
Meteor
DerbyJS
YAF
React
Mojito

31. support a chain of user interactions
to fulfill an operation without
a full page refresh

32. patterns

33. MV* for the win

34. url driven web applications

35. conventions over configurations

36. libraries over frameworks

37. UI data bindings

38. the /#!/ugly/ url is fading out

39. initial rendering on the server

40. nodejs as the server runtime

41. server produces the initial state of the
application, then passing the control
to the browser to continue function
as a single page application

43. progressive enhancement,
graceful degradation,
and performance as a feature

44. performance as a way to
enhance user experience

45. only seconds of our users’ attention

47. modown is a set of libraries and
components to power
single page applications

48. modown is coming soon!

49. npmjs.org/search?q=modown
github.com/yui/
github.com/yahoo/

50. Thanks
@caridy