Today, we’re excited to share a guest post by our customers at Visier, who provide end-to-end, cloud-based applications designed for HR professionals to answer critical workforce strategy questions. Visier is changing how enterprises approach analytics by delivering pre-built tools that combine the sophistication of predictive capabilities with the ease-of-use of consumer applications. I’m happy to say they are enthusiastic users of Typesafe technologies :)
In this post, Vincent Chu, Development Manager, shares how his team created a seed project that allows people to easily start using Angular 2 / Typescript with the Play Framework so that developers can quickly get started with new projects.
--
My team and I recently put together a small standalone project to demonstrate how Angular 2, TypeScript and the Play Framework can all come together to create an application. We ran into a few challenges in the beginning to integrate all the pieces, but once that was done, we were able to write complex web applications quickly. This blog post aims to highlight a few of the issues we encountered, and provides a sample project to help others who are also interested in this stack of technology to get started.
For those of you unfamiliar with Angular 2 and TypeScript, let me provide a little background. Angular 2 is a web application framework designed by Google, an improvement over its predecessor in many ways. One such improvement is the removal of certain modules from the Angular 2 core, which greatly improves performance. Do not fret though, these modules are still available when you choose to use them. They have also taken a mobile first approach and are targeting Evergreen browsers. TypeScript is a superset of JavaScript designed by Microsoft. It allows type information and object oriented constructs to be specified, and TypeScripts can be transcompiled into JavaScript and it is supported by most modern browsers.
Our team has been using the Play Framework as the backend for a few years, and in some of our existing projects we use the Knockout library, along with a mixed bag of other JavaScript libraries, which often leads to inconsistent code and templating in our web client code. We want to continue to to use Play, and we love the premises of Angular 2 and Typescript. The availability of classes in TypeScript can help new developers unfamiliar with JavaScript to transition from other programming languages quickly, and we want to replace our complex library mashups with a single Angular 2 framework.
With the recent release of Angular 2’s beta and as more and more developers start working with it, we want to share our Angular 2 experience with the community, so here it is!
We started with a basic Scala template of the Play Framework. You can do this by running ‘activator new’ in your console. Additionally, you will need to have Node installed on your machine as it is used to grab Angular 2 and its dependencies. We decided to go with the sbt-typescript plugin1 by BrandonArp. This was a simple process of adding a single line to the plugins.sbt file.
addSbtPlugin("com.arpnetworking" % "sbt-typescript" % "0.1.10.2-Visier")
With the plugin in place, you can run and compile TypeScript files. The type checking and improved IntelliSense in our TypeScript files were welcome. For the next step, we tried loading up Angular 2 with RequireJs, but we ran into issues with a naming conflict, as the Angular 2 library contained its own require function. Eventually, we decided to load Angular 2 with SystemJS, which did not require any additional plugins.
We grabbed the latest Angular 2 version and its dependencies at the time and added them to our library path. We use the ‘Tour of Heroes’ example2 on the official Angular 2 webpage in our standalone application. You can use the standalone project to get started on your Angular 2/Play projects, the ‘Heroes’ is merely an example of a simple way to demonstrate the integration of Angular 2 and the Play framework.
The team’s consensus was that the type safety provided by TypeScript is a welcome addition to the typeless nature of JavaScript, and Angular 2 is an exciting new framework! We hope the sample project gives a bit of motivation to start adopting Angular 2 in your applications.
1https://github.com/ArpNetworking/sbt-typescript
2https://angular.io/docs/ts/latest/tutorial/
--
We’re so grateful to Vincent and team for taking the time to share their experience with this project. You can check it out here: https://github.com/vchu-vr/angular2_play
