Highlights from AngularConnect 2015We'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
- 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.
- ngForward: In addition to ngUpgrade, you'll be able to write Angular 1 apps in Angular 2 syntax using ngForward.
- 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.
- 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 1The 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 2Though 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.
- 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.
- 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.
- 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 SyntaxWhile 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 InterfaceWe 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.
BatarangleAngular 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 PlatformLooking 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.
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
ngUpgradeIf 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.
ng-forwardFor people who want to start writing Angular 1 code using Angular 2 conventions and styles, the ng-forward provides the perfect platform.
The project contains ES7/TypeScript modules, decorators and helpers to provide syntactic sugar around Angular 1.x's modules, services and directives. It is designed to get you as close as possible to writing Angular 2 like code in Angular 1.
For more information and how to get started using this project, check out its GitHub repository.
Supported BrowsersThanks 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 TrainingWe 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, Rangle.io, and Ninja Squad 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, Switching to Angular 2, and Become a Ninja with Angular 2.
The road to release
Adoption at GoogleWe'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. [UPDATE: This is now launched! You can see it for yourself.]
- 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.