 So, this is the first talk today and the last day of conference, so I'm kind of sleepy, you're kind of sleepy, so we need to do something to wake up. We're going to visit the future, we're going to time travel to 2020, which is like, what, four years from now. So I'm just going to type here, start, you ready, you ready, can I press, can't go to the future without sunglasses. So in the future you're going to have a function main which takes sources and returns syncs where syncs is the outgoing events and syncs is an object that has here a property saying DOM where it's going to return a virtual DOM stream. Let's make that virtual DOM stream right over there like that, which is for now just a stream that has just a div, so if I save that, you know, it's just nothing yet, but I could put there, let's say, oops, I could put a paragraph inside it like this and maybe put like first name over here and then you can see their first name, let me just drag this, put it there and you know, this is starting to be the future and this my friends is programming. So here we can put like an input element as well if we want so we can put first name class here with attributes, type, text and let's just put a comma there because JavaScript like common, we're going to also have the last name and here we're also going to have the last class name and we're going to put also a header there saying hello plus something let's put there for now empty string and now you see the error. But let's externalize the state, let's put state over here, let's call it name stream which is now just a stream that has one empty string and I could get that and I could put name stream, I can map that to virtual DOM elements like this where I can put the name there near the hello like that so it still looks the same thing but I could put also for full stack fest and then it appears there. So for now this is nice but nothing happens here, I can just do that and you know, what else can we do? We can make here a constant full name stream which will be a stream that has an array of first name and last name and then once we have that we can get the full name and we can map each of these arrays of first name and last name. Let me also put this over here like that and let me map these two strings that say the first name and last name and then basically the same thing but I could put here my name let's say Andre over here and it shows there. So what else? It still doesn't handle the events, how can we make that react to something? Let's take a look at how this app is currently working, we open the dev tools over here and we can see the stream graph and currently you know it just emits an array which is mapped to the virtual DOM so let's do something more interesting let's make first name stream and that's going to be sources.dom we're going to get events from the DOM in the the first element like that and then we're going to get dot events this is a stream of all the events of type input and we're going to map each event to event dot target dot value and almost the same thing for the last name and kind of like oh and I also need to do combination of the first name stream with the last name stream stream and I also need to remember this one here so now if I do that okay well nothing shows um let's see well I do have my stream graph graph here with first name and last name and they're combined and remembered and stuff but I don't have any initial event as you can see there's nothing green is zapping so I think I just need to put here um the start with because I need to initialize the first name that I forgot to do that let's just put that over there like oops like this let's see if that works um well that worked so I have an initial string and I have an initial last name they're combined and it shows so what happens if I write here oh cool wait um that's not correct because oh no that's wrong um because I want first name the first name is the left side and the last name is the right side so why is this is not working um okay so something is wrong with the last name let's check what is wrong with this part ah okay well this is last okay that that was wrong so let's see now how it goes uh okay that's right the left side is working okay the first name how about the last name okay that's working so let me write andrem the data's okay so that works so how about we put instead here a filter so that we only allow last names there are at least three characters long so it would be length um is at least three characters long so if I do that uh and you see uh this works okay but m uh should not do anything as you can see m does not pass e does not pass because it's still less than three but once I have d and what um so that's definitely larger than three characters so what's wrong with filter it should be passing that filter what's wrong with filter ah I had a typo okay so I could just change that like this and maybe now this works okay so andre and me you know that's less than three and d it passes okay cool this is working like I wanted it to so um back to 2016 um we're in september and this is what you kind of like that you're back in the past I mean anyway thank you for clapping I'm my name is André Medeiros also known on the internet as André Staltz and what you just saw there was demo of a framework called cycle.js which I've been building out for two years about two years and this is not an mvc framework it's a so-called reactive functional javascript framework so the reason why I built that is because um when I started building it two years ago there were three things that I wanted to solve and nothing out there gave me that so first thing I wanted an architecture for any kind of UI okay not just DOM elements but also like music brain waves stuff sensors and all that kind of stuff and I second I want clean code with really good separation of concerns and third of all I want to know how does my code work always okay I want to know how it works in the microscopic level but also in the big picture um so you know I could just talk about these three things for hours but I gave a talk on the first one and the talk on the second one so now I think it's a good time to focus on the last point so sometimes you're programming okay and just hit a bug so once you hit a bug what do you do you open the debugger and you start going through line by line okay and you know suddenly your program is like jumping around like like crazy and you're like what are all these functions what is the stack trace so it's very hard to keep track of all of that stuff so but the debugger is super important because you know it tells you really accurately what your code is doing because sometimes you just want to stay in the editor and everything is nice and you just give your function to the framework and you forget okay I don't want to even see how that works but you know if you need to solve a bug or something or improve performance you actually need to understand this crazy machinery and this is reality I mean this is always like you know open any program it's gotta be crazy jumping in around so what can we do you know a debugger really helps you understand code line by line but it doesn't give you the big picture it doesn't tell you like how things work in a glance for instance if I show you this piece of jigsaw puzzle does anyone know what the whole puzzle will be once I build it no right so okay I could that's micro level information I could show you another piece okay now we have two pieces um anyone know what this is about no still micro level if you build the whole jigsaw puzzle this is what you're gonna see um okay now you can see kind of where that piece fit in that you know so yeah but before you couldn't see it and this is the macro level picture that's what I'm talking about what a debugger gives you is this type of stuff so it's a bunch of micro level information that's moving around and you're like how do I get this you know I want to see the big pictures you can't so every time you're staring at the computer trying to understand how this crazy machinery works you are building the so-called mental model of your program and you know this takes a lot of energy and stresses this out and stuff makes a flip the table and stuff so are there any tools out there today that help us understand the crazy machinery um let's take a quick look at what's available so if I want an overview of some source code you know sublime editor has the famous mini map on the right side um well how can I say it's quite useless I mean it doesn't it doesn't tell you you know how your code works it just tells you like dur you have a lot of lines there's also this thing called algorithm visualizer which I think is pretty cool um here it shows you the partial solution to the problem and how it's being solved while the algorithms is jumping around so it's really cool to show those things so uh you over there do you want to understand hey you yeah do you understand this algorithm now understand it yeah so probably not right I mean it's really nice but it's just like a debugger it's still just jumping around you need to still need to make the big picture out of those so throughout history we had stuff like um um UML diagrams for visualizing programs and some of them are really useful like the sequence diagram to explaining protocols and communication with the server we still use those today but yet others like the class hierarchy diagram they don't really tell you how does your code work they just tell how your classes are structured and in the past we even had tools that were convert from this to java code and from java code to this uh but let's not talk about those things yeah so in modern front then we're starting to have some really cool tools this is called react monocle and it allows you to visualize the structure of your react components in real time so if you change some props and some parent then you can see that actually propagating throughout the children and it's pretty cool I mean this really gives you information right because you have in your react app this crazy machinery of components the component hierarchy hierarchy and you need to understand that and this really does that job so I I really like this and this this is the type of stuff that we need but as you know react is not everything we need flux or redux and so for instance this here is the redux dev tools and there you have the chart of your state tree so you can get a glance a big picture of the state tree of your program and that's pretty nice it's good that people are building this and the nice thing about an architecture like redux is that you know it gives you a predefined mental model for everything how all these apps work so it's always going to be this diagram you have state in the store it goes to components and it goes down in the component hierarchy the user does the click it becomes an action goes to the reducer makes new state none and none you know you've heard the story before a couple of times so we don't even need to visualize the big picture of redux data flow because it's always the same diagram except it's not always the same so like if you have some asynchronous operations things start getting quite complicated you use action creators with promises inside them then it's a different diagram or if you use redux saga right that's another way of handling async effects or redux loop right that's another way and also nowadays they have redux observable um so some people even mix both sagas and action creators with promises inside them and then it becomes a bit more crazy right it's not that simple anymore so it's not anymore a predefined mental model for everything there's a lot of variation going on inside this idea of redux and you know the devil is in the details so once something is not how you think it is you really feel like I need to visualize this thing you know so here's what I decided to do I didn't want to build the framework or an architecture that always that was like predefined and always works in the same way I wanted to allow flexibility and people choose what they want to do so what I wanted to allow is that given any program okay I just want to be able to get the big picture of the data flowing through this application okay through through all the ifs and else is not like a debugger not like a debug because I just already told the problems with that so something that would like summarize this whole thing for me and I also want to see it in slow motion because it's it's easier to understand so how do you visualize this stuff in the big picture and here's what I found you know you can't and I don't I don't know how to we need to replace this control flow this programming model that we have of if and else and try and catch and stack trace it just it just can't be visualized so we need to remove normal control flow and we need to put something in its place you know we need a programming model which can be visualized and that is a reactive stream so I'm talking rxjs observables most gs that type of stuff so now people think that streams are quite hard okay they're like oh this is very scary stuff but I don't think they're hard you know they're just different like if you know Spanish then learning Portuguese is not that big of a stretch you know it's rather similar but English is very different to Spanish okay so you could say oh English is hard but actually English is one of the easiest languages you know it's not that hard in absolute terms so today we're going to understand streams okay and especially how streams are used in cycle j s this is going to be fun you ready already okay ready okay thank you ready so here we have a stage it's just like this stage but it's green yeah and yeah this is the stage and we have also besides the stage we have the outside world and in the outside world things happen right such as you know everything that happens is an event so red car passed by that's an event or blue car passed by that's an event things happen and besides these cars passing by we also have mr driver who knows how to drive cars um but he also knows how to do anything else you know he's like a mr janitor but he he he wants me to call him mr dr um so what happens on the stage then well we have uh julia is on the stage say hello to julia this is julia's face and what julia does is that she likes to observe the outside world so what she does is whenever a blue car passes by julia reacts by raising a sign and her sign says plus one okay that's what she does um i mean if a red car passes by she doesn't care a black car doesn't care blue cars for some reason passes by she raises a sign that's her whole life i mean she doesn't eat she doesn't sleep she doesn't go to the bathroom she just stands there and then we also have rafael rafael is also on stage say hello to rafael this is his face and rafael does almost the same thing but he's interested in uh red cars so whenever red car passes by rafael raises a sign but his signs is minus one uh as you see julia doesn't care he's like that's not blue um so yeah so they just do this the whole day julia likes blue one and rafael likes red minus one and then we also have monica on stage say hello to monica this is monica's face and monica you know she doesn't like cars she doesn't like to observe the outside world you know monica likes to observe julia and rafael right in front of her so whenever they raise a sign she's going to raise a sign as well she reacts okay as you can see i'm hinting the word reacts to you um oh and by the way monica has very good memory so don't tell anything bad to her she's gonna remember it so rafael raises minus one and then monica raises a sign and her signs is three because she's adding up all of the numbers that she saw from them so probably julia raised the sign five times and rafael raised the sign two times so five minus two three so she remembers stuff she's good memory okay so then we also have on the stage dominic say well um he's not so happy today anyway dominic also he doesn't he's not interested in cars he's not interested in the outside world he's interested in monica so he likes to observe monica and whatever monica does something he's going to do something as well so there we go julia raises a sign monica raises a sign and then dominic raises a sign and his sign just wraps whatever monica said so if monica says 10 he's going to say div 10 div and so forth and by the way it's really important that they're facing this direction okay um because this means that they are observing stuff okay and not this not this not this because here they're not observing stuff like julia is interested in blue cars how is she going to know that a blue car passed by and she can't just hear a blue car you know so what would have to happen is the car would have to hit julia you know and then she okay now i know and then how is monica going to know that julia raised the sign she's not going to know so julia has to go and poke her and say yo you know do something so this is bad because this doesn't give a separation of concerns julia cares about cars and signs and then suddenly she has to take care of monica and tell monica you'll do something so this okay this is good and they just keep on doing this the whole day on the stage let me drink a little bit there so remember mr driver he can make things happen in the outside world so mr driver is observing dominic okay and what he does is that he doesn't care about cars or the other people he just cares about dominic and whenever dominic does raise a sign he builds that thing in the outside world okay so he gets div five div he's like okay and he builds div five div in the real world um so you see the driver is building real stuff in the world okay those people on the stage they're not building anything nothing gets built they're just raising signs okay information only so it keeps on going on rafael reads minus one monica reads four the dominic raises div four div and the driver builds stuff and then minus one three div three div and builds real stuff and it's an interplay between the outside world and the people on the stage so you know the stage is observing the outside world because julia and rafael are observing cars and the outside world mr driver is observing dominic which is on the stage so the stage is observing the outside and the outside is observing the stage and that's a cycle oh my god that's where cycle jazz comes from thank you yeah there we go so um how does it look like in code because you're not gonna play lego so we have import there we import extreme which is a stream library like rxjs we import cycle and we import dom driver we make a function called stage and then we connect the stage with the driver to observe each other and by the way we have the dom driver because this driver takes care of the dom world elements and stuff but we could have a driver that takes care of the http world that does those type of stuff we can have a driver that takes care of brain sensors right that type of stuff so you get the picture the stage takes as an argument events from the outside world right and then julia is defined as those outside world events she filters for only the blue car and she's interested in events of type click let's just rename click to pass by so then we get you know blue car passed by events and then she maps those events to plus one so you know like in arrays if i give you an array of events okay an array of events you can map that array because you know how to map arrays to plus one each okay that's the same kind of thing but it's not an array it's a stream okay so then raffael takes all the events from the outside world and is interested in red car passed by maps that to minus one then monica's events are defined as the signs that julian raffael uh lifted but instead of mapping she's using fold which is kind of like mapping but with memory so whenever she sees a number from julia she's going to add that number to her memory and inform that and her memory is initialized to zero this looks like array.reduce um and then we have dominic which is monica's events mapped to this div that wraps the whole thing i also included some buttons there and stuff and then the stage will return dominic's events to the outside world which is the DOM so uh we can make a blue car to pass by by clicking that and then you can see on the DOM monica's memory okay so how does this thing work okay let's get a big picture view of that we can open the dev tools to see uh the gray squares with DOM though that's the outside world and the blue is the stage uh let's see this in slow motion so once i click that button that's an event in the outside world of DOM julia maps that to plus one monica maps that with memory dominic maps that to uh the virtual DOM and then that's sent out to the actual DOM driver which builds the stuff okay this is this is really really the same thing that we did with those people on the stage i'm just gonna do one more trick here um i'm just gonna rename stuff okay instead of function stage events i'm gonna call that function main sources just rename nothing else and then julia i'm gonna rename her to increment stream and she selects increment elements and events of type click and oh does that mean that julia is a stream yeah you know now you kind of get it right okay so uh rafael is decrement stream and he selects decrement elements and click events and monica is renamed to count stream just renaming and then dominic is renamed to virtual DOM stream which is count stream mapped to something else and then we return the virtual DOM stream to the DOM world and we plug those together and you know voila that's how you build a counter app with cycle gs i mean it's exactly how we saw before uh what else could you build with this um here's some other apps like this is a simple app where you click that button and it downloads some user data from some server how does that one work if you open the dev tools you're gonna see once i click that's an event in the DOM world on the stage we map that to a request object and we allow the htp world to observe that request the htp world talks to the server and then it uh makes a response car passed by and we observe that car passing by and we map that data to virtual DOM and that's how it appears there on the screen um then what else we have also body mass index calculator where there's you can change the weight or the height with slider and it recalculates that so how does that one work as you can see while i'm moving this i can see which part of my app is zapping reacting to those parts so this stage is a bit bigger than what we saw before okay so this is cool i like it okay but you might be thinking now okay so what about you know a real world app you know these small examples are not enough um what are you gonna see if you open like a real application you're gonna see thousands of nodes and everything zapping between those does that give you a good big picture probably not right so it's not a good thing because this stage that we were handling was kind of small you know but what if you would have an even larger stage like this stage which is blue um and you know we have this blue fellow over there and let's imagine there would be a bunch of others there but you know what what if we just put the green stage on top of the blue stage so then Julia and Raphael are observing the blue guy there and we can have another guy at the end which is observing Dominic and then the driver can observe those who observe those observe those do you get it like we get components for free because once we build this green stage you can reuse it you can put it in any other bigger stage and you get like you know in total a bigger stage right and as you can see now we have six people on that stage which look like a pyramid so if we just keep on doing this we're going to have a lot of people and then it's going to be a real application you know how how how can we handle this well what if i told you that we could just collapse the green stage into one person that has four heads i mean and then you could expand it again and you could collapse it again and expand it again collapse it again so now hey we have three people on stage so that's better right it's small so we can understand small stuff because our human brain is so limited and now you can get a visualization of the big picture okay so that's how we would handle visualizing real large applications and you would you would never see thousands of nodes unless you actually want to expand all the stuff you would be able to understand each part in isolation because each of these stages is a function right so you can put function calls a function and stuff and hello that's the idea of cycle js i mean of course there's more to learn i can't possibly explain everything here but you can check it out at that address and this is a framework that allows you to write code which is visualizable like see this diagram i didn't draw it the dev tools didn't draw it this is something that someone read the reactive the introduction to reactive program you've been missing and they just decided i'm gonna draw that okay i didn't teach them that they just did it themselves they just noticed that i can visualize this and they drew this and this other one i was mentoring a programmer at work and he was learning cycle js but i didn't teach him this and he just went ahead and he drew the data flow diagram for his application you know which is a real world application you can see there the stage and the drivers and stuff so you know i don't think you can achieve this with normal imperative programs you can't do that so that's what i want to help the world achieve i want to help you be able to get a big picture glance of how your program is working thank you for listening i hope this was enjoyable and maybe you learned also something from it thank you very much how long did it take you to make cycle js well it's a free time project that i've been doing like on my free time for a year and then after a year i was able to get like some time from work and even more time from work so i don't know you know two years on your free time basically and it's MIT licensed yeah cool i love it when people spend hours of their own time and then give it away that's really generous thank you the cars that were driving past the stage seem to have no drivers are they from the future as well the thing is i ran out of people or maybe just got lazy but anyway excellence and another imagination come on one of them had a driver without a head so maybe i'll another question from about the future in the future you were coding in java script excuse me do you think that will be the case or will we all be using transpired languages we're always going to be transpiring i'm quoting uh jafar who's saying of course this was not the future people you know this is just me pretending the future but my message there was this type of tools that you can get the dev tools regarding the language you know we could use all kinds of languages and we're definitely going to have a lot of stuff transpiring to java script like we have languages built to transpire on java script like pier script and elm and a bunch of others coffee script i can't say that sorry but you get the idea excellent thank you very much ladies and gentlemen give it up to andres stoltz