Single-page applications allow users to switch between different states without reloading the entire page. Isomorphic applications take this a step further by allowing the same application code to run on both the server and client, enabling server-side rendering for performance and SEO while retaining the benefits of a single-page app experience. The author introduces Modown, an open-source framework they developed that uses libraries and building blocks over opinions frameworks to help build isomorphic JavaScript apps that can run on both Node.js servers and in browsers.

1. #feecbr
@caridy

2. The rise of
single-page applications

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

5. modown

6. The Time Machine (2002)
the future!

7. what is coming next?
http://www.flickr.com/photos/roddh/7998107606/

8. the next big wave
http://www.flickr.com/photos/diverkeith/379540273/

9. from web applications
to single-page applications
to “isomorphic” applications

10. evolution of web applications

11. urls

12. url #fragments

13. websites

14. ajax
(web 2.0)

15. complex apps became popular

16. need for speed
http://www.flickr.com/photos/pennstatelive/8972110324/

17. users were happy with
the broken web
http://www.flickr.com/photos/indigotimbre/66258903/

18. back/forward buttons patched
by using #fragments

19. the broken web was fixed

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

21. only seconds of our users’ attention

22. it is all about performance

23. single-page applications

24. support for multiple states
to react to user interaction

26. users can switch between
different states in no time

27. building single-page
applications today

28. Rendr
AngularJS
Backbone
EmberJS
Meteor
DerbyJS
YAF
React
Mojito

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

30. the problem
with single page applications

31. client side MVC as we know it!
index.html
time to consume information
*.js, *.css
data
data
data
data
browser
FE Box
CDN
API

32. isomorphic applications

33. url driven web applications

34. isomorphic apps are single-page apps
without breaking any of the core
features of the web
(history, openness, url, seo)

35. isomorphic app
server runtime
app code
client runtime
rest/API
Data

36. writing application code that
runs in multiple runtimes
(server and client)

37. rendering initial state on the server,
then let the browser takes over

38. server passes the control to the
browser to continue function as a
single page application

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

41. performance as a way to
enhance user experience

42. recommendations for
building isomorphic applications

43. MVC* for the win

44. conventions over configurations

45. avoid opinionated frameworks
when building complex apps

46. opinionated framework vs library-foundation
libraries
app
foundation
app framework
app code
app
code
libraries

47. libraries over frameworks

48. use template engines
to do UI data bindings

49. /#!/dont-do-it/

51. nodejs as the server runtime

52. building blocks rather
than prescriptions

53. building blocks for
isomorphic javascript applications

54. extending express

55. ES6 centric

56. we call it “modown”

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

58. modown components
mojito-next
(yui, search)
hermes
(flickr)
assembler
(touchdown)

59. npmjs.org/search?q=modown

60. Thanks
@caridy