Remix - A small talk by Abhisek Pattnaik

Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience.

I gave a talk about the new framework in a office tech talk.

Transcript

2. Spreading Knowledge Through Technology Remix A small talk by Abhisek Pattnaik 2
3. Full-stack Developer with 4 years of experience building enterprise apps using Node.js, Golang, MySQL, MongoDB, Express.js, React.js, and AWS. Abhisek Pattnaik Senior Software Engineer, Impelsys about.me/abhisekp 3
4. What is Remix? Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. 4
5. Connect Over 📲 abhisekp.appointlet.com Web Fundamentals - https://developers.google.com/web/fundamentals Javascript - https://kentcdodds.com/blog/javascript-to-know-for-react React.js - Join the ongoing Training Next Session on Monday (13th Dec. 2021) Pre-requisites 5
6. Developed by Michael Jackson & Ryan Florence — creators of React Router Released on: 22-Nov-2021 (MIT License) Github Stars: 8.3k (https://github.com/remix-run/remix) It provides APIs and conventions for server rendering, data loading, routing and more. Everything we'd like a framework to do for us. ⸺ Ryan Florence About Remix 6
7. Deployment Options ◻ Remix App Server ◻ Express Server ◻ Architect (AWS Lambda) ◻ Fly.io ◻ Netlify ◻ Vercel ◻ Cloudflare Workers Using remix cli $ remix setup 7
8. Special Files ◻ remix.config.js: Remix uses this file to know how to build your app for production and run it in development. ◻ app/entry.server.{js,jsx,ts,tsx}: This is your entry into the server rendering piece of Remix. ◻ app/entry.client.{js,jsx,ts,tsx}: This is your entry into the browser rendering/hydration piece of Remix. Route Filenames ◻ app/root.tsx ◻ app/routes/*.{js,jsx,ts,tsx,md,mdx} ◻ app/routes/{folder}/*.tsx ◻ app/routes/{folder} with app/routes/{folder}.tsx ◻ app/routes/index.tsx ◻ $param E.g. app/routes/users/$userId.tsx https://remix.run/docs/en/v1/api/conventions Remix Conventions 8
9. Get me into action 🤺 Demo Time ⏲ 9
10. *shameless plugin 😜 🌟 162 Github Stars ⏬ 13k Weekly Downloads MIT License Yup Phone ☎ Adds a phone number validation check to yup validator using google-libphonenumber $ npm add yup yup-phone https://yup-phone.js.org 10
11. Learn your craft. Take pride in your work. Make some magic. ⸺ Eric Elliott 11
12. Spreading Knowledge Through Technology Questions? 12
13. Spreading Knowledge Through Technology Thank You Get the slides at — 🔗 https://to.absk.im/remix-talk-1 🐤 @abhisek 👥 linkedin.com/in/abhisekp ⚡ https://about.me/abhisekp 13