Chapter 1: 🕰️ The Return to Code

When Nostalgia Meets Innovation

👨🏾 (Me): Hey, I'm diving back into a web project. It's been a few years since I've been hands-on with code—ever since I became an engineering manager. Back in 2016, I was a senior engineer, pretty sharp with JavaScript. I've heard things have changed quite a bit. You're the most up-to-date web dev around here, right?

👱🏼‍♀️ (Web Dev): Well, we prefer "Full Stack Engineer" these days, but yeah, I'm your go-to person. With me and Claude.ai, we can build anything: AI-powered apps, blockchain dApps, serverless architectures—you name it. Just got back from ReactConf and Figma Config, so I'm all about the latest tech.

Chapter 2: 😲 The Shock of the New

Realizing You're Out of the Loop

👨🏾 (Me): Awesome! I need to create a page that displays the latest user activity. Just need to fetch data from a REST endpoint and display it in a filterable table, updating in real-time if anything changes on the server. I was thinking of keeping it simple and using jQuery to fetch and display the data. Thoughts?

👱🏼‍♀️ (Web Dev): Whoa, hold on! jQuery? In 2024? That's like using a flip phone in the era of holographic smartphones. We've moved way past that.

Chapter 3: 🤯 TypeScript? More Like TypeWhat?

Confronting the Unfamiliar

👨🏾 (Me): Wait, really? jQuery was the go-to library back in my day. What's everyone using now?

👱🏼‍♀️ (Web Dev): You said you knew JavaScript... Well, today it's all about React with Next.js.

👨🏾 (Me): React I've heard of. Dabbled in it a bit before moving into management. But what's Next.js?

👱🏼‍♀️ (Web Dev): Next.js is a powerful framework built on top of React. It offers server-side rendering, static site generation, and easy API routing. Think of it as React on steroids—optimizing performance and development speed.

Chapter 4: 🌀 The Rabbit Hole of Modern Tools

Overwhelmed by Choices

👨🏾 (Me): That sounds impressive. So I can use Next.js to fetch data from the server and display it?

👱🏼‍♀️ (Web Dev): Absolutely! But first, you'll want to set up your project with TypeScript.

👨🏾 (Me): TypeScript? Why add another layer? What's wrong with good old JavaScript?

👱🏼‍♀️ (Web Dev): TypeScript is a superset of JavaScript that adds static typing. It helps catch errors early, makes your code more maintainable, and improves developer experience.

👨🏾 (Me): Static typing... so like Java? I thought the beauty of JavaScript was its flexibility.

👱🏼‍♀️ (Web Dev): Flexibility is great until it leads to unexpected bugs. TypeScript balances flexibility with reliability. Trust me, once you get the hang of it, you'll wonder how you coded without it.

Chapter 5: 🧰 The Toolbox Overload

When Simple Tasks Become Complex Journeys

👨🏾 (Me): Alright, Next.js with TypeScript. Got it. Anything else I need?

👱🏼‍♀️ (Web Dev): Well, you'll also need to add some packages: TanStack Query for data fetching, Zustand for state management, and probably Tailwind CSS for styling.

👨🏾 (Me): Wait, hold on. That's a lot of new names. What's TanStack Query?

👱🏼‍♀️ (Web Dev): It's a powerful data-fetching library that simplifies handling server state, caching, and background updates. Makes asynchronous operations a breeze.

👨🏾 (Me): And Zustand?

👱🏼‍♀️ (Web Dev): Zustand is a lightweight state management library. Think of it as a simpler alternative to Redux.

👨🏾 (Me): Redux! I remember that one. Used it in a project back in 2016.

👱🏼‍♀️ (Web Dev): Exactly! Zustand offers similar capabilities but with less boilerplate and complexity.

Chapter 6: 😵 Feeling the Weight of Progress

Complexity Creep

👨🏾 (Me): This is starting to feel complicated for just fetching and displaying data.

👱🏼‍♀️ (Web Dev): I get it. It can seem overwhelming. But these tools make your app scalable and maintainable in the long run.

👨🏾 (Me): Can't I just include jQuery from a CDN and use AJAX calls? It was so straightforward.

👱🏼‍♀️ (Web Dev): Technically, yes, but you'd miss out on performance optimizations, modern best practices, and a better developer experience. Plus, you'd be going against the grain of modern development.

Chapter 7: 🚧 The Package Manager Maze

👨🏾 (Me): So how do I manage all these packages and dependencies?

👱🏼‍♀️ (Web Dev): You'll use a package manager like npm, yarn, or pnpm. pnpm is the new kid on the block—it's faster and more efficient with disk space.

👨🏾 (Me): Another new tool... What's pnpm?

👱🏼‍♀️ (Web Dev): It's like npm but optimized. It creates a single repository of packages, reducing disk space and speeding up installations.

👨🏾 (Me): I remember dealing with node_modules folders that took up gigabytes of space.

👱🏼‍♀️ (Web Dev): Exactly! pnpm solves that problem.

Chapter 8: 🚀 Deployment in the Modern Age

From FTP to Edge Functions

👨🏾 (Me): Once I have everything set up, how do I deploy the app?

👱🏼‍♀️ (Web Dev): You can use platforms like Vercel or Netlify. They're optimized for frontend frameworks like Next.js and handle deployment, scaling, and even serverless functions.

👨🏾 (Me): Serverless functions? Edge functions? What's all that about?

👱🏼‍♀️ (Web Dev): Serverless functions let you run backend code without managing servers. Edge functions run code closer to the user, reducing latency. It's great for real-time applications.

👨🏾 (Me): Back in my day, we just uploaded files to a server via FTP.

👱🏼‍♀️ (Web Dev): Oh, we've come a long way since then!

Chapter 9: 🔄 The Paradigm Shift

From OOP to Functional Programming

👨🏾 (Me): You mentioned functional components and hooks earlier. What happened to class components in React?

👱🏼‍♀️ (Web Dev): Functional components with hooks are the new standard. They make code more readable and easier to manage. Plus, they align well with functional programming principles.

👨🏾 (Me): Functional programming... like pure functions and immutability?

👱🏼‍♀️ (Web Dev): Exactly! Libraries like Ramda and Lodash/fp help with that. Functional programming reduces side effects and makes code more predictable.

👨🏾 (Me): I was all about object-oriented programming. Is that outdated now?

👱🏼‍♀️ (Web Dev): Not outdated, but functional programming offers benefits that are particularly useful in modern JavaScript development.

Chapter 10: 🎭 The Overabundance of Choices

Analysis Paralysis Sets In

👨🏾 (Me): Are there alternatives to React and Next.js?

👱🏼‍♀️ (Web Dev): Plenty! There's Vue.js, Angular, Svelte, Astro, Remix, and even emerging frameworks like Qwik and SolidJS.

👨🏾 (Me): That's... a lot. How do you keep up?

👱🏼‍♀️ (Web Dev): Continuous learning is part of the job. I follow industry blogs, attend conferences, and participate in online communities.

👨🏾 (Me): I feel both excited and overwhelmed.

Chapter 11: 🤔 The Inner Conflict

Questioning the Complexity

👨🏾 (Me): Is all this really necessary for building a simple data table?

👱🏼‍♀️ (Web Dev): I know it seems overkill, but modern users expect fast, interactive, and reliable applications. These tools help achieve that.

👨🏾 (Me): But isn't there value in simplicity?

👱🏼‍♀️ (Web Dev): Absolutely. Sometimes a simple solution is best. You could use a lightweight framework like Svelte or even vanilla JavaScript with modern ES6 features.

👨🏾 (Me): Now you're speaking my language. Tell me more about Svelte.

Chapter 12: 🌱 Discovering New Paths

Finding Balance Between Old and New

👱🏼‍♀️ (Web Dev): Svelte is a compiler that converts your code into efficient vanilla JavaScript at build time. It's great for smaller projects and has a gentle learning curve.

👨🏾 (Me): That sounds promising. Maybe I don't need to dive into the deep end just yet.

👱🏼‍♀️ (Web Dev): Exactly. It's all about choosing the right tool for the job.

Chapter 13: 📚 Embracing Continuous Learning

The Joy and Frustration of Ever-Changing Tech

👨🏾 (Me): You know, part of me misses the simplicity of earlier days. But another part is excited about all these advancements.

👱🏼‍♀️ (Web Dev): That's the beauty of tech. It's always evolving. Keeps us on our toes.

👨🏾 (Me): I think I'm ready to jump back in. Maybe start with Svelte and gradually explore other tools.

👱🏼‍♀️ (Web Dev): Great plan! And if you need any help, I'm here.

Chapter 14: 😂 The Inevitable Twist

When One Door Opens, Another Server Crashes

👨🏾 (Me): Alright, time to set up my development environment. I'll containerize the app with Docker to keep things consistent.

👱🏼‍♀️ (Web Dev): Perfect! Since you're familiar with Docker, you might want to look into Kubernetes for container orchestration.

👨🏾 (Me): Kubernetes? I've heard the name tossed around but haven't dived into it. What's that about?

👱🏼‍♀️ (Web Dev): Kubernetes, often called K8s, is a powerful system for automating deployment, scaling, and management of containerized applications.

👨🏾 (Me): Sounds complex. Do I need Kubernetes for this project?

👱🏼‍♀️ (Web Dev): If you're aiming for scalability and high availability, it's worth considering. Kubernetes manages your Docker containers across multiple machines.

👨🏾 (Me): So it's like Docker Compose but on steroids?

👱🏼‍♀️ (Web Dev): Exactly! It's the next step up. And since you're getting into that, we could also explore setting up CI/CD pipelines with tools like Jenkins or GitHub Actions.

👨🏾 (Me): Now we're venturing into DevOps territory.

👱🏼‍♀️ (Web Dev): Bingo! DevOps is an integral part of modern development.

👨🏾 (Me): Alright, let's schedule some time to go over Kubernetes and these pipelines. Feels like I'm about to open another can of worms.

👱🏼‍♀️ (Web Dev): Haha, welcome to 2024! Always something new to learn.

💡 Takeaway: TBH, writing this wasn't too hard since I started working on my most recent project. Stepping back into hands-on development after years in management can be both overwhelming and exhilarating. The web development landscape evolves rapidly, introducing new tools, frameworks, and paradigms.

While the abundance of choices can lead to analysis paralysis, it's also an opportunity to learn and grow.

Just remember, technology is a tool used to solve people problems. Not the other away around.

This article was inspired by the 2016 classic post, "How it feels to learn JavaScript". Back then, I was a senior engineer well-versed in JavaScript. Fast forward to 2024, as an director working on Professional.dev, I found myself kinda starting over.

Trying to navigate this brave new world of web development. And as it turns out, the rabbit hole goes even deeper—stay tuned for my next adventure into the world of DevOps in 2024!

💌 Subscribe to receive new articles every week!

🔗 Sign up for our newsletter to get updates 🤘

📺 Check out my YouTube channel for more in-depth content.

🚀 Follow my project I'm building in public: Professional.Dev.

👨🏾‍💻 Connect with me on LinkedIn and X (Twitter) to stay updated.

I hope you have a lovely day!

See you soon,

Caleb "TechDad_" ✌🏾