My adventures with Angular2 from first install (BETA.3) to the official release. What made us decide to pick Angular 2 since its beta phase, why we didn't stop when we saw that it wasn't quite ok to work with beta versions, how we managed to keep our up up to date with version updates (sometimes even twice a week), how we rewrote our application several times and how we found solutions to most problems.

1. d
Adventures with Angular 2
Dragos Ionita @ adoreme.com

2. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Introduction
I build business tools @Adore Me
Why Angular2?
Why Angular2 Beta.3 in production code?
What did I personally learn?

3. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
About me: my journey

4. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
New business tool, very complex backend, no
draconic deadline

5. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
We are very good on Angular1
New business tool, very complex backend, no
draconic deadline

6. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
We are very good on Angular1
New business tool, very complex backend, no
draconic deadline
Angular1 has a big community.
Angular2 why not?

7. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
We are very good on Angular1
New business tool, very complex backend, no
draconic deadline
Angular1 has a big community.
Angular2 why not?
Angular2 is already used by Google

8. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
We are very good on Angular1
New business tool, very complex backend, no
draconic deadline
Angular1 has a big community.
Angular2 why not?
Angular2 is already used by Google
Angular2 is made by Google

9. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
We are very good on Angular1
New business tool, very complex backend, no
draconic deadline
Angular1 has a big community.
Angular2 why not?
Angular2 is already used by Google
Angular2 is made by Google
When it will be officially released?
Will be?

10. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Why Angular2
<framework agnostic>

11. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
First install
Typescript
• added type of the variable
when declaring it.
• ECMAScript6/7 > ECMAScript 5
• added public, private, protected
• Typescript updates/news
• type definitions (.d.ts)

12. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
First install
Webpack
• Module bundling
• Works great
• Browsersync
• Magic
• Where is the documentation?
• Gulp/Grunt packages?

13. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
First install
Angular2 Router
• Many bugs
• No Guard support (ACL)
• No community

14. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
Beta.3
Try to do a CRUD app
first ng2 component
first ng2 directive
Ooo Observables?
see the RXJS documentation
why Observables … I love the promises…
so .. Observables.toPromise :D

15. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
Beta.8
First single app
@ngrx/router
First feature: make a grid with data from an API
angular2/http … what is this?
no http interceptor?
how I can do a GET request?
but a POST?
First form with validators.
Wow … NG2 doesn't have a documentation.
Typings fixes

16. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
Beta.14
I tried to make a gulp config.
I returned on Webpack
My first form doesn't work after ng version
upgrade
The upgrade, added many <Form> improvements
Typings fixes

17. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
RC.0
Refactoring application angular2 -> @angular
Added some basic automated tests
The upgrade, added many <Form> improvements
Typings fixes
Real features & components:
grid component
modals
loaders
authentication & authorization
application code

18. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
RC.2
Added animations
My business code from forms are deprecated
I created a Router Guard (for ngrx/router)
I created a Guard directive
Typings fixes
Business Models
Where is the Factory from ng1?
Wow … I will create a simple js class.

19. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
RC.4
My tests used deprecated stuff.
so … I removed them.
Application refactoring
@ngrx/router project is abandoned
My awesome Guard also should be removed…
Install and configure the default router
Write a new Guard for this router
Typings fixes

20. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
RC.5
‘directives’ & ‘pipes’ in @component decorator are
deprecated
Remove template driven forms, use only reactive
forms
Ng-Modules was added
Rewrote the app
Authentication module
Authorisation module
First Business Tool module
First Business Tool module
Shared/UI module

21. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
2.0.1
Smooth update …
only warnings :)
Typings fixes

22. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Timeline upgrades
2.1.1
Started to package internal ng2 libraries with NPM
Any important module is now a private NPM
package
We wrote the typings for our NPM packages
Tried to write some tests
Added TypeDoc
Dev (with dev build) webserver
Prod (with prod build) webserver

23. ✦ Introduction
✴ About me
✦ Why Angular2?
✦ First install
✦ Timeline upgrades
✴ Beta.3
✴ Beta.8
✴ Beta.14
✴ RC.0
✴ RC.2
✴ RC.4
✴ RC.5
✴ 2.0.1
✴ 2.1.1
✴ Conclusions
Conclusions
Beta or not?
Definitely yes
Why?
You are the community
You witness the evolution of the framework
You learn much faster

24. Thanks for watching!
Ionita Dragos Cristian
SoftwareEngineer@AdoreMe
https://www.linkedin.com/in/
dragos-ionita-8ab20756