The document discusses async programming in JavaScript, highlighting the limitations of callbacks and promises, including callback hell and error handling issues. It introduces observables as a solution, describing them as a combination of data and time analogous to streams that can handle events and provide more control over asynchronous data flows. The text also touches on the implementation of observers and various operators useful for managing observables.

1. Async programming
With Observable
Seydou N Ba
@douxsey03

2. Programme
• Async programming késaco ?
• How we do it in javascript ?
- callback
- Promise: then / async/await
• Observable to the rescue.
• Iterator <==> Observer

3. Async programming

4. In other Land
blocking (I/O)

5. In other land
special syntax

6. How JS Does Async things!

7. Example in JS

8. But why ?
• Why It is different (can not use data just after)
• Why not sequential

9. Because…
• JS is single thread
• Designated first for client side
- Should do others thing
- and take care of the user also
• Non Blocking model

10. Asynchronous Issues
• Complex State
• Error handling
• Memory Leaks
• Race Conditions
• Risk Of retry

11. Callbacks

13. Hum..But..But
Callback HELL

14. Callback not so great
• Callback Hell
• Error handling - kinda suicidal
• No control

15. What about
PROMISE

17. More complex One

18. Promise are not perfect also
• Callback Hell
• Error handling - kinda suicidal
• No control
• Only resolve once (not suitable for events)
• Not cancellable
• Always Asynchrone

19. Observables

20. Definition

21. For me…
• Observable = data + time (kinda promise but
continuously)
• Hum sounds familiar: Streams is a sequence of data
elements made available over time. (Wikipedia)
•

22. Streams Emit…
• Values
• Error
• Complete Signal (end of the stream)

23. Streamable in JS
• DOM Events (click, mouseover, mouse-down, keyup,..)
• Animations
• WebSockets
• Http Requests
• …

24. What else..
• They need an observer.
• They are lazy
• They are just function
• They link producers to consumers

25. Observer
• Literal JS Object that implements:
• next function
• error: function
• complete function

26. Example observer

27. Just Function
• They are just function

28. Example of observable

29. Resume

30. Some useful operator
• throttle
• debounce
• map
• filter
• takeUntil

31. Iterator
<==>
Observable

32. Iterators ???
• Literal JS object that implements:
• a next function that should return an object with
- done
- value
• that sounds so familiar

33. As we said before…

34. lets try custom
observable

35. Ah!!!
thanks,
END