Let's set Angular on Fire

Angualr +Firebase = Awesome.
Code camp Romania Iasi.

Transcript

1. Let’s set Angular on Fire Angular + Firebase = Awesome
2. @JecelynYeen From Kuala Lumpur, Malaysia Google Developer Expert - Web technologies, Angular Software Architect @ Randstad
3. Henry: “I want to create a web application”
4. JQuery ES6+ Sass, Less Transpiler Webpack Gulp Minify Uglify HTML CSS Javacript There are more! - Linting - Setup testing - Development server - Project structure …
5. but…. I JUST WANT TO start writing code poor Henry
7. Angular core concepts Component Module Service / DI Directive Pipe Routing optional optional optional optional
8. Module Component … … Filtering list Smart search Speaker card Paging Filtering Speaker List page Speaker details page Speaker image card Session detail Codecamp App Module Sponsor Module Sponsor List page Sponsor card …
9. Angular love typescript https://www.typescriptlang.org/play/index.html
10. Start quick with Angular CLI npm install @angular/cli -g ng new my-project-name https://cli.angular.io/
11. Let’s start an Angular project!
12. Angular libraries & ecosystem ngx-bootstrap Angular Material Ag-Grid, KendoUI, DevExtreme, … Angular Animation Angular Forms Angular Http NgRx ngx- translate angular fire2
13. JQuery HTML CSS Javacript All covered! - Linting - Setup testing - Development server - Project structure … Minify Uglify Webpack Gulp Transpiler ES6+ Sass, Less
14. Supercharge Angular with ~: npm install firebase-tools -g project: npm install firebase --save https://firebase.google.com
15. Firebase key features Not just a database! Realtime database Hosting Storage Authentication Cloud functions Firestore - available in web, android, ios, unity, c++
16. Demo time https://polr.me/fire
17. My journey from to Initially: - Weird syntax - Why force me to use typescript? - Why so many files?
18. My journey from to Now: - Syntax make sense for me, though I hope it’s shorter - I love typescript, never look back - I still think there are many files, but get used to it - Dependency Injection is awesome
19. Why I like it Angular? Tools for common tasks Quick start Scale Eco system / Community Learn once, use everywhere Standard way of getting things done
20. + = Try it yourself! https://stackblitz.com/edit/angular-1iment (online, no installation needed)
21. That’s all, thank you! https://github.com/chybie/ro-demo https://github.com/chybie/ng-fire-up Demo 2 Demo 1