Your SlideShare is downloading. ×
Developers in the New Age of the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developers in the New Age of the Web

150
views

Published on

Presented at InnoTech San Antonio 2014. All rights reserved.

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
150
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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
  • 3. 3
  • 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
  • 12. 12
  • 13. B R O W S E R = S E R V E R 13
  • 14. 14
  • 15. 15
  • 16. 16
  • 17. 17
  • 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 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

×