In this post we'll look at what's being removed between v1.x and v2.0 - The victims from Igor Minar and Tobias Bosch's talk at ng-europe.
First, it's worth mentioning some of the great material that's come up since the last post.
- More videos from ng-europe have been uploaded to YouTube: ng-europe channel
- Tero Parviainen talked about why Angular 2 will still be Angular.
- Lukas Ruebbelke gives us 10 Things To Consider While Keeping a Level Head About AngularJS 2.0.
- Misko Hevery opens up discussion about the templating syntax in Angular 2.
- Matt Asay explains Why Web Tools Like AngularJS Need To Keep Breaking Themselves.
Now then. Lets take a look at the kill list.
RIP
First, a little disclaimer: I don't know for sure what Angular v2.0 will look like.
Nobody does for sure. Not even the Angular team, because they haven't finished it yet.
I'm merely extrapolating from the ng-europe presentations, and what's currently available in AngularDart.
Nobody does for sure. Not even the Angular team, because they haven't finished it yet.
I'm merely extrapolating from the ng-europe presentations, and what's currently available in AngularDart.
Controllers
Controllers, as we know them, are going.
This has already been trialled in AngularDart. Controllers were originally a sub-class of directives, but were eventually deprecated and then removed for the release of v1.0.
Instead you will have a way to expose the properties and methods of a class with a @Directive annotation onto your templates. Igor and Tobias' talk mentioned some of the potential Directive subclasses that will make things easier for you.
The closest equivalent in v1.x I can think of would be a directive with a 'controller' and a 'controllerAs', like so:
This has already been trialled in AngularDart. Controllers were originally a sub-class of directives, but were eventually deprecated and then removed for the release of v1.0.
Instead you will have a way to expose the properties and methods of a class with a @Directive annotation onto your templates. Igor and Tobias' talk mentioned some of the potential Directive subclasses that will make things easier for you.
The closest equivalent in v1.x I can think of would be a directive with a 'controller' and a 'controllerAs', like so:
Directive Definition Object (DDO)
The old DDO syntax that we all know and... know, for writing directives will be gone.
The heart of your directive logic will be a class, with annotations that describe how the directive will be used.
Once again, to get the best idea of how this will work, look no further than AngularDart.
The heart of your directive logic will be a class, with annotations that describe how the directive will be used.
Once again, to get the best idea of how this will work, look no further than AngularDart.
$scope
Now this is an interesting one - the classic $scope object gone for good.
How is that even possible?
Well, $scope provides 3 main functions:
How is that even possible?
Well, $scope provides 3 main functions:
- exposing properties to the template
- creating watchers
- and handling events
The first is somewhat redundant because every control-I mean, every component class will be exposing it's public properties to the template. As though "controllerAs" had become mandatory.
Watchers will be handled by their own new module: watchtower.js
This allows watchers to be grouped together in a way which doesn't depend on... well, anything really. But certainly not a scope hierarchy like in Angular v1.x
As for events... I'm not sure.
I haven't seen anything specific about events, so I can only speculate.
In saying that - my money is on using the native DOM API for events, as that's how Angular v2.0 is heading for DOM manipulation.
Watchers will be handled by their own new module: watchtower.js
This allows watchers to be grouped together in a way which doesn't depend on... well, anything really. But certainly not a scope hierarchy like in Angular v1.x
As for events... I'm not sure.
I haven't seen anything specific about events, so I can only speculate.
In saying that - my money is on using the native DOM API for events, as that's how Angular v2.0 is heading for DOM manipulation.
Speaking of which...
jqLite
The Angular team have found that jqLite has become too much of a performance bottleneck for them.
And since Angular v2.0 is for evergreen browsers, they have no fear of relying on native implementations of the DOM API.
DOM traversal is easily handled by querySelector() and querySelectorAll(), events with addEventListener(), and good old createElement(), setAttribute(), and appendChild() for manipulation.
And since Angular v2.0 is for evergreen browsers, they have no fear of relying on native implementations of the DOM API.
DOM traversal is easily handled by querySelector() and querySelectorAll(), events with addEventListener(), and good old createElement(), setAttribute(), and appendChild() for manipulation.
But in the end, if you want to use jQuery, there's nothing stopping you from using it.
It just won't be part of the Angular Core.
It just won't be part of the Angular Core.
angular.module
angular.module() has 2 somewhat overlapping jobs:
The second has been split into it's own module: di.js
The workings of di.js is pretty simple.
You declare the dependencies for a class using the @Inject annotation, specifying the class for each dependency (The actual class - not just it's name as a string, like Angular v1.x does), and then create an Injector for the classes you want.
Checkout the example on the di.js github: kitchen-di
The great thing about this is that it doesn't make any assumptions about your application. It's totally separated from Angular.
You can even create multiple injectors, maybe one for each instance of a directive.
This wasn't listed with the other tombstones, but you'll notice it was missing from the slide with the experimental template syntax.
It's also not used by AngularDart applications.
Instead they create their own application object, which you then register classes with, and then run the application. Not unlike "angular.bootstrap()".
I think Angular v2.0 will do something similar.
- Register different types of components (eg. Directives, controllers, filters, etc.)
- and register injectables and their dependencies.
The second has been split into it's own module: di.js
The workings of di.js is pretty simple.
You declare the dependencies for a class using the @Inject annotation, specifying the class for each dependency (The actual class - not just it's name as a string, like Angular v1.x does), and then create an Injector for the classes you want.
Checkout the example on the di.js github: kitchen-di
The great thing about this is that it doesn't make any assumptions about your application. It's totally separated from Angular.
You can even create multiple injectors, maybe one for each instance of a directive.
ng-app
This wasn't listed with the other tombstones, but you'll notice it was missing from the slide with the experimental template syntax.
It's also not used by AngularDart applications.
Instead they create their own application object, which you then register classes with, and then run the application. Not unlike "angular.bootstrap()".
I think Angular v2.0 will do something similar.
Final Thoughts
These changes are about making your code less "Angular" and more "Javascript".
But nothing is really set in stone yet for Angular v2.0:
(Spoiler alert: It's going to involve ES6)
But nothing is really set in stone yet for Angular v2.0:
Reminder that the @angularjs 2.0 announcements are a call for feedback, not a final design. We're listening to your feedback!
— Brian Ford (@briantford) October 31, 2014
In my next post I'm going to make some wild assumptions about Angular v2.0 and come up with some things we can do with our v1.x code to make the transition easier.(Spoiler alert: It's going to involve ES6)
No comments:
Post a Comment