Dev Discussions: Intro to the Jamstack with Salma Alam-Naylor of Netlify
Salma-Alam Naylor can trace her love of Jamstack to her time as a music teacher.
Before she spread the joy of learning web development, she was a musical comedian and music teacher who taught kids how to play in a rock band.
She ended up falling in love with technology later in life. As someone who came to development from a non-traditional career path, she developed a special place in her heart for technologies that removed people’s barriers to developing their websites.
Now she’s a staff developer experience engineer at the Jamstack-native cloud platform Netlify, where she continues to preach the cause of web development for everyone.
For Salma, Jamstack helps open up a world of possibilities for people who want to create their own websites or get into web development.
Wait, what is Jamstack?
Most people vaguely familiar with Jamstack think it’s a set of specific technologies – notably JavaScript, APIs, and Markdown (JAM).
That’s a big misunderstanding that Salma was quick to correct: Jamstack isn’t defined by your tools. Instead, it’s an architectural decision about how website requests are processed and the responses rendered to the user.
To understand this new architecture, it helps to take a step back in time to the early days of the internet.
Back in the early 2000s, every time someone made a URL request to access a website, the request would go to a server, the server would run code to build the .html document, and then the server would send the document back to the requester.
Not only was this a long process – imagine a server in Beijing having to render a page in Cairo – but early websites relied on massive monolithic tech stacks to carry out this process.
There was no real front end/back end separation. Front-end developers were often an afterthought, forced to use the templating systems that came with the monolithic tech stacks.
Because these systems were so complex and intertwined, there was a lot of overhead with unused technology sitting idle and maintenance issues a pain to troubleshoot.
That all changed around 2010 when companies started to decouple the front end from the back end – that’s when we saw the emergence of front-end frameworks like Angular.js and Backbone.js.
As front ends started to develop their own ecosystems, another advancement in web dev technology was occurring – the creation of static site generators like Jekyll and Gatsby.js.
The premise behind static sites is simple – you use a static site generator to generate the .html page and then publish them to a Content Delivery Network (CDN).
The beautiful part about publishing them to CDNs is that the CDN comprises various distribution nodes worldwide. So the CDN distributes them to all the nodes around the world where they are cached.
When a user wants to access the website, they are directed to the nearest CDN node – and not a server halfway across the world – which drastically reduces the time it takes to serve up the page, making for a much better user experience.
That, in a nutshell, is the Jamstack architecture: Serving pre-generated assets that are bundled up at build time and then put onto a CDN which distributes them to users.
Jamstack lowers barriers for beginners
The only thing you have to worry about as a Jamstack developer is creating the static HTML file that will be published to the CDN. How you do that is up to you – you can use any Javascript framework, Ruby, or even write the HTML all by yourself.
You don’t have to worry about anything related to the DevOps of your web application. In other words, you don’t have to know anything about how to spin up and manage the server to which your application will be deployed.
That’s because Jamstack is generally managed using a serverless cloud platform like Netlify, Cloudflare, or Amazon CloudFront (to name a few).
This removes any need for you to know how to manage servers and code deployment. It also allows you to push your web pages to production quickly and roll them back to previous versions if you accidentally push an error.
Therefore Jamstack drastically lowers the barrier to entry for new web developers – it’s much easier getting a web page live than developing a page and then worrying about setting up the infrastructure it will live on.
Take the YOLO approach to get started with Jamstack
The great thing about Jamstack is its simplicity. You only really need to know HTML (Salma argues you don’t even need to know CSS) and how to connect to a hosting provider to get started.
That helps enable what Salma calls “YOLO” (You Only Live Once) publishing, which is a web dev “technique” she recommends for new web developers.
One problem with new developers – especially when they’re only exposed to more complex web development – is that they’re so overwhelmed with different ways of creating a web page that they don’t know where to start. And if they do start, they want it to be so feature-rich and perfect that they never end up pushing the page to production.
YOLO is a form of rapid iterative development where you quickly create a page and push it to production, warts and all. You then promptly learn – both by using the website and by getting feedback from others – about what went right and wrong and how to improve the latter. In the words of Confucious, “Better a diamond with a flaw than a pebble without.”
If you made a big mistake, you can roll back to the previous version, make your corrective changes, and publish the page again.
You don’t need to spend time learning the inner workings of the cloud service’s infrastructure or how they deploy your code to the CDN – they take care of all that so you can focus on creating excellent web applications.
You don’t need to spend hours learning the newest React features or use complex build tools to make a good web page. You just need to get started building something that you can quickly publish.
Once you get your first pages published and become comfortable with that process, then you can start implementing more advanced Jamstack features. The key to not getting overwhelmed here is to only focus on learning the features that are essential for you and your web apps.
It’s easy to get distracted by new features, so it will take some effort to separate yourself from the “I need to learn everything” bug that often infects new developers.
As long as your page is readable, usable, and accessible, it doesn’t matter what it looks like. Sometimes simple is better, especially if you’re learning something for the first time.
Jamstack: A force for good
Ultimately Salma’s goal for preaching about Jamstack is accessibility – she wants to live in a world where technology allows everyone to do something good.
Jamstack does this by making it easy for people to create and publish beautiful content.
If you want to get started with Jamstack, the place to begin is Jamstack.org.
Once you get through those introductory readings, you’ll probably want to:
- Learn HTML if you haven’t already (unless you’re going straight to a static site generator like Next.js or Jekyll).
- Create your HTML file or generate it using your static generator of choice
- Select a hosting company to host your page and distribute it to a CDN
- Publish your page using the hosting company’s tools.
That’s it! That’s all you need to do to publish your first Jamstack-powered page.
P.S. Are you a woman interested in, or already working with, Jamstack? Salma currently leads the Women of Jamstack group and would love for you to check it out!