Categories
Article jamstack maintenance

Where Does Logic Go on Jamstack Sites?

Here’s something I had to get my head wrapped around when I started building Jamstack sites. There are these different stages your site goes through where you can put logic. Let’s look at a special example so you can see what I mean. Say you’re making a website for a music venue. The most important part of the site is a list of events, some in the past and some upcoming. You want to make sure to label them as such or design that to be very clear. That is date-based logic. How do you do that? Where does that logic live? There are at least four places to consider when it comes to Jamstack. Option 1: Write it into the HTML ourselves Literally sit down and write an HTML file that represents all of the events. We’d look at the date of the event, decide whether it’s in the past or the future, and write different content for either case. Commit and deploy that file. <h1>Upcoming Event: Bill’s Banjo Night</h1> <h1>Past Event: 70s Classics with Jill</h1> This would totally work! But the downside is that weu’d have to update that HTML file all the time — once Bill’s Banjo Night is over, we have to open your code editor, change “Upcoming” to “Past” and re-upload the file. Option 2: Write structured data and do logic at build time Instead of writing all the HTML by hand, we create a Markdown file to represent each event. Important information like the date and title is in there as structured data. That’s just one option. The point is we have access to this data directly. It could be a headless CMS or something like that as well. Then we set up a static site generator, like Eleventy, that reads all the Markdown files (or pulls the information down from your CMS) and builds them into HTML files. The neat thing is thatwe can run any logic we want during the build process. Do fancy math, hit APIs, run a spell-check… the sky is the limit. For our music venue site, we might represent events as Markdown files like this: — title: Bill’s Banjo Night date: 2020-09-02 — The event description goes here! Then, we run a little bit of logic during the build process by writing a template like this: {% if event.date > now %}   <h1>Upcoming Event: {{event.title}}</h1> {% else…

Read the rest Where Does Logic Go on Jamstack Sites?

Read at the original Source: css tricks.