Web Trends to 2015

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
October 22, 2015

Web Trends to 2015

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

October 22, 2015
Tweet

Transcript

  1. Web Trend Course 6

  2. 1998

  3. None
  4. None
  5. None
  6. 1999

  7. None
  8. None
  9. None
  10. 2001

  11. None
  12. 2002

  13. None
  14. None
  15. 2003

  16. None
  17. None
  18. None
  19. None
  20. 2002

  21. 2000

  22. None
  23. None
  24. None
  25. 2004

  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. Web Hypertext Application Technology Working Group

  33. 2005

  34. None
  35. None
  36. None
  37. None
  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
  43. None
  44. None
  45. None
  46. None
  47. First pass by Safari

  48. 2006

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  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

  61. None
  62. None
  63. None
  64. iPhone first smart phone

  65. None
  66. 2008

  67. None
  68. HTC G1 first android phone

  69. None
  70. None
  71. None
  72. V8 JavaScript Engine • by Google • Starts the browser

    speed race
  73. yuicompressor

  74. None
  75. None
  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
  79. None
  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
  81. None
  82. 2009

  83. Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5th Edition

    / December 2009 ECMAScript Language Specification
  84. None
  85. None
  86. None
  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?
  89. None
  90. None
  91. Closure Compiler

  92. None
  93. 2010

  94. None
  95. iPhone 4 first retina display

  96. None
  97. None
  98. None
  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

  103. None
  104. None
  105. None
  106. AMD

  107. define(['jquery'] , function ($) { return function () {}; });

  108. None
  109. None
  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 {}; }));
  113. None
  114. 2 Way Data Binding

  115. UglifyJS

  116. None
  117. None
  118. None
  119. None
  120. Media Query

  121. 2012

  122. None
  123. None
  124. http://techreport.com/news/21037/doom-ported-to-firefox-using-javascript-htm

  125. None
  126. None
  127. None
  128. Grunt Bower Yeoman

  129. None
  130. None
  131. UglifyJS 2

  132. None
  133. None
  134. None
  135. None
  136. 2013

  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  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>
  146. None
  147. http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/

  148. asm.js

  149. None
  150. 2014

  151. None
  152. ESLint

  153. None
  154. None
  155. None
  156. None
  157. 2015

  158. None
  159. None
  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
  162. None
  163. None
  164. None
  165. None
  166. WebAssembly

  167. None
  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 } } }
  170. None