Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why is it so hard to be a web developer?

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.

Rico Sta. Cruz

August 22, 2014
Tweet

More Decks by Rico Sta. Cruz

Other Decks in Technology

Transcript

  1. 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
  2. R I C O S T A . C R

    U Z @rstacruz
  3. 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
  4. 2014 2000 1990 2010 www The web started before the

    90’s. Back then, nobody took it seriously so much.
  5. 1995 2014 2000 1990 2010 Netscape Navigator 2.0 In the

    mid 90’s, a new browser was released that changed the web.
  6. 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:
  7. 1995 2014 2000 1990 2010 JavaScript 1995 then can also

    be considered as the birth year of JavaScript.
  8. <marquee> <blink> <frameset> <frame> CSS JSS … There were lots

    of inventions along the way. Some are good, some are better forgotten.
  9. 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.
  10. 2003 2014 2000 1990 2010 2003 gave rise to the

    trifecta of the 3 main technologies that make the web possible.
  11. This modern use of CSS made many things possible. Designers

    were able to make multiple looks for a site with the same markup.
  12. HTML JS CSS We realized that we can combine the

    3 together to make some pretty amazing things.
  13. 2006 2014 2000 1990 2010 jQuery One of the solutions

    made to address this complexity is a library called jQuery.
  14. HTML JS CSS jQuery The complexities of JavaScript were hidden

    away by jQuery. This is a concept called “abstraction.”
  15. HTML JS CSS jQuery Sass HAML CoffeeScript Preprocessors Frameworks And

    that completes one level of abstraction: preprocessors.
  16. Bootstrap circa 2012 We realised there’s more things we can

    abstract away, because we write too much code.
  17. 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.
  18. 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
  19. 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.
  20. This is your typical everyday screen for a web developer.

    Perhaps there’s a way to manage all these?
  21. 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
  22. 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
  23. 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
  24. 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.
  25. 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.:
  26. 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.:
  27. 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