Build Your Own
React Native with Python and Gtk!

About me

Alexey Zaslavsky

Front-end Technical Lead at

React Fiber

• React core algorithm reimplementation (v16)
• Priorities and scheduling
• Error boundaries
• Asynchronous rendering
• Hooks
• API for custom renderers

Official renderers from Facebook:

1. React DOM
2. React Native
3. React 360

React Blessed

React Blessed

Idea of a renderer:

1. Render user interfaces in different environments using the same tools
2. Declarative component-based UI
3. Learn once – use anywhere

Common lifecycle of UIs:

What can be rendered with React?

What do we need from the native UI?

• Cross-platform
• Imperative API
1. e.g document.createElement
2. appendChild
3. removeChild
4. addEventListener

What do we need from the native UI?

• Different languages bindings
1. ideally, JavaScript (node.js)
2. Python
3. Rust
4. ...

Native UI frameworks

• Mobile: iOS / Android – already exists
• Desktop:
1. Windows Presentation Foundation
2. Windows Forms
3. Qt
4. Gnome Toolkit (Gtk+)

WPF XML for Applications (XAML)

Solution – Gtk+

Houston, we have a problem!

Houston, we have a problem №2!

• Binding fo r JS uses SpiderMonkey 🦊
• No node.js 😭
• Let's do some Python 👻

Demo 1:

Python, Gtk
Imperative API
* No React Yet

General architecture

Communication channel requirements

• Lightweight
• Duplex

How can we communicate?

What do we send?

Keeping track of elements

Remote Procedure Calls: to UI

Remote Procedure Calls: to UI

Remote Procedure Calls: to UI

Remote Procedure Calls: to UI

Remote Procedure Calls: from UI

Demo 2:

Python, Gtk
Imperative API via RPC
No React Renderer

Architecture diagram

Demo 3:

React Renderer

References

• Tiny React Renderer
• Awesome list of React Renderer

Thanks!