Render Angular 2 in more backend JavaScript frameworks about universal HOT 28 CLOSED

Annndddd @kamilkisiela has created SSR with Universal for the Apollo stack! kamilkisiela/apollo-angular#20 (comment)

from universal.

@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

from universal.

@gdi2290 Any plan about koa 2 (async)?

from universal.

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.

from universal.

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

from universal.

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

from universal.

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

from universal.

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?

from universal.

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

from universal.

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

from universal.

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

from universal.

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.

from universal.

yeah I should add Meteor to the list

from universal.

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

from universal.

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

from universal.

@gdi2290 yep, I can try this one ;)

from universal.

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.

from universal.

closing now as Hapi is in a PR via #253

from universal.

ya, we can support koa 2

from universal.

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

from universal.

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

from universal.

@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.

from universal.

@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?

from universal.

@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?

from universal.

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

from universal.

@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.

from universal.

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

from universal.

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.}

from universal.