niieani
commented
7 years ago I'd just like to add that Phase One is mostly done. Rendering HTML of the app, including routing works as expected, today. The one remaining bug that I found is that all the href attributes pointing to a route, render as href="undefined". We'd need to run more tests for other things, but aside for this small bug I was able to run the skeleton navigation fully on the server.
One more caveat is that we cannot currently render SVG elements, as jsdom is missing SVG polyfills.
Phase Two is very simple, and I'd estimate it at one or two days of work. In line with the forward-thinking of Aurelia, I would propose Koa.js instead of Express. It is developed mostly by the same team as Express, but is based on ES6 concepts like Aurelia, as opposed to Express which is built on top of ES5. Koa's APIs are very similar to Express, with the main difference being that Koa is based on Promises and ES6 Generators, whereas Express uses callbacks.
Phase Three and Five is what I think is the hardest and will take the most time.
EisenbergEffect
rquast
Kukks
jlaustill
chulian1819
JeroenVinke
stalniy
masoudtahmasebi93
AmitM30
flieks
inmchfw
behzad888
Alexander-Taran
vanderstack
We want to implement server-side rendering for Aurelia as this is an important feature for a number of scenarios within our community. It's also key to continued adoption of the framework as well as library relevancy. Below, I've outlined five phases we need to move through. Reaching Phase Four would be considered a successful, v1 implementation. Phase Five is an important optimization (and probably the most difficult task here).
Phase One: Running Under Node
Basic App
The first test to pass is being able to run a simple Aurelia app under node and produce a string of HTML. This doesn't need to involve any web framework integration. It should be possible with pure Node. Goals of this test are:
Components
The second test of this phase involves creating a couple of custom elements and leveraging the
composeelement, producing an app with more parts. With this in place, we want to be able to accomplish the same three goals as above.Navigation App
The final test of this phase is to add the router and set up two or three routes. We'll want to feed the route location into the app, possibly by having another history implementation. With this in place, again we want to accomplish the same three goals as above.
Phase Two: Serving From Express
Once phase one is complete, independent of any framework, we want to begin integrating this with a web framework. In the end, we'd like to make it simple to integrate this with any framework, but for our first step, we should build with Express. At the end of this, we want to take the final test app from phase one and be able to render it to the browser with Express. The Express server should respond correctly to the browser's location by serving the correct route.
This phase gets us the most basic form of server-render, which can be used to satisfy SEO requirements.
Phase Three: Continue (Simple)
In phase three we need to write a small, ES5 library that is able to patch the server-rendered Aurelia output with a client-side running Aurelia app. This library would need to capture input from the user before the Aurelia app is ready in the client, then coordinate with the aurelia framework to swap the server rendering app with the new client-rendered version. Finally, it will need to pass along any captured user events to the client app for processing. For example, if someone clicked a button before the client-side app was finished loading, that needs to be captured, stored and then replayed when the Aurelia app is ready.
When this phase is complete, we have what most people in the community would call "feature complete" server rendering.
Phase Four: ASP.NET Core Integration
With everything running in the native JavaScript environment, we then want to start branching out into other environments. .NET is a huge section of our community and we've got new customers in the .NET space whose plans are contingent on this feature. So, we want to work with Steve Sanderson and the JavaScriptServices project to get full integration of server render into their ASP.NET Core projects.
When this is done, we can probably ship v1.
Phase Five: Continue (Optimized)
Immediately after we get to this point, we'll want to look for ways to optimize the client-side continuation code. Instead of regenerating the entire app on the client, we should look to build something similar to Aurelia's progressive enhancement capability, that rather than creating DOM, uses the DOM that is already present. It's more complex than enhance though, since binding has already taken place, repeaters have already rendered, etc. We just need to connect up component classes and bindings and "continue" from that point on.