Angular Universal Driver

[agustinhaller]

Hi, any thoughts on what should include the Angular Universal driver?

I have been playing around and the main issue should be with the LoopBackAuth and StorageDriver that uses localStorage (which by definition is not supported in node.js).

Other considerations (things that node.js doesn't support) may be:

• cookies
• DOM interactions

But I don't know if the loopback SDK even uses these features.

Anyways, maybe we just need to avoid the LoopBackAuth dependency to get things working for de Angular Universal driver.

Do you see any other pain point or roadblock?

[jonathan-casarrubias]

Hey @agustinhaller

It is always great to have more people involved in this project.

So... Talking about the Angular Universal driver; it is actually more challenging than the pure Web or NativeScript because it's the only environment that runs in both client and server, not just in client, nor just in server.

Let me elaborate; when you select a driver between Web(View) or {N}, the loopback-sdk-builder generates the files that correctly call for the dependency or api that makes use of a provided local storage mechanism.

• In web we have the window.localStorage object that allows us to store data in a web browser.
• In NativeScript there is an AppSettings object that allows to store data in the device.

Then using the factory method the builder provides with the right driver transparently, so it internally uses the same API letting the driver factory to chose between the right dependencies, therefore the rest of the core modules ignores in which environment is living.

The fact that NodeJS does not have a native localStorage implementation is not the issue, actually there is a library that fully implements the specs in NodeJs.

But... Due the nature of Angular Universal; that only runs in the server just for the very first time and then angular takes control in the front end and continues being a regular front end application is where the challenge is.

Think in this Use Case:

1. You are a new user accessing a platform in universal.
2. Angular Universal renders the very first time you enter the platform.
3. At the moment you register you are not running in the server anymore.
4. After a successful register/login is the front end driver that stores in the user browser not the server.
5. If you refresh the page, the server will render again for 1 time, but the storage data is in the user client browser.

So, it is much more challenging because as I can see, the session will need to be stored in both, server and client. Otherwise:

1. If we store only in the front end, every time the user refresh the browser, will need to login.
2. If we store only in the backend, every time the user changes sections in the front, will need to login.

We could just avoid using the Auth functionality but then what Angular Universal will render is just a login/register page according your authentication mechanism.

As you can see this needs to be handled in both the front-end and back-end therefore it should be a mechanism that replicates the user session in both sides, I already have the solution in my mind, but I needed to finish first everything related to pure web and nativescript.

Fortunately this week I'm working only in the final fixes I expect to start working in the solution for Universal soon, since it will need an integration similar to the one I did with the loopback-component-pubsub and the loopback-sdk-builder.

Cheers!!!
@jonathan-casarrubias

[BoLaMN]

Hey Guys,

Just thought I'd share the route I took, may or may not be helpful.

https://github.com/BoLaMN/loopback-angular-sdk
https://github.com/BoLaMN/loopback-angular-sdk-module

instead of building every factory it instead generates a JSON structure the angular provider iterates thru and generates the factories.

removes the need for User.$prototype__order_get and instead allows new User.order()
works with nested routes.
removes undefined, empty arrays, nulls etc... before post.
JSON based sdk file size is tiny compared to official module.

I only wrote it as I needed nested route compatibility but feel free to rip it apart if there's anything u can use.

Cheers

[jonathan-casarrubias]

Hey @BoLaMN thanks for sharing your solution, I will take a look on it and see what helps in here.

Is just that the every day the loopback-sdk-angular and the loopback-sdk-builder are more far in terms of design, functionality and scope.

I'm interested in understanding the nested routes necessity you have so we may implemente something like that, but it would be great if you elaborate with an example and by creating a new Issue so we don't make noise in the Angular Universal topic.

I really appreciate you being collaborative and I hope to see you around.

Cheers!!!
@jonathan-casarrubias

[jonathan-casarrubias]

NOTE: Angular Universal is low high priority for now due the many changes and conflicts it has with

1.- Local and Remote Storage
2.- Material Design not working with Offline Compiler
3.- Angular Router 3.x implementation is WIP

[jonathan-casarrubias]

I will start working on this driver when the following is implemented:

angular/universal#511

Keeping a reference for tracking purposes

[jonathan-casarrubias]

angular/universal#526

[jonathan-casarrubias]

This task depends on the FireLoop Integration, I will move this for a further version since 2.1.x will be for FireLoop

[John0x]

Could you give a rough date when a working version for this will be available?
I would be happy to test it in production.

Kepp up the great work!

[jonathan-casarrubias]

Hey @John0x Thanks for reaching out, so... I'm really close to add this feature I almost have all the pieces needed for this.

It will be delivered within the new FireLoop Platform Beta during the next following weeks. It will be the icing on the cake.

Stay tuned.

Cheers
Jon

[jonathan-casarrubias]

Ok @John0x @agustinhaller I have been implementing this within the FireLoop cli as an option when you create an angular 2 app.

Since I'm not reinventing the wheel, of course I delegate some commands to angular-cli and then I continue doing configurations like installing the @mean-expert's modules.

So... Since the angular-cli universal branch is still not merged I tried to use the universal branch from git but it does not work, it seems the references are being differently installed and when the FireLoop cli spawns the ng new command it is unable to find a bunch of references.

For now I need to keep using the angular-cli@beta.18 when building the web client applications, but I will keep working in integrating the server-side part within the loopback server.

Once the universal branch is merged into master and published, I will try again and connect the last piece of the puzzle.

Thanks for the patience on this feature, but when is done... with zero configurations and just 1 command you will get

1.- Front and Back Ends ready to go (FullStack TypeScript)
2.- SDK Builder Automatically Installed across.
3.- FireLoop Real-Time Module installed
4.- Angular Universal automatically connected and served.

The last 2 pieces in here will be

1.- Client side automation (app.browser, app.node) delegating to angular-cli
and once I have a basic version of universal connected then I will:
2.- Implement the authentication in both sides, client and server (But now we have much more tools for that)

[John0x]

@jonathan-casarrubias, that sounds grat! Thanks for the hard work :)
Could you by any chance start with imeplementing the authentication in both sides first? It would only affect the services or am I wrong?
Would love to see that, since I need it currently.

