O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Adventures with Angular 2

429 visualizações

Publicada em

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.

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Adventures with Angular 2

  1. 1. d Adventures with Angular 2 Dragos Ionita @ adoreme.com
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Thanks for watching! Ionita Dragos Cristian SoftwareEngineer@AdoreMe https://www.linkedin.com/in/ dragos-ionita-8ab20756

×