As we’re starting into the implementation of AngularJS 2.0, we thought we should put pen to paper and give you some insight into how we’re thinking about the design and why we’re making the changes we are. We’re sharing it with you now so you can help make the right choices.
AngularJS 2 is a framework for mobile apps. It is for desktop as well, but mobile is the hard bit that we will get right first. The AngularJS you know and, hopefully, love will still be there with data-binding, extensible HTML, and a focus on testability.
All the design docs for AngularJS 2 are publicly available on Google Drive. This document contains a summary of our approach and design principles with links to specific designs in context.
CAVEAT: We’re still in design and prototyping stage for AngularJS 2. Some of this will happen differently or not at all in the final product.
Designed for the future
We’re designing AngularJS 2 for the way the world will look when we believe folks will use it. In particular, this means targeting modern browsers and using ECMAScript 6.
Modern Browsers
Modern browsers means the set of browsers known as ‘evergreen’ or always automatically updated to the latest version. Building for these browsers let us drop many hacks and workarounds that make AngularJS harder to use and develop on than it needs to be.
The set currently includes Chrome, FireFox, Opera, Safari, and IE10/11. On mobile, we’ll support something close to the list of Chrome on Android, iOS 6+, Windows Phone 8+ and Firefox mobile. We’re looking into supporting older versions of Android, but the jury is still out.
Yes, there are still older browsers in use, but we’re targeting these newer models as they will be the primary ones in use by the time AngularJS 2 is ready and you good developers have had time to build apps on it.
ECMAScript 6 +A (design)
All code in AngularJS 2 is already being written in ES6. As ES6 doesn’t run in browsers today, we’re using the Traceur compiler to generate the nice ES5 that runs everywhere. We’re working with the Traceur team to build support for a few extensions like annotations and assertions. We call this set of extensions "ES6 +A".
Don’t worry. Though AngularJS will be in ES6, you can still write in ES5 if you don’t want to upgrade. The compiler generates readable JS and there are human-sensible analogs for the extensions. See the design doc for more info.
Faster
Faster change detection (design)
AngularJS apps are built around data-binding between DOM and JS objects. The speed of AngularJS apps is driven largely by the underlying change detection mechanism we use. We’ve talked at length on how we hoped to make this faster by using Object.observe() when it becomes available in Chrome M35. And we will!
After some hard analysis (detailed in the doc), however, we’ve also found that we can make this much faster and more memory efficient even before this native change detection hits browsers. Buttery-smooth app buttery-butterness is around the corner.
Instrumented (design)
The other half of the performance equation is the code that you write. For this, we’ll provide high resolution timing details of where time gets spent in your application. You can see in that this is a goal in the Change Detection design, but we’ll directly support this through a new Angular-wide logging service called diary.js.
Modular
When we released AngularJS 1.0, the features were in a take-it-or-leave-it single package. You incur the download price for every piece whether you use it or not. Though the whole of AngularJS is very small by desktop app standards, this can make a big difference on mobile devices.
One interesting thing we noticed was that when we split out the $route into a separate library, several innovative replacements popped up.
For performance and to enable innovation, our goal is that almost every piece of AngularJS should be optional, replaceable, and even used in other non-AngularJS frameworks. You’ll be able to pick and choose the parts you like and write or select others that you like better.
Other Performance topics
Though there are no designs yet, there are many other areas of performance optimization we’ll include in AngularJS. From increasing first-load time with pre-parsed templates to ensuring silky smooth 60 frames per second animations, we’ll invest heavily on a fully optimized user experience. Please help us by highlighting areas where we should focus and techniques you can contribute to the shipping solution.
Simpler
Dependency Injection (design)
Dependency Injection is still a key differentiator between AngularJS and other client side frameworks in eliminating much of your application’s wiring code and making testability-by-default a reality. Though we’ve enjoyed these benefits in building our applications, we’re dissatisfied with the current implementation. We can make it less complex and more capable at the same time.
We’ll see a less complex DI by eliminating the config phase, simplifying the syntax by using declarative-style ES6+ annotations instead of imperative. We’ll enjoy greater capabilities by integrating DI with module loading through ES6 Modules. We’ll also see the ability to lazily-load parts of our JS through child injectors.
The doc linked above has our initial thoughts, but this is one part of AngularJS 2 that you can try today. See the repo for current details on the implementation. Templating and Directives (design)
The ability to specify templates directly in HTML and extend its syntax are the bread and butter of AngularJS. We have some lofty goals for AngularJS’s template compiler in 2. Namely:
Simplify the directive API
Integrate with other component frameworks using web standards
Improve performance
Allow tools like IDEs to analyze and validate templates
We’re so excited about these new bits that we can hardly wait to show them off. There’s too much good stuff to extract into a summary, so please just go straight to the design doc to find out more.
More capable
Touch animations (design)
Users are accustomed to certain touch aware usage patterns. E.g. scroll through a list using their finger, circle through pictures in a carousel, remove list entries by swiping them away. However:
Current implementations of carousel, infinite scrolling, … don’t share a common core and by this have a lot of redundancy and different approaches.
Current implementations mostly don't provide an option to use native scroll events, as older browsers and also some current browsers don't support them well. However, by this they prevent the optimal performance on new devices.
We want to give these scenarios first-class support for the best user experiences possible in your applications.
The initial AngularJS router was designed to handle just a few simple cases. As AngularJS grew, we've slowly added more features. However, the underlying design is ill-suited to be extended much further.
We’re taking a careful look at known use cases and other router implementations across many application frameworks so we can deliver a simple yet extensible router that should fit the widest set of applications.
A few cases that we’re particularly keen on supporting include:
Persistence (design)
Beyond AngularJS’s humble $http, many developers have desired a higher level abstraction for working with data from servers and local persistent data in the browser.
Mobile apps need to work in an “always offline” mode with syn to the server. RESTful services need more than we’ve provided in $resource. Some data can be updated in batches while some needs a continuous streaming model.
In this new persistence layer, we’ll provide clean structure for these cases and take much more out of the boilerplate currently necessary.
Q&A
When will it be done?
If you’ve been with us through the 1.2 announcement, you know that we don’t know. :) Though we’re just posting the design docs now, we’re already prototyping many of the modules. Dependency Injection and Zone.js appear to be usable. All the work will be done on GitHub and we’ll continue to capture weekly meeting notes so you can follow along. What will it be like to port an AngularJS 1.x application to AngularJS 2?
As AngularJS 2 is still in development, we honestly don’t know. In our imagination, porting will be fairly straightforward but not free. Taking advantage of ES6 will likely be the largest part of the job. Templates will be largely the same with some mostly-mechanical find and replace exercises. Your controllers contain your business logic and not much if any AngularJS API today. Those should port easily. The parts that will require the most thinking will be your use of Modules and Directives.
Is AngularJS 2 a replacement for mobile tech like PhoneGap or Ionic Framework?
No, AngularJS is still just the core framework. You might still want libraries like Ionic for mobile-optimized CSS/JS components and tools like PhoneGap for app packaging and native API access.
How does AngularJS 2 relate to AngularDart?
When porting AngularJS to the Dart language, we build a new version of Angular using all the learnings we’d acquired to date. Many of the improvements discussed in this document like improved Directive concepts and syntax and class/annotation-based DI are already present there.
While the implementation isn’t what we’ll arrive at for 2, it’s a great preview of what’s to come.
We’ll be upgrading AngularDart as we build AngularJS 2 so folks who prefer the Dart language can enjoy the same benefits as folks on JS. Our goal is that there will be a single framework with your choice of language.
Other documents of interest
