Beginning with Meteor and AngularJS 1/2 on top of TypeScript

Probably the best starting point for Angular and Meteor combo is angular-meteor.com website. There’s a neat tutorial for both AngularJS versions – 1.x and 2.0. But it’s still JavaScript and we want TypeScript (because of reasons), right?

What really tormented me was a real usage of TypeScript with Meteor and some quirks about it, as for beginner. Spent some time around it, so I’m going to share the final result.

Ummm, Angular 2.0?

Personally, I recommend starting with 1.x. Shocked? Please, take your time.

Latest conference in London – AngularConnect 2015 (Oct 20 & 21) – showed that there are still many things that are going to be improved. Or rather – are planned to be better, meaning – still in development.

Angular Team makes a promises that some kind of migration instruction and maybe even polyfills will appear. At the moment interesting links about the topic are:

ng-forward  is for those who want Angular 2 syntax in Angular 1.x. But syntax is not the most important thing – architecture is. Most of the future upgrade effort could be taken down now just by taking route of component pattern/approach. So, instead of future fighting with new syntax, you can code directives as if they were components by trying to not use controllers. In Angular 2 you’re going to do that anyway.

Sounds weird? There’s an excellent article for those who want to refactor existing Angular 1.x code to component approach – piece by piece:

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

It’s totally worth reading, understanding and implementing.

Come on, Give me TypeScript already!

Not yet!!!

Before coding, you’re going to use a little more deterministic programming language than JavaScript so change your editor. Really. Atom together with TypeScript package or Visual Studio Code. You’re going to work with cross-module auto-completion! Awesomeness!

Code? Oh, yeah. But wait, first things first…

Create a project

Open system console, go to your Projects  directory (wherever it is) and throw some commands at it:

Done? OK. So this is a base for us.  We removed standard package  blaze-html-templates  in exchange for Angular. ecmascript  package is also removed in exchange for TypeScript compiler. Also, I assumed that everyone needs   ui-router . We remove autopublish  and insecure  because these are just prototyping pleasure. It’s enough of playing with packages, for now.

As we’re not use those, remove files generated by Meteor: recipes.js, recipes.css, recipes.html.

Setup file structure

Following the File Structure in Meteor Docs we’re gonna create some folders and files. This is my proposition for your file/folder structure:

Now, It would be best to go and create whole this structure, including empty files.

Let’s configure some for the starters.

compileOnSave/buildOnSave is for Atom – make it not compiling .ts files by itself. module: commonjs is to shut up TypeScript package error, let’s don’t bother.

TypeScript typings

Just one more thing before real code to be written (or copied). Typings.  SinceTypeScript is a superset of JavaScript it works altogether with pure JavaScript code. “Thanks to” this it doesn’t know types of many things. Here come DefinetelyTyped – huge type library for certain libraries, such as Angular-Meteor, Angular or jQuery. We’re going to install some of them – commands, go:

Now typings  folder will be created, remove it’s content. Then open tsd.json  file and reconfigure paths for ext  folder, I’ll explain in a moment:

And one more command:

You should have angular-meteor, angular, jquery and meteor typings now installed.

Why ext folder? Because from time to time it will happen that we’ll need to add something custom to global typings. While typings/ext/tsd.d.ts  contains global package typings, the typings/custom.d.ts  may look like this:

– basically, you’ll add here things that are not provided by external typings.

Finally,  typings/ext/all-definitions.d.ts  joins externals and customs together:

tsd.json  should be added to your git so on another machine instead of manually adding all typings you can just call tsd install .

Now we code

Begin with entry point of application – setup angular modules and routing:

And here’s an initialization entry point for our Angular module:

Note that there’s no need for <html>  tag, Meteor will handle this and few other things.

Recipe Controller Component

Sure, component approach is the future but we’re going to code some controller in Meteor+AngularJS+TS combo. So, again – we’ll use controller as it would be a component.

  1. we have four class fields here (look at the constructor syntax)
  2. The last line will probably cause a little shock. Well, after this file is compiled, Meteor puts it into IIFE.
  3. vm  variable is pretty handy when searching for variable usage between views or components and controllers or directives. AND it’s useful in anonymous functions (where this could be something different, depending on context) – read more about vm  in controllerAs with vm pattern in John’s Papa Angular Style Guide
  4. you can put semicolons in the end of lines but I decided to not do this

Model

  1.   _id  comes from MongoDB. It’s best to make it optional ( ?  operator) so it’s possible to create a new Recipe  without ID, it will be then created automatically. On the rest of fields you decide – optional or not.
  2.   "recipes"  is name of collection (think of it as a table in relational databases)
  3. the type  is just a helper for auto-completion that we’re going to use in controller!

Put Model into Controller Component

We’re going to subscribe for data but not just "recipes" , instead – "best_recipes"  which is published by Server like this:

Seed database

The above is just a file that’s in special private  folder which for Meteor means that’s a Server-ish thing and Client has nothing to do about it. We’re going to have a use of that fact by seeding data if there’s nothing in database:

Script above loads recipes from the file and adds one more so you can see a way to create a new Recipe.

Let’s View see

Now, we can simply bind to vm.recipes  by ng-repeat  directive as if it was an array.

Now just type meteor  in system console, wait a moment and enter http://localhost:3000. You shall see Best Recipes which are only those of rating  equal to 5.

Whole code

Full code can be found on repository here: https://github.com/Namek/meteor-angular-typescript and you can treat it as a skeleton for your app.

Final thoughts

TypeScript is great. Thanks to compilation step it prevents user from making stupid mistakes that JavaScript programmers always struggle with. While it’s not that cool in small projects, it’s definetely what big projects want.

Angular is there since 2009 so it already proved some quality about frontend development. Of course, it has many drawbacks but it showed the world that declarative approach is the way to go.

Finally, there’s Meteor. It’s almost there – in my opinion. People like it for not having to create a Gulpfile/Gruntfile but I don’t like it because of that same fact. Why? Sass package can’t have autoprefixer because Meteor team still didn’t provide a good architecture for it: issue #5129. So that’s weak. There’s even more and more struggle about Meteor but in the other hand there’s Meteor’s Reactivity which keeps us away from callback hell for data fetching and sorting. And that’s very nice.