Support for Angular2

[cajoy]

Is anyone working on SDK for Angular2?

[arimus]

Yeah, I'm also curious if Strongloop is working on building out support for this or waiting for the community to go down that road first.

[bajtos]

Hi @cajoy, thank you for raising this request. We don't have any immediate plans to support specifically Angular2.

I haven't looked at the differences related to data access between Angular1 and Angular2, could you perhaps point me to a short overview?

In general, I would like to move away from angular-specific client API like ngResource, because the subtle differences between Angular client API and LoopBack server API are confusing and adds support overhead. I'd like to see a client API that is as close to the LoopBack server API as possible. I see two ways how to get there - a) modify the code generator to emit a different API or b) improve our universal/isomorphic client to support different HTTP backends (see strongloop/loopback#1211 and of course strongloop/loopback#989).

@daslicht +1 What about React ?

That's off topic, please open a new GH issue in https://github.com/strongloop/loopback to discuss.

[cajoy]

For those who might be interesting I've created base model for extending. There is just couple of endpoints implemented..

https://github.com/cajoy/falloutlab.com/blob/master/client/scripts/models/BaseResource.ts

and model example:

https://github.com/cajoy/falloutlab.com/blob/master/client/scripts/models/PerkModel.ts

usage as simple as

                perkResource.upsert(perkModel)
                    .then((record: PerkModel) => {
                        console.log(record);
                    });

[CWSpear]

Now that Angular 2 is in Beta, it is worth discussing this topic further.

Angular 2 got rid of the $scope.$apply and similar concepts. The regular vanilla "isomorphic LoopBack" in theory would work.

So you may not need an Angular specific SDK... you can just build up your isomorphic LoopBack story and provide a better onboarding for that way of using it (perhaps a lighter weight bundle or at least specific instructions on how to get started with Angular 2/various frameworks). (As an aside, perhaps "universal LoopBack" (see https://medium.com/@mjackson/universal-javascript-4761051b7ae9#.ud7guco7k) would be a better name.)

[JonnyBGod]

I agree with @CWSpear. And would like to add that api requests should be placed outside controllers and directives and live on services.

"There is nothing specifically Angular about services. Angular itself has no definition of a service. There is no ServiceBase class."

Because Angular2 services are plain simple classes the isomorphic Loopback can be used.

I would like to propose adopting ES2015 for an improved implementation. This would bring the code up to date and we can easily compile to ES5 if needed. Also we would end up with much closer code to Angular2, React, and any recent framework.

As an extra, I would very much like to have a generator for redux-loopback. Happy to help with it. Redux e framework agnostic and is getting a lot of traction. After using it with React, I am currently playing with ng2-redux and it play really well with Angular2.

The main problem with "Isomorphic Loopback" is that it looks way long before it is usable. It is way too big for web usage and lacks customization. I will probably be testing swagger-codegen to generate javascript clients based on loopback-swagger definition until we get a good Javascript Loopback SDK.

[CWSpear]

So I have been having a hard time getting "isomorphic LoopBack" working. I tried building the bundle with browserify via the example (it was almost 3 MB!) and couldn't actually ever make it work.

The current lb-ng tool created a build from the config in https://github.com/strongloop/loopback-example-isomorphic that was about 92 KB (and the vast majority of that was jsdoc, which would go away in minification)... when we're talking about the web here, that's a massive size difference.

So yeah, pretty much what @JonnyBGod said: some sort of generator like the lb-ng tool, but that just makes framework agnostic builds of the models so we can require them (or whatever we want!) and be on our merry little way.

The current state of "LoopBack in the browser" isn't really viable for anything outside of Angular.

[edit] #989 does look promising. It'd be nice if it didn't strictly require browserify, too, which doesn't appear to be explicitly mentioned, but hopefully will be a side-effect of all the changes.

[jonathan-casarrubias]

It would be awesome if a framework agnostic JavaScript SDK is built, and event better if it provides some sort of adapter to customise how request are being done, perhaps you want to use standard -lets say official- adapter using XMLHttpRequest, but maybe you want to use angular2/Http, so you could be able to create an adapter and use it instead of the XMLHttpRequest getting as result Observables from RxJS.

This concept is being used by the socket.io clustering feature, where they provide a standard adapter that you can extend like the redis-adapter or mongodb-adapter, an sdk like this could work within any modern framework, and still can be flexible enough to be customised in the way requests are being done.

My two cents (and willing to cooperate)

[JonnyBGod]

After looking a bit deeper into this subject my main thought is: Why reinventing the wheel?

For most of us, creating api servers we probably need to provide many different clients for our customers as well as our own frontend clients. So why not just build this on top of swagger-codegen?

There are templates for most of the languages out there and also found templates for angularjs and a new (work in progress) one for angular2.

So in my opinion what we need is a small tool to help easily generate all the clients we need based on swagger-codegen. Something like:

lb-gen -l angular2 -o ./sdk/angular2
lb-gen -l java -o ./sdk/java

or even better:

lb-get -l angular2,java,go -o ./sdk/

We already have loopback-swagger for generating the specs and all.

[ilkkanisula]

+1

[villelahdenvuo]

👍

[mi9rom]

Hi @ottojimb ,
Unfortunately you need to port the LoopBackAuth as well + custom login,logout, unless you don't care included functionalities.
I'd been looking for sth like this but failed.
Regards :)

[jonathan-casarrubias]

@mi9rom I have the same concern, there is logic behind to really integrate with LoopBack.. I'm still not sure using swagger is the right option

[JonnyBGod]

The loopback specific logic can be dealt with separately.
We could go with many different approaches, create a small generators for that if this we want to try and tackle custom configs or just create a repos with templates.

I would probably go with the second option and create a tutorial on how to extend these templates with custom options. This part of the projects tend not to change that much. After you create the base behaviour of your apis the auth process his pretty static. Changes are model related. This is my experience at least. Correct me if I am wrong.

[jonathan-casarrubias]

I still disagree, the same Angular2 SDK will have differences in terms of implementation between NativeScript2, Angular2 For Web or Angular Universal.. I honestly see too much work in the second option and too long to wait a release, we have been using qeti and mnvx's fork for a while now and is the fastest way for those -like me- who can not follow such a slow rhythm.

I extended from their fork and working on my necessities that goes beyond auth, it includes socket communication for the loopback-component-pubsub, and much more.. but anyway, I think that is time to have a community based builder rather than wait forever before we can even get just 1 Angular 2 compatible skd for web or spend any time getting small pieces together using the swagger option.

So.. I'm working on an unofficial loopback-sdk-builder that address all of these necessities.

Also I want to include support for react, so renaming the project make so much more sense.

Anyway, that is just my opinion : ) (This is a free open source community).

