search

gadicc / meteor-famous-views

Famous, the Meteor Way (with Reactive Blaze Templates/Views)
http://famous-views.meteor.com/
GNU Lesser General Public License v3.0
333 stars 27 forks source link

Plugins #136

Open PEM-- opened 9 years ago

PEM-- commented 9 years ago

Famo.us community has created some nice components that could be integrated with Meteor delivering high reusability. We could set up plugins to ease their integration and create a page on the famous-views site for inventory and demo.

Plugins would be named with fview-BLABLABLA.

From @IjzerenHein

On Codepen.io:

From @naman34

From @JonnyBGod

Other fine ressources from Famousco.de:

From @PEM--:

From @mcbain :

Score:

trusktr commented 9 years ago

Hmmm.... I think that with jspm we could go around meteor's build phase (with a specified option) and serve meteor-agnostic libraries that. There could be an option configurable per library to either 1) build the Meteor way, serve dynamically, or build the jspm way. It might be tricky, but I think it can be done, and makes a ton of sense to be able to do it with meteor-agnostic libraries like famous, bootstrap, etc.

gadicc commented 9 years ago

Yes but, that's my point. I don't want to go around meteor's build phase, I think it's really good :> Also, I don't think jspm would solve this particular problem either. If they include famous-views, all the famous stuff we use will be bought down. We can't pull down the stuff "as needed" in run time, because this would wreak havoc with template rendering. The alternative is to have the dev specifically request each view they want in javascript somewhere... this would work with jspm and with famono, but is a bit less dev friendly. It's something I've considered before... it makes great sense with famono but it just totally unnecessary and a lot of extra work for mjn:famous.

trusktr commented 9 years ago

If they include famous-views

famous-views wouldn't be loaded with jspm, because famous-views is meant specifically for Meteor (i.e. famous-views isn't Meteor-agnostic, it is Meter-dependent). Famous-views, or any other library that wants famous, can specify how to get famous, and whatever other 3rd party meteor-agnostic libraries that re needed. I've gotta learn more about Meteor packaging though...

It just doesn't make sense to have to wrap every single 3rd-party meteor-agnostic library for your project into it's own Meteor package. It'd be horrible. Imagine big projects migrating to Meteor with hundreds of meteor-agnostic dependencies.

gadicc commented 9 years ago

Hope I was clear. With famono, Meteor bundles/minifies only the parts of famo.us that the developer (and in this case, also famous-views) uses. Isn't that the same as jspm without any extra work? :) Famono (despite the name) actually doesn't contain Famous, and works with bower/github repos. But instead of needing to use require('famous.core.Engine'), we just write famous.core.Engine and famono knows to bundle it (and not bundle things we don't use). It's really quite brilliant. Hats off to @raix.

But yes, I wouldn't bundle general libraries in Meteor just for the sake of it. https://github.com/meteor/meteor/issues/3107

splendido commented 9 years ago

You guys are doing a tremendous work! I'm really impressed, well done!

Have a nice and very productive day!

P.S. ...I can't wait to test fview-map ;-)

trusktr commented 9 years ago

@splendido Thanks to @gadicc for starting this amazing work! :tophat: off.

@gadicc Funny, I saw that issue. :D

With famono, Meteor bundles/minifies only the parts of famo.us that the developer (and in this case, also famous-views) uses. Isn't that the same as jspm without any extra work?

I get what you mean. But as you mentioned, @raix had to make a Meteor package just for the purpose including famous in Meteor projects, without adding Meteor-specific functionality. It's not ideal (though it's a job well done!). What you've said Meteor does is indeed very niiiiiice. :D Personally, I wouldn't mind having packages built in two places, as long as it's clean: meteor-specific packages, and any other libraries. But yeah, there's should indeed be some type of solution to this as mentioned in https://github.com/meteor/meteor/issues/3107.

PEM-- commented 9 years ago

@splendido Yeah, the fview-map is going to be super useful. There are currently some issue on the Google maps integration with Famo.us. I think I will restrict usage to Leaflet at the beginning. I'll do it just after the FlexGrid which is quite awesome and almost done (it's missing insertion and removal animations).

splendido commented 9 years ago

:+1:

Wenape commented 9 years ago

Great work with all the plug-ins. I'm testing a package that uses famous-infinitescroll (https://github.com/JonnyBGod/famous-infinitescroll).

The View renders and accepts properties:

