I’m building a WYSIWYG designer in Ember.js. The designer will allow users to create campaigns – think MailChimp.
To build a campaign, users will choose an existing template. The template will have a defined layout. The user will then be taken to the designer, where he will be able to edit the text and style, and additionally change some layout options.
I’ve been thinking about how best to go about structuring this app, and there are a few hurdles. Specifically, the output of the campaign will be dynamic: eventually, it will be published somewhere, and when the consumers (not my users, but the people clicking on the campaign that my user created) visit the campaign, certain pieces of data will change, depending on the type of consumer viewing the campaign.
That means the ultimate output of the designer will be a dynamic site. The data that is dynamic for this site – the end product – will not be manipulated by the user in the designer. However, the data that will be manipulated by the user in the designer are things like copy, styles, layout options, etc. I’ll call the first set of variables server-side data, and the second client-side data.
It seems, then, that the process will go something like this:
- I’ll need to create templates for this designer that have two dynamic segments. For instance, the server-side data could be
Liquidexpressions, and the client-side dataHandlebarsexpressions. - When the user creates a campaign, I would compile the template on the back end using some dummy data for the server-side variables, and serve up a
handlebarstemplate to theEmberapp. - The user would then edit the template, and the
Emberapp would save all his edits to the JS variables that were powering the template. This way he’d be able to preview the template. - When he saves, he’ll send back the selected template, along with all the data and options he’s made.
-
When it comes time to publish, the back-end system will have to do two things:
- compile the template with
Handlebarsusing the campaign data, and then - compile the template with
Liquidusing the server-side data
- compile the template with
Is my thinking roughly accurate about this, or is there a simpler way?
I think nobody has answered it because it sounds about right to them. I’m going to paraphrase it to see if I understood it correctly. I am making a slight modification with the Handlebars library.
You have a case where you have two people modifying a webpage. The first person does some modifications (basically, it creates a web template, I think).
The second person will also be able to modify the website, but perhaps (but not necessarily) in different ways. Those changes will also be saved to the server. This is more like a client setting up a website, I think.
Finally, the third person will go to the website to view the results of the first two’s work. In this case, you first apply person 1’s modifications, then person 2’s modifications. I’d recommend using the same technology for both of these. I think it will make it easier to understand. In fact, I’d further recommend merging the configurations from person 1 and 2 before running it through your template code, so you only process it once. You can use whatever technology you want for this, on whatever side (server or client).
That’s just how I would do it. Feel free to modify according to your comfort level.