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.
📦 Managing packages
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 install, update, and 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.
🎮 Building user interfaces
The old way: Manually manipulating the DOM using jQuery.
The modern way: Rendering entire UIs with JavaScript 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! article. 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.
🎁 Bundling code
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 pain point 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.
What about the number of choices? 🤯
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.
I hope to provide more resources for helping you become smarter about those decisions. If you're still wondering which JavaScript framework to use, check out my Why is everyone using React? podcast episode.
This article was originally published to my newsletter.
Top comments (13)
You appear to be confusing 'web development' with 'JavaScript development'.
Dear front end devs: it's not all about you.
It's tagged for "webdev" and "JavaScript". 🤷🏾♂️
I really liked this post as a way to explain "modern" web development to "old-school" developers. The fact that it is nearly 2 years old now and has aged pretty well shows that web development has stabilized quite a bit in that time.
Personally, I think bundling is probably the most impressive thing about modern web development. No more making sure this script is minified and ordered correctly before that script. Webpack does an amazing job and doing all of that for us with a little setup effort (or none if you are using a CLI tool like Vue's). Plus the benefits of tree-shaking and async loading. Huge win!
Nice, love the dinosaur comics! Yeah bundling is pretty impressive, I'm not sure how many people still prefer running concatenation and optimization scripts with Gulp/Grunt versus just having Webpack/Parcel handle all of that for you by just looking at imports, but I definitely prefer the latter.
Heard of Angular?
Managing packages - the web was never supposed to have a central repository like npm has become. It was supposed to be open and decentralized. I believe modern js package managers have hurt the web more than done it good.
Building UI - I totally agree with you here. Makes it MUCH easier and faster to develop real world projects.
Bundling & Transpiling - Oh, please!! This is the worst idea ever. 1) With HTTP/2.0 for most web apps there is no need for bundling at all. and 2) people just PLEASE stop transpiling your javascript! Soon javascript will become a mere machine language, a target language for our computers to run not for humans to read. That's a very very bad idea! We learned JS by looking at "View source" let's keep it that way.
I have been using the latest ES features in modern web dev without bundling or transpiling. Oh and the native ES5 import feature is amazing, you should try it. And if the user's browser doesn't support it, well put a message up there to download a newer version.
Reading many stories and publications in terns of traditional web dev many people are reporting that traditional web development is being phased out
Many people are actually starting to report that traditional web development is being
phased out
Call me crazy but I still do the “old way” in almost every category. But I do use ES7+ and import, etc
Not crazy at all haha, do whatever makes sense for you.
Unrelated, love your website and ironMic looks great.
Hey this means a lot, thanks Adam!
You forgot classic asp :)