Downloaded 19 times
Adventures with Angular 2
- 1. d Adventures with Angular2 Dragos Ionita @ adoreme.com
- 2. ✦ Introduction ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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 ✴ Aboutme ✦ 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! IonitaDragos Cristian SoftwareEngineer@AdoreMe https://www.linkedin.com/in/ dragos-ionita-8ab20756