We’ve explained the Jamstack, a popular new way to build secure, scalable, high-performance sites. Now we’ll introduce you to the tools, services, and APIs that power Jamstack sites.
The A in Jamstack stands for API. APIs can do anything for you, from sending a form to authenticating a user, or from storing and retrieving data in real time to shopping for products.
In this article, we’ll do an extensive review of existing APIs and how they compare to one another. This review couldn’t possibly encompass the whole spectrum of third-party APIs that you can integrate into your website, but hopefully you’ll still find the coverage enlightening enough.
We’ll use the words “headless”, “detached”, and “serverless” a lot in this article. If you haven’t already, check out our introduction to the Jamstack, which covers all the basics.
Hosting (Mostly for Free)
Hosting a Jamstack site usually involves automated deployment pipelines. For example, you might have a repository in GitHub which, on every push, automatically triggers an online deployment (via webhooks), running the necessary build tools (such as Jekyll) and regression tests (via Travis CI).
Sound difficult? It can be a surprisingly simple process!
Most of the services here include these goodies out of the box:
- SSD drives
- CDN deployments
- free SSL (including for custom domains)
- command line deployments and rollbacks
Note: look out for another article in this series, coming soon, covering how to use these services.
Google Firebase and AWS Amplify
Firebase Hosting is Google’s take on a hosting service that’s easy to understand and implement, and it’s free to use (limits apply). Firebase’s backbone actually lies on top of the Google Cloud Platform (GCP), and you can in fact access and tweak some Firebase deployments through the GCP console. But by implementing something of an “gateway” (Firebase) that transparently handles GCP resources for us, Google gave developers a brand new and highly improved user experience (UX) … and the Firebase’s YouTube channel is just brilliant! 👏
AWS Amplify is also an effort to reduce the complexities of Amazon Web Services (AWS) for web and mobile deployment that doesn’t quite offer free hosting but 12 months of free use for new accounts for its Storage with Amplify as part of the AWS Free Tier.
Google really made a brilliant move with the Firebase family of products by “detaching” them from the GCP, but Amazon went half-way with AWS Amplify. It sure is a dramatic improvement from the regular AWS workflow, especially for novice users, and its documentation hub is superb and way more down-to-earth than the way Amazon usually documents services. But Amplify is still accessed from the same old (horrifically bloated) console. You still need a credit card to just open an account, deployments are still region-specific (no built-in CDN, seriously?), and the workflow isn’t as straightforward when compared to that of Firebase or Netlify.
GitHub Pages and GitLab Pages
In a future article we’ll cover how to use these services, but in the meantime make sure to check out these easy-to-follow guides:
Netlify and Heroku
In a very short period of time, Netlify not only coined the Jamstack term but also positioned itself as the place to go for all things static. While you could certainly accomplish more with an elaborated AWS pipeline, the simplicity and unparalleled ease of use that Netlify offers is unbeatable. Want to host a static site? Just drop it here and it’s online. Want automatic updates? Link a repo and just push a commit. And batteries are included — instant builds, worldwide CDN, free SSL, CLI tool, on-click rollbacks, and more.
Heroku is the only service in this list that allows you to host dynamic pages: Node.js, Ruby, Python, Java, PHP, Go, Scala and Clojure (check their Language Support page). So if you aren’t yet quite ready to go static, this might be a good way to test your dynamic sites online for free.
With 194 data centers as of 2020, Cloudflare is — by many metrics — the company that offers the lowest latency for their DNS and CDN services around the world. They serve big companies but also have a number of services oriented to developers, like Workers Sites. The service isn’t free ($5/mo minimum charge) but it’s as top performant as you can get, and fairly easy to use.
Other tools targeted at static pages include Aerobatic, which offers a free trial with no credit card required and support for internationalization (i18n) and full-text search built-in plugins; Surge.sh with npm run scripts and CI services; and Vercel (formerly ZEIT Now) with an Edge Network serving big names such as Twilio and The Washington Post.
|Firebase Hosting||yes||easy||very good|
|GitHub Pages||completely free||easy||poor|
|GitLab Pages||completely free||easy||good|
|Heroku||yes||somewhat easy||very good|
|Netlify||yes||extremely easy||very good|
|Storage with Amplify||1-year (new accounts)||somewhat easy||very good|
|Workers Sites||no||somewhat easy||good|
Storing and Retrieving Data: Real-time NoSQL Databases
NoSQL solutions like MongoDB have been coexisting with relational databases like MySQL for some time (see the differences and how to choose), but real-time processing takes NoSQL to the next level by enabling cloud storage for state management, such as a user entering their name or clicking a radio button.
Amazon DynamoDB is a “fully managed, multiregion, multimaster, durable database with built-in security, backup and restore, and in-memory caching for internet-scale applications”. But as with many things AWS, it’s difficult to implement and very hard to debug (see Why Amazon DynamoDB isn’t for everyone, by Forrest Brazeal). In all fairness to Amazon, they also built DataStore into AWS Amplify (with GraphQL and REST API support) with a more straightforward approach, in line with the simplicity of the rest of Amplify’s products.
Google Firestore made real-time NoSQL databases — a fairly complex topic in and of itself — as simple as they can be, with pretty much all the capabilities DynamoDB has. It’s very well documented (with introductory clips that are fun to watch). And React and Vue.js have wrappers around Firestore with react-redux-firebase and Vuexfire, respectively.
Cloudflare sure knows how to take performance to the very extreme, and Workers KV, a serverless key-value storage for applications, is a fine example of what a well engineered product looks like. The premise of Workers KV is that you can access a key as if it were a local file within your app, and the content will be the value stored for that key. That’s it — no API to implement, no extra coding. And because of the unbeatable performance of the Cloudflare CDN, this approach can actually be faster than querying a NoSQL database. And as simple as it is, it scales seamlessly to millions of requests. 👏
Managing Content: Headless CMS
In the “monolithic” way of doing things, whenever we used a given content management system — such as WordPress, Django, or Joomla! — it meant that we also needed to use the front-end engine that came attached to it, as back and front end were “coupled” components of a single piece of software (see our introduction to the Jamstack for more info about tightly vs loosely coupled sites).
Enter the headless CMS — a back end only without a front end. Since a headless CMS would normally expose an API or generate static content in the way of Markdown or HTML files, the front end can be anywhere really. In fact, multiple and simultaneous interfaces can be created for web sites, mobile apps, and Internet of Things (IoT) apps.
Products and Services
There are a number of headless CMSs, both as software you can download and configure where you do the deployments yourself, or offered in the software-as-a-service (SaaS) model where everything is taken care of for you.
Some features you can expect to find:
- localization (l10n) and internationalization (i18n)
- microservices architecture with a RESTful API
- editor interface
* Since some headless CMS will integrate smoothly with your git repo, the versioning capability can actually be a remarkable improvement over a regular CMS.
Self-hosted Headless CMS
Ghost, “the #1 open source headless Node.js CMS”, is certainly the one with the most stars on GitHub. Not only can Ghost handle content, but it also offers a number of integrations to manage payments (Stripe), email lists (MailChimp), shopping (Shopify), and many more. And then there’s Ghost(Pro), which is the official managed hosting for Ghost with commercial support.
Fairly close to Ghost in popularity comes Strapi, with REST and GraphQL APIs, and 1-click deployments on Heroku, AWS, and DigitalOcean. It has “starters” (template projects) to work seamlessly with Gatsby, Vue.js with Nuxt.js, React with Next.js, and Angular. It also runs on Node.js and has support for a number of database engines.
Netlify CMS is also a popular option built as a single–page React app. There’s Directus, which wraps custom SQL databases with an API and provides an intuitive admin app to manage its content, and the commercial companion Directus Cloud. There’s also TinaCMS, which is also React-based, and Ponzu, Copckpit, and many more, which you can explore oin the comprehensive list provided by headlesscms.org.
SaaS Headless CMS
CloudCannon is the cloud CMS for Jekyll (we’ll review Jekyll later in the “static site generators” section), with smooth integration with GitHub, Bitbucket and Dropbox. They have a free plan as well but with no global CDN hosting.
Contentful is something different: a content hub where business owners, marketers, developers and project managers can all go to set and manage all of the data sources of an organization. And their headless CMS is just a part of that strategy. The Contentful platform is fully featured, very well documented, with plenty of open-source tools. And while the pricing is a bit confusing, there’s actually a free plan that only requires attribution.
There are other SaaS headless CMSs with free plans, such as DatoCMS and Sanity with a proposition similar to that of Contentful; Forestry, with support for a number of static generators; GraphCMS, with GraphQL support; and Prismic. These are just a few of the many options.
Sending Information: Forms without Code
Sending data through forms has forever been one of the main uses for server-side processing. There are essentially two approaches to addressing this problem on a static site, each with pros and cons.
From Builders, Embedded and Hosted Forms
Many times integrating a “powered by” external form is more than enough to collect email addresses or to receive feedback.
Google Forms have offered this possibility since 2008 entirely for free, with a simple interface that stores submissions on Google Sheets, and that can send alerts via email every time there’s a submission.
Formstack takes forms to another level by providing an integrated workflow supporting digital signatures, document generation, Salesforce integration, and more. They offer a free tryout but no free plans.
Then you have the extremely easy-to-use form builders JotForm and Wufoo, which integrate handling payments, among other things, or Typeform, which makes forms and surveys … pretty? All of them offer free plans.
External API: Form Processing as a Service (FPaaS)
Sometimes a builder won’t cut it, as you need more flexibility to present information and fields, or to fully integrate the look and feel of the form with the rest of your website. For this you will need to integrate an API.
The way these services work is surprisingly easy: you specify a URL for submission that will do the processing for you. At most you’ll have to set a few things up but most probably won’t need to do any extra coding.
Programming Server-Side Logic: Function as a Service (FaaS)
As with pretty much everything else in this list, you won’t be paying anything for a function that’s not being actively used, so no worries for just leaving it sitting there (but beware that spikes in traffic might also trigger extra billing).
Cloud Functions for Firebase and Netlify Functions are wrappers around Google Cloud Functions and AWS Lambda, respectively. They greatly simplify the management of functions on the cloud, as you effectively can get away without even having an account on such services. Code deployment and versioning become trivial with Netlify — which also has very good community support — as it will smoothly integrate with your repo offering stage, previewing, and rolling back at a click (or a commit). Simplicity naturally comes at the expense of losing some flexibility (see Firebase Cloud Functions: the great, the meh, and the ugly by Pier Bover).
IBM Cloud Functions (based on Apache OpenWhisk) and Cloudflare Workers are other services you might want to look at. IBM has an impressive list of supported languages, including the option to deploy Docker containers with your own runtime. However, it ranked somewhat poorly performance wise. And just as Netlify systematically manages to make things the simplest, Cloudflare again makes things the fastest (and by a difference).
|Google Cloud Functions||Go, Java, Node.js, Python||642 ms 🔴||168 ms||high||👍 very good|
|Netlify Functions||Go, Node.js||86 ms 🟢||589 ms||very low||👍 very good|
* As measured by λ Serverless Benchmark, the overhead is the time from request to response without the time the function took (for a concurrency of 50), and the coldstart is how long the servers takes to respond when queried are spanned every 3 hours; the lower the values, the better.
Authenticating Users: Identity as a Service
Identity as a Service (IDaaS), also called sometimes Authentication as a Service (AaaS), involves managing a full user registration, confirmation, and authentication with just APIs. The Geist of “stateless authentication” is that a user will authenticate against a third-party and come back to you with a valid “token” that you can verify, or revoke if need be.
In some cases, a provider might even offer a “drop-in” user interface (UI) that will work seamlessly across desktop and mobile, all of which could potentially save you very long hours of work.
Auth0 has been in business the longest and has quickstart guides for a number of scenarios. It’s an excellent provider if you want to implement a complex solution and already have some experience implementing authentication. But as they point out, “identity is complex, deal with it”. The large scope Auth0 services (universal login, single sign on (SSO), multifactor authentication, branch password detection, and so on) can be overwhelming if you’re just starting on the topic.
Firebase Authentication (with its ready-to-use UI) and Authentication with Amplify are also very comprehensive and flexible, and somewhat presented in a more straightforward manner than Auth0. Firebase also offers anonymous authentication! Curious? Check out this clip:
Once again, Netlify seems to come up with the easiest solution to implement with Netlify Identity and its open-source zero config netlify-identity-widget to create a secure login in 10 minutes! But of course, there are some limitations (check out Four Dealbreakers in Netlify Identity, by Jean Cochrane).
You can also check Okta, FusionAuth and LoginRadius, all of which have free plans. There are no freebies for Ping Identity, OneLogin, and Ubisecure, which are more oriented to the enterprise sector. Finally, consider Cloudflare Access, as everything Cloudflare does is rock solid.
Going F·A·S·T: Static Site Generators (SSG)
I can hear some of you saying “all of this might be okay for future projects, but my sites are already dynamic, so what to do?” Here’s when static site generators enter the picture.
You can have the best of both worlds — the convenience of a familiar CMS and static pages with code and data splitting, preloading, caching, image optimization, and all sorts of performance enhancements. An SSR will bridge that gap by querying your database and generating static output out of it (for example, Markdown pages), and with some settings to set your template, you’ll be all set.
The listing here is tiny compared to the ever increasing list of SSRs. Have a look at StaticGen for more info.
GatsbyJS is powered by React.js and webpack, meaning that it can generate progressive web apps (aka PWAs, websites that look and feel like an apps). It also supports GraphQL (see Write Apps with Better Building Blocks) and it has +1,000 plugins to get data from anywhere (WordPress, Drupal, Contentful, GraphCMS, DatoCMS, and many more). See how GatsbyJS says it compares to its main competitors, Hugo and Jekyll.
Hugo claims to be “the world’s fastest framework for building websites”, and it sure can generate massive sites in milliseconds. With built-in templates (literally hundreds of them available) and native support for internationalization (i18n), it’s also one of the most popular SSGs. Hugo is a Go app, and while Go isn’t hard to set and learn, you’ll definitely need to be checking the documentation often if you aren’t familiar with it.
WP2Static is an SSR designed specifically for WordPress (WP). It has a small but very interesting set of plugins, like Algolia search, and Cloudflare Workers and Netlify deployments. HardyPress is actually a SaaS solution to generate static WP sites, and for a fee you’ll have an admin panel from where you can enter some credentials to access your online WP installations to manage everything: shut down live WP installs that were already imported, transparent deployment to global a CDN, HTTPS, forms, search. Other WP-related SSGs with commercial support are Shifter, Strattic, and Sitesauce.
Since I am admittedly biased towards Vue.js, I had to include VuePress, which is intended to generate single page applications (SPAs) and has a minimal setup with markdown-centered files, and it’s also powered by webpack. Gridsome and Nuxt.js are more featured Vue.js powered frameworks with SSR capabilities.
Selling and Processing Payments: Headless Shopping Carts
The architecture and benefits of headless ecommerce is not that different from that of a headless CMS: massive cost reduction (hosting, licenses, maintenance), less time to market, seamless integration, and — a big one for commerce — “omnichannel” capabilities.
Headless shopping carts are substantially different from services like Shopify, as you aren’t bound to a storefront and you can move data around to a variety of media and from a variety of sources. A headless ecommerce provider is not opinionated on how you present your content or access your data and has no control over it.
Precisely this is what enables an omnichannel strategy, in which you can not only deliver content to multiple channels (web, mobile, IoT) but also centralize the processes management across different channels for a holistic, improved UX. Mind you, studies by Harvard Business Review and Aspect Software have shown that such strategies provide a significant edge over the “multi channel” or “online alone” approach.
At a more corporate level, Elastic Path offers headless ecommerce services for the automotive, manufacturing and healthcare industries, among others. And Salesforce Commerce Cloud leverages the Salesforce platform into headless ecommerce for business-to-consumer (B2C) and business-to-business (B2B).
Finding What You Want: Search as a Service
Web search can also be integrated in our websites via search as a service, letting a third-party do the indexing and sorting of the results for us.
Google Custom Search (and its rebranding as Programmable Search Engine) was a pioneer in this field, but while very easy to use and implement, it didn’t integrate well with the look and feel of the site, and the search results depended on what Google previously indexed.
There’s Elasticsearch with managed solutions like Amazon Elasticsearch Service, and other AI-powered services like Azure Cognitive Search, Amazon Kendra and Amazon CloudSearch, and Apache Solr. And they’re all excellent and will yield excellent results if well implemented. But that’s precisely the problem — implementation. It takes quality time and skills to craft a solution that actually works.
Algolia is the one service that took integrated search to another level with its ultra fast Search API that can be used in a number of situations (site, voice, geo, mobile, ecommerce, media, and more). It offers a generous free “Community” plan.
Klevu and Sooqr Search are search solutions specifically targeted at ecommerce, to make it easier to connect shoppers with the products you have to offer. Sooqr offers a free plan for up to 100 unique products, while Klevu doesn’t.
Staying Up to Date: Notifications
Having a strategy to communicate across a number of channels is key to stimulating user engagement, and yet it’s even better to combine them in a programmatic way with a single API to send messages across all platforms.
There are essentially four complimentary pathways you can use:
- Mobile push is a highly visible way to send (hopefully) relevant messages so that users go back to your app.
- Web push follows the same principle but for desktop and mobile browsers.
- In-App messages are yet another way to retain subscribers, providing assistance your users might need.
- And Email, because even in 2020 and with all of the IMs and social apps, email marketing is still a thing.
Have you ever heard that most people think they’re above average? Seems like companies fall into bias as well, as OneSignal, Pushwoosh and Truepush all proclaim themselves as the “#1 push notifications service”. In any case, they all have generous free plans (and a lot of marketing insights to get out of the data you send through them), with OneSignal having more integrations to offer.
Extra: Getting Insights with Analytics
Analytics with Amplify is Amazon’s approach to a service that works in pretty much the same fashion as Google Analytics for Firebase, working on Android, iOS and the Web.
Conclusions (or Why Pay for Something You Could Develop Yourself?)
If you’ve got this far, you’ve probably noticed that most of the services we’ve covered can be used for free up to a point — which is generally when your site or app takes off. So why not develop your own search or authentication solution, or manage your own server and create ad-hoc notifications that are exactly what you need?
Well, here’s a question: have you noticed that even huge corporations with the finest IT departments that money can buy also use these services?
- Twitch uses Algolia
- Spotify and Airbnb use GatsbyJS
- Atlassian uses Auth0
- Netflix uses CloudCannon
- Alibaba uses Firebase
- Mozilla uses Ghost
- pretty much everyone uses AWS and Cloudflare
- … and so on, and so on
The ultimate question is — are you really going to save money and/or have more control by shifting your resources and focus into solving a problem that isn’t the core of your business, and that somebody with a more qualified team has already solved? If so, by all means go for it! Or else you can accept the price tag, forget about that one problem, and move on to the next one.
Get up to speed with the Jamstack. Our Jamstack Foundations collection helps you take your first steps into the Jamstack and beyond, and we’re adding to it constantly. We’ll bring you the tutorials you need to become a pro. You can always refer to our index as it’s updated at the end of our Introduction to the Jamstack:
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well