Meteor compatibility

[Tarang]

any chance that this can work on Meteor (meteor.com)?

I can get it working well, the thing is Meteor manages the dom and changes it when you change the page/has its own router. This way framework 7's router isn't used.

Is there a way that the page transitions can be used with Meteor & framework 7? (as well as the sliding back gesture)

[nolimits4web]

Need to ask some Meteor dev, i am not familiar with it :)

[Tarang]

Ive coded with it for ages, I can probably help a bit just a bit of direction would be helpful.

The first is routing is backbone style and it manages the DOM for you, in a really nice way. So it would be nice to use the router that comes built into Meteor.

What's left is the animations, there are hooks with the router so it is possible to do them manually. Such as onBeforeAction (runs before the route change) and onAfterAction after the route has been moved to.

Is there a way to manually navigate in between, or perhaps to make a global hook so all the pages can be used with the transition animations automatically- that way its nearly plug and play with meteor.

[nolimits4web]

I interested to make them work together. Can you give some kind of step-by-step actions of meteor router, so what it is doing on page load, and where you have conflicts with F7 or where you need some additional F7 callbacks. I am currently working on F7's router restructuring so we may try to bring it in next release

[nolimits4web]

Also i just note this in stack overflow (http://stackoverflow.com/a/26083997/1923913). I don't know is it related?

[maytis]

Well, meteor and F7 goes very well together. Did someone manage to get meteor to work with F7 yet ?

[nolimits4web]

@maytis i guess yes, there shouldn't be much problems, look here for example https://github.com/kaissaroj/newshunt

[nicooprat]

Newshunt doesn't use real routing (I mean, changes in URL for example). That's the hardest part I think :) "Visually", there're no problem between Meteor and F7. "Technically" there're some...

But first, I have to say that Meteor + F7 would be huge I think. I spent the last few days reviewing UI frameworks that could be complete, responsive (desktop + mobile) and native-friendly. F7 looks to be the best for me — Ionic is mobile-only ; Onsen needs Angular ; Supersonic is a end-to-end solution... And the others are not complete enough for what I need. If a real package could be made for Meteor (like Meteoric), it could have a lot of success ! There're already some, but with very little integration (only access to JS + CSS) : https://atmospherejs.com/?q=framework7

So, for what I saw, Meteor and F7 could work very well together IMHO, but there're some areas where they kind of overlap :

• Dom7 (Meteor has jQuery) : not a big deal, as long as it doesn't weight too much. Any way to remove it from build (didn't see that in "custom build") ?
• Templates (Meteor uses Blaze, very close to Template7, Handlebars...) : same as above
• Routing : tough one...

I tried to merge Meteor and F7 the last few days with little success. I guess the hardest part is to keep the reactivity of Meteor and its management of routes (URLs), while having F7 to manage the UI. Here are some solutions I tried or thought about, from the F7 router API :

1. With the content option : my best try, but it involves hooking Meteor UI (_uihooks), which is certainly not the best way to do it. Still lots of bugs though, but in some simple cases it works. I feel like it's more a hack than a robust solution. Plus it's hard to manage navbars for example, because of the template layout management (iron-router).
2. Via URL : By default, F7 makes an AJAX call, that's not really what we want to do with a Meteor app. Can't make it work, but it would be cool to hook there : don't make AJAX call, ask Meteor router to generate the right content, and give it back to F7. Looks like F7 doesn't have this feature (or maybe via 5.) ?
3. Via Template7 : I'm not good enough to replace Meteor templating system. I don't know if it could be made though (could break the "reactivity" of the templates ? And compatibility with other features/packages ?)
4. Via pagename : would be great but how could F7 know about Meteor templates ? Meteor bundles all templates, so there're somewhere near, but not in the DOM (looks like it's what F7 expect).
5. Via preroute : great option, but seems like IronRouter can't give the rendered template content (https://github.com/iron-meteor/iron-router/issues/834). Moreover, routing isn't just about appending HTML : Meteor also dynamically add event functions based on the template needed.
6. One last option that I didn't try, is to use FlowRouter instead of IronRouter. This one doesn't manage template rendering "auto-magically" like Iron does. So we may be able to achieve solutions 2. or 5. ?

I don't know if I'm clear here, but I think someone smarter than me should definitely have a look :) Looks like good job has been done for Angular here, but it's far beyond my understanding : https://github.com/nolimits4web/Framework7/issues/35. Anyway, I think it's doable. @nolimits4web what do you think ?

Thanks for reading :D

[nolimits4web]

Yes, the main issue here is with routing. I think the best option here, will be not use F7's router at all, and just modify/extend Meteor routing to have same transitions and call F7's methods to init pages. The problem is I am not good enough with Meteor, so i can't much help here, we need some Meteor ninja here :)

[krishnaff]

Meteoric - Ionic with angular stripped out, seems like the only full fledged mobile UI framework that works almost seamlessly with Meteor so far. I think its mainly because of how well the package authors of Meteoric supported it into Blaze/Meteor.

Having other UI frameworks to chose from will be a good thing. Framework7 is exhaustive in its approach and covers pretty much everything to make an app as close to feeling-native as possible. I guess some people are already using the css-only part of Ionic for Meteor+React apps. I want to use Framework7 with Meteor+React.. but just not able to figure out a way.

