Some thoughts about Angular2-Meteor and suggestions for new people

angular
1

These are my some personal thoughts about Angular2-Meteor project after using it a while, hope it can benefit the community.

Socially tutorial is a well-written tutorial, but it just helps you understand how you can connect Angular 2 and Meteor. It took me a while to realize this. For real use case, you need more.

For a real project, you need follow Angular 2 pattern. For example, you shouldn’t subscribe data in component, instead you should do it in the service (how to use service is not covered in Socially tutorial, but service is very very important). If you subscribe same data in different components, the performance is very very bad.

For the package angular2-meteor-accounts-ui, it is just for demo show and for quick prototype. I would not use it in any of my real projects. The reasons are below:

  1. You don’t need @RequireUser(). A better way is to limit user access in router level. Write a custom Directive which extends RouterOutlet. This only needs one file, instead of using @RequireUser() in every component. And it can let you write complex logic easily to control your the access.
  2. You don’t need @InjectUser(). If you have custom fields rather than profile field of the user, you still need subscribe by yourself. And if you subscribe the currentUser data in different components. It will make the performance very very bad.
  3. For a real project, you also need custom your sign up and login UI.

Without using angular2-meteor-accounts-ui, you need write your own currentUser service with RxJS 5 (BehaviorSubject in this case) and use dependency injection. This can make your app at least 10x faster instead of resubscribing same collection again and again.

Note RxJS 5 is not necessary, but once you start to use it, it will help you save a lot of time writing codes and make your app logic clean! You will find RxJS 5 is soooo amazing! (Note EventEmitter uses Observable inside, but not enough). Most time, you still want to use BehaviorSubject, ReplaySubject, or AsyncSubject from RxJS 5).

Most questions you will meet in the future is actually either Angular 2 or Meteor problem. Angular2-Meteor is just help connect Angular 2 and Meteor.

Angular 2 and Meteor are very big. So learn Angular 2 and Meteor separately, go deep, and then use them together! Keep learning!

8 Likes
2

Thanks for the info Hongbo! Really appreciate it!
Are there any plans to provide an example account-ui package using RxJS 5…?

3

I don’t have any plan yet. But I probably provides some samples if I got some free time. : )

1 Like
4

Could you give an example of how to implement Angular2 services with Meteor publications?

5

Yeah, I will provide some codes and write some places that need to pay attention here this weekend!

6

Thanks for the great insight, @Hongbo_Miao.
I completely agree with your observations. There should be some best practices document. Subscribing to collections all over the application through components is really dangerous for creating excessive memory consumption. And using services is the key design pattern in Angular 2, as well as using RxJS observables.
Looking forward to your code samples.

7

Very nice writeup @Hongbo_Miao !
as always, you are one step ahead and helping everyone!

I see Socially as a tutorial that starts with the to make it easy for beginners and first timers to start but then it should progress to real use cases and more best practices.

I would love to add chapters and into in there for more advanced scenarios.

Feel free to ping me and have a chat about what should we add in there

2 Likes
8

Yeah, I would love to help!

9

Okay, I post it here: Subscribe data in Service using RxJS 5 .

1 Like
10

Can you please help me to ’ how to connect to mysql in angular2-meteor’. please provide me an example how to create connection and fetch data.

Thanks.

11

I haven’t tried mysql with Meteor. But this may help.

And another thing is Apollo from Meteor. You can have a look. It is in early stage though.

12

Just add some info, when I write this post, Angular 2 is still in alpha, now a lot of things have changed and improved.

For example, now you can use guard from new router to limit user access for certain pages.

13

Just few small steps:

  1. Install mysql
    meteor npm install --save mysql

  2. Install typings (optional)
    typings install dt~mysql --save --global

  3. Createt source file :

import * as mysql from "mysql";

export class MySqlPoll {

    my_connect;

    handleDisconnect() {
        this.my_connect = mysql.createConnection(Meteor.settings['mysql']);

        this.my_connect.connect(function (err) {
            if (err) {
                setTimeout(this.handleDisconnect, 2000);
            }
        });

        this.my_connect.on('error', function (err) {
            if (err.code === 'PROTOCOL_CONNECTION_LOST') {
                this.handleDisconnect();
            } else {
                throw err;
            }
        });
    }

    public server_update() : void {
        this.handleDisconnect();

        try {
            this.my_connect.query(SqlQuery.MY_QUERY, Meteor.bindEnvironment((err, rows, fields) => {
                if (err) console.log(err);

// ...............

            }));
        } catch (e) {
            console.log(e);

            return;
        } finally {
            if (this.my_connect)
                this.my_connect.end((err)=> {
                    if (err)
                        console.log(err);
                });
        }
    };


}

I had to use bindEnvironment for some reason back then, but plan to change it to something better may be wrapAsync??

1 Like
14

Hi everyone.
Maybe worth mentioning we have updated our libraries to support the latest Angular 2.0 stable.
Please try the new angular2-meteor@0.7.0, angular2-compilers@0.6.2_1 and the latest Angular 2.0.

We’ve update the Socially 2.0 tutorial and the Blaze to Angular 2 migration tutorial for reference - http://www.angular-meteor.com/migration/angular2/intro (Whatsapp clone is on the way)

Sorry for the long wait, it was very hard to keep up with Angular 2 releases in latest months.

If you find issues, please open new ones on the Github repo.