Developers in the New Age of the Web

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.

Transcript

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
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
13. B R O W S E R = S E R V E R 13
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 I 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