Speaker spotlight: Phil Hawksworth on the JAMstack

Phil Hawksworth at Pixel Pioneers Bristol on 7 June: JAMstack — Silly Name. Serious Stuff.

What’s the JAMstack?

The JAM in JAMstack stand for JavaScript, APIs and Markup. It's a term which gets misunderstood quite a lot, probably because it can be used in a variety of ways, and also because each of those words could be used in different ways.

I essence, JAMstack describes an architecture where we pre-render our sites and serve them directly from a CDN or optimised static hosting environment. And then if required, progressively enhance them with JavaScript and calls to APIs.

What’s the main challenge of this new approach?

One challenge here is in convincing people that these sites are not just static, and for static use cases. This is one of the reasons that the term JAMstack exists in the first place — to move us past talking about static sites. Being able to host a site on static hosting infrastructure has many advantages in areas like performance, security, maintenance, and agility… but the temptation is to think that this is for simple sites only. Modern browser technologies, tooling and services have moved us far beyond that point. But some old-school thinking is still pervasive.

Comparing scenarios of what is currently required to provision, secure, scale, and deploy to existing architectures, to the same operations on the JAMstack. And comparing the experience to the user can be quite compelling for stakeholders exploring the JAMstack.

How have static site generators evolved recently?

Static site generator (SSGs) are continuing to mature and evolve. There are hundreds now listed on staticgen.com. There are SSGs for pretty much any language and templating system you like. And they seem to be gaining exposure and support from developers who have enjoyed using them. Some are rolled in with opinionated and sophisticated JavaScript frameworks, such as Gatsby with React, or Gridsome with Vue. These can be extremely powerful and promote some nice workflows and developer experiences. Personally, I prefer SSGs that do not add JavaScript magic or require that I use a specific framework. That’s probably because I like to have much more control and retain the understanding of more of my output than I might otherwise if I added a sophisticated framework. And the types of sites that I build rarely demand it.

A nice thing about this JAMstack approach is that you’re not tightly bound to any one SSG for all of your projects. You can choose the tools which best fit your needs for each project,

What are your favourite JavaScript libraries, frameworks or APIs right now?

I quite deliberately lag behind on this. There are so many people working on the bleeding edge and quickly embracing the next framework that I find it hard to keep up and avoid becoming religious about the next big thing that I’m learning about. I find that hanging back and observing the outcomes of some of the debates and uses of frameworks can be more productive for me. I’ve seen some wonderful patterns and capabilities come out of the React community. But I personally find a tendency towards over-engineering there. Again, this might mostly be due to the needs I have on the sites I build.

Vue seems to be landing in quite a sweet spot, taking some learnings from frameworks that have come before it, and offering a slightly more simple route to achieving similar things.

My favourite framework to use, though, is none. If I can ship something which needs fewer lines of JavaScript and can make use of more traditional web patterns, then I feel happier that what I’m making will perform better in challenging technical environments, and that I’ll be able to maintain it for longer.

Like so many things…. it depends!

Can you give us an example of a site that was built with the JAMstack and explain the difference it made?

An example I often refer to is Smashing Magazine, who moved from having a very complex and diverse set of Wordpress tools, over to having a JAMStack site hosted on Netlify. Their measured performance improved around by around 10 times. You can read about it on this blog post.

But other examples can be very different. Many of the larger open source projects host their sites on Netlify as JAMstack sites because of the stability, confidence and version control that a pre-rendered site can bring. ReactJS, VueJS, GatsbyJS all host their sites as JAMstack sites.

What can people expect to take away from your talk in Bristol?

We’ll take a look in more detail of what JAMstack really means. Why those terms have been chosen (beyond the fact that they spell something delicious), and how to assess if this type of architecture would be suitable for your next project or not. We’ll look at some examples of how JAMstack has helped, and what the impact has been on developers and users.

We’re also going to look a little at an associated technology: serverless.

We’ll see what kinds of development workflows are available for creating serverless functions, and how they can be used to extend a JAMstack architecture to places you might not have thought possible without a server of your own.

What’s your favourite jam?

Raspberry. No ...apricot.

Wait ...bramble. Hmmm. This last question is too big and too important to be discussed in this way.

Apart from Phil's talk, Pixel Pioneers Bristol also covers CSS layouts, DevTools, web animation, conversational design, and more. There are also a couple of workshops on front-end performance (save £45 on a conference and workshop bundle) and web accessibility but they're selling fast. Get your tickets today!