Name: Remix Conf Europe 2022
Start: 2022-11-18T15:00:00.000Z
End: 2022-11-18T20:00:00.000Z

Varun

Lera

JSNation Conference 🗓 June 1-5, 2023

Oscar Pagani

Ricardo Machado

David Barry

Žiga Šinko

Nils BUntenbeck

Charles

Ian Sutherland

Phiroze 

Hannah Vivian Shaw

Mel Moe

Alex Perez

Norm Crandall

Riccardo

Filip Verswijver

Lia Moreira

Rishi Narang

Chris McDonald

Stivi Ndoni

Karine Hiulumian

Vitor Barbosa

Tim Bakkum

Artur Nikitsin

Mailing Delgado Medina

Paulo Jorge Sousa

Ricardo Del Rio Rubial

Mohamed Sibras

Xin Ning

Matej Lednicky

Zain Fathoni

¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.

Escalando con Remix y Micro Frontends

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.

Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.

Scaling Up with Remix and Micro Frontends

Adrien Baron

Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo). En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.

Componentes de Full Stack

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 is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example). In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Full Stack Components

Kent C. Dodds

Esta charla presenta la nueva convención Flat Routes que probablemente será la predeterminada en una futura versión de Remix. Simplifica la convención existente y también te brinda nuevas capacidades.

Remix Flat Routes – Una Evolución en el Enrutamiento

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.

This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.

Remix Flat Routes – An Evolution in Routing

Michael Carter

Remix ofrece una increíble flexibilidad y puede ser desplegado en cualquier lugar donde se ejecute JavaScript. Pero, ¿cómo encaja Remix en el panorama de aplicaciones más amplio de una organización? Remix proporciona una gran utilidad, pero ¿cómo aprovecharla al máximo? ¿Qué cosas deberían manejarse dentro de Remix y qué cosas serían mejor hacer en otro lugar? ¿Deberíamos usar el adaptador express para agregar un servidor WebSocket o debería ser un microservicio independiente? ¿Cómo integrarán las organizaciones empresariales Remix en sus pilas actuales? ¡Hablemos de patrones de arquitectura! En esta charla, quiero compartir mis pensamientos sobre cómo integrar mejor Remix en una pila (empresarial) más grande.

Patrones de Arquitectura Remix

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.

Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

Remix Architecture Patterns

Andre Landgraf

Remix entró en escena con una visión única y refrescante sobre cómo desarrollar en la web. Pero, ¿cómo lo integras en tu ecosistema existente de aplicaciones? ¿Quieres probar Remix en un proyecto pequeño o quieres ir a fondo, pero es complicado hacer una migración completa desde tu aplicación React existente? En esta charla, vamos a explorar cómo una organización de código basada en monorepo puede ayudar a integrar Remix con tu infraestructura existente de React y TypeScript, facilitando la reutilización de código y un camino de migración hacia Remix.

Remixando tu Stack en un Espacio de Trabajo Monorepo

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 entered the stage with a unique and refreshing take on how to develop on the web. But how do you integrate it into your existing ecosystem of applications? Do you want to test-drive Remix on a small project, or do you want to go full-in, but it is tricky to do a big-bang migration from your existing React app? In this talk, we're going to explore how a monorepo-based code organization can help integrate Remix with your existing React and TypeScript infrastructure, facilitating high code reuse and a migration path to Remix.

Remixing Your Stack in a Monorepo Workspace

Juri Strumpflohner

Remix es el mejor marco de trabajo de React para trabajar con la segunda característica más importante de la web: los formularios. (Los anclajes son más importantes). Pero construir formularios es la parte divertida: la parte complicada es lo que sucede cuando un consumidor web envía un formulario. No la lógica de validación del lado del cliente, sino la lógica básica del backend para crear, leer, actualizar, destruir y listar registros en una base de datos duradera (CRUDL). Las bases de datos pueden ser intimidantes. ¿Cuál elegir? ¿Cuáles son los compromisos? ¿Cómo modelar los datos para consultas rápidas? En esta charla, aprenderemos sobre el increíblemente poderoso AWS DynamoDB. Dynamo promete una latencia de un solo dígito de milisegundos sin importar cuántos datos tenga almacenados, la escalabilidad es completamente transparente y viene con un generoso nivel gratuito. Dynamo es un nivel diferente de base de datos, pero no tiene por qué ser intimidante.

