17
Angular 2 How we got here? Fakiolas Marios - [email protected] / @fakiolinho

Angular 2 - How we got here?

Embed Size (px)

Citation preview

Page 1: Angular 2 - How we got here?

Angular 2How we got here?

Fakiolas Marios - [email protected] / @fakiolinho

Page 2: Angular 2 - How we got here?

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!!!

Page 3: Angular 2 - How we got here?

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?

Page 4: Angular 2 - How we got here?

Do you remember this?

Page 5: Angular 2 - How we got here?

Welcome to the Components era!!

Page 6: Angular 2 - How we got here?

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.

Page 7: Angular 2 - How we got here?

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)

Page 8: Angular 2 - How we got here?

Let’s see our first component!!

Page 9: Angular 2 - How we got here?

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?

Page 10: Angular 2 - How we got here?

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!

Page 11: Angular 2 - How we got here?

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….

Page 12: Angular 2 - How we got here?

AngularJS 1.5.x new featuresAngularJS 1.5.x wants to help us move easily to Angular 2 so it introduced a new type of directives the component directives:

Page 13: Angular 2 - How we got here?

AngularJS 1.5.x new featuresThe 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

Page 14: Angular 2 - How we got here?

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.

Page 15: Angular 2 - How we got here?

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

Page 16: Angular 2 - How we got here?

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!!

Page 17: Angular 2 - How we got here?