Angular Basics for Angular Hack Day 7 March 2020

Angular Basics for Angular Hack Day 7 March 2020

- Building blocks
- Introduction to Observables

Transcript

1. kuncevic.dev Angular Basics with ALIAKSEI KUNCEVIČ
2. kuncevic.dev ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic
3. kuncevic.dev https://angularconsulting.com.au
4. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular Workshop
5. kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com
6. kuncevic.dev TOC ✅ Angular Basics Building blocks Introduction to Observables
7. kuncevic.dev Application Architecture
8. kuncevic.dev The Core of Angular app Architecture 1. Components 2. Services 3. Modules
9. kuncevic.dev Components
10. kuncevic.dev App = Tree
11. kuncevic.dev App Module Components Angular Application Feature Modules
12. kuncevic.dev Component
13. kuncevic.dev Components Communication 1. Parent to Child @Input() 2. Child to Parent @Output() 3. Custom Shared Service 4. State Management (ngxs, ngrx, akita, etc)
14. kuncevic.dev Component lifecycle hooks constructor ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy
15. kuncevic.dev Most used hooks 1. ngOnChanges() 2. ngOnInit() .... 8. ngOnDestroy()
16. kuncevic.dev The King ngOnInit()
17. kuncevic.dev Services
18. kuncevic.dev Services ✅ Implementing common business logic ✅ Reusable across application ✅ Avoid copy-pasting
19. kuncevic.dev Services
20. kuncevic.dev Services are Injected Into Components
21. kuncevic.dev Modules
22. kuncevic.dev Modules aka NgModules ✅ Helping to organize related things ✅ Combining logically related code usints (components, services, etc) together
23. kuncevic.dev Module
24. kuncevic.dev For Better Maintainability ✅ Create multiple modules (aka feature modules) ✅ Organize your modules ✅ Avoid having one big AppModule per app
25. kuncevic.dev Library Module
26. kuncevic.dev ngModules will become optional in the future
27. kuncevic.dev RxJS
28. kuncevic.dev Reactive programming (paradigm) RxJS (library) Observable (object)
29. kuncevic.dev Reactive(Rx) Programming Programming paradigm for writing code, mainly concerned with asynchronous data streams.
30. kuncevic.dev RxJS
31. kuncevic.dev RxJS is a JavaScript library for transforming, composing and querying asynchronous streams of data.
32. kuncevic.dev Think of RxJS as 'Lodash' for handling asynchronous events.
33. kuncevic.dev When we use Reactive Programming?
34. kuncevic.dev Use Cases ✅ Data streams ✅ DOM events ✅ HTTP calls ✅ WebSockets
35. kuncevic.dev
36. kuncevic.dev Is RxJS a Real Barrier?
37. kuncevic.dev Rx extensions for Languages ✅ Java: RxJava ✅ JavaScript: RxJS ✅ C#: Rx.NET ✅ C#(Unity): UniRx ✅ Scala: RxScala ✅ Clojure: RxClojure ✅ C++: RxCpp ✅ Lua: RxLua ✅ Ruby: Rx.rb ✅ Python: RxPY ✅ Go: RxGo ✅ Groovy: RxGroovy ✅ JRuby: RxJRuby ✅ Kotlin: RxKotlin ✅ Swift: RxSwift ✅ PHP: RxPHP ✅ Elixir: reaxive ✅ Dart: RxDart
38. kuncevic.dev Observer(s) vs Observable Observer is a behavioral design pattern. It specifies communication between objects: observable and observers
39. kuncevic.dev Observer(s) vs Observable An observable is an object which notifies observers about the changes in its state
40. kuncevic.dev Observer1 Observable subscribe() listen... onNext() onError() onCompleted() ❌ unsubscribe()
41. kuncevic.dev Observable Lazy (Cold) Hot
42. kuncevic.dev Example
43. kuncevic.dev
44. kuncevic.dev Basic Programming Concepts
45. kuncevic.dev Observable vs Promise Emits multiple values over period of time Emits only single value at a time Lazy (Cold). Observable is not called until we subscribe for it. Not Lazy (Hot).It is executed without calling then or catch Can be canceled by calling unsubscribe Not cancellable Supports operators like map, forEach, reduce, retry, retryWhen Operators are not available We can chain observables to handle complex logic on the streams We can use only then clause Predictable error handling Pushes errors down the chain
46. kuncevic.dev Observable operators
47. kuncevic.dev Common RxJS operators Area Operators Creation from,fromEvent, of Combination combineLatest, concat, merge, zip, startWith , withLatestFrom, Filtering debounceTime, distinctUntilChanged, filter, take, takeUntil Transformation bufferTime, concatMap, map, mergeMap, scan, switchMap Utility tap Multicasting share
48. kuncevic.dev pipe function
49. kuncevic.dev Want to learn even more? kuncevic.dev/courses
50. kuncevic.dev Th nk you! twitter.com/kuncevic linkedin.com/in/kuncevic