Our development stack of choice

Aaah, technology stacks. Remember those good times having beers with your colleagues discussing what’s new?

As developers, we need to keep up with the changes now more than ever. Few areas in the industry evolve as fast as web development. There are both good and bad sides to this.

The good is that change creates space for everyone. Development is democratic. Anybody can become a developer with hard work and interest — although talent helps, too. The market is big enough. Everybody wins.

The bad: well, just as frameworks grow to become more robust, so do the projects we tend to face nowadays (if you tend to stay at the cutting edge, that is). Sometimes, the growth of both curves doesn’t match up. The demand gets higher, yet the expectation of how fast you can build something good grows alongside that demand.

With time, those development conversations suddenly change focus. Instead of asking what you start asking why. You see, we are bound to learn new technologies as developers, but the aspects of how you judge the new framework shifts with time.

At 14islands, we have made a few decisions that help us streamline our development work as much as possible. In a nutshell, this is what we do.

I’m guilty here: I actually like VueJS more. Or used to. There, I said it. The way it works has always attracted me, for some reason. While I haven’t touched VueJS in a long time, I liked how things just worked out of the box. Like Transitions. We love Transitions.

But sticking to a single framework brings a lot of benefits. You end up re-using some quality stuff.

Components are the most common design pattern for coding since proper responsive web design became the standard. React helps you follow that pattern closely. The React community is massive and is here to stay. I remember questioning if React would be “just another trendy framework,” but no, it is here to stay.

Picking one favorite framework allows you to grow a library of reusable components. This helps stop re-inventing the wheel and also allows you to spend more time on the details and “fun” parts of the project. Your focus should be more on the actual building and less on setting the foundation.

Just don’t forget to keep a library of some sort. Having everything available under Github/GitLab/Bitbucket is a great start.

Again, stick to it. Do you see the pattern? Fewer decisions 😄

This is different than JavaScript because the style features matter more than the syntax.

The presentation layer doesn’t hold a lot of logic. Here, what matters the most is how your styles scale. You definitely don’t want to break things simply because you changed a spacing configuration. Component-ize everything with modular CSS.

Make a few rules with your team and stick to them — no matter what. If your project is supposed to scale, your rules need to be as strict as possible. Don’t underestimate CSS. Believe it or not, this can be the hardest part of scaling your app.

We like postCSS. Stylus used to rock. SASS is always welcome. And we can edge to styled components. For now, we’re sticking to postCSS. We’ll let you know if we change our minds in the future.

No animation is better than bad animation. This means the trade-off between doing it in CSS and JavaScript becomes very clear. You want things to be smooth if you want to create a good experience.

Though I personally am a big fan of using JavaScript, it doesn’t take much to convince me to do that menu icon transform in CSS only. Usually, we have a healthy mix of both. It’s not the best maintenance, as keeping some configuration synched between CSS and JS can be cumbersome, but hey. We want the smooth pixels. It’s worth it.

We don’t use WordPress anymore. We were big fans and can still kill it, but no. Prismic and Contentful are our go-to choices, with Prismic being our favorite.

If you haven’t heard of a headless CMS system, now is the time to dive in. When you build a marketing site, having the ability to update the content without any hassle is a major requirement.

There are a lot of nice tools to help you build blocks in an easy way.

(By the way: we gave some nice interviews to Prismic that you should definitely check it out, too.)

Oh, Gatsby. If I could pick one favorite, this would be it.

Building marketing sites will usually require a few things:

Easy A/B testing

• Good performance
• Great support with a CMS of your choice
• A solid ecosystem behind it

Gatsby ticks all of those checkboxes. Building a static site with high performance is almost a child’s play. The Gatsby community is also great, with lots of awesome plugins. And the integrations with React and PostCSS makes us want to cry with joy. Ok, a little exaggerated. But we really did become fanboys with it. If you haven’t already, try it out. On top of all this, their future plans are quite ambitious.

It’s time for a new way to build the web.

There you go — the pillars of our stack. You can trust us when we say you can build awesome marketing sites with these choices. I hope you resonated with this article.

Have you learned something new from this, or would you have other suggestions? Let us know!

It’s important to stay curious. And it’s important to deliver quality code. At some point you’ll feel that hitting the sweet spot is all you want. And that’s when those beers with your colleagues while discussing code will taste better than ever. Cheers.