adventures with angular 2

d

Adventures with Angular 2Dragos Ionita @ adoreme.com

http://www.adoreme.com

✦ 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?




✴ Conclusions

About me: my journey




✴ Conclusions

Why Angular2

New business tool, very complex backend, no draconic deadline




✴ Conclusions

Why Angular2

We are very good on Angular1





✴ Conclusions

Why Angular2



Angular1 has a big community. Angular2 why not?




✴ Conclusions

Why Angular2




Angular2 is already used by Google




✴ Conclusions

Why Angular2





Angular2 is made by Google




✴ Conclusions

Why Angular2





Angular2 is made by Google

When it will be officially released? Will be?




✴ Conclusions

Why Angular2

<framework agnostic>




✴ 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)




✴ Conclusions

First install

Webpack

• Module bundling• Works great• Browsersync

• Magic• Where is the documentation?• Gulp/Grunt packages?




✴ Conclusions

First install

Angular2 Router

• Many bugs• No Guard support (ACL)• No community




✴ 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




✴ 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




✴ 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




✴ Conclusions

Timeline upgrades

RC.0Refactoring application angular2 -> @angularAdded some basic automated testsThe upgrade, added many <Form> improvementsTypings fixesReal features & components:

grid componentmodalsloadersauthentication & authorizationapplication code




✴ 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.




✴ 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




✴ 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




✴ Conclusions

Timeline upgrades

2.0.1Smooth update …

only warnings :)Typings fixes




✴ 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




✴ 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

http://www.adoreme.com

https://www.linkedin.com/in/