May 2023 Summaries

An automated DevOps pipeline is a set of automated jobs that run each time you push a change to your sites via Git version control, streamlining your workflow and removing manual effort. After a push to Git is detected, the pipeline triggers a build, bundles the code, runs unit tests or end-to-end tests, and deploys the application automatically when all stages are successful. Netlify provides fine-grained visibility over each step of the pipeline through structured deploy logs, allowing developers to quickly identify issues and get fixes out fast. The deploy process also includes clear indications of completed and failed stages, making it easier to isolate problems and ship products faster.

Assemble, a Seattle-based digital agency specializing in retail tech, has worked exclusively with retailers since 2010 and has seen the benefits of adopting a composable commerce approach in their IT architecture. A composable approach allows for greater agility, faster innovation, and improved performance, enabling brands to adapt quickly to changing market demands. According to Assemble's CTO and VP of Design, Keith Karlick, one key area where retail brands find value is in the speed of business, particularly in fast-fashion industries where product lines are constantly updated. Composable architecture also enables retailers to integrate inventory management systems seamlessly across online and offline channels, reducing returns and improving customer experience. By adopting a modular software architecture, Assemble's clients can adopt new technologies quickly without worrying about platform changes, and the agency itself uses React View, Next.js, or Gatsby for most projects, leveraging Netlify for deployment due to its zero-dev-op capabilities. This approach also offers freedom of choice, allowing brands to experiment with new technologies without being locked into legacy systems. Assemble's experience highlights that composable architectures are not just for upstart companies but also for the biggest players in the world, enabling them to provide a truly excellent customer experience.

Salling Group, Denmark's largest retailer, faced challenges in its monolithic architecture, including downtime, slow speed to market, and duplicate implementations. To address these issues, they adopted a composable tech stack with headless e-commerce, leveraging Netlify as their platform for serverless functions and Algolia for search engine application. This transformation has led to improved frontend development hours, boosted time-to-market speed, encouraged an open source approach among engineers, and enabled faster incremental builds and experimentation on less-trafficked sites. The company's digital team now benefits from a more flexible architecture that allows them to build tech stacks with applications performing specific functions, resulting in enhanced developer productivity and customer satisfaction.

Netlify's Continuous Integration and Continuous Deployment (CI/CD) approach enables teams to deliver high-quality software rapidly and consistently. With seamless integration with Git version control and a robust CI/CD pipeline, Netlify automates builds, runs tests, and deploys code changes to a staging environment or Deploy Preview. This allows developers, QA teams, and stakeholders to preview and test changes before promoting them to production. The added benefit of CI/CD is integrating with other tooling and systems to automate entire end-to-end business workflows, saving manual effort. Webhooks are used to communicate between applications in real-time, sending automated notifications or data from one application to another. Using webhooks can streamline CI/CD automation by automating notifications, chatOps, issue tracking, test result integration, security and compliance checks, deployment orchestration, performance monitoring, documentation updates, change management processes, and custom integrations. These automation capabilities help teams focus on building products instead of losing time on repetitive administrative tasks.

Vue is a top contender for frontend frameworks due to its vibrant community, approachability of codebases, and flexibility in adapting to projects of all sizes. It can be used as a library, traditional single-page application, static site, or with server-side rendering, making it suitable for various software architecture patterns. With the help of meta-frameworks like VitePress, Nuxt 3 + Nuxt Content, and Astro, developers can leverage Vue to build content-focused sites without interactivity, while still maintaining performance and SEO benefits. Additionally, Vue's hybrid approach with Nuxt 3's Route Rules enables choosing specific rendering strategies for different routes.

Netlify has integrated its Deploy Preview workflow with Xata, a serverless database designed for developer experience and ease-of-use. This integration allows developers to create temporary copies of their databases with each pull request and Deploy Preview, making it easy to iterate on applications without impacting production data. The Xata database provides additional functionality such as search, similarity/vector search, and AI capabilities, making it a great option for Jamstack sites. With this integration, developers can safely experiment with new features and schema changes in an isolated environment, ensuring minimal impact on their end-users and customers. The process of integrating Xata with Netlify's Deploy Preview workflow is straightforward, requiring only a few steps to connect the database to a repository and set up the integrations.