Cheers,
Jon

[jonathan-casarrubias]

I just published a tutorial of how to use these modules, for those who may be interested:

The Ultimate Guide for building RTA

Cheers!!
Jon.

[ottojimb]

@mi9rom, @jonathan-casarrubias, thank you!! I'm agree with another real SDK for angular2. Completely unaware of other options and my intention was sharing how I was doing.

[jonathan-casarrubias]

@ottojimb thanks for your support.

Currently the most mature version of the builder is for NativeScript, please beware that I just gave a small amount of support for the Angular2 for Web Version.. I think it works, but is not optimal... Since I think I'm done this week with the NativeScript one, I will work next week on porting everything so we have same functionality according the Web Environment, for this I mean... to support web sockets and loopback configuration, that was not implemented by qeti and mnvx.

Still I think the Angular 2 SDK for Web works, so if you want to start playing with it is already compatible with Angular 2 RC.

I will be announcing when the Web Version is fully ported...

Cheers,
Jon!

[bajtos]

For anybody stumbling across this discussion while looking for an Angular2 client for LoopBack: there are few community-driven solutions available:

• loopback-sdk-builder
• Use Swagger Editor to generate a client, see Support for Angular2 #188 (comment)

[djabif]

Hi @jonathan-casarrubias thanks for sharing your solution!
Will it work with Angular2 for TypeScript?

[jonathan-casarrubias]

Hey @djabif yes!!! If you build a SDK for Angular2 it will be fully compatible with TypeScript, since it provides services, models and interfaces.

Cheers!
Jon

Features

• Built in LoopBack Authentication.
• Built in Support for LoopBack Query Language Querying Data
• Built in Interfaces and Models.
• Built in API Calls.
• Built in PubSub support for the loopback-component-pubsub.
• Built in Platform Specific Drivers (Angular2 for web, NativeScript2, Angular Universal).
• Built in CLI Tool for builder.
• Built in Logger Service.
• Ability to select which models or methods to generate.
• Ability to point models to different url domains (not global baseUrl)
• IO Heartbeating to avoid disconnections.
• Fully Typed (TypeScript).
• Extendable Models for custom logic.
• Small foot print 100k per generated SDK (Will increase depending on number of models).

Installation

$ npm install --save-dev loopback-sdk-builder // DEPRECATED

$ npm install --save-dev @mean-expert/loopback-sdk-builder // STABLE

SDK Builder Documentation

Read SDK Builder Documentation

Angular 2 SDK Documentation

Read Generated Angular 2 SDK Documentation

UPDATE

1.- We are heading to version 2.0.0-rc.1; all of the features and doucmentation are already there for ng2web, NativeScript and I'm working now in unit tests, once I finish with these I will be publishing the release candidate.

~~2.- Release Candidate 1 has been published today, now it is strongly typed and models are extendable to allow custom logic, aside of the full list of features you already know.~~~

Thanks to all the supporters!!!

