Angular 2.0

[pensierinmusica]

According to Brad Green at ng-conf 2015

the first production Angular 2.0 app at Google will ship in May 2015.

Is there any timeline estimate to support Angular 2.0 in "satellizer"?

Will the new release bring any breaking changes?

Thanks!

[sahat]

I don't know yet whether Satellizer will support AngularJS 2.0. It is unlikely I can make it backwards compatible with AngularJS 1.x and 2.0. There are two potential outcomes that I see:

1. Not supporting AngularJS 2.0 at all.
2. Create and maintain two versions of Satellizers.

Let's look at the adoption rate of the new "AngularJS" framework first.

[pensierinmusica]

Makes sense, my feeling is that Angular 2.0 will be massively adopted for new projects, as it's much more performant and way easier / faster to code with. So, it would be interesting to start evaluating a version of Satellizer to support it. Cheers

[LunarDevelopment]

Just to put this out there: AngularJS 2 team have said they're trying to make it as full stack as possible, make of that what you will but it'll be surprising if they don't create their own oauth module alternative.

[pauleveritt]

I'll presume that #541 is closed and this is the place to talk about this. My two cents...

• I don't think there's any evidence that the Angular2 team is working on this any time soon
• I think development in Angular2 is going to pick up quite a lot within a month
• I agree with @sahat that this can't be done in the same codebase

I don't think it's fair to ask @sahat to just do it. satellizer is an amazing project. It's been going on for a very long time, with lots of releases, refinements, and bug tickets getting closed. It really is a ton of work what he's done.

It only makes sense if he's intellectually curious about Angular2 and the whole new world (no bower, no gulp, TypeScript and ES6, decorators, etc.) If so, then perhaps the first step could be a satellizer which does many of the things, still in Angular1

• ES2015 modules (transpiled to CommonJS)
• Maybe TypeScript, maybe Webpack
• Aware of the 1.5/2.0 component router
• But still passing on Travis, coveralls, etc.

It would still work in Angular1, but it really would be a massive chunk of the transition. It might even be possible to write the class services in a way that worked between A1 and A2.

Now to the point...I don't think he should do it unless some people will give some PRs and go through this with him. I know I have a vested interest...this is probably the last piece of software preventing me from Angular2. Once the ng2-book adds its next chapter, I'm buying it and settling down for a long weekend.

[ronzeidman]

satellizer.zip utils.zip

Since Angular2 has become beta (a few days ago), I was looking into migrating my webapp to it. It was a pretty long few days and I still don't know how to create proper forms with custom validations in angular2 but I've managed to migrate the satellizer project to angular 2 (seems to work for me!)

to bootstrap it you need to something like this (AuthHttp is from angular2-jwt project):

    SATELLIZER_PROVIDERS({providers: {google: {clientId: GOOGLE_CLIENT_ID}}}),
    provide(AuthHttp, {
        useFactory: (auth: Auth, config: Config) => {
            return new AuthHttp({
                tokenName: config.tokenName,
                tokenGetter: () => auth.getToken()
            });
        },
        deps: [Auth, Config]
    })

not very pretty, but not so bad. Enjoy, and I hope you'll use it for a new repository.

Regards, Ron Zeidman

[ronzeidman]

added a new repository (for my own comfort). https://github.com/ronzeidman/ng2-ui-auth If anyone wants to use it he is welcome to do so. If anyone wants to take control over it (maybe @sahat himself) he is also welcome to do so. (BTW the previous zip files had really bad issues in them, they were fixed in my repository) Regards, Ron Zeidman

[ronzeidman]

@djarnop I was a Java/C# developer before entering the js world so typescript seems kinda logical to me (a good compromise between js es5 and a typed language)

When you first use typescript use browserify as a module loader (I recommend browserify since its the simplest, the syntax is var module = require('something') instead of import but its close) then the transpiled sorces will look readable.

After that just use typescript instead of js and gradually try to use some of its features. The most basic one is classes, just when you want to define a prototype define a class instead and see how much better it looks.

I use webstrom (which should be the same as intellij but intellij can be messy for JavaScript since it has so many unrelevant features) but I heard good things about visual studio code, you should try it and see what's more comfortable to you.

[connor11528]

