Creating Third-party widgets

1

I’m exploring writing a third-party javascript widget using Ember. I’m browsing through Third-Party JavaScript to get quickly get ideas of the caveats of making these widgets. There are a few caveats that have already jumped out at me if Ember is used.

I’m not done with the book yet, but the first caveat I see is Ember does not seem to have a noConflict version, where you could namespace Ember in something other than Ember. If Ember is already defined in the page, then including the widget will cause problems.

Is anyone creating / has anyone created Disqus-style widgets using Ember? What tips do you have?

Thanks

1 Like
2

This is pretty old at this point, but I would recommend ember-cli and configuring ENV.APP.rootElement in config/environment.js as a starting point.

I think this should be sufficient to avoid conflicts (sort of the point of ES6 use in ember-cli), but I’m not that knowledgeable about it.

Having said that, I haven’t gotten very far in my own third party widget project yet. Will post back here if I have anything more to share about it.

3

I’ve had some, non-ideal, success with a proof-of-concept widget using Ember as developed and built with ember-cli.

Basically it boiled down to two things. I had to use an iframe to add it to the target page and specifying a baseURL in config/environment.js that matched where I was hosting it.

Here are the steps I used on the app after it was developed:

  1. edit value of ENV.baseURL in config/environment.js to be the path to your target directory where it will be hosted
  2. ember build --environment production --output-path your_target_dir
  3. cp -r your_target_dir path/to/hosted/dir/parent/
  4. add <iframe src="http://your_host/your_target_dir/"… iframe tag to target HTML page

Yeah, pretty simple and what you would expect.

However, I had hoped to avoid using an iframe for the Ember app for a couple reasons:

  • would be great if the widget could inherit styles
  • secondary interactions within the Ember app would have better UX with a modal on the parent window

When I tried to just change rootElement and use some wrapping JS to include the necessary vendor and app css and js files, I couldn’t get it to work. I’ll start a separate topic on that.

4

This is great. Thanks Walter. I haven't read everything yet but this will be useful to me and others.

5

I’ve now got a jQuery based loader script that successfully adds a ember-cli based application to the calling window. I.e. a third party widget not wrapped in an iframe.

In config/environment.js, I change ENV.locationType to none and take out ENV.baseURL as it will be unneeded. See Location - 4.6 - Ember API Documentation for backtground (thx @abuiles).

Then I use jQuery to do the following:

  • add the CSS files I need to head if not already present (needs to match exact file names from built ember-cli app as copied into place)
  • add container div to DOM (should match ENV.APP.rootElement in config/environment.js)
  • add meta tag to head for app configuration (should be based on what you have in the head of index.html in your build)
  • add the JS files (vender and your_app, exact file names as with CSS) to DOM after container div

The remaining problem I have is I need to be able instantiate multiple instances of the ember-cli app under different containing divs.

My jQuery loader script can handle tracking of instances and adding the container divs, etc, but I’m not sure how to spin up a different instance of the app from the default. This is what I’ll ask about in a new topic.

6

Here’s a gist with the interesting bits of the proof of concept.

https://gist.github.com/walter/afecb3b2b1b24246acb3

1 Like
7

I updated How to have multiple instances of an app in same window with example code and rough write up.

1 Like