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.

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