Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Single Page Story – http://ffconf.org/

A Single Page Story – http://ffconf.org/

Single page apps have become a legitimate part of the web, but what role should they play? Where do they shine? Where do they fail? How should we think about them and how can we evaluate tools for building them? We will opine on the tradeoffs of abstractions and frameworks and share &yet's impetus for creating Ampersand.js.

Henrik Joreteg

November 07, 2014
Tweet

More Decks by Henrik Joreteg

Other Decks in Technology

Transcript

  1. A Single Page Story
    @HenrikJoreteg

    View Slide

  2. WHY AM I HERE?

    View Slide

  3. http://blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks

    View Slide

  4. "Hey! I read your book, Human JavaScript
    and your recent post about frameworks"
    - Remy

    View Slide

  5. "holy s*** Remy reads my stuff?!"

    View Slide

  6. "Come talk at my conference!"

    View Slide

  7. *hyperventilates*

    View Slide

  8. *dies*
    x x

    View Slide

  9. DEFIBRILLATOR, CPR, etc…

    View Slide

  10. "So should I turn that frameworks
    post into a talk? (I’ve got this)"

    View Slide

  11. "No. Talk about clientside apps, in general.
    Like… should we even do them?
    What is their place on the web?"

    View Slide

  12. LET ME TRANSLATE:

    View Slide

  13. "No. Please publicly open
    Pandora’s box on my stage."

    View Slide

  14. "… and take the inevitable
    beatings that follow."

    View Slide

  15. *shudders in fear*

    View Slide

  16. *dies* (again)
    x x

    View Slide

  17. *dies* (again)
    x x

    View Slide

  18. OK. Let’s do this.

    View Slide

  19. "Like it or not we live in
    interesting times."

    View Slide

  20. "They are times of danger
    and uncertainty"

    View Slide

  21. - Robert F. Kennedy
    from a prophetic speech in 1966
    about clientside javascript today

    View Slide

  22. SINGLE PAGE APP

    View Slide

  23. HUH?

    View Slide

  24. JAVASCRIPT APPS

    View Slide

  25. FRONT-END APPS

    View Slide

  26. THICK CLIENTS

    View Slide

  27. RIAs?

    View Slide

  28. NATIVE WEB APP

    View Slide

  29. FUNDAMENTAL DISTINCTION…

    View Slide

  30. THE BROWSER IS
    YOUR RUNTIME

    View Slide

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

    View Slide



  32. View Slide

  33. IS IT EVEN A GOOD IDEA?

    View Slide

  34. SHOULD WE EVEN BE DOING THIS?

    View Slide

  35. View Slide

  36. "They are times of danger
    and uncertainty"

    View Slide

  37. SHOULD WE BUILD
    APPS THAT REQUIRE
    JAVASCRIPT?

    View Slide

  38. {{ RAISE YOUR HAND }}

    View Slide

  39. YES!

    View Slide

  40. WHAT SERVICE ARE WE PROVIDING?

    View Slide

  41. CONTENT?

    View Slide

  42. CONTENT SHOULD JUST WORK™

    View Slide

  43. NO REASON TO COMPLICATE
    THINGS THAT CAN BE SIMPLE

    View Slide

  44. BUT THE WEB IS
    NO LONGER
    JUST ABOUT
    LINKED CONTENT!

    View Slide

  45. "They are times of danger
    and uncertainty"

    View Slide

  46. THERE ARE CASES
    WHERE CLIENTSIDE
    FUNCTIONALITY
    IS THE CORE VALUE
    PROVIDED BY SERVICE

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. 1. RENDERING
    2. NETWORKING
    3. FILE READ/WRITE
    4. STORAGE
    5. WEB AUDIO APIS
    6. WEBGL
    7. VOICE/VIDEO
    HIGH PERFORMANCE

    View Slide

  53. BROWSERS ARE NOT
    DUMB DOCUMENT VIEWERS

    View Slide

  54. MOST CAPABLE
    UBIQUITOUS
    RUNTIMES
    ON THE PLANET

    View Slide

  55. "we live in interesting times."

    View Slide

  56. I’M JUST GOING TO SAY IT:

    View Slide

  57. THERE ARE TWO
    TYPES OF APPLICATIONS
    ON THE WEB

    View Slide

  58. 1. NATIVE WEB APPS

    View Slide

  59. 2. SERVER-SIDE WEB APPS

    View Slide

  60. THEY ARE
    FUNDAMENTALLY
    DIFFERENT

    View Slide

  61. AND THAT’S O.K.

    View Slide

  62. ANYTHING
    WE CAN BUILD
    WITH WEB TECH
    I THINK WE SHOULD

    View Slide

  63. EVEN IF WE CAN’T
    SUPPORT OLDER
    BROWSERS

    View Slide

  64. THE WEB IS INFINITELY MORE
    OPEN AND ACCESSIBLE
    THAN NATIVE PLATFORMS

    View Slide

  65. USER EXPECTATIONS HAVE EVOLVED

    View Slide

  66. THE WEB IS DOING PRETTY WELL
    ON DESKTOPS

    View Slide

  67. THE WEB IS LOSING
    ON MOBILE

    View Slide

  68. THE WEB IS LOSING
    ON EXPERIENCE

    View Slide

  69. WE OFTEN PREFER NATIVE
    APPS TO THE WEB

    View Slide

  70. QUALITY AND POLISH
    OF USER EXPERIENCE
    IS OFTEN MUCH BETTER

    View Slide

  71. LET’S FIX THIS!

    View Slide

  72. WE’RE TOO FOCUSED
    ON THE PAST INSTEAD OF
    COMPETING ON EXPERIENCE

    View Slide

  73. SAYING THERE’S A DISTINCTION
    MAKES SOME PEOPLE MAD

    View Slide

  74. "Everything should be an enhancement!"

    View Slide

  75. WE’RE ON THE
    SAME TEAM!

    View Slide

  76. WE WANT THE
    OPEN WEB
    TO WIN!

    View Slide

  77. HOW COULD WE EVEN
    BUILD A PROGRESSIVELY
    ENHANCED VERSION
    OF TALKY.IO?

    View Slide

  78. SHOULD WE NOT HAVE
    BUILT IT?

    View Slide

  79. WHERE’S THE DOWNSIDE?

    View Slide

  80. LET’S LOOK A BIT CLOSER AT TWITTER

    View Slide

  81. WHAT IS TWITTER?

    View Slide

  82. IS IT A WEB APP?

    View Slide

  83. NO.

    View Slide

  84. IT’S A SERVICE

    View Slide

  85. APP != SERVICE

    View Slide

  86. TWITTER
    android app
    iOS app
    tweetbot
    twitter.com
    tweet deck
    ad dashboard

    View Slide

  87. I DIDN’T REALLY
    CARE HOW THEY
    BUILT THEIR WEBAPP

    View Slide

  88. BECAUSE I DIDN’T
    USE IT ANYWAY!

    View Slide

  89. I WAS USING AN iOS APP!

    View Slide

  90. THEIR WEB APP HAD
    ALREADY FAILED ME!

    View Slide

  91. LET’S THINK ABOUT THIS

    View Slide

  92. WHEN I FOLLOW
    A LINK TO A
    RANDOM TWEET
    ON MY PHONE…

    View Slide

  93. JUST LET ME READ IT!

    View Slide

  94. plain text
    I DON’T MIND IF IT’S

    View Slide

  95. DON’T MAKE ME
    DOWNLOAD
    2MB OF JS
    TO READ
    140 CHARACTERS
    OF TEXT!

    View Slide

  96. THIS IS THE PROBLEM
    THEY FIXED WITH
    NEW NEW TWITTER

    View Slide

  97. BUT…

    View Slide

  98. CATCHING UP WITH
    ALL THINGS TWITTER
    IS A FUNDAMENTALLY
    DIFFERENT USE CASE

    View Slide

  99. FAILING TO RECOGNIZE
    DISTINCTION MAKES US
    FLOUNDER

    View Slide

  100. A SERVICE CAN
    PROVIDE BOTH!

    View Slide

  101. TWITTER.COM
    &
    TWEETDECK.COM

    View Slide

  102. THERE’S STILL SOME GAPS
    BETWEEN WEB AND NATIVE

    View Slide

  103. REAL OFFLINE SUPPORT

    View Slide

  104. PLATFORMS THAT TREAT
    NATIVE WEB APPS AS
    FIRST CLASS
    CITIZENS

    View Slide

  105. THOSE THINGS
    ARE CHANGING

    View Slide

  106. 1. SERVICE WORKER

    View Slide

  107. PROGRAMMABLE
    CACHE LAYER
    CAN INTERCEPTS ALL
    NETWORK REQUESTS
    1. SERVICE WORKER

    View Slide

  108. THIS IS
    HUGE!

    View Slide

  109. 2. INSTALLABLE WEB APPS

    View Slide

  110. CHROME M39+
    FIREFOX
    https://developer.chrome.com/multidevice/android/installtohomescreen
    https://w3c.github.io/manifest/
    JSON-BASED WEB MANIFEST

    View Slide

  111. ANDROID 5.0
    AUTOUPDATING WEBVIEW

    View Slide

  112. "What about performance?"

    View Slide

  113. WHITE PAGE
    OF DEATH

    View Slide

  114. TIME TO FIRST PAINT

    View Slide

  115. A PRIMED CACHE
    LARGELY INVALIDATES
    THIS ARGUMENT

    View Slide



  116. 1. GIVE IT A UNIQUE NAME
    HTTP/1.1 200 OK
    Cache-Control: max-age=REALLY BIG NUMBER!
    Content-Encoding: gzip
    2. CACHE IT FOREVER

    View Slide

  117. MOST OF THESE
    TYPES OF APPS
    REQUIRE YOU
    TO BE LOGGED IN

    View Slide

  118. PRE-FETCH APP
    ON LOGIN PAGE

    View Slide

  119. NATIVE WEB APPS CAN
    STILL HAVE SMALL
    JS PAYLOADS!

    View Slide

  120. ALL JS IN THE
    AMPERSAND.JS APP
    ON TODOMVC.COM
    COMBINED
    28kb min + gzip

    View Slide

  121. SMALLER THAN JQUERY 2.0

    View Slide

  122. THE OTHER ASPECT
    OF PERFORMANCE…

    View Slide

  123. ONCE LOADED,
    PERFORMANCE
    IS WAY BETTER!

    View Slide

  124. IF I’M GOING TO
    LEAVE APP OPEN
    ON MY DESKTOP
    I CARE WAY LESS
    ABOUT LOAD TIME

    View Slide

  125. "What about dual rendered
    a.k.a. isomorphic apps?"

    View Slide

  126. JUST A CLIENTSIDE APP
    WITH AN OPTIMIZED
    INITIAL RENDER

    View Slide

  127. OFTEN REQUIRES
    DRAMATICALLY
    MORE COMPLEX CODE

    View Slide

  128. CLIENT
    TIGHTLY COUPLED
    TO SERVER

    View Slide

  129. THERE ARE SOME CASES
    WHERE IT MAKES SENSE

    View Slide

  130. WITH STATE OF
    TOOLING TODAY
    OFTEN NOT WORTH
    THE COMPLEXITY

    View Slide

  131. SEND RENDERED
    LAYOUT HTML + STYLES

    View Slide

  132. "What about all these
    clientside frameworks?"

    View Slide

  133. FOR A FEW MORE SPECIFICS
    READ MY POST
    blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks

    View Slide

  134. "In a rapidly evolving web,
    how can we be sure we’re
    picking the right tools?"

    View Slide

  135. WE CAN’T!

    View Slide

  136. "They are times of danger
    and uncertainty"

    View Slide

  137. WHAT DO WE KNOW?

    View Slide

  138. THINGS WILL
    CHANGE

    View Slide

  139. SO HOW CAN WE
    CONFIDENTLY
    BUILD ANYTHING?

    View Slide

  140. OPTIMIZE FOR CHANGE.
    IT IS THE ONLY CONSTANT.

    View Slide

  141. HOW?!

    View Slide

  142. LOSE YOUR RELIGION

    View Slide

  143. DON’T INVEST
    TOO HEAVILY
    IN A SINGLE
    FRAMEWORK

    View Slide

  144. FIGHT COMPLEXITY

    View Slide

  145. View Slide

  146. CLIENTSIDE WEB APPS
    ARE COMPLEX SYSTEMS

    View Slide

  147. HOW DO YOU
    BUILD COMPLEX
    SYSTEMS?

    View Slide

  148. YOU DON’T

    View Slide

  149. YOU ISOLATE AND SOLVE
    THE SMALLER PROBLEMS

    View Slide

  150. THEN BUILD IT LIKE LEGOS:
    BRICK BY BRICK

    View Slide

  151. MODULARITY
    IN A WORD:

    View Slide

  152. IT’S HARDER!

    View Slide

  153. "I didn't have the time to write you a
    short letter, so I wrote you
    a long letter instead."
    - Mark Twain

    View Slide

  154. YOU HAVE TO
    DISTILL PROBLEMS
    INTO DISCREET
    COMPONENTS

    View Slide

  155. YOU HAVE TO
    VALIDATE THOSE
    PIECES WORK
    AS EXPECTED

    View Slide

  156. MODULES ARE A MACHINE SHOP
    NOT A HAMMER AND NAILS

    View Slide

  157. YOU CAN PRODUCE
    AMAZING THINGS!
    BUT IT REQUIRES MORE
    OF THE OPERATOR

    View Slide

  158. WHAT DO YOU GAIN?

    View Slide

  159. MODULARITY
    LETS YOU REMODEL
    THE KITCHEN WITHOUT
    BURNING DOWN THE
    WHOLE BUILDING

    View Slide

  160. Angular 2.0

    View Slide

  161. andyet.com

    View Slide

  162. ~30 DEVELOPERS
    GOBS OF JS APPS
    REALTIME APPS

    View Slide

  163. AMPERSAND.JS

    View Slide

  164. THE NAME
    "ampersand.js"
    IS A FILTHY LIE

    View Slide

  165. BECAUSE NO SUCH FILE EXISTS!

    View Slide

  166. THERE’S NOTHING
    YOU CAN DROP
    INTO A SCRIPT TAG
    WITHOUT A BUILD STEP

    View Slide

  167. ampersand-state
    ampersand-model
    ampersand-collection
    ampersand-rest-collection
    ampersand-view
    ampersand-router

    View Slide

  168. ampersand (the CLI)
    ampersand-app
    ampersand-view-switcher
    ampersand-input-view
    ampersand-select-view
    ampersand-form-view
    etc.

    View Slide

  169. INDIVIDUAL GITHUB REPOS

    View Slide

  170. ALL COMMON.JS MODULES

    View Slide

  171. INSTALLED VIA NPM

    View Slide

  172. BUILD WITH
    BROWSERIFY
    OR WEBPACK

    View Slide

  173. todomvc.com

    View Slide

  174. AMPERSAND + REACT

    View Slide

  175. SOFTWARE IS A
    LONG-TERM GAME

    View Slide

  176. "I could build that in a weekend!"
    WE ALL THINK:

    View Slide

  177. "Another flaw in the human character
    is that everybody wants to build and
    nobody wants to do maintenance."
    - Kurt Vonnegut

    View Slide

  178. IF YOUR APP IS SUCCESSFUL
    IT WILL OUTLIVE THE
    ATTENTION SPAN
    OF ITS CREATORS

    View Slide

  179. OPTIMIZE FOR CHANGE.
    IT IS THE ONLY CONSTANT.

    View Slide

  180. "Like it or not we live in
    interesting times. They are
    times of danger and uncertainty;"
    But they are also more open to
    the creative energy of people than
    any other time in history."

    View Slide

  181. "Like it or not we live in
    interesting times. They are
    times of danger and uncertainty;"
    But they are also more open to
    the creative energy of people than
    any other time in history."

    View Slide

  182. LET’S BUILD FOR THE FUTURE
    OF THE WEB, NOT ITS PAST.

    View Slide

  183. THANKS!
    @HenrikJoreteg, andyet.com

    View Slide