Large businesses and enterprises invest heavily in software and infrastructure, but this often leads to complex products with limited agility. The complexity of these products can make it difficult for engineers and technical architects to find what they need, leading to frustration and a high cost of change. Modularization brings agility by allowing each service to be selected for its merits, rather than being bundled together as part of a single product. This approach benefits from software engineering principles such as tight cohesion and loose coupling, and can create robust, scalable, but also agile solutions. The rise in popularity of composable or modular approaches is driven by the need for specialist expertise, which can be expensive and high-risk to retain in-house. By using modular products, businesses can access domain experts' wisdom, SLAs, compliance, and economies of scale, while avoiding vendor lock-in and creating a healthier system.

In this post, the author discusses how to run an A/B test on a more granular level than just page layouts, without creating new page layouts and rewriting URLs. The goal is to allow content authors to stay in control of the content while enabling developers to write code for the test. This can be achieved by using a Content Management System (CMS) with separate areas or spaces that can be fetched with different API keys and access tokens. The author provides an example of how to A/B test messaging on a home page hero banner, using Netlify Edge Functions, Cloudflare's HTMLRewriter, and environment variables. The code example demonstrates how to assign users to test buckets using browser cookies, fetch data from the CMS at runtime, modify the HTTP response using HTMLRewriter, and track test variants in analytics tools. The author also provides bonus content on using environment variables to control which A/B tests are running.

The text discusses the evolution of Content Management Systems (CMSs) from custom, monolithic systems to modern, modular architectures. In the 2000s, custom CMSs were common, but they didn't scale as businesses grew and new technologies emerged in the 2010s. The rise of headless CMSs and decoupled front-end architectures led to the standardization of modern CMSs as a service, providing content modeling, page building, and publishing capabilities. However, this also created challenges, such as managing multiple tools and services. By the late 2010s, technical architects began breaking out each business function into separate cloud-based SaaS services, leading to the development of modular web design architecture. This approach combines API-based services with modern JavaScript development environments to build high-performing websites, optimizing for growth and adaptability. Modular web design offers benefits such as mix-and-match building blocks, faster shipping and iteration, and maximized performance and productivity.

Conversion is the ultimate goal of marketing campaigns, and achieving it requires great campaigns that can be quickly launched to keep up with changing circumstances. Traditional marketing approaches often result in irrelevant campaigns by launch day due to the rapid pace of change in the world. Using a monolith architecture can make it difficult to adjust campaigns mid-flight, leading to long launch times and reduced flexibility. In contrast, using web technologies allows for faster ideation-to-execution time, enabling marketers to quickly respond to changes and optimize their campaigns for relevance. This is exemplified by Gatsby co-founder Sam Bhagwat's experience with a 5-week campaign that transformed the user experience, highlighting the importance of web development speed in driving successful marketing outcomes.

Netlify Edge Functions allow for A/B testing by splitting website traffic between two versions of a page or user journey using browser cookies to assign users to test buckets. This approach can modify statically pre-generated pages at the time of the request, avoid the "flash of unstyled content" (FOUC) issue, and provide consistent experiences throughout browsing sessions. The Edge Functions can be used with any front-end framework or no framework at all, making it a flexible solution for A/B testing. To implement this, users need to create an edge-functions directory in their Netlify project, write the necessary code to assign users to test buckets and decide which page layout is served based on the cookie values, and track test variants using analytics tools like Google Analytics.

To avoid finding out that someone has squatting on your desired username, an up and coming social media platform called Bluesky is implementing a simple solution: using your custom domain as your username. This approach eliminates the issue of identity and verification problems associated with traditional usernames. To achieve this, users need to update their Bluesky handle to leverage their custom domain with Netlify, which requires setting up DNS records and verifying them on the Bluesky platform. With these steps, users can now create branded Bluesky accounts without worrying about someone squatting their desired handle, allowing for a more secure online identity.

Wix, a well-established no-code site building platform, is launching its headless solution, Wix Headless, which provides businesses with the flexibility to use their own frontend tech stack and developer workflow. This new offering is integrated with Netlify, allowing developers to build and deploy scalable solutions for Wix users. The integration starts with Wix's Bookings software and includes Next.js templates, React 18 Server Components, TanStack Query, and Tailwind CSS. To simplify the deployment process, Wix has integrated its "Deploy to Netlify" flow within the user experience, allowing seamless auto-configuration of environment variables for the headless client ID. This partnership aims to cater to freelancers and agency developers who require more flexibility in their site-building tools.

