More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Angular 2 - How we got here? (20)
Recently uploaded (20)
Angular 2 - How we got here?
- 1. Angular 2 How we got here? Fakiolas Marios - [email protected] / @fakiolinho
- 2. Where we are now with Angular 2? As of 15th of December 2015 Angular 2 is in beta. So it’s time to start playing with it some more!!!
- 3. Why a rewrite from A to Z? ❏ ES2015 and new features in JavaScript ❏ Classes (inheritance, super calls, instance and static methods, constructors) ❏ Template strings (easier strings concatenation in our templates) ❏ Modules for components definition (it follows from popular module loaders like AMD and CommonJS) ❏ Promises (library for asynchronous programming) ❏ Upcoming Web Components standard for HTML5 ❏ Custom Elements ❏ Shadow DOM ❏ HTML Imports ❏ HTML Templates Enougn new features to realize how different things were when AngularJS 1.x was launched right?
- 4. Do you remember this?
- 5. Welcome to the Components era!!
- 6. What is a component in Angular 2? In Angular 2, Components are the main way we build and specify elements and logic on the page. In Angular 1, we achieved this through directives, controllers, and scope. In Angular 2, all those concepts are combined into Components. Even our application is a component.
- 7. What is a component in Angular 2? Every component has: ❏ A selector (this is used to call it in our HTML5) ❏ A template (this is injected inside the selector’s tags) ❏ Unique styling for this template (Shadow DOM ways here but still alternatives are used as default option) ❏ A dedicated class to apply some logic ❏ Dependencies (other components required and used by our component)
- 8. Let’s see our first component!!
- 9. What do you think? Seems a little familiar? Directives in Angular JS 1.x are responsible for this. So it’s not that scary right?
- 10. What do you think? The truth is that AngularJS 1.x and its directives let us create reusable pieces of code with unique selector, dedicated template and abstracted logic some years now way before Web Components standard was announced!!! That’s why AngularJS 1.x is still quite a fantastic framework and upon it millions of applications are built. So it’s obvious that any developer quite experienced in AngularJS 1.x won’t struggle that much to create his/her first Angular 2 components!
- 11. What about AngularJS 1.x right now? For sure the ancestor framework is in a crossroad. A lot have been said but it is not dead and won’t be for years to come. Too many applications are built using it so there is still a great demand in developers who have mastered its ways. But there are even more important news….
- 12. AngularJS 1.5.x new features AngularJS 1.5.x wants to help us move easily to Angular 2 so it introduced a new type of directives the component directives:
- 13. AngularJS 1.5.x new features The structure is quite similar with Angular 2 component we saw before. It is a component with directives flavor. So since we have built thousands of directives the transition to component directives won’t be that awkward or tough. It is a huge step which brings us closer to components logic even in AngularJS 1.5.x
- 14. Can i upgrade my old AngularJS 1.x app? The answer is sure you can. There are 2 strong tools which can help you right away: ngUpgrade: It lets us mix Angular 2 into our existing Angular 1 application. We'll get to take advantage of Angular 2's improved speed and APIs immediately as we replace components a bit at a time over the course of our releases. ngForward: Some developers will want to avoid having both Angular 1 and Angular 2 libraries running in their app simultaneously. For this, we have the option of ngForward which lets us write Angular 1 applications in the syntax of Angular 2. This lets our team get used Angular 2 conventions and styles in our apps today and shorten the distance to doing the full upgrade to Angular 2 when we feel ready.
- 15. Which of the 2 should i choose? In my opinion there are some disadvantages for moving right away in Angular 2: ❏ Still in beta ❏ Problematic documentation ❏ Community is still immature ❏ Few tools / plugins available ❏ Great focus in ES2015 / TypeScript examples etc so many developers might struggle some more with those and not with the framework itself ❏ There are great tools available to upgrade an application to Angular 2 anytime so this makes me feel somewhat safe
- 16. What do i propose? Every one of us should become stronger with ES2015 no matter if he / she likes / uses Angular frameworks at all. TypeScript is an option and brings quite nice features even from upcoming ES7 but let’s become stronger with ES2015 first and then we see how it goes. Play a lot with Angular 2 components and transform your directives to component directives in your AngularJS 1.5.x applications. In general prepare yourself and the applications you build for the switch as much as possible!!