Functional programming, TypeScript and RXJS

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rights
RXJS
TypeScript
Functional P.

Copyright © 2018 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2018 Talentica Software (I) Pvt Ltd. All rights
Agenda
• Functional Programming.
• TypeScript.
• Reactive programming.
2

Functional Programming in JS
• JS is a multi-paradigm language. That means it
doesn't restrict you to one particular paradigm
when writing code.
• JS is not optimized to be a Functional
Programming language. However, it has many of
the tools you need for FP.
• Using FP concepts in JS does not mean you have
to necessarily abandon other paradigms.
3

FP VS OOP
• What is OOP Paradigm.
• What is Functional Programming Paradigm.

What is OOP Paradigm
Classes

Functional Programming
Functions
R1
R2
R3

{
name: “Vivek”,
sayHi: () => `Hello, ${name}`
}

Principles of FP
• Pure functions / Avoid side effects
• Higher order function.
• Function Currying.
• Function Composition over inheritance.
• Break functionality into reusable functions with single
responsibility.
• Avoid mutating state / Immutability .

Pure Functions
• Any pure function simply maps input to output
that’s it.
• A function is called pure if it meets the following
two conditions:
1. There are no side-effects.
2. Given the same input, will always return the same
output.
10

Pure function

Examples of Impure Functions …

Don’t Mutate Input

Not pure function

Do not depend on global/shared
properties

Don’t depend on external State

No Ajax Calls

Avoiding side effects
• Don't mutate the input
• Don't modify any external variables/properties/
state
• Don't make any AJAX calls
• Don't manipulate the DOM
18

Benefits of Pure Function
• Can memoize output
• Easy to test.
• No shared state, So highly immune to bugs.
• Easy for parallel processing.

Function currying
Demo …

Higher Order Functions

Function Composition

What is TypeScript

Basic Types
Demo …

Classes
Demo …

Interfaces
Demo …

Generics

Decorators
Demo …

Why Typescript
• Throws error in during development and saves time.
• Help avoid silent errors, like passing string instead of
number.
• Typescript helps to write static typed code.
• Typescript provides improved IntelliSense,
suggestions.
• Helps a lot while refactoring.

IntelliSense and errors
Demo …

Reactive
Programming
Reactive Programming is an asynchronous
programming paradigm concerned with data
streams and the propagation of change
Describe your application in terms of data
flowing through pipelines of transformations (
respond to those pipelines & produce some sort
of result on the user interface )
In simple words, in reactive programming - data
flows emitted by one component and the
underlying structure provided by the language
will propagate those changes to all the other
components that are registered to receive those
changes
32

Reactive
Programming
33

Reactive
Programming
34

RxJS
• Library to build reactive applications
• JavaScript implementation of the ReactiveX API
• Build asynchronous, modular event-based apps
• Easily create event streams or data streams
• Compose or transform streams with query like
operators
• Allows streams of data to be observed – Listen to
any observable stream to perform side effects
35

ReactiveX ?
• An API for async programming with
observable streams
• More than an API, it's an idea
• The observer pattern done right!
• Combination of the best ideas from observer
pattern, iterator pattern and functional
programming
• Implementations -
– Java : RxJava
– JavaScript : RxJS
– Scala : RxScala
– and a lot more …
36

The Observer
design
pattern
• Observer pattern defines a one-to-many
dependency between objects such that when one
object's state changes, all its dependents are
notified and updated automatically.
• In observer pattern, there are many observers
(subscriber objects) that are observing a subject
(publisher object). Observers register themselves
to a subject to get a notification when there is a
change in the subject's state
• An observer object can register or unregister from
a subject at any point in time
37

The Observer
design
pattern
38

The Observer design pattern

What are Observables ?
• Lazy push collections
of multiple values.
They fill the missing
spot in the
displayed table
40

What is an
Observable ?
• Observable is just a function that
takes an observer and returns a
function
• Shape:
– A function
– That accepts an observer: An
object with `next`, `error` and
`complete` methods on it
– And returns a cancellation
function
• Purpose:
– To connect the observer to
something that produces values
(a producer) and return a
means to tear down that
connection to the producer.
The observer is really a registry
of handlers that can be pushed
values over time
41

What is an Observer?
• Is a collection of callbacks that knows how to listen to values delivered by the
Observable. An object with `next`, `error` and `complete` methods on it
• When we talk about RxJS or Reactive programming, generally observables get top
billing. But the observer implementation is the workhorse of this type of reactive
programming. Observables are inert. They’re just functions. They sit there until
you `subscribe` to them, they set up your observer, and they’re done, back to
being boring old functions waiting to be called. The observers on the other hand,
stay active and listen for events from your producers

Demo 1 : Let's create
an Observable
43

From Promiseland

To Observableland

Promises vs Observables
46
• Single emission of value
• Eager
Promises
• Multi emission of values
• Lazy
Observables

Operators
• Also Just Functions
• An operator in RxJS is little more than a function that takes a source observable,
and returns a new observable that will subscribe to that source observable when
you subscribe to it
• Some common operators :
– Map, filter, reduce
– scan
– combineLatest
– WithLatestFrom
– etc

Example – The map operator

Hot vs Cold
Observable
• Unicast vs Multicast
49

Cold Observable
• COLD is when your observable creates the producer
• An observable is “cold” if its underlying producer is created and activated during
subscription. This means, that if observables are functions, then the producer is
created and activated by calling that function

Cold Observable
• Example :

Hot Observable
• HOT is when your observable closes over the producer
• An observable is “hot” if its underlying producer is either created or activated
outside of subscription

Hot Observable
• Example :

Subjects An RxJS Subject is a special type of
Observable that allows values to be multi-
casted to many Observers. While plain
Observables are unicast (each subscribed
Observer owns an independent execution of
the Observable), Subjects are multicast
54

Subjects But how does it multicast?
55

Subjects
• Every Subject is an Observable. Given a Subject, you
can subscribe to it, providing an Observer, which will
start receiving values normally. From the perspective
of the Observer, it cannot tell whether the Observable
execution is coming from a plain unicast Observable
or a Subject
• Every Subject is an Observer. It is an object with the
methods next(v), error(e), and complete(). To feed a
new value to the Subject, just call next(theValue), and
it will be multi-casted to the Observers registered to
listen to the Subject
• Internally to the Subject, subscribe does not invoke a
new execution that delivers values. It simply registers
the given Observer in a list of Observers, similarly to
how addListener usually works in other libraries and
languages
56

Subjects -
remember
the observer
design
pattern?
57

Cold to Hot using Subjects
• How to convert Cold Observables to Hot using Subjects?

Types of Subject • Async Subject
• Behavior Subject
• Replay Subject
59

Subject vs
Observable
• The most important distinction between a
Subject and an Observable is that a Subject
has state, it keeps a list of observers. On the
other hand, an Observable is just a
function that sets up observation
• While Subjects are Observables, Subjects
also implement an Observer interface. They
have next, error, and complete methods on
them. These methods are used to notify
their counterparts on observers in the
subject’s internal observers list. This means
a subject can be used as an observer to
subscribe to any observable.
60

Demo 6 : A Reactive
example
61

Thank you …

Functional programming, TypeScript and RXJS

More Related Content

Similar to Functional programming, TypeScript and RXJS (20)

Recently uploaded (20)

Functional programming, TypeScript and RXJS

Editor's Notes