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

181

Published on

Presented at InnoTech San Antonio 2014. All rights reserved.

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

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.

×