Universal: Enable Angular Universal with a Java backend

[jeffwhelpley]

There are a couple potential ways to do this through Nashorn. Opening this issue to start the discussion and plan out how we can achieve this goal.

[cheungtitus]

@jeffwhelpley thanks for starting this and your referral to the doc at https://docs.google.com/document/d/1a3LDFEi6xV9vNNZxjoRwIw-Z3pgj_HAZXCJe8-gkAeA/edit#. This is awesome. Given Spring has already gone GA supporting Script Based Templating on Nashorn, just wondering if compatibility with Spring is part of the plan? @sdeleuze at the Spring team does intend to support Angular 2 server side rendering as mentioned on SPR-13508 so it'd be good to see the two teams are joined up and collaborating on this front. Maybe we can invite Sébastien to discuss on the next meet up?

[jeffwhelpley]

@tbosch what do you think?

[sdeleuze]

Hey, indeed we would like to experiment with Spring support for Angular 2 server-side rendering as part of our Spring Framework 5 roadmap, and that would be awesome to be able to discuss that with you. You can find some information about our current support for isomorphic/universal applications here.

Script loader extension to load JS and resource files from the classpath is also a key topic I would be interested to discuss with you.

[manekinekko]

@jeffwhelpley last week I started POC'ing Universal on Spring. I basically wanted to write a renderer for Spring.
My work is based on the work of @sdeleuze and other resources I found on the Internet. However, I was quickly blocked, because SystemJS (and even Webpack) are not supported by Nashorn.

Here is my repo for this POC: https://github.com/manekinekko/angular2-springboot-engine (BTW, I am not a Java guy so the code may seem messy or not well designed ^^)

Here is the issue I opened for SystemJS: https://github.com/systemjs/systemjs/issues/1113

@sdeleuze I tried to contact one of your french colleagues at Pivotal, I met at DevFest Paris this year (Brian Clozel) without any success :)

[sdeleuze]

@manekinekko Thanks for your feedback and experiment. I will have a look shortly.
@bclozel reached me about you but we just had not the time to plan a meeting before our vacations.

[manekinekko]

@sdeleuze I suspected Brian was on vacation ^^
You can ping me if you need more info, we are on the same time zone

[ryancampbell]

Hey there, I'm very interested in this as well (using the latest Grails with Angular Universal). Has anyone made further progress with this?

[jeffwhelpley]

There are people working on this, but I have been out of it for a couple weeks getting ready for ng-conf. I will sync up with everyone next week and post a status here.

[ryancampbell]

Awesome thanks @jeffwhelpley
I would be interested in helping as well just don't want to duplicate work if it's already being tackled

[jeffwhelpley]

@ryancampbell I will take you up on this! Let me get back in sync with Brad on this and will reach out to you within a week or so.

[sdeleuze]

I would be very interested by an update as well since we are close to begin active work on Spring Framework 5 where we would like to experiment and potentially provide support for Angular 2 running on Nashorn.

[cheungtitus]

@sdeleuze that'd be good. @jeffwhelpley sorry I started experimenting with Spring 4's Script Based Templating a couple of months ago but haven't gotten it to work yet, and then have been occupied with multiple family events. It'd be good to indeed have us all get synced up somehow.

[manekinekko]

@sdeleuze check this my repo. We are having issues with the module loader, see more details here.

[sdeleuze]

@manekinekko Interesting, I guess we need to find the right polyfill to make it work ...

[jeffwhelpley]

I am in the process of pulling together all interested parties in the Java-Universal integration. There are a couple internal folks at Google in addition to all of you in the community that have posted here (and many more I talked to at ng-conf last week). This effort has been moving along somewhat slowly up to now, but it is time to make it legit. I think the first step will be a quick meeting of people who may be interested in contributing to this effort. If you want to simply get updates on the status, then watch this issue. If you want to be more heavily involved, email me at jeff at gethuman dot com.

[TheLarkInn]

Also interested in doing this in house, so +1

[bennylut]

