Architecture for a template-building, WYSIWIG application
- by Sam Selikoff
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 Liquid expressions, and the client-side data Handlebars expressions.
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 handlebars template to the Ember app.
The user would then edit the template, and the Ember app 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 Handlebars using the campaign data, and then
compile the template with Liquid using the server-side data
Is my thinking roughly accurate about this, or is there a simpler way?
