Highlights from AngularConnect 2015
We've just had our fall conference at AngularConnect in London where we made many announcements about progress in both Angular 1 and Angular 2. All videos and slide decks are now available for you.
For a quick read, we've summarized the main announcements here.
The short list
Angular 1
Growth: Angular 1 continues its stellar growth with over 1.1M developers worldwide.
ngUpgrade: You can seamlessly mix and match Angular 1 with Angular 2 by using the ngUpgrade library.
Angular Material: Our release candidate for Angular Material 1.0 brings material design to Angular 1 with flex layout and 30+ easy-to-use, accessible, responsive components.
Support: We'll be continuing support for Angular 1 so long as the majority of developers use it. We've made 32 releases this year with new features, bug fixes, and performance improvements. Upcoming release include new features in components, routing, i18n, and animation.
Angular 2
Speed: Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre-rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling and snappy view transitions.
Browsers: Angular 2 supports IE 9, 10, 11, Microsoft Edge, Safari, Firefox, Chrome, Mobile Safari, and Android 4.1+.
Cross-platform: By learning Angular 2, you'll gain the core knowledge you'll need to build for a full range of platforms including desktop and mobile web, hybrid and native UI mobile installed apps, and even installable desktop applications.
Continue reading for all the details and links to resources.
Angular 1
The Angular 1 community continues to grow. From our best estimate, there are over 1.1 million developers (based on 30-day unique visitors to angularjs.org). You can check out many of the fantastic applications created with Angular on madewithangular.com with apps from Google, airlines, retail, finance and more.
Our plan is to continue support for Angular 1 until the majority of developers have moved to Angular 2. We'll track use by the number of unique visitors to angularjs.org (Angular 1) and angular.io (Angular 2). At the moment, 93% of developers visit angularjs.org.
In addition to several features planned for version 1.5 like component syntax and multi-slot transclusion, we'll release some of the most exciting features for both Angular 1 and Angular 2. These include:
Component Router: The new Component Router includes features for complex desktop apps like sibling and nested routes, modals, and mobile-style pop-over routes, lifecycle hooks, and simplified serialization -- all with an easy, declarative syntax similar to the current router. Check out Brian's talk for more details.
Internationalization: Making great apps for all your users means tailoring it for their language and locale. Our new i18n library supports language-specific gender and cardinality transformations and a build-time string translation that ensures great performance and integrates with external translation service workflows.
Animation: Our new ngAnimate library improves your ability to bring engaging motion to your apps. With full programmatic control of sequencing and staggering, you can create rich and sleek animation choreographies in very few lines of code and make parent / child animations that are simple and versatile. Watch Matias and Rob's talk or just checkout these samples:
Angular 2
Though we continue to invest in Angular 1, we've pushed the features possible within its architecture about as far as we can. Angular 2 represents growth in capabilities. Where Angular 1 focused on developer productivity in a framework, Angular 2 expands scope to include a full platform capable of multiple languages, templating syntaxes, and renderers providing for a cross-platform development environment with ability to expand to other scenarios.
You can get a taste of Angular 2 in the Getting Started talk, where we build a simple app and demonstrate how many Angular 1 paradigms work in an Angular 2 context.
Performance
Angular Universal. Getting your first view to your users is critical to keep their attention. Angular Universal eliminates the wait time in downloading and parsing your app's JavaScript by pre-rendering the first view on the server-side. Watch this video from AngularConnect or see this amazing demo of integration with ASP.NET.
One-time and offline compile. In Angular 1, template compilation can happen many times during an application's life. Angular 2 moves compilation to app start-up time making this much more efficient. Coalescing compilation paves the way for a soon-to-be-released feature where compilation happens during a build step and no longer happens in the browser, making startup faster.
Ultrafast change detection. In Angular 2 we wanted to ensure that change detection would perform incredibly well from the largest desktop applications down to apps on low memory devices like phones. For raw performance, we ensure that all code generated by change detection can be inlined by JavaScript VMs and that it uses very little memory to avoid garbage collection. Change detection itself is 10x faster than Angular 1 with apps seeing overall 2.5x faster rendering than Angular 1.
View caching. By retaining data structures we've used in constructing the first view of the app, we're able to make subsequent renderings incredibly fast at over 4x faster than Angular 1. This is critical in repeaters, when doing virtual scrolling or revisiting whole views your user has already seen. [Update since AngularConnect: we've identified a new rendering strategy that makes even cold-start scenarios faster than Angular with view cacheing. We may use only this new strategy in the near future]
Web Workers. Though it's only at an experimental stage, we're excited by the potential of our new ability to run all of your code and most of Angular in a separate process via Web Workers. And though very early, we're anticipating benefits in pause-free application performance, live debugging across multiple browsers, and more. If you only have time to watch one video from AngularConnect, make it this one on Web Workers.
Languages
While you can use any of the over 100 compile-to-JavaScript languages available with Angular 2, there are a few choices that we believe are most appealing and that we'll support in our documentation.
ES5: Also known as "today's JavaScript" (soon to be "yesterday's JavaScript"). It's the language that runs in all browsers today, many of us know it already, and it requires no compiler. An easy, safe choice that most of us use with Angular 1.
ES6: EcmaScript 2015, or ES6, is the next official release of the JavaScript specification. Though partially supported in modern browsers, real application deployments will require a compile step to use ES6 for many real application deployments. ES6 contains many attractive core language improvements that make development safer, more efficient, more interoperable, and more readable. Though a compile step is required, ES6 is a superset of ES5 meaning all the code you've written today works in ES6 allowing you to add its features a bit at a time.
TypeScript: TypeScript builds on ES5 and ES6 by adding optional types to JavaScript. Like ES6, you can run all your existing ES5 and ES6 code with the TypeScript compiler and add types a bit at a time. Using types gives you tremendous productivity gains in code navigation, large-scale refactorings, documentation, and finding errors. We've developed Angular 2 in TypeScript and are able to generate versions of our library for ES5, ES6, and Dart. Check out the two talks on What's new in TypeScript and TypeScript tooling for greater productivity.
Dart: Dart is an open source language built by Google with different syntax and semantics than ES5, ES6, and TypeScript. Like ES6 and TypeScript, Dart also has classes and optional types. It's favored by several teams at Google, like AdWords, who prefer a more Java-like syntax. Learn more at dartlang.org.
Better Syntax
While directives in Angular 1 are a powerful and intuitive way to reuse code, the syntax has grown organically and can be complex. For Angular 2, we've simplified this both in template syntax and by having simplified declarations for Components which combine a template directive with controller logic in one reusable building block.
Support for Functional Reactive Programming (FRP)
Many apps in Angular 2 will use Angular 1 style data models and an MVC design pattern. At the same time, we see quite a few folks in our developer community excited about using FRP designs already popular in systems like ClojureScript's OM framework, Elm, and Flux.
In Angular 1 you can set up $watches between any sets of data in your app to monitor changes. While this can be an easy and natural way of developing, we've seen it be hard to debug and potentially cause bugs in large applications. Angular 2 implements a unidirectional data flow where changes always propagate from parent components to their children. This benefits you whether or not you're using FRP as it's slightly faster and is easier to debug as you always know where changes are coming from.
We're also using Observable data structures via the Rx.js library throughout Angular 2 as a better model for managing streams of data like events or processing data coming from servers. Additionally, Angular 2 change detection supports both Rx.js and Immutable.js and gives you even more headroom to scale large data sets in your applications.
For more on benefits of Rx.js, check out RxJS In-Depth and Angular 2 Data Flow.
Command Line Interface
We want to eliminate friction from your development tools and processes through a new command line interface tool called Angular-CLI.
Modern front-end development usually involves many tools to manage build (Gulp, Grunt, Broccoli, WebPack), language transpilation (TypeScript, Babel), CSS processing (Sass, Less), minification (Uglify, Closure Compiler), and more. Starting a new project requires that you install, configure, and maintain these as your project evolves.
Angular-CLI's goal is to take you from initial project set-up by scaffolding files for your app all the way through to adding components, services, tests, setting up continuous integration and finally deploying your app. All through a simple set of extensible commands.
Additionally, we're building Angular-CLI on top of a service that can easily be called by IDEs or other tools to provide the same experience through other interfaces.
It's still early days for Angular-CLI, but come check it out at github.com/angular/angular-cli. We welcome feedback and would love to get more community contributors helping with it.
Batarangle
Angular 1 has the Batarang Chrome plugin to help with debugging and analyzing running Angular apps. For Angular 2, the Rangle.io team is building the next generation tool for inspecting your apps, debugging, and focusing on performance improvement.
Watch the video or install and check it out for yourself at rangle.io/batarangle.
Cross Platform
Looking beyond desktop web applications, our goal is to ensure that Angular 2 works very well for mobile web, hybrid, and native applications.
Mobile Web: We're supporting no-install mobile apps in several ways. With server-side pre-rendering (Angular Universal), you'll get fast first-page views even on 2G networks. We'll help with the UI via Angular Material with components designed to work on tablets and phones. We're also hoping to improve UI responsiveness with Web Workers to ensure data processing and garbage collection never interrupt your application with pauses or hiccups.
Hybrid: Ionic Framework has been incredibly popular on Angular 1 for developers wanting to maximize reuse in both skills and code across web and installable apps. We've worked with the Ionic team to ensure we can ship Angular 2 and Ionic 2 together as closely as possible. You can check out Ionic 2 at ionic.io/2 and watch the video on Building cross-platform apps with Ionic 2.
Native: For folks who want to build an Angular 2 mobile app but really need native UI components on Android and iOS, we've worked with folks on Telerik's NativeScript project to give you direct access to all native APIs via JavaScript. Watch the video on Building native mobile apps with Angular 2 and NativeScript.
We can achieve many of these goals because we've made many of Angular 2's parts easily replaceable. With our integration in NativeScript and React Native we're using a different template language and native elements as the rendering target. We've heard rumblings that folks in the community may work on WebGL and TVML implementations as well. We're excited to see what others may come up with.
Looking towards the future, we'd like to also provide support for installable desktop applications through Electron. Check out this example from Angular 1 for an idea of where this could go.
Upgrading to Angular 2
ngUpgrade
If you're happy with Angular 1, you're good to go. For those teams who want to take advantage of Angular 2's new capabilities, we want to make the transition as smooth and easy as possible.
The ngUpgrade library helps with this by letting you integrate Angular 2 components into Angular 1 apps. The benefit is that you can upgrade your app one component at a time and never having to pause shipping releases.
You can see a detailed examples of doing this migration on the Thoughtram blog on Upgrading apps to Angular 2 using ngUpgrade.
Supported Browsers
Thanks to great work by our collaborators at Amadeus, Angular 2 supports:
Modern browsers like Chrome, Edge, Firefox, and Safari
Legacy ones like Internet Explorer version 9, 10, and 11
Phones and tablets running Mobile Safari and Android versions 4.1+
Tools, Libraries, Books, and Training
We know that shipping Angular 2 alone won't be sufficient to create a successful environment for your great apps. We're overwhelmed with the wonderful support we're seeing from other companies in developing support for Angular 2.
IDEs: We're working directly with the developers on WebStorm, Visual Studio, and Visual Studio Code to ensure a great experience on Angular 2. And there's already support for TypeScript in other IDEs like Sublime, Atom, Cloud9, Eclipse, and VIM.
Libraries: Developers of the most critical libraries have declared starting work for Angular 2 including UI Bootstrap, UI Router, Microsoft Office Fabric, Telerik's Kendo UI, and Wijmo. Angular Material will also be available for Angular 2.
Training: Egghead.io, Thoughtram, Pluralsight, AngularClass, CodeSchool and Rangle.io have all announced training.
Books: Though books can't complete until we're at least in Beta release, several have been announced including ng-book 2, Angular 2 Development with TypeScript, Angular 2 in Action, and Switching to Angular 2.
The road to release
Adoption at Google
We've selected a few teams at Google to build apps on Angular 2 as partners in proving developer productivity and scalability to large applications.
Google Fiber. These folks started working with Angular 2 very early. We've worked together on performance, app size, and browser compatibility. We've recently given them the green-light to ship their Angular 2 version. We're excited to see it in production soon.
GreenTea. Google's internal CRM app used by all of the Ads sales teams. With hundreds of thousands of lines of code and over 500 UI components, the GreenTea team is busily porting to Angular 2 and will ship early in 2016.
AdWords. With hundreds of developers and millions of lines of code, AdWords represents our biggest Google customer yet. They've been tremendous partners in pushing our team on features and performance scale to one of Google's biggest apps. They've built several Angular 2 proof of concept apps and are now hard at work on the next version of AdWords in Angular 2.
Beta and final release
We're very close to our Beta release for Angular 2 on their projects. You can track our progress towards this via our Beta 00 milestone on GitHub.
New docs
Though we do recommend waiting for the beta release, we think it's a fine time to start getting your feet wet with Angular 2. We've created several new docs to get you going including a cheat sheet so you can quickly come up to speed on the syntax, concepts docs, a testing guide, there's an easily searchable (though incomplete) set of API docs, and a new tutorial that will walk you through building your first Angular 2 application.