0
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 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
– 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
bet...
– 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 = [(dis...
.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 D
H 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...
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 peo...
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
• Rea...
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 R
C 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 R
H 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 A
H 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 R
H 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 R
H I R E T H E

52
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
U I D E V E L O P E R
H I R E T H E

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

55
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
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
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
– 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...
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-t...
Upcoming SlideShare
Loading in...5
×

Developers in the New Age of the Web

142

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Developers in the New Age of the Web"

  1. 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. 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. 3
  4. 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. 5. T H E N E W A G E O F T H E W E B 5
  6. 6. T H E N E W A G E O F T H E W E B 6
  7. 7. T H E N E W A G E O F T H E W E B 7
  8. 8. W H Y T H E C H A N G E ? 8
  9. 9. T H E U S E R E X P E R I E N C E
  10. 10. S E PA R AT I O N O F C O N C E R N S 10
  11. 11. S P E C I A L I Z AT I O N 11
  12. 12. 12
  13. 13. B R O W S E R = S E R V E R 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 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. 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. 20. – C S S “You’re welcome” 20
  21. 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. 22. .myElement { position: absolute; transition: all 1s linear; } .after { top: 100px; left: 10px; } 22
  23. 23. – H T M L 5 “Don’t forget to thank me too.” 23
  24. 24. T H E F R O N T- E N D H T M L , C S S , J S 24
  25. 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. 26. T H E F R O N T- E N D E N G I N E E R 26
  27. 27. W E B S I T E P E R F O R M A N C E 27
  28. 28. "47% of consumers expect a web page to load in 2 seconds or less" 28
  29. 29. "1 second delay in page response can result in a 7% reduction in conversions" 29
  30. 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. 31. A C C E S S I B I L I T Y 31
  32. 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. 33. M A I N TA I N A B I L I T Y 33
  34. 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. 35. B R O W S E R S 35
  36. 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. 37. C U R I O S I T Y 37
  38. 38. R E S P O N S I V E W E B D E S I G N
  39. 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. 40. C R E AT I V I T Y 40
  41. 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. 42. L O G I C A L C R E AT I V I T Y 42
  43. 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. 44. A L L O W E X P E R I M E N TAT I O N 44
  45. 45. A C C E P T C U R I O S I T Y 45
  46. 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. 47. G I V E R O O M T O G R O W 47
  48. 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. 49. L O O K O N T H E W E B
  50. 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. 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. 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. 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. 54. U I D E V E L O P E R H I R E T H E 54
  55. 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. 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. 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. 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. 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. 60. R E S P E C T T H E R O L E 60
  61. 61. F I N D T H E I R G E N U S
  62. 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. 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. 64. T H A N K S ! @ K L A M P I N G 64
  65. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×