j2v8 (https://github.com/eclipsesource/J2V8) just added support for linking (using jni) node.js into java applications - this may help reducing the amount of effort required for the port (instead of adapting nashorn)
didn't test it myself yet though..

[irbull]

As the author of J2V8 I'll mention a few things. J2V8 is a set of Java bindings for V8. It exposes the V8 API to Java via JNI. Yesterday I finalized the support for node.js with J2V8. This means you start node itself (not just V8), execute scripts on node, and access the node message loop. You can also register Java methods to invoke when a JS Function is called, and you can call JS functions from Java. You can also get JS Objects and traverse them in Java. I haven't published binaries of the node integration yet, but I have the code to do that (I've built it on Linux and Mac, I'll try Windows next).

[TheLarkInn]

@irbull could you paste a link to the repository? Excellent work!

[TheLarkInn]

Nvm I see it above.

[ryancampbell]

Nice work!

[TheLarkInn]

Only because I don't know Java, would you be willing to boilerplate this?

[bennylut]

I will try to make a small "hello angular-universal/j2v8" prototype and post here how it goes

[jeffwhelpley]

@bennylut that would be awesome. I am trying to get everyone together interested in this topic, but it looks like a lot of the Googlers won't be available until after Google I/O which is next week. So, I will get something on the calendar for the following week and in the meantime try to document the integration spec.

[cheungtitus]

@bennylut @irbull The J2V8 is amazing. This looks really similar to handlebars.java in that we can run the JS inside Java. Also nice is the callback. Wow. I wrote a Angular2 based front end served by a Spring 4 back end with mock data a few months ago. Will try out J2V8 to see how it goes by having it rendered on the back end instead. BTW I happen to notice the POM artifacts doesn't have the Linux version listed. @sdeleuze does this mean we need to have a J2V8ViewResolver for Spring 5?

[salmar]

@bennylut sounds great. We'll have the Spring I/O conference next week in Barcelona, would be nice to show some initial work on that direction.

[sdeleuze]

@bennylut Currently I guess the answer is yes, but ideally what I would prefer is using J2V8 through JSR 223 that we support natively. As you can see in ScriptTemplateView, we use ScriptEngine#eval(), Invocable#invokeFunction(), Invocable#invokeMethod(). @irbull Do you think that could be doable in theory?

In any case, I think both Nashorn (that is now quite good in latest Java 8 builds, and continue to evolve as part of upcoming Java 9 release to support ES6) and J2V8 are interesting to support. Usually with Nashorn, the trick is to load a small polyfil before the JS library to create (like this one for React) some JS global variables.

[bennylut]

@sdeleuze I don't see why one will have a problem writing JSR223 compatibility layer for J2V8.

Here are my two cents about Nashorn:

Nashorn is a great project, it is much faster than rhino - still not close to v8 though. But even if you don't mind the performance differences on your server side - using it can cause major headache since for each change in angular-universal or one of its dependencies one will have to test and make sure that both nashorn and its polyfills are compatible with the changes and make the proper fixes if not.

[bennylut]

Hi all, The following is a very preliminary - (but working) prototype - please tell me what you think (only works on linux 64bit, tested on ubuntu 16.04)

https://github.com/bennylut/hello-angular2-universal-j2v8

[jeffwhelpley]

@bennylut awesome! I am going to look at it in more depth this weekend, but one quick thing. It looks like you used the Universal express engine. That is just a wrapper around Universal that helps with integration to Express. I actually don't think that is needed in this case. We should be able to ditch Express and just have the Java server talk directly to the Universal lib. I need to work on a spec to make this easier, but for now, you can look at how the express engine is integrated to Universal and do something similar:

https://github.com/angular/universal/blob/master/modules/express-engine/src/engine.ts

[bennylut]

@jeffwhelpley, you are looking at an old version - please checkout the latest one - I remove the expressEngine dependency and wrote a JavaEngine instead. I still use internally code from the expressEngine implementation though.

This repository is still under work, for example I recently added multi-node support, i.e., using multiple nodejs executions each in its own thread in order to improve rendering performance in a multi-threaded environment. You can look on the README for the state of the project in addition to a TODO list - please tell me if there are important TODO items that you think I should add.

[PatrickJS]

@bennylut great work! it looks good to me. We can probably merge JavaEngine into the repo

[bennylut]

@gdi2290, thanks - I actually wanted to try and see if I can remove the need for the "server.js" glue code - If I will succeed this may change the JavaEngine.render method a little. So please tell me before merging the JavaEngine code so I can freeze the API.

UPDATE
The removal of server.js glue code can be done but after thinking about it for a while I realize that it will actually complicate stuff instead of making things easier, this is mainly because anyone can create new "server side" dependency (e.g., the LocalStorage server side counterpart) and this will be written in js. So a server specific js code will be written anyway only it will not have a single server.js entry point if I will remove it..

If anyone here is interested in this feature and think differently than me - please tell me.

[PatrickJS]

@bennylut I agree that we should keep server.ts. I like the idea of having server.ts and isolating the Java exposed methods within JavaEngine. There might be a better way of setting the template and other configuration from Java. Overall thanks! This is really exciting 👍

[Larisho]

What is the current status of this? I am very interested in using Universal with java

[sdeleuze]

I added my latest thoughts about Spring support for Angular Universal here. Any feedback welcome (here or in the JIRA issue).

[alexeagle]

Has there been any discussion of Universal for Java without Spring?

While Spring is a great framework choice for the server, it's not the only one. Some teams may already have an established server design, and just want to incrementally improve their app with pre-rendering. Taking a dependency on Spring adds complexity and is not strictly necessary.

[jeffwhelpley]

Yeah, here is a prototype using j2v8:

https://github.com/bennylut/hello-angular2-universal-j2v8

Note, though, that this prototype is using an older version of Universal and Angular itself. We wanted to hold off on the Java integration efforts until after Universal stabilized. Now that we have Universal working with the final release of Angular 2, we can revisit this effort. @alexeagle Brad gave me a heads up that you would be investigating this some more. Should we set up meeting with everyone and get this effort started again?

[alexeagle]

I found that yesterday and got it partway fixed with 2.0 final in my fork: https://github.com/alexeagle/hello-angular2-universal-j2v8

Yes, let's have the launch meeting and get it started again. I need to confirm when everyone is back from London if this will be my 80% work for the next few weeks.

BTW there is a related issue: users who define their data model in Java objects, then serialize to JSON. They'd like to type-check usages of this data in their TypeScript files and Angular templates. We should generate a .d.ts file for them. It's really similar to work we've done already for protobuf and clutz.

[olegkon]

Guys,

So is there a solution to connecting Angular2 and/or Angular Universal to Java Spring?
I am very new to Angular Universal (but not to Java, Spring or Ang2).

(trying to rewrite front end of large web app from Flex to Angular2. It also has Spring4, Flex/BlazeDS/Spring bridge, connecting to heavy layer of SQL Server stored procs).
So far I have written Ang2 prototype (skipping Java & Spring), (via HTTP/rxjs) calling from NodeJS server side SQL Server stored procs through
MSSQL client for NodeJS. So far it has no security, plan to try JWS. Makes sense?

Please advise.

TIA,
Oleg.

[MarkPieszak]

@aherreraGH Was also interested in looking into the integration, he recently got a Node instance stood up and interacting with a Java environment, so think he's already most of the way there. I can try to help show him the way the integration is being done in .NET, might help get things going!

Hopefully Universal in Java soon :taco: :taco:

[dherges]

Hi guys,

In theory there two-and-half things needed for that:

1) J2V8 running a node env /w node APIs on JVM
1b) some sort of Bridge from Spring MVC to a Renderer ... needs to
-- provide context (e.g. request URL/Path),
-- execute the main.js of an universal app,
-- capture the rendering result and
-- place the rendered contents in the app's index.html
2) Implementation of the universal app in TypeScript / ES* (requires special bootstrapping with dedicated providers afaik)

