[143]Inside fuse deview 2016

Anders LassenCEO, Fuse

Inside Fuse:Achieving full native UI performance with JavaScript

1.Intro to Fuse2.Asynchronous JavaScript Architecture3.Fuse+Angular2

Agenda

1.Intro to Fuse

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?

Live coding time!

Built with Fuse

(Soon)

Built with Fuse

Try it out atfusetools.com

2.Fuse’s Asynchronous JavaScript Architecture

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

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

Single-threaded JS platforms

Main ThreadNative CodeRender UI

JS compute animation

JS business logic & data preparation

JS compute layout

Never slower than 60 times per second?

• 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

Core idea: Two threads

Main Thread

Native CodeRender UI

Native Code Layout & Animation

JS Thread

JS business logic & data preparation

Native APIs

But how do we communicate between UI and JS ?

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.

How Observables workvar 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

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

Observables are also listsvar things = Observable(“car”, “hat”, “apple”);

add(“lemon”)

“lemon”);

…

things.add(“lemon”);

Precise manipulation of UIMinimal layout changesAnimated response

…

things.remove(“hat”);remove(“hat”)

Observables are also listsvar things = Observable(“car”, “hat”, “apple”); “lemon”);

…

things.add(“lemon”);…

things.remove(“hat”);

add(“lemon”)

Precise manipulation of UIMinimal layout changesAnimated response

remove(“hat”)

Reactive Operators (.map)var numbers = Observable(4, 5, 7);

var foo = numbers.map(function(c) {

return c*2;

});

[1] = 13

[1] = 26 8 10 14Lucky numbers

Precise update of only affected cell

numbers.replaceAt(1, 13);

26

13

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);

});

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);

});

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)

The Fuse Architecture

Main Thread

Native CodeRender UI

Native Code Layout & Animation

JS Thread

JS business logic & data preparation

User input events

Observabledata changes

Native APIs

Benefits of Async JavaScriptThe 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

3.Fuse+Angular 2

Fuse + Angular 2Frameworks 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 architectureyour UI performance is safe. Let’s see how!

How to use Fuse + Angular 2.ngux - Define Angular 2 templates in Fuse UX Markup

.ts - Shared JS business logic between .ngux and .html

Let’s see Fuse+Angular2!

Fuse+Async Angular2

Angular 2 Change Detector

Angular 2 Component Tree

Virtual DOMChanges

Angular 2 RendererInterface

Custom FuseImplementation

“Virtual DOM” =Simplified tree of Observables

Data Changes

JS ThreadUI Thread

Plain Data Changes

Q&A

Thank You