June 2020 Summaries

Netlify has released its June newsletter, which highlights the company's latest news, updates, and resources. The newsletter includes a re-publication of their monthly email sent to subscribers earlier in the week. It also covers various topics such as Top 10 Build Plugins, Brotli compression, Netlify Edge, Next.js 101, case studies from TunnelBear and the Cloud Native Computing Foundation, and other announcements. Additionally, the company thanks its community for condemning systemic racism and police violence against the Black community, and announces a matching donation of $25,000 USD to organizations working to end racism and injustice. The newsletter also provides information on how to contribute to open source projects, Jamstack Conf Virtual video replay, and Edge Handlers preview.

Gatsby is a popular meta-framework built on top of React that specializes in producing fast-loading, fully interactive Jamstack sites. It has an extensive plugin ecosystem, powerful integrations with virtually any API and data source, excellent documentation, and a pleasant developer experience. Gatsby allows users to bring their data from anywhere, giving them the power to integrate with SaaS solutions and third-party tools with minimal configuration. The framework is designed with performance as a first-class focus, optimizing site performance through multiple strategies such as effective code splitting, inlining of critical assets, heavy image optimization, and smart preloading of assets. Gatsby has an extensive open source ecosystem, with over 2,000 plugins available, making it accessible to beginners and seasoned developers alike. However, Gatsby also comes with a steep learning curve, and its default configuration can be overwhelming for new developers. Additionally, the plugin ecosystem is spread out, and not all plugins are of high quality, which can make it difficult to know if a plugin works or not. Overall, Gatsby is a powerful toolkit that is well-suited for teams who know React and are familiar with GraphQL, and is especially good for rapidly creating marketing sites, blogs, and company websites.

The Jamstack, a modern architecture for faster and more efficient websites, was used by Harper Reed, the former CTO of Obama for America, to build a scalable and fast fundraising platform. The switch from server-side rendering to client-side rendering significantly improved speed and usability, allowing supporters to donate quickly and efficiently. Harper's experience with the Jamstack highlights its benefits in terms of speed, simplicity, and accessibility, making it an attractive option for developers looking to improve user experience and productivity.

You have successfully built and deployed a full-blown Jamstack app with a custom backend using Strapi and Netlify Functions. In this tutorial series, you created serverless functions to read from your backend asynchronously, then display data from your backend in an HTML frontend. You also wrote JavaScript code to save reactions to your backend and update the frontend. This demonstrates the power of the Jamstack, which allows you to configure your entire backend with no code at all, and deploy a fully functional frontend with fewer than 150 lines of code. The tutorial covers topics such as using Netlify Functions, creating serverless functions, writing an app frontend, and handling user interactions.

The Jamstack architecture allows for custom backends to be used with Jamstack apps, which can be beneficial in certain situations. In this tutorial series, a complete custom backend is built using Strapi, and then a Jamstack app is created to read and write data from the backend. The process involves deploying a new Strapi instance on DigitalOcean, setting up the backend with data collection types for corgis and reactions, configuring access permissions, and creating content types in the Strapi dashboard. With no code required, the custom backend is successfully deployed, allowing for future development of a Jamstack app to interact with it.

The general availability of Netlify Build Plugins has led to a significant increase in activity from the community and partners, who are installing plugins and creating their own to share with others. This feature allows users to customize their build process and automate tasks, such as caching files, checking for broken links, and triggering testing, with one-click from the UI. The most popular plugins include Cypress, Speedcurve, and Sentry, among others, which can be accessed through a comprehensive catalog available in the Netlify UI. Additionally, users can create their own Build Plugins to share with their team or the community.

Next.js is a popular web framework that solves two major problems: slow initial page load times and SEO issues. It provides features such as hot code reloading, styling options, TypeScript support, environment variables, and automatic code splitting. Next.js also offers a filesystem-based routing structure, API routing, performance measurement tools, and a command line interface. The framework is designed to be customizable with a `next.config.js` file, and it has a solid developer experience compared to other frameworks like Gatsby. With its extensive resources and examples available, getting started with Next.js is relatively easy.

Building large sites can be challenging due to growing complexity and size. However, the Jamstack architecture allows for pre-built static assets hosted on a CDN, reducing build times when adding new content or sections. Netlify provides infrastructure and features that enable frontend teams to build and host sites efficiently while scaling up. One approach to mitigate long build times is to break down the site into smaller, focused microsites and utilize Netlify redirects and proxies to provide a seamless user experience. By splitting the site into separate microsites for different sections, such as marketing pages, blog, and product catalogue, build times are significantly reduced, and content updates can be made independently by different teams. This architecture also enables hosting each microsite on its own subdomain or using URL paths with proxy rules to recombine content for a uniform user experience. By considering the specific needs of the site, such as frequent edits or dynamic sections, developers can optimize build times and achieve a superior web experience for users.

Gatsby is a powerful tool for building complex websites quickly, but it can be slowed down by certain factors. To optimize Gatsby builds, take advantage of the cache, enable incremental builds, store images in your repository no larger than you need them, only query for data you actually need, and run through the advanced Gatsby build optimization checklist. Additionally, consider disabling file fingerprinting to speed up deploys, ensuring asynchronous requests run in parallel, making Gatsby image build performance faster with parallel processing, skipping image processing altogether, and exploring specialized asset hosting options like Cloudinary. By implementing these optimizations, you can significantly improve your Gatsby build times.

Netlify has improved its build logs, providing clearer information about the current deploy and making it easier to find the necessary details. The new logs include visibility into loaded Build Plugins, their sources, and actions during the build process. This enhanced logging system is automatically available for all sites using the Xenial build image and can be switched in settings if needed. The improved logs are part of Netlify's ongoing efforts to make its platform the best for building fast, reliable websites.

TunnelBear, a company behind VPN services and password manager RememBear, streamlined its developer workflow and site architecture using Netlify, resulting in faster deploys, better scalability, and improved developer experience. The team used Netlify's High Performance Builds, High Performance Edge, and branched deploys to gain control over their environment, reduce costs, and increase speed. With Netlify, TunnelBear was able to deploy sites 10x faster than before, making it easier for the developers to work on new projects and maintain existing ones. The adoption of Netlify also helped the team focus on what they do best - building a great user experience.

Next.js has introduced features that allow for server-side rendering while still adhering to the Jamstack philosophy, but using these features can be complicated by limitations such as query strings in static sites and the need to handle dynamic routing. The `next-on-netlify` package provides a straightforward solution for deploying server-rendered Next.js apps on Netlify, allowing users to take advantage of new features like incremental static re-generation while still maintaining Jamstack principles.

The Cloud Native Computing Foundation (CNCF) is a home for many fast-growing projects on GitHub, including Kubernetes, Prometheus, and Envoy. It aims to foster collaboration between industry developers, end users, and vendors. To achieve this, CNCF created the Cloud Native Landscape, an interactive "image map" covering active and emerging cloud-native technologies. The initial challenge was manual maintenance, which required hours of searching for company news and updating information. Dan Kohn, former CNCF executive director, used Kubernetes' Netlify deployment to keep the site up-to-date, significantly lowering overhead and productivity. With Staging Previews, contributors can see updates in action before they go live, reducing time spent on fixing issues. A nightly script now fetches company information, automatically re-deploying via Netlify, ensuring the Landscape is never more than 24 hours out-of-date. This has lowered overhead and allowed Dan to focus on meaningful tasks, such as organizing events and consulting on projects. Today, Netlify is recommended for all incoming CNCF projects, helping them enjoy the same benefits of scalability, reliability, and global Edge network support.