If there is anything missing or wrong please feel free to comment.

You can take inspiration from https://github.com/bennylut/hello-angular2-universal-j2v8 from what I can tell is that hardest part is 1b the bridge from Java server side framework to Angular Universal (I horribly failed at that step). 1 and 2 shouldn't be too hard to get started with.

Cheers, David

On 28 Feb 2017, at 02:52, Mark Pieszak [e-mail] wrote:

@aherreraGH Was also interested in looking into the integration, he recently got a Node instance stood up in a Java environment so think he's already most of the way there. I can try to help show him the way it's being done in .NET.

Hopefully Universal in Java soon 🌮 🌮

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[niconavent]

Hi all! I am new in angular and am doing a research about how it can be integrated with java without a restful api.
Does someone know if there is an example project that use ng4 and java as a server-side rendering backend?
I tried with https://github.com/bennylut/hello-angular2-universal-j2v8 but I am suffering errors when I try to build it.
Thanks in advance.

[swaechter]

Hi Nicolas. At the moment I am prototyping a solution that relies on Spring Boot and Angular 4 (Angular CLI + ngc with AOT) that uses J2V8 for rendering the page. I hope I am able to present a working prototype within the next week.

PS: But of course you should be able to use the renderer in any other framework

[niconavent]

Hi @swaechter! Thanks for your answer and good news. I am really looking forward to your news and to see your solution. Do you have any repo to see the partial solution?

[petercn]

@swaechter Any updates on your progress? Don't mean to be annoying but I'm anxiously awaiting any kind of Java-based Angular server-side rendering solution

[petercn]

Adding @alexeagle and @jeffwhelpley to see if they have any updates as well, thanks guys

[alexeagle]

I haven't been working on this lately, will sync with @vikerman who is the current owner.

[vikerman]

hi - I am current owner. The plan is to have a solution for this by end of June but haven't started on this yet. Expect the initial solution to land somewhere in github by end of May.

[petercn]

@vikerman Thank you, much appreciated :-)

[mraible]

@vikerman Let me know if I can help!

[swaechter]

@niconavent @petercn Sorry for not answering to your comments, there was just too much study/work things going on + I was ill and was unable to find time to polish my example.

But now I am able to provide a runnable version that is based on Angular 4, uses AOT and @angular/platform-server for rendering (Due the configuration I had to drop Angular CLI and use Webpack). You can find the project here: https://github.com/swaechter/spring-boot-angular-renderer

I plan to invest more time in the future, because I would like to use Java SSR in production and at work (Spring Boot backends, but other frameworks are of course also possible). Maybe I can also team up with @vikerman? The next steps are to fix J2V8 problems on Windows*, add preboot.js for capturing user events, add HTTP handling and live reloading. So I am really open for feedback (Create an issue or write a mail).

*For my daily work I use Linux and J2V8 works really well on Linux. It also works on Windows but I run into some strange DLL loading issues which I have to investigate in the next days

[vikerman]

@swaechter - Will take a look at your project. I was going to run Node.JS as a separate process. Will check out the J2V8 bridge solution as well. Using a binary installation of J2V8 might be problematic in certain situations. I think we should be able abstract out the communication channel between Java and Node.JS and people can choose what works for them - In-process with J2V8 or out of process IPC. Does that sound like a good idea?

[dherges]

@vikerman there is just one considerations:

if I go for IPC with node, I also could start a web server running on node, running Angular Universal on the node server and then go for a http proxy solution.

Either way, I think it's a good idea to offer both J2V8 (or Nashorn) and IPC

[petercn]

@vikerman Is any initial solution available for this yet?

[petercn]

Anyone have any updates on this issue?

[swaechter]

@petercn I published my repository as Maven library (See here https://mvnrepository.com/artifact/ch.swaechter/angularj-ssr). I plan to rename the project to angularj-universal and split it up into several modules including an example + documentation. I would also like to integrate angular-ssr to use preboot.js.

Keep in mind: My J2V8 solution based on the work of @bennylut (I owe you a beer) is only one possible implementation. If wished I can add other implementations like a solution that uses an IPC mechanism to communicate with a local NodeJS instance ( @vikerman Were you able to implement an IPC mechanism?)

[swaechter]

Sorry: I forgot to push my code to Github. Will do that now

[petercn]

@swaechter Thanks for the excellent and prompt reply :-)

[swaechter]

@petercn Everything is ready now (Drop a mail if you encounter any problems):

• Library angularj-ssr: https://github.com/swaechter/angularj-ssr
• Example that uses the library: https://github.com/swaechter/angularj-ssr/tree/master/example
• Maven Central: https://mvnrepository.com/artifact/ch.swaechter/angularj-ssr

I will invest more time in the next weeks (Finally (!) semester holidays). Although I got 10 and your followup question 7 likes, I don't really know what people/Java developer are expecting or looking/waiting for. So in case you liked these comments or are a Java developer:

• What are you expecting from a Java server side rendering project?
• What technologies are you using?
• What is missing/roadblocking? What needs to be done?

What I am planing to do:

• Integrate angular-ssr (https://github.com/clbond/angular-ssr) including preboot.js and drop renderModuleFactory()
• Rename the project to angularj-universal, split up the modules and clean up the project
• Write more examples and documentation
• Discuss an implementation that communicates with a local NodeJS instance via IPC, so there is a second implementation besides J2V8

There was also a separate thread going on, but I guess we can discuss that now here (Link https://github.com/angular/universal/issues/721).

[srinivasvsk]

This is great progress, just few things which would help for spring developers
1) We use quite a bit https://start.spring.io/ for generating starter projects, maybe adding this there would be great
2) How to integrate spring security in to this.
3) A gradle version of your example would be great

[petercn]

@swaechter For the most part I'm simply looking for an angular SSR solution which can run on a JVM rather than needing a NodeJS instance. I'll definitely take your code for a spin and I totally agree with your roadmap, especially including preboot :-) Thanks again for your efforts and hopefully Angular / Angular CLI Team will take notice and begin to officially support Java back ends. The CLI team recently added this great documentation for the Node-based setup at least: https://github.com/angular/angular-cli/wiki/stories-universal-rendering

[swaechter]

@petercn In the last few weeks I played around with several projects. You can divide them into two groups:

1.) Projects that provide CommonJS module loading and [re]implement the Node.js API:

• Avatar.js: Great, but dead
• Nodyn: Great, but dead
• Rhinodo: Great, but dead

2.) Projects that only provide CommonJS module loading directly or via shim/polyfill/third party (But no implementation of the Node.js API):

• Nashorn: Great, out of the box, but no implementation of the Node.js API
• RingoJS: Great, but no [full] implementation of the Node.js API
• Rhino: Dead, superseded by Nashorn

As you see, all Node.js re-implementations are more or less dead (I guess this is due the development speed & impact of Node.js as a project/product) and all active JavaScript-only projects lack the Node.js API.

Personally I don't think a Java JVM/Non Node.js/V8 based solution is possible at the moment because the Node.js implementation of Angular Universal uses modules like util, stream, events, fs and timers. If it's possible to rewrite Angular Universal without using Node.js modules (Pure JavaScript), it would be possible to use Angular Universal in Nashorn or RhingoJS (That would be really awesome).

[petercn]

@swaechter Thanks for that detailed feedback of your findings

[swaechter]

@petercn No problem. The integrated platform-server (https://github.com/angular/angular/tree/master/packages/platform-server) itself doesn't rely on Node.js (or I missed it), but it's third party libraries like parse5 (src/parse5_adapter.ts) and zone.js/dist/zone-node.js require Node.js. Maybe @gdi2290 and @MarkPieszak can shed some light on this if it's theoretical possible to use JS-only libraries or what their thoughts were (Would be interesting for me) :)

[ronaldjeremy]

What about https://github.com/apigee/trireme ?

[bfwg]

Hi, any updates on this thread?

[jobehi]

Hello there, any news ?

[swaechter]

@bfwg @jobehi I haven't forgotten you :)

There are several technical limitations at the moment that make it really hard to find a good and clean solution that is suitable for all environments. This was also the reason why I didn't want to release some half-working solutions.

I created a feature/discussion issue in the official Angular repo: https://github.com/angular/angular/issues/22443

[swaechter]

@ronaldjeremy I also played around with Trireme but had some out of stack/memory problems due the JavaScript optimization (I can't remember exactly).

But the bigger problem is this one from the README.md:

Trireme supports two versions of Node.js:

0.10.32. This is the default, fully-supported version.
0.12.7. This version is still a work in progress.
Support for Node.js 4.0 depends on more complete ES6 code in Rhino. The Rhino community is making progress on this but it will be quite some time before we are ready to support 4.0.

You can find the release dates here: https://nodejs.org/en/download/releases/

[Toxicable]

Closed in favour of https://github.com/angular/universal/issues/1000

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