Tuesday, October 6, 2015
Famo.us FlexGrid in CoffeeScript with Meteor
Did I just post something similar few hours ago? Indeed very similar. But this time, this goes on a very different scale. The same demonstration is now reactive with datasources coming from a MongoDB, your session or any reactive dictionary that Meteor can provide.
But wait... There's more. Actually, this is not a piece of code that you will paste into your Meteor project. It's a plugin. One command and one line of templating and it is set. One line of templating means: in just one single line of code.
This is all made possible thanks to the efforts of Gadi Cohen's excellent package's Famous-Views and his community (in which I contribute a bit).
Basically, here is how it works. Famo.us components are registered in the Meteor's templating engine. It can be regular components or home made ones. Using your favorite templating language, being Spacebar or Jade, you create the layout of your app. You connect your reactive datasource in your templating if they are already available or via small template helpers à la Meteor. It's like Famo.us/Angular with a full stack JS framework. And if you are using Jade, it is like drawing the Famo.us rendering tree with your code and connect it with reactive data source.
As an example, here is the code required for creating the example displayed in the video:
As an example, here is the code required for creating the example displayed in the video:
// This is pretty basic for every mobile app.
head
title FlexGrid test
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, maximum-scale=1, user-scalable=no')
meta(name='apple-mobile-web-app-capable', content='yes')
meta(name='apple-mobile-web-app-status-bar-style', content='black')
meta(name='apple-mobile-web-app-capable', content='yes')
meta(name='mobile-web-app-capable', content='yes')
body
// Every Famo.us apps starts with a context.
+famousContext id="mainCtx"
// The code is divided into reusable templates
// looking very much like web components.
+flexGridExample
template(name='flexGridExample')
// Now we create our 'render tree'.
+Scrollview id='scrollview'
// Here is the FlexGrid: it's indeed a single line of code!
+FlexGrid id='flexgrid'
// Here, I connect my datasource: a reactive array.
+famousEach items
// I use the available values in each item of the array
// Note that CSS styles can be passed as reactive value,
+Surface class='surf' properties=color
// Or as reactive content.
p= name
Simple. The community has also brought some others nice plugins that speeds up the creation of your app. The number of plugins available is growing fast.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment