Angular 2 is getting near the final release, and the whole community is really excited about the possibilities that it will bring. But the latest announcement a couple of days ago about the likely final included one important quote about the future of Angular:
With Angular 2, we’re really attacking it from a ‘platform of capabilities’ standpoint... Our plan is to have versions that will work with many server-side technologies, from Java to Python
Further than that, it was confirmed in one of the keynotes of Fluent that the same applies to PHP. Also at the Microsoft Build conference, the future availability of Angular in the PHP, Java and .NET platforms was again confirmed (see this presentation).
Let's go through what this quote might mean in terms of using Angular for full stack development in multiple ecosystems, by going over the following topics:
- Advantages of using Angular also on the server side
- The Angular Universal Starter
- Server side Angular - a nice to have, or a whole new way of thinking?
Angular 2 itself is available in Dart, and its internally built in Typescript. But the possibility of making it available in other languages and platforms other than Dart is something else completely.
The possibility of using Angular on the server is something that is currently being worked on, via the Angular Universal project.
Angular Universal is a core Angular project for enabling the use of Angular 2 on a Node.js server for the purposes of server side rendering.
Notice that on the first part of the AngularConnect talk we can see an example of how to use the Angular 2 dependency injection on the server. Its worth mentioning that this could be done also without Angular Universal, as a way to structure a server app into decoupled modules.
This is an example of the benefits of using the same technology across the whole stack: the same dependency injection container could be used on the client and on the server.
Have a look at this post to see how dependency injection can allow to develop functionality that behaves differently on the client and on the server.
Overview of how Angular Universal works
What Angular Universal provides is a view rendering engine for express, which is in everything similar to any other express rendering engine, such as the Jade or Mustache template engines.
To see this in action, this is a simplified version of what an express server rendering Angular 2 components looks like:
Whats going here is the following:
- we configure express to use as view rendering engine the Angular Universal engine
- the engine is configured to render html files
- the root route
/is configured to return as response the rendering of
index.htmlwith root component
There is another important element going on, the Angular router is also active on the server side.
How does routing work in Angular Universal?
The root component
App contains router-specific annotations:
The meaning of these annotations is clear on the client side: navigation will update the HTML5 Browser history instead of triggering a full page refresh, creating the enhanced experience that single page apps are all about.
But on the server side, what does the router do? On the server, the router is configured differently than on the client:
Notice that a server side location provider is passed to the application. The way that the Angular 2 router works on the server is that if the user gets sent a direct link to some route inside the application, for example http://yourdomain.com/someroute, the server side version of the router will then take the route path
/someroute and use it to determine which component should be rendered.
The result is that the client gets served a fully rendered html page, but then the client side router takes over the application. The user will still have the single page experience with no further server side re-rendering being triggered.
Advantages of using Angular also on the server side
Server side rendering has become popular for example in the React community, as it allows product organizations to build single page applications that do not suffer from search engine indexability issues, and give the user a much enhanced user experience.
This aproach brings the best of both worlds:
- the user gets served an html page that its immediately rendered with very little startup time
- the page is easily indexable by any search engine
Lets now see all this works together in practice, and then how all this links back to the announcement of Java and Python versions.
The Angular Universal Starter
The Angular Universal project provides a separate repository to quickly start a new project: the universal-starter. Let's install it and start it:
npm install npm start
Now lets load a page, and inspect the html that came over the wire:
We can see that the server parsed the component tree and sent back the html, with only a relatively small script at the bottom of the page containing the registrations of the application browser event handlers.
We can also see that the HTML that come over there was produced in a node server, but that could have been produced by any other server technology: Java, Python, etc.
It would suffice that for that particular language to have a version of Angular Universal that works exactly the same way as the Node version. This would allow Angular to be used instead of traditional server-side templating engines.
We can see that using Angular in both the client and the server brings several important advantages besides uniformity and the fact that there are less technologies to learn.
Its not only about solving SEO issues for single page apps, using Angular on the server allows an enhanced user experience and to have the same app work in a wider range of devices.
Although nothing is concrete yet and we don't have much details, its probable that Angular will be ported to other languages together with its server-side side counterpart Angular Universal.
It would be possible to port only the framework, but the benefits of a full stack approach and server side rendering are really important.
By the looks of it, its very well possible that Angular could in time become the first multi-language full stack development platform.
Want to Get Started With Angular 2 ?
If you enjoyed this article, we invite you to subscribe to the Angular University Newsletter (see box bellow).
In case you are just getting started with Angular, but also if you have some experience with it, you might want to have a look at our course on Youtube which is under development:
Looking for other Angular 2 Learning Resources ?
Check our top 10 list of Angular 2 Resources:
Other posts on Angular 2
If you enjoyed this post, here some other popular posts on our blog:
- Angular 2 Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
- Angular 2 Router - Extended Guided Tour, Avoid Common Pitfalls
- How to run Angular 2 in Production Today
- How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular 2 Forms - Template Driven, Model Driven or In-Between
- Angular 2 ngFor - Learn all Features including trackBy, why is it not only for Arrays ?
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular 2
- How does Angular 2 Change Detection Really Work ?