Remix vs Next.js
An objective comparison between Remix and Next.js
An objective comparison between Remix and Next.js
WIP
Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again.
HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.
The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.
ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment
Learn more at https://remix.run
“The edge” isn’t just about static assets anymore. It’s increasingly becoming a place for dynamic assets resulting from compute. Remix is taking full advantage of this next generation of edge computing.
Check out the new v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Indie stack 👉 https://github.com/remix-run/indie-stack
Spend A Full Day Immersed in Remix with Kent C Dodds
The web ecosystem can feel like it moves too fast sometimes. We're sensitive to that at Remix so we've designed it with your future in mind. Get good at Remix, get better at the web.
This podcast will inspire you to build excellent user experiences for the web. Sometimes with Remix, the modern web framework.
Learn more at https://remix.run
Remix relies on CDNs and cache control headers to get the best web performance possible. Here we’ll compare various caching strategies, including Static Site Generation and Increment Static Regeneration, and compare the tradeoffs.
The first thing you usually need for any route is a way to load data from the server. Remix makes it easy with loaders. Learn more at https://remix.run/docs
While Remix and browsers model mutations as form navigations, `useFetcher` allows you to get the same programming model without causing a navigation. This allows apps to add pending and optimistic UI to multiple elements at the same time. Concurrent Mutations! Learn more at https://remix.run
Instead of adding pending states and busy indicators while we wait for the server to process a mutation, we already know what the UI will look like when its done. Skip the spinners with Optimistic UI! Learn more at https://remix.run
Maintaining a stack with multiple programming languages can drastically increase the cognitive load of a team. Unifying the frontend and the backend under a single language has always been a tantalizing prospect. With Remix this becomes an achievable goal, however, migrating without a big rewrite is always challenging, while migrating with a big rewrite is often disastrous. This is the story of how we are planning a migration feature by feature, using an integrated authentication system that works on both our Rails backend and on the Remix server. We also disastrous leveraged resource routes to proxy the old application and integrate everything under the same domain, making the back and forth between legacy and rewritten features seamless. Speaker bio: Diogo Biazus has been a software developer since the late 90s. Since then, he has also worked as an open-source contributor, conference organizer, PostgreSQL instructor and consultant, systems integrator (yay, EDI!), "the DevOps guy", and team lead. He has contributed to PostgREST (https://github.com/PostgREST/postgrest) and published PostgreSQL tools such as postgres-websockets (https://github.com/diogob/postgres-websockets), postgres-copy (https://github.com/diogob/postgres-copy), and hasql-notifications (https://github.com/diogob/hasql-notifications). He now focuses on improving DX at Seasoned. Diogo Biazus' GitHub: https://github.com/diogob Repo: https://github.com/SeasonedSoftware/remix-migration
What is Remix? > Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. > -- remix.run But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better. And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more! If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read! Check out this repo to see the project code for this course
Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!
We've introduced the concept of future flags to give you a smooth upgrade path for your Remix app.
A new package helps you upgrade from React Router v5 to v6 incrementally
Spend A Full Day Immersed in Remix with Kent C Dodds
Recorded live at Reactathon 2022. Learn more at https://reactathon.com Shipping to the Edge The landscape of the web has evolved drastically since the first website was published to the World Wide Web in 1991. Over the years, the pendulum has swung from servers rendering HTML to JavaScript-heavy clients and now it's swinging toward something more in the middle.What about the web today is enabling us to overcome the shortcomings of the web of the past? In this talk, we'll get a little peak into the history of each of these stages of the web and what that means for anyone building on the web platform in the future. About Kent C. Dodds Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and React. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app
Recorded live at Reactathon 2022. Learn more at https://reactathon.com When To Fetch: Remixing React Router We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too: data fetching, data mutations, busy spinners, optimistic UI, error handling, form state, network race conditions, user event interruptions, and all the code that holds it together gets pretty difficult! As we've built Remix, we've gotten a lot of practice leaning on React Router's nested route abstraction to solve all of these problems all at once. Now, millions of React Router apps in production can get the same benefits because we've moved the responsibility of knowing When To Fetch into React Router itself! About Ryan Florence Ryan is the co-founder of Remix, co-creator of React Router, and co-founder of React Training. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app
Remix Conf Recap That’s a wrap for Remix Conf 2022! A big shout out to everyone who attended the conference, spoke at the conference, planned the conference, filmed the conference, or had anything else to do with the conference whatsoever. It was a huge success! Workshop The Remix...
Love or hate Tailwind, one thing it gets right is only shipping the CSS _you_ use. However, you still have to ship your **entire** site's CSS, no matter how big it gets or what page the user is on. Love or hate Remix (wait, who hates Remix?), one thing it does best is only shipping the CSS each _page_ needs. Remix also removes stylesheets when you navigate away, which avoids clashing styles and class names. What if we could combine these two features? In this talk I will show you how to generate only the CSS _you_ use, while shipping no more CSS than each _page_ needs? Speaker bio: Hi, my name is Brooks Lybrand and I work as Web Engineer for the best grocery store in the world (okay, at least in Texas): H-E-B! I specialize in building proof of concepts, evaluating tools, and creating highly interactive, data-rich applications. I am passionate about exploring new ideas and technologies, discovering how they can better other's lives, and guiding people to these solutions. When I'm not coding, I love spending time with his wife and dogs, camping, playing board games, and pretending I know what I'm talking about when it comes to coffee and beer. Brooks Lybrand's Twitter: https://twitter.com/BrooksLybrand Repo: https://github.com/brookslybrand/purge-per-route Statechart representation of logic: https://stately.ai/registry/editor/105a41c2-1cd9-41a9-a27a-324c71bfb735
Learn how to implement internationalization (i18n) in your Remix project. Discover the significance of i18n, gain an understanding of the core principles, and learn various strategies for effective i18n management with Remix.
Moishi Netzer teaches Brooks how to implement server-sent events in Remix! Repo 👉 https://github.com/moishinetzer/remix-live-loader Server-sent events docs 👉 https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events Learn more about Moishi 👉 https://github.com/moishinetzer 00:00 - Introductions 02:44 - Walkthrough of the app 08:50 - Setting up server-sent events 27:18 - Adding multiple listeners 39:14 - Live Chat 52:40 - Final thoughts Learn more at https://remix.run
Learn more at https://remix.run
Learn more at https://remix.run GitHub: https://github.com/remix-run/remix Join discord: https://rmx.as/discord
Learn more at https://remix.run
In this live stream, Kent will be going through the Remix tutorial and you can follow along. Join the discord #live-stream-chat channel to ask questions as we go. By the end of it, we'll have a full CRUD-based application with authentication and everything. Should be a good time! Make sure you have Node 16 installed on your computer before attending! GitHub Repo: https://github.com/kentcdodds/remix-tutorial-walkthrough Learn more at https://remix.run Join the discord at https://rmx.as/discord Timestamps (thanks Tejas Ahluwalia!): 00:00:00 Intro Music 00:00:35 Stream starts 00:03:37 About the tutorial 00:05:35 Let's start: Overview 00:10:58 Let's start: Outline & Prerequisites 00:14:30 Questions 00:17:27 Generating a new Remix Project 00:20:35 Exploring the structure 00:30:09 Questions 00:44:19 Routes 00:53:00 Questions 01:02:45 Parametrized Routes 01:04:20 BREAK 01:09:23 Questions 01:13:10 Styling 01:26:17 Alternate CSS methodologies 01:29:41 Questions 01:35:45 Database: Setting up 01:43:00 Questions 01:46:10 Database: Connecting to the DB 01:50:22 Questions 01:51:45 Database: Reading from the DB 01:58:50 Questions 02:00:39 Database: More data fetching 02:06:00 Questions 02:09:07 Database: Type safety and other stuff 02:19:25 BREAK 02:24:35 Mutations / Forms 02:32:56 Questions 02:34:00 Form Validation 02:43:30 Questions 02:47:40 Authentication 03:17:45 Questions 03:19:30 Authentication continued 03:31:30 Questions 03:35:10 Authentication continued 03:52:57 Questions
Learn more at https://remix.run Sign up for our newsletter: https://remix.run/newsletter Join the Discord: https://discord.gg/remix
Learn more at https://remix.run/stacks
Learn more at https://remix.run/stacks
The Remix Stack for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, etc.
The Remix Stack for deploying to AWS with DynamoDB, authentication, testing, linting, formatting, etc.
After a form submission completes, you often want to clear out the form fields. You can `useTransition` to know when to reset the form. Learn more at https://remix.run
How to handle multiple forms in one route, and modeling mutations with a single button form. Learn more at https://remix.run
Learn more about Remix: https://github.com/remix-run/remix My task management app: https://www.centered.app Other stuff I use (font, theme, etc.): https://kcd.im/uses
Learn to prevent scroll reset on navigation and how to take control over how it restores on back/forward. Learn more at https://remix.run
Remix is joining Shopify
The second major release of Remix is stable today.
Let's dive into different CSS approaches in Remix! We will look at styling your Remix application in three different ways while analyzing different implications. These considerations include performance, developer experience, and scalability. See how to leverage Remix and CSS to create amazing experiences for your users. Speaker Bio: I am currently a freelance full-stack developer with experience in developing JavaScript applications in a variety of frameworks. I am passionate about web development and have recently been building different projects using Remix. I am also getting a master's degree in information systems at BYU. Outside of development, my wife and I just had our first child. We enjoy playing board games and reading numerous (mainly fantasy) books. Follow Noah: https://twitter.com/jnoahjohnson Repo: https://github.com/jnoahjohnson/remix-css Learn more at https://remix.run
Vite announcement blog post 👉 https://remix.run/blog/remix-heart-vite Migration guide 👉 https://remix.run/docs/en/dev/future/vite Vite announcement discussion 👉 https://www.youtube.com/watch?v=qyo5of7EDjY 0:00 - Migrating the default template 2:19 - Migrating the Express template 5:11 - Migrating the Indie Stack
Ryan takes us for a first look at Remix Streaming from the v1.11.0 release Learn more at https://remix.run
The React Router website
Tying all of the previous Trellix Singles together, this videos shows how you can build something as complex as optimistic Drag and Drop with the simple primitives of Remix. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:46 - Drag and Drop implementation 05:45 - UX before optimistic UI 06:52 - Board state implementation 07:45 - Adding optimistic drag and drop 11:42 - UX with optimistic UI 12:28 - Canceling fetches with fetcher keys Learn more at https://remix.run
Can I build and deploy a Remix site in 5 minutes? Let's find out! In this talk I will attempt to build a basic Remix site with a couple of pages and deploy it to a cloud provider. Will I succeed in setting a web development record or fail spectacularly? Speaker Bio: Ian is a full stack software developer, open source maintainer and speaker. He's currently the head of Developer Experience at Neo Financial, the maintainer of Create React App and a member of the Node.js team. You can find him on Twitter and GitHub @iansu. Follow Ian: https://twitter.com/iansu Code: https://github.com/iansu/remix-fan-club Learn more at https://remix.run
Learn to prevent scroll reset on navigation and how to take control over how it restores on back/forward. Learn more at https://remix.run
This video shows how to configure VS Code to debug your Remix loaders and actions. NOTE: You can now use the `debugger` statement instead of the external `debug()` function. I tried this before, but it didn't work. Not sure why it works now. You still can't set a breakpoint inside a route module, but you can add `debugger` statement and it will break there. You can then step through your code. I will be re-recording this video with this new info. Get the launch configuration here: https://rmx.fyi/debug
Have you heard about our new Remix Stacks template the K-pop Stack? It combines Remix, Supabase, Tailwind, and more to give you a note creation app with auth to help jump start your own Remix creation. Check out how to make it your own and get it deployed to fast and free! Repo: https://github.com/netlify-templates/kpop-stack Blog Post: https://www.netlify.com/blog/deploy-your-remix-supabase-app-today!/
HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.
ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment
Learn more at https://remix.run
We will walk through a simple demonstration of a remix application using nested routes and parameterized routes. The use of nested routes helps me with component design and separation when architecting an application. Parameterized routes / Dynamic Routes contain state information that can through the parameters that are defined on the route. This provides powerful flexibility when designing your app and app's components. Putting the two together in an simple solution to be a reference when you build something amazing. Speaker bio: Aaron is an Information Technology Strategist, Thought Leader, and Diversity and Inclusion Trailblazer - Founder & CEO of Clearly Innovative. He believes technology and in his case coding is an enabler and an equalizer. Aaron has focused a large part of his career training and developing individuals who want to get into tech but cannot find the opening; through the apprenticeship program he ran at Clearly Innovative, teaching web and mobile development at Howard University, and the free technical videos on his Youtube Channel he just want to help others get a seat at the table of tech and innovation. Learn more at https://remix.run/conf/2022/speakers/aaron-k-saunders