Web Trends to 2015

Transcript

1. Web Trend Course 6
32. Web Hypertext Application Technology Working Group
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
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
64. iPhone first smart phone
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
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
95. iPhone 4 first retina display
99. 1 Way Data Binding
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
124. http://techreport.com/news/21037/doom-ported-to-firefox-using-javascript-htm
128. Grunt Bower Yeoman
131. UglifyJS 2
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
152. ESLint
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 } } }