Introduction
Frameworks play a crucial role in writing an app; be it web or mobile; simple or complex. With advancement in technologies and tools, there is a significant range of frameworks available to choose from. However, the choice is not easy.
Developers need to consider many factors to choose the right framework for their project; pros and cons, full-stack vs. minimalist, API-driven or data-driven.
It’s important for their project to find a framework that meet a specific engineering requirement for the app while maintaining a balance between speed of development and flexibility; after all there’s no one-size-fits-all with frameworks.
Meteor.js is one of the most talked about frameworks in the developers’ community. Let’s dig deeper.
What is MeteorJS?
MeteorJS is a full-stack JavaScript platform for developing modern web and mobile apps – comprising a collection of packages and libraries, bound together.
Built on ideas from previous frameworks to offer a simple way to start a prototype app, but Meteor provide the tools and flexibility to build a full-fledged production app. It has libraries such as Tracker and Blaze that has been specifically built for a reactive front-end experience.
Meteor has a set of technologies for building connected-client reactive applications and a curated set of packages from the Node.js and general JavaScript community.
- Meteor allows developers to develop in one language, JavaScript, in all environments: web browser, application server, and mobile device.
- Meteor uses data on the wire, meaning instead of HTML, the server sends data, and the client renders it.
- Meteor embraces the ecosystem, bringing the best of the extremely active JavaScript community to developers in a considered way.
Meteor has full stack reactivity, allowing the UI to seamlessly reflect the true state of the world with minimal development effort.
Components of MeteorJS
The meteor framework is built on top of MEAN Stack and includes components such as (source: joshowens.me):
- Command Line Tool
The command line tool has everything you need that includes Coffeescript or LESS compiler support. It also has the built-in package system:
Isobuild – An isomorphic package system that enables deevlopers to easily install packages via NPM, Atmosphere, and Cordova plugins.
- Server
The server is a Node.js app built with several libraries to make the communication happen over DDP and EJSON to the front-end:
- js – A javascript server.
- Database Driver (Mongo) – A simple drive to interface with MongoDB data.
- Connect – A library to output http responses from an app
- Fibers/Futures – A wrapper library for Node.js, making it synchronous in an effort to reduce ‘callback spaghetti’.
- Livequery – A library built to query and stream out Mongo data in a reactive way.
- Communication layer
It binds the client and server together. EJSON is used to serialize and deserialize data moving across the wire via DDP.
- DDP (Distributed Data Protocol) – A protocol for sending data over websockets. Dubbed ‘REST for websockets’.
- EJSON – An extension of JSON to support serializing more data types like Dates and Binary.
- Browser
The browser part of the platform is sent over with minimal html and some javascript that loads up the environment. A lot of code is built on jQuery and underscore.js as the foundation. While the server is synchonous, browsers and javascript are asynchonous by nature. Let’s look at the libraries that help make up the client and it’s reactive nature:
- Tracker – The backbone of the reactive front-end. It is the reactive ‘glue’ for any tracker aware libraries you build.
- Blaze – A reactive library built to marry Tracker & Spacebars up to create live updating user interfaces. Similar to Angular, Backbone, Ember, React, Polymer, or Knockout – just easier.
- Spacebars – A derivation of Handlebars, built to be reactive.
- Minimongo – A client side mongo library that synchronizes data over DDP and allows the client to reactively consume mongo data.
- Session – A library to handle reactive UI state variables, nothing like a session in Rails, PHP or Node.js.
- Cordova
The Cordova integration is built into the command line tool and the package system. The cordova app will be compiled into an app, but the hot code reload will bring over new code and cache it on the local device and load that next time instead.
The Cordova interface is just built upon the same libraries as the browser, listed above.
The ability to build your app for three platforms (web, iOS, android) from one codebase will be of immense value to developers and businesses.
- The packages
The package system has a few ‘core’ packages that can easily be added, like accounts-ui or accounts-google. These packages are little libraries built to take of things like login and authentication, oauth authorization, etc. You also have user created packages on Atmosphere, like iron:router, which has become the defacto router for 99% of all Meteor.js apps.
Why to Build with MeteorJS?
The uniqueness of Meteor is hinted in its name: speed.
Meteor is an excellent choice for building a rapidly smaller, reactive applications on the Node.js platform.
Meteor is a full-stack MVC framework for Node.js that (according to experts) is a little less flexible than a more lightweight framework like ExpressJS. Using Meteor with a MEAN stack (or any variation that includes the Node platform), will help you spped up the development of Android, iOS, and web applications.
- Meteor is fast to build with.
- Develop with just one language, JavaScript
- Easy to learn.
- Meteor is the perfect solution for those looking to build real-time applications.
- Smart packages that save you time.
- Meteor makes it simple to turn your web app into a smartphone app with Cordova.
Creating your First App
(Source: www.meteor.com)
Here’s a simple app to manage a ‘to do’ list and collaborate with others on those tasks.
To create the app, open your terminal and type:
meteor create simple-todos
This will create a new folder called simple-todos with all of the files that a Meteor app needs:
client/main.js       # a JavaScript entry point loaded on the client
client/main.html     # an HTML file that defines view templates
client/main.css      # a CSS file to define your app’s styles
server/main.js       # a JavaScript entry point loaded on the server
test/main.js         # a JavaScript entry point when running tests
package.json         # a control file for installing npm packages
package-lock.json    # describes the npm dependency tree
node_modules/Â Â Â Â Â Â Â Â # packages installed by npm
.meteor/Â Â Â Â Â Â Â Â Â Â Â Â Â # internal Meteor files
.gitignore           # a control file for git
To run the newly created app:
cd simple-todos
meteor
Open your web browser and go to http://localhost:3000 to see the app running.
If you want to build an application with Meteor.js, get in touch with our team. We will help you build the best application for you and your business