Getting Started with Meteor and Onsen UI
Meteor is very well known as a full-stack framework that tremendously simplifies the creation of web apps. Thanks to Cordova we can also use Meteor for hybrid mobile apps and, after the last changes we made to our framework and bindings, we are excited to announce that you can find a robust Meteor Mobile UI framework in Onsen UI.
In this post we show you how to easily combine Meteor with Onsen UI to create beautiful looking mobile apps.
Why Meteor + Onsen UI?
Meteor is a great technology for web apps. It offers a high development efficiency by abstracting many aspects behind its client-server connection. For instance, you won’t need to worry about WebSockets, sending requests to modify your database or updating your local information. All of this is automatically handled by Meteor behind the scenes. It also supports several front-end frameworks, including React and AngularJS, so you can choose your preferred client flavor and develop your app with a reduced learning curve.
Onsen UI + Meteor Todo app
As already mentioned, Meteor offers variety of frameworks for its front-end side. Two of them, React and AngularJS, are already tested and play nicely with Onsen UI since we released official components for them. Here we will show how easy is to integrate React Components for Onsen UI with your Meteor application.
The source code of this application is on Github.
As a side note, if you are curious about the React syntax used in this app, you can find some information here.
There is only one tricky part we must understand to make Onsen UI work with Meteor. As of Meteor 1.4, we are able to import CSS from
node_modules folder directly in a
import ons from 'onsenui';
However, we must consider this information from their docs:
<head> tag inside
<style>...</style> after the main concatenated CSS file.
This actually means that CSS
@import lines within these files won’t be resolved. Fonts and icons won’t be loaded in the app since Onsen UI imports those in
A very simple fix is to copy the fonts CSS folders into Meteor’s
public directory. You could also make sure that Meteor processes these files in other way, but this would depend on your project configuration.
After this is done, everything will be loaded in the app and you can continue as you’d normally do with Onsen UI and Meteor.
What about AngularJS?
So far we have only faced a minor problem that can be easily fixed as well. Due to some timing issues in Meteor’s
import, we will need to include Onsen UI in our app using
require instead, as follows:
window.ons = require('onsenui');
We hope Meteor users are happy to have an alternative such as Onsen UI for their mobile apps. If you have any doubt about this content or anything else, don’t hesitate to leave a comment here or in Twitter. And don’t forget to 🌟 our GitHub repo!