Plugins

[PEM--]

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

• https://github.com/IjzerenHein/famous-autosizetextarea
• https://github.com/IjzerenHein/famous-boxlayout (@oorabona, 29nov14)
• https://github.com/IjzerenHein/famous-bkimagesurface (@PEM--, 13nov14)
• https://github.com/IjzerenHein/famous-flex-tablelayout
• https://github.com/IjzerenHein/famous-kenburnscontainer (@gadicc, 13nov14)
• https://github.com/IjzerenHein/famous-lagometer (@gadicc, 12nov14)
• https://github.com/IjzerenHein/famous-listview
• https://github.com/IjzerenHein/famous-map

On Codepen.io:

• Flexgrid: http://codepen.io/befamous/pen/IihwL?editors=001 (@PEM, 25nov14)

From @naman34

• https://github.com/naman34/famousry

From @JonnyBGod

• https://github.com/JonnyBGod/famous-infinitescroll (@Wanape, 23nov14)

Other fine ressources from Famousco.de:

• A Property modifier (allows to animate property not exposed by Famo.us modifier, use it with caution): http://famousco.de/2014/07/transition-button-ripple-effect/
• A 4 direction SwipeSync: http://famousco.de/2014/08/swipesync-famo-us/
• A simple loader : http://famousco.de/2014/07/animated-dots-icon/ (@PEM--, 14nov14)
• An animated hamburger menu: http://famousco.de/2014/07/material-designish-button-animation/ (@PEM--, 13nov14)
• Scrollbars: http://famousco.de/2014/06/192/ From @gadicc:
• A progress bar and a spinner indicating loading progress for iron:router.

From @PEM--:

• A device plugin: Choose your device (iPhone, iPad or MacBook) and put your surfaces within (@PEM--, 16nov14, 2pts).
• fview-slidedeck: An helper package to create slides. (@PEM--, 15nov14, collaboration with @gadicc)

From @mcbain :

• #Animate plugin (@mcbain, 19nov14))

Score:

• @PEM-- 7
• @gadicc 2
• @mcbain 1
• @oorabona 1
• @Wenape 1

[PEM--]

(Moved to top post)

[gadicc]

Haha did you write this after reading my email or is it by chance? :) Released https://atmospherejs.com/gadicohen/fview-lagometer this morning :>

Do you think fviews- is better than fview- ?

But yes, I agree 100% and should look into all of this. fview-lagometer can be an example, my pattern is to:

1.Link original code in as a git submodule

2. Wrap around define/require etc.
3. Make sure it works with both mjn:famous and raix:famono.
4. Plugs in nicely to famous-views, loads without errors, etc.
5. Some basic customization.

I guess we could register a proper API for plugins but the current code worked well in this case.

So, we'll each do one package every day until we've done all of them? :)

[PEM--]

Actually, yesterday, I was registering nice component from @IjzerenHein (famous-bkimage). Very useful. I was saying to myself that I would certainly reuse it on other projects. Today, I've seen that you have integrated famous-lagometter. Another nice components. Sounds like a pattern to me :smile: And I'm pretty sure that famous-views users will be relieved if we show them that integrating components from others is dead simple.

There was just one feasability question that I have and you have answered it in your step 1 (using a git submodule).

One package every day... Pfeww, I can only work on this at night. I will do my best. This evening: famous-bkimage.

I've chat with @IjzerenHein and he is OK.

[PEM--]

BTW, fview is nice better than fviews. I like it a lot.

[PEM--]

@gadicc You've removed the GridLayout? Seems like it has disappeared.

[PEM--]

Pouaf... It's me. I didn't remember that I was registering it. This reminds me that may be we could add all widgets like fview plugins. That would be nice :+1:

[PEM--]

I should have created the plugins using CS. Vanilla JS is terrible... :wink:

[PEM--]

Yeah! First package is published: https://atmospherejs.com/pierreeric/fview-bksurfaceimage

Well... huh... not that good. I need to add some docs, add some other properties, prepare some assets and create a page on famous-view demo site.

Could you set up a menu for the plugins?

[mcbain]

