I published this post on my blog, but figured the beautiful people of dev.to will have something to say about the subject.
When I started building websites back in the ’00, there weren’t any of the fancy tools like transpilers, compilers, bundlers, package and dependency managers we have today. We had pure and simple HTML, CSS and JavaScript on the frontend and PHP and something called ColdFusion on the backend. Oh, and you had FTP for putting websites online.
Even though we created layouts using <table>s — yes, we weren’t even using CSS right — times were simple. I’m not saying they were good, just simple. You would design something in Photoshop (yeah, we weren’t using that right as well), mark it up with HTML, add some styles to those tables with CSS, add some DHTML — that’s what we called JavaScript back then; We were idiots, I know — and put it online over the FTP, it was that simple.
Then years went by, stuff happened and now we have all these tools that allow us to build things with such speed it’s incredible! We even have version control, who would’ve guessed. Now you can have half of your website or application done even before you’ve done with planning the whole thing. All you need to do is install Node… Then npm and Webpack or Gulp. After that you just pull in your dependencies like Express, Lodash, Underscore, Coffee-script, Post-css, Bootstrap, Materials or jQuery — if you’ve been living under a rock for the past 10 years — and you’re ready… to begin writing some actual HTML and CSS.
Only it’s not HTML… Or CSS. You write some kind of JavaScript that generates markup and styles for you, then use one of the googol npm packages to transpile, compile and bundle all of that to HTML, CSS and JavaScript that browser understands and can render on screen. After that, you just run all of that in Vagrant. Or Docker. And deploy it to server using Jenkins. Or Shippable. Or AWS.
If you haven’t skip to the comment section to swear me off, I’m not saying all of these tools are necessarily bad. Hell, I’m working with most of them on a daily basis, c’est la vie. Well, some of them are bad — :cough: Bootstrap :cough:
What I want to say is that we begun using all these tools even when we don’t need them. We’re using them just because they’re cool, new, shiny or whatever and that’s bad. We cram everything without mercy to node_modules, no wonder it’s the heaviest thing in the known universe.
When you start your next project from scratch, actually start it from scratch, zero, nada. Think about requirements for a second. Do you really need that fancy package, or you can make it with vanilla JS? Then add dependencies when and if you need them for the first time and not right away.
Now, I’m not saying dump everything and go vanilla. I understand the value some of those libraries, frameworks and plugins bring. I also know we’ve got a lot of legacy code, tech debt and other reasons for using those packages. I just ask you to think twice before jumping and adding something new to package.json.
Think about progressive enhancement. Can you build the core functionality with basic tools, then enhance it with everything else? Do you really need whole Bootstrap when you’re building simple magazine website that has two different views and you can build it just by using flexbox or css-grid? At the end, think about what you’re building. The easiest or fastest solution isn’t always the best one.
This is something I think about from time to time, I just had to get it out somewhere. Sorry for boring you and thanks for reading.
Top comments (22)
I've also felt the pain you are talking about here. The reality is that the landscape has changed since the hayday of developing simple HTML/CSS/JS websites. As developers we need to be willing to go along with constantly learning new techniques to make our development practices better.
In huge enterprises, building a website with simple HTML/CSS/JS can't is not a scalable approach to maintaining websites. With that being said, we are seeing innovation because it had to happen in order for us to be able to scale our development efforts and be swift at developing more functionality.
With that being said, there is nothing stopping you from developing websites using the techniques of yesterday. If you feel comfortable with doing it that way, there is nothing wrong with that approach.
I agree that being a Web Developer implies being permanently learning, but suggesting a more simpler web doesn’t mean using the techniques of yesterday. You can apply modern techniques without having to use heavy/overcomplicated frameworks, libraries, or plugins.
Exactly! I'm not talking about learning new techniques, that's one of the things I love about web development. But using all the new tools because of wrong reasons, that's my problem.
Especially in enterprise and long term support solutions where you need to pay special attention to every detail, would you just add every new package you could think of? I think not.
The problem is not that the technical landscape has more tools and more technologies, it's that these technologies are way too visible.
There was a time when washing machines were simple, you had a bucket and some soap and your clothes. Everything about that could be instantly understood.
Later this evolved into these mechanical monstrosities that were really difficult to use effectively, and dangerous if used wrong. Electrocution was just one fo the many risks! There was an art to using these machines, a level of skill involved that made for quite a learning curve when getting started.
Then someone came up with a way of packaging all that up into an appliance that's simple and safe to use. There's electronics, software, electric motors and tons of other advancements all packed into a metal box that you put your clothes into, add some detergent, push a button, and they come out clean.
As an industry we need to think about "applianceizing" our technologies so that people can benefit from them without having to be directly exposed to them.
I like the analogy, thank you for that.
I think that's exactly what's happening right now. Awesome people come up with all these cool things and show us how technology can be used. What's the problem is that those cool things become popular really fast and all without proper testing or even proper implementation. We just add it to our build file and stop thinking about it.
Like I said before, I'm not against using new tech, but we shouldn't be in a hurry to use it as well. Rather stop and think about it for a moment.
I agree, I follow this kind of approach,
but I feel theres some projects that still uses this ideas too,
I dont agree with the rest of the comments that this is not possible,
to name a few randomly:
Bulma CSS without JS: bulma.io
Spectre CSS without JS: picturepan2.github.io/spectre/expe...
Svelte JS without dependency but node svelte.dev
Parcel lightweight Webpack alternative parceljs.org
Nim HTML, JS, CSS/SASS, Backend, Frontend, Node not required, all stack with 1 lang no dependency nim-lang.org
I can just
scpthe single file binary that Nim produces and web is running.Svelte started a Backend framework too but it wont work currently, pre-Alpha.
I agree with you.
I'm trying to build sites in plain html, css and maybe javascript or Jquery, this is for those sites that only where updated ones a month or even in six months, you don't need a full Wordpress install, maybe a json file, an ajax request and thats it.
Those are fancy tools, yes, helps a lot in some cases, but not always.
BTW , ColdFusion, nice language and you are old like me !!!
Exactly my point, thank you.
I'm saying Wordpress as an example because is one of the most common, but could be Laravel or any other Node o JS framework.
Yup, you need to write down project requirements and weigh how much value each dependency brings in or takes away. Those may look like minor details at the beginning, but they multiply exponentially.
I used to resist learning new tech in the web space some years ago. I thought it was all too complex for no reason. Then one day I realized how wrong I was.
There are problems with the state of JS, but there are a lot of conveniences as well. You don’t need to install every library to create an application, but if you’re making something that is scalable and easily maintainable, there are systems that help with that.
Also, deploying here from the days of FTP to what we have now is vastly superior in every level in my opinion because we can have things do the work for us.
Like I said, it's not about learning anything new, it's about all those dependencies people keep adding without too much thought. Whenever there is something that needs to be fixed, or new feature added, first thing everybody says is "There's an plugin/library/package for that!". Nobody stops to think what exactly is being added, or how it works, will it bring some new problems, or is it the best solution in general. Maybe you can solve it with vanilla code, maybe you can't, but nobody even thinks about that.
I share your view. I'm wondering if we didn't go overboard! Example: Hugo, that thing is so complicated!! And it's for static pages, but you have to open 36 files to see how your page will get built, crazy. It's a tool written in go, with toml config, working on markdown to generate html...
I'm working on it. Standard Web Components + ES are the way forward but it's still a new area. If you'd like to get involved check out.
github.com/vanillawc/vanillawc
Yes, I've been reading on web components and I agree they are the solution to at least a part of the problems we're having today. Great work!
I'm with you. Totally. I see the size of my node_modules folder and cry. Kids these days is the only thing they know and it doesn't help. And what about ports? It's crazy. All is about opened ports... My dear Lord!
Are you me? These are my thoughts exactly on this subject. Great article
Agreed. This article hits home so well.
Glad to hear I'm not the only one, thank you!
Great article! I'm surrounded by co-op students and all of them are solving problems by adding all kind of JS plugin into our projects.
Yep, I get that feeling too... I think a very good and promising compromise that stays as close as possible to vanilla is svelte.js ( svelte.dev/ )
One of the things I learned is that we shouldn't get excited too easily. I've seen Svelte and it's awesome, but that's also what people said about Angular when it was first released :)