Possible Performance Boost about ngreact

[davidchang]

@brigand - I'm sorry for the late response. I do agree with you and think that you're onto something - I like the idea of a transpilation step to convert your Angular view into a React component. That would eliminate any sort of transclusion and would probably be much easier to work with than trying to do the parsing at runtime.

ngReactRepeat will, however, be deprecated when https://github.com/davidchang/ngReact/tree/kasperp-angular-react-rebase is merged into master (and we release something like an 0.1.0.

Are you interested in the possibility of working on conversions from Angular views to React components?

[brigand]

Awesome, yeah. Any tips on the last paragraph of my original comment?

Something like this for the api maybe. It'd let people use React's render, without even learning React.

<react-render>
  <div>hey {{someAngularExpression}}</div>
  <div ng-class="..." ng-repeat="x in xs">{{x.name}}</div>
</react-render>

Any number of these bindings could be implemented, so I guess it's just deciding which are most important. I think these:

• ng-repeat
• {{expression}}
• ng-if
• ng-show
• ng-hide
• ng-class

And additionally support {{expression}} in other attributes.

[lylepratt]

I came here to see if anyone was doing this yet. I think its a great idea. Has any progress been made?

[djett41]

I would love to see this as well. Would be happy to contribute if you guys steer me along the path you were thinking. Or even implement one of the attributes such as ng-class.. Would be happy to help tackle some of the others

[kasperp]

@lylepratt, @djett41 sorry for the late response. I don't believe there has been any progress made on this idea yet.

I think it is an interesting idea. For transitioning angular apps to react app would it also be useful to allow other react components inside react-render ? like

<react-render>
  <div>hey {{someAngularExpression}}</div>
  <div ng-class="..." ng-repeat="x in xs">
    <component x={x}/>
  </div>
</react-render>

@davidchang have you given this any more thought ?

[thomasquintana]

I'm also interested in this idea since using the ReactJS virtual DOM will greatly speedup ng-repeat. If there is anyway I can help please let me know.

[alejandroiglesias]

Those snippets look awesome. I need to "port" an Angular template into a React component for performance and the main pain-points seem to be replacing ngRepeat, ngIf, ngShow/ngHide and ngClass. Having the ability to wrap all the template into <react-render> tags and getting React performance auto-magically sounds exciting and very promising! Would be happy to make small contributions as time permits.

[brigand]

Does anyone know how to intercept angular's processing of a directive's children? That's what's blocking here; I need the dom untouched.

And to clarify, I can't think of a sane way to do this AOT, it needs to be done at run time.

[robinboehm]

@brigand are you searching for terminal on $compile service?

https://docs.angularjs.org/api/ng/service/$compile

[lylepratt]

I think the approach to accomplishing this should be very similar to how the Famo.us Angular integration works. Links to Famo.us surfaces implemented as Angular directives:
https://github.com/Famous/famous-angular/tree/master/src/scripts/directives

For example, the fa-surface directive:
https://github.com/Famous/famous-angular/blob/master/src/scripts/directives/fa-surface.js

[kasperp]

I was thinking about closing this issue, as:

• The discussion seems to have gotten stale
• What is being discussed here (although interesting) seems to be outside of what ngReact is

Any strong opinions before I do so ?