Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Education

Transcript

  1. kuncevic.dev
    Angular Basics
    with ALIAKSEI KUNCEVIČ

    View Slide

  2. kuncevic.dev
    ALIAKSEI KUNCEVIČ
    Angular Expert | Mentor | Consultant
    https://twitter.com/kuncevic
    https://github.com/kuncevic
    https://linkedin.com/in/kuncevic

    View Slide

  3. kuncevic.dev
    https://angularconsulting.com.au

    View Slide

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

    View Slide

  5. kuncevic.dev
    @kuncevic CREATOR

    Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
    frontendwatch.com

    View Slide

  6. kuncevic.dev
    TOC
    ✅ Angular Basics
    Building blocks
    Introduction to Observables

    View Slide

  7. kuncevic.dev
    Application Architecture

    View Slide

  8. kuncevic.dev
    The Core of Angular app Architecture
    1. Components
    2. Services
    3. Modules

    View Slide

  9. kuncevic.dev
    Components

    View Slide

  10. kuncevic.dev
    App = Tree

    View Slide

  11. kuncevic.dev
    App Module
    Components
    Angular Application
    Feature Modules

    View Slide

  12. kuncevic.dev
    Component

    View Slide

  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)

    View Slide

  14. kuncevic.dev
    Component lifecycle hooks
    constructor
    ngOnChanges
    ngOnInit
    ngDoCheck
    ngAfterContentInit
    ngAfterContentChecked
    ngAfterViewInit
    ngAfterViewChecked
    ngOnDestroy

    View Slide

  15. kuncevic.dev
    Most used hooks
    1. ngOnChanges()
    2. ngOnInit()
    ....
    8. ngOnDestroy()

    View Slide

  16. kuncevic.dev
    The King
    ngOnInit()

    View Slide

  17. kuncevic.dev
    Services

    View Slide

  18. kuncevic.dev
    Services
    ✅ Implementing common business logic
    ✅ Reusable across application
    ✅ Avoid copy-pasting

    View Slide

  19. kuncevic.dev
    Services

    View Slide

  20. kuncevic.dev
    Services are Injected Into Components

    View Slide

  21. kuncevic.dev
    Modules

    View Slide

  22. kuncevic.dev
    Modules aka NgModules
    ✅ Helping to organize related things
    ✅ Combining logically related code usints
    (components, services, etc) together

    View Slide

  23. kuncevic.dev
    Module

    View Slide

  24. kuncevic.dev
    For Better Maintainability
    ✅ Create multiple modules (aka feature modules)
    ✅ Organize your modules
    ✅ Avoid having one big AppModule per app

    View Slide

  25. kuncevic.dev
    Library Module

    View Slide

  26. kuncevic.dev
    ngModules will become optional in
    the future

    View Slide

  27. kuncevic.dev
    RxJS

    View Slide

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

    View Slide

  29. kuncevic.dev
    Reactive(Rx) Programming
    Programming paradigm for writing code,
    mainly concerned with asynchronous data
    streams.

    View Slide

  30. kuncevic.dev
    RxJS

    View Slide

  31. kuncevic.dev
    RxJS is a JavaScript library for
    transforming, composing and
    querying asynchronous streams of
    data.

    View Slide

  32. kuncevic.dev
    Think of RxJS as 'Lodash' for
    handling asynchronous events.

    View Slide

  33. kuncevic.dev
    When we use Reactive
    Programming?

    View Slide

  34. kuncevic.dev
    Use Cases
    ✅ Data streams
    ✅ DOM events
    ✅ HTTP calls
    ✅ WebSockets

    View Slide

  35. kuncevic.dev

    View Slide

  36. kuncevic.dev
    Is RxJS a Real Barrier?

    View Slide

  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

    View Slide

  38. kuncevic.dev
    Observer(s) vs Observable
    Observer is a behavioral design pattern. It
    specifies communication between objects:
    observable and observers

    View Slide

  39. kuncevic.dev
    Observer(s) vs Observable
    An observable is an object which notifies
    observers about the changes in its state

    View Slide

  40. kuncevic.dev
    Observer1 Observable
    subscribe()

    listen...
    onNext()
    onError()
    onCompleted() ❌ unsubscribe()

    View Slide

  41. kuncevic.dev
    Observable
    Lazy (Cold) Hot

    View Slide

  42. kuncevic.dev
    Example

    View Slide

  43. kuncevic.dev

    View Slide

  44. kuncevic.dev
    Basic Programming Concepts

    View Slide

  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

    View Slide

  46. kuncevic.dev
    Observable operators

    View Slide

  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

    View Slide

  48. kuncevic.dev
    pipe function

    View Slide

  49. kuncevic.dev
    Want to learn even more?
    kuncevic.dev/courses

    View Slide

  50. kuncevic.dev
    Th nk you!
    twitter.com/kuncevic
    linkedin.com/in/kuncevic

    View Slide