Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular 2 Coming to Java and Python: The First Multi-language Full Stack Platform?

DZone's Guide to

Angular 2 Coming to Java and Python: The First Multi-language Full Stack Platform?

Although nothing is concrete yet and we don't have much details, it's probable that Angular will be ported to other languages together with its server-side side counterpart Angular Universal. By the looks of it, it's very well possible that Angular could in time become the first multi-language full stack development platform.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 release in May 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.

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:

  • Angular in non-JavaScript languages
  • Full Stack Angular in JavaScript - Angular Universal
  • 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?
  • Conclusions

Angular in Non-JavaScript Languages

This mention of versions of Angular 2 in languages like Java or Python is not something completely new, as Angular 1 itself had a Java version for GWT (angulargwt), which would compile down to JavaScript.

Angular 2 itself is available in Dart, and it's 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.

Full Stack Angular in JavaScript — Angular Universal

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.

See this latest talk for more details on Angular Universal, and especially this episode of the Read The Source podcast, where we can see Angular Universal in action (including the router part).

Notice that in the first part of the AngularConnect talk we can see an example of how to use the Angular 2 dependency injection on the server. It's 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.

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:

import {ng2engine} from 'angular2-universal-preview'; 

let app = express();

// config view engine
app.engine('.html', ng2engine);
app.set('views', __dirname);
app.set('view engine', 'html');

// config the root route 
app.use('/', function(req, res) {
  let url = req.originalUrl || '/';
  res.render('index', {
    App,
    providers: [...],
    preboot: true
  });
});

What's 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 a response the rendering of index.html with root component App

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:

@RouteConfig([
  { path: '/', component: Home, name: 'Home' },
  { path: '/home', component: Home, name: 'Home' },
  { path: '/about', component: About, name: 'About' }
])
export class App {
   ...
}

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:

import {ng2engine, NODE_LOCATION_PROVIDERS} from 'angular2-universal-preview';

  res.render('index', {
    App,
    providers: [
      ROUTER_PROVIDERS,
      NODE_LOCATION_PROVIDERS,
    ],
    preboot: true
  });

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 approach brings the best of both worlds:

  • the user gets served an HTML page that it's immediately rendered with very little startup time
  • because most of the work was done on the server side, only a minimal amount of JavaScript needs to be transferred to the client to take over the page as a SPA, this further speeds up things
  • this is ideal for mobile devices, where we want to avoid serving a large amount of JavaScript over a constrained network
  • the page is easily indexable by any search engine

Let's 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 and start it:

npm install
npm start

Now let's load a page, and inspect the HTML that came over the wire:

Angular Universal In Action

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

Conclusions

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.

It's not only about solving SEO issues for single page apps, using Angular on the server allows an enhanced user experience and provides the same app the ability to work across a wider range of devices.

Although nothing is concrete yet and we don't have much details, it's probable that Angular will be ported to other languages together with its server-side side counterpart Angular Universal.

Application code written using those ports will then be compiled to JavaScript using technologies like the GWT compiler or PythonJS.

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, it's very well possible that Angular could in time become the first multi-language full stack development platform.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
angular ,angular 2.0 ,python ,java

Published at DZone with permission of Vasco Ferreira C., DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}