Download - Developers in the New Age of the Web
![Page 1: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/1.jpg)
D E V E L O P E R S I N T H E N E W A G E O F T H E W E B
K E V I N L A M P I N G
1
![Page 2: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/2.jpg)
S O F T W A R E D E V E L O P E R @ K L A M P I N G
K E V I N L A M P I N G
2
![Page 3: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/3.jpg)
3
![Page 4: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/4.jpg)
– J E F F AT W O O D
“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
4
![Page 5: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/5.jpg)
T H E N E W A G E O F T H E W E B
5
![Page 6: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/6.jpg)
T H E N E W A G E O F T H E W E B
6
![Page 7: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/7.jpg)
T H E N E W A G E O F T H E W E B
7
![Page 8: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/8.jpg)
W H Y T H E C H A N G E ?
8
![Page 9: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/9.jpg)
T H E U S E R E X P E R I E N C E
![Page 10: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/10.jpg)
S E PA R AT I O N O F C O N C E R N S
10
![Page 11: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/11.jpg)
S P E C I A L I Z AT I O N
11
![Page 12: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/12.jpg)
12
![Page 13: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/13.jpg)
B R O W S E R = S E R V E R
13
![Page 14: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/14.jpg)
14
![Page 15: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/15.jpg)
15
![Page 16: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/16.jpg)
16
![Page 17: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/17.jpg)
17
![Page 18: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/18.jpg)
T H E W O R L D O F T H E B R O W S E R J A VA S C R I P T G O T L U C K Y
18
![Page 19: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/19.jpg)
– J E F F AT W O O D
“If you want your software to be experienced by as many users as possible, there is absolutely no
better route than a web app.”
19
![Page 20: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/20.jpg)
– C S S
“You’re welcome”
20
![Page 21: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/21.jpg)
var distances = [100, 10]; // total x/y distances to move
var duration = 1000; // animate for one second
var steps = [(distances[0]/duration), (distances[1]/duration)];
var timeElapsed = 0;
var element = document.querySelector('.myElement');
var interval = setInterval(function () {
if (timeElapsed > duration) {
// cancel interval
clearInterval(interval);
return;
} else {
// move element
element.style.top = parseInt(element.style.top, 10) + steps[0] + 'px';
element.style.left = parseInt(element.style.left, 10) + steps[0] + 'px';
// increase time elapsed
timeElapsed += 50;
}
}, 50)
21
![Page 22: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/22.jpg)
.myElement {
position: absolute;
transition: all 1s linear;
}
.after {
top: 100px;
left: 10px;
}
22
![Page 23: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/23.jpg)
– H T M L 5
“Don’t forget to thank me too.”
23
![Page 24: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/24.jpg)
T H E F R O N T- E N DH T M L , C S S , J S
24
![Page 25: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/25.jpg)
– J E F F AT W O O D
“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
25
![Page 26: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/26.jpg)
T H E F R O N T- E N D E N G I N E E R
26
![Page 27: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/27.jpg)
W E B S I T E P E R F O R M A N C E
27
![Page 28: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/28.jpg)
"47% of consumers expect a web page to load in 2 seconds or less"
28
![Page 29: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/29.jpg)
"1 second delay in page response can result in a 7% reduction in conversions"
29
![Page 30: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/30.jpg)
– S T E V E S O U D E R S
"80-90% of the end-user response time is spent on the frontend"
30
![Page 31: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/31.jpg)
A C C E S S I B I L I T Y
31
![Page 32: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/32.jpg)
- T I M B E R N E R S - L E E
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential
aspect.”
32
![Page 33: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/33.jpg)
M A I N TA I N A B I L I T Y
33
![Page 34: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/34.jpg)
– N I C O L A S G A L L A G H E R
"Despite CSS being so hard to maintain, it's often the part of the [Front-end] stack people are least
interested in protecting from tech debt."
34
![Page 35: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/35.jpg)
B R O W S E R S
35
![Page 36: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/36.jpg)
– D O U G L A S C R O C K F O R D
"Browsers are the most hostile software development environment imaginable"
36
![Page 37: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/37.jpg)
C U R I O S I T Y
37
![Page 38: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/38.jpg)
R E S P O N S I V E W E B D E S I G N
![Page 39: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/39.jpg)
• Backbone.js
• AngularJS
• Ember.js
• KnockoutJS
• Dojo
• YUI
• Agility.js
• Knockback.js
• CanJS
• Maria
• Polymer
• React
• cujoJS
• Montage
• Sammy.js
• Stapes
• Epitome
• soma.js
• DUEL
• Kendo UI
• PureMVC
• Olives
• PlastronJS
• Dijon
• rAppid.js
• DeftJS + ExtJS
• Aria Templates
• Enyo +
• SAPUI5
• Exoskeleton
• Atma.js
• Ractive.js
• ComponentJS
• Vue.js
![Page 40: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/40.jpg)
C R E AT I V I T Y
40
![Page 41: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/41.jpg)
F R O M D E S I G N T O I M P L E M E N TAT I O N
![Page 42: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/42.jpg)
L O G I C A L C R E AT I V I T Y
42
![Page 43: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/43.jpg)
F R O N T- E N D E N G I N E E RC U LT I VA T I N G T H E
43
![Page 44: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/44.jpg)
A L L O W E X P E R I M E N TAT I O N
44
![Page 45: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/45.jpg)
A C C E P T C U R I O S I T Y
45
![Page 46: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/46.jpg)
C U R I O S I T Y D R I V E S I N N O VAT I O N
![Page 47: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/47.jpg)
G I V E R O O M T O G R O W
47
![Page 48: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/48.jpg)
F R O N T- E N D E N G I N E E RH I R I N G T H E
48
![Page 49: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/49.jpg)
L O O K O N T H E W E B
![Page 50: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/50.jpg)
J AVA S C R I P T N I N J AH I R E T H E
D O N ’ T
50
![Page 51: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/51.jpg)
J AVA S C R I P T D E V E L O P E RH I R E T H E
D O N ’ T
51
![Page 52: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/52.jpg)
F R O N T- E N D E N G I N E E RH I R E T H E
52
![Page 53: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/53.jpg)
F R O N T- E N D D E V E L O P E RH I R E T H E
53
![Page 54: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/54.jpg)
U I D E V E L O P E RH I R E T H E
54
![Page 55: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/55.jpg)
S O F T W A R E D E V E L O P E RH I R E T H E
55
![Page 56: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/56.jpg)
F R O N T- E N D E N G I N E E RI N T E R V I E W I N G T H E
56
![Page 57: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/57.jpg)
F R O N T- E N D E N G I N E E RI N T E R V I E W T H E
57
![Page 58: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/58.jpg)
S E R V E R - S I D E E N G I N E E RC O N V E R T I N G T H E
58
![Page 59: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/59.jpg)
– S T E V E S O U D E R S
"Asking backend developers to do front-end engineering is a mistake. Front-end engineering is
an established discipline."
59
![Page 60: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/60.jpg)
R E S P E C T T H E R O L E
60
![Page 61: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/61.jpg)
F I N D T H E I R G E N U S
![Page 62: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/62.jpg)
D E V E L O P E R S I N T H E N E W A G E O F T H E W E B
62
![Page 63: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/63.jpg)
– J E F F AT W O O D
“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
63
![Page 64: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/64.jpg)
T H A N K S !
@ K L A M P I N G
64
![Page 65: Developers in the New Age of the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062418/555290e7b4c9051f108b4a4c/html5/thumbnails/65.jpg)
R E F E R E N C E S
• http://blog.codinghorror.com/the-principle-of-least-power/
• http://www.fatagnus.com/nate-koechley-talks-about-professional-frontend-engineering/
• http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/
• http://www.computedstyle.com/2010/12/hiring-front-end-engineers.html
• http://www.nczonline.net/blog/2007/08/15/what-makes-a-good-front-end-engineer/
• http://css-tricks.com/interviewing-front-end-engineer-san-francisco/
• http://blog.codinghorror.com/all-programming-is-web-programming/
• http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
• http://blog.kissmetrics.com/loading-time/
• https://twitter.com/necolas/status/343077206471348224
• http://www.codehesive.com/ninjarockstars/
• http://www.stevesouders.com/blog/2013/08/27/web-performance-for-the-future/
65