Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Web Trends to 2015
othree
October 22, 2015
Technology
4
230
Web Trends to 2015
othree
October 22, 2015
Tweet
Share
More Decks by othree
See All by othree
othree
3
1.4k
othree
3
2.3k
othree
1
1.3k
othree
1
1.8k
othree
9
2.3k
othree
4
280
othree
6
3.3k
othree
2
1.9k
othree
1
89
Other Decks in Technology
See All in Technology
siroemk
0
280
stakaya
14
8.5k
adarapata
2
490
kekeke_47
0
460
hgsgtk
5
1.3k
ocise
0
210
terurou
0
240
_kensh
1
210
sho7650
0
360
kanaugust
PRO
0
120
oracle4engineer
0
2.8k
torisoup
0
310
Featured
See All Featured
jensimmons
207
10k
destraynor
223
47k
jakevdp
775
200k
chrislema
173
14k
jponch
103
5k
jlugia
216
16k
pedronauck
652
110k
cherdarchuk
71
260k
danielanewman
1
480
chriscoyier
684
180k
addyosmani
1347
190k
eitanlees
111
9.9k
Transcript
Web Trend Course 6
1998
None
None
None
1999
None
None
None
2001
None
2002
None
None
2003
None
None
None
None
2002
2000
None
None
None
2004
None
None
None
None
None
None
Web Hypertext Application Technology Working Group
2005
None
None
None
None
RESTful API
ORM
CSRF token <meta content="authenticity_token" name="csrf-param" /> <meta content="gv1xdpH2w4MYcMtoT52pRPV+tPoWFDSJhxNiBOC5idQ= name="csrf-token" />
Unobtrusive JavaScript • Separation of functionality (the "behavior layer") from
a Web page's structure/content and presentation
Asset Pipeline • All together assets pack system • JS,
CSS, images, html • Concat, minimize, hashize, update file name
None
None
None
None
First pass by Safari
2006
None
None
None
None
None
None
None
Nesting nav { ul { margin: 0; padding: 0; list-style:
none; } li { display: inline-block; } }
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); }
Variable $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100%
$font-stack; color: $primary-color; }
JSmin
2007
None
None
None
iPhone first smart phone
None
2008
None
HTC G1 first android phone
None
None
None
V8 JavaScript Engine • by Google • Starts the browser
speed race
yuicompressor
None
None
First pass by Webkit
canvas
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
None
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
None
2009
Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5th Edition
/ December 2009 ECMAScript Language Specification
None
None
None
# Assignment: number = 42 opposite = true # Conditions:
number = -42 if opposite # Functions: square = (x) -> x * x
# 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?
None
None
Closure Compiler
None
2010
None
iPhone 4 first retina display
None
None
None
1 Way Data Binding
2011
Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5.1 Edition
/ June 2011 ECMAScript Language Specification
and First ES6 Draft
None
None
None
AMD
define(['jquery'] , function ($) { return function () {}; });
None
None
var greetings = require("./greetings.js"); module.exports = "Bonjour";
UMD
(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 {}; }));
None
2 Way Data Binding
UglifyJS
None
None
None
None
Media Query
2012
None
None
http://techreport.com/news/21037/doom-ported-to-firefox-using-javascript-htm
None
None
None
Grunt Bower Yeoman
None
None
UglifyJS 2
None
None
None
None
2013
None
None
None
None
None
None
None
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
<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>
None
http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/
asm.js
None
2014
None
ESLint
None
None
None
None
2015
None
None
http://www.codekitchen.ca/visualizing-glimmer-performance
Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 6th Edition
/ June 2015 ECMAScript® 2015 Language Specification
None
None
None
None
WebAssembly
None
Relay • Use GraphQL to communicate with server • Try
to replace RESTful API
GraphQL { user(id: 3500401) { id, name, isViewerFriend, profilePicture(size: 50)
{ uri, width, height } } }
None