How (The Heck) Did We End Up Here?!

Rate this content
Bookmark
Slides

Web development has changed significantly over the past 15 years, and we'll take a satirical look at how daunting it is for newcomers to get started nowadays. In doing so, we'll discuss what is necessary to build a full web application, and I will be going over most of the technology I personally like to use for that.

6 min
06 Jun, 2023

Video Summary and Transcription

Web development has evolved significantly over the past 25 years, with the introduction of JavaScript and PHP. The choices for IDEs were limited, but local development was made easy with XAMP and deployment was as simple as FTP. Modern web development involves selecting a UI library or framework, deploying the front-end to platforms like Vercel or CloudFlare, and using serverless providers for persistent data. ORMs and query builders like Prisma and Drizzle facilitate communication with the database. Companies should prioritize delivering products over custom solutions to avoid unnecessary devops issues.

Available in Español

1. Evolution of Web Development

Short description:

Web development has evolved significantly over the past 25 years. Starting with JavaScript and PHP 15 years ago, the choices for IDEs were limited to Dreamweaver and Eclipse. Writing a simplified version of a guest book involved creating an HTML form, fetching comments from a database, and handling form submissions. Local development was made easy with XAMP, and deployment was as simple as FTP. Modern web development involves selecting a UI library or framework, deploying the front-end to platforms like Vercel or CloudFlare, and using serverless providers for persistent data. ORMs and query builders like Prisma and Drizzle facilitate communication with the database. Despite the convenience of serverless, certain workloads require a stateful backend. Applications today have numerous capabilities, but companies should prioritize delivering products over custom solutions to avoid unnecessary devops issues.

Web development has changed dramatically in the past 25 years and even though I now work as a software engineer at JetBrains, I like to remind myself that it was about 15 years ago when I started with JavaScript and PHP. Fasten your seatbelts and join me on a ride down the memory lane back to where I started with web development.

Nowadays there is a plethora of IDEs available but back then there was no PHP store and I remember having the choice between either Dreamweaver and Eclipse. As a teenager without money the choice was fairly easy and I definitely didn't get a correct version of Dreamweaver so I picked Eclipse. However this screenshot here isn't really representative of the past because there was no dark theme unfortunately.

Let's start by writing a simplified version of a guest book smooshed into a single file. First we need a classic HTML form that users can fill out with their comments. Next we need to fetch existing comments from a database using MySQL queries and then we need to iterate over them to display them. So far so good. Finally we need to handle the user actually submitting the form and writing the new comment into the database. Of course nothing in this code was type safe or safe against any injections to begin with but it did the trick but it did the trick and it did allow me to brag in front of my friends. Interestingly enough without my glasses I couldn't really tell the difference between this code and a remix application since both use the same structure separating action handler, loader and actual content. Running this locally was easy using XAMP which was a convenient way to run Apache and MySQL locally. Deploying this guest book was as easy as uploading a file via FTP. Everything was fairly easy, unlike today's workflows unfortunately.

So let's check out modern web development in comparison. First we have to select our UI library or framework of choice be it vanilla react or a flavored framework such as next, remix or something different such as solid. Of course there are other options available if you happen to be working with clients who haven't really caught up just yet. For our architecture we have a front-end that needs to be deployed somewhere, preferably Vercel or CloudFlare to circumvent dealing with AWS or GCP directly. The front-end will require persistent data stored in a database for which we have multiple serverless providers depending on your choice of flavor, with Planetscale being my absolute favorite. Type safety and a desire for decent developer economics have led to ORMs and query builders such as Prisma, Drizzle or Kiesli which will be our tools to communicate with the database. In the era of serverless we also have to be conscious about using classic database connections or using serverless drivers which are supported in edge environments. Yet another thing to keep in mind. Despite all the talk about serverless there are certain workloads such as long-running tasks that don't really work in these environments which require a classic stateful backend which we can host on fly.io or railway. It goes without saying that these will also exchange data with the database using our orm or our query builder. We're still not done though. There are many more capabilities that applications have nowadays such as authentication, logging, real-time updates and more. For everything imaginable there is some useful platform or service but compared to uploading just a single php file or at least a few of them to a single server i really wonder how the heck did we end up here. The answer is quite simple money. I see way too often that companies try to save hundreds of dollars by coming up with custom solutions and neglecting that the time it takes developers to troubleshoot devops issues far outweighs the savings. Let's just focus on delivering products and not deal with too many devops issues along the way shall we. That's all I've got for today.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)