The document summarizes a presentation on Redux Sagas given at a React Native meetup in Munich in May 2017. It introduces generators and how they enable asynchronous logic to be written in a synchronous style. It provides examples of using generators to increment a value each time a new value is passed in and shows how generators can be used in a loop. The purpose of Redux Sagas is to manage asynchronous side effects in Redux applications using generator functions.
In this presentation speaker considered theoretical basics of using the redux-saga library, which was created for facilitating the organization of the so-called “side effects” (for example, asynchronous operations). The event participants obtained practical tips on using saga in real-life projects.
This presentation by Igor Nesterenko (Lead Software Engineer, Consultant, GlobalLogic, Kharkiv) was delivered at GlobalLogic Kharkiv JS TechTalk #2 on August 17, 2018.
Programmation fonctionnelle en JavaScriptLoïc Knuchel
La programmation fonctionnelle permet de faire du code plus modulaire, avec moins de bugs et de manière plus productive !!!
Cette présentation montre comment la programmation fonctionnelle peut tenir se promesse et comment l'appliquer avec JavaScript.
In this presentation speaker considered theoretical basics of using the redux-saga library, which was created for facilitating the organization of the so-called “side effects” (for example, asynchronous operations). The event participants obtained practical tips on using saga in real-life projects.
This presentation by Igor Nesterenko (Lead Software Engineer, Consultant, GlobalLogic, Kharkiv) was delivered at GlobalLogic Kharkiv JS TechTalk #2 on August 17, 2018.
Programmation fonctionnelle en JavaScriptLoïc Knuchel
La programmation fonctionnelle permet de faire du code plus modulaire, avec moins de bugs et de manière plus productive !!!
Cette présentation montre comment la programmation fonctionnelle peut tenir se promesse et comment l'appliquer avec JavaScript.
Why using composition in React ? What are the alternative (mixins, inheritance)? How to use composition to build your React application? What are the pros and cons?
Talk on code and craftsmanship delivered at KCDC. It's best to approach code the way people traditionally learned crafts. Go through the stages of apprentice, journeyman, master. Along the way, develop your ability to see, your ability to create, and your understanding of why things work.
Flying Futures at the same sky can make the sun rise at midnightWiem Zine Elabidine
Template made by Slidesgo
Implementing responsive and high-performance applications is the most obvious challenge that we face in our programming life. It’s interesting to deeply study concurrency and parallelism on the JVM. In this talk you will learn how to describe parallel tasks and the idea behind Futures and the execution context. I will cover the tricky part of concurrency when the concurrent tasks share and use the same resources and how flying Futures in the same sky can make the sun rise at midnight! At the end I will talk about some possible solutions that you can use to reduce your worries about the pitfalls of concurrency.
This presentation explains the difference between concurrency and parallelism, and how could we make parallel computations and how could we design an API for parallel computation following the structure presented in the Functional Programming in Scala book
Session 3 - 안정민 UI 모듈화로 워라밸 지키기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
Introduction to how to test our programs using imperative programming and functional programming with Tagless Final technique and how to make it simpler using ZIO. ZIO provides many features for concurrency and asynchronous programs. This presentation is about how to use ZIO environment to test your application.
Modern applications are concurrent, parallel, asynchronous, and synchronous; they utilize many different subsystems, including network systems, actor systems, distributed systems, and more. Across all these modes of computation and different subsystems, the one constant is failure. Errors happen everywhere, and taming their monstrous complexity in a way that helps developers write correct code and troubleshoot failures is one of the hardest challenges of modern application development.
In this presentation, created just for the Dublin Scala Meetup, John A. De Goes and Kai from 7mind.io will take attendees on a tour of error management in Scala, comparing and contrasting Scala's own Future type, and the ZIO effect type. You'll see how functional effects provide features that go way beyond Future: including unified errors across all modes of computation, powerful error operators, lossless error propagation, compiler-assisted error handling, and a stunning new feature for debugging, sponsored by Irish consultancy 7mind.io, will be unveiled exclusively at this presentation.
Come learn about how modern functional effect systems like ZIO provide compelling new solutions to the problems of everyday error management.
Migrating from Flux to Redux. Why and how.Astrails
When I started to work with React back in Apr-2015 there were many libraries to manage the application flow. I decided to start with classical FB's Flux implementation to understand what's missed there. Eventually react-redux and redux solved most of issues I had with Flux. This talk is about practical aspects of migration from Flux to Redux.
Object-Oriented JavaScript presentation given at ESRI's 2010 Developer Summit. Slides and code available at http://github.com/kvangork/OOJS-Presentation
Find me on twitter @kvangork
or at my blog: http://prng.vangorkom.org
Austin Bingham. Transducers in Python. PyCon BelarusAlina Dolgikh
Understanding Transducers Through Python – Transducers are a new and interesting functional programming concept that comes from the world of Clojure. In this talk we’ll learn about transducers by seeing how to implement them in Python. By using transducers to build familiar functional programming elements like map and filter, we’ll see that transducers are actually simple, elegant, and quite powerful.
The Interactive Grid is introduced in APEX 5.1 as a best of both worlds of Tabular Forms and Interactive Reports. Although a lot of settings are declaratively avaible within the APEX builder, there are a ton of features built in that are only accessible by JavaScript.
In this session you will learn how to use the most interesting "hidden" features with just a few lines of JavaScript.
Some examples:
- Adding and removing buttons from the Interactive Grid toolbar.
- Adding and removing actions from the toolbar menu.
- Adding and removing functionality from the row level pop up menu.
- Removing complexity on the column level.
- Adding tooltips to a column.
- Changing the layout of columns and headings.
- Refreshing (only) changed records within the grid.
- Removing only deleted records from the grid - without a full refresh.
Programiści aplikacji Mobilnych na Androida, uwięzieni w czasach Java 1.7 od pewnego czasu eksperymentowali z innymi językami programowania. Żaden nie zdobył do tej pory takiej popularności jak Kotlin. Ale czy faktycznie jest to coś rewolucyjnego? Przecież getery, settery i konstruktory wygenerujemy za pomocą Lomboka. Używając Retrolamby zyskamy wsparcie dla dopełnień. A dodatkowo od niedawna Android ma wsparcie dla Javy 8.
Zatem co decyduje o sile Kotlina, które konstrukcje i właściwości języka powodują, że warto zastosować go w swoim projekcie? Jaki wpływ będzie to miało na architekturę aplikacji i wydajność? Kotlin jest tylko ciekawostką czy spowoduje, że będziesz kodował efektywniej? Z tej prezentacji wyniesiesz pełen zestaw informacji pozwalający odpowiedzieć na wszystkie te pytania.
Think Async: Asynchronous Patterns in NodeJSAdam L Barrett
JavaScript is single threaded, so understanding the async patterns available in the language is critical to creating maintainable NodeJS applications with good performance. In order to master “thinking in async”, we’ll explore the async patterns available in node and JavaScript including standard callbacks, promises, thunks/tasks, the new async/await, the upcoming asynchronous iteration features, streams, CSP and ES Observables.
Why using composition in React ? What are the alternative (mixins, inheritance)? How to use composition to build your React application? What are the pros and cons?
Talk on code and craftsmanship delivered at KCDC. It's best to approach code the way people traditionally learned crafts. Go through the stages of apprentice, journeyman, master. Along the way, develop your ability to see, your ability to create, and your understanding of why things work.
Flying Futures at the same sky can make the sun rise at midnightWiem Zine Elabidine
Template made by Slidesgo
Implementing responsive and high-performance applications is the most obvious challenge that we face in our programming life. It’s interesting to deeply study concurrency and parallelism on the JVM. In this talk you will learn how to describe parallel tasks and the idea behind Futures and the execution context. I will cover the tricky part of concurrency when the concurrent tasks share and use the same resources and how flying Futures in the same sky can make the sun rise at midnight! At the end I will talk about some possible solutions that you can use to reduce your worries about the pitfalls of concurrency.
This presentation explains the difference between concurrency and parallelism, and how could we make parallel computations and how could we design an API for parallel computation following the structure presented in the Functional Programming in Scala book
Session 3 - 안정민 UI 모듈화로 워라밸 지키기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
Introduction to how to test our programs using imperative programming and functional programming with Tagless Final technique and how to make it simpler using ZIO. ZIO provides many features for concurrency and asynchronous programs. This presentation is about how to use ZIO environment to test your application.
Modern applications are concurrent, parallel, asynchronous, and synchronous; they utilize many different subsystems, including network systems, actor systems, distributed systems, and more. Across all these modes of computation and different subsystems, the one constant is failure. Errors happen everywhere, and taming their monstrous complexity in a way that helps developers write correct code and troubleshoot failures is one of the hardest challenges of modern application development.
In this presentation, created just for the Dublin Scala Meetup, John A. De Goes and Kai from 7mind.io will take attendees on a tour of error management in Scala, comparing and contrasting Scala's own Future type, and the ZIO effect type. You'll see how functional effects provide features that go way beyond Future: including unified errors across all modes of computation, powerful error operators, lossless error propagation, compiler-assisted error handling, and a stunning new feature for debugging, sponsored by Irish consultancy 7mind.io, will be unveiled exclusively at this presentation.
Come learn about how modern functional effect systems like ZIO provide compelling new solutions to the problems of everyday error management.
Migrating from Flux to Redux. Why and how.Astrails
When I started to work with React back in Apr-2015 there were many libraries to manage the application flow. I decided to start with classical FB's Flux implementation to understand what's missed there. Eventually react-redux and redux solved most of issues I had with Flux. This talk is about practical aspects of migration from Flux to Redux.
Object-Oriented JavaScript presentation given at ESRI's 2010 Developer Summit. Slides and code available at http://github.com/kvangork/OOJS-Presentation
Find me on twitter @kvangork
or at my blog: http://prng.vangorkom.org
Austin Bingham. Transducers in Python. PyCon BelarusAlina Dolgikh
Understanding Transducers Through Python – Transducers are a new and interesting functional programming concept that comes from the world of Clojure. In this talk we’ll learn about transducers by seeing how to implement them in Python. By using transducers to build familiar functional programming elements like map and filter, we’ll see that transducers are actually simple, elegant, and quite powerful.
The Interactive Grid is introduced in APEX 5.1 as a best of both worlds of Tabular Forms and Interactive Reports. Although a lot of settings are declaratively avaible within the APEX builder, there are a ton of features built in that are only accessible by JavaScript.
In this session you will learn how to use the most interesting "hidden" features with just a few lines of JavaScript.
Some examples:
- Adding and removing buttons from the Interactive Grid toolbar.
- Adding and removing actions from the toolbar menu.
- Adding and removing functionality from the row level pop up menu.
- Removing complexity on the column level.
- Adding tooltips to a column.
- Changing the layout of columns and headings.
- Refreshing (only) changed records within the grid.
- Removing only deleted records from the grid - without a full refresh.
Programiści aplikacji Mobilnych na Androida, uwięzieni w czasach Java 1.7 od pewnego czasu eksperymentowali z innymi językami programowania. Żaden nie zdobył do tej pory takiej popularności jak Kotlin. Ale czy faktycznie jest to coś rewolucyjnego? Przecież getery, settery i konstruktory wygenerujemy za pomocą Lomboka. Używając Retrolamby zyskamy wsparcie dla dopełnień. A dodatkowo od niedawna Android ma wsparcie dla Javy 8.
Zatem co decyduje o sile Kotlina, które konstrukcje i właściwości języka powodują, że warto zastosować go w swoim projekcie? Jaki wpływ będzie to miało na architekturę aplikacji i wydajność? Kotlin jest tylko ciekawostką czy spowoduje, że będziesz kodował efektywniej? Z tej prezentacji wyniesiesz pełen zestaw informacji pozwalający odpowiedzieć na wszystkie te pytania.
Think Async: Asynchronous Patterns in NodeJSAdam L Barrett
JavaScript is single threaded, so understanding the async patterns available in the language is critical to creating maintainable NodeJS applications with good performance. In order to master “thinking in async”, we’ll explore the async patterns available in node and JavaScript including standard callbacks, promises, thunks/tasks, the new async/await, the upcoming asynchronous iteration features, streams, CSP and ES Observables.
In this talk we will look at some of the optimizations that JavaScriptCore uses to speed up JavaScript execution, and perhaps counterintuitively, how the same optimizations are also being applied to speeding up WebAssembly.
I dont know what is wrong with this roulette program I cant seem.pdfarchanaemporium
I don\'t know what is wrong with this roulette program I can\'t seem to get it to run.
Game Class:
public class Game {
public static void main(String[] args) {
Table table = new Table();
BinBuilder bb = new BinBuilder();
Outcome black = new Outcome(\"Black\", 35);
Bet bet = new Bet(10, black);
table.placeBet(bet);
Bin bin = bb.wheel.get(8);
System.out.println(bin.toString());
System.out.println(table.bets.toString());
System.out.println(black.toString());
ListIterator i = table.bets.listIterator();
Iterator b = bin.outcomes.iterator();
while(i.hasNext()) {
System.out.println(i.next().outcome.name.toString());
while(b.hasNext()){
System.out.println(b.next().name.toString());
if(i.next().outcome.equals(b.next())){
System.out.println(\"Win!\");
}
else{
System.out.println(\"Win :/\");
}
}
}
}
}
Player Class
public class Player {
public Table table;
public Outcome black;
public Bet bet;
public Player(Table table) {
table = new Table();
black = new Outcome(\"Black\", 1);
}
void placeBets() {
Bet bet = new Bet(100, black);
table.placeBet(bet);
}
void win(Bet bet) {
System.out.println(\"You\'ve won: \" + bet.winAmount());
}
void lose(Bet bet) {
System.out.println(\"You lost!\" + bet.loseAmount() + \":/\");
}
}
Outcome class
public class Outcome implements Comparable {
public String name;
public int odds;
public Outcome(String name, int odds){
this.name = name;
this.odds = odds;
}
public int winAmount(int amount){
return amount*this.odds;
}
public boolean equals(Outcome other){
return (this.name.equals(other.name));
}
public String toString() {
Object[] values= { name, new Integer(odds) };
String msgTempl= \"{0} ({1}:1)\";
return MessageFormat.format( msgTempl, values );
}
@Override
public int compareTo(E arg0) {
if(this.equals(arg0)){
return 0;
}
return 1;
}
}
Table Class
public class Table {
public int limit = 1000;
public LinkedList bets;
public Table() {
bets = new LinkedList();
}
public boolean isValid(Bet bet) {
int sum = 0;
for(Bet bett: bets) {
sum += bett.amountBet;
}
return (sum>limit);
}
public void placeBet(Bet bet) {
bets.add(bet);
}
ListIterator iterator() {
return bets.listIterator();
}
}
Wheel Class
public class Wheel extends TreeSet {
Vector bins;
NonRandom rng;
Set all_outcomes;
Wheel(NonRandom rng){
this.rng = rng;
rng = new NonRandom();
all_outcomes = new TreeSet();
bins = new Vector(38);
for (int i=0; i<38; i++){
bins.add(i, new Bin());
}
}
Bin next(){
int rand = rng.next(38);
return bins.elementAt(rand);
}
Bin get(int bin){
return bins.elementAt(bin);
}
public Outcome getOutcome( String name ){
TreeSet result= new TreeSet();
for( Iterator i = all_outcomes.iterator(); i.hasNext(); ) {
Outcome oc= i.next();
if( oc.name.contains(name) ) {result.add( oc );}
}
return result.first();
}
public void addOutcome(int bin, Outcome outcome) {
all_outcomes.add(outcome);
this.bins.elementAt(bin).add(outcome);
}
}
Bet Class
public class Bet {
public int amountBet;
public Outcome outcome;
public Bet(int amount, Outcome outcome) {
this.outcome = o.
Kotlin Bytecode Generation and Runtime Performanceintelliyole
In this talk, we'll dive into the details of how various language features supported by Kotlin are translated to Java bytecode. We'll use the JMH microbenchmarking tool to study the relative performance of various constructs and to understand how we can ensure top performance of the Kotlin code that we write.
Kotlin is something more than just tool that help you remove boilerplate from you code. It brings much more than just lamdas and handy syntax to your Java or Android project
Talk delivered at the Munich PHP User Group. An overview of the features of Elixir that may be more interesting for a PHP developer, so we focus in the platform, the cheap processes of the Erlang Virtual Machine, the philosophy of Let It Crash and how to model problems with trees of processes, and possible use cases.
Server Side Rendering of JavaScript in PHPIgnacio Martín
What is SSR, which problems does it solve, why do it in PHP, what options do we have for it, libraries that are available and tips and tricks. Practical code examples for Symfony and React.js, but the fundamental points can be taken away to use in other stacks like Vue and Laravel.
Redux is a powerful tool to manage our state. Can we use the same concepts in the server side so we can share the same store with users using our app at the same time in games or collaborative apps? We will see how to connect our Redux store to stores in the server side written in Node.js and Elixir OTP GenServers, and how to extend this perspective beyond particular implementations.
Talk presented in AgentConf'18
Supporting slides of my introductory workshop about React Native in React Alicante 2017.
Source code & Exercises: https://github.com/Limenius/workshop-react-native
Los JSON Web Tokens son una forma muy práctica de asegurar nuestras APIs.
En esta charla veremos cuáles son sus propiedades fundamentales, cómo trabajar con ellos y qué opciones tenemos en Symfony, tanto con librerías, como con LexikJWTAuthenticationBundle y su uso del componente Guard.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Ignacio Martín
Introducción a React.js + técnicas y conceptos útiles, como aplicaciones universales (isomórficas) o cómo usar json schema para facilitarnos la vida al trabajar con formularios.
Talk presented at Codemotion 2015.
Although the Request/Response pattern has allowed to build applications that were inconceivable when HTTP was invented, there is an increasing demand of solutions that require to push information to browsers or mobile clients as soon as it is available, using technologies like WebSockets. This has applications in messaging, notifications, games, IoT and collaborative apps, among others.
In this talk we will present the solutions available like socket.io, Faye, Pusher, PubNub or Carotene, how to integrate such services with existent or new codebases, its advantages, the challenges we will find and how to succeed bringing realtime communications to the table.
Gen Z and the marketplaces - let's translate their needsLaura Szabó
The product workshop focused on exploring the requirements of Generation Z in relation to marketplace dynamics. We delved into their specific needs, examined the specifics in their shopping preferences, and analyzed their preferred methods for accessing information and making purchases within a marketplace. Through the study of real-life cases , we tried to gain valuable insights into enhancing the marketplace experience for Generation Z.
The workshop was held on the DMA Conference in Vienna June 2024.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
2. Nacho Martin
I write code at Limenius.
We build tailor-made projects,
and provide consultancy
and formation.
We are very happy with React and React Native.
3. Roadmap:
• Are Sagas indispensable?
• Do they have a strong theoretical background?
• ES6 Generators
• Sagas
10. What we need
dispatch({type: ‘API_REQUEST’})
Reducer
Store
Middleware
dispatch({type: ‘API_REQUEST_SUCCESS’, data})
⚙
11. What we need
dispatch({type: ‘API_REQUEST’})
Reducer
state = {…state, data : action.data }
Store
Middleware
dispatch({type: ‘API_REQUEST_SUCCESS’, data})
⚙
12. What we need
dispatch({type: ‘API_REQUEST’})
Reducer
state = {…state, showError: true }
Store
Middleware
dispatch({type: ‘API_REQUEST_ERROR’})
⚙
13. What we need
dispatch({type: ‘API_REQUEST’})
Reducer
state = {…state, showError: true }
Store
Middleware
dispatch({type: ‘API_REQUEST_ERROR’})
⚙
Side effects
Pure code
30. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
31. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
32. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
{}
33. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
34. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
{ value: 'one', done: false }
35. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
36. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
{ value: 'two', done: false }
37. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
38. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
{ value: 'three', done: false }
39. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
40. First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console.log(it)
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
{ value: undefined, done: true }
41. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
42. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
heaven of data
43. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
44. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
45. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value: '1st 0’, done: false }
46. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
47. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
x = 0 + 1
48. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
49. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
50. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value: '2nd 1’, done: false }
51. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
52. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
x = 1 + 20
53. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
54. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
55. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
56. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value: '3rd 21’, done: false }
57. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
58. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
x = 21 + 300
59. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
60. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
61. function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x)
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value: '4th 321’, done: false }
62. function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
63. function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
64. function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value: 0, done: false }
65. function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value: 1, done: false }
66. function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value:21, done: false }
67. function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Passing values to generators
var it = sum()
console.log(it.next(‘unused’))
console.log(it.next(1))
console.log(it.next(20))
console.log(it.next(300))
{ value:321, done: false }
68. Making a iterable
for (let value of myIterable) {
console.log(value); // [1, 2, 3]
}
[...myIterable]; // [1, 2, 3]
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
69. const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
})
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
return user
}
var it = apiCalls()
var promise = it.next().value
console.log(promise)
promise.then((result) => {
console.log(result)
var response = it.next(result)
console.log(response)
})
70. const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
})
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
return user
}
var it = apiCalls()
var promise = it.next().value
console.log(promise)
promise.then((result) => {
console.log(result)
var response = it.next(result)
console.log(response)
})
71. const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
})
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
return user
}
var it = apiCalls()
var promise = it.next().value
console.log(promise)
promise.then((result) => {
console.log(result)
var response = it.next(result)
console.log(response)
})
Promise { <pending> }
72. With async code (+ promises)
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
})
function* apiCalls(username, password) {
var user = yield fetchUser(username)
return user
}
var it = apiCalls()
var promise = it.next().value
console.log(promise)
promise.then((result) => {
console.log(result)
var response = it.next(result)
console.log(response)
})
{ username: 'nacho', hash: '12345' }
73. With async code (+ promises)
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
})
function* apiCalls(username, password) {
var user = yield fetchUser(username)
return user
}
var it = apiCalls()
var promise = it.next().value
console.log(promise)
promise.then((result) => {
console.log(result)
var response = it.next(result)
console.log(response)
})
{ value: { username: 'nacho', hash: '12345' }, done: true }
74. With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yield someCrypto(password)
if (user.hash == hash) {
var hash = yield setSession(user.username)
var posts = yield fetchPosts(user)
}
//...
}
75. With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yield someCrypto(password)
if (user.hash == hash) {
var hash = yield setSession(user.username)
var posts = yield fetchPosts(user)
}
//...
}
We are doing async as if it was sync
Easy to understand, dependent on our project
76. With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yield someCrypto(password)
if (user.hash == hash) {
var hash = yield setSession(user.username)
var posts = yield fetchPosts(user)
}
//...
}
We are doing async as if it was sync
Easy to understand, dependent on our project
?
77. With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yield someCrypto(password)
if (user.hash == hash) {
var hash = yield setSession(user.username)
var posts = yield fetchPosts(user)
}
//...
}
We are doing async as if it was sync
Easy to understand, dependent on our project
?
More complex code
but reusable between projects
78. With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yield someCrypto(password)
if (user.hash == hash) {
var hash = yield setSession(user.username)
var posts = yield fetchPosts(user)
}
//...
}
We are doing async as if it was sync
Easy to understand, dependent on our project
More complex code
but reusable between projects
redux-saga
(or other libs)
80. Setup
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
// ...
import { helloSaga } from './sagas'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(helloSaga)
81. How to play a sound?
Imagine that we have a class SoundManager
that can load sounds, do a set up,
and has a method SoundManager.play(sound)
How could we use it in React?
83. Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={playSound(soundManager, ‘buzz’)}
/>
);
}
}
But where does soundManager come from?
85. Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={this.props.dispatch(playSound(‘buzz’))}
/>
);
}
}
Dispatch an action and we’ll see.
But the action creator doesn’t have access
to SoundManager :_(
86. Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={playSound(this.props.soundManager, ‘buzz’)}
/>
);
}
}
Passing it from its parent, and the parent of its parent with props?
87. Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={playSound(this.props.soundManager, ‘buzz’)}
/>
);
}
}
Passing it from its parent, and the parent of its parent with props?
Hairball ahead
88. Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={playSound(this.props.soundManager, ‘buzz’)}
/>
);
}
}
From redux connect:
• But soundManager is not serializable.
• Breaks time-travel, persist and rehydrate store…
89. Naive solution
What if we want to play a sound when the opponent moves too
and we receive her movements from a websocket?
90. Naive solution
What if we want to play a sound when the opponent moves too
and we receive her movements from a websocket?
class Game extends Component {
componentDidMount() {
this.props.dispatch(connectSocket(soundManager))
}
//...
}
91. Naive solution
What if we want to play a sound when the opponent moves too
and we receive her movements from a websocket?
class Game extends Component {
componentDidMount() {
this.props.dispatch(connectSocket(soundManager))
}
//...
}
What has to do connectSocket with soundManager?
We are forced to do this because we don’t know anything
better :_(
92. Using sagas
import { take } from 'redux-saga/effects'
export default function* rootSaga() {
const action = yield take(Constants.PLAY_SOUND_REQUEST)
console.log(action.sound)
}
94. Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
const action = yield take(Constants.PLAY_SOUND_REQUEST)
soundManager.play(action.sound)
}
But we will need a mock to test it
99. Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
const action = yield take(Constants.PLAY_SOUND_REQUEST)
yield call(soundManager.play, action.sound)
}
Will take 1 action, play a sound, and terminate
100. Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
while (true) {
const action = yield take(Constants.PLAY_SOUND_REQUEST)
yield call(soundManager.play, action.sound)
}
}
101. Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
while (true) {
const action = yield take(Constants.PLAY_SOUND_REQUEST)
yield call(soundManager.play, action.sound)
}
}
Will take every action
110. takeLatest
import { takeLatest } from 'redux-saga/effects'
function* watchFetchData() {
yield takeLatest('FETCH_REQUESTED', fetchData)
}
Ensure that only the last fetchData will be running
111. Non-blocking (fork)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constants.JOIN_GAME)
gameSaga = yield fork(game, socket, action.gameId)
yield fork(watchLeaveGame, gameSaga)
}
}
function* game(gameChannel, response) {
yield fork(listenToSocket, gameChannel, 'game:move', processMovements)
yield fork(listenToSocket, gameChannel, 'game:end', processEndGame)
// More things that we want to do inside a game
//...
}
112. Non-blocking (fork)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constants.JOIN_GAME)
gameSaga = yield fork(game, socket, action.gameId)
yield fork(watchLeaveGame, gameSaga)
}
}
function* game(gameChannel, response) {
yield fork(listenToSocket, gameChannel, 'game:move', processMovements)
yield fork(listenToSocket, gameChannel, 'game:end', processEndGame)
// More things that we want to do inside a game
//...
}
Fork will create a new task without blocking in the caller
113. Cancellation (cancel)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constants.JOIN_GAME)
gameSaga = yield fork(game, socket, action.gameId)
yield fork(watchLeaveGame, gameSaga)
}
}
114. Cancellation (cancel)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constants.JOIN_GAME)
gameSaga = yield fork(game, socket, action.gameId)
yield fork(watchLeaveGame, gameSaga)
}
}
function* watchLeaveGame(gameSaga) {
while (true) {
yield take(Constants.GAME_LEAVE)
if (gameSaga) { yield cancel(gameSaga) }
}
}
115. Cancellation (cancel)
function* gameSaga(socket, gameId) {
try {
const result = yield call(joinChannel, socket, 'game:'+gameId)
// Call instead of fork so it blocks and we can cancel it
yield call(gameSequence, result.channel, result.response)
} catch (error) {
console.log(error)
} finally {
if (yield cancelled()) {
socket.channel('game:'+gameId, {}).leave()
}
}
}
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constants.JOIN_GAME)
gameSaga = yield fork(game, socket, action.gameId)
yield fork(watchLeaveGame, gameSaga)
}
}
function* watchLeaveGame(gameSaga) {
while (true) {
yield take(Constants.GAME_LEAVE)
if (gameSaga) { yield cancel(gameSaga) }
}
}
116. Cancellation (cancel)
function* gameSaga(socket, gameId) {
try {
const result = yield call(joinChannel, socket, 'game:'+gameId)
// Call instead of fork so it blocks and we can cancel it
yield call(gameSequence, result.channel, result.response)
} catch (error) {
console.log(error)
} finally {
if (yield cancelled()) {
socket.channel('game:'+gameId, {}).leave()
}
}
}
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constants.JOIN_GAME)
gameSaga = yield fork(game, socket, action.gameId)
yield fork(watchLeaveGame, gameSaga)
}
}
function* watchLeaveGame(gameSaga) {
while (true) {
yield take(Constants.GAME_LEAVE)
if (gameSaga) { yield cancel(gameSaga) }
}
}
117. Non-blocking detached (spawn)
A tasks waits for all its forks to terminate
Errors are bubbled up
Cancelling a tasks cancels all its forks
Fork
Spawn
New tasks are detached
Errors don’t bubble up
We have to cancel them manually
124. Connect + listen from socket
import { eventChannel, END } from 'redux-saga'
function websocketInitChannel() {
return eventChannel( emitter => {
const ws = new WebSocket()
ws.onmessage = e => {
return emitter( { type: 'ACTION_TYPE', payload } )
}
// unsubscribe function
return () => {
ws.close()
emitter(END)
}
})
}
export default function* websocketSagas() {
const channel = yield call(websocketInitChannel)
while (true) {
const action = yield take(channel)
yield put(action)
}
}
https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab
eventChannel turns the ws connection into a channel
125. Obtaining the state (select)
import { select, takeEvery } from 'redux-saga/effects'
function* watchAndLog() {
yield takeEvery('*', function* logger(action) {
const state = yield select()
console.log('action', action)
console.log('state after', state)
})
}
select() gives us the state after the reducers have applied the action
It is better that sagas don’t to rely on the state, but it is still possible