Fuse is a mobile app development platform that allows building native mobile apps using JavaScript. It uses an asynchronous architecture where JavaScript runs on a background thread, while the native UI runs on the main thread. This avoids performance issues from blocking the UI thread. Communication between JavaScript and the UI happens through Observables, which allow precise and minimal UI updates from asynchronous data changes. Developers can optionally use Angular 2 on top of Fuse, and Fuse's asynchronous architecture ensures UI performance is not affected by the framework.

1. Anders Lassen
CEO, Fuse
Inside Fuse:
Achieving full native UI performance
with JavaScript

2. 1.Intro to Fuse
2.Asynchronous JavaScript Architecture
3.Fuse+Angular2
Agenda

3. 1.
Intro to Fuse

4. Native mobile app development platform / engine
Super fast native UI, animation & effects
Animation & UI in easy XML
Business logic in plain JavaScript
Optional: Use any JS framework on top (e.g. Angular 2)
What is Fuse?

5. Live coding time!

6. Built with Fuse
(Soon)

7. Built with Fuse

8. Try it out at
fusetools.com

9. 2.
Fuse’s Asynchronous
JavaScript Architecture

10. How can we use JavaScript to build mobile
apps without risking UI performance issues?

11. Mobile JS platforms have always had performance problems.
Why?
Because: Any JS operation will block the UI thread.
- HTML5/Cordova = slow, not native UX
- Native UI + JS = JS still single-threaded!
JS in mobile

12. Single-threaded JS platforms
Main Thread
Native Code
Render UI
JS compute animation
JS business logic &
data preparation
JS compute
layout
Never slower than
60 times per second?

13. • Run all JavaScript logic on a background thread.
• Render UI on main thread using native components.
• Minimal and precise UI updates.
• No expensive diffing or change detection on UI thread.
Fuse Design Goals

14. Core idea: Two threads
Main Thread
Native Code
Render UI
Native Code Layout
& Animation
JS Thread
JS business logic &
data preparation
Native APIs
But how do we communicate
between UI and JS ?

15. Observables
• In Fuse, all communication between JS and UI happens
through Observables.
• Observable() holds one or more values that can
change.
• Observable emits messages when the data changes.

16. How Observables work
var apples = Observable(10);
var message = Observable(function() {
return “I have “ + apples.value + “ apples.”;
});
function add_apple() {
apples.value = apples.value + 1;
}
I have 10 apples.
Add one more

17. var apples = Observable(10);
var message = Observable(function() {
return “I have “ + apples.value + “ apples.”;
});
function add_apple() {
apples.value = apples.value + 1;
}
Observable Dataflow
I have 10 apples.
Add one more
UI update queue
Tapped!
11
“I have 11 apples”
UI ThreadJS Thread
JS Event queue
11 I have 11 apples.
11

18. Observables are also lists
var things = Observable(“car”, “hat”, “apple”);
add(“lemon”)
“lemon”);
…
things.add(“lemon”);
Precise manipulation of UI
Minimal layout changes
Animated response
…
things.remove(“hat”);
remove(“hat”)

19. Observables are also lists
var things = Observable(“car”, “hat”, “apple”); “lemon”);
…
things.add(“lemon”);
…
things.remove(“hat”);
add(“lemon”)
Precise manipulation of UI
Minimal layout changes
Animated response
remove(“hat”)

20. Reactive Operators (.map)
var numbers = Observable(4, 5, 7);
var foo = numbers.map(function(c) {
return c*2;
});
[1] = 13
[1] = 26 8 10 14
Lucky numbers
Precise update of
only affected cell
numbers.replaceAt(1, 13);
26
13

21. Async Reactive Queries
var movies = Observable();
var moviesWithBatman = movies.where(function(m) {
return m.title.indexOf(“Batman”) != -1;
});
fetchMovies().then(function(result) {
movies.replaceAll(result);
});

22. Async Reactive Queries
var movies = Observable();
var moviesWithBatman = movies.where(function(m) {
return m.title.indexOf(“Batman”) != -1;
});
fetchMovies().then(function(result) {
movies.replaceAll(result);
});

23. Benefits of JS Observables
• UI can be updated completely asynchronously with precise,
minimal UI invalidation.
• Allows async reactive operators (e.g. map() and where())
• No change detection required (as in Angular)
• No component re-render & diffing required (as in React)

24. The Fuse Architecture
Main Thread
Native Code
Render UI
Native Code Layout
& Animation
JS Thread
JS business logic &
data preparation
User input events
Observable
data changes
Native APIs

25. Benefits of Async JavaScript
The UI performance is never affected by what you do in
JavaScript.
• Processing/preparing large datasets
• Calling into native APIs
• Processing images
• And ultimately: Eliminates all overhead from using any
JavaScript framework, such as Angular 2

26. 3.
Fuse+Angular 2

27. Fuse + Angular 2
Frameworks such as Angular 2 are optional in Fuse.
Benefits of using Angular 2:
• Adds structure to larger JS projects.
• Share code between native app and web.
• Lots of utilities, helpers, docs, infrastructure, community.
Angular 2 is heavy - but thanks to Fuse’s async architecture
your UI performance is safe. Let’s see how!

28. How to use Fuse + Angular 2
.ngux - Define Angular 2 templates in Fuse UX Markup
.ts - Shared JS business logic between .ngux and .html

29. Let’s see Fuse+Angular2!

30. Fuse+Async Angular2
Angular 2
Change Detector
Angular 2
Component Tree
Virtual DOM
Changes
Angular 2
Renderer
Interface
Custom Fuse
Implementation
“Virtual DOM” =
Simplified tree
of Observables
Data
Changes
JS ThreadUI Thread
Plain Data
Changes

31. Q&A

32. Thank You