- 5 min to read
Editor-friendly Jamstack Website: Armorblox Case Study
The best projects are the ones where our clients get to experience the benefits of using Jamstacks straight away, on their website.
By Arkadiusz Gorecki
When it comes to web development for us at Bejamas, performance and security have always been the top priorities. When a company with a mission to deliver top-notch security services to businesses around the world approached us regarding their website, we knew it would be a kind of project where we could prove our worth.
So, we bit it, hard.
The Overview
Armorblox is a California-based company, a true innovator in the field of cybersecurity. Using the latest AI technologies, from Natural Language Understanding and Natural Language Processing to deep learning, they protect organizations against data loss and identity-based attacks across various communications platforms.
As an emerging startup with serious backing from investors, they needed a website that would not only support their brand identity but also have good page load times, to attract users, not deter them, and showcase a high level of security (particularly significant when your business is security, right?). Even though they were just starting out, most of their team already had some experience in building and running a Wordpress website, mostly unsatisfying.
Luckily, they heard about the Jamstack before, so they were pretty much already aware that when it comes to web performance and website security Jamstack leaves the competition far behind.
Previously, I used Wordpress, HTML, Flash for websites, and have also used various
CMS systems. As we didn't have a website yet, the good news was that we got to
build a website from scratch on Jamstack for security and performance advantages.
The goal was quickly set: a fast and 100% secure website that’s easy to scale.
Stack We Used
After a series of discussions we’ve had with the Armorblox crew and within our devs, we decided to use a tech stack similar to the one we used for Emerging Dynamics project:
Join Bejamas newsletter
Get our EXCLUSIVE web development case studies in your mailbox!
The Biggest challenges We’ve Had On This Project
This was actually our first ever project with Storyblok, so, in a way, it was our mutual introduction. What I mean by that is that we had to create an appropriate structure for this headless CMS from scratch and, to be honest, everything was a bit of a surprise for us.
I personally was amazed by the whole concept of a live preview and the idea of custom plugins written with Vue. What I really liked was how many customizable components we could create with keeping it clear and easy-to-use for the editors
The second challenge we had was the implementation of Marketo forms to Gatsby pages. We had a really hard time trying to optimize this third-party solution with Jamstack. One of the issues was dealing with their script loading - we used more than one form on the website and we were struggling with it displaying the wrong form all the time.
Last but not least - a tight deadline. This was one of the projects with an outer deadline that absolutely couldn’t be passed (a conference with their product announcement), so we had to act really fast. From a time perspective, having the deadline in mind, it was a bit risky to go with the new stack, but it was the best fit for the client, and it certainly paid off.
Storyblok at the Center of the Project
A quick reminder here. Storyblok is an API-based headless CMS with a visual editor that allows you to select a certain piece of content and change it with one click. It’s extremely user-friendly, you can add custom plugins, and it offers an image API for optimizing and modifying images. Plus, Storyblok is a great choice if you want to expand your website in the future. Not only can you change the content on existing pages, but also add new pages from pre-built components (landing pages, for example).
Let’s say you need to make new pages daily. For example, landing pages or pages for new products/tools/events, etc. If the components are set properly there is no need for you to call the developer. You or your editors can do it in an instant.
Storyblok offers a live-preview feature, but if you don’t really need this and want to focus on the content itself (when adding a new article for example) you can easily disable it for particular pages and focus on what matters at the time.
All of this just adds up to how versatile Storyblok truly is. It can act as a page builder, or standard, input-only, headless CMS when you need it. In both cases, it offers one of the most pleasant editor-use experiences we’ve come across so far.
Gatsby-source-storyblok Plugin
Headless CMSs can be used with any front-end framework (or VanillaJS if preferred) you choose. However, at the time when we were developing the website, we were able to find only tutorials and articles on how to use Storyblok with Vue. Even the custom plugins were written using Vue. Naturally, I thought it was somehow strongly connected with Vue. Luckily for us, there was already a source plugin for Gatsby.
Gatsby-source-storyblok and one official tutorial on how to use it was more than enough to get things going. In the beginning, the plugin offered some basic functionalities. What we were missing at the time, when transforming entries to Gatsby graphQL, were the relationships. Since Storyblok is in constant development the source plugin is now available, you just need to enable a proper option. We, on the other hand, had to handle it on our own.
So, if you link another entry you can now get its data (not only an ID, as previously) without the need to write any additional queries, filters, etc. An example use case would be the articles with articles and authors, where you keep the authors as separate entries and link them to particular articles.
Marketo Forms integration
Marketo is a marketing automation tool offering a variety of solutions, helping businesses get leads, manage sales, and measure their website performance. Forms, one of the tools they offer, help their customers create simple and flexible web forms, which can be embedded on any page on the website. Sounds fun and easy, right?
Think again. It turned out it is not that easy to implement Marketo multiple forms to a Jamstack website.
The problem appeared when we tried to use different forms on different pages. It turned out that when a user switches between the subpages any other form but the correct one would show. Sometimes it was a form from a page visited before and sometimes when a user went from a page with an x form to another page with the x form it would double.
It definitely was not a plug-n-play type of operation. While it would be easy for us to send the form data with the Marketo API, the software provider only offers to place their script on a website. So, the main challenge was to plug the script so that every single goal was completed.
We had some additional jobs to do to make it work, such as checking if a form was loaded before, if the form is the exact one we needed to display, and, depending on the case, make sure that end-users see only the right form.
The Armorblox website required not only multiple forms, but also different actions after the form submit - moving to another page, file downloading, depending on what the form was about to do. With the Marketo script and its methods, we didn’t struggle here, which made the job smooth and enjoyable.
Finally, we’ve made an additional connection between Storyblok and Marketo so now when the user has to edit or add a new page with a form, they do all the form configuration in the Marketo panel, then add the right ID to Storyblok, and it’s all being done automatically.
The Results
Gatsby and Storyblok combo gave Armorblox a good-looking, well-built, fast, and easy to manage website. Plus, Storyblok made it incredibly simple to customize, expand, or rebuild pages, which impressed the Armorblox team the most.
Performance-wise, they were happy as well. The main concern they had was how well the ability to add additional elements to the website would influence performance.
Thanks to the Jamstack tools we used, concerns are practically none.
Our performance and page loading stats are much better than Wordpress or any
other sites. We wanted to add animations and other design elements. With
Jamstack we can add design elements without worrying about performance.
Another happy client might be an overused statement. For this project, this truly seems to be the case. On top of that, thanks to this project we feel like we’ve made a small contribution to making the web a safer place.
Now, GO Armorblox!
Wonder if and how we can help you? Let’s get in touch!
CLICK HERE to schedule a 1-on-1 talk and let us show you what we can do for you and your business.