[jonathan-casarrubias]

@John0x yes I will progress on the other parts before the cli#universal is integrated.

I just got some bug issues that I will need to fix first and then I will move back to universal, right now is a priority, I will integrate it first than {N} or Ionic

[jonathan-casarrubias]

Ok so now I'm working on it, I have a basic integration again. I wanted to wait to the angular-cli team to integrate universal, but I don't see many support in that branch, so I decided to transform a regular angular 2 app to universal using the FireLoop Generator.

I have a working version of an angular universal app running within a FireLoop environment.

Now I need to automate all of that configurations and add the option when building an angular 2 for web app using FireLoop CLI.

I will be releasing an experimental version with this features in the next couple of days.

After that, I will now try to fix the auth issue... I did some research but was unable to test since I didn't have an angular universal environment running, but now that I have and it will be automated, now I will be able.

So, expect news about this feature really soon..

Cheers
Jon

[John0x]

@jonathan-casarrubias great, I've got authentication working in my universal project so feel free to contact me in case you need assistance :)

[jonathan-casarrubias]

Hi @John0x, thats so cool man... I think I also have fixed it by using DI swapping? what approach did you take for this? Right now I'm integrating everything within the FireLoop CLI so you get universal projects with SDK and FireLoop real-time installed.

[John0x]

@jonathan-casarrubias yeah, I've implemented my cookie store using DI swapping. Works out pretty nice.
I thought about storing the token in local storage, but that wasn't really viable.

I took a look at your generated models/services generated by the sdk builder and I'd suggest to use a base class for most of the crud stuff. That would reduce the file size drastically and make it more maintainable.

[jonathan-casarrubias]

@John0x I did implemented the cookie service using DI Swapping also, is much more reliable. About the services lets move into the other topic so we leave anything related to Angular Universal in here.

Cheers!!
Jon

[jonathan-casarrubias]

Ok Angular 2 universal has been integrated into the SDK, will be released under version 2.1.0-rc.1