Documents are not the web

Presented at Great Wide Open

Transcript

1. @trek
11. i. prehistory
14. <p> <h1> <div> <table> <title> <i> <u> <bold> <font> <ul> <li> <blockquote> <cite> <ins> <strike>
16. “a read-only web would be developed within three months and that it would take six months to achieve ‘the creation of new links and new material by readers, [so that] authorship becomes universal’ as well as ‘the automatic notification of a reader when new material of interest to him/her has become available.”
30. ii. tablezoic era
31. <tbody><tr> <td colspan="4" align="center"> <strong><font size="+2">W</ font><font size="+1">ELCOME TO E</font><font size="+2">B</ font><font size="+1">AY</ font><font size="+2">!</font></ strong><p></p></td> </tr> ! <tr> <td width="8%"></td>
36. iii. standardistas
51. file access location api motion sensor application framework debugger layout engine video playback audio playback offline storage bitmap drawing vector drawing
52. can’t even round corners
54. iv. today
55. file access offline storage geolocation camera, microphone motion data video playback audio playback socket connections server sent events cross origin resources bitmap drawing vector drawing
56. border styles gradients animations transitions math webfonts columns hsl colors 3d transforms actual f’ing layouts
57. .grid { display: flex; } ! .grid-cell { flex: 1; }
58. promises generators modules dependency management ! perf, perf, perf.
61. https://www.youtube.com/watch?v=c2uNDlP4RiE
73. screen rendering display screen state AFK behavior persistence client server
74. screen rendering display screen state AFK behavior persistence client server
75. APIs Node, Rails, Java
76. APIs
77. screen rendering display screen state AFK behavior persistence client server
78. <?xml version="1.0" encoding="UTF-8"?> <archive type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="7.10"> <data> <int key="IBDocument.SystemTarget">1050</int> <string key="IBDocument.SystemVersion">10J869</string> <string key="IBDocument.InterfaceBuilderVersion">823</string> <string key="IBDocument.AppKitVersion">1038.35</string> <string key="IBDocument.HIToolboxVersion">461.00</string> <object class="NSMutableDictionary" key="IBDocument.PluginVersions"> <string key="NS.key.0">com.apple.InterfaceBuilder.CocoaPlugin</stri <string key="NS.object.0">823</string> </object> <object class="NSMutableArray" key="IBDocument.EditedObjectIDs"> <bool key="EncodedWithXMLCoder">YES</bool> <integer value="29"/> <integer value="561"/> <integer value="367"/> </object> <object class="NSArray" key="IBDocument.PluginDependencies"> <bool key="EncodedWithXMLCoder">YES</bool> <string>com.apple.InterfaceBuilder.CocoaPlugin</string> </object> <object class="NSMutableDictionary" key="IBDocument.Metadata"> <string key="NS.key.0">PluginDependencyRecalculationVersion</string <integer value="1" key="NS.object.0"/> </object> <object class="NSMutableArray" key="IBDocument.RootObjects" id="1048">
79. screen rendering display screen state AFK behavior persistence client server
80. $( 'table td' ).each( function() { $( this ).mouseenter( function() { $( 'table' ).find( '.hover' ).removeClass( 'hover' ); $( this ).addClass( 'hover' ); } ).mouseleave( function() { $( this ).removeClass( 'hover' ); } ).click( function() { $( 'table' ).find(' current ').removeClass(' current '); $( this ).addClass( 'current' ); $( 'table' ).tablesorter(); } ); });
82. Router Route Controller View/Template Model/Data
83. Router Route Controller View/Template Model/Data what is the current context? how does this encode to a URL?
84. Router Route Controller View/Template Model/Data What data should I fetch? ! What template should I show?
85. Router Route Controller View/Template Model/Data how do I translate user interaction in this context into intent (e.g. a "click" into "show me more")? ! how do I present the data for this context?
86. Router Route Controller View/Template Model/Data how do I paint to the screen?
87. Router Route Controller View/Template Model/Data what is the structure of my data
88. Router Route Controller View/Template Model/Data
89. App = Ember.Application.create(); ! ! ! ! ! <!-- application.hbs --> <h1>Welcome to Ember.js</h1> ! ! ! ! ! Router Route Controller View/Template Model/Data
91. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); <!-- application.hbs --> <h1>Welcome to Ember.js</h1> <nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} {{outlet}}<!-- filled with child template when you navigate into route --> </nav> ! <!-- favorites.hbs --> <h2>Favorites<h2> <ul> <li>...</li> <li>...</li> </ul> <!-- about.hbs --> <h2>About<h2>
93. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); <!-- application.hbs --> <h1>Welcome to Ember.js</h1> <nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} {{outlet}}<!-- filled with child template when you navigate into route --> </nav> ! <!-- favorites.hbs --> <h2>Favorites<h2> <ul> <li>...</li> <li>...</li> </ul> <!-- about.hbs --> <h2>About<h2>
94. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! App.AboutRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: '/api/currentUser/profile' }); } });
95. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! App.AboutRoute = Ember.Route.extend({ model: function(){ var self = this; $('#a-loader).show(); $.ajax({ url: '/api/currentUser/profile', success: function(response){ $('#a-loader).hide(); self.renderWithSomeData(response); } }); } });
96. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! App.AboutRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: '/api/currentUser/profile' }); } }); { name: 'trek', bio: 'Much shorter than you expect' }
97. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! <!-- favorites.hbs --> <h2>Favorites<h2> <ul> <li>...</li> <li>...</li> </ul> <!-- about.hbs --> <h2>About<h2> <!-- application.hbs --> <h1>Welcome to Ember.js</h1> <nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} {{outlet}}<!-- filled with child template when you navigate into route --> </nav>
98. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! <!-- favorites.hbs --> <h2>Favorites<h2> <ul> <li>...</li> <li>...</li> </ul> <!-- about.hbs --> <h1>About<h1> <h2>{{name}}<h2> <div class='bio'> {{bio}} </div> <!-- application.hbs --> <h1>Welcome to Ember.js</h1> <nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} {{outlet}}<!-- filled with child template when you navigate into route --> </nav>
99. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! App.FavoritesRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: '/api/currentUser/favorites' }); } }); [ {"id": 1, "title": "Hoverbike Captains of the SS"}, {"id": 2, "title": "The Terrifying Madness That Lies Beyond"} ]
100. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); ! <!-- favorites.hbs --> <h2>Favorites<h2> <ul> <li>...</li> <li>...</li> </ul> <!-- about.hbs --> <h1>About<h1> <h2>{{name}}<h2> <div class='bio'> {{bio}} </div> <!-- application.hbs --> <h1>Welcome to Ember.js</h1> <nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} {{outlet}}<!-- filled with child template when you navigate into route --> </nav>
101. App = Ember.Application.create(); App.Router.map(function(){ this.route("about"); this.route("favorites", { path: "/favs" }); }); <!-- favorites.hbs --> <h2>Favorites<h2> <ul> {{#each}} <li> {{title}} </li> {{/each}} </ul> <!-- about.hbs --> <h1>About<h1> <h2>{{name}}<h2> <div class='bio'> {{bio}} </div> <!-- application.hbs --> <h1>Welcome to Ember.js</h1> <nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} {{outlet}}<!-- filled with child template when you navigate into route --> </nav>
105. var Rdio = Ember.Application.create(); Rdio.Router.map(function(){}); ! Rdio.ApplicationRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: "/api/authenticate" }) } }); <!-- application.hbs --> {{outlet}} <!-- loading.hbs --> <div class="loading-container"> <span class="icon-loading spinner"/> </div>
107. { username: 'trek', messageCount: 4, playlists: [ {id: 981, title: "Everyday I'm shufflin'"}, {id: 191, title: "RUNNIN"} ] }
109. <div class='navigation'> <ul> <h3>Browse</h3> <li>{{#link-to "heavyRotation"}}Heavy Rotation{{/link-to}}</li> <li>{{#link-to "recentActivity"}}Recent Activity{{/link-to}}</li> <li>{{#link-to "topCharts"}}Top Charts{{/link-to}}</li> <li>{{#link-to "newReleases"}}New Releases{{/link-to}}</li> <li>{{#link-to "stations"}}Stations{{/link-to}}</li> </ul>
110. <ul> <h3>Playlists</h3> <ul> {{#each playlists}} {{#link-to "playlist" this}} {{name}} {{/link-to}} {{/each}} </ul> </ul>
111. <ul> <h3>Playlists</h3> <ul> {{#each playlists}} {{#link-to "playlist" this}} {{name}} {{/link-to}} {{/each}} </ul> </ul> { username: 'trek', messageCount: 4, playlists: [ {id: 981, title: "Everyday I'm shufflin'"}, {id: 191, title: "RUNNIN"} ] }
112. <div class='top-bar'> <ul> <li>{{#link-to "profile"}}{{username}}{{/link-to}}</li> <li>{{#link-to "alets"}}{{messageCount}}{{/link-to}}</li> </ul>
113. <div class='top-bar'> <ul> <li>{{#link-to "profile"}}{{username}}{{/link-to}}</li> <li>{{#link-to "alets"}}{{messageCount}}{{/link-to}}</li> </ul> { username: 'trek', messageCount: 4, playlists: [ {id: 981, title: " {id: 191, title: " ] }
114. {{outlet}}
117. var Rdio = Ember.Application.create(); ! Rdio.Router.map(function(){}); ! Rdio.ApplicationRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: "/api/authenticate" }) } });
118. var Rdio = Ember.Application.create(); ! Rdio.Router.map(function(){ this.route("heavyRotation") }); ! Rdio.ApplicationRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: "/api/authenticate" }) } }); ! Rdio.HeavyRotationRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: "/api/heavyRotation" }) } });
120. [ { title: "The Speed of Things", artistName: "Dale Earnhardt Jr. Jr.", songsCount: 13, isExplicit: false, imageUrl: "/images/c10efa31.png" }, { title: "I Love You", artistName: "The Neighbourhood", songsCount: 11, isExplicit: true, imageUrl: "/images/9ec1ce1.png" } {...}, {...} ]
122. <!-- heavyRotation.hbs --> <h3>Heavy Rotation</h3> {{#each}} {{link-to "album" this}} <div class="album-"> </div> {{title}} {{artistName}} {{songsCount}} songs {{#if isExplicit}} EXPLICIT {{/if}} {{/link-to}} {{/each}}
123. <!-- heavyRotation.hbs --> <h3>Heavy Rotation</h3> {{#each}} {{link-to "album" this}} <div class="album-"> </div> {{title}} {{artistName}} {{songsCount}} songs {{#if isExplicit}} EXPLICIT {{/if}} {{/link-to}} {{/each}} [ { title: "I Love You", artistName: "The Neighbourhood", songsCount: 11, isExplicit: true, imageUrl: "/images/9ec1ce1.png" } ]
127. Rdio.Router.map(function(){ this.route("heavyRotation"); this.route("album", {path: "album/:album_id"}); }); ! Rdio.AlbumRoute = Ember.Route.extend({ model: function(params){ return $.ajax({ url: "/api/album/" + params.album_id }); } })
129. { title: "The Speed of Things", artistName: "Dale Earnhardt Jr. Jr.", songsCount: 13, isExplicit: false, imageUrl: "/images/c10efa31.png", playCount: 32694, songs: [ {trackNumber: 1, title: "Beautiful Dream"}, {trackNumber: 2, title: "Run"} ] }
135. Rdio.Router.map(function(){ this.resource("artist", {path: "artist/:artist_id"}, function(){ this.route("albums", {path: '/'}); this.route("songs"); }) }); ! Rdio.ArtistRoute = Ember.Route.extend({ model: function(params){ return $.ajax({ url: "/api/artist/" + params.artist_id }); } }); ! Rdio.ArtistAlbumsRoute = Ember.Route.extend({ model: function(parmas, transition){ return $.ajax({ url: "/api/artist/" + transition.params.artist_id + "/albums" }); } });
136. Rdio.Router.map(function(){ this.resource("artist", {path: "artist/:artist_id"}, function(){ this.route("albums", {path: '/'}); this.route("songs"); }) }); ! Rdio.ArtistRoute = Ember.Route.extend({ model: function(params){ return $.ajax({ url: "/api/artist/" + params.artist_id }); } }); ! Rdio.ArtistSongsRoute = Ember.Route.extend({ model: function(parmas, transition){ return $.ajax({ url: "/api/artist/" + transition.params.artist_id + "/songs" }); } });
148. <!-- application.hbs --> {{outlet}} {{outlet "playbar"}}
149. <!-- application.hbs --> {{outlet}} {{outlet "playbar"}}
150. Rdio.ApplicationRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: "/api/authenticate" }) } });
151. Rdio.ApplicationRoute = Ember.Route.extend({ model: function(){ return $.ajax({ url: "/api/authenticate" }) }, renderTemplate: function(){ this._super(); this.render('playbar', { into: 'application', outlet: 'playbar' }); } });
154. {{#each tracks}} <ul> <li> {{trackNumber}} {{name}} </li> </ul> {{/each}}
155. {{#each tracks}} <ul> <li {{action "play" this}}> {{trackNumber}} {{name}} </li> </ul> {{/each}}
156. current controller current route {{#each tracks}} <ul> <li {{action "play" this}}> {{trackNumber}} {{name}} </li> </ul> {{/each}} parent route application route ...
157. Rdio.ApplicationRoute = Ember.Route.extend({ actions: { play: function(song){ this.controllerFor('playbar').send('play', song); } } });
158. Rdio.ApplicationRoute = Ember.Route.extend({ actions: { play: function(song){ this.controllerFor('playbar').send('play', song); } } }); Rdio.PlaybarController = Ember.Controller.extend({ actions: { play: function(song){ ... } } });
160. consulting@prototypal.io @trek