Pretty cool. Please allow attributes changes for 'content' and the surface default props e.g. 'size', 'opacity' etc...

[PEM--]

I really need to clarify the doc :wink:

[gadicc]

Yeah, that's the elephant in the room that I've kind of been ignoring... if using raix:famono, how best to ensure only relevant source is sent to the client. The best thing is for famous-views to only have raix:famono include our reference to say, famous.views.Scrollview, if the dev uses a {{#Scrollview}}. That's not impossible, but a lot of work, and not a priority for now unfortunately. One day :)

Relating back to core famo.us Views, I'd prefer not to have a separate package for each one. Hopefully in the long term we can solve the above problem, but for now, I think "ease of use" is better, and I think developers will have a more positive experience if they can just start using all the core Famo.us stuff as is. (I guess with that strategy, GridLayout really should be registered too).

Anyways, I've added the plugins page to the site (under "More" for now) with https://github.com/gadicc/meteor-famous-views/commit/545a1474892296b80a1bb372c4f4206d2e28acc7. Crossed off the ones we've done from the list at the top of this issue, and, well, even if we can't do one a day, we can at least keep score :) See bottom of that 1st post, @mcbain, you're falling behind :)

[PEM--]

Magic! 2 plugins in one day :sunglasses:

For the moment, WPO is quite good. I agree that it's not a priority. I've tested my little playground on my very limited mobile (an old Android midp single core). It's just amazing how it behaves smoothly while loading pretty fast.

For the plugins, if I may, I was willing to put some basic examples of integrations. Live demonstration within the famous-views pages. I think it would even be better than API documentation for each plugin. Just like the Views > GridLayout, for instance. Some plugins are really worth the effort. The map or the Ken Burns effect are just amazing piece to see. And when you know that using them cost you only one CLI command and one line of Jade if you use famous-views, you can't use anything else anymore.

[gadicc]

You may :) Was upset there was no picture I could include for that, but a full demo is great and actually exactly what we should be doing!

Unfortunately how I'm processing the templates atm isn't so great for adding in additional surfaces; the main "desc" part is markdown and HTML text is supported, but because it's all processed as text, it won't work. Will whip something up later today.

[gadicc]

Ok, did something quick in https://github.com/gadicc/meteor-famous-views/commit/72a547e996ca54e3ec043e38d2818af55f2dff6b. Working a bit weird maybe because of how we're rendering the template. Seems to be ok though if you manually specify the size (the context seems to think it's 0x0). When you have time to play let me know if it works or for you.

[PEM--]

Weird, I got this in the demo-famono:

fs.js:689:18: ENOENT, no such file or directory '/Users/PEM/Projects/meteor-famous-views/demo-famono/server' (compiling lib/smart.require)

[raix]

@PEM-- got that one too - the server folder is empty? try removing it

[PEM--]

Thanks @raix :+1:

[PEM--]

Done for the animated icon. I'm not that happy with it. It's not reponsive and tricky to use. Well, that's a starter. I guess I will have to PR @IjzerenHein who is just totalizing a full 100% of our plugins. He is amazing.

[PEM--]

I've added live examples on my two plugins. It works great. Check out the colors of the hamburger icon: I've reused the ones of a famous brand which delivers fast food :wink:

It's committed and deployed. Cheers :wine_glass:

[gadicc]

Weird, glad it's working now.

@PEM-- , that's great work! Page looks awesome now, especially illustrating all the different sizing strategies so clearly!

From my side, I'll admit I squeezed through the kenburns plugin because I knew you were going to have the hamburger out yesterday too :> It's actually not working so well and I'm looking into it.

Anyways, this is fun :) Thanks for your contribution in expanding this project timeously.

[mcbain]

@gadicc, @PEM sorry, i'm very busy these days, so i cannot help you with the the plugins. hope in 1-2 weeks my current project is finished.

[gadicc]

@mcbain, no problem, we're just playing :) Good luck with the project!

[PEM--]

And a simple loader. There is room for progress in this one also. It uses multiples Transitional and the animation is set by the Engine.prerender. This consumes too much CPU. Anyway, it is useable and can produce a nice effect at load time while waiting for ressources.

