Vue.js Live Conference

Vue.js London 2023

This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.

A Saga of Web Rendering Woes

Alba Silvente Fuentes

React Summit Remote Edition

React Summit Remote Edition 2021

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Tom Preston-Werner

React Day Berlin

React Day Berlin 2022

This Workshop on Web Development covers topics like static and dynamic web pages, the Jamstack approach, content management systems, and the usage of Storyblock. It emphasizes the benefits of having a system, the integration of Storyblock with Next.js, and the creation of dynamic components. The Workshop also discusses configuring Storyblock, connecting it with Next.js, and deploying the application on Vercel. It concludes with a focus on the preview environment, creating blog components, and the deployment process.

You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself! - In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok. Prerequisites- <a href="https://code.visualstudio.com/">Any Text . Visual Studio Code recommended</a>- <a href="https://nodejs.org/en/download/">Node.js LTS</a>- <a href="https://yarnpkg.com/">NPM or Yarn</a>- <a href="https://github.com/">GitHub account</a>- <a href="https://vercel.com/">Vercel account</a>- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel

Crash Course into the Jamstack with Next.js & Storyblok

Arisa Fukuzaki

Chakit Arora

React Advanced

React Advanced 2022

The Talk discusses the concept of segmented rendering for personalization in web development. It explores different rendering techniques, including server-side rendering, static seed generation, and dynamic rendering. The issue of rich guests and poor customers is addressed through segmented rendering. The implementation of segmented rendering with Next.js involves a lightweight proxy server and URL rewriting. The Talk also highlights the benefits of invisible server-side rendering and suggests a future unified API for server rendering.

If you think that static rendering is limited to generic and public content that is the same for every user of your website, this talk is for you. Segmented Rendering is a new pattern for the Jamstack that lets you personalize content, statically, without any sort of client-side rendering or per-request Server-Side Rendering. Get the best possible performances for use cases such as theming, internationalization, A/B testing, multi-tenancy, and start treating your users right!

Treat your users right with Segmented Rendering

Eric Burel

React Advanced 2021

Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.

Static sites are great. They are fast, cheap, secure, and easy to maintain. But generating static assets is a process that takes more and more time while our site gets bigger. We will talk about ISR, a feature that Next.js framework offers us to generate static pages at runtime. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Incremental Static Regeneration: Static Sites on Steroids

Facundo Giuliani

Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.

Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How do Localise and Personalize Content with Sanity.io and Next.js

Simeon Griggs

Vue.js London Live 2021

Today's Talk discusses advanced site rendering patterns in the JAMstack, including the benefits and challenges of using this approach. It explores solutions like incremental builds, microsites, and incremental static regeneration to improve build times and performance. The Talk also introduces distributed persistent rendering and Gatsby v4 as new solutions to enhance static site generation and server-side rendering.

In this session, I'll go over these patterns (Sharding, ISR, DPR, DSG) and show our viewers and 2million+ other Jamstack developers how to leverage them to build large sites without the overhead on lengthy build times. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Site Rendering Patterns on the Jamstack

Ekene Eze

This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.

This will be fast &amp; furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

DevOps.js

DevOps.js Conf 2021

This is an introduction to the Jamstack Deploy project, which measures and tests popular cloud providers for the Jamstack architecture. The project focuses on performance and uses Checkly as a monitoring tool. The speaker plans to add more stats and tools for comparison and invites users to contribute to the project.

Our web app is finally ready to go live but which deployment tool should we use? With the rise of JAMstack, we have a multitude of options from Vercel, Netlify, to Firebase. Certainly, performance is key for us so we want to know which one is the fastest. In this talk, we will do a real-world benchmark comparing the most known JAMstack deployment options and discuss pros and cons. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JAM Stack Deployment Platforms and Performance Comparison

Nacho Anaya

JSNation Live

JSNation Live 2021

The Workshop on JAMstack e-commerce introduces the concept of JAMstack and headless commerce, highlighting their benefits in enhancing the shopping experience. The workshop covers the process of building a static products page using the headless commerce architecture and Commerce Layer. It also explores configuring the application, adding product details and variants, and working with the UI. Troubleshooting authentication issues and the process of creating orders are also addressed. The workshop concludes by emphasizing the advantages of the headless commerce architecture and providing additional resources for building storefronts.

Digital commerce has changed, and there is an increasing demand for faster and kite efficient solutions. In this workshop, you'll learn about the evolution of ecommerce and how Jamstack and headless commerce evolves shopping experiences on the web. We will explore the basics of headless commerce building a minimal Jamstack ecommerce product page with static content, HTML5, CSS, and Javascript. Finally, we will integrate Commerce Layer for headless commerce capabilities and deploy our application to Netlify. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Jamstack eCommerce 101

Bolaji Ayodeji

This workshop focuses on launching an e-commerce experience on Next.js and Netlify, using the useShoppingCart library for shopping cart functionality. The workshop covers project setup, dynamic routes, integration with Stripe, Netlify functions, and authentication. It also explores theme UI, Netlify features, and Netlify forms. The presenter mentions the availability of a Gatsby version of the workshop and highlights Next.js Commerce as a template for integrating with popular e-commerce tools. Overall, the workshop provides a comprehensive overview of building an e-commerce site using Next.js and Netlify.

Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

E-commerce on the Jamstack with NextJS and Netlify

Nick DeJesus

React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.

Netlify CEO and co-founder Matt Biilmann reflects on the history of React, the promises of the Jamstack, and the complexity that can creep into developer workflows if we don't continue to defend simplicity over time. In this lightning talk, Matt describes the trade-offs developers face to deliver large sites and introduces a new idea for a more scalable future solution. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Keeping It Simple

Mathias Biilmann Christensen

Headless CMSs offer freedom of choice in front-end frameworks and backend APIs, focusing on user experience and integration with third-party solutions. They provide a good developer experience and are an important part of the web ecosystem. A headless CMS allows project structuring, technology/API selection, and UI extension. Consider features like translation, workflow setup, content scheduling, editing experience, and integration capabilities when choosing a CMS.

Fabulous secret powers were revealed to me the day I discovered Jamstack and said "By the power of Headless, I have the power!" Find out the key features of any CMS and why the headless is the new buzzword, which everybody wants to use. I will take you on the journey through the land of headless CMS and show you why you should consider headless CMS for your next project. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

By the Power of Headless!

This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.

When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#jamstack