Browsers are exciting. JavaScript libraries make them even more exciting. We’ll see what’s in store for the future of the web and how AngularJS is making huge strides to bringing it to us today. Angular pushes the limits of what’s possible in current and emerging technologies, exploring upcoming and recently landed APIs with regular new releases. This rapid cycle to push the web forward is increasingly making Angular the framework of choice for client-side MVW engineering. We’ll look at ES6, two way data-binding, upcoming Web Components, including ShadomDOM, Custom Elements, differences from Polymer, and how Angular fits in the picture.
34. ES7: Object.observe()
// html5rocks.com/en/tutorials/es7/observe
// Let's say we have a model with data
var model = {};
// Which we then observe
Object.observe(model, function(changes){
// This asynchronous callback runs
changes.forEach(function(change) {
// Letting us know what changed
console.log(change.type, change.name, change.oldValue);
});
});
58. Angular: JS Objects as DOM
<input type="text" ng-model="vm.someModel">
<p>{{ vm.someModel }}</p>
<!--
Maps across input value to Object
$scope.vm.someModel
-->
61. Angular: Component lifecycles
▸ Automatic event binding/unbinding
▸ Creation/destruction of DOM and ($scope) Model data
▸ ng-ifs, DOM stored in memory
69. Angular 2.0: Annotations
// reduces boilerplate and hides angular wireframe
@Provide(Heater)
export class MockHeater {
constructor() {}
on() {
console.log('Turning on the MOCK heater...');
}
off() {}
}
70. Takeaways
▸ Angular helps deliver the future now
▸ Frameworks will always be ahead of the web
▸ Libs/frameworks help sculpt the future
▸ Where next? See you there!