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Č
   

   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