[mbrookes]

:+1: Seconded for Framework-7 (phenomenal piece of work - absolutely stunning!) with React and Meteor. Meteor has official React and Cordova support, but lacks a front-end UI kit.

With Framwork-7 it would be a killer combo!

[mishoboss]

Meteor + React + F7 is exactly what I'm trying to do right now. Here I just posted another issue before I found this one: https://github.com/nolimits4web/Framework7/issues/702

There are several attempts out there in github that aim to glue F7 with React, but they all use AJAX and/or another router. AJAX is not an option with Meteor and I want to use the F7 own router, because there happen a lot of magic that otherwise needs to be recreated (and maintained in future F7 releases). Because F7 is not just a CSS framework. There is also a lot of page/view related logics behind that are important for the UX. Unfortunately I still don't have success. I'm new to all these - F7, React and Meteor. The main problem for now is how to call app.router.load() with content that is actual DOM, which is produced by React Class. Or maybe a different approach - load a dummy HTML with app.router.load(), apply React.render on it and then somehow reinit the F7 page load functionality to apply its magics. I don't know. Any idea or hint is more than welcome! Thanks!

[minafarid]

I should have read this thread before I started developing using Framework7!

I have been developing Meteor apps for more than 1 year and I absolutely love it! I just needed to do a mobile app, and I was shopping for frameworks, and since I know Meteor, I decided to look for something that fits on top of it.

Adding Framework7 to Meteor screws up the whole routing thing. I tried setting router: false when initializing var myApp = new Framework7({router: false}) but it didn't really work.

The best I could do is to add class="external" to all anchors which disables the Framework7 router.

P.S. I hated Meteoric. It is so primitive compared to Framework7.

[minafarid]

Is there anyway I can use only the required css stylesheets and js scripts from Framework without all the routing and views jazz? Meteor should take care of the rest

[mishoboss]

Hi, I went to a different approach. I wanted to preserve the Framework7 logic as much as possible, including router. Framework7 is not just a bunch of CSS, but there is also a lot of JS logic behind it. Much of the beauty & power is exactly there. I also wanted React rendering, not using Template7 or Blaze. So, I try to use React as a glue between Meteor and Framework7. I've built a "mini framework" in order to sustain a React logic with Framework7 logic. So far without much issues. You can check it here: https://github.com/mishoboss/meteor-react-framework7

[nicooprat]

Here's a video of my best attempt, using _uihooks: http://streamable.com/t5qu

Here's a piece of my code. Still no navbar update, and a lot of weird bugs, but still...

Template.ApplicationLayout.onRendered ->

  # Init F7
  f7 = new Framework7
    # Disable F7 router, use only Meteor's
    router: false
    # Native like behavior for iOS
    swipeBackPage: Framework7.prototype.device.ios
    animatePages: Framework7.prototype.device.ios

  # Init main view
  mainView = f7.addView '.view-main',
    # Fix : rewind history when performing SwipeBack
    onSwipeBackBeforeChange: (callbackData) ->
      history.back()

  # Hook to render views with F7
  this.find('.pages')._uihooks =
    insertElement: (node, next) ->
      mainView.router.loadContent(node)
    removeElement: (node, next) ->
      return false

HTML templates needs to strictly respect F7 docs, of course. Each page template must be wrapped in something like <div data-page="recipe-view" class="page"><div class="page-content"></div></div>.

Hope it can give some clues to someone better than me with Meteor :) Didn't work again on it for months anyway. Meteor recent updates and FlowRouter might help...

---

@minafarid router: false should disable F7 router completely... What do you mean by "it didn't really work" ?

@mishoboss awesome... Looking forward to see more !

[minafarid]

@nicooprat When I disabled F7 router, still only the links (<a> anchors) with 'external' class works as expected (e.g., changes the template). I will give it another shot, maybe I am doing something wrong.

Update: @nicooprat It was my mistake! Disabling the F7 router works fine!

[minafarid]

P.S. Meteoric is no longer being actively maintained. I guess the author abandoned it since Meteor started supporting angular and ionic directly (which, IMHO, was not a smart move. The whole goal was to standardize the templating)

[nicooprat]

@minafarid Glad to hear ! Concerning the official support of Angular, React, Ionic... well, as long as it's still in different packages, that you're not forced to install, I guess it's fine. Always good news when big players play together :) They just followed popular demand I think. Let's make Framework7 popular too !

[minafarid]

Thank you @nicooprat so far it is doing everything I need :) I will tell my friends about it actually!

[fuatsengul]

Hello @nicooprat Can you share your code and structure please? I'm trying to build it with tabs view and I was just trying to implement detail views which it blows right now.

[nicooprat]

@fuatsengul I'll try to find some time to make a simple routing example.

[devdudeio]

would be awesome @fuatsengul

[nicooprat]

As promised, I just created a small repo : https://github.com/nicooprat/meteor-framework7-routing

[lance-anderson]

