Modern web development. We all have a love and hate relationship with it because while it revolutionized web development practices, it also greatly complicated them.
I’d like to go over a few aspects of modern web development and explain the benefits that I’ve been able to appreciate. I will also mention when you would still want to do things the traditional way.
“Fun” backstory… I actually ended up writing this twice because my first draft got lost (autosave failed). I was initially so excited about my first draft that I ended up tweeting about it, which soon after I ended up losing. What you’re about to read is the much better version because writing something a second time from memory actually helps you recall the good parts.
The old way: Manually downloading package files into a
vendor folder or linking a CDN.
The modern way: Using package managers like npm or Yarn.
Benefits: Being able to manage all of your packages with
remove commands not only saves time, but also keeps track of things like outdated or unsecure packages. The one downside is the large number of files those packages end up depending on and so you may still consider it better to link a package from a CDN for very simple sites.
The old way: Manually manipulating the DOM using jQuery.
The modern way: Rendering entire UIs with JavaScipt using React or Vue.js.
Benefits: Breaking out your UI into components and state can be a huge productivity boost plus it also helps to reduce bugs. I talked a lot about this in my Declarative all the things! newsletter post. There is also a huge benefit in a static architecture like JAMStack for simplified deployment. Keep in mind that while large apps become easier to maintain, manual DOM manipulation is still great for building out something on the spot with zero external dependencies.
The old way: Concatenation and minification tools to manually declare how files get merged together.
The modern way: Using
import statements and a bundler like Parcel.
Benefits: While this was a huge painpoint initially, bundling tools have gotten much easier to work with now. You can start writing JS and CSS using the latest features including
import statements, and the code will automatically get transformed and bundled. This is important not only for cross-browser compatibility but also performance, so even in situations where you can depend on users having the latest browsers you probably still want to use a bundler.
Extras: CLI tools for frameworks abstract away bundling for you, so that you don’t have to worry about it. See Create React App, Next.js, Vue CLI, and Nuxt.js.
It’s true, web development is considered complex nowadays due to the sheer number of decisions we have to make. This becomes especially overwhelming for anyone new that is trying to learn everything.
However, one skill that I believe every developer should possess is deciding what is worth learning and using. Don’t immediately install that new framework you read about in a Medium article unless it solves a particular problem for you that another, more community-supported one isn’t already solving.
For the past few weeks, this newsletter has been my only side project work but at the very least I’ve been consistent with it. I definitely need to thank Pradip Khakhar for being such an avid supporter and motivating me to continue writing these.
You should see some reposts to my blog from the newsletter. I am also looking for some topic recommendations for my podcast so feel free to reply and let me know what you’d like to hear me talk about.
Until next Sunday, have a great week 👋