Why is it so hard to be a web developer?

A talk on today's world of abstractions in web development. Presented at Geeks on a Beach 2014.

2. M I N I - D O C U M E N T A R Y ON A DAY IN THE LIFE OF A WEB DEVELOPER
3. Let’s make a “like” button. Let’s go.
4. Let’s start with a search.
6. Looking good so far.
7. It makes buttons.
8. It gives you code.
9. Now let’s make a page…
10. Paste it in…
12. And load it.
13. Nope. It doesn’t work.
14. HUH.
15. You’ll start to look for solutions online.
16. Maybe you’ll ask a more-experienced colleague for help.
17. “Oh this is easy. Just run it on a local server.”
18. “Open a terminal.”
19. “Do you have Ruby installed? Nah, let’s go with Python…”
20. “Try using Python’s built-in SimpleHTTPServer module.”
21. “Oh, what port does Python use again? Oh right, 8000…”
22. “So, yeah… point your browser to localhost:8000.”
23. “And there you have it. TADA! It works!”
24. HUH. That’s really confusing, and that’s the job of many web developers today.
25. R I C O S T A . C R U Z @rstacruz
26. Why is it so hard to be a web developer today? A S H O R T T A L K B Y @rstacruz R I C O S T A . C R U Z O N
27. 2014 2000 1990 2010 Let’s start with a brief history. Let’s talk about the Internet.
28. 2014 2000 1990 2010 www The web started before the 90’s. Back then, nobody took it seriously so much.
29. People were happy with sites like these. To make these things, we used HTML.
30. HTML
31. 1995 2014 2000 1990 2010 Netscape Navigator 2.0 In the mid 90’s, a new browser was released that changed the web.
33. JAVASCRIPT .js It shipped with a new language. Nobody cared much, not even Netscape…
34. Netscape considered their client-server offering a distributed OS, running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++ and aimed at professional programmers, Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers, like Microsoft's Visual Basic. “WIKIPEDIA ARTICLE ON JAVASCRIPT:
35. JavaScript Java is to is to Car Carpet
36. 1995 2014 2000 1990 2010 JavaScript 1995 then can also be considered as the birth year of JavaScript.
37. HTML JavaScript We now have 2 major technologies in the world wide web.
38. 2014 2000 1990 2010 Some years then pass.
39. <marquee> <blink> <frameset> <frame> CSS JSS … There were lots of inventions along the way. Some are good, some are better forgotten.
40. Designing with Web Standards 2003 Soon enough, a book came along and made us realize we actually have the technology to properly make cool things on the web.
41. 2003 2014 2000 1990 2010 2003 gave rise to the trifecta of the 3 main technologies that make the web possible.
42. HTML JS CSS
43. This modern use of CSS made many things possible. Designers were able to make multiple looks for a site with the same markup.
45. HTML JS CSS We realized that we can combine the 3 together to make some pretty amazing things.
46. Let’s build a “like” button. From scratch.
47. A “like” button from scratch.
48. with no frameworks.
49. Just plain HTML, CSS…
50. and some JavaScript.
51. Here we go!
52. Some CSS here…
53. Some CSS there…
56. And more…
57. Let’s steal some icons from ionicons.com
60. Make a loading spinner animation…
61. Using animation @keyframes…
62. Some research…
63. A little JavaScript (no jQuery!)…
64. Build a small server on Node.js…
65. No express.js or any frameworks here…
66. Just plain Node.js…
67. Oops, my laptop is about to die, hang on…
68. Just a little more…
69. and…
70. Tada!
71. It finally works!
72. TOTAL TIME: 32 minutes
73. 2006 2014 2000 1990 2010 jQuery One of the solutions made to address this complexity is a library called jQuery.
74. Scroller effect without using any frameworks
75. Scroller effect without using any frameworks
76. Scroller effect without using any frameworks
77. Scroller effect without using any frameworks
78. Scroller effect without using any frameworks
79. Scroller effect without using any frameworks
80. Scroller effect without using any frameworks
81. Scroller effect without using any frameworks
82. IE10 and below IE8 and below Gecko Firefox et al Standards
83. Scroller effect with jQuery
84. HTML JS CSS jQuery The complexities of JavaScript were hidden away by jQuery. This is a concept called “abstraction.”
85. Abstraction
86. HTML JS CSS jQuery jQuery sits on top of JavaScript, abstracting its details away.
87. But what about CSS?
88. CSS circa 2006
89. Sass “fixed” the pains of CSS syntax.
91. HTML JS CSS jQuery Sass Sass is an abstraction on top of CSS.
92. Abstraction
93. HTML JS CSS jQuery Sass But what about HTML?
94. It wasn’t long until we realised HTML can be “fixed”, too.
95. HTML JS CSS jQuery Sass HAML But what about JavaScript’s syntax?
97. HTML JS CSS jQuery Sass HAML CoffeeScript Preprocessors Frameworks And that completes one level of abstraction: preprocessors.
98. Abstraction LEVEL 2
99. HTML JS CSS jQuery Sass HAML CoffeeScript Preprocessors Frameworks
100. Bootstrap circa 2012 We realised there’s more things we can abstract away, because we write too much code.
101. HTML JS CSS jQuery Sass HAML CoffeeScript Bootstrap Frameworks Preprocessors Frameworks are born.
102. Abstraction LEVEL 3
103. It’s not long until more people start to think: “I can make better abstractions.”
104. HTML JS CSS jQuery Sass HAML CoffeeScript Bootstrap Frameworks Preprocessors There are many solutions to a problem.
105. HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton And people will build them.
107. But now, how do we manage all these packages?
108. HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton
109. HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component So: package managers are born.
110. Abstraction LEVEL 4
111. This is your typical everyday screen for a web developer. Perhaps there’s a way to manage all these?
112. HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component
113. HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component Gulp Grunt Task managers
114. Abstraction LEVEL 5
115. Maybe there’s a way to manage all that? HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Bootstrap Foundation Skeleton Bower NPM Component Gulp Grunt
116. HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component Gulp Grunt Task managers Yeoman H5BP Ionic …? Boilerplates Yes there are.
117. Abstraction LEVEL
119. So then, is abstraction bad? Maybe, But then again…
120. Everything is just an abstraction of something else. Y O U K N O W ,
121. Every piece of technology we have today is just abstracting away the complexity below it.
122. C++ is an abstraction of C. Rails is an abstraction of Rack and ActiveRecord. ActiveRecord is an abstraction of SQL. Rack is an abstraction of HTTP. Angular.js is an abstraction of JS AJAX + DOM. TypeScript is an abstraction of JavaScript. Flask is an abstraction of Python WSCGI. Django is an abstraction of SQL and Python WSCGI. Bootstrap is an abstraction of CSS and JS behaviours. jQuery is an abstraction of the JavaScript DOM. RubyMotion is an abstraction of the Cocoa API. Phantom is an abstraction of Webkit. Express is an abstraction of Node.js HTTP. Socket.io is an abstraction of web sockets. CoffeeScript is an abstraction of JavaScript syntax. Heroku is an abstraction of AWS. … e.g.:
123. Abstractions are what made everything today possible. H O W E V E R ,
124. jQuery is an abstraction of the document object model. DOM is an abstraction of HTML internals. JavaScript is an abstraction of the browser. The browser is an abstraction of OS API calls. OS’s are an abstraction of your machine instructions. Machine instructions are an abstraction of electric signals. … e.g.:
125. Abstraction is how humans deal with complexity. A B S T R A C T I O N I S B Y N E C E S S I T Y
126. Abstractions are what made everything today possible. @rstacruz R I C O S T A . C R U Z