Oops, I accidentally made our website faster by switching to Remix
We migrated our site to a new hosting provider, and with it a new React framework. We expected the site to run a little slower. Our tests proved otherwise.
We migrated our site to a new hosting provider, and with it a new React framework. We expected the site to run a little slower. Our tests proved otherwise.
Curious about the future of React Router v7 and Remix.run? Watch this video for a detailed explanation of what's to come! Learn about the exciting updates and improvements in store for these popular tools. 🔗 Resources and Links: The article: https://remix.run/blog/merging-remix-and-react-router Remix package RFC: https://github.com/remix-run/remix/discussions/7823 Single-fetch RFC: https://github.com/remix-run/remix/discussions/7640 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ⏱️ Timestamps: 00:00 - Intro 00:08 - Going over the announcement 01:22 - Why this makes sense in depth explanation 04:29 - Going through the rest of the article. 07:35 - Remix package RFC 10:45 - Remix Single Fetch RFC 14:47 - Remix future TL:DR 15:09 - The future of the packages and the great transition 17:15 - Outro 🔖 Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, Vite
Challenges, learnings, and scripts — still not done yet 😰
A case study on how Shopify rapidly built a web version of their popular iOS/Android app Shop with Remix
We go into what Remix.run is exactly, how it works under the hood and how it improves your DX and makes your users fall in love with your website. If you wish to support the channel consider subscribing for more content. Twitter: https://twitter.com/AlemTuzlak59192 Github: https://github.com/AlemTuzlak Blog: https://alemtuzlak.hashnode.dev/ 00:00 - Introduction to Remix.run 02:08 - How does Remix operate on a server 06:30 - Server framework deep dive 09:08 - Browser framework overview 11:17 - Outro
Remix is a full-stack framework with seamless backend-frontend integration, fewer states, and web standards emphasis
Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Ken_Snyder_remix_philosophy Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Remix Demo - Shopping List ➤ https://github.com/kensnyder/remix-demo-shopping-list Chapters 0:00 intro 0:22 preamble 0:31 what we'll cover 0:48 about ken 1:27 why should you care? 2:02 let's create a real remix app 13:18 try it on github 13:27 outlet 14:20 more complex forms 16:29 philosophy: embrace server/client model 17:21 bundles 18:13 single page app 18:39 remix app 20:10 server & runtime adapters 20:41 official list 21:23 work with web foundations 21:43 standards 23:09 request, response 23:48 fetch loves requests & response 24:26 headers 25:28 url search params 26:13 traditional react components 27:11 more traditional react page 27:46 ...or just use remix 28:07 work without js 30:11 demo without js 31:15 roadmap and future flags 31:43 roadmap highlights 32:47 future flags 34:08 applying the philosophy outside remix 35:11 we chose a new mindset 36:14 hello shoreline 36:26 thank you
Introducing Remix v2.2.0: lightning-fast Vite integration, plugins, and better developer experience. Elevate projects and discover new potential!
From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won't use Next.js.
This is an uncontroversial opinion for people using Remix, but it needs to be said: The loader API is the best thing about Remix. Some background: A loader is a custom defined function that is responsible for "loading" all of the data that is required to render a route. It's
Remix.run revolutionizes web development with simplicity, flexibility, and seamless integration, improving project setup, deployment, and migration
📘 T3 Stack Tutorial: https://1017897100294.gumroad.com/l/jipjfm 🤖 SaaS I'm Building: https://www.icongeneratorai.com/ ✂️ Background Cutter: https://www.backgroundcutter.com/ 💬 Discord: https://discord.gg/4kGbBaa 🔔 Newsletter: https://newsletter.webdevcody.com/ 📁 GitHub: https://github.com/webdevcody 📺 Twitch: https://www.twitch.tv/webdevcody 🤖 Website: https://webdevcody.com 🐦 Twitter: https://twitter.com/webdevcody
Remix is a fantastic framework but it's not without its issues. Here are some of my struggles after building a few different projects with it.
Get advanced with `defer` and other Remix features to power a lag-free, web-based native app, without giving up Remix's data loading and mutations on the server. Chasing the dream of write-once/run-anywhere by wrapping your website in a native app shell? Scared that a great Remix website won't feel as snappy as the instant transitions of your old SPA? Fear not—by being smart with `defer` and leveraging the browser platform, you can power a spinner-free website and super-speedy native app from the same routes. Speaker Bio: Oscar Newman is a product and design-focused software engineer working on consumer healthcare experiences at Solv Health, where he has led a team-wide migration to Remix. He's passionate about consumer healthcare and building compelling user experiences. He's dabbled in design systems and front-end tooling, and is terrible at algorithms and most coding interviews. https://remix.run/conf/2023/speakers/oscar-newman
Edge computing is increasingly being adopted by web developers these days to improve UX and decrease latency of their applications. Cloudflare Workers, Deno Deploy, Netlify Edge Functions, and Vercel Edge Functions, all have made edge computing available to developers of full stack applications. With this adoption new architectural patterns and anti-patterns for building web applications have emerged. In this talk we’ll cover how developers can utilize edge computing to build full-stack applications and what are the strengths and weaknesses of this approach. We’ll also look into the future — beyond the edge, and explore how thinking of the network as the computer will fundamentally change the architecture of web applications in order to make building planet-scale applications accessible to everyone. Speaker Bio: Nevi Shah is a Product Manager at Cloudflare. She works on Cloudflare Pages and Cloudflare D1. https://remix.run/conf/2023/speakers/nevi-shah Speaker Bio: Igor Minar is a software engineer at Cloudflare and co-creator of AngularJS, Angular, and Karma. He has spent the last 15 years helping developers by building infrastructure, APIs, and tooling for the Web. Igor built some of the biggest web development communities during his time at Google. He collaborated with the TypeScript team to bring type-checking and better tooling to developers, as well as browser vendors to design and improve web APIs. He has also worked to establish pragmatic best practices in the web ecosystem by creating conventional commits and many evergreen libraries. https://remix.run/conf/2023/speakers/igor-minar
Speaker Bio: Ryan Florence has been obsessed with UX since using an Intellivision. https://remix.run/conf/2023/speakers/ryan-florence Speaker Bio: Michael Jackson, the author or Remix, not the pop star. https://remix.run/conf/2023/speakers/michael-jackson Learn more at https://remix.run
How does Remix update your browser in dev? It's more than just watch mode, live reload, or even HMR. Let's dive into how Remix offers a world-class dev experience. Speaker Bio: Pedro Cattori is a software engineer on the Remix team at Shopify. He lives in Washington, D.C. He works on the Remix compiler, dev server, TypeScript integration, and writing algorithms that the rest of the team pretends to understand and prefers to never look at. https://remix.run/conf/2023/speakers/pedro-cattori
Want to get rich? Step 1: Buy *.ai domain Step 2: Create pitch deck and start picking out private jets You've already got your Remix app, now just layer on some OpenAI GPT-3/4 so you can justify one of those .ai domains and raise a bunch of money. We'll look at how to utilize a Large Language Model (LLM) in a Remix app. We'll unpack some interesting performance constraints, and identify the technical mechanics to work around them. Speaker Bio: Andrew Petersen is a full-stack developer with over a decade of professional experience. He excels at leading development teams and collaborating with non-technical stakeholders. When not coding, you can find him in the backcountry with his wife and two dogs. Their favorite spots are in southern Utah and Idaho's Sawtooth mountains. https://remix.run/conf/2023/speakers/andrew-petersen
An exploration of how using MDX with Remix enhances the Markdown authoring experience, unlocks an ecosystem of tools to improve accessibility, and enables developers to craft more customized content experiences. This talk will walk through multiple ways MDX can be incorporated into a Remix site and provides examples of leveraging MDX to strengthen the usability and accessibility of content. Speaker Bio: Monica Powell is a software engineer who is passionate about making contributing to open-source more approachable, creating technology to elevate people, and building community. You can find her developing educational technology as a Senior Software Engineer at Newsela, teaching web development, and contributing to open-source projects. GitHub recognized her as an inaugural GitHub Star based on her involvement in the tech community. https://remix.run/conf/2023/speakers/monica-powell
Let's look at real world look at a migration from a React SPA and self-managed Express API to Remix on Google Cloud Run in a production setting. At Nellis Auction we made the jump and have insights to share with those of you looking to make the switch as well (hint: the performance boost for our customers was dramatic). Speaker Bio: Brian Lee is the VP of Engineering at Nellis Auction, an advisor at Reality Defender, and is currently seeking Masters in Computer Science at Vanderbilt University in Nashville, TN. Brian graduated from UNLV in 2013. Throughout his career he has worked in many areas, including geographic information systems, artificial intelligence, machine learning, custom video streaming, mobile development, and gaming engines. His work has spanned several languages and technologies, but it was always nestled within the web ecosystem. https://remix.run/conf/2023/speakers/brian-lee
I will discuss some of the things we've built at LinkedIn with Remix, why we chose it over other alternatives, our incremental migration story and how Remix is enabling us to ship faster & more ambitious web UIs for our users. Whether your an indie hacker, working at startup or large company, and are interested in moving to Remix, this talk is for you. Speaker Bio: Clifford Fajardo is a full-stack software engineer at LinkedIn where he works on infrastructure tools.He has worked at both startups and other large companies, including Salesforce. In his spare time you might find Clifford contributing to open source, hiking trails in the Bay Area, or eating at his favorite pizza shop: Bronco Billy's Pizza. He has a twin brother and is a proud Nicaraguan-American 🇳🇮 https://remix.run/conf/2023/speakers/clifford-fajardo
Backstreet's back. Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov
Most of the time our API calls work, so why don’t assume that they’ll do and provide a seamless experience? Optimistic UI means to simulate a positive response from the server before receiving one. This talk will introduce examples of optimistic UIs, highlight their benefits, and provide guidance on incorporating them into our applications. Speaker Bio: Giovanni Benussi has been a full-stack developer for more than 12 years. He started working on Ruby on Rails, eventually working on new features, maintenance, and scalability for the framework. Nowadays he works primarily with React. https://remix.run/conf/2023/speakers/giovanni-benussi
It started life as a create-react-app landing page in front of a vendor’s SaaS app that got an instant SEO upgrade with Remix v1.1.1’s server side rendering, and it’s never looked back. Need an unauthenticated version of “portal” content before the SaaS vendor supported it? Remix made that easy. Need to migrate content from a 25 year old on-premise vendor solution to a 10 year old on-premise vendor solution but want a modern user experience? We import the vendor’s design library into Remix and handoff the .NET app’s existing user sessions to Remix by POSTing JWTs. Remix is filling the gaps for Schoolcraft College and leveraging a hodgepodge of APIs and creaky old databases. Higher education development can be fun! Speaker Bio: Brandon Kish is a web developer at Schoolcraft College in Livonia, Michigan. He previously taught web design to community college students and misses the CSS Zen Garden. https://remix.run/conf/2023/speakers/brandon-kish
Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. Speaker Bio: Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. https://remix.run/conf/2023/speakers/arisa-fukuzaki Note: due to technical difficulties during Arisa's talk at the conference, Arisa was invited to run through her talk again later that evening. This video is that up-to-date version.
Using Remix to create a stand alone API is simple, fast and really fun! In just a couple minutes you can stand up a super straight forward API. This can let folks dip their toe into the wonderful world of remix without rewriting their front end. Speaker Bio: Shane Walker is a self-taught developer with a passion for learning new things and watching them come to life. From his first “Hello World” app, he was hooked. He is invigorated by solving problems in code. https://remix.run/conf/2023/speakers/shane-walker
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.
In Today's episode will cover: - @Stripe Integration - Webhook Setup - Checkout Session and Payment Testing These videos are free and created for the community, support will be much appreciated! 🫶
Learn more at https://remix.run
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