January 2018 Summaries

Shannon Soper describes her experience building a website for her dog using React and Contentful, drawing an analogy to the way printing technology has made art more accessible. React, a JavaScript library, enables the creation of adaptable user interfaces, while Contentful, a headless CMS, allows easy management and distribution of content across various platforms. Soper highlights the ease of updating content without extensive recoding, making it efficient for both individual and team use. Despite challenges with Contentful's documentation and GraphiQL's sorting functionalities, she successfully created a site that can be quickly updated as new content arises. This process, she notes, allows for more focus on innovation rather than maintenance, and she expresses a desire to further improve her skills in React for more complex designs.

The technology industry is currently undergoing a significant platform shift, impacting the entire application architecture and prompting a reevaluation of the presentation layer. Historically, shifts like these begin within the infrastructure sector and affect the broader technology stack, moving from client-server models to web and application servers, and now to cloud-native architectures featuring containers and microservices. The new paradigm emphasizes an application- or service-centric model with programmable, elastic, and secure infrastructure, largely driven by open-source software. As companies increasingly adopt digital transformation, the focus is shifting towards improving the frontend presentation layer, leveraging technologies like React, GraphQL, and serverless architectures to enhance performance, security, cost efficiency, scalability, and agility. This evolution involves replacing traditional web servers and content management systems with a serverless approach, utilizing pre-built JavaScript code served from cloud/edge caches, which offers faster, more secure, and cost-effective solutions for developing user experiences.

Amberley Romo describes her experience rebuilding her blog using GatsbyJS and WordPress, highlighting the ease of using Gatsby, a static site generator for React, to integrate with WordPress data via the WordPress JSON REST API. She details the initial setup process, including the use of key configuration files like gatsby-config.js, gatsby-node.js, and gatsby-browser.js, and emphasizes the role of the gatsby-source-wordpress plugin in sourcing data. Romo elaborates on dynamically constructing site pages using Gatsby's createPages API, which leverages GraphQL queries to fetch and display WordPress data. She also explains the distinction between templates and page components in Gatsby, noting that React components in the src/pages directory automatically become site pages. The post acts as a guided walkthrough rather than a tutorial, aimed at familiarizing readers with Gatsby's setup and plugin ecosystem, while also mentioning the use of Netlify for deployment and the benefits of Gatsby's plugins for enhancing website functionality and performance.

Pierre Burgy's guide on building a static blog using Gatsby and Strapi highlights the process of integrating these two powerful open-source tools to create a fast, secure, and easy-to-maintain blog site. Static websites, known for their speed and security, can be enhanced by using Gatsby, a React-based framework that generates static pages, and Strapi, a headless CMS that simplifies content management through a user-friendly interface. The tutorial walks users through setting up a Strapi project to manage content types and permissions, and then integrating it with a Gatsby project to fetch and display this content using GraphQL. It also covers creating individual page views for articles and authors, utilizing Gatsby's image handling capabilities, and suggests potential expansions such as adding categories and a comment system. The tutorial is designed to be followed through both text and accompanying video content, providing a comprehensive learning experience for beginners and intermediate users interested in leveraging the combined benefits of static site generation and headless CMS architectures.

Boston.gov, a small team responsible for the city's digital presence, played a crucial role in Boston's selection as one of the 20 candidate cities for Amazon's HQ2 by leveraging the Gatsby framework to create a compelling website. Tasked with building both a public-facing site and a secure site with additional information within a short timeline, the team utilized Gatsby's capabilities to set up and deploy the site rapidly. Lead engineer Matthew Crist highlighted the advantages of Gatsby's hot reloading and support for component libraries, allowing the team to use their existing pattern library efficiently. The collaborative efforts between the team and stakeholders led to a polished final product that received positive feedback both internally and externally, ultimately contributing to Amazon's favorable view of Boston's proposal.