When Google introduced the beta of Angular 2 earlier this week, it did so with the help of more than 1,300 contributors to the Angular open-source project, not the least of which was Microsoft.
Indeed, Google wrote Angular 2 in TypeScript—Microsoft’s superset of JavaScript. The Angular engineering team also used Microsoft’s Visual Studio Code editor, which is now in beta. Visual Studio Code (VS Code) is a code editor redefined and optimized for building and debugging modern Web and cloud applications. The open-source VS Code supports Windows, Linux and OS X.
“We’ve written Angular 2 completely in TypeScript, and we like it for many reasons as a thing we will recommend to folks who will adopt Angular 2,” Brad Green, Google’s director of engineering for Angular, told eWEEK.
However, TypeScript is not required. “You can continue to write in ECMAScript 5 or today’s JavaScript,” Green said. “You can write in ECMAScript 6 using a transpiler like Babel or TypeScript. TypeScript also will do plain ECMAScript 6 [ES6]. Or you can go to TypeScript or Google’s Dart language. So we support a number of different languages you can use. We do expect from the surveys that we’ve done with many developers that they will be choosing TypeScript as their primary language.”
Jules Kramer, technical program manager for Angular at Google, described Angular—also known as AngularJS—as a JavaScript development framework that is an open-source project from Google, built in collaboration with Microsoft, in a video shown at Microsoft Connect 2015 about the framework and Google’s work with Microsoft on it.
Unlikely Partners?
“A lot of people are surprised when they hear that we built Angular with Microsoft,” Kramer said. “Angular is built with TypeScript, which is a language Microsoft’s provided to improve JavaScript.”
Moreover, she said, “many of the Google devs on the Angular core team use Visual Studio Code because it lets them work better together. The code readability and navigation features of the code editor help them be more productive and refactor code faster. As an open-source framework, Angular is contributed to by hundreds if not thousands of people around the world. Angular simply would not be what it is today without that collaboration—especially with Microsoft.”
Anders Hejlsberg, a founding member of the TypeScript team at Microsoft, said the Microsoft and Google teams actually spent a lot of time together improving their technologies and the collaboration speaks to the power of open source. Green said the teams “share the same soul,” which enabled them to work so well together.
“Using Visual Studio Code and TypeScript lets us find bugs and refactor our code faster, and that has given us a lot more time to make Angular 2 itself better,” Kramer said. “And we found out we’re not really alone on that. We recently surveyed about 2,000 developers and found that about 45 percent of them were also using TypeScript for their Angular development. So there’s a lot to love about Google and Microsoft working together on an open-source project.”
Al Hilwa, an analyst at IDC, called Angular 2 a very innovative project with healthy community support where the Google team is doing some great open-source collaborative work.
“Teaming up with Microsoft and aligning with Typescript is a moment of clarity in the industry that we need more of,” Hilwa told eWEEK. “Angular 2.0 itself really makes some significant improvements in performance and also in simplifying a bit this complex framework. Aligning with the evolving Web platform is a smart thing to do rather than retain some of the older constructs. I think adoption will build out slowly at first, but it will eventually absorb Angular 1.0.”
In addition, third-party developers are picking up the ball and moving with it. Toolmaker Telerik is lauding the technology and the collaboration between industry giants.
Google Leans on Microsoft for Angular 2 Launch
“TypeScript brings a lot of productivity features that server-side developers love to the JavaScript world, such as type checking and API auto-completion,” said TJ VanToll, a senior developer advocate at Telerik. “We at Telerik provide first-class TypeScript support in NativeScript, and having the same TypeScript support in Angular 2 makes it that much easier for us to integrate the two frameworks. The best thing is neither Angular 2 nor NativeScript depends on TypeScript, which means developers that want to use TypeScript get the benefits they’re looking for, and those that don’t aren’t forced to use the language.”
Google’s reason for supporting TypeScript in the first place was that the team saw it as a solid language with functionality it wanted to use. In addition, it wanted to support a number of different languages. At Google, Dart—a language developed by the company—is popular, and externally ES6 is popular.
“We also saw a need for big teams to use a typed language to be able to build apps that scale so we could communicate across many different members without having to talk to each other,” Green said. “And that they could have a better tools experience, particularly in their editors—such that the editor would do a lot more refactoring for navigating their source code and helping them find bugs. These were the main reasons we liked TypeScript and that we recommend it to our developers. But it also lets us generate versions of Angular for all of these other languages because we’ve got this rich typing information in our source code.”
Still, the big things Google has delivered in Angular 2 include performance, where Angular 2 is about eight times faster than Angular 1 in terms of rendering UI updates. The team also dramatically simplified how apps are built with the new version. “We’ve got a new syntax we’re using for templates that allow you to bind directly to properties in the DOM [Document Object Model] at events,” Green said. “It gets rid of about 43 of the directives that we had to ship in Angular 1. So just by these two moves you had to do a ton more just in your templates.”
Meanwhile, Kramer called Angular 2 “blazingly fast” as compared with Angular 1, and the team also made it a lot simpler so that it’s easier to learn than the prior version.
Game Changer
Yet, “one of the greatest things about it is it works not only on the desktop, but also on mobile Web and native mobiles,” Kramer said. “So as a developer you can learn one framework and target multiple platforms. It also has a lot of other capabilities, and our collaboration with the Visual Studio Code team makes it so that Visual Studio Code already understands all of those capabilities and is a great choice of editor for Angular developers.”
For Telerik’s VanToll, this is a game changer because it means that developers that are already using Angular to develop apps in browsers will now be able to develop apps for the iPhone and Android, too.
“The most important part of this new version of Angular for developers is that it is no longer limited to building apps inside the browser,” he said. “Angular 2 is breaking that tie to the browser and making it possible for Angular to be used in other ecosystems.”
For its part, Google’s Angular team wanted to enable scenarios where they could decouple UI rendering from the DOM. This lets them build native UI apps with libraries on top of Angular 2 like NativeScript from Telerik or React Native from Facebook.
Google Leans on Microsoft for Angular 2 Launch
The team also built a service that allows developers to run Angular inside a Web Worker, and Web Workers run in all the modern browsers today. Web Workers provide a simple means for Web content to run scripts in background threads. Web Workers allow for concurrent execution of the browser threads and one or more JavaScript threads running in the background.
“JavaScript apps are single-threaded by default, but with Web Workers it lets you run your app inside a separate thread essentially,” Green said. “So you’ve now got a multi-threaded JavaScript application with very little or no work on the developer’s part. What this means is you can have a very responsive UI even when your app is doing heavy lifting like garbage collection or data processing—loading data from the server, all the way down to like old Android phones. So that’s exciting.”
Angular 2 also enables a feature called Angular Universal where you can use Node.js to render the first view of your application on the server, ship that to the client and have the user be able to see the content as the rest of your app’s JavaScript downloads and is live, Green said.
Upgrading to Angular 2
With the beta of Angular 2, Google hopes more developers will come in and have a look at the technology. There is a Quickstart and Tutorial, and for those who have built Angular 1 applications there are two paths for them. One is called ng-upgrade, which allows developers to mix and match components and other services from Angular 2 inside their Angular 1 apps. It allows Angular 1 and Angular 2 projects to coexist. Developers can take advantage of the simplicity, speed and other benefits of Angular 2 without having to do a full rewrite.
The second approach is for developers who do not want to include both Angular 1 and Angular 2 libraries in their app. These people can use the services in ng-forward, which features a number of APIs that allow you to write your app in the syntax and style of Angular 2 so that you can get your app very close to Angular 2 and then decide, ‘Well, it’s close enough’ and then developers can do a full rewrite on top of Angular 2 APIs and then ship.
“You need to do the full rewrite eventually if you want to take advantage of some of those more advanced features like Web Workers and server-side rendering,” Green said.
According to Green, early adopters of Angular 2 include Morgan Stanley, HBO, Netflix, OpenTable, ADP, Marks & Spencer, JetBlue and more. In addition, several Google projects use it, including AdWords, GreenTea and Google Fiber.
Angular has become the language of choice for front-end Web development, as there are more than 1,300 contributors to the Angular open-source project. And Angular is currently the most popular, highest-ranked JavaScript project on GitHub.
On the enterprise side, Angular is making inroads across a wide range of industries, including the following:
- Retail: Marks & Spencer, Walmart, Kroger, Staples, Target, Walgreens
- Media: Disney, HBO, Thomson Reuters, The New York Times, Netflix, The Weather Channel
- Financial Services: Morgan Stanley, Fidelity, Intuit, Paychex, ING
- Services: BSkyB, KLM, CDK, Hawaiian Air, JetBlue
- Health: Kaiser
- Education: Blackboard
Google is pushing ahead to a final release of Angular 2 and is working on several things, including reducing Angular 2’s binary size, making the Angular command line interface (CLI) usable end to end throughout the development process, creating a more developer-friendly API for the Component Router, support for animations and more.
Other team efforts include more documentation, particularly around ES5/ES6 usage; even better startup and runtime performance; an architectural style guide; more support for mobile Web and installable mobile apps; material Design components for Angular 2; a tools platform for deep IDE support; and better support for ES6 and Babel.