$30 off During Our Annual Pro Sale. View Details »

I've seen the future

I've seen the future

Talk I gave for JS group in Jönsköping, Sweden. May 7, 2014

Henrik Joreteg

May 07, 2014
Tweet

More Decks by Henrik Joreteg

Other Decks in Technology

Transcript

  1. I’ve seen the future
    @HenrikJoreteg

    View Slide

  2. JAVASCRIPT
    APPLICATIONS

    View Slide

  3. WAIT?!

    View Slide

  4. SERVER?
    COMMAND LINE?
    BROWSER?

    View Slide

  5. WEB APPLICATIONS

    View Slide

  6. WAIT?!

    View Slide

  7. WHAT IS A
    WEB APP
    REALLY?

    View Slide

  8. THE WEB HAS AN

    View Slide

  9. RAILS/.NET/DJANGO

    View Slide

  10. View Slide

  11. 1. REQUEST

    View Slide

  12. 1. REQUEST
    2. PROXY/MIDDLEWARE

    View Slide

  13. 1. REQUEST
    2. PROXY/MIDDLEWARE
    3. HANDLER

    View Slide

  14. 1. REQUEST
    2. PROXY/MIDDLEWARE
    3. HANDLER
    •DATABASE CALL

    View Slide

  15. 1. REQUEST
    2. PROXY/MIDDLEWARE
    3. HANDLER
    •DATABASE CALL
    •TEMPLATING

    View Slide

  16. 1. REQUEST
    2. PROXY/MIDDLEWARE
    3. HANDLER
    •DATABASE CALL
    •TEMPLATING
    •RETURN HTML

    View Slide

  17. THAT’S A
    WEB APP!

    View Slide

  18. WAIT?!

    View Slide

  19. View Slide

  20. GMAIL?

    View Slide

  21. GMAIL?
    FACEBOOK?

    View Slide

  22. GMAIL?
    FACEBOOK?
    EVERNOTE?

    View Slide

  23. GMAIL?
    FACEBOOK?
    EVERNOTE?
    DROPBOX?

    View Slide

  24. GMAIL?
    FACEBOOK?
    EVERNOTE?
    DROPBOX?
    TALKY.IO?

    View Slide

  25. THE WEB HAS CHANGED

    View Slide

  26. "But, I’m not building Facebook"

    View Slide

  27. View Slide

  28. 1. HTML INTERFACE

    View Slide

  29. 1. HTML INTERFACE
    2. API

    View Slide

  30. 1. HTML INTERFACE
    2. API
    3. iOS APP

    View Slide

  31. 1. HTML INTERFACE
    2. API
    3. iOS APP
    4. ANDROID APP

    View Slide

  32. AS SOON AS
    THERE IS MORE
    THAN A SINGLE
    WEB INTERFACE?

    View Slide

  33. SOMETHING
    GREATER THAN
    A WEB APP

    View Slide

  34. SO WHAT?

    View Slide

  35. IT CHANGES YOUR
    ARCHITECTURE

    View Slide

  36. LET’S TALK
    SCIENCE!

    View Slide

  37. COMPUTER
    SCIENCE

    View Slide

  38. #1 SEPARATION
    OF CONCERNS

    View Slide

  39. #2 ENCAPSULATION

    View Slide

  40. SO HOW DID WE DO?

    View Slide

  41. 1. REQUEST
    2. PROXY/MIDDLEWARE
    3. HANDLER
    •DATABASE CALL
    •TEMPLATING
    •RETURN HTML

    View Slide

  42. MAYBE NOT PERFECT…

    View Slide

  43. …BUT IT GETS BETTER

    View Slide

  44. …BY WHICH I MEAN WORSE

    View Slide

  45. WE SEND JAVASCRIPT!

    View Slide

  46. View Slide

  47. 1. CODE WITH OUR CONTENT

    View Slide

  48. 1. CODE WITH OUR CONTENT
    2. AJAX TO FETCH MORE DATA

    View Slide

  49. 1. CODE WITH OUR CONTENT
    2. AJAX TO FETCH MORE DATA
    3. WE DO TEMPLATING AGAIN!

    View Slide

  50. View Slide

  51. 4. JSON API

    View Slide

  52. 4. JSON API
    5. DASHBOARD APP

    View Slide

  53. 4. JSON API
    5. DASHBOARD APP
    6. SUPPORT TOOL APP

    View Slide

  54. 4. JSON API
    5. DASHBOARD APP
    6. SUPPORT TOOL APP
    7. MOBILE WEB APP

    View Slide

  55. View Slide

  56. WHAT IS THE
    ALTERNATIVE?

    View Slide

  57. HOW DO WE
    SEPARATE
    CONCERNS?

    View Slide

  58. API SERVERS
    SPEAK DATA

    View Slide

  59. CLIENTS DO
    PRESENTATION

    View Slide

  60. MOST CAPABLE
    UBIQUITOUS
    RUNTIME
    ON THE PLANET

    View Slide

  61. WE SHOULD STOP
    TREATING IT LIKE
    A DUMB DOCUMENT
    RENDERER…

    View Slide

  62. WEB APP
    iOS APP
    Mobile
    Web App
    HTML
    RSS
    JSON
    MAIN HTML
    INTERFACE
    JSON
    HTML
    PUBLIC API
    JSON
    FEED

    READERS 3RD
    PARTIES
    JSON
    ADMIN

    INTERFACE
    HTML

    View Slide

  63. iOS CLIENT
    DASHBOARD
    JS CLIENT
    MAIN

    JS CLIENT
    3RD PARTY

    CLIENT
    SERVICE

    INTEGRATION
    JSON
    SESSION API SERVICE API(s)
    REDIS RIAK
    SOLR
    SERVICE API(s)
    SERVICE API(s)
    SERVICE APIs

    View Slide

  64. WHAT DO WE GAIN?

    View Slide

  65. EASIER TO DISTRIBUTE
    WORK TO A TEAM

    View Slide

  66. EASILY BUILD CLIENTS
    FOR NEW PLATFORMS

    View Slide

  67. ISOLATE
    PERFORMANCE
    ISSUES

    View Slide

  68. WAY EASIER TO:
    TEST

    View Slide

  69. WAY EASIER TO:
    MAINTAIN

    View Slide

  70. WAY EASIER TO:
    SCALE

    View Slide

  71. WAY EASIER TO:
    SECURE

    View Slide

  72. SOLVE SCALING
    ISSUES
    AT
    THE EXACT
    BOTTLENECK

    View Slide

  73. EASILY BUILD
    VARIATIONS
    OF YOUR CLIENTS

    View Slide

  74. A/B TESTING ANYONE?

    View Slide

  75. SERVE
    CLIENT APPLICATION
    FROM STATIC SERVERS

    View Slide

  76. WORK ON A CLIENT
    LOCALLY
    AGAINST PRODUCTION API

    View Slide

  77. "That’s a nice theory, but how?"

    View Slide

  78. SEND THE APP ITSELF
    TO THE BROWSER
    INSTEAD OF THE
    RESULT OF RUNNING IT

    View Slide

  79. "You have to send the browser HTML!"

    View Slide

  80. THE ENTIRE HTML FOR AND BANG:
    GET https://andbang.com/*

    View Slide

  81. SO HOW DO WE BUILD THIS WAY?

    View Slide

  82. {{ DO A DEMO, HENRIK! }}

    View Slide

  83. HOT NEW
    JAVASCRIPT FRAMEWORK
    OF THE WEEK!

    View Slide

  84. HOW DO YOU PICK?

    View Slide

  85. WHERE DO YOU START?

    View Slide

  86. andyet.com

    View Slide

  87. ~27 DEVELOPERS
    GOBS OF JS APPS
    REALTIME APPS

    View Slide

  88. HOW WE DECIDED
    WHAT TO USE:

    View Slide

  89. GOALS

    View Slide

  90. 1. BUILD GREAT APPS
    GOALS

    View Slide

  91. 1. BUILD GREAT APPS
    2. QUICKLY
    GOALS

    View Slide

  92. 1. BUILD GREAT APPS
    2. QUICKLY
    3. WRITE JAVASCRIPT
    GOALS

    View Slide

  93. 1. BUILD GREAT APPS
    2. QUICKLY
    3. WRITE JAVASCRIPT
    4. HIGH LEVEL OF CONTROL
    GOALS

    View Slide

  94. 1. BUILD GREAT APPS
    2. QUICKLY
    3. WRITE JAVASCRIPT
    4. HIGH LEVEL OF CONTROL
    5. INSANELY MODULAR/FLEXIBLE
    GOALS

    View Slide

  95. 1. BUILD GREAT APPS
    2. QUICKLY
    3. WRITE JAVASCRIPT
    4. HIGH LEVEL OF CONTROL
    5. INSANELY MODULAR/FLEXIBLE
    6. NOT TOO ABSTRACT
    GOALS

    View Slide

  96. FOUR BIG PROBLEMS TO SOLVE:

    View Slide

  97. 1. FETCHING/STORING STATE

    View Slide

  98. 2. RENDERING HTML

    View Slide

  99. 3. BINDING STATE TO DOM

    View Slide

  100. 4. CLIENTSIDE ROUTING

    View Slide

  101. A FEW SPECIFIC FRAMEWORKS:

    View Slide

  102. AngularJS

    View Slide

  103. 1. easy to start
    AngularJS

    View Slide

  104. 1. easy to start
    2. logic mixed into HTML
    AngularJS

    View Slide

  105. 1. easy to start
    2. logic mixed into HTML
    3. you’re learning Angular, not JS
    AngularJS

    View Slide

  106. 1. easy to start
    2. logic mixed into HTML
    3. you’re learning Angular, not JS
    4. highly abstracted
    AngularJS

    View Slide

  107. Ember

    View Slide

  108. 1. Lots of decisions made for you
    Ember

    View Slide

  109. 1. Lots of decisions made for you
    2. Everything is "ember" as a base
    Ember

    View Slide

  110. 1. Lots of decisions made for you
    2. Everything is "ember" as a base
    3. Lack of flexibility
    Ember

    View Slide

  111. View Slide

  112. Backbone

    View Slide

  113. 1. Basic building blocks
    Backbone

    View Slide

  114. 1. Basic building blocks
    2. Extremely flexible
    Backbone

    View Slide

  115. 1. Basic building blocks
    2. Extremely flexible
    3. You have to solve more problems
    Backbone

    View Slide

  116. We made HumanJS:

    View Slide

  117. 1. Backbone as a base
    We made HumanJS:

    View Slide

  118. 1. Backbone as a base
    2. Stricter Models
    We made HumanJS:

    View Slide

  119. 1. Backbone as a base
    2. Stricter Models
    3. Conventions for binding to views
    We made HumanJS:

    View Slide

  120. HumanJavascript.com

    View Slide

  121. What’s next?

    View Slide

  122. Shh…

    View Slide

  123. AMPERSAND.js

    View Slide

  124. View Slide

  125. 1. Un-frameworky non-framework

    View Slide

  126. 1. Un-frameworky non-framework
    2. Backbone ripped apart

    View Slide

  127. 1. Un-frameworky non-framework
    2. Backbone ripped apart
    3. Individual npm modules

    View Slide

  128. 1. Un-frameworky non-framework
    2. Backbone ripped apart
    3. Individual npm modules
    4. Insanely flexible

    View Slide

  129. View Slide

  130. 5. Clear starting point

    View Slide

  131. 5. Clear starting point
    6. CommonJS + Browserify

    View Slide

  132. 5. Clear starting point
    6. CommonJS + Browserify
    7. Directory of "sanctioned" modules

    View Slide

  133. 5. Clear starting point
    6. CommonJS + Browserify
    7. Directory of "sanctioned" modules
    8. IE9+ only

    View Slide

  134. WE’RE BUILDING APPS
    WITH IT ALREADY

    View Slide

  135. ampersandjs.com

    View Slide

  136. QUESTIONS?

    View Slide

  137. THANKS!
    @HenrikJoreteg

    View Slide