Cheers!!!
@jonathan-casarrubias

[levantoanbkit]

Dear sir @jonathan-casarrubias , @bajtos
I am working on Ionic2 Beta version and also want to integrate with Loopback framework. I am very interested when was known about loopback-sdk-builder, but I am not sure whether can it work with Ionic2 Beta (AngularJS 2)? Please help me, can you share your experiences about my difficulties?
Thank you so much!

[jonathan-casarrubias]

@levantoanbkit it should work with Ionic 2 by using the ng4web driver.

Please read the loopback-sdk-builder README and build your SDK for Ionic 2 as if it were for web 😃

Cheers!
Jon

[levantoanbkit]

Thank you so much! @jonathan-casarrubias

[jonathan-casarrubias]

🎉 Aloha LoopBack SDK Builder 🚀

I'm really exited to notify anyone interested in generating a LoopBack SDK for Angular 2; that after several months of hard work the first LoopBack SDK Builder Stable Release is already online.

Featuring Angular 2 Final API with NgModule Support, New Wiki Docs, New Mascot and More:

$ npm install --save-dev @mean-expert/loopback-sdk-builder

Features

• Support for Angular 2 (Final API w/ NgModules & Backwards compatibility < RC5).
• Support for TypeScript (Fully Typed).
• Built in Interfaces and Models.
• Extendable Models for custom logic.
• Enables Support for Real-Time Applications loopback-component-pubsub
• Built in LoopBack Authentication.
• Built in Support for LoopBack Query Language Querying Data
• Built in API Servics.
• Built in Platform Specific Drivers (Angular2 for Web & Progressive Apps, NativeScript2, Angular Universal).
• Built in CLI Tool for builder.
• Built in Logger Service.
• Blacklist mechanism to select which models or methods generate.
• Ability to point models to different url domains (not global baseUrl)
• IO Heartbeating to avoid disconnections.
• Small foot print 100k per generated SDK (Will increase depending on number of models).

[AurelieV]

@jonathan-casarrubias great news !
Does the SDK support cookie authentication or does it need token as the angular1 version does?

[jonathan-casarrubias]

@AurelieV for now it does use token authentication, but I'm thinking in support cookie authentication as a possibility when Angular Universal is supported by the builder, that is in the roadmap for version 2.1.0, check here

[phra]

big up for @jonathan-casarrubias!

[AurelieV]

@jonathan-casarrubias be able to choose will be very appreciate :). I will check if it's easy or not (only have to not send and store the token so)

[jonathan-casarrubias]

@AurelieV is a challenge, because Angular Universal only renders the page the first time is loaded in the browser, then Angular 2 takes control in the front end, so it can be partially implemented.

Please subscribe to this thread for progress on this topic.

Cheers!!!
Jon

[levantoanbkit]

Thank your team so much!

On Wed, Aug 24, 2016 at 9:31 PM, Jonathan Casarrubias <
notifications@github.com> wrote:

@AurelieV https://github.com/AurelieV is a challenge, because Angular
Universal http://universal.angular.io only renders the page the first
time is loaded in the browser, then Angular 2 http://angular.io takes
control in the front end, so it can be partially implemented. Please follow
the thread
mean-expert-official/loopback-sdk-builder#36
for progress on this topic.

Cheers!!!
Jon

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#188 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ARSy_RYuuHd1tElFhOqmTe_w4usBBoAjks5qjFWtgaJpZM4GVqJ6
.

[bajtos]

I'm really exited to notify anyone interested in generating a LoopBack SDK for Angular 2; that after several months of hard work the first LoopBack SDK Builder Stable Release is already online.

Featuring Angular 2 Final API with NgModule Support, New Wiki Docs, New Mascot and More:

@jonathan-casarrubias congratulations! I am personally very happy that you managed to make this happen and wish you many happy users & contributors.

@crandmck I am proposing to add a link to our documentation pointing to this Angular2 SDK, what do you think?

I am closing this particular github issue as done.

[jonathan-casarrubias]

Hey @bajtos thanks a lot for your nice words!!!

It also would be wonderful if you guys can add a link from the Official Documentation to the Angular 2 SDK Docs.

There is a good amount of people migrating already to NG2 and would provide a better experience for them to land directly from the official docs and not by digging in the web.

Again thanks for your words and your support.

Cheers!!!
Jon

[crandmck]

Added a doc page: https://docs.strongloop.com/display/LB/Angular+2+SDK

NOTE: We're in the process of migrating the docs to GitHub in https://github.com/strongloop/loopback.io and you'll be able to add more details there, if you wish, once we start accepting PRs. (Still lots of work to do on http://loopback.io/doc/ so not yet!).

[jonathan-casarrubias]

Hey @crandmck thanks for adding the section and absolutely I can contribute to the documentation once you start accepting pull request, I will be looking forward for it

Cheers!
Jon