Anyone know the current state of 'Embedding React in Ember?'

1

My company was acquired and we are ‘reskinning’ our app to look like the rest of our new company’s. They have a shared set of React components covering a lot of the basics - buttons, text input ,etc. I’d like to, at least at first, wrap those in Ember components for the initial re-skin.

I saw a couple of projects from 2018-2019 (ember-cli-react, ember-react-components) but haven’t seen anything incorporating embroider or that has been updated in the last few years.

Anyone know of current work/discussion along those lines?

3 Likes
2

@miketervela those projects are the ones I’m aware of, most of us are living in a full Ember world so haven’t had to deal with those types of integrations questions. If/as you work things out, it’d be lovely to see an add-on that supports that type of use-case using Embroider though!

1 Like
3

Here’s a working example that can use a React component library from Ember:

4 Likes
4

We’ve just recently started experimenting with this, where we took the approach of bundling React and ReactDOM in with our Ember build and rendering React components directly.

A few commits directly related to that:

If it’s of any interest we also added lazy-loading of an externally hosted react component.

@ef4’s approach looks like it could be a bit cleaner, I’ll have to look into that a bit more. Thanks for sharing the example! :heart:

5

Thanks @lookingsideways, from reviewing your example I realized that in my example I forgot to unmount at teardown.

And yes, as a general comparison between these styles: any time you find yourself making a new component and reaching for did-insert like this it means you’d be better off making your own modifier. ember-render-modifiers is a compatibility bridge for people who are trying to port classic components to glimmer components. New code probably shouldn’t need it, because you get cleaner results with a well-named modifier that does what you need it to do.

2 Likes
6

One more comment on the linked Ghost implementation: don’t use app.import here. It’s the reason you had to make that bug fix in the second commit. I commented on Fixed hooks not being usable inside of react components · TryGhost/Admin@a17ff01 · GitHub with the details, but the tl;dr is that ember-auto-import does exactly the right thing with react and react-dom (including dev vs prod switching) if you provide no configuration at all.

7

Here’s what the correct unmount looks like in a modifier:

2 Likes
8

Based on this blog post, I wonder if this approach will work well with Ember-data objects and EmberObjects in general.

In other words, will my React component be able to read attributes of an Ember Object simply by using myObject.attribute? Or will it have to use Ember.get(myObject, ‘attribute’)?

9

I can use didUpdateAttrs to rerender the react component when the attributes received change, but if a value is changed inside an object, this doesn’t get trigerred.

Any ideas on how to listen to such changes inside the react component?

10

That’s likely to get complicated, as Ember Object change tracking is designed to work with the rendering layer. StarbeamJS is designed to help with that type of scenario (multiple rendering layers needing to consume JS state objects) - https://www.starbeamjs.com - but would require you upgrade your state objects to tracked property equivalents

11

Thank you very much for that. We have given up on that idea at this point.

12

My company has had success with embedding other app technologies in our ember app via iframe. Our ember app has become an application platform, allowing for pages and sections of pages to be rendered using vue, angular, other ember versions, etc. Its worked out pretty well for us so far. I will say that we have put considerable work into having a web component library that we can share across ui technologies.