It's undeniable that emerging web technologies like HTML5 have changed the way today's applications are being built. Companies find themselves in a shift from traditional programming environments towards the open web platform. But despite its benefits, many are still left unaware of how critical it is to get the details right when building a web app. In this talk, we'll cover why the "Front-end Engineer" has become one of the core team members of this new age.

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