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

Günter Zöchbauer · Accepted Answer · 2016-03-31 04:24:54Z

6

Subclassing a component is one way to do that.
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.

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 {}

edited Mar 31, 2016 at 4:24

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

answered Dec 1, 2015 at 18:25

Victor Savkin

1,7991 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Lesh Over a year ago

Thanks, @VictorSavkin, angular contributor, expert and all-around good guy. ;)

Brocco Over a year ago

That is exactly what I was looking to learn. I wasn't aware of the platform property for the @View decorator. Its not in the docs quite yet (or it hasn't been coded yet)

Matt Votsikas McLean Over a year ago

Viktor, has this been implemented yet? Are you able to point to documentation for it?

Günter Zöchbauer Over a year ago

@View() was removed. There are plans to support multiple views in some way, but it wasn't decided yet how. github.com/angular/angular/blob/master/…

Ben Lesh · Accepted Answer · 2015-12-01 01:46:54Z

3

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

There were several good talks at AngularConnect 2015 about this.

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

answered Dec 1, 2015 at 1:46

community wiki

Ben Lesh

Comments

user2192332 · Accepted Answer · 2016-03-31 00:23:05Z

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.

Collectives™ on Stack Overflow

How to support/utilize angular2's multiple renderers?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related