Universal Components & Deterministic Rendering

on YouTube ↗26m

" summary

Built a shared component library that compiles platform files for web and React Native and reaches a working login form universalized using React Native, react-native-web and design-system npm packages. Finds a concrete failure mode: animated popup needs absolute pixel values so top animation requires pixel height, and German text breaks a fixed-height box. Chooses native-style APIs where they diverge, measures text post-render causing rerender loops, and advocates for text measurement forces re-render loop and atomistic deterministic rendering.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 3:25Learn once write anywhere
3. 11:55There are no transitions in Native
4. 13:31You can't put text in a Touchable
5. 22:36What is an app?
6. 25:25The W3C will catch up

" related talks

• 27mUp and Running with Universal ComponentsKurtis Kemple, Samantha Bretous · ReactEurope 2018
• 21mBuilding Cross-Platform Component Libraries for Web and Native with ReactPerttu Lähteenlahtii · React Advanced 2021
• 33mHow to Build a Universal Design SystemAxel Delafosse · App.js Conf 2022
• 29mUniversal ReactMike Grabowski · React Amsterdam 2017
• 59mOne Codebase to Rule Them All - Using React Native EverywhereJesse Weigel · NDC Minnesota 2019
• 01h 01mReact Native: A Better Way to Do MobileBrent Vatne · Philly ETE 2016
• 42mHow to publish a React Native component librarySatyajit Sahoo · App.js Conf 2019
• 31mNative Web Components - All Frameworks InvitedMichael Collins · UtahJS Conf 2018