The InfoSec Product Stack
One afternoon in August of 2019, I sat down and vented this into my keyboard —
YOUR TECH STACK DOESN’T MATTER.
At the time, we specialized in greenfield development (building apps from nothing) for non-technical founders. Now and then, I would have a sales call with a founder, or meet someone at an event, and they would ask me what tech we used at Krit.
I got good at rattling off the technologies we choose and why. But really, they were asking the wrong question.
What I used to believe about tech stacks — and what’s changed
See, if you’re a brand new startup, picking a tech stack is a distraction. It doesn’t matter nearly as much as understanding your customers and building an audience.
For example, people love to say Rails doesn’t scale, but neither does a massive burn rate and zero customers. Plus, if you have a bunch of customers, you can raise money and hire database experts to make it scale (see: Github).
My opinion used to be this: you should pick whatever your team knows best. This will let you get started quickly and run with it.
What’s changed: InfoSec has unique challenges
Now, a year and a half later, we do product design for more established InfoSec clients. And if you’re in InfoSec, the equation changes. Even more so if you’re selling to enterprise customers, which most InfoSec vendors right now are.
Don’t get me wrong, a deep understanding of your customers' lives and pain points is still way more important than which programming language you choose. After all, if Github can manage the majority of the world’s open-source repositories on Rails, I’m sure your honeypots can get by.
But InfoSec startups face some unique challenges:
- You’re a target from day one. If you’re an InfoSec business, you have a target on your back. If you’re helping your customers stay secure, you need to be secure, too.
- You’re dealing with a lot of data. Sure, you could throw all that data in a relational database and cross your fingers it doesn’t get unmanageable. But if you know data is core to what you do, then it makes sense to pick tools that are good at managing high volumes of data.
- Your enterprise customers have high expectations for reliability and there’s a small margin for error.
- Talent is even scarcer than in the rest of the tech industry, so you don’t want to pick tools that are going to make it HARDER to hire.
These challenges mean our tech stack matters more now, too.
- We can’t be the gaping hole in your security infrastructure.
- We need to be flexible enough to plug into a variety of backend systems.
- We need to get buy-in from your team to do our job, so we need to use tech they’re excited about.
From “tech stack” to “product stack”
So, we’ve set out to update our tools, and find the ultimate infosec product stack.
I say product stack because we’re no longer building everything (i.e. we’re no longer building APIs and infrastructure). Most often, we’re integrating into a client’s team and serving as product designers, web and frontend developers, product managers — and occasionally lending some help on the backend.
So, we’re no longer concerned with end-to-end tech stacks. Instead, we’re focused on solutions that let us create the best products for our clients.
We’ve shifted from tech stacks to product stacks.
The typical tech stack includes:
- Frontend Framework
- Backend Framework
Whereas the elements of an InfoSec Product Stack include:
- Prototyping tool
- Content management system
- Frontend framework
- CSS framework
The InfoSec Product Stack
Here’s what we rely on for each part of the InfoSec Product Stack:
- Prototyping tool: Figma
- Content management system (CMS): Hugo + Forestry
- Frontend framework: Vue + Nuxt
- CSS framework: Tailwind
Before I dive into each one of those, here's why those are the tools and frameworks we use.
The philosophy behind our product stack
You’ll notice a trend in the tools we choose now, over the tools we chose when we were getting started. We optimize for developer-friendly tools that are fast, lightweight, and easy to customize. We work with a variety of clients who have their own tech requirements, so we need to be able to adapt our toolset to fit theirs. We also believe that speed and security are core components of good UX, so if a tool doesn’t fit that philosophy it’s not going to work long term.
With that in mind, here's what we use for each part of our product stack.
Figma: a powerhouse for prototyping products
Figma did for design tools what Google Drive did for document editors. Figma is a 100% cloud-based (I can’t believe I just wrote that without grimacing) design tool. There’s nothing you have to download, and multiple people can work on a document at the same time.
- Real-time collaboration. We’re a remote design team, so this feature helps us work much more efficiently.
- Built-in prototyping. Figma is also the first interface design tool to make prototyping a first-class citizen. In past tools, like Illustrator or Sketch, we had to spend time porting everything over to a separate prototyping tool. With Figma, prototyping is built-in, and it’s done really well. Simple animations make prototypes feel more real.
- In-browser sharing. Because everything with Figma is in the browser, it’s easy to share prototypes or raw files with clients.
There are still limitations to the animations you can create in Figma, and there are times where you need finer detail for creating vector graphics. So we still lean on other tools, but Figma is our workhorse.
Hugo + Forestry: the best content management systems for most InfoSec companies
We’ve tried countless popular CMS-es and we’ve finally landed on a couple of favorites. Those favorites are:
Webflow: a no-code CMS
If you’re early-stage, and you want your marketing team to be able to experiment and change designs regularly, we recommend Webflow. Webflow is a no-code CMS and website designer that makes it easy to stand up websites quickly. It’s relatively fast, and there’s no infrastructure to manage yourself.
Hugo + Forestry: static site generators with a headless CMS
However, if your team is more technical and you have a little more time, a static site generator with a headless CMS is the way to go. Static sites are super fast and lightweight which is better for SEO than any amount of meta-tag optimization will be.
And you can more easily integrate a static site into your product. There are pros and cons to integrating your marketing site and product, but doing so can create a nicer user experience and make tracking conversions through the entire funnel simpler.
Really, any static site generator with a headless CMS will get the job done, but our votes for a pure marketing site are Hugo and Forestry.
- Hugo is a static site generator with a low learning curve, and it’s built to handle components and shortcodes intuitively.
- Forestry is a CMS with a nice, clean interface, and the Git workflow will be familiar to developers. Plus, the use of Markdown makes it easy to get your content out if you ever need to.
Vue + Nuxt: a secure, fast way to build modern web apps
For a lot of the same reasons static site generators are gaining momentum for marketing sites, server-side rendering is making a comeback on the application side. Server-side rendering has serious security (you’re exposing less of your code) and speed (there’s less you have to download when you hit the page) advantages. This means better UX and SEO.
But we’re not quite ready to give up all the innovation that has gone into Single Page Applications (SPAs). SPAs still make it easier to manage the flow of data through a complex application and to create that “app-like” feel. We prefer to get the best of both worlds with a server-side rendered Vue.js application using Nuxt.js.*
As we’ve started to make the shift to server-side rendering, we’ve also adopted Nuxt because it’s built for Vue. Nuxt is modular, performant, and enjoyable to work with.
Tailwind: the best CSS framework in production today
Shortly after we started our agency, we abandoned Bootstrap as a CSS framework. We were spending more time fighting with the framework than building with it, and everything came out looking the same. People were hiring us for custom designs, and while we wanted to move quickly, Bootstrap wasn’t worth it.
Over the years we’ve tried several alternative lightweight frameworks like Bulma and Bourbon, but nothing ever stuck — until Tailwind.
Tailwind makes writing CSS feel more intuitive, but it doesn’t lock you into a specific style. They have optional UI add-ons that give you design guardrails if you need them, or you can go fully custom like we do.
- Plays nicely with Vue’s component-based architecture. One downside of utility-first CSS frameworks is that you have to repeat a lot of classes each time you want to use the same element, rather than giving it a single class name. But with Vue, that's all in a component that can be reused, so it's not a problem.
- Eliminates the need to name CSS classes. No more code reviews where you say "rename menu__choice to menu__option" or long names like "menu__option___icon". And there are fewer CSS bugs because nothing is overwriting anything.
Tailwind has taken the CSS world by storm in the past year, it has a huge community, and is widely admired by frontend devs. We love it and don’t see ourselves switching anytime soon.
Prioritizing speed, security, and client priorities
There are tons of options out there to build your toolbox, and we’ll certainly explore and tweak in the years to come.
But here’s what we’ve used so far in our work with the world’s leading InfoSec product teams:
- Prototyping: Figma
- CMS: Hugo + Forestry
- Frontend: Vue + Nuxt
- CSS: Tailwind
Curious what kinds of InfoSec products we build? Check out how we helped GreyNoise increase Daily Active Users by 62% and how we helped Sentinel condense millions of data points onto one intuitive screen.
This post originally appeared on the Krit blog.