{{#InfiniteScrollview size="[undefined, undefined]" offset=1000}}
    {{#Surface size='[undefined, 100]'}}Test #1 {{/Surface}}
     ...
{{/InfiniteScrollview}}

There is one problem though. InfiniteScrollview uses the getAbsolutePosition() method. It returns the total progress through the Scrollview distance in pixels. This is used to emit an event.

Apparently this method was introduced on famo.us 0.3.0, but raix:famono and mjnetworks:famous use famo.us 0.2.x.

PEM-- commented 9 years ago

@Wenape Use mjn:famous :wink: For raix:famono, just modify your lib/smart.require so that it points to the latests famo.us's release.

PEM-- commented 9 years ago

Here's the content of lib/smart.require that will point your project to the appropriate release of famo.us:

{
  "famous": {
      "git": "https://github.com/Famous/famous.git",
      "branch": "v0.3.1",
      "root": "src"
  },
  "famous.polyfills": {
      "git": "https://github.com/Famous/polyfills.git"
  }
}
PEM-- commented 9 years ago

For thus who would like to create a plugin, we have started a contribution guide. It gives some hints on how to set up a plugin project. More hints will be added: https://github.com/gadicc/meteor-famous-views/blob/master/CONTRIBUTING.md

Wenape commented 9 years ago

@PEM-- Thanks it's working now. I'll check out the guide and publish the package.

Wenape commented 9 years ago

Just finished the InfiniteScrollview plugin. Here's a demo: http://infinitescroll.meteor.com

raix commented 9 years ago

@Wenape :+1:

PEM-- commented 9 years ago

Yeah. Nice one. I love the way you put it. Very clean. Very Ionic look alike.

At the pace of the plugins are coming, it's going to be a mandatory one :wink:

Wenape commented 9 years ago

Ionic is actually pretty useful for fast prototyping. It would be really great to have some Spacebars helpers that would pick the right icons for you (iOS, Android). Probably would get this device-info from a cordova plugin.

PEM-- commented 9 years ago

Sounds easy, you can use the device plugin (the same one that you use for checking when to launch your app after the loading screen). I provides info on the device you are running one (hardware, software). Useful for triggering specific behavior.

gadicc commented 9 years ago

@Wenape, awesome! Just added this to the plugin page. I wonder can we retrieve more data when the user gets approaches the end, instead of reaches the end? That would be very cool.

And yes, with your help, I hope this project/community will develop into something akin to ionic for Meteor+Famous (with fluid transitional animations, etc). Starting with fview-infinitescrollview using the correct icons per OS. Thanks for volunteering to figure out the best pattern for us to do this :grin:

Wenape commented 9 years ago

@gadicc Thanks for including the plugin! You can actually retrieve more data as the user approaches the end. The scroller does this by looking at the offset attribute on the template. The thing is, I used a small offset for the demo (400px). You could use > 1000 making the callback run earlier + providing a larger ammout of data on each callback. This way you could scroll really fast without ever reaching the "bottom" of the viewport.

I guess I set it a little lower on the demo so users would see they can still get some styling/animation feedback, specially for users who scroll pushing the limits.

PEM-- commented 9 years ago

The FlexGrid is available: FlexGrid.

IjzerenHein commented 9 years ago

Awesome work PEM!

trusktr commented 9 years ago

Saweeeeeeeeeeeet.

gadicc commented 9 years ago

@Wenape, great stuff! Just saw that all now in the README, sorry if it was there before :> I think what would be also great is an example using a reactive cursor and upping a limit in a Session var in the callback, used for both the query and the subscription. Hope I explained that well but pretty sure you know what I mean. famous-views is attracting more and more novice users, who would be eager for this kind of feature but wouldn't be able to write it themselves.

@PEM--, great work as usual! This is another cool "wow" demo that people will love, the animated gif is a great help, and I guess the fact that it's not on the plugin page yet means you have something exciting for us there too :) Note that in commit https://github.com/gadicc/meteor-famous-views/commit/46adf40926dc61ef36cc98d1962bdd6b39c7d731 I just totally changed how plugin info is stored. It's easier to add templates for individual plugins (auto detected) and paves the way to storing this info in a database in the future.

PEM-- commented 9 years ago

Thanks mates. Nothing fancy and @gadicc almost does it completly for me. I've also put a video on Youtube, it will be far more easier to show animated content (I fear that putting too much contexts on the plugin page is going to makes it unresponsive). I will update the page like we did it for the fview-slidedeck plugin.

gadicc commented 9 years ago

@PEM-- is very modest :> I contributed exactly 2 lines to this (and ok, a little time bug hunting :)).

Wenape commented 9 years ago

@gadicc You're probably right. New people would likely start with using cursors as a data source for the scroller. Just added a second example for this case.

gadicc commented 9 years ago

My man! Good job!

ARaouf commented 9 years ago

Hi everyone, I just wanted to leave a note here thanking you for all the hard work that is going on with this package. @gadicc especially thank you for creating this package. @PEM for all your contributions and everyone else contributing!

A few months ago I learnt famo.us and am just getting ready to submit a famo.us built app to the app stores for my client. Then a couple months ago I began learning meteor which for what it does, I found to be as amazing as famo.us Naturally the two should be used together. I saw the famous-views package a while back but first wanted to learn how to integrate vanilla famous with meteor. It was tricky as there is so little documentation and samples. Still the Famono package was great to use. In the mean time Ive been keeping an eye on the progress for the famous-views package, reading the bombardment of messages for this package in my inbox daily (thats a good thing!) Now Im ready to integrate famo.us the meteor way ;) Hopefully I will be able to help out one way or another. Thanks again!

gadicc commented 9 years ago

Haha. Thanks for the feedback! Good luck with your transition, and definitely, contributions in the future would be great! Until then, insight on the transition from vanilla famo.us to famous-views is especially welcome, as is pointing out anythings in the docs or API which could be clearer.

trusktr commented 9 years ago

@PEM-- @gadicc Hey guys, I just finished the first version of my PushMenuLayout component. I'd like to get it into famous-views now. :D Try it here: http://trusktr.io, just hover on the left of the screen, or drag it (push it) to open it on a touch device.

The PushMenuLayout is part of my overall component library: g.trusktr.io/trusktr/infamous ("infamous" is not set in stone yet, but I needed a name for the repo on my gitlab), so to make my PushMenuLayout work with fviews I'll also need to make the smaller building blocks work too, like my Molecule and Plane components (names subject to change). The Calendar component is work-in-progress, and uses a Grid component internally (this flip animation is the WIP Calendar component, but it doesn't look like a calendar yet xD). It's not a flex grid like @IjzerenHein's awesome FlexGrid though.

trusktr commented 9 years ago

@ARaouf What's the app called?

PEM-- commented 9 years ago

@trusktr Indeed, the calendar is definitely going to be Wow effect but... clicking on date is going to be a problem :wink: For the moment (calendar reference...), you're the first on the line.

I love the menu. Rhoooo, nice :cat:

PS: Nice move for Gitlab. I've seen that you were using ES6, nice move too.

trusktr commented 9 years ago

@PEM-- Thaankz! :D

Indeed, another problem is importing my components since they are ES6 (which is why I'm thinking JSPM). I've seen some es6 packages for Meteor, but none of them handle import/export, just the other language features. JSPM can precompile my files to CommonJS format for example.

PEM-- commented 9 years ago

That's why I prefer CS :wink: You got the classes, the fat arrow, the destructuring assignments... Just joking.

Well, Meteor's way to export variables differs from AMD, CommonJS, ES6 modules. All scripts are loaded at the beginning of the app. For exposing a variable in the global scope, you just remove the var. This is why you don't see module.exports, require, define, export or import. It is already loaded. This is also why you don't see any import / export in the packages developed in ES6.

PEM-- commented 9 years ago

@ARaouf Yeah! Bravo to the app in famo.us. Like @trusktr, I would love to see that (if you're allowed by your client). I'm sure that with your solid knowledge of mobile and famo.us, your contributions would be enlightening.

trusktr commented 9 years ago

@PEM-- I saw that, but I wouldn't want to modify my library just to follow Meteor's standard. I want my lib to be Meteor-agnostic, in support of the impending release of ES6. :D

gadicc commented 9 years ago

I think Meteor-agnostic is fine, this is exactly what's happening now with the attempt for Official Meteor integration directly from 3rd party libraries. Unfortunately I don't have any ES6 answers, I haven't touched it yet :( I see what you're saying about jspm handling all this... but if jspm can do it, I'm sure we can do it too :> (either through a ES6 polyfill package, or through "global" defines scoped to the package).

PushMenuPlugin would be awesome! Besides looking super smooth, this is one of the essential building blocks in making an app that I think would be well appreciated by the community. With our amazing growth recently, we are getting a lot of new users who don't want to or can't build their own components, and are eager to adopt famo.us as soon as it's quick & easy to put something together with prebuilt plugins. And menu is usually one of the first thing an app needs :)

The calendar is going to looking super wow when it's done :)

raix commented 9 years ago

@gadicc sorry about spamming your issue, I'll remove it later :)

@trusktr jspm in the package.json can fairly easily be converted into a meteor isopack in https://github.com/raix/Meteor-include - We need to use the constraint resolver in the package system.

IMHO: That said I personally dont think ES6 imports solves anything in Meteor. jspm is just another bower/jam/browserify/etc. using require/define/amd/umd etc. are all same but different - I would like 100% agnostic library code without require etc.

I would like to see more shared code via finegrained dependencies, across any sources - where jquery/lodash/underscore etc. all depended on the same finegrained dependencies. But thats not the js world today.

raix commented 9 years ago

@trusktr Looks cool :+1:

gadicc commented 9 years ago

@raix, please don't remove, your insight is always welcome here :)

trusktr commented 9 years ago

@raix @gadicc Thanks :)

Yeah, I can imagine once Famo.us gets more adopted people putting cool things together with all the pre-made components. :D

oorabona commented 9 years ago

Hi there!

I just finished a first version of BoxLayout component you can find it here https://github.com/oorabona/fview-boxlayout.

PEM-- commented 9 years ago

Another nice addition to our little ecosystem :+1: A very handy one. Thanks @oorabona!

PEM-- commented 9 years ago

@oorabona, I've added your plugin to our little but growing list of plugins. It's deployed. Tell me if it suits you.

oorabona commented 9 years ago

@PEM-- : Awesome! Happy to contribute :+1:

Would it be possible to have a direct link to the demo webpage from the plugins page? That would be nice to be able to see it in action before digging code :wink:

PEM-- commented 9 years ago

Indeed, very nice idea. I will add a demo link each time one is provided. Nice :smile:

PEM-- commented 9 years ago

Hop, done and deploy!

PEM-- commented 9 years ago

Very cool idea @oorabona, I've created a little demo for the DotLoader: fview-dotloader

PEM-- commented 9 years ago

I've added a set of new demo: