Render Angular 2 in more backend JavaScript frameworks

[PatrickJS]

Frameworks

• [x] Express.js (PatrickJS)
• [ ] Meteor.js
• [ ] Sails.js
• [ ] Koa.js
• [x] Hapi.js
• [ ] Total.js?
• [ ] ActionHero.js
• [ ] Loopback

[PatrickJS]

@robwormald yo, do you think you can do sails.js?

[robwormald]

somebody would have to essplain to me how it works, but yeah, in theory. a universal socket.io observabley angularSails would be the bees knees. cc @mikermcneil

[PatrickJS]

I have the express.js version here atm (you can ignore the ./build_scripts technical debt) (reads an html file then replaces the with a serialized string version of the ng app inside of the html string) https://github.com/angular/universal/blob/master/modules/server/src/express_ng2engine.ts so it would be great to figure out ways to ensure server rendering especially resolving subset of resources to be rendered vs pushed to the client

[robwormald]

Okay cool, looks pretty straightforward.

Let's imagine I had a ng2 service / "model" that exposed a Users.find() method, and client side I would inject it into my component and make an Http request to populate a ng-for list.

It appears server side id just use the injector to replace that User service with a server side Model, hand it a component and boom goes the dynamite? More or less?

[ashsidhu]

@gdi2290 I can start working on Koa.js first and then Hapi.js.

[robwormald]

Sails is definitely more batteries included than the others, so it might need a bit more thinking.

Good news is that Sails models all return promises, and I'll be doing a client side lib as well to mirror the Model APIs (Foo.create/update/etc).

Does/should ngUniversal work with pipes? Specifically the async pipe, as that would nicely work with both server side promise methods and client side observable methods (and then automatically push out change sets via websockets, natch) with minimal overhead.

Pretty sure I can hook into the render methods (it is just express under the hood after all). I'll have a crack at this tomorrow.

[PatrickJS]

For Universal (isomorphic) the best approach is having a source and a cache. For example let's say we have a simple model

class Model {
  constructor(public source, public cache) {
  }
  find(id) {
    let cache = this.cache.get(id);
    return Promise.resolve(cache || this.source.get(id));
  }
}

Having these two separated allows us to change the dependencies per environment. An example of a Server cache could be Redis while on the Client is localStorage. The source would allow you to choose the socket.io/xhr on the client or socket.io/http.get on the server. The cache logic can live either in the model or source itself and also keep in mind source is the same as $HttpBackend in ng1

[robwormald]

Also cc @Urigo as I spent some time preaching the Observables gospel with him today

[PatrickJS]

async pipe will be supported with a whenStable angular feature that waits until all microtasks are finished. The problem here is determining which how many times you run change detection for the desired outcome.

[PatrickJS]

yeah I should add Meteor to the list

[PatrickJS]

yo @ashsidhu any updates on the Koa.js version?

[PatrickJS]

@manekinekko do you think you can do the Hapi.js version?

[manekinekko]

@gdi2290 yep, I can try this one ;)

[PatrickJS]

@manekinekko hold off on koa.js since generators in typescript isn't fun (only compiles to es6) but if you can do Hapi.js that would be awesome

[jeffwhelpley]

So, after we have angular2-hapi-engine merged, let's close this issue. I would rather open separate issues for each implementation when we need/want them. No need to open them all at once. Just when they are needed. It should take long for each engine as the need comes up.

[PatrickJS]

closing now as Hapi is in a PR via https://github.com/angular/universal/pull/253

[lightningtgc]

@gdi2290 Any plan about koa 2 (async)?

[PatrickJS]

ya, we can support koa 2

[lightningtgc]

@gdi2290 I can't find any code for this. Have you done it? Anything I can do to help？

[PatrickJS]

you can look at how we;re handling express and convert it to koa (although the express engine needs to be refactored)

[jeffwhelpley]

@lightningtgc check out

https://github.com/angular/universal-starter/blob/master/src/server.ts#L35

and

https://github.com/angular/universal-starter/blob/master/src/main.node.ts

You should be able to translate these into Koa pretty easily (it's just setting the route handler and engine basically) and for the most part this is all you need to know for how to integrate to Universal. Let us know if you run into any issues.

[lightningtgc]

@jeffwhelpley @gdi2290 Thanks!I will make a koa 2 version. Actually when we run this project in webstorm(on macbook pro and mac mini ), it will occupy a lot of memory,and then the IDE crashed. I think something wrong here?

[jeffwhelpley]

@lightningtgc you say when you run this in webstorm. How are you running it? Is your code public and available that we can check out?

[MarkPieszak]

@lightningtgc When you do an npm start from the top level? (This runs the examples on port 3000)

[lightningtgc]

@jeffwhelpley I meant that WebStorm（V10.0.2) will scan files to index automatically when I open this project(just git clone current project) （after I run 'npm install'）, after it finished scan, the IDE will crash. It looks like has a lot of files to scan, the progress is very slow.So I need to use Vim or Sublime to develop on my mac mini.

@MarkPieszak Yep,I can start the example.

[jeffwhelpley]

oh. @lightningtgc do this:

1. from the command line while webstorm closed, run npm install
2. open up webstorm
3. right click on node_modules and exclude the folder

[Urigo]

Annndddd @kamilkisiela has created SSR with Universal for the Apollo stack! https://github.com/apollostack/angular2-apollo/issues/20#issuecomment-226844324

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}