To say hello to something new you sometimes have to say goodbye first. As a developer I invest in my stack, it should be something I like to work in, to be productive and simple to create things. It’s not much about the tools themself, but you do get used to them and sometimes come to like them. You simply get attached.
I think that is why we see so much stack discussions, people defending their favorite tech with passion.
TLDR: I’ve changed my stack
Just want a brief overview about what changes I made to my stack? Here you are:
- From Yeoman, Yeogurt, Nunjucks, Gulp to Astro
- From vanilla JS to vanilla JS, TypeScript and Svelte
- From Stylus to Sass
- From Jeet to CSS flexbox and grid
- From shared reseller hosting to Vercel or Azure + Gitlab CI
How it was before
My stack changed over the years, of course, and it also depends on the needs of the project. This website has been made a few years back when my go to was Yeogurt, a project generator using Yeoman and Gulp. Together with Nunjucks and Stylus. After that I would throw in Jeet for grids and with that I could do my thing. Hosting was most of the time based on some shared hosting or reseller package, so deployments would be done through FTP using a tool called dploy.
Yeoman was great, because you had all kinds of generators to create anything you would need. Yeogurt helps to create a project structure and component based approach, resulting in a static site generator while keeping it simple and everything JS based.
Stylus is something I liked a lot, and still do. The hype started with Sass/SCSS. The main reason I didn’t like to use that instead, as I wanted it all to be JS. Back in the day Sass was Ruby only, eventually node-sass was a thing, but it took a while to catch up. Ruby always picked a fight with me, dependencies where always conflicting, it distracted me (a lot of time spent on solving issues instead of the projects themself). Another thing to keep in mind, native CSS variables where not a thing yet, so it really made sense to use a preprocessor.
So that’s how I came across Stylus, it was all JS and the syntax had support for both the Sass and SCSS structure. It had a lot of utils alreay built in and really powerful but easy to use functions.
For styling I used the BEM approach, probably one of the first bigger trends moving towards component based structures. It is easy and readable with the nested syntax from Sass/Less/Stylus. Jeet came in for making grids easy. It was easy to use, flexible and had sensible defaults. Bonus, you could use it with either Sass or Stylus. Grid didn’t exist yet and flex didn’t have the support yet, therefor this was my buddy.
Overal this was a stack I was happy with for quite some time as it helped me getting things done without getting in the way.
When tools starts to hurt
Eventually after some time this feeling was changing. Like I said, this website was built on that stack and it was harder and harder to update. I had multiple obstacles.
I am really greatful for the people who created these projects and maintained them for a long time, but sadly some projects got abandoned.
Yeoman was a hype, but it got a bit silent after a while. Yeogurt was a single guy, putting in a lot of work, but eventually went on with his live. Stylus was considered complete, so it went silent for a bit and that caused a lot of projects to drop support because the project was considered dead. Jeet was taken over by a new maintainer who lost focus on the project.
It can all still be used of course, but through time it will get harder and harder to maintain. Dependencies get old, or they use other abandoned projects and at some point you will need a specific version of node. Or with bad luck it can result in conflicting depedencies.
This was the case with my website, I needed a specific version of Node to build it. I also would need Gulp, and eventually I had to manually upload revisions through FTP (which sucks).
The stack was holding me back, too much effort was needed for me to do changes. I want to write more, which is already hard for me, so I don’t want any unnecessary friction for publishing. I just want to write, push and publish.
What I need
Step one is to see what you are using now and think about why you started using it. The next step, see what you need now and why. With this you can pick out new tech that feels effortless, when needed of course. Maybe some stack choices are still valid.
This was my wishlist:
- Most of the time I just use static HTML as it is secure, performant, simple and cheap (the ability to do SSR is a bonus).
- Templating has to be pretty simple, I don’t need much, just the ability to include other stuff. Working with data and doing more complex things is a bonus, and shouldn’t get in the way.
- Component based structure is important for me, it is a nice way to work and organize code.
- Grids got pretty straight forward with flex getting better support and grids being added. I still use some helpers though, to make it a bit easier and repeat less code.
- Easy way to preprocess CSS and JS, which is useful for some projects.
- There are some projects I write in just plain CSS, it is pretty there isn’t much more I need. Apart from the component based structure. In some cases it is still useful, if you lack support for variables or mixins are useful for bigger projects.
- Deployment through git, just having to hit git push.
The choices
Let’s see what the options are and why I picked my new stack.
Starting with the framework. The most commonly used one is probably Next, but I was never much of a React guy. It started with the license threats when Facebook said you couldn’t build anything with it that competes with them or their side activities (that is a lot), that’s quite a risk. The syntax concepts are interesting but they seem to change a lot and the use of CSS seems to be an after thought. I like CSS and think it is a central part of web development. So, nuxt (pun intended).
Nuxt seems to be gaining traction, I like the community and ecosystem around it. I didn’t do a lot of project with Vue recently but the object based syntax feels a bit claustrofobic to me. Angular or Svelte feel way more natural in that sense. Maybe there is something better?
Angular Universal? This is a pain in the ass to set up, mostly made for SSR as far as I know. Configuration to do different things with it is time consuming, it doesn’t feel productive. I think it’s not that widely used either.
I like Svelte a lot, working with it more recently, maybe Sveltekit? It has been in beta for a long time, and they had Sapper before, chich they killed. So I think I speak for a lot of people when I was thinking, will this be the one? Will they break api a lot? When will 1.0 hit? A part from these thought it did dive into it a bit, but the downside is it was SSR by default, for static generation you needed to do a bit more and you could only configure it per page (so hydration config is per page).
When building things you also want to hydrate components you build without hydrating the whole page, this feeling got stronger when I came across Astro around the same time. It could generate pages static more easily and it had the Island Architecture. What I liked even more, it supported all the popular frameworks. A part from Angular, but I found out later that Brandon Roberts is working on that (kudo’s!). So you can keep the framework and swap the front-end framework when you feel like it. That’s really nice!
Okay, so let’s try Astro. Astro components work fine, and I can use Svelte which is really nice. Now let’s add some styling. Just plain CSS works fine, and in some projects I add Sass/SCSS. It is really nice for supporting older browsers, creating styling for larger projects and the readability of class names is what I also like about it. Still following a BEM alike approach which is nice for readability and debugging too.
It is still well supported across projects and I don’t feel like they will drop it any time soon as what happened to Stylus. Altough for modern supported browser I am questioning the relevance over time, but that’s a story on itself.
Let’s get building
Now I had all the tools to get building, I started a feature branch of this website moved the old one aside and started a fresh project with all my fancy new tools. Going through all the elements and rebuilding them a bit.
I didn’t want to refactor too much, as it wouldn’t add a lot of value for the effort that I had to put into it. The grid system was the most painful part. I almost dropped in the Sass version of Jeet to be done with it, but managed to get everything to CSS Flexbox.
Now it has been rebuild! Even though it looks exactly the same. It was quite some work, and it wasn’t that much fun. It is migrating code, break things and make them look the same again. With no visual progress, no new features, better anything.
Even though it felt like I wasn’t doing anything, the end result is a lot better! I have all my packages up to date, it is easy to run/build and I tried out Vercel which means I have CI without any additional work.
Sad to see my friends go
While doing this I discovered that I did like my tools, you want the best for them. For me that means the projects live on, they get maintained, have happy users and a meaningful impact on the community.
So saying goodbye is nice, but also a bit sad, because you have to leave them behind.
The main take away
Do you notice friction using some tool(s) and isn’t it just a one time thing? Maybe think about why you started using the tools you, what it should solve and see what you need now. Maybe it is the same and the tool just isn’t working out or maybe you need something else.
Either way, knowing what you need to solve will help you to get the best solutions.
Any questions or feedback? Just let me know on Twitter!