droidunite

Please welcome our friend Uri Goldshtein of the Meteor team as a guest author as he walks us through using Angular 2 with Meteor and describes some exciting future capabilities. -- Brad Green, Eng Director of Angular

Angular 2 + Meteor: the Javascript stack of the future

Intro

Meteor is the easiest way for an Angular developer to become a full stack developer, extend Angular apps to become full stack web and mobile apps and leverage your existing knowledge.

Last week, after months of development, Meteor released a huge milestone - Meteor 1.3. Together with the amazing progress of Angular 2.0 we reached a very exciting point where both platforms are now naturally integrated and it’s easier than ever to create a full stack app with Angular and Meteor. In this post I will bring you up to speed with recent updates and why Angular Meteor is now a better stack for Angular developers then it has ever been.

Meteor 1.3: Integrated with the wider ecosystem

Meteor is a full stack JavaScript Platform that takes care of everything you need to build web and mobile apps: Database, server, communication, client side and mobile support. It supports full stack reactivity out of the box so that any change in the DB can propagate all the way to the clients UI in real time. It is completely open source and it’s the easiest and fastest way to create a full stack app from the ground up. It has been integrated with Angular for the past year and a half with the Angular Meteor library.

The recently released Meteor 1.3 includes many features that makes Angular developers feel even more at home.

The version had two major goals:

Align the Meteor platform with the latest innovations in the JavaScript ecosystem
Based on production customers feedback, make Meteor better for building, scaling, and testing large scale production apps

Here are the main new features that made those two goals possible:

npm integration

With Meteor 1.3, you can use npm directly to integrate the whole Javascript ecosystem into your apps. It means that to include `angular`, `angular2` or any other library like `ui-router` or `ionic`, you can just use `npm install` like you would with any other app:

npm install angular angular-meteor ui-router --save

Native ES2015 modules support

Meteor is bringing the best of JavaScript to you in one package, so Meteor 1.3 natively supports ES2015 out of the box. In 1.3 that also means full support for ES2015 modules both on the client and the server:

import {Component, NgZone} from 'angular2/core';
import {Parties} from '../collections/parties.ts';

...some lines skipped... @Component({

...some lines skipped... templateUrl: 'client/app.html'
})
export class PartiesList {
parties: Mongo.Cursor;

constructor () {
this.parties = Parties.find();
}
}

Built-in application testing

With Meteor 1.3, you have build-in support for both unit and integration tests with your favorite testing tools like Mocha and Jasmine. We’ve also updated all tutorials to include unit and integration tests:

import 'angular-mocks';
import { Meteor } from 'meteor/meteor';
import { assert } from 'meteor/practicalmeteor:chai';
import { sinon } from 'meteor/practicalmeteor:sinon';

import todosList from '../todosList';

...some lines skipped...

describe('controller', function() {
describe('addTask', function() {
var controller;
var newTask = 'Be more fabolous';

beforeEach(() => {
sinon.stub(Meteor, 'call');
controller = element.controller('todosList');
controller.newTask = 'Be fabolous';
controller.addTask(newTask);
});

afterEach(() => {
Meteor.call.restore();
});
});
});
})

Cordova improvements

Meteor’s hot code push module has been completely re-written in native code to make it more robust and to save bandwidth and battery life. Also, the new integration now supports WKWebView out of the box. If you are writing an Ionic based app, those improvements will be a huge for you

Livedata improvements for scale

Meteor’s real-time database layer has improved to give more flexibility to operate more efficiently in high loads.

Meteor guide

An official guide from the Meteor team with best practices for writing large Meteor apps. Many of the code samples are written using Blaze, Meteor’s default templating system, but all of the principles can be applied to Angular apps as well.

This means that Meteor is now not just the fastest and easiest way to create full stack apps, but also lets you smoothly scale up your codebase as your team and user base grow.

Angular 2.0 and 1.5

Angular 2.0 is a revolution compared to Angular 1.x in terms of handling data. The way Angular 2.0 handles data gives us the opportunity to write a very simple data syncing layer for Meteor. Now you can use Meteor’s native APIs like any other Meteor application and Angular 2.0 code like you would with any other Angular app.

That means that as an Angular Meteor developer you can use solutions and knowledge from all the Meteor community, no matter what front end framework they use.

Angular 2.0 Meteor:
import {Component, NgZone} from 'angular2/core';
import {Parties} from '../api/parties.ts';

...some lines skipped...@Component({

...some lines skipped...

templateUrl: 'components/partiesList/partiesList.html'
})
class PartiesList {
parties: Mongo.Cursor;

constructor () {
this.parties = Parties.find();
}
}

Inspired by the changes in Angular 2.0, we also refactored our Angular 1.x data solution to give you the ability to write your app using native Meteor APIs.

Angular 1.x Meteor:
class PartiesList {
constructor() {

...some lines skipped... this.helpers({
parties() {
return Parties.find();
}
});
}
}

Best practices

Meteor 1.3 together with the new features in Angular 1.5 (Component, One way bindings, etc..) makes it very easy to follow Angular’s best practices from the new Upgrading from 1.x article on angular.io. That is thanks to the out of the box ES2015 modules support and the new Meteor Typescript package.

So we re-wrote all of our Angular 1.x tutorials to fit with Angular’s best practices including splitting everything into components, modules, testing, using Javascript ES2015 and using Typescript on the client and server.

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import {Parties} from '../api/parties.ts';

...some lines skipped...

class PartiesList {
constructor() {

...some lines skipped... this.helpers({
parties() {
return Parties.find();
}
});
}
}

export default angular.module('partiesList', [
angularMeteor,
]).component('partiesList', {
templateUrl: `components/partiesList/partiesList.html`,
controllerAs: 'partiesList',
controller: PartiesList
});

Future proof stack

Moving to Angular Meteor gives you not only a great stack now, but also makes it easy to stay updated with the latest features that JavaScript has to offer.

Today, Meteor is the community leader in terms of moving data across the stack, and we are already working on the next generation of data integration based on GraphQL. Any app and stack will be able to use Apollo, giving Angular developers a step into the best and latest things GraphQL has to offer. With future releases of Meteor, you will get the best platform for GraphQL based apps, with a clear and easy update plan from today’s technology.

When you pair that with the Angular 2.0 platform which pushes the limits of front end technology with support of multiple renderers, web workers, animations, server-side rendering, internationalization and endless features, you know your stack is covered to support the latest things that the web can do, both on browser and mobile.

Community

The Angular Meteor community has grown a lot in the past 2 years. Angular-Meteor developers have pushed both technologies forward, sharing knowledge, standards, tools and best practices between Angular and Meteor, having a huge impact on those technologies and the whole Javascript community.

Join the growing Angular-Meteor community today and try out Meteor’s and Angular’s latest features - click here for the first tutorial on meteor.com and here for the advanced tutorial on angular-meteor.com