Ask Netlify is an innovative tool designed to enhance the developer experience by leveraging advances in AI, specifically Large Language Models (LLM), to provide tailored answers to user queries about Netlify's documentation, CLI commands, API endpoints, and support forums. This feature allows users to type in questions and receive relevant information without searching through extensive text, offering a more streamlined and efficient approach to obtaining information. Ask Netlify can also track previous questions for seamless follow-up interactions, and it includes links to sources for further exploration. To prevent spam and misuse, users must log in with their Netlify accounts to access this feature, although traditional search capabilities remain available for those who prefer not to log in.

We invite you to participate in our fourth annual Web Development Survey, which aims to learn more about the global community of web developers by gathering insights on their work, tools, and interests. The survey will cover topics such as AI/ML services, browser-native web components, and crypto usage, helping to navigate the complex landscape of modern web development choices. By participating, you'll contribute to a better understanding of the community and help others make informed decisions about their own projects, with the results shared freely online and at conferences throughout the year. The survey is open for 30 days and welcomes developers, designers, product marketers, and anyone else involved in web development, regardless of location or experience level.

Netlify's composable architecture makes it well-suited for headless CMS options, which provide back-end UI for editing and formatting content, with an API that powers the front-end. The popularity of CMS usage grows as organizations scale, from 1.4% of free-tier users to 56% of Enterprise customers using a CMS. Sanity is the favorite among solo developers at the free tier, while Contentful dominates the self-serve and Enterprise tiers, especially for larger sites with more frequent deployments. The choice of CMS can be influenced by web framework (Gatsby) and site size, with Contentful's popularity increasing as sites grow in scale. Overall, Netlify's ecosystem is diverse and strong, with a focus on helping companies smooth team workflows and ship content faster as they scale up.

Composable commerce is becoming increasingly popular as more brands move away from legacy platforms to gain flexibility and reduce costs. According to commercetools' chief strategy officer, Kelly Goetsch, many D2C retailers are clamoring for an e-commerce approach that offers multi-vendor headless commerce builds, allowing them to make changes quickly and iterate with functionality. Brands are also looking to address challenges such as outdated technology, slow performance, and high costs by adopting composable solutions. Goetsch notes that the benefits of composable commerce include greater agility, lower costs, and improved performance, with many retailers achieving significant gains when they switch to headless components. As a result, commercetools is seeing buyers turn more and more to composable solutions, with Kelly Goetsch observing that MACH-based (Microservices-First Architecture, Cloud-Native, Headless, API-Driven) approaches are becoming increasingly popular.

In a recent Netlify roundtable webinar, Eric Feige, Managing Director of Strategy and Growth at VShift, shared insights on navigating digital transformation within regulated industries using composable technology. The discussion, led by Sam Bhagwat and Min Kim of Netlify, highlighted the unique challenges faced by non-IT business executives in these sectors, such as the need for rapid deployment of digital solutions while adhering to regulatory timelines. Feige emphasized the advantages of composable and decoupled architectures, which allow businesses to quickly adapt and innovate by leveraging modular and interchangeable digital components. Through a 60-90 day jumpstart plan, organizations can achieve meaningful progress by focusing on specific business objectives and aligning cross-functional teams. The conversation also underscored the importance of collaboration, change management, and overcoming organizational barriers to drive successful digital projects. Feige illustrated these concepts with a case study from VShift's experience in creating a virtual toolkit for a retirement plan client during the COVID-19 pandemic, demonstrating the agility and effectiveness of composable technologies in meeting urgent business needs.

Trying to launch new web experiences in a regulated industry like finance, insurance, or healthcare? These organizations have more stakeholders and require more buy-in than the early adopter crowd. Implementations can often look different, both in terms of project structure, technical stack, and governance that these projects can require. VShift's Managing Director of Strategy and Growth Eric Feige shares his experience and playbook for successfully driving change quickly in regulated industries by finding the right project with a willing executive sponsor, not reinventing the wheel, and co-creating the vision through UX sessions and stakeholder governance. These techniques can help drive change rapidly in processes typically geared around shipping in years, not months.