Developers in the New Age of the Web

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

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

3

– J E F F AT W O O D

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”

4

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

5

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

6

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

7

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

8

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

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

10

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

11

12

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

13

14

15

16

17

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

– 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

– C S S

“You’re welcome”

20

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

.myElement {

position: absolute;

transition: all 1s linear;

}

.after {

top: 100px;

left: 10px;

}

22

– H T M L 5

“Don’t forget to thank me too.”

23

T H E F R O N T- E N DH T M L , C S S , J S

24

– J E F F AT W O O D

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”

25

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

26

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

27

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

28

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

29

– 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

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

31

- 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

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

33

– 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

B R O W S E R S

35

– 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

C U R I O S I T Y

37

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

• 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

C R E AT I V I T Y

40

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

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

42

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

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

44

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

45

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

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

47

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

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

J AVA S C R I P T N I N J AH I R E T H E

D O N ’ T

50

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

F R O N T- E N D E N G I N E E RH I R E T H E

52

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

53

U I D E V E L O P E RH I R E T H E

54

S O F T W A R E D E V E L O P E RH I R E T H E

55

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

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

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

– 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

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

60

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

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

– J E F F AT W O O D

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”

63

T H A N K S !

@ K L A M P I N G

64

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