Advice for integration with Meteor

I would like to integrate Webix with Meteor.js, the most popular full-stack JavaScript framework on GitHub. Webix + Meteor would be a kickass combination.

Meteor uses DDP, a protocol built on top of WebSocket, to sync data from the server automatically to all subscribed clients. How could Webix components be connected to such data? Is there an equivalent to Grid binding to WebSocket? The idea is to have the component render new or changed record automatically when updates arrive via DDP.

I am really keen on hearing how this goes!!

@maksim: Is there ongoing work on server-side integration with Meteor, as this comment on the roadmap suggests?

Yep, we are checking different possibilities in this direction.

We already have data binding with meteor collections

Thanks for the webix-meteor-data proxy. I used it to create a Webix package for Meteor. Looks very promising!

The Webix package for Meteor was so easy to use it has allowed a complete beginner like myself do things I never could imagine. This is the first time I have ever done UI development, or web development, and I cannot believe how powerful the combination is!

It’s so easy to integrate via @dandv’s package:

$ meteor add webix:webix

As I learn Webix I am getting ‘addicted’ and would like to purchase and use Webix PRO features and the Pivot widget.

But I have a problem, I am guessing

$ meteor add webix:webix-pro

$ meteor add webix:webix-pro-pivot

will not work… is there an easy way to add the PRO and Pivot to a Meteor? I could then buy this immediately!

As far as I can see, Meteor package manager allows to load packages from the global public registry currently. It will not work for commercial packages.

On other hand, you can just unzip a package in “packages” folder of the app. So manual install is possible.

@CTan - Maksim is correct: you can download open source packages from the global Meteor Development Group server (which is made searchable by Atmospherejs.com). For closed source packages, the best approach would be indeed to unzip the package in a packages subdirectory of the app.

PS: thanks for the kind words :slight_smile:

Sounds good guys, two questions:

  1. Will I remove the webix:webix package first, and then download the standard Webix Pro package in “packages”? If so, do I then also need to download the Webix Meteor Data adapter somewhere? Also I suppose I will remove the webix:webix-skins packages too and install that manually as well?

  2. It’s been fantastic to get a (e.g.) DataTable up quickly, but I’m noting Meteor’s core strength of multi-client reactivity is a little strange for UIs (everyone is getting in each others ways with selecting, sorting, filtering, etc). Is there an easy way to integrate the Meteor “Session” global object with Webix?

(1)

  • remove webix:webix and webix:webix-skin packages
  • drop webix.js and webix.css from pro ( trial ) package of webix in “client” folder of the app
  • drop meteor-data.js in “client” folder

Please grab the next version of meteor-data.js, I will update the github repo later today https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/0Eoi3LakUqTlAnS/meteor-data.zip

(2) In case of Webix components, only data is synced between clients. Sorting, filtering and selection states are separate for each client. ( if we talk about sorting and filtering through Webix API )

Great, thank you! I will try this all out!

I tried this and the web page turned blank. The favicon.ico is still displayed but I’m not quite sure where to go from here.

I removed the webix:* packages and dropped the three files (both the Webix-Pro pair and then I just tried the Webix-GPL pair) in “client”.

Is it possible there is another file I’m missing? Or some way to debug it better than “a blank screen”?

Please check the next demo

https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/drVmgFfb3ykNpHt/webix-demo-meteor.zip

Great, yes the zip file works - when I split up the webix-demo.js file into three parts and put them in their corresponding lib, client, server subdirectories (line 1 to lib/webix-demo-lib.js, the client portion to client/webix-demo-client.js, and the server portion to server/webix-demo-server.js), I get the same blank page.

Maybe there is an file load order issue?

Yep, that is a problem with an order.
Try to change the structure of file like in the next example.

https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/pZAwuayBsgaY5Rv/webix-demo-meteor-2.zip

All files of webix go to “client/_webix” folder which ensures that they will be loaded before files with custom logic.

In the CRUD app the list.url is webix.proxy(‘meteor’, Movies.find({title: /e/}))

If I wanted to change this programatically to find title containing 'Au’s, neither of the following approaches works well:

$$(‘list’).load( webix.proxy(‘meteor’, Movies.find({title: /Au/})) );
$$(“list”).define(“url”, webix.proxy(‘meteor’, Movies.find({title: /Au/})) );

I have given list an id:“list”. Nothing else has this id and changing it to something more unique makes no difference.

Both give a message: “Not unique id”, although the list is re-populated correctly.

Any ideas on this?