SlideShare a Scribd company logo
From zero to hero with
the Reactive Extensions
forJavaScript
Maurice de Beijer
@mauricedb
Who am I?
 Maurice de Beijer
 The Problem Solver
 MicrosoftAzure MVP
 Freelance developer/instructor
 Twitter: @mauricedb and @React_Tutorial
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
2
Topics
 What is RxJS?
 Why use it?
 How to create observables.
 Using operators with observables.
Observer
pattern
Iterator
pattern
Why?
 Reactive programming.
 Programming with asynchronous data streams.
 Most actions are not standalone occurrences.
 Example: A mouse click triggers an Ajax request which triggers a UI
update.
 RxJS composes these streams in a functional style.
Filtering data
With array
functions
With RxJS
Timer based
With
imperative
code
With RxJS
Fetching data
With promises
With RxJS
Observables
The RxJS
Observable
 An Observable is the object that emits a stream of event.
 The observer is the code that subscribes to the event stream.
A simple clock
Unsubscribing
Creating
observables
Operators
RxJS operators
 Operators are used to operate on the event stream between the
source and the subscriber.
 There are many operators for all sorts of purposes:
 Transforming
 Filtering
 Combining
 Error handling
 Aggregate
 …
RxMarbles
Interactive diagrams of
RxObservables
Events
Ajax
Retry failed
requests
Retry with
backing off
Combining
streams
 Streams can be combined in may ways:
 Switching
 Combine
 Merging
 Zip
 …
Merge
Example
Paint example
Conclusion
 Reactive programming is very powerful.
 Compose multiple asynchronous data streams.
 Transform streams using operators as needed.
 Retry failures.
 Cancel subscriptions as needed.
Thank you
Maurice de Beijer - @mauricedb

More Related Content

Similar to From zero to hero with the Reactive extensions for JavaScript

Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
Matt Raible
 
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
Narola Infotech
 
From User Action to Framework Reaction
From User Action to Framework ReactionFrom User Action to Framework Reaction
From User Action to Framework Reaction
jbandi
 
CraftCamp for Students - Introduction to JHipster
CraftCamp for Students - Introduction to JHipsterCraftCamp for Students - Introduction to JHipster
CraftCamp for Students - Introduction to JHipster
craftworkz
 
From User Action to Framework Reaction
From User Action to Framework ReactionFrom User Action to Framework Reaction
From User Action to Framework Reaction
Jonas Bandi
 
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
stan229
 
dinesh_7.0_years_exp_in_java
dinesh_7.0_years_exp_in_javadinesh_7.0_years_exp_in_java
dinesh_7.0_years_exp_in_java
Dinesh Rajput
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
Jared Faris
 
WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)
WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)
WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)
Afkham Azeez
 
Meteor Introduction - Ashish
Meteor Introduction - AshishMeteor Introduction - Ashish
Meteor Introduction - Ashish
Entrepreneur / Startup
 
Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...
Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...
Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...
Afkham Azeez
 
Event-Sourcing your React-Redux applications
Event-Sourcing your React-Redux applicationsEvent-Sourcing your React-Redux applications
Event-Sourcing your React-Redux applications
Maurice De Beijer [MVP]
 
東京Node学園祭飛び込みLT
東京Node学園祭飛び込みLT東京Node学園祭飛び込みLT
東京Node学園祭飛び込みLT
Nakajima Shigeru
 
Microservices with MSF4J - WSO2 Meetup
Microservices with MSF4J - WSO2 MeetupMicroservices with MSF4J - WSO2 Meetup
Microservices with MSF4J - WSO2 Meetup
Afkham Azeez
 
Reactive Programming on Android - RxAndroid - RxJava
Reactive Programming on Android - RxAndroid - RxJavaReactive Programming on Android - RxAndroid - RxJava
Reactive Programming on Android - RxAndroid - RxJava
Ali Muzaffar
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
Jared Faris
 
Swiz DAO
Swiz DAOSwiz DAO
Swiz DAO
devaraj ns
 
Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022
Matt Raible
 
Maurice de Beijer
Maurice de BeijerMaurice de Beijer
Maurice de Beijer
CodeFest
 
Event sourcing your React-Flux applications
Event sourcing your React-Flux applicationsEvent sourcing your React-Flux applications
Event sourcing your React-Flux applications
Maurice De Beijer [MVP]
 

Similar to From zero to hero with the Reactive extensions for JavaScript (20)

Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
 
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
 
From User Action to Framework Reaction
From User Action to Framework ReactionFrom User Action to Framework Reaction
From User Action to Framework Reaction
 
CraftCamp for Students - Introduction to JHipster
CraftCamp for Students - Introduction to JHipsterCraftCamp for Students - Introduction to JHipster
CraftCamp for Students - Introduction to JHipster
 
From User Action to Framework Reaction
From User Action to Framework ReactionFrom User Action to Framework Reaction
From User Action to Framework Reaction
 
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
 
dinesh_7.0_years_exp_in_java
dinesh_7.0_years_exp_in_javadinesh_7.0_years_exp_in_java
dinesh_7.0_years_exp_in_java
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 
WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)
WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)
WSO2ConUS 2015 - Introduction to WSO2 Microservices Server (MSS)
 
Meteor Introduction - Ashish
Meteor Introduction - AshishMeteor Introduction - Ashish
Meteor Introduction - Ashish
 
Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...
Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...
Introduction to WSO2 Microservices Framework for Java - MSF4J - WSO2Con Asia ...
 
Event-Sourcing your React-Redux applications
Event-Sourcing your React-Redux applicationsEvent-Sourcing your React-Redux applications
Event-Sourcing your React-Redux applications
 
東京Node学園祭飛び込みLT
東京Node学園祭飛び込みLT東京Node学園祭飛び込みLT
東京Node学園祭飛び込みLT
 
Microservices with MSF4J - WSO2 Meetup
Microservices with MSF4J - WSO2 MeetupMicroservices with MSF4J - WSO2 Meetup
Microservices with MSF4J - WSO2 Meetup
 
Reactive Programming on Android - RxAndroid - RxJava
Reactive Programming on Android - RxAndroid - RxJavaReactive Programming on Android - RxAndroid - RxJava
Reactive Programming on Android - RxAndroid - RxJava
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
 
Swiz DAO
Swiz DAOSwiz DAO
Swiz DAO
 
Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022
 
Maurice de Beijer
Maurice de BeijerMaurice de Beijer
Maurice de Beijer
 
Event sourcing your React-Flux applications
Event sourcing your React-Flux applicationsEvent sourcing your React-Flux applications
Event sourcing your React-Flux applications
 

More from Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
Maurice De Beijer [MVP]
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Maurice De Beijer [MVP]
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Maurice De Beijer [MVP]
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Maurice De Beijer [MVP]
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Maurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
Maurice De Beijer [MVP]
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
Maurice De Beijer [MVP]
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
The new React
The new React The new React
The new React
Maurice De Beijer [MVP]
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
Maurice De Beijer [MVP]
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Maurice De Beijer [MVP]
 
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API'sCreate flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
Maurice De Beijer [MVP]
 

More from Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
The new React
The new React The new React
The new React
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
 
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API'sCreate flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
 

Recently uploaded

Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Intelisync
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
GDSC PJATK
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 

Recently uploaded (20)

Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 

From zero to hero with the Reactive extensions for JavaScript

Editor's Notes

  1. import { Observable } from 'rxjs'; const timer$ = Observable.create(subscriber => { setInterval(() => subscriber.next(new Date().toLocaleTimeString()), 1000); }); timer$.subscribe(e => console.log(e));
  2. import { Observable } from 'rxjs'; const timer$ = Observable.create(subscriber => { const handle = setInterval( () => subscriber.next(new Date().toLocaleTimeString()), 1000 ); return () => clearInterval(handle); }); const subscription = timer$.subscribe(e => console.log(e)); setTimeout(() => subscription.unsubscribe(), 5000);
  3. import { interval } from 'rxjs'; const timer$ = interval(1000); const subscription = timer$.subscribe(e => console.log(e)); setTimeout(() => subscription.unsubscribe(), 5000);
  4. import { fromEvent } from 'rxjs'; fromEvent(document.getElementById('btnStart'), 'click').subscribe( e => console.log(e) );
  5. import { fromEvent } from 'rxjs'; import { ajax } from 'rxjs/ajax'; import { switchMap } from 'rxjs/operators'; fromEvent(document.getElementById('btnStart'), 'click') .pipe(switchMap(() => ajax.get('http://TheProblemSolver.nl'))) .subscribe(e => console.log(e));
  6. import { fromEvent } from 'rxjs'; import { ajax } from 'rxjs/ajax'; import { switchMap, retry, map } from 'rxjs/operators'; fromEvent(document.getElementById('btnStart'), 'click') .pipe( switchMap(() => ajax.get('http://TheProblemSolver.nl/not-found.json') .pipe(retry(5)) ), map(rsp => rsp.response) ) .subscribe(console.log);
  7. import { fromEvent, timer } from 'rxjs'; import { ajax } from 'rxjs/ajax'; import { switchMap, retryWhen, map, scan, delayWhen, take } from 'rxjs/operators'; fromEvent(document.getElementById('btnStart'), 'click') .pipe( switchMap(() => ajax.get('http://TheProblemSolver.nl/not-found.json').pipe( retryWhen(error$ => error$.pipe( map(() => 1000), scan((p, c) => p + c), delayWhen(wait => timer(wait)), take(5) ) ) ) ), map(rsp => rsp.response) ) .subscribe(e => console.log(e));
  8. import { fromEvent, merge } from 'rxjs'; import { map, scan, filter } from 'rxjs/operators'; const add$ = fromEvent(document.getElementById('add'), 'click').pipe( map(() => 1) ); const subtract$ = fromEvent(document.getElementById('subtract'), 'click').pipe( map(() => -1) ); merge(add$, subtract$) .pipe( scan((previous, current) => previous + current), filter(value => value >= 0) ) .subscribe(e => console.log(e));
  9. https://www.flickr.com/photos/stevendepolo/4582437563/