Jamstack approach for happier teams

Technology is full of promise, but it also carries certain risks. And we're not talking about the Terminator. When working with code, it’s very easy to focus on shiny new features (or those that have been the standard for years) instead of striving to make web development useful. Really useful.

Soluble's purpose is to make people happier at work. We think, design and develop so other companies and their teams are more successful in their day-to-day work. And our 'Jamstack approach' is one of our ways to achieve this. Let us tell you more.

Most often, marketing and product teams are forced to choose between agility (iterating quickly and efficiently), autonomy (not depending on third parties) and quality (enjoying results that border on excellence and have brand consistency).

Typically, if you choose to be agile and autonomous, you won't achieve excellent results in terms of consistency (brand customization) or visual experience. If you’d rather be self-sufficient and achieve ambitious results, you won't be fast. If you prioritize quality and agility, you'll likely need the help of a third party.

And surprise! Here’s where Jamstack comes in; the approach we use at Soluble to achieve agility, autonomy and quality.

Jamstack is an architecture that separates the data that feeds a website from what can be seen. In other words: It's an approach that allows collecting information from each source (CRMs, internal databases...) and then building a customized website. The framework accesses the content through APIs and generates static pages that are delivered quickly, cost-effectively, and in a more sustainable way, through CDNs or any web server.

To understand its utility, think of a corporate website with two objectives: to show your brand and to offer a wide range of products.

To achieve these goals, people working on your website need to manage its content —the home page copy or a blog, for example— in an autonomous and easy way. But your products also need to remain in the ERP. Duplicating information and disconnecting the website from the management system would only complicate things: duplications, difficulties in updating…

Since Jamstack offers the possibility to have multiple content sources, we simplify tasks for the teams we work with.  For marketing-related data (pages, sections...), we use DatoCMS. Thanks to this solution, we can work on development while page creation or translation work is in progress. We even gain agility compared to other tools that seem more efficient because of their ease of use, such as no-code.

(An aside before we go back to Jamstack, just to tell you something we're very excited about: we're the first digital native branding agency to partner with DatoCMS in Spain).

It's also possible to connect a blog with Notion or Hubspot APIs, for example. This way, content creators don't have to copy and paste texts between an internal tool and the CMS. That frees up time for achieving high-quality results.

Keep in mind that we're not only looking for performance and scalability. We're also looking for an outstanding user experience, and here's where we find several advantages:

• Unbeatable page load times (which translates into better SEO).
• Excellent user experience, since the user navigates in a client app that doesn't load other pages.

From a development point of view, the great advantage of this approach is that we can share components between the website we are creating —a new landing page, for example— and the already existing product, without needing to develop two separate frontends. Developers can easily and quickly make changes to the website, following the same principles as in the product. By the way: Reducing this kind of friction is helpful for talent retention. We'll leave that there.

The frameworks we usually use to build the website are based on React. Depending on the project, we opt for either Gatsby or Next. But if you use Vue for the frontend, we can use Nuxt, which follows the same principles. Choose the adventure that is most hassle-free for you.

Remember the example from before? We used the following stack:

• NextJS as orchestrator. Framework to generate static websites (and much more) based on React. It is the key piece that queries APIs and generates the static website.
• DatoCMS as headless CMS. It allows us to create models and blocks as we please, thus achieving content flexibility.
• Vercel for the infrastructure. Although any CDN can serve static pages, Vercel offers a more complete experience: many helpful tools for developers, serverless functions and Edge functions, focused on the fast delivery of dynamic and personalized content.

The cherry on top is the Design System we implement based on our Soluto Design System, on which we have worked (and continue to work every day) with great care. Thanks to this previous work, we deliver a set of components used on the site so you can reuse them in your product. This will come in handy for the 2.0 version of the website, in which changes will be made fast because they will be based on the Design System's variables. There's no need to make changes manually on every page and every element. This means easier website building and maintenance.

Let's recap: the primary goal is to optimize the time and energy of those we work with. We empower them through tools that bring them peace of mind because they are functional and help avoid mistakes. Also, we save them the hassle of working with powerful software that, in their day-to-day, is too complex to pay off.

If all the above doesn't seem enough, Jamstack also increases security. The attack surface is reduced because there is no database like in WordPress, and requests are served through secure CDNs that don't have contact with the APIs.

In addition, Jamstack is a future-proof solution. Companies don't have to worry if they need to migrate the data that feeds the website, because it's as simple as connecting to the new API and adapting the data.

Shall we talk? S-)