Persistencia de Remix con 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.

Remix is the best React framework for working with the second most important feature of the web: forms. (Anchors are more important.) But building forms is the fun part: the tricky part is what happens when a web consumer submits a form! Not the client side validation logic but the brass tacks backend logic for creating, reading, updating, destroying, and listing records in a durable database (CRUDL). Databases can be intimidating. Which one to choose? What are the tradeoffs? How do I model data for fast queries? In this talk, we'll learn about the incredibly powerful AWS DynamoDB. Dynamo promises single-digit millisecond latency no matter how much data you have stored, scaling is completely transparent, and it comes with a generous free tier. Dynamo is a different level of database but it does not have to be intimidating.

Remix Persistence With DynamoDB

Brian LeRoux

- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás

Cómo Resolver Problemas del Mundo Real con Remix

Welcome to my inaugural remote workshop for RemixConf Europe. We'll cover error logging, multi-page forms, patching Remix, and multi-tenant apps with Prisma. We'll discuss expected and unexpected errors, code and error handling, and server-side error logging. Additionally, we'll explore handling form fields and errors, using typed JSON and overriding default functions, and managing data for multi-page forms. We'll also touch on storing session and form data, using standard fetch and form data in a Remix app, and multi-tenant Remix apps with Prisma. Finally, we'll delve into patching Remix to overcome limitations and testing with Remix and Playwright.

- 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

How to Solve Real-World Problems with Remix

Una revisión de cómo estamos utilizando Remix en Daffy.org para cambiar la forma en que las personas donan a organizaciones benéficas. Hablaremos sobre por qué decidimos usar Remix, cómo lo hemos utilizado y migrado desde nuestra aplicación frontend anterior, y algunos patrones y bibliotecas que hemos desarrollado internamente.

Remixando Cómo Donamos

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.

A review of how we're using Remix at Daffy.org to change the way people give to charities. We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally.

Remixing How We Give

Sergio Xalambri

¿Alguna vez has deseado tener un enfoque flexible para localizar tu contenido y escalar fácilmente? Únete a mi charla y te mostraré múltiples estrategias para traducir y localizar tu contenido con Remix. Compartiré contigo opciones flexibles de rutas dinámicas desde Remix para generar contenido localizado de manera práctica, incluyendo una demostración de enfoque headless y cómo escalar tu solución en el futuro. ¡Vamos a "Remixear" tu contenido para localizarlo!

¡Vamos a Remixear para Localizar Contenido!

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.

Have you ever wished to have a flexible approach to localize your content to scale easily? Join my talk, and I'll show you multiple strategies to translate and localize your content with Remix. I'll share with you flexible dynamic route options from Remix to generate localized content in a practical way, including a headless approach demo and how to scale your solution in the future. Let's "Remix" to localize your content!

Let’s Remix to Localize Content!

Arisa Fukuzaki

Supabase y Remix hacen que sea fácil construir aplicaciones fullstack. En este masterclass, vamos a aprender cómo usar Supabase para implementar autenticación y autorización en una aplicación en tiempo real con Remix. Únete a Jon Meyers mientras construye esta aplicación desde cero y demuestra cómo puedes aprovechar el poder de las bases de datos relacionales!

Construyendo una aplicación en tiempo real con Remix y Supabase

Today's Workshop focused on building a real-time chat application with Superbase and Remix. The workshop covered various topics such as creating Superbase tables and data, fetching data from Superbase, enabling row-level security, adding Superbase authentication with GitHub, and troubleshooting authentication and data access. The workshop also touched on mutating data in Superbase, implementing real-time subscriptions, and deploying the application. Additional resources and courses were mentioned for further learning. Overall, the Workshop provided a comprehensive overview of building a real-time chat application using Superbase and Remix.

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!

