Why Is Web Development A Cluster F*ck?

Episode Sponsor - Wix Studio

We'd like to thank this episode's sponsor for their support!

Wix Studio: The Web Platform for Agencies and Enterprises

Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.

Check out Wix Studio today.

Show Notes

Intro

• Web development is known for being extremely convoluted in terms of different technologies to solve the same problems
• This leads to extreme confusion for new developers when they are trying to learn/get a job in the industry
• For senior developers we realize we were raised in the darkness so we went through the evolution and creation of a lot of these tools and usually appreciate them because they made stuff we did earlier much easier
  • For example tailwind makes it super easy to setup a full most unopinionated design system in minutes when before you’d have to spend potentially days setting up a robust one with something like SCSS/SASS
• Do you dive into HTML, CSS, JS, or go straight to React? Do I need to know webpack before even starting React? Should I learn tailwind or is CSS enough? Wtf is serverless? Why is HTMX all of a sudden here?
  

History of Web Development

Early Days of the Web

• 1990s:
  • HTML for structure.
  • CSS for styling.
  • JavaScript for basic interactivity.
  • Mostly static websites.

Rise of Server-Side Technologies

• Late 1990s - Early 2000s:
  • Introduction of PHP, ASP.NET, JSP.
  • Dynamic websites with server-side scripting.
  • Emergence of databases (e.g., MySQL) for content management.
  • LAMP (Linux, Apache, MySQL, PHP)

First Wave of JavaScript Frameworks

• Mid 2000s:
  • AJAX revolutionizes interactivity and responsiveness.
  • Libraries like jQuery simplify DOM manipulation.
  • Early frameworks like Prototype and MooTools.

Single Page Applications (SPAs)

• Late 2000s - Early 2010s:
  • Introduction of SPAs.
  • Backbone.js and AngularJS emerge.
  • Focus on client-side rendering and modular code.

Explosion of JavaScript Frameworks and Libraries

• Mid 2010s:
  • Introduction of React, Vue.js, and Angular (2+).
  • Growing ecosystem of packages and tools (Webpack, Babel).
  • Rise of NPM and the concept of micro-packages.

Modern Development Practices

• Late 2010s - 2020s:
  • Introduction of TypeScript for type safety.
  • JAMstack architecture (JavaScript, APIs, Markup).
  • Tools like Next.js, Nuxt.js for server-side rendering.
  • Emphasis on DevOps, CI/CD pipelines, and containerization (Docker, Kubernetes).

Current State of Web Development

• 2020s:
  • Continual evolution with new frameworks and libraries.
  • Focus on performance, scalability, and developer experience.
  • Debate over "JavaScript fatigue" due to the overwhelming number of tools and frameworks.
  • Serverless

Framework, tools and library Debates

• As more and more developers were onboarded each had their own opinions. This would lead to disagreements and out of those new tools would be born to tackle similar problems
• React vs Angular vs Vue
• Webpack vs Vite vs Rollup vs Rspack, etc
• Prettier vs ESLint
• Sass vs Less vs Tailwind

Suggestions to avoid being overwhelmed

• Focus on Fundamentals
  • HTML, CSS and JavaScript are here to stay
• Choose one stack and stick to it initially
  • If you learn React really deep, all other frontend frameworks will make sense to you
• Build projects
  • When building projects you’ll notice some things are really difficult and you’ll naturally reach for tools without having to learn them in advance
  • This is how most of us senior devs were introduced to tools without being overwhelmed
• Join developer communities
  • Asking questions and just being surrounded by other developers can make it easier to understand when something is worthwhile to learn or when you can skip
• Follow structured learning path
  • Find a roadmap or create a roadmap that works for you and follow it

Shoutouts!

Michael LaRocca

• Author of the Self-Taught the X Generation blog, at selftaughttxg.com