Page Comparison

...

A few months later, Nuxt was seen as overkill since it pulls down a number of unnecessary Nuxt modules into webpages that increases page sizes. Moreover, some complicated workarounds were added into the source code to support features that Nuxt didn't yet support, such as adding ARIA role indicating the current page. These features can be easily implemented using simpler platforms. An evaluation was done at the time and we switched from Nuxt to 11ty. These evaluation notes can be found in the meeting notes document dated Thursday, April 23, 2020 & MondyMonday, April 27, 2020. Reasons that Eleventy is selected:

...

1. Any content change in the WordPress immediately triggers the redeploy. WordPress site includes a “JAMStack plugin” which is capable of making live calls out to the netlify Netlify installation;
2. These actions in Airtable tables will notify Zapier, an integration tool, which then trigger the Netlify re-deploy. The Zapier polling on Airtable change is every 15 minutes. It means Airtable data change will be reflected on the website to a maximum time of 15 minutes:
   1. Any field value change to the "workshop" table;
   2. Any "reviewed" flag is flipped in the "comments" table.
3. New commits into the Github source code repository immediately trigger the redeploy. Commits into the master branch triggers the re-deploy of the production site while commits into the dev branch triggers the re-deploy of the development site.

...

1. Fully static page: Static pages are rendered by directly using Eleventy supported nunjucks templates with data;
2. Dynamic handling such as search and filter. The workflow:
   1. When Eleventy fetches search/filter required data from data sources, it saves data into JSON files that the search and filter are performed upon at user requests;
   2. The search is performed by javascript Javascript written in Vue.js components. The dynamic search results are rendered in Vue.js template;
   3. Vue.js was selected because a primary developer has experience with Vue.js. This dynamic handling can be achieved through any other approaches or libraries. Eleventy offers the flexibility of using different libraries or strategies on different pages;
   4. There is no routing for dynamic handling pages. Using the search as an example, the search results page is static too. The diagram shows that the search box is a good old-fashioned HTTP GET FORM directing to /search/ . This is backed by search.njk rendering the search result, derived from index.json, which simply contains all the searchable content of the website in a 13K file. This holds some scalability risks given the entire site content needs to be served for a search, but the website is small and unlikely to grow vastly bigger.
3. Airtable operations: When user posted data or action needs to be reflected in Airtable, the user request will first be posted to a Netlify hosted endpoint. This endpoint then interacts with Airtable to perform database operations.

...