April 2023 Summaries

Vue.js is a popular JavaScript framework that offers several benefits for building e-commerce stores. Its reactivity system makes it easy to build dynamic and responsive user interfaces, while its performance optimizations ensure fast rendering times and reduced memory usage. Vue 3 also provides ease of use with a gentle learning curve, flexibility in deployment options, and accessibility for developers of all skill levels. Many well-known brands such as Dyson, REI, L'Oreal Paris (USA), Timbuk2, and Shokz have already leveraged Vue to power their e-commerce sites, showcasing its potential for building fast, responsive, and beautiful apps that meet the needs of customers and drive business forward.

The Contenda platform, an AI-powered technical content marketing platform, has integrated with Netlify and Astro to enable the sharing of gated content previews. This solution uses Distributed Persistent Rendering, On-demand Builders, Edge Functions, and Astro's markdown rendering capabilities to create a seamless experience for users. The team built a custom implementation that allows authenticated users to share blog drafts without exposing sensitive information, while also providing public URLs for read-only access. The Share Pear repository is open-sourced, making the technology available for others to build upon or try out for themselves.

Netlify has made its Automatic Deploy Subdomains feature available to all customers with a Pro plan or above. This allows users to set custom domains for their Deploy Previews and branch deploys, enabling quick spin-up of additional environments, sharing of preview links, and ensuring third-party integrations work properly in preview environments. To set up the feature, users need to have at least one custom domain on their production site and a Netlify DNS-managed subdomain. The process can be completed in under 60 seconds by editing the custom domains settings and adding the desired domain or prefix. Once set up, Netlify will automatically generate wildcard DNS records and SSL certificates for each deploy context, making it easy to empower security and IT teams to build policies around company-controlled domains.

To ensure e-commerce sites load quickly even during high traffic spikes, pre-generating site content including Product Detail Pages (PDPs) and serving them from a Content Delivery Network (CDN) can be effective. However, adding dynamic content such as localized prices and currencies may impact performance. Enhancing pre-generated pages on-demand at the edge using Edge Functions provides a solution, allowing for fast page load times, minimized execution errors, reduced energy consumption, and compute costs. This approach can be used with various frameworks like Nuxt, Eleventy, Astro, Hugo, Next.js, and others to generate site pages complete with HTML ready for an Edge Function to address and update, providing a resilient product detail page experience.

This blog post explores the different rendering methods available for e-commerce stores, including Server-side Rendering (SSR), Client-side Rendering (CSR), Static Site Generation (SSG), Stale While Revalidate (SWR), Distributed Persistent Rendering (DPR), and Edge Side Rendering (ESR). The author argues that the simplest solution that achieves their goals is to use SSG as standard and enhance with other rendering modes where necessary. The post also discusses the importance of choosing a rendering approach based on the specific needs of an e-commerce store, including factors such as content team workflow, developer productivity, and customer experience. The goal is to provide a personalized and dynamic shopping experience without sacrificing performance or falling back to traditional SSR or CSR methods.

The rise of composable commerce is transforming the ecommerce landscape, offering brands more flexibility and scalability. According to industry surveys, 95% of those aware of composable commerce believe it's the future, and 71% agree that the approach is beneficial to both technology and business teams. Composable commerce allows for separation between marketing and creative teams, as well as engineering teams, by decoupling the front end from the back end. This approach enables brands to build a commerce API platform, rather than relying on monolithic systems, and can lead to increased scalability, improved conversion rates, and reduced costs. By adopting composable commerce, brands can progressively decouple their systems, starting with one domain or market, and iteratively improving their architecture over time. Experts like Filippo Conforti, co-founder of Commerce Layer, emphasize that composable commerce is not complex, but rather a process that requires a step-by-step approach to achieve significant benefits.

Netlify provides a feature to manage environment variables, making it easier for developers to store configuration details and protect sensitive values. With the new functions for importing/exporting variables in .env format from the Netlify UI, users can move environment variables around in bulk, even if they need them to honor contextual variable values. The `netlify env` commands on the CLI allow for more control over managing variables, such as copying and pasting variables between sites, or using shared variables across all sites in a team. Additionally, owners on Pro accounts and above can set shared environment variables at Team Settings > Environment Variables, making it easier to manage configuration details across multiple sites.

Securing access between services is crucial for enterprises with multiple integrated applications and services that need to communicate and share data. The new integration with Auth0 by Okta enables Netlify users to manage access across multiple services securely, providing a streamlined solution for managing access across complex application architectures involving multiple teams and departments. This integration allows developers to automatically link their sites to Applications and APIs on Okta and add authorization to Netlify Functions using the `withAuth0` method, enabling the creation of SaaS applications on Netlify. The integration also provides an example using the Auth0 SDK for React Single Page Applications, which uses environment variables such as `AUTH0_CLIENT_ID` and `AUTH0_DOMAIN` to configure authentication with Auth0. Additionally, developers can use the `withAuth0` hook in serverless functions to add authorization, requiring authentication and possessing a specific role, such as admin, to access protected resources.

The digital transformation of consumer brands is underway, driven by the need for digital agility and composable architecture. Pressure from market forces, combined with the shift to empowering content teams, has led senior executives to create digital leaders with a mandate to drive change. These leaders are working to identify teams willing to adopt new technologies, aiming to achieve digital transformation via composable architectures. The transition from monolithic to composable is analogous to the shift from on-premise to cloud architectures and has significant implications for market share, revenue, and profit. Consumer brands face common challenges in updating quickly, maintaining performance, and scaling reliability, but there is support for digital transformation initiatives at the highest levels of their companies.

At Netlify, they are reminiscing about their early web experiences and have recently added a new theme to their documentation site that pays homage to the 90s internet. The "Fresh" theme features eye-catching headers and content with a hand-written feel, as well as scrolling text and other planned features such as read counter, engaging imagery, and under construction pages. This new theme is designed to bring back the fun and personality of the early web, with a goal of making the internet an exciting place again.