[gadicc]

Ah cool haha. Nice, you're in the lead! Might be a while until I can catch up, had an idea for something else cool. And I guess eventually we should also do a progress meter that integrates with iron-router.

[PEM--]

Hop, the fview-slidedeck plugin is published with a nice set of video examples.

[PEM--]

For the enhancement on the ContainerSurface (setting the perspective in the Blade or Jade template), it's done. I've also adapted the Flipper example so that it takes advantage of it. It's contained in the 0.1.26 but it's unpublished yet (no right to publish on Atmosphere). Therefore, I haven't published it yet on the main example site.

[gadicc]

Awesome! You are now, go ahead :)

[PEM--]

I was thinking of creating an device plugin. An iPhone, for instance. This would be quite useful for demonstrating the RWD features on our landing page (and for any one who uses famous-views for their site). Basically, it is a customized ContainerSurface within an SVG. I could bring multiple SVG template as devices and set up properly the aspect ratio.

[gadicc]

Omg, yes!!!! Been wanting to do this for ages (for a single phone and not as a plugin), and never got round to it. What you describe will be properly awesome!!

I also wonder if in the long term, we could have a page which shows all different devices simultaneously, and syncs events between them. Anyway, baby steps :)

Also beyond my short answer while rushing out yesterday, the videos you added to the plugin page are great! and reactive perspective arg to containersurface very welcome!

[raix]

@PEM-- sound like a cool idea for a widget

[PEM--]

Yes, I think this is going to be useful. And of course, it will get reactivity, responsiveness, capabilities of being displayed simultaneously. Not sure to being able to embed viewport tricks as it would force me to create an iframe that discusses with the template (well, I could do it but it sounds hairy). Thus, the embedded apps have to be really responsive. Or may be, we could simply use a Transform.scale which would be far easier to achieve and would provide the same effect.

I've started the stuff here: https://github.com/PEM--/fview-devices

[PEM--]

First template, guys. You can customize the strokes and the fills. It's completely responsive and its size and width auto adapt to the parent's size.

[gadicc]

yeah don't worry about my loony ideas :) it wouldn't be part of your work, but we could do it at a higher level but still using your package if we want :> yay!

[gadicc]

whoa, too fast! :bow:

[IjzerenHein]

Hey guys, just wanted to let you know how awesome the work is you guys are doing, kudos!

Also, I just updated the lagometer so that it uses far less resources. It now paints only twice a second by default, but you can increase this value if you want. Also, it now contains several additional metrics, script-time in ms and a dropped frame counter. Cheers, Hein

[PEM--]

I kinda like the effect of having the animation within the screen: But the animation going out of the screen is pretty cool too:

[PEM--]

@IjzerenHein Thanks! Almost all these plugins come from your repo. Your contribution is just incredible :clap:

[PEM--]

@gadicc This is where I need your Blaze expertise.

The layout provided for the plugin looks like this:

template(name='desktopSvg')
  +View align='[.5, .5]' origin='[.5, .5]'
    +Surface
      .fview-device-desktop-container
        svg ... BIG PILE OF SVG STUFF HERE ...
    +StateModifier origin='[0, 0]'
      +ContainerSurface
        ... THIS WHERE THE TEMPLATE PROVIDED TO +desktopSvg SHOULD END UP ...

And here the example:

template(name='famousInit')
  +StateModifier id='app' align='[.5, .5]' origin='[.5, .5]' translate='[0,0,100]'
    +desktopSvg width=400 perspective=200 clip=true target='demoContent'
template(name='demoContent')
  +Surface class='test'
    | Background of the screen
  +StateModifier translate='[0,0,100]'
    +StateModifier align='[.5, .5]' origin='[.5, .5]' size='[75, 75]' transform='eval:Transform.rotateY(Math.PI/4)'
      +DotLoader
        | 

In the demo content, I specify a Blaze.Template as the target.

How can I get the associated template (demoContent) and push it as a children of the ContainerSurface?

[gadicc]

@PEM--, it's a little tricky how you describe. Can we make it work like a regular view? With either:

  +desktopSvg template='demoContent' ...

