$30 off During Our Annual Pro Sale. View Details »

Angular Basics for Angular Hack Day 7 March 2020

Angular Basics for Angular Hack Day 7 March 2020

Angular Basics for Angular Hack Day 7 March 2020

- Building blocks
- Introduction to Observables

Aliaksei Kuncevič

March 07, 2020

More Decks by Aliaksei Kuncevič

Other Decks in Education


  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

  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.

  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