Download - Adventures with Angular 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?
✦ 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
✦ 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
✦ 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
✦ 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?
✦ 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
✦ 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
✦ 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?
✦ 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>
✦ 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)
✦ 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?
✦ 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
✦ 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.3Try to do a CRUD app
first ng2 componentfirst ng2 directive
Ooo Observables?see the RXJS documentation why Observables … I love the promises…
so .. Observables.toPromise :D
✦ 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.8First single app@ngrx/routerFirst feature: make a grid with data from an APIangular2/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
✦ 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.14I tried to make a gulp config.I returned on WebpackMy first form doesn't work after ng version upgradeThe upgrade, added many <Form> improvementsTypings fixes
✦ 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.0Refactoring application angular2 -> @angularAdded some basic automated testsThe upgrade, added many <Form> improvementsTypings fixesReal features & components:
grid componentmodalsloadersauthentication & authorizationapplication code
✦ 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.2Added animationsMy business code from forms are deprecatedI created a Router Guard (for ngrx/router)I created a Guard directiveTypings fixesBusiness Models
Where is the Factory from ng1?Wow … I will create a simple js class.
✦ 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.4My tests used deprecated stuff.
so … I removed them.Application refactoring
@ngrx/router project is abandonedMy awesome Guard also should be removed…Install and configure the default routerWrite a new Guard for this router
Typings fixes
✦ 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 deprecatedRemove template driven forms, use only reactive formsNg-Modules was added
Rewrote the appAuthentication moduleAuthorisation moduleFirst Business Tool moduleFirst Business Tool moduleShared/UI module
✦ 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.1Smooth update …
only warnings :)Typings fixes
✦ 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.1Started to package internal ng2 libraries with NPM
Any important module is now a private NPM packageWe wrote the typings for our NPM packages
Tried to write some testsAdded TypeDocDev (with dev build) webserverProd (with prod build) webserver
✦ 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 communityYou witness the evolution of the frameworkYou learn much faster
Thanks for watching!
Ionita Dragos Cristian Software Engineer @AdoreMe
https://www.linkedin.com/in/ dragos-ionita-8ab20756