YOOBICCollective intelligence

Fuse

Build native apps for iOS and Android

[The perfect use case for ng2 custom rendering]

Presented by
Avi  Haiat - thaiat@yoobic.com

Who am I ?

Yoobic

  • A Collaboration platform between Brands and Retailers
  • Improving Field Efficiency and In Store Execution

Solutions

Hybrid

  • Titanium
  • Cordova
    • Ionic (2)
    • ReactJS

Native

  • React Native
  • NativeScript
  • Xamarin
  • Fuse

  • Improve user experience creation
  • Founded in 2011 by veterans from the mobile graphics industry
  • Offices in Oslo and San Fransisco
  • Total funding : 6.3$ in 2 rounds

“The demoscene is an international computer art subculture that specializes in producing demos. The main goal of a demo is to show off programming, artistic, and musical skills.”

FUSE UX Markup


<Button Text="{buttonText}" Clicked="{onClick}"/>

FUSE JS


var Observable = require('FuseJS/Observable');
var buttonText = Observable('Button');
var clickCount = 0;

function onClick() {
    clickCount += 1;
    buttonText.value = 'Clicks: ' + clickCount;
}

module.exports = {
    buttonText: buttonText,
    onClick: onClick
}

Fuse architecture

Angular Component

import { Component, Input } from '@angular/core';

@Component({
    selector: 'my-button',
    template: require('./my-button.component.ngux')
})
export class MyButtonComponent {
    @Input() text: String;
    clickCount: Number = 0;

    constructor() {
       this.text = 'Click me';
    }
    
    onClicked() {
       this.clickCount += 1;
       this.text = 'Clicks' + clickCount;
    }
}

NGUX Markup


<Panel ng:Selector="my-button">
    <Button 
    Text="{{text}}" 
    (Clicked)="onClicked()" />
</Panel>

Rendering in Angular 2

Angular Renderer

                                
class Renderer {
    selectRootElement(...) : any
    createElement(...) : any
    createViewRoot(...) : any
    createTemplateAnchor(...) : any
    createText(...) : any
    projectNodes(...) : void
    attachViewAfter(...) : void
    detachView(...) : void
    destroyView(...) : void
    listen(...) : Function
    listenGlobal(...) : Function
    setElementProperty(...) : void
    setElementAttribute(...) : void
    setBindingDebugInfo(...) : void
    setElementClass(...) : void
    setElementStyle(...) : void
    invokeElementMethod(...) : void
    setText(...) : void
    animate(...) : AnimationPlayer
}

Angular Renderer Bootstrap


@Injectable()
export class FuseRenderer implements Renderer {
    ...
}

@NgModule
providers: [
        FuseRenderer,
        { provide: Renderer, useClass: FuseRenderer },
    ]

// bootstrap
let _platformFuseDynamic = createPlatformFactory(
   platformCoreDynamic, 
   'FuseDynamic', 
   FUSE_COMPILER_PROVIDERS);

export function platformFuseDynamic(extraProviders?: any[]): PlatformRef {
    return new FusePlatformRef(_platformFuseDynamic(extraProviders));
}

platformFuseDynamic().bootstrapModule(MyAppModule);

Fuse Angular

This is boooring... Show me the code

Weather App

Live coding

Let's play with the baby and see how easy it is to build a mobile app

That's it !!!

and one more thing...