Reactive programming with cycle.js
Download as PDF, PPTX5 likes1,532 views
This document provides an overview of reactive programming and Cycle.js. It discusses reactive programming concepts like streams, cold and hot observables, and operators. It also covers architectural patterns like MVC, MVVM, Flux and MVI. Finally, it explains the core concepts and drivers of Cycle.js, which implements the MVI pattern and uses functional reactive programming principles for building user interfaces.
More Related Content
Similar to Reactive programming with cycle.js(20)
Reactive programming with cycle.js
- 1.
- 2. HELLO! I am LucaMezzalira Solutions Architect @ Massive Interactive Google Developer Expert on Web Technologies Community Manager of London JavaScript User Group
- 3. AGENDA ▸ Reactive programming ▸Model - View - Intent ▸ Cycle.js
- 4.
- 5. PROGRAMMING PARADIGMS FUNCTIONAL It isa declarative programming paradigm, which means programming is done with expressions. In functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function f twice with the same value for an argument x will produce the same result f(x) each time. IMPERATIVE It is a programming paradigm that uses statements that change a program's state. In much the same way that the imperative mood in natural languages expresses commands, an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how a program operates. REACTIVE It is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow.
- 6.
- 7. REACTIVE PROGRAMMING IS PROGRAMMINGWITH ASYNCHRONOUS DATA STREAMS
- 8.
- 9. OBSERVER PATTERN The observerpattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.
- 10. ITERATOR PATTERN In object-orientedprogramming, the iterator pattern is a design pattern in which an iterator is used to traverse a container and access the container's elements. The iterator pattern decouples algorithms from containers
- 11.
- 12. “BACK-PRESSURE? WHAT?! Main obstaclewhen you approach for the first time Reactive Programming is the vocabulary. My first suggestion is to familiarise with the domain, a lot of concepts become way easier if you understand what they mean before you start to work with them. streams, hot observables, cold observables, marbles diagram, back-pressure, operators...
- 13. STREAMS A stream isa sequence of ongoing events ordered in time. It can emit three different things: a value (of some type), an error, or a "completed" signal. EVERYTHING CAN BE A STREAM
- 14. COLD OBSERVABLES Cold observablesstart running upon subscription: the observable sequence only starts pushing values to the observers when subscribe is called. Values are also not shared among subscribers.
- 15. HOT OBSERVABLES When anobserver subscribes to a hot observable sequence, it will get all values in the stream that are emitted after it subscribes. The hot observable sequence is shared among all subscribers, and each subscriber is pushed the next value in the sequence.
- 16. OPERATORS ▸ Creating Observables ▸Transforming Observables ▸ Filtering Observables ▸ Combining Observables ▸ Error Handling Operators ▸ Mathematical Operators ▸ Conditional Operators ▸ Connectable Observables Operators reactivex.io/documentation/operators.html
- 17.
- 18.
- 19.
- 20.
- 21. MVI RULES ▸ Amodule shouldn’t control any other module (controller in MVC) ▸ The only shared part between modules are observables ▸ Intent is a component with only one responsibility: It should interpret what the user is trying to do in terms of model updates, and export these "user intentions" as events
- 22. VIEW Input: data eventsfrom the Model. Output: a Virtual DOM rendering of the model, and raw user input events (such as clicks, keyboard typing, accelerometer events, etc). VIEW RENDERER
- 23. INTENT Input: raw userinput events from the View. Output: model-friendly user intention events. INTENT
- 24. MODEL Input: user interactionevents from the Intent. Output: data events. MODEL
- 25. MVI PROs ▸ Betterseparation of concern ▸ Monodirectional flow ▸ Dependency Injection ▸ Applications become easier to test (in particular views) ▸ All the states live inside the Model and the View is state- agnostic
- 26.
- 27. Cycle.js Cycle’s core abstractionis your application as a pure function main() where inputs are read effects (sources) from the external world and outputs (sinks) are write effects to affect the external world. These side effects in the external world are managed by drivers: plugins that handle DOM effects, HTTP effects, etc.
- 28. CORE CONCEPTS ▸ Objects ▸Functions ▸ Drivers ▸ Helpers
- 29. DRIVERS Drivers are functionsthat listen to Observable sinks (their input), perform imperative side effects, and may return Observable sources (their output). http://cycle.js.org/drivers.html Cycle.js DOMDriver
- 30.
- 31.
- 32. Why not using ReactiveProgramming in any project then?
- 33.