Web Trends to 2015

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