Web Trends to 2015

Transcript

1. Web Trend Course 6
2. 1998
6. 1999
10. 2001
12. 2002
15. 2003
20. 2002
21. 2000
25. 2004
32. Web Hypertext Application Technology Working Group
33. 2005
38. RESTful API
39. ORM
40. CSRF token <meta content="authenticity_token" name="csrf-param" /> <meta content="gv1xdpH2w4MYcMtoT52pRPV+tPoWFDSJhxNiBOC5idQ= name="csrf-token" />
41. Unobtrusive JavaScript • Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation
42. Asset Pipeline • All together assets pack system • JS, CSS, images, html • Concat, minimize, hashize, update file name
47. First pass by Safari
48. 2006
56. Nesting nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } }
57. Mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
58. Variable $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
59. JSmin
60. 2007
64. iPhone first smart phone
66. 2008
68. HTC G1 first android phone
72. V8 JavaScript Engine • by Google • Starts the browser speed race
73. yuicompressor
76. First pass by Webkit
77. canvas
78. function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); } } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shape
80. function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shape
82. 2009
83. Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5th Edition / December 2009 ECMAScript Language Specification
87. # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x
88. # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis?
91. Closure Compiler
93. 2010
95. iPhone 4 first retina display
99. 1 Way Data Binding
100. 2011
101. Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5.1 Edition / June 2011 ECMAScript Language Specification
102. and First ES6 Draft
106. AMD
107. define(['jquery'] , function ($) { return function () {}; });
110. var greetings = require("./greetings.js"); module.exports = "Bonjour";
111. UMD
112. (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['b'], factory); } else { // Browser globals root.amdWeb = factory(root.b); } }(this, function (b) { return {}; }));
114. 2 Way Data Binding
115. UglifyJS
120. Media Query
121. 2012
124. http://techreport.com/news/21037/doom-ported-to-firefox-using-javascript-htm
128. Grunt Bower Yeoman
131. UglifyJS 2
136. 2013
144. <google-map latitude="37.77493" longitude="-122.41942"></google-map>
145. <brick-tabbar id="demo-bar"> <brick-tabbar-tab target="a" selected> <i class="fa fa-camera-retro"></i> </brick-tabbar-tab> <brick-tabbar-tab target="b"> <i class="fa fa-envelope"></i> </brick-tabbar-tab> <brick-tabbar-tab target="c"> <i class="fa fa-home"></i> </brick-tabbar-tab> </brick-tabbar>
147. http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/
148. asm.js
150. 2014
152. ESLint
157. 2015
160. http://www.codekitchen.ca/visualizing-glimmer-performance
161. Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 6th Edition / June 2015 ECMAScript® 2015 Language Specification
166. WebAssembly
168. Relay • Use GraphQL to communicate with server • Try to replace RESTful API
169. GraphQL { user(id: 3500401) { id, name, isViewerFriend, profilePicture(size: 50) { uri, width, height } } }