reaction-layout

[aaronjudd]

Here's some rough thoughts on a possible new layout approach:

Create a new "component" collection:

@ComponentSchema = new SimpleSchema
  name:
    type: String
  component:
    type: String
  helper:
    type: String
  template:
    type: String
  position:
    type: Object

@Components = new Meteor.Collection("Components",[ComponentSchema])

Components types are UI helpers, that dynamically load templates, perhaps setting data

• Textarea
• Hero
• Product
• SocialBlock

This could allow for extending, customizing template (component) by cloning, changing the values of the components

You can have multiple templates for components

• Hero -> Large Slider
• Hero -> Static Text
• Hero -> my custom hero template

You add to any grid page by:

• Add new component
  • Choose Type
  • Choose template
  • Component Configuration Screen
  • Drag to position (and store position / priority)

For example:
Add a product

• add new product, goto current product entry screen
  • grid settings
  • configure tags to display in grid
  • configure filters (gold, silver, new,etc)

Add a hero -> inline hero manager

The "productGrid" doesn't exist anymore, instead it's a generic layout grid, that injects the dynamic component templates into the grid

You wouldn't create a "productGrid" template, but you would loop through the applicable collection data and render each individual product grid item template and insert into a layout. You should be able to mix and match different components this way.

Is still a drag and drop interface, storing position or other layout in the component collection level.

I'm thinking that potentially the rendered layout would be a client layout collection + template

[aldeed]

Yep, that's basically the same as I was thinking. 👍

I would add that this could probably be generalized to be a Meteor pkg that doesn't have any reaction dependencies and could be used in other projects. (Would be interested in using it myself.) What I'm thinking is that on the flip side of everything you already mentioned, the layout pkg could have an API providing the ability to add a component zone to any page, and to customize the appearance of that component zone, and to add custom filter functions. So one might do:

<div class="row">
  <div class="col-md-4">{{> pagePartZone "left"}}</div>
  <div class="col-md-4">{{> pagePartZone "middle"}}</div>
  <div class="col-md-4">{{> pagePartZone "right"}}</div>
</div>

Which sets up each area to accept configurable page parts (components). The app can provide a canEditPageParts: function (partName, userId) { return true; } option that decides whether the current user can edit a page part and returns true or false. If editable, you see the extra add/edit/remove stuff plus drag/drop between zones on the same page is enabled.

The app can also configure its own display logic functions, and a few could be built into the Meteor pkg, like isLoggedIn. Some of the generic types could also be part of the package: static text, static HTML.

[aldeed]

I know there has been some work by others to create Meteor CMS, but I don't know the status of those projects. Azimuth, which seems to be maybe a bit neglected these days, has a concept of "blocks" which is similar to what we're talking about, but not as powerful or nifty.

[kifirkin]

there also some new cms packages besides Azimuth I've just found.
This one looks great au-cmsinn, demo video is awesome 👍
and another one is Vector

[aaronjudd]

As I mentioned to @spencern I think this could now just reside in Packages, utilizing the registry for the storage of the UI element information.

[kifirkin]

I just found Orion.js. It looks like nice CMS solution 😄

[kifirkin]

Does anybody heard about Universe CMS? It appears in latest blog post from Meteor and looks awesome!
It will be opensourced in next month and they use ES6 and partially React.

Also I found very nice post about React plugins and Flux pattern ( Building Plugins for React Apps ) and it seems that Reaction uses similar approach for its extensions.

So maybe in near future we can use this kind of cutting edge stuff 😄

[kifirkin]

I've just found nice package react-grid-layout. It will be the best option for layout editor maybe with this npm module as well react-ui-builder

[aaronjudd]

@KEFIRCHIK that's really interesting, thanks! @mikemurray take a look..

[kifirkin]

@aaronjudd I've just found another interesting project - landing-page-builder 😄