“The LLVM Project is a collection of modular and reusable compiler and toolchain technologies”. LLVM makes it easy to create programming languages.
When we come across React for the first time It is introduced as “A JavaScript library for building user interfaces”. After you deep dive into the internals, React can also be called as the LLVM for creating declarative UI frameworks. It makes it easy to create your own declarative UI framework.
If you ask why do you want to build a declarative UI, it is because it is easier to write, read, manage and debug or hardly debug declarative code. Manually managing updates to UI is cumbersome and error prone and tools like React do a better job at that.
React initially started out for web. Pretty soon it was evident the concepts can be applied to more than web and then came React Native with support for iOS and Android. We can use the same component style declarative way to build UI for all these different platforms.
There are 3 fundamental blocks in React.
- React Component API: provides component API and lifecycle
- React-Reconciler: It is the core diffing algorithm that manages the imperative updates behind the declarative UI. Reconciler is the work horse that figures out the changes between the different states of the application UI and applies those changes behind the scenes. You can read more about reconciliation at https://reactjs.org/docs/reconciliation.html
- React Renderer: A renderer is nothing but an implementation of some functions required by react-reconciler. The react-reconciler will call these functions as needed to update the changes to final target. If you implement these functions using DOM API, the target is the Web. If you implement these function using iOS UI Kit API, the target is iOS. If you implement these function using Android UI API, the target is Android. In fact any system supports drawing it can be a render target for React. Well it doesn’t even have to be something to draw. The abstraction is crazy. Check out this interesting project by Ken Wheeler https://www.youtube.com/watch?v=PBpugV5l90c where he goes through a custom renderer for music composition. Another interesting one is React Hardware by Dusten Kasten
The react-reconciler was rewritten entirely as of React version 16 with a better implementation called React Fiber. Before React Fiber the Reconciler was tightly coupled. Now it is decoupled and it is easier to write custom renderers. react-reconciler API doesn’t follow the same guarantees as the public API of react since it is constantly being tuned.
Check out these awesome custom renderers