For Angular 2 auth (a problem we're all going to have to solve if we migrate) check out some resources from Auth0:

• Introducing angular2-jwt: A Library for Angular 2 Authentication https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/
• Creating your first Angular 2 app: From authentication to calling an API and everything in between https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/

This library (https://github.com/auth0/angular2-jwt) could be the satellizer of Angular 2, though likely too early to tell. If anyone has some legit auth-Angular 2 examples please share. @sahat satellizer has been awesome for my Angular 1 projects

[ronzeidman]

@cleechtech auth0 libraries are great but they will never cover the actual authentication process since they cover it by authentication through their authentication system.

[connor11528]

Crap.

[ronzeidman]

@cleechtech you know you can use my repository, it works perfectly well (although resent updates in this library is not included). https://github.com/ronzeidman/ng2-ui-auth and an example: https://github.com/ronzeidman/ng2-ui-auth-example

[sahat]

I haven't checked out Angular 2 yet, but am planning to in a few weeks. Is it possible to keep Satellizer backwards compatible with both Angular 1 and 2 at the same time?

Besides switching factories to services, what else is there that needs to be done for Satellizer to work with Angular 2?

[sahat]

Auth0 actually tried to sponsor Satellizer back when I released in 2014. Their condition was that I integrate it with Auth0 as well. I had to politely decline because I wanted to keep Satellizer as a pure open-source, "do it yourself" authentication library without any ties to paid services just as a matter of principle.

[ronzeidman]

@sahat it shouldn't be hard, but you'll have to decouple the logic with the framework. Maybe split this module to core and framework specific. The hardest part will be decoupling the logic from the HTTP library. You can initialize with an "interface" and wrap the angular 1 $http and angular 2 Http with the in the framework specific models. Using this approach you can support other frameworks as well

[pauleveritt]

@sahat I think one elephant in the room is...TypeScript (or at least, ES6.) IMO, writing a library targeting Angular2, without going to TS (or even ES6), is going to be a learning adventure for a while. It might work, but you might be on your own a little bit to sort things out.

[ronzeidman]

@pauleveritt You can look at my library, it's mostly copy&pasted from this one only converted to Typescript. Typescript is awesome I don't think it's that much of a learning effort, and with looking at my code and this librarie's code side-by-side you can easily see the differences. But even without, if you split the library to core + framework specific the only library that "must" (even this is not a real must) be typescript is the angular2 one that will wrap the relevant classes. But I strongly recommend converting everything to typescript since it's much easier to consume "strong"ly typed libraries (less need to look at documentation, more compile-time errors)

[pauleveritt]

@ronzeidman Just to clear, I think taking the transpiling jump, including TypeScript, is a good idea. But it's not my project. :) @sahat would have to make a number of changes to his workflow.

@ronzeidman How hard do you think it would be to first convert this existing Angular1 satellizer to TS as a first step?

[ronzeidman]

@pauleveritt as I said, I've already done it https://github.com/ronzeidman/ng2-ui-auth edit: ohh... the angular1 one. it's pretty simple. If I'll have time next week and you want it I can help

[sahat]

@pauleveritt @ronzeidman I agree with both of your points. After my initial migration of Satellizer library to React, I quickly realized the advantage of using modules via Webpack/Browserify, plus using ES6 or TypeScript can certainly help clean up some code. The biggest advantage is access to npm modules, especially native Node.js modules like querystring and url. That alone allows me to safely remove most of Satellizer utils services.

First, I am going to convert Satellizer into ES6/TS and keep it on a separate branch, then we will see what needs to be done to make it compatible with Angular 2.

I am leaning towards ES6 since that is what I am comfortable with, but if TS is that much better, or a clear winner in the Angular 2 community, that's what I will choose.

[connor11528]

Satellizer to react, very cool! https://github.com/sahat/react-satellizer

[sahat]

@cleechtech I only started today so there is still lots of work left. But it should not be too difficult, both from architecture point of view, and because I have all that experience of building Satellizer the first time around.

[ronzeidman]

@sahat try using https://github.com/rollup/rollup for bundling, the configuration is much simpler than webpack and it seems more suited for libraries (vs full web application). TS has no really big advantage to you over ES6 since this library is not very big, but it will make adoption of the library easier for TS projects and provide better documentation. Also some editors use the created type-definitions for auto-complete even if the user does not use typescript.

[sahat]

@ronzeidman I am going to use ng2-ui-auth as the starting point for modularizing Satellizer. Do you have an email just in case if I have any questions? I am new to both Angular 2 and TypeScript, so there will definitely be things I may need some help with.

Also, I am not sure if this was answered already, but will it be possible to use the same generated code in Angular 1.x and 2? My biggest concern is whether existing Angular 1.x users can still use the new version of Satellizer which is targeted at Angualr 2. I understand that example code will have to change though.

[sahat]

@ronzeidman @pauleveritt I just read your updated comment above. That sounds good to me. Updating project to TypeScript first sounds safer than updating it to TypeScript and Angular 2 at the same, while having no experience with either tool. I started a new branch here: https://github.com/sahat/satellizer/tree/typescript/src

[ronzeidman]

@sahat you can contact me at ron.zeidman@gmail.com looking forward for your version

[ronzeidman]

@sahat I suggest (as I wrote earlier) a framework agnostic version for the "core" you could then wrap it with AngularJs, React, Angular2 and "Vanilla JS" wrappers. It will be a good start to just convert the AngularJs version directly to Typescript, then you can think of "agnostifing" the framework.

Several things you need to worry about when "agnostifing": 1) dependency injection 2) accessing global variables such as "location" 3) using an http library

