Angular Basics for Angular Hack Day 7 March 2020

Slide 1

Slide 1 text

kuncevic.dev Angular Basics with ALIAKSEI KUNCEVIČ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

kuncevic.dev Application Architecture

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

kuncevic.dev Components

Slide 10

Slide 10 text

kuncevic.dev App = Tree

Slide 11

Slide 11 text

kuncevic.dev App Module Components Angular Application Feature Modules

Slide 12

Slide 12 text

kuncevic.dev Component

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

kuncevic.dev The King ngOnInit()

Slide 17

Slide 17 text

kuncevic.dev Services

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

kuncevic.dev Services

Slide 20

Slide 20 text

kuncevic.dev Services are Injected Into Components

Slide 21

Slide 21 text

kuncevic.dev Modules

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

kuncevic.dev Module

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

kuncevic.dev Library Module

Slide 26

Slide 26 text

kuncevic.dev ngModules will become optional in the future

Slide 27

Slide 27 text

kuncevic.dev RxJS

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

kuncevic.dev RxJS

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

kuncevic.dev When we use Reactive Programming?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

kuncevic.dev

Slide 36

Slide 36 text

kuncevic.dev Is RxJS a Real Barrier?

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

kuncevic.dev Observer1 Observable subscribe() listen... onNext() onError() onCompleted() ❌ unsubscribe()

Slide 41

Slide 41 text

kuncevic.dev Observable Lazy (Cold) Hot

Slide 42

Slide 42 text

kuncevic.dev Example

Slide 43

Slide 43 text

kuncevic.dev

Slide 44

Slide 44 text

kuncevic.dev Basic Programming Concepts

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

kuncevic.dev Observable operators

Slide 47

Slide 47 text

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