@nicooprat thanks for putting together the repo. I think I'm going to give it a try. I've been trying to figure out a way to use Framework7's routing with Meteor but haven't cracked it yet. Since Meteor is agnostic about routing it seems to me that it would be best to use Framework7's router if possible.

@nolimits4web It seems like Framework7 provides plenty of hooks and options for getting it to work well within Meteor. I was thinking of rather than using ajax to fetch the template, in Meteor, the template is already in memory via Template[template_name] and it can be render on demand much like a template fetched via ajax. It's pretty much the same thing. I think I just need to figure out how to hook into the ajax call and instead of fetching the template just return it. It seems like just a little bit of sugar is missing...

[mbrookes]

@lance-anderson I wouldn't be afraid to modify F7 and submit a PR if that's what's needed to bypass ajax.

[nicooprat]

@lance-anderson You're welcome.

Speaking of routing, routers like Flow Router allows us to fully embrace the reactivity concept of Meteor (by watching path changes for example). Using F7 router would make us loose that advantage, I guess.

I also tried the solution you mention, but if you just "render" the template with Blaze, you loose the reactivity part of Meteor once again.

That's why I tried to use F7 only for its UI part. That being said, I would be very interested to see what you could manage to d !.

[lnmunhoz]

I'm trying to use FlowRouter + Tabs Layout but I can't see how this can be done because the tabs layout switch views by id of the tab view. Anyone with the same problem?

[nicooprat]

@lnmunhoz You could try to use Blaze Layout and use one layout for each view, then one template for each page inside these views ? The tab bar could be a single template embed in each layout.

[fabiodr]

Here is a working project with Meteor, React and Webpack too.

https://github.com/D1no/touch2s

[nicooprat]

@fabiodr this is huge !

[srinivasdamam]

@nicooprat Is this now compatible with meteor? if yes, please share if you have example repo or let me know the status of this. I want to use this with meteor for mobile

[nicooprat]

@srinivasdamam No idea if there's has been any news on this! I didn't work on it since my last comment. If you are targeting "native" mobile only, I guess it will be easier because you won't have to use the URL for routing. You can use only the Framework7 "view" behavior.

[devdudeio]

yeah its meteor compatible. I´m using it for production (iOS/Android)

[nicooprat]

@rlech Could you explain how and for what purpose you're using it?

• do you only use it for Cordova build? Or do you also have a "web only" version?
• what router are you using?
• are you using routing with URL?
• did you succeed to use all of Framework7 features, such as swipe back and tab bar / content sliding on iOS?
• did you use Blaze, Angular, React?

Thanks.

[devdudeio]

do you only use it for Cordova build? Or do you also have a "web only" version?

cordova (iOS/Android) only because we dont need a webversion.

what router are you using?

flow-router but this is not important. iron-router also works fine with f7

are you using routing with URL?

what exactly do you mean routing with URL?

did you succeed to use all of Framework7 features, such as swipe back and tab bar / content sliding on iOS?

Most of them yes but just when I need them in the UI. I use things like photoswiper, virtual list, infinite list. swipe back is coming with our next update. for me everything is working sometimes with some small meteor related hacks.

did you use Blaze, Angular, React?

Blaze because I only had 2 weeks for everything but it should also work with react. If there was no lack of time react would be my choice. (fullstack coding, screens etc for app stores, icon creation etc takes time)

Most of the stuff (or all for me I used) is working very well.

BUT

the main reason some things not working is that you have to think about when and how your DOM is created and rendered. When you try to use f7 with elements who are not rendered already (because the data is from a collection that is subscribed but not 100% transfered to the client) its not working/its not working like exspected. Most devs just writing the f7 code in the Template.rendered function but this is not always the best way. always be sure you init things when your DOM is really ready. thats why sometimes you will have problems when you do the normal oncreated/templatesubscription stuff and just init f7 after that. This workflow depends on how customers use your app.

e.g. you like to show a list of documents with a virtual list and you init everything in the Template.xxx.rendered you will have problems when the subscription is not ready but you have fired your f7 code already.

[nicooprat]

Thanks for your feedback.

what exactly do you mean routing with URL?

A typical native (or cordova) app doesn't need to bother with URLs, although a web app has to. So my question was to know if you succeeded in using the "view" behavior of F7 and the "URL" behavior of Meteor router. According to your previous answer, I guess you didn't try to accomplish that.

Yes I get it, always same headaches with async behavior :) I often find myself using some Meteor.setTimeout() to ensure that the DOM has been rendered and inserted into the document...

Would you mind showing us the result? Is your app published?

[redbaron76]

I'm working on an App prototype that implements the following stack: Meteor 1.3.2.2, FlowRouter, React, react-mounter, react-addons-css-transition-group and Framework7 latest version. It seems to work very well, transitions included (using ReactCSSTransitionGroup). But... React reacts badly when someone else touches the DOM. And that's exactly what FW7 tries to do continuously. It means that any inline style which FW7 applies on DOM is killed by React after the component's re-render. So, for example, no center alignment for the title in the navbar, no dynamic navbar left/right translation and so on...

The FW7.addView('.view') method is called in componentDidMount() method of the layout component... but it should be called on every component in order to keep everything updated! Too much!

Any suggestion to avoid this?

Thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.