or

  +dekstopSvg ...
    +Surface ...

If you go that route, famous-views will handle everything for you, and the famous stuff in demoContent will get correctly added via desktopSvg's add method, which you can override in registerView. Of course yes, as soon as I wrote that I realized you're working with a pure Meteor template, but I guess we can still try keep a consistent API :) Ok, so now, I thiiiiink you can maybe just go

if template
  +Template.dynamic template=template
else
  +Template.contentBlock

maybe. I admit it's not so simple with the crossing over of frameworks. If that doesn't work, I might have to play a little... it's all in the repo you pasted earlier?

Oh, and, I agree, coming out of the screen looks super cool. But probably isn't what developers want this for. Unless they're developing a 3D application. So maybe... enable3D=true/false that toggles whether or not you use a container? :) Have to say again this is very cool!

[gadicc]

@IjzerenHein, thanks! It's an honour to see you here :smile: As you saw we are big fans of your work. Thanks for the heads up about the lagometer, will update as soon as I have a chance... super useful tool.

[PEM--]

The pasted repo is up to date. Well... I got to think this through for your regular proposal. I'll come back on you later on. I'm in the plain middle of creating the smartphone template. Once done, I will be able to go back to the grammar enhancements.

[PEM--]

Some progress:

[gadicc]

Exciting! Can't wait for the finished package... glad famous-views is affecting your free time (and possibly job) as bad as for me ;)

Umm, I was thinking... maybe we are making this unnecessarily difficult. Forget about positioning things on top of each other with Famous and simply design the template like usual with HTML... inside the SVG put a new div and {{#famousContext}}. containerSurface creates a new context anyways (internally). This actually works out to be more flexible too since then it can be placed anywhere inside an existing Surface, and will be easier for you for positioning/sizing (but no 3D stuff hehe).

Oh also small thing, you put transform='eval:Transform.rotateY(Math.PI/4)'... just FYI, the rotate* attributes actually work in degrees (my call, guess I should document it somewhere), so you can just do rotateY='45'.

[PEM--]

Well, the problem with SVG is that it breaks acceleration of CSS transform + it has a different coordinate system. I've been annoyed on a little smartphone/tablet game with this beginning of this year. Better not to fall into this again. This is why I prefer piling up stuff and perform some basic calculations :wink: It will be easier for our users.

[gadicc]

Got it, didn't know that... in that case, 100%.

[PEM--]

And the tablet: I've eased the process of integrating new device template. This could be useful for adding, let's say, wearable, watch, or windows.

[PEM--]

And done!

[gadicc]

Legend! I gave you an extra point for this, because it's so cool and you did it so fast hehe. You are now far in the lead, but I have something cool on the way too :) Have a few more ideas for fview-device but I think you earned yourself a short break after this week's sprint... awesome how full the plugin page is in just a few days!

[trusktr]

@gadicc

Yeah, that's the elephant in the room that I've kind of been ignoring... if using raix:famono, how best to ensure only relevant source is sent to the client

I do this with vanilla famo.us using jspm. It is excellent because it makes AMD, UMD, CJS and ES6 modules completely interoperable with each other (e.g. require("an-ES-6-Module") or import "an-AMD-Module"), and it lets you either dynamically load what you want in the browser, or compile only what you need into a single minified file for the browser. I'm thinking about how to use jspm in a meteor smart package to load anything you want on demand.

[gadicc]

It's a lot more complicated. Firstly, let me clarify the above.

Using raix:famono, only the parts of Famous you use are sent to the client. But then in famous-views, we register e.g. #Scrollview using famous.views.Scrollview. Now Scrollview is sent to the client even if the dev doesn't use it. Long term, we'd need to be able to tell famono, send famous.views.Scrollview if #Scrollview is used in a template.

Regarding jspm, etc, it will be difficult. During the bundling phase (prior to deployment), all client-side assets are minified into a single file. Famono works with this, which is awesome, but the case I mentioned is problematic. Ultimately I think it's a better strategy... to send all required assets minified in one go, vs figuring out the dependencies with multiple loads on the client.