Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14

Slide 15

Slide 15 text

15

Slide 16

Slide 16 text

16

Slide 17

Slide 17 text

17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

– 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

Slide 20

Slide 20 text

– C S S “You’re welcome” 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

– 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

- 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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

– 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

Slide 35

Slide 35 text

B R O W S E R S 35

Slide 36

Slide 36 text

– 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

Slide 37

Slide 37 text

C U R I O S I T Y 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

• 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

Slide 40

Slide 40 text

C R E AT I V I T Y 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

– 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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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