Building a Realtime App with Remix and Supabase

Jon Meyers

Remix brinda a los desarrolladores el poder de escribir su código frontend y backend en un solo lugar y en un solo lenguaje, lo cual reduce significativamente la barrera fullstack para los desarrolladores frontend y los desarrolladores más nuevos. La pieza restante, sin embargo, es la base de datos. Agrega Prisma a la mezcla y tendrás una experiencia fullstack poderosa con una curva de aprendizaje muy baja. En esta charla, echaremos un vistazo a la increíble experiencia de desarrollo que obtienes cuando combinas los dos.

Cómo Remix y Prisma convierten a los desarrolladores frontend en desarrolladores 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.

Remix gives developers the power to write their frontend and backend code in one unified location and language, which drops the fullstack barrier significantly for frontend devs and newer developers. The remaining piece, however, is the database. Throw Prisma into the mix and you've got a powerful fullstack experience with a very low learning curve. In this talk, we'll take a look at the amazing developer experience you get when you combine the two.

How Remix and Prisma Make Frontend Devs Fullstack

Sabin Adams

Tal vez ya hayas leído sobre Remix. Probablemente ya lo hayas usado, y recientemente hayas escuchado mucho sobre los CMS sin cabeza. En este curso rápido, pondremos todas las piezas juntas y te mostraré por qué Storyblok en combinación con Remix es la mejor opción para tu próximo proyecto. ¡Pasa y pruébalo tú mismo! Tabla de contenido:- Introducción a Remix, diseño atómico y el mundo sin cabeza- Configuración del entorno- Creación de páginas y comprensión de cómo funcionan las rutas dinámicas con splat routes- Consejos futuros y preguntas frecuentes Prerrequisitos: Node.js instalado, cuenta de GitHub.

Curso Intensivo de Remix y Storyblok

Arisa and Facundo introduce themselves and provide an overview of Remix, a full-stack framework. They explain the atomic design principle and the benefits of using a headless CMS. They discuss creating components in Storyblock and configuring routes in Remix. The workshop covers real-time editing, rendering rich text, and dynamically fetching data from the Storyblock API. The session concludes with a Q&A and an invitation to connect on Twitter for further discussion.

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 &amp; the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&amp;A Prerequisite(s): Node.js installed, GitHub account.

Crash Course into Remix & Storyblok

Facundo Giuliani

En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog. Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente. Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog

Construye y lanza un blog personal usando Remix y Vercel

Remix is a web platform framework that simplifies development and enhances web features. It supports multiple frameworks and offers features like HTTP caching and micro frontends. Remix can handle complex applications and provides tools for data handling, search functionality, and customizing the 404 page. It can be deployed on various platforms and offers options for monitoring and deployment. Overall, Remix is a powerful framework that improves app performance and simplifies the development process.

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

Build and Launch a personal blog using Remix and Vercel

Robert Pop

React y el ecosistema de JavaScript parecen estar cambiando constantemente. Dondequiera que miremos, hay nuevas bibliotecas y frameworks. Estas nuevas herramientas siempre llevan a aprender conceptos que a menudo son conocimientos no transferibles. ¿Qué tal si te digo que al aprender las API web estándar, volver a aprender la web y obtener un montón de conocimientos transferibles, también puedes comenzar a usar una fantástica nueva adición al ecosistema de React: Remix!

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.

React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix!

Daniel Afonso

La accesibilidad es una herramienta decisiva para hacer de Internet un lugar más inclusivo, es absolutamente crucial y a pesar de la creencia popular de que solo un pequeño grupo de usuarios se ve afectado, beneficia a cada uno de nosotros. Después de una breve introducción, nos sumergiremos en herramientas prácticas para crear sitios web más accesibles y probar los problemas de accesibilidad web más comunes. ¡Hagamos que la web sea más inclusiva, una página a la vez!

Desmitificando la Accesibilidad Web

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.

Accessibility is a decisive tool to make the internet a more inclusive place, it is absolutely crucial and despite the popular belief that only a small user group is affected, it benefits every single one of us. After a brief introduction, we will dive into practical tools to create more accessible websites and test for the most common web accessibility issues. Let's make the web more inclusive, one page at a time!

Demystifying Web Accessibility

Josefine Schaefer

En esta charla exploraré la evolución de la infraestructura de comercio electrónico desde los servidores tradicionales co-ubicados hasta la nueva frontera de la computación sin servidor y en el edge, y cómo se integran las herramientas modernas de desarrollo como Remix y Vendure.

La Nueva Frontera: Comercio Electrónico en el 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.

In this talk I'll explore the evolution of e-commerce infrastructure from traditional co-located servers to the new frontier of serverless and edge computing, and how modern developer tools like Remix and Vendure fit in.

The New Frontier: E-Commerce at the Edge 

Michael Bromley

A finales de 2020, realicé una prueba de Lighthouse en una página de contenido simple en Harvie, nuestra plataforma de gestión de granjas y aplicación Symfony, y obtuve una puntuación de rendimiento de 31/100. El paquete de JavaScript, las solicitudes de API, las consultas a la base de datos, incluso con una interfaz de usuario mínima para renderizar, tenían una puntuación base en los treinta. Junto con los comentarios de los clientes, esto ayudó a catalizar un compromiso renovado con el rendimiento en Harvie. A través de numerosas discusiones, recorrimos cada paso de la carga de la página, desde la conexión en red hasta el renderizado, e identificamos dónde podríamos mejorar. Después de un año de reescrituras y actualizaciones, nuestro último obstáculo para el rendimiento general era nuestro frontend. Habíamos estado convirtiendo nuestras plantillas de twig de Symfony en componentes de React SPA y caímos en el problema común de crear "cascadas de solicitudes", mientras nuestro usuario tenía que mirar una pantalla de carga. Necesitábamos un cambio, y para nosotros, eso fue Remix. En esta charla, te guiaré a través del viaje de nuestro equipo con el rendimiento y cómo Remix se ha convertido en una progresión natural de eso.

Remixando un 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.

In late 2020, I ran a Lighthouse test on a simple content page on Harvie, our farm management platform and Symfony app, and received a performance score of 31/100. The JavaScript bundle, the API requests, the database lookups, even with minimal UI to render, had a baseline score in the thirties! Along with customer feedback, this helped to catalyze a renewed commitment to performance at Harvie. Through numerous discussions, we walked through each step of page load, from networking to rendering, and identified where we could improve. After a year of rewrites and upgrades, our remaining detriment to overall performance was our frontend. We had been converting our Symfony twig templates into React SPA components and fell into the common problem of creating "request waterfalls", while our user had to stare at a loading screen. We needed a change, and for us, that was Remix. In this talk, I'll walk you through our team's journey with performance and how Remix has become a natural progression of that.

Remixing a Symfony

Emily Kauffman

Charla sobre 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.

Fire-side chat on Remix

Chance Strickland

Aquí y allá, la gente habla de "Personalización". Los creadores de contenido, los especialistas en marketing, los diseñadores y los propietarios de productos evalúan las posibilidades y alternativas para manejar escenarios personalizados mientras ofrecen experiencias poderosas a los usuarios. Y nosotros, los desarrolladores, tenemos algunas formas de ayudar con eso. Hablemos sobre la personalización, los beneficios, los desafíos y cómo podemos gestionar y ofrecer experiencias personalizadas en nuestros proyectos de Remix.

¡Tu Remix Personal!

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.

Here and there, people talk about "Personalization". Content creators, marketers, designers, and product owners evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. And we, the developers, have some ways to help with that. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences in our Remix projects.

Your Personal Remix!

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.