Learn How I Built a Twitter UI with TypeScript, Qwik, SolidJS, and React in Mitosis
Let's continue the conversation? / tejaskumar_
I wrote a single application across 3 UI libraries— Qwik, React, and SolidJS —using Mitosis: I wrote it in Qwik first, then transpiled it to React and SolidJS using Mitosis. This video looks at how it works, dives into the developer experience of Mitosis, and navigates working through some of the discrepancies in the generated React and SolidJS code.
We then add meta-frameworks like Next.js, SolidStart and QwikCity to add some server rendering for authentication, and then deploy said Next.js, SolidStart and QwikCity sites (or at least try to).
The Next site had some trouble deploying: I tried Vercel, then failed, then tried Netlify, and CloudFlare Pages with no success. sad panda I eventually gave up on Next.js, but moved forward with QwikCity and SolidStart.
Once deployed, we look at lighthouse and first-load JavaScript performance of Qwik and Solid.
Links
https://github.com/BuilderIO/mitosis
https://github.com/tejasq/tejjer-mitosis
https://github.com/tejasq/tejjer-qwik
https://github.com/tejasq/tejjer-next
https://github.com/tejasq/tejjer-solid
https://tejjer-solid.tej.as/
Chapters
00:00 - Intro
01:16 - Demo
02:32 - Sharing Components Between UI Libraries
03:28 - Mitosis Demo
05:30 - The Original Component Code (Qwik)
07:16 - Factoring Out Components to Mitosis
09:50 - Qwik to React Conversion with Mitosis
13:51 - Qwik to SolidJS Conversion with Mitosis
15:43 - Composing New React Components
17:22 - Composing New Solid Components
19:10 - Deploying the Apps
20:42 - Deploying the QwikCity App
22:19 - Deploying the SolidJS App
23:17 - (Failing to) Deploy Next.js on Vercel
25:35 - (Failing to) Deploy Next.js on Netlify
27:49 - (Failing to) Deploy Next.js on CloudFlare Pages
31:13 - Solid JS App Performance with Lighthouse
32:07 - Qwik App Performance with Lighthouse
34:25 - First Load JS Comparison (Qwik/SolidJS)
35:51 - Conclusion