1) as for dependency injection, don't use any! in the wrappers you can initialize all classes with the right parameters.

2, 3) you'll have to wrap the global variables/functions/libraries with the right interfaces. This will be a bit tiresome but I think it will make the satallizer truly framework agnostic and it will be usable in vue.js, Aurelia and any other framework that will pop up.

When you import the core classes you can ask for the right interfaces in the constructor. let's say that in the core you have Oauth1 library:

export class Oauth1 {
    [...]
    constructor(private http: IHttp, private popup: Popup, private config: Config) {}
    [...]
}

You should add the interface IHttp:

export interface IHttp {
       post(url: string, data: string, cb: (err: any, response: IResponse ): void;
}

in the AngularJs wrapper you can create

class HttpWrapper implements IHttp {
      constructor(private $http ...)
      post(url: string, data: string, cb: (err: any, response?: IResponse ): void {
            this.$http.post(url, data)
                 .then(
                         (response) => cb(null, new ResponseWrapper(response),
                         (response) => cb(new ResponseWrapper(response)
                )
      }
}

in Angular2 you might create:

class HttpWrapper implements IHttp {
      constructor(private http ...)
      post(url: string, data: string, cb: (err: any, response?: IResponse ): void {
            this.http.post(url, data)
                 .subscribe(
                         (response) => cb(null, new ResponseWrapper(response),
                         (response) => cb(new ResponseWrapper(response)
                )
      }
}

and in vanillajs you might create something like:

class HttpWrapper implements IHttp {
      constructor(private http ...)
      post(url: string, data: string, cb: (err: any, response?: IResponse ): void {
            const xhr = new XMLHttpRequest();
            xhr.onload = (e) => {
                  if (e.target.status >= 200 && e.target.status < 300) {
                     cb(null, new ResponseWrapper(e.target));
                  } else {
                     cb(new ResponseWrapper(e.target));
                  }
              }
          }
          xhr.open('POST', url);
          xhr.send(data);
    }
}

[geminiyellow]

@sahat do something like Passport? you write a framework, and others people write some plugins. you have OAuth2 common method, so why not split the code into smaller package.

[sahat]

@geminiyellow Not worth it, how many bytes can you save by splitting these ~386 characters into a separate module?

// example
github: {
  name: 'github',
  url: '/auth/github',
  authorizationEndpoint: 'https://github.com/login/oauth/authorize',
  redirectUri: window.location.origin,
  optionalUrlParams: ['scope'],
  scope: ['user:email'],
  scopeDelimiter: ' ',
  oauthType: '2.0',
  popupOptions: { width: 1020, height: 618 }
}

For Passport it makes sense, because it controls the entire auth flow. Satellizer is only concerned with client-side part of the authentication process, server-side implementations are not strictly speaking part of it.

[sahat]

I have made some progress on the typescript branch (https://github.com/sahat/satellizer/tree/typescript/src). It still only supports AngualrJS 1.x but everything has been converted into TypeScript. All factories have been converted to services in preparation for Angular 2.

Two-step build process:

1. Compile TypeScript to ES6 via tsc compiler.
2. Compile ES6 to ES5 (UMD and CommonJS) via Webpack/Babel.

The only thing I am not sure about is how would it work with a TypeScript project. Are users going to import .ts files directly or compiled .js file + downloadable typings via typings install satellizer --save?

[ronzeidman]

The main ts file can be referenced in package.json using the typings: path/to/file.d.ts: https://www.typescriptlang.org/docs/handbook/typings-for-npm-packages.html https://github.com/ronzeidman/ng2-ui-auth/blob/master/package.json#L32 to create a d.ts files add "declaration": true to the tsconfig.json: https://github.com/ronzeidman/ng2-ui-auth/blob/master/tsconfig.def.json#L10

Then there is no need for typings install they will be referenced automatically when using them from npm.

[Hesesses]

Is there any estimates when the ng2 version could be done?

[geminiyellow]

now is 2017, @sahat v2 in on way now ?

[speedfl]

ng-ui-auth is really easy to use and ronzeidman answers are fast. I am using it in an ionic app and it is working as satellizer

[mackelito]

Is there any updates on the angular2 version?

[sohail85]

any update for angular 2?

[mackelito]

Is https://github.com/ronzeidman/ng2-ui-auth the way to go? :)

[geminiyellow]

now is 2018, @sahat v2 in on way now ?

[TaylorAckley]

@geminiyellow We all know what year it is. He does this in his spare time, give him a break.

[geminiyellow]

@TaylorAckley take it easy, we all love @sahat and his satellizer. I dont need this lib anymore now, but i still want to tell sahat that i wont leave him. oh yeah~

[NicolasBlois]

Satellizer with Angular 2 .... that would be great.... :+1:

[niemyjski]

@sahat Thanks for your time, was there anything left todo on the ng2 branch or is that just a new branch? I'm curious what the status of this is. Seems since the new job / blog post all projects died :\