[Announcement] TiMeteor beta released: Complete Meteor API for Titanium - Feel free to contribute

Hi everyone,

I apologize, for this not being a question, but i very proud of what i have done and i want to share it with the community.

I just released TiMeteor, which adds the full Meteor API to your Titanium app. Meteor is a javascript only framework to build web apps, which communicate through websockets and all data is fully synced up, this allows you to program in a "reactive" way. TiMeteor gives you a full Mongo API in your Titanium apps, which is automatically synced up with the real MongoDB of the meteor server. You can observe changes of Mongo querys, build up reactive dependencies through Meteor's "Session" functionality, subscribe to Collections, call RPC Methods, and even use the meteors user system. I also added a "Plugin" to TiMeteor which helps you to interchange login tokens from the native side and webviews, so you can seeminglessly switch between native Views and web content.

TiMeteor depends on websockets, so you have to include the tiws module from iamyellow. It is working in Alloy and Classic on Android and iOS.

With a few lines of code you can connect your app to the Meteor Server: app.js/alloy.js

var TiMeteor = require('ti.meteor/meteor');
_ = TiMeteor._;
 
Meteor = TiMeteor.Meteor;
Package = TiMeteor.Package;
Deps = TiMeteor.Deps;
Session = TiMeteor.Session;
Accounts = TiMeteor.Accounts;
 
// add ti.meteor specific plugins
 
TiMeteor.WebView = require('ti.meteor/plugins/webview');
 
// initialize Meteor and connect to your server
TiMeteor.init({
    host: "localhost",
    port: 3000,
    use_ssl: false
});
 
// Declare and subscribe to a Collection
Projects = new Meteor.Collection("projects");
 
var dep = Deps.autorun(function() {
    var projects = Projects.find().fetch();
    console.log("projects: "+JSON.stringify(projects));
    return Meteor.subscribe("projects");
});

The reactive nature of Meteor allows you to program your Titanium apps in a completely new way. You can automatically update your UI Elements on Database changes.

For example a basic Alloy controller looks like this with Meteor code:

showProject.xml

<Alloy>
    <Window>
        <View id="content">
            <Label id="title"></Label>
            <Label id="subtitle"></Label>
            <Label id="text"></Label>
        </View>
    </Window>
</Alloy>

showProject.js

var comp = Deps.autorun(function() {
    var project = Events.findOne(Session.get("selectedProject"));
    $.title.text = project.title;
    $.subtitle.text = project.subtitle;
    $.text.text = project.text;
});
 
$.showProjectaddEventListener("close", function() {
    comp.stop();
});

The magic happens in the Deps.autorun() function. The Deps system allows you to observe changes made to variables. The callback function inside "autorun" is called everytime a reactive data source inside the callback (like the Mongo query or the Session variable) changes. So when the content is updated your label will also update, when you change the Session variable "selectedEvent" in another Window or view the change will also be automatically applied and different Mongo Query will be executed.

---

You'll find the library on Github

https://github.com/moritzknecht/TiMeteor

This is a very early beta, and my first major OSS release, so i need a bit help of the community: I will release demo apps in the next week and i will update this thread when they are commited.

Meteor is a huge library so it couldn't test anything, i you find bugs please raise issues on github.

I'm not happy how this is packaged up, if you have any idea how to distribute this in a better way (with gittio), please tell me. (I cannot use compiled CommonJS Modules because of its limitation to one file per module).

I appreciate any feedback on the library, the documentation and code.

thanks for your attention!

Moritz