vesparny/morpheus

split react components

vesparny opened this issue · 4 comments

Every component such as Disqus or clicky, should be a separate component

Where will you put a separate component?
I think it put "shared components" is good.

Probably the best solution would be to have it published to npm registry, and just require it in package.json file.
I'm still thinking about the overall architecture of the project.

morpheus

I classify components to page components and common components.

  • Page components: display whole page view.
  • Common components: would be used repeatedly.

I think it hard to split React components because we use flexible architecture. It would transit through fluxible context that have store and action. But when we need store or action, we need to call ApplicationStore, ContentStore, ContentActions, even store mixin, etc. It too indivisible to separate components. Maybe we need abstract components(Just my define).

  • Abstract components: Just template, didn't know how their children components were created.

and we can use abstract components to transform flexible context to React props. Use the general interface to transit store and action. It would be more flexible. And then we can define porps spec interface and let other guys to implements components.

But I am not familiar with fluxible store and fluxible action. I not sure it would work or not.

morpheus_1

Just an idea. Wish to inspire more idea. :)

I agree to classify components to page components and common components.
But, It appears that common components is tightly coupled with context.
especially NavLink depends on it too...

First, I prefer to separate components as npm modules as-is.

morpheus
  | (depend as default theme) 
  |- morpheus-theme-blablabla
          | (depend)
          |- morpheus-component-discus
          |- morpheus-component-google-analytics
          |- morpheus-component-gravator
                 | (depend)
                 |- flux-router-component (for NavLink)

other theme is

morpheus-theme-other-awesome-theme 
  | (depend)
  |- morpheus-component-discus
  |- morpheus-component-google-analytics
  |- morpheus-component-gravator
         | (depend)
         |- flux-router-component (for NavLink)

Just an idea. I'll think of more.