[143]inside fuse deview 2016
TRANSCRIPT
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