Presented at InnoTech San Antonio 2014. All rights reserved.

1. 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

2. S O F T WA 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

3. 3

4. – J E F F AT W O O D
“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
4

5. T H E N E W A G E O F T H E W E B
5

6. T H E N E W A G E O F T H E W E B
6

7. T H E N E W A G E O F T H E W E B
7

8. W H Y T H E C H A N G E ?
8

9. T H E U S E R E X P E R I E N C E

10. S E PA R AT I O N O F
C O N C E R N S
10

11. S P E C I A L I Z AT I O N
11

12. 12

13. B R O W S E R = S E R V E R
13

14. 14

15. 15

16. 16

17. 17

18. 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

19. – 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

20. – C S S
“You’re welcome”
20

21. 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

22. .myElement {
position: absolute;
transition: all 1s linear;
}
.after {
top: 100px;
left: 10px;
}
22

23. – H T M L 5
“Don’t forget to thank me too.”
23

24. T H E F R O N T- E N D
H T M L , C S S , J S
24

25. – J E F F AT W O O D
“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
25

26. T H E F R O N T- E N D
E N G I N E E R
26

27. W E B S I T E P E R F O R M A N C E
27

28. "47% of consumers expect a web page to load in 2
seconds or less"
28

29. "1 second delay in page response can result in a
7% reduction in conversions"
29

30. – 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

31. A C C E S S I B I L I T Y
31

32. - 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

33. M A I N TA I N A B I L I T Y
33

34. – 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

35. B R O W S E R S
35

36. – 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

37. C U R I O S I T Y
37

38. R E S P O N S I V E
W E B D E S I G N

39. • 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

40. C R E AT I V I T Y
40

41. F R O M D E S I G N T O
I M P L E M E N TAT I O N

42. L O G I C A L C R E AT I V I T Y
42

43. F R O N T- E N D E N G I N E E R
C U LT I VA T I N G T H E
43

44. A L L O W
E X P E R I M E N TAT I O N
44

45. A C C E P T C U R I O S I T Y
45

46. C U R I O S I T Y D R I V E S
I N N O VAT I O N

47. G I V E R O O M T O G R O W
47

48. F R O N T- E N D E N G I N E E R
H I R I N G T H E
48

49. L O O K O N T H E W E B

50. J AVA S C R I P T N I N J A
H I R E T H E
D O N ’ T
50

51. J AVA S C R I P T D E V E L O P E R
H I R E T H E
D O N ’ T
51

52. F R O N T- E N D E N G I N E E R
H I R E T H E
52

53. F R O N T- E N D D E V E L O P E R
H I R E T H E
53

54. U I D E V E L O P E R
H I R E T H E
54

55. S O F T WA R E D E V E L O P E R
H I R E T H E
55

56. F R O N T- E N D E N G I N E E R
I N T E R V I E W I N G T H E
56

57. F R O N T- E N D E N G I N E E R
I N T E R V I E W T H E
57

58. S E R V E R - S I D E E N G I N E E R
C O N V E R T I N G T H E
58

59. – 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

60. R E S P E C T T H E R O L E
60

61. F I N D T H E I R G E N U S

62. 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

63. – J E F F AT W O O D
“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
63

64. T H A N K S !
@ K L A M P I N G
64

65. 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