Previewing one ember app within another ember app

Design
1

I am facing a conceptual problem. Let me describe what’s going on:

We have 2 Ember apps. One is a kind of CMS (the CMS app) and the second one is a mobile oriented presentation (the mobile app) of the data entered via the first one. Both are sitting on individual servers, various web adresses.

There was a requirement to preview currently updated data in ‘the CMS’ app to check how would the page look on mobile devices.

The development team decided to show a modal window wrapping an iframe with the URL pointing to the mobile app. This means user needs to perfom a real update (saving changes on backend) so that the changes are propagated throughout the mobile app, too.

Everything works fine till the moment we do not want to update the data on backend. We would like to preview an edited page without having to save it to the backend first.

,I want to preview the page without having to save it.‘’, customer said.

Now the fun part begins:

  • The CMS app is written in Ember 1.10.0, hasn’t been migrated to 2.0 yet.
  • The mobile app is written in Ember 2.3.0.

Target: What to do to avoid copy-paste-ing code? How to stick to the DRY principle?

AFAIK, implementing an addon and keeping apps in sync using the addon is not possible due to the version in which the CMS app is written.

Any idea that could help solve us the problem?

1 Like
2

We have exactly the same scenario, with two totally independent ember apps. Here’s how our preview (without requiring a save) works:

Setup

For various reasons, we have three relevant apps:

  1. Editor - a rails/ember application where users can edit and preview.
  2. API - a rails API that serves data to the public app.
  3. public app - an ember-cli app (this is what is getting previewed).

Normal Flow

The editor app saves data to postgres and the API serializes and serves the data for the public app.

Preview Flow

When the user hits preview, we use jquery to serialize the form with .serializeArray and send that to the editor app, which instead of saving to the database, it stores in memcached with the same structure as it would in the database, keyed by a hash of the data.

Then, an iframe is set up with a special preview URL to the public app, which loads the preview data from memcached and serializes it just as it would from the database. These memcached keys expire after a few minutes. We also need the preview to be a special URL as our application isn’t a CMS. We need users to be able to interact with it without saving data.

However, this does end up using the same code to render the public app (with a few separate codepaths to prevent interactions and analytics from actually getting stored).

This whole system is probably more complex than you need, but should give you an idea of what is possible. I’d really like to change ours to use query params to communicate the data instead of memcahed, but I didn’t want to duplicate the serialization logic as there is quite a bit of it.

I hope this helps!