How to support/utilize angular2's multiple renderers?

Question

So with the idea that angular2 will support multiple rendering engines (HTML, native via NativeScript & React Native) what does that development story look like?

Is there dynamic template switching? Or should this be handled via sub-classing?

// TypeScript ahead

// Base component implementation
class FooComponent {
  public name: string = 'my name';
  public makeFormal () {
    this.name = this.name.toUpperCase();
  }
}

// HTML Component
@Component({
  selector: '<foo></foo>'
  template: `
    <div>{{name}}</div>
    <button (click)="makeFormal()">Make Formal</button>
  `
})
class FooHtmlComponent extends FooComponent {
  constructor(){
    super();
  }
}

// Native Component
@Component({
  selector: '<foo></foo>'
  template: '... [native stuffs here] ...'
})
class FooHtmlComponent extends FooComponent {
  constructor(){
    super();
  }
}

Answer 1

1. Subclassing a component is one way to do that.

2. You can use multiple view decorators cause the following:

@Component({selector:'foo', template: `some nativescript template`})
class Foo {}

is the same as:

@Component({selector:'foo'`})
@View({
  template: `some nativescript template`
})
class Foo {}

Next, you will be able to provide multiple views for the same component.

@Component({selector:'foo'})
@View({
  template: `some nativescript template`,
  platform: 'nativescript'
})
@View({
  template: `some dom stuff`,
  platform: 'dom'
})
class Foo {
}

Finally, a build step will create a bundle for every platform with all the code targeting other platforms removed. The same technique can be used for providing language-specific templates for components.

3. Angular 2 makes possible to write a component with a single view that can run on all dom platforms (browser, node, web-worker).

So you can just do the following:

@Component({selector:'foo', template: `some dom template`})
class Foo {}

Answer 2

NOTE: This could all change because Angular 2 is still alpha.

There were several good talks at AngularConnect 2015 about this.

• Rendering in WebWorkers
• Universal Rendering is discussed in this talk

In particular, though, you're going to want to checkout Angular Universal which is the "Universal" (aka Isomorphic) (aka app primed on the server) rendering method for Angular 2.

Also for rendering to React-Native, there is a library growing here that has more information about that.

I hope that helps.

(PS: marked community wiki because the answer is so vague) ;)

Answer 3

When the first glimpses of Angular 2 began to surface more than a year ago, this is the one particular area that was the most interesting to me. Originally, I was thinking more along the lines of what Victor mentioned above regarding having multiple @View decorators for each target platform. This is either still in the works, undocumented, or no longer planned (I'm not sure?).

However, as things evolved, I began to see a cleaner integration potential via the use of custom Decorators. I have detailed this strategy here: http://angularjs.blogspot.com/2016/03/code-reuse-in-angular-2-native-mobile.html

Additionally, I have proven out this strategy here: https://github.com/NathanWalker/angular2-seed-advanced

I'm looking forward to other alternative approaches and still not sure what is best (if there is such thing), but I like the custom Decorator approach so far.

The thought of having build steps which would build out different versions of your application with the correct @View decorator as mentioned by Victor still sounds very helpful and hope that is (in some form at least) still on the roadmap for Angular 2.0.