loading...
Cover image for Traditional vs modern web development ⚔️

Traditional vs modern web development ⚔️

sunnysingh profile image Sunny Singh Originally published at sunnysingh.io ・3 min read

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.

Discussion

pic
Editor guide
Collapse
gypsydave5 profile image
David Wickes

You appear to be confusing 'web development' with 'JavaScript development'.

Dear front end devs: it's not all about you.

Collapse
recss profile image
Kevin K. Johnson

It's tagged for "webdev" and "JavaScript". 🤷🏾‍♂️

Collapse
drewtownchi profile image
Drew Town

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!

Collapse
sunnysingh profile image
Sunny Singh Author

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.

Collapse
martinszeltins profile image
Martins

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.

Collapse
vivainio profile image
Ville M. Vainio

Heard of Angular?

Collapse
jorgecc profile image
Jorge Castro

JQuery/DOM modification versus React/Vue are not alternatives. Both could do the same job in way different ways.

Collapse
adam_cyclones profile image
Adam Crockett

Unrelated, love your website and ironMic looks great.

Collapse
sunnysingh profile image
Sunny Singh Author

Hey this means a lot, thanks Adam!

Collapse
nektro profile image
Meghan (she/her)

Call me crazy but I still do the “old way” in almost every category. But I do use ES7+ and import, etc

Collapse
sunnysingh profile image
Sunny Singh Author

Not crazy at all haha, do whatever makes sense for you.

Collapse
evanotadev profile image
evanotadev

You forgot classic asp :)