Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create FlowRouter Layout manager for Blaze Components #79

Closed
mitar opened this issue Oct 6, 2015 · 22 comments
Closed

Create FlowRouter Layout manager for Blaze Components #79

mitar opened this issue Oct 6, 2015 · 22 comments
Labels
contributions welcome

Comments

@mitar
Copy link
Member

mitar commented Oct 6, 2015

See example:

https://gist.github.com/offthegrass/3c1491cc9d5b4c5cb5d0

It would be great if this would be made into a package and documented here in the README how to use it.
@mitar
Copy link
Member Author

mitar commented Oct 6, 2015

cc @offthegrass care to make it?

@mitar mitar mentioned this issue Oct 6, 2015
Closed
@DominikGuzei
Copy link

Hey @mitar, we are also interested in making this possible – so maybe i will take shot at it within the next few days! Btw. blaze-components will become the first-class render layer for the next major version of space:ui and we will rename it to space:flux + are planning to add React / Angular support in the future.

@rhyslbw
Copy link

rhyslbw commented Oct 6, 2015

+1

@mitar
Copy link
Member Author

mitar commented Oct 6, 2015

@DominikGuzei great stuff to learn. BTW, the whole idea of Blaze Components is that they are build around base component. The idea is that there would then be also React Components, and Web Components. But I do not have time nor too much interest to make those others myself. But maybe you could consider doing in this way. So the hierarchy could be then:

base component -> blaze component -> space:flux component
base component -> react component -> space:flux component
base component -> angular component -> space:flux component

What do you think?

The main purpose of base component is that we would have a common tree of components to navigate (imagine great inspection tools which could work across all these rendering systems), no matter the rendering system. See my comment here why having a good navigation in the tree of components is important to have refactorable code.

@DominikGuzei
Copy link

Hey @mitar, that sounds great indeed!
I will have to read through the base component source and think about ways this could work.
But i think you are right that it would be great to have a unified API for the various rendering engines.
I just started using the components API like @currentData() related to getting data in various scenarios and i love it! Still a lot to learn here 😉

Will keep you updated as we move along and btw. if you like to follow along with our discussions, we have a gitter chat for the meteor-space framework now: https://gitter.im/meteor-space/general

@rhyslbw
Copy link

rhyslbw commented Oct 6, 2015

Hey @mitar, we'll definitely consider this as it addresses the impedance mismatch with the different view syntax when introducing space:flux. This sounds like a nice way to use React or Angular in Meteor, so it should get some decent attention

@mitar
Copy link
Member Author

mitar commented Oct 7, 2015

Do you have any ticket where we could continue this discussion (we hijacked a bit this ticket)?

This sounds like a nice way to use React or Angular in Meteor, so it should get some decent attention

So base component just provides tree structure, the naming of components, and API to create them and render them. I think everything except for the last part is clear. And for rendering I have not yet decided how exactly to do it. So I would like to have a render call where a parent component could say to child component render, but that would work no matter which type of a child component it is. The question is if we should pass data context or not to it, for example.

@DominikGuzei
Copy link

Hey @mitar, how about issue #14? This seems like the same discussion 😉

@mitar
Copy link
Member Author

mitar commented Oct 7, 2015

Yea, let's move there. :-)

@mitar mitar mentioned this issue Oct 8, 2015
Closed
@mitar
Copy link
Member Author

mitar commented Oct 13, 2015

What is progress on the layout manager? Because otherwise I will look into this. But I would not like to duplicate work.

@DominikGuzei
Copy link

Hey @mitar, yeah if you have time please look into it - i am buried with work, so i would really appreciate that! 😉

@mitar
Copy link
Member Author

mitar commented Oct 17, 2015

I made this pull request: kadirahq/blaze-layout#50

@mitar
Copy link
Member Author

mitar commented Oct 17, 2015

I use this to register a root component (so that all other components are inside the same tree):

<template name="RootComponent">
  <div id="__blaze-root"></div>
</template>

<body>
  {{> RootComponent}}
</body>
class RootComponent extends BlazeComponent
  @register 'RootComponent'

BlazeLayout.setRoot '#__blaze-root'

@mitar
Copy link
Member Author

mitar commented Oct 17, 2015

Then you can normally use BlazeLayout:

BlazeLayout.render('LayoutComponent', {top: 'HeaderComponent', main: 'MainComponent'});
<template name="LayoutComponent">
  {{> Template.dynamic template=top}}
  {{> Template.dynamic template=main}}
</template>
class LayoutComponent extends BlazeComponent
  @register 'LayoutComponent'

@DominikGuzei
Copy link

Hey @mitar, awesome - thanks for implementing this! I will give it a try tomorrow and report back!

@mitar
Copy link
Member Author

mitar commented Oct 18, 2015

Pull request was merged upstream into blaze-layout package.

@mitar
Copy link
Member Author

mitar commented Oct 18, 2015

A new version (2.2.0) of the blaze-layout package has just been published.

@mitar
Copy link
Member Author

mitar commented Oct 18, 2015

I am leaving this ticket open for the following todo:

  • document in the README how to use the package with flow router
  • maybe create a simple package which creates a root component and calls BlazeLayout.setRoot, so practically:
<template name="RootComponent">
  <div id="__blaze-root"></div>
</template>

<body>
  {{> RootComponent}}
</body>
class RootComponent extends BlazeComponent
  @register 'RootComponent'

BlazeLayout.setRoot '#__blaze-root'

@JesperWe
Copy link
Contributor

Hi guys, I am trying to integrate FlowRouter and BlazeComponent for a new project, and I found these issues/PRs, but after reading them there is too much coffescript that I have trouble following, sorry... Any chance you could show how to instanciate a BlazeComponent with a data context from FlowRouter 2.2+/BlazeLayout using ES2105?

@mitar
Copy link
Member Author

mitar commented Oct 19, 2015

It should just work as you would do with Blaze templates.

@DominikGuzei
Copy link

Haha, im loving it … @JesperWe please take 5 minutes to at least skim over http://coffeescript.org/ to get the basic idea about Coffeescript. It would never strike me to ask you for a ES5 example, just because i am too lazy to skim over ES2015 syntax. Coffeescript == just Javascript with (awesome) syntactic sugar, not a different language. Sorry if that sounds rude … take it with a grain of frustration on my side.

@mitar mitar mentioned this issue Oct 21, 2015
Open
@mitar
Copy link
Member Author

mitar commented Dec 26, 2015

This was implemented as this package: https://github.com/peerlibrary/blaze-layout-component

@mitar mitar closed this as completed Dec 26, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contributions welcome
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@DominikGuzei @rhyslbw @mitar @JesperWe