Save 37% off PRO during our Black Friday Sale! »

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


  1. Angular Basics with ALIAKSEI KUNCEVIČ

  2. ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant

  4. @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular

  5. @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular
  6. TOC ✅ Angular Basics Building blocks Introduction to Observables

  7. Application Architecture

  8. The Core of Angular app Architecture 1. Components 2.

    Services 3. Modules
  9. Components

  10. App = Tree

  11. App Module Components Angular Application Feature Modules

  12. Component

  13. Components Communication 1. Parent to Child @Input() 2. Child

    to Parent @Output() 3. Custom Shared Service 4. State Management (ngxs, ngrx, akita, etc)
  14. Component lifecycle hooks constructor ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked

    ngAfterViewInit ngAfterViewChecked ngOnDestroy
  15. Most used hooks 1. ngOnChanges() 2. ngOnInit() .... 8.

  16. The King ngOnInit()

  17. Services

  18. Services ✅ Implementing common business logic ✅ Reusable across

    application ✅ Avoid copy-pasting
  19. Services

  20. Services are Injected Into Components

  21. Modules

  22. Modules aka NgModules ✅ Helping to organize related things

    ✅ Combining logically related code usints (components, services, etc) together
  23. Module

  24. For Better Maintainability ✅ Create multiple modules (aka feature

    modules) ✅ Organize your modules ✅ Avoid having one big AppModule per app
  25. Library Module

  26. ngModules will become optional in the future

  27. RxJS

  28. Reactive programming (paradigm) RxJS (library) Observable (object)

  29. Reactive(Rx) Programming Programming paradigm for writing code, mainly concerned

    with asynchronous data streams.
  30. RxJS

  31. RxJS is a JavaScript library for transforming, composing and

    querying asynchronous streams of data.
  32. Think of RxJS as 'Lodash' for handling asynchronous events.

  33. When we use Reactive Programming?

  34. Use Cases ✅ Data streams ✅ DOM events ✅

    HTTP calls ✅ WebSockets

  36. Is RxJS a Real Barrier?

  37. 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. Observer(s) vs Observable Observer is a behavioral design pattern.

    It specifies communication between objects: observable and observers
  39. Observer(s) vs Observable An observable is an object which

    notifies observers about the changes in its state
  40. Observer1 Observable subscribe() listen... onNext() onError() onCompleted() ❌ unsubscribe()

  41. Observable Lazy (Cold) Hot

  42. Example


  44. Basic Programming Concepts

  45. 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. Observable operators

  47. 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. pipe function

  49. Want to learn even more?

  50. Th nk you!