read
I've completed a tutorial series using Angular 2.0 + Meteor. Find it at Angular-Meteor.com.

There are stacks of stacks. Overflowing. But what makes a great stack? Were it only the name, we'd all be slam dunkin' with LEBRON (LevelDB, Browserify & Node).

Our fascination with stacks stems out of the following question:

What if a large community could get behind one common set of tools?

This is the path Meteor is paving. And it might sound excessive, but Meteor is more than just a fullstack framework. It is a set of integrated tools that make your developer life easier & more comfortable.

If you're unfamiliar with Meteor, it might help to compare it to the MEAN stack, as they share a lot of the same components.


Meteor Angular-Meteor MEAN
Front-End Blaze Blaze / Angular Angular
Backend Meteor Meteor Express
Database Mongo Mongo Mongo
Reactive? Yes Yes w/ Socket.io
Build Meteor Meteor Grunt / Gulp
Packages &
Modules
6000+ 6000+, 1500+ 1500+
CLI? Yes Yes No

That's right, Meteor is basically your dream MEAN setup. Side note: for a more forward looking stack than MEAN, consider KOAN.

In this article, we'll look at the good & bad of combining a front-end framework like Angular with Meteor. If you're interested in React-Meteor or perhaps a future Ember-Meteor hybrid, stay tuned as well, as the discussion is still relevant.


Why Meteor?

Meteor provides a great developer experience. Seriously, read more. For developers unfamiliar with Meteor, I'll review some key features:

1. Purposeful File Structure

Where you put files matters. As a readability bonus, devs end up structuring their apps similarly.

  • /client: only runs on the client
  • /server: only runs on the server
  • /private: secure resources
  • Other directories run on the front/back isomorphically
  • More.
2. Smooth, Elegant Data Flow

Moving from the client -> server -> DB becomes one process.

  • Data is reactive, meaning it updates itself (using observables)
  • Re-use the same code for the client & server models. (I was trying not to use the word 'isomorphic').
  • uses publish & subscribe to pass only the data & fields you need securely
  • Meteor.collection provides sugar over the MongoDB API
  • Meteor comes with Mini-Mongo, a Mongo-ish database on the client that updates immediately while waiting for the official MongoDB confirmation. Aka: latency compensation
3. Complete CLI

No more Grunt/Gulp/Webpack process. It just works. For front-end devs: think of the Ember or Ionic CLIs.

  • Create: meteor create appName
  • Build: meteor
  • Hot reload: done.
  • Deploy: meteor deploy app_name.meteor.com
  • Generate iOS & Android SDKs (Cordova): meteor install-sdk android, meteor add-platform android, meteor run android
4. 'Smart' Packages

More powerful than NPM, and NPM works with Meteor as well.

So maybe now you're thinking: if Meteor's so awesome, why throw Angular in the mix?


Angular + Meteor?

There are several options for combining Angular & Meteor; however the one I'll focus on is the highly integrated and extensive angular-meteor. This package allows Meteor to work in Angular via the ($meteor) service. As a brief example:

vm.items = $meteor.collection(Items).subscribe('items');

The above code reactively subscribes to the 'items' published from the server and supplied from a Mongo collection called Items. Think of it like AngularFire, only self-hosted, no array complications & you can manipulate the data on the server.

Angular-Meteor's creator, Uri Goldshtein, has also created Meteor packages for ui-router & Ionic. There are currently 160+ other angular packages on atmospherejs.com.


Why Angular over Blaze?

I should reiterate: Blaze is great. Not great enough to get it's own logo, but it is much easier to learn than Angular, Ember or React. Some would argue that you don't even need Angular, but I'll point out a few areas where I feel Angular makes more sense. Again, the choice largely depends on the project as well as developer experience/preference.

Directives over Selectors

Like jQuery, Blaze relies on selectors to perform actions. I find Angular's declarative format much easier to follow and less likely to spiral into spaghetti code.

Blaze

    <template name="example">
        <a class="select">Click me</a>
    </template>

    Template.example.events({
      'click .select': function () {
        // action
      }
    });

Angular

    <a ng-click="select()">Click me</a>

    // or as a fully encompassed directive

    <clickable-item></clickable-item>

But are selectors really more confusing? I use a great project, TelescopeJS for my site www.tryangular2.com. A recent breaking change from the class 'upvote' to 'vote', meant I had to hunt down and change many references over multiple folders & files. Declarative code is not only more readable, but also much more manageable.

Polished

Overall, Angular can provide a much more polished front-end product than Blaze. A lot more work has gone into Angular, providing sugar over all kinds of edge cases. I'll provide a common example using forms.

With Blaze, forms are commonly created using the autoform, simple-schema & collection2 aldeed packages.

Blaze

    Users.attachSchema(new SimpleSchema({
      password: {
        type: String,
        label: "Password",
        min: 8
      }
    }));
    {{> quickForm collection="Users" id="userRegistration" type="insert"}}

This same Schema that validates the model on the client & server also elegantly generates the form. I love this.

Angular In Angular, forms are more work - even if you choose to use angular-formly library. However, Angular & Angular-Formly provide much more flexibility and power.

I'll take an example from my own template-library using angular-formly: Formly LumX. Side note: I haven't updated this library in a while and no longer use it.

    vm.fields = [{
        key: 'password',
        type: 'input',
        templateOptions: {
            label: 'Password',
            type: 'password',
            required: true,
            minLength: 8,
            pending: 'Validating password...'
        },
        validators: {
           'passwordIsStrong': {
               'message': 'Sorry, your password is not sufficiently strong'
           }
        },
        modelOptions: {
            updateOn: 'keydown blur',
            debounce: {
                keydown: 100, // ms
                default: 100, // ms
                blur: 0
            }
        }
    }];

Though it takes much more code, you're able to have a lot more control over your forms including specific error messages, validators, pending messages, and deciding exactly when to process this validation based on user input. It's not as elegant, but it can provide a smoother user experience.

Opportunity: Auto-form to Angular-Formly Meteor package?

Scalability

You might also want to take scalability into mind. At Google, it's not abnormal for a team of 100 developers to be working on the same front-end app. Thankfully Angular's module system helps prevent most name-space collisions, while Angular 2 aims to make this namespacing issues a thing of the past.

Meteor, on the other hand, relies heavily on dangerous global variables shared between the front & backend. Some of this can be overcome by using TypeScript modules to organize your code, while other globals are daringly considered a feature, such as Sessions. There is currently a proposal to deprecate sessions in favor of reactive dictionaries.

Progress

Consider Blaze hasn't received an update in over two months, whereas AngularJS and Angular2 are actively worked on and receive updates nearly every day. The web moves fast, and as developers you need to keep a step ahead. Where is the ES2015 support in Meteor 1.1? I hope the Meteor Developer Group can get more help in this area, otherwise, it remains wise to select a more future ready front-end solution.

Note: You can get ES2015 support now by using Meteor-Babel or Meteor-TypeScript-Compiler. Thanks @UrigoGoldshtein

Performance

Blaze, despite the name, is not that fast or memory efficient. Even one of the most obvious improvements, template caching, is still in the works. This is an area where Blaze can greatly improve.

Angular 2 over Blaze 2

Built with speed & performance in mind, Angular 2 seems like a clear choice. It already seems to integrate quite cleanly with Meteor. Blaze 2 is also in the early proposal phase.

The Best of Both Worlds

Angular has a lot to offer Meteor on the front-end. Blaze is great in it's own right. Luckily, you don't really have to choose and may use the two together. However, if you do, you might want to consider some problematic areas.


Angular-Meteor: the Friction

Like cheese & chocolate, putting two awesome things together doesn't always make it better. There may be some friction involved.

Besides the additional bloat, performance may be an issue. Performance problems generally come down to the weakest link in the chain, and adding more links does not bode well.

A hopefully temporary source of friction lies in one of Meteor's other features: automatic file loading. In Meteor you don't have to deal with <script> tags or import/exporting your files. Meteor has it's own file loading conventions that make a lot of sense once you get used to it. Unfortunately, the new-angular-router tries to provide it's own sugar over load order by automatically generating paths to templates. Essentially, two well meaning developer shortcuts create disagreeing templateUrl paths.

Conclusion

The reality is, Meteor has a lot more to offer Angular than the other way around. The Meteor team has looked at the big picture and come out with a lot of insightful developer friendly solutions. Keep it mind that while choosing a different front-end framework over Blaze is largely a matter of developer preference, it can also create a more polished & performant product.

Meteor aims to bring a community around a common set of tools, but some developers want to switch out some parts of that tool kit. In short, Meteor is like an MacBook, when sometimes you just want to switch out the hard drive. Unique customization is possible, but takes more effort.

I'm glad to see the Meteor team has grown to embrace different front-end solutions, hiring staff to work on Angular-Meteor & React-Meteor. I look forward to Meteor 1.2, and hope that these projects can become more integrated, especially as Angular 2 rears it's head around the corner. In the meantime, try not to be too mad that this www.tryangular2.com is built with Meteor.

Note: You can use Angular without Blaze by using the angular-meteor-platform. Check out more Angular-Meteor Packages from Planet-Training. Thanks @UriGoldshtein

A great place to get started with Angular-Meteor is with the extensive 20 step tutorial. I'm also currently working on a fully featured Angular-Meteor Boilerplate, featuring my favorite Angular & Meteor packages, happily, together. Because... JavaScript.

Blog Logo

Shawn McKay

Published

Image

ShMcK

JavaScript Web Dev

Back Home