Explore the process of building a Twitter UI using TypeScript across multiple UI libraries in this comprehensive video tutorial. Dive into the development of a single application using Qwik, React, and SolidJS with Mitosis, a tool for transpiling code between different frameworks. Gain insights into the Mitosis developer experience and learn how to navigate discrepancies in generated code. Follow along as meta-frameworks like Next.js, SolidStart, and QwikCity are added for server-side rendering and authentication. Witness the deployment attempts for each framework, including the challenges faced with Next.js. Compare the performance of Qwik and Solid applications using Lighthouse and first-load JavaScript metrics. Access provided GitHub repositories and links to further explore the project components and deployed applications.
Overview
Syllabus
- Intro
- Demo
- Sharing Components Between UI Libraries
- Mitosis Demo
- The Original Component Code Qwik
- Factoring Out Components to Mitosis
- Qwik to React Conversion with Mitosis
- Qwik to SolidJS Conversion with Mitosis
- Composing New React Components
- Composing New Solid Components
- Deploying the Apps
- Deploying the QwikCity App
- Deploying the SolidJS App
- Failing to Deploy Next.js on Vercel
- Failing to Deploy Next.js on Netlify
- Failing to Deploy Next.js on CloudFlare Pages
- Solid JS App Performance with Lighthouse
- Qwik App Performance with Lighthouse
- First Load JS Comparison Qwik/SolidJS
- Conclusion
Taught by
Tejas Kumar
