November 18, 2022
Remix Conf Europe
Online

Remix Conf Europe 2022

The biggest Remix conference in the cloud

Remix Conf Europe is a remote conference focusing on delivering fast and scalable websites deployable to any platform with Remix. Attend talks and workshops that will help you stay up-to-date on modern web standards and cutting-edge user experience.

This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Scaling Up with Remix and Micro Frontends
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Full Stack Components
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Remix Flat Routes – An Evolution in Routing
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
How to Solve Real-World Problems with Remix
195 min
How to Solve Real-World Problems with Remix
Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Build and Launch a personal blog using Remix and Vercel
156 min
Build and Launch a personal blog using Remix and Vercel
Workshop
Robert Pop
Robert Pop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Remix Architecture Patterns
23 min
Remix Architecture Patterns
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
Remixing Your Stack in a Monorepo Workspace
22 min
Remixing Your Stack in a Monorepo Workspace
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.
Remix Persistence With DynamoDB
41 min
Remix Persistence With DynamoDB
DynamoDB is a next-generation key-value database that is low-latency, scalable, and easy to use. It offers advantages such as local development options, a generous free tier, and fast performance. Common misconceptions about DynamoDB being expensive or hard to learn are debunked. The Talk covers topics like basic modeling, separating concerns, working with DynamoDB in Remix, and building a DynamoDB client. Overall, DynamoDB is a powerful database that integrates well with Remix and provides efficient data access patterns.
Remixing How We Give
32 min
Remixing How We Give
Daphne uses Remix for their web application, benefiting from its resilience, error boundaries, cache boundaries, and progressive enhancement. Remix simplifies form submission, authorization, and validation, and allows for easier refactoring and code duplication avoidance. Next and Remix are used together, with Remix serving as the backend for the frontend and handling data aggregation. Remix provides query functions for fetching data, mutations for form data validation and API calls, and custom conventions using the handle export. Migrating to Remix resulted in smaller JavaScript files, faster navigation, and the ability to preload data and assets. The migration process took around nine months and involved mixing Next.js and Remix using Express. Hiring someone to work on Remix is easier than hiring for other frameworks.
Let’s Remix to Localize Content!
36 min
Let’s Remix to Localize Content!
This Talk introduces Remix and internationalization, highlighting the impact and importance of internationalization in software development. It explores different approaches to internationalizing URLs and the use of Remixi18next for internationalization in Remix. The Talk covers the creation and configuration of translated files, as well as the importance of loading translation files before hydration for improved performance. It discusses the challenges and benefits of localization, including the use of folder-level translation and dynamic routes. The Talk also touches on different translation approaches and the importance of considering user experience and understanding in different languages.
How Remix and Prisma Make Frontend Devs Fullstack
22 min
How Remix and Prisma Make Frontend Devs Fullstack
Remix and Prisma enable front-end developers to become full-stack developers by working across different parts of the stack without diving into complexities. They provide a great framework for writing code and interacting with databases, making it easier to be a full-stack developer. Prisma's ORM allows mapping database models to JavaScript or JSON models. Developing a full stack app with Remix requires structuring components and loaders differently, but simplifies development by focusing on one place.
Building a Realtime App with Remix and Supabase
156 min
Building a Realtime App with Remix and Supabase
Workshop
Jon Meyers
Jon Meyers
Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!
Crash Course into Remix & Storyblok
162 min
Crash Course into Remix & Storyblok
WorkshopFree
Facundo Giuliani
Arisa Fukuzaki
2 authors
You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: - Introduction to Remix, atomic design & the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&A
Prerequisite(s): Node.js installed, GitHub account.
Demystifying Web Accessibility
11 min
Demystifying Web Accessibility
Web accessibility ensures that people with disabilities can use and participate equally on the web. Over 15% of the global population has some form of disability. Improving web accessibility can be done using tools like ex-DEV tools and the web disability simulator. Color contrast plays a crucial role in readability, and semantic HTML and tab order help with functionality and user flow. There are additional tools and extensions available for further exploration.
Remixing a Symfony
19 min
Remixing a Symfony
This Talk discusses Harvey's performance journey and how it led to the adoption of Remix. The engineering team addressed scaling and performance issues through backend fixes and frontend improvements. The redesign focused on loading products by category and prioritizing performance. The implementation of Remix resulted in improved performance and a reduction in API requests. The focus on long-term scalability is essential for handling a growing product list and customer base.
The New Frontier: E-Commerce at the Edge
19 min
The New Frontier: E-Commerce at the Edge
Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.
React Remixed
19 min
React Remixed
Remix is a full stack web framework that focuses on the user interface and works back to web standards. It eliminates render and fetch waterfalls in web applications, resulting in improved performance. Remix leverages the foundations of the web and combines them with features like HTTP caching and dynamic server rendering. It allows for progressive enhancement and speeds up the user experience. Remix is a powerful tool for web development with great potential for the future.
Fire-side chat on Remix
28 min
Fire-side chat on Remix
Remix is an open-source project with a modular design and excellent mutation story. It benefits from being part of Shopify and has an open RFC process for feature requests. Remix is influenced by the Hydrogen team and plans to work closely with them. Exciting features include the ability to send promises in responses and support for styling solutions. Remix version 2 will have a roadmap and be framework agnostic. Collaboration with React on server components is important. Livestreams and community discussions are encouraged. The design philosophy focuses on web standards and simplifying code. Remix prioritizes server-side first but also considers static generation. Overall, Remix simplifies code and removes complexity.
Your Personal Remix!
24 min
Your Personal Remix!
Today's Talk discusses Remix and Personalization, highlighting the benefits of personalized experiences in websites and web applications. Different types of personalization are explained, along with the steps to implement a personalization strategy. The use of Remix and Storyblock to implement personalized experiences on a website is demonstrated. The structure of a page with personalized content for different user types is shown, along with the use of cookies to identify user interests. The implementation of a personalization strategy using React components and the Storyblock API is explained.