StateX
A cross platform native application architecture
Junjun Deng
Motivation
- Multiple platform support (Web, iOS, Android)
- Consistent user experience
- Productivity
Code sharing
Code sharing is hard
- Web technology (JS, HTML, CSS) - WebView
- C# - Xamarin
- Java - RoboVM
Unify heterogeneous platforms under a single language/environment
StateX
State
- A data store
- Query like hierarchical key-value store
- Change notification with keys
State Machine
- Acts as transition function in a state machine
- Written as a set of event handlers in Javascript
- View agnostic
\delta : S \times \Sigma \rightarrow S
s_{t+1} = \delta(s_t, a)
View
- Dumb but reactive
- No business logic
- Sends actions to state machine
- Written in native languages (framework)
v: S \rightarrow V
Backend (Opt.)
- Remote server or local worker queue
- Asynchronous events
- Network transparent
Demo
- A counter
- Android
- iOS
- Javascript debug
Case Study: Navigation
- Each window is identified by a key (url)
- The stack of screens is saved in an array: history = ["page/login"]
- The current screen's key is saved as page = "page/login"
- When user taps the login button, an action (type="auth", args="{user, pass}") is sent to the state machine.
- If the user/pass match, set page to "page/main", and append this page to history.
- The view component detects the value "page" has been changed, then renders the new page to the screen.
- If the user/pass do not match, the state machine sets "page/login/errors" to any auth errors.
- The login view detects its view states "page/login" has changed, thus refresh itself, showing errors this time.
Roadmap
- Javascript Engine
- Cross platform data store
We need you
StateX
By James Deng
StateX
A cross platform native application architecture
