Architecture design for a Page Designer app

help
1

Hi guys. So I am making a web page designer app. I am using react. There is an architecture design question. I would like to know your opinions about it.

So the designer should be all live and drag and drop. User should able edit the page by directly clicking on stuff and editing it. And there are pre-made templates. User selects one of these and starts editing. And that’s the issue I cannot make up my mind. Loading the pre-made templates.

I see 3 choices here…
I store the templates’ htmls in the db and load them as user chooses and make a component from the html string with a package like html-to-react and wrap my designer HOCs as necessary.

I store the templates as jsx strings in the db and then load them by using something like
const MyComponent = eval(babel.transform('<div>gf</div>', { presets : [ 'react' ] }).code)
Which seems to be a very bad idea and is very problematic in meteor as well. As after adding babel packages I get errors that none of the packages I have in my package.json are installed.

Finally another choice that I came up with is using Meteor’s new feature - dynamic imports. I make my templates separate components with their jsx files in the client and dynamically import them as user chooses a template.

Of course each option has it’s own implementation issues and whole different ways for afterwards steps of editing. What do you think which is the best one here? Or do you know a better way?

2

Maybe just use different layout and route at first to make it easy to implement.

User could click some buttons/links to switch between different layouts or routes.

3

Hi dear russj. Thanks for your reply. I do not understand how that would solve my issues could you give some example, please?

4

I’d at least investigate looking at an object representation of the layout:

page: {
  head: {

  },
  body: {[
    h1: {
      class: [ 'someClass', 'someOtherClass'],
      content: 'Some Title'
    },
    ...
  ]}
}

I think everything you could possibly want to represent could be achieved with something like this. It will also make layout manipulation, searching, etc. much easier.

1 Like
5

Hey Rob! Indeed this seems something worth a try and somehow I missed this way. Do you know any packages that already implement this kind of thing?

6

I’ve not looked into this at all - sorry. It just seemed worth some investigation.