2

Austin McDaniel

SFLCC 2016

Austin McDaniel

Chief Architect at

Twitter: @amcdnl

Github: amcdnl

LinkedIn: amcdnl

About me

Follow along...

Slides

https://slides.com/austinmcdaniel/angular-2

Github

https://github.com/amcdnl/angular2-demo

Agenda

~ Brief History of Angular ~

~ Difference in 1 & 2 ~

~ What you need to know ~

~ Demo ~

~ Take aways ~

History Lesson

Angular was first created in

2009

Thats

55 years

in dog lives and like

10,000 years

in JavaScript lives.

The problems are different today...

whats it gonna do different?

• Modernize the framework to web standards

• Better Mobile Support

• Improve Performance
• Simplify Concepts

what about modern?

• Shadow DOM Replaces Transclusion

• Uses new JavaScript Language Features
• ES6 Modules

mobile first...

I like speed ...

5x-10x faster than 1.x

how is it simpler then?

Controller

Service

Directive

Provider

Factory

Transclusion

Modules

Scope

popquiz!

When should you use a Factory instead of a Service?

When should you use compile vs link?

Speaking of Scope/Digest/etc...

Its Gone!

http://pascalprecht.github.io/slides/angular-2-change-detection-explained/ 

component

vs 

page

Build components that live in your page, instead of a page that has components.

component tree...

What about this new JavaScript?

TypesScript is types in JavaScript...

You said next generation....thats not JavaScript...

Babel makes ES*next JS run on the old stuff...

Goodbye angular.module!

ES6 Modules are awesome!

Use SystemJS, its basically ES6 Modules on steroids!

(finally)

So, the template syntax changed...

Its not that bad, just remember this...

• (event) - events

• [property] - properties

• *expr -  create embed template on elm

• {{ variable }} - still there

• #variable - local variable def

they can be pretty cool...

<div ng-style="{ color: ctrl.Color }">
    Hi
</span>

<div [style.color]="color">Hi</span>

What about my filters?

ahemmm call them Pipes now...

Demo

https://github.com/amcdnl/angular2-intro

New things to watch for...

• Hot Module Reloading

• Isomorphic aka server-side rendering

• Ionic2 and Material2

Things you should know...

• Its Beta 7 at the moment, the API is gonna change
   
• Its 764kb, 4x the size of React+Redux
   
• Lingering issues from 1.x

Virtual DOM, one-way binding, component architecture, server rendering...

Sounds like            doesn't it?

Just to compare....

Take away

Angular2 is NOT a

magical unicorn 

but a solid upgrade

( not a easy feat )

for long-term Angular

projects & fanboys.

Thanks for your time!