clojureD 2015: "Taking purity to the limit in GUI programming w/ React and Reacl" by Michael Sperber

so thanks for the introduction as you can hear my voice is shot today so please if you can’t hear me please yell or wave can you hear me at the back is it ok ok thanks so well most of most of my add slide was already in the introduction so please check out our blog comes up whenever you google for phone Sanada program young so this talk is gonna be a little bit technical I’m afraid so I think most of us have probably written GUI programs at one point or another and at least after you’ve written one for the next one you always make this big resolution or at least I made I always make that big resolution that my next next GUI program is going to be so much better than the last and somehow psycho demon Schneider also talked about this this morning somehow when you use traditional toolkits for doing gooeys and traditional paradigms for doing GUI you know your program often ends up like this and the reason for that is that the model-view-controller paradigm is often described with a picture like this where well you have these three things and don’t worry about what they mean but you can easily see that well you can create cycles in this picture right and especially if your GUI is very reactive and has things running down running on underneath you can have unpleasant cyclical changes where somebody clicks on a button that button runs a handler that handler effects a change in the model that change in the model effects a change in the GUI the change in the GUI again runs a handler and you run it two cycles and then you have to set flags that say well don’t update just now and wait until I finished things like that and so it’s fine for very simple gooeys but for highly reactive gooeys where things are going on concurrently it’s really poor now I spend a lot of time in the scheme and racket communities and I spend a lot of time teaching computing to beginners and something that I’ve come to appreciate here is something called the is something a library for the racket system called the world or depending on when you took the course although university packet and the way this works is well what it does is it lets you write videogames essentially in a purely functional manner and the way it works is you have well the analog of a model in the model-view-controller paradigm is called a world which is a data object that represents the current state of your video game and what happens is then there’s a function that takes the world as an input and renders a scene so it will it will create the output not via a series of imperative drawing called drawing commands but instead it will create a declarative description of the graphics that is supposed to appear on the screen and then the world toolkit itself takes care of actually rendering that and so whenever a player interacts with the game for example by clicking on a button or by just waiting so of course time passing is an event that’s often important in a video game another function will go and it will transform a world into the next world object and again there is a pure transformation it takes a world as input outputs a new world it doesn’t it doesn’t make any mutations to the original world object and so you have this neat picture where the user interactions just create a series of worlds and this is a completely straightforward one-way process with no cycles in there and every time in the world gets created a scene is rendered so it’s a really simple picture and you’d be very surprised by the by the video games that our students usually write they only you can easily write pretty complicated ad style you know Frogger space invaders stuff like this we’ve done in the past it’s easily fast enough to do that and so well what does the API look for it look like for that you might may have been able to imagine it from the picture but essentially a video game is described by a bunch of methods for example well the method at the beginning that one just starts the game but then you have methods for example on teak and on tickets a method that’s responsible for describing what happens when time passes one unit of time passes like a second or a tenth of a second or something like that and essentially what you do is you pass it a function that goes from world to world so again it’s that pure function that I talked about in the previous slide and when you want to react to an actual interaction with a user you have a function like on key event where you pass a function that takes a world a key event and then

produces another world depending on the key that was pressed and and then there’s this method on redraw which takes a function that goes from a world to a scene and in practice it looks something like this don’t don’t worry about all the details but you write a function like this in scheme hopefully it feels slightly familiar to you closure programmers where you write a function it takes a W parameter for the input world and as output it produces another world object here that’s just a constructor for that particular games world datatype and so on the same thing as for example here’s the method that handles a key and you can see that it takes as input world W and a representation of the key called a key and it has a big con that looks at what key it is if it’s the up arrow or the down arrow and again depending on what key was pressed and depending on what the world was like previously it will just construct another world object and again these are pure functions they don’t they’re not your typical rendering procedures where you see in a draw circle I’ll draw a line or something like that and then finally you define a function called is responsible for rendering it takes a world object as input and then it uses various commentators to stack geometrical figures on top of each other that then yield your picture that you want to see so it’s a really really really nice model and suitable for beginning programmers to write pretty complicated games after well when we teach intro computer science after about half a year well not half a year half a semester like why don’t half months so we really would like so for forever I’ve been wanting to bring this programming model or something like this programming model to GUI programming and and we’re finally getting pretty close but you know since I run a company we really need to think about the commercial setting here and to do this in a practical context interoperates with other software and in particular we noticed that for a couple well maybe for one or two years now there’s been a very pleasant convergence of GUI technologies namely that almost every platform that you can name can render html5 and can run JavaScript inside right so of course you can run it in the browser but of course your mobile phone will also have a JavaScript engine and will be able to display html5 but also Java FX has a widget that will run html5 when those apps have that cute hazard I think there’s a widget for gtk even I don’t know how how production-ready that is but it means that even if you’re writing some of you I think believe me I said that nobody writes standalone apps anymore but even if you do if you can somehow produce html5 and JavaScript to do your GUI work for you then you can even run that on a desktop app you don’t need to run it in a browser and so so that gives you first of all that that gives you that that little vision we had of using a common technology for doing our graphical user interfaces and also the potential of having things be at least partially portable between web apps and standalone apps and so and then we discovered another thing which is really nice which I’m sure you’ve all heard of which is the react framework published by Facebook and Instagram I think which gives you something that’s kind of frustratingly close to the world and universe teach-back that racket gives you and the nice thing about racket well it’s a JavaScript framework but you can program it fairly straightforwardly enclosure script and since we also have some closure projects on our company it seems like it would be really nice to use a language that’s at least pretty similar between sort of the core code and the GUI code so here’s a little snippet of react that you will taken from the official react tutorial I think translated into closure script so the way react works is well you create a class for what’s called a component and a component is going to render just a subtree of your dom eventually and each component must have a render method and that render method will describe how to make if how to make some Dom some piece of the dom anyway from application state and so you can see well what you want to look at is the code that starts here so there’s a function called div corresponds to HTML div elements h2 span so these are all very familiar and so but you can see that these functions are indeed pure or at least they look as though very pure and in this part is pure and that these construct a tree of HTML elements that corresponds to the actual Dom and so this render method is well if you look at it and squint at it just right is

nothing but a function from the world from the application state of your of your program to a scene right to a piece of of the Dom that you want to be rendered in your browser and so it’s it’s something that already looks as though it might be able to realize the original promise an idea of the racket teach max so and so now I want to talk a little bit about the details of that one thing that’s important that’s now in the rest of this talk is that each component as it gets instantiated as it so a component gets created from a class as it gets instantiated it receives as arguments if you will an object called the props when these props you can obtain you can extract from this uh here well nevermind where it comes from but um and the props you can use to pass information from one component to the one underneath it so in this case this particular component class is responsible for displaying a comment in some simple I don’t know blog comment application and so what it does is it receives a props object and in that props object you will have an author and a textfield which reminds me that I should probably just show you that obligation oops so of course this worked right now here it is right so here’s a bunch of comments and down here there’s two texts feels you know says the threat says great something like this I can push the submit button and then it will appear here and I can enter a new comment so it’s very simple but it’s hopefully suitable for showing the essential context the essential concepts so again so for each comment there’s an author and there’s a text and all these are part of the props object which is communicated from the parent component so here’s another component class which is the list of comments that you saw so it’s rights so and you can see here that it instantiate the component that we saw in the previous slides and it passes to it JavaScript Mac wear which contains the author and the text fields that that comment is supposed to have and again you can see that this this component also receives arguments with the initial with the initial list of comments in the props object so so again this is JavaScript code that’s translated straightforwardly into closure script so here we have an interactive component which is the box at the which is the thing at the bottom where you can enter a new comment a new author a new texture so you need to input fields here and here and you can see that these input fields receive names so even though this looks like it’s regular HTML it really is a feature of react so these two these two Dom elements get names and the form that those two input elements are part of it gets a call back and that callback well must be somewhere else it’s done on this slide and indeed you can define a callback when you create so here’s is that and so here’s here’s the callback that handles the events which you can also which you also pass when you create the class for the component and you can see oh oh it calls some new comment thing that it also takes from the props with the author and the text of that new comment so anyway a couple details so first of all remember how I said that there’s those two elements have have names those two Dom elements and this these these names then show up in an object called the refs which which which the component receives and that particular object we can then use to retrieve the actual Dom node and from that actual Dom node we can retrieve the text that the user entered down here via the value field okay so this is a little more involved is that reasonably clear how it works right so you need to refer to the actual Dom elements but you only have the virtual all Dom elements from reactant and this is the way to do it so so just remind you these were the two refs that were sitting there and they correspond to the to the accesses to the rest here okay so then component so this was all fair fairly straightforward right as we saw that we had one

component that just displayed a comment and we had another component that would just be interactive and call a callback upon receiving a new comment and in this case so this is now the component that encompasses both of those so it has both a comment list at the top the list of comments and it has the Box for entering new comments at the bottom and you can now see how these two things hang together is that the new comment the this component when it instantiates new comment it will pass remember how it called a method called new comment when there’s a new comment and it passes well something passes something downward and which is again defined as part of this particular of this particular component class so here’s that event handler it will get called from the from the component below and well what it does is it obviously calls something called set state so we will mutate the state of the component to include the new comment that’s there okay so well first of all notice if there is an imperative mutation operation here also notice that there’s well if you know JavaScript you should well something in your spine should tingle because there’s some funny business going on with this and so react takes great pains to managing this this implicit parameter and then need to pick that up in closure script to turn it into a lexical variable so anyway so with all this code but what it really looks like is you have a tree of components that gets turned into a Dom tree each component instantiates the components below it and passes it properties or props and each component can also manage some internal state up there mutated off an event handler but what’s really nice is that rendering is not part of this right react completely takes part of the rendering by having the component tree yield a Dom tree and so the way it works is you might have you know here’s your component tree and then you know something happens somebody pushes a button and that leads to set state being called on several components and of course that means that these components are gonna have to be rear-ended if those components have to be rendered their sub components have to be rendered and but remember this is all acting on the virtual Dom so this is just an object sitting somewhere and it has nothing to do yet with the actual Dom that’s being displayed in the browser and so as a final step react compares the virtual Dom it’s generated with the Dom that’s actually sitting in the browser and then mutates the browser Dom to so that it corresponds with a virtual Dom of your application and that means that you don’t have these funny cycles and you don’t have these consistency problems of the typical MVC application where you have to wonder well if there’s a particular change to my model what is the corresponding change in the GUI react completely recomputes conceptually recomputes your entire GUI everything that’s displayed every single time there’s a change no matter where that change is and that makes me really really pleasant to deal with so yeah we felt we were I was I felt I was getting closer to my original idea of having something like the racket teach packs work for guize on the other hand a whole bunch of details really bothered me about this so first of all there’s still explicit mutation of state right and in particular react imposes some structure on that state it conflates application state with sort of transient gwee state that’s something the video games don’t have but if somebody types some text in your text field you you really don’t want this in your application state until also that you press this return then you have to sprinkle all those hash j/s around your closure script code to generate JavaScript Maps which are not the same as closure script Maps then there’s this funky handling off begin of this there’s this funky handling of refs where you need to stick a name inside an object in order to refer to it outside the object and I wondered why you have one propped object that used to promise arguments when usually you call functions and passed them named arguments and so I wanted to fix those on the other hand you can get additional benefits by using closure script together with react for example you can override a method called should component update and should component update well is responsible for telling react whether something has changed and we know well usually react doesn’t react doesn’t know and so it will always assume that something may have changed it will rerender the Dom it will compare with the Dom in the browser and synchronize the changes but if you were able to tell it that nothing has

changed without re rendering that’d be really nice and of course we’re the color script world where objects are usually immutable and so if you make the assumption that things are immutable we can just compare them and save react from having to re-render and so we can make it even faster than react usually is it is pretty fast in particular well I’m sure most of you know that there’s a really nice framework by David Nolan called ohm which takes advantage of precisely this and it allows you to write react components in this style where well you can see that looks pretty similar to the react formulation instead of those keywords that you used to identify the render method or the state manipulation uses protocols but you as a special wrapper library for the Dom elements but I mean this part looks pretty similar mostly to the to the originally original straightforwardly translated code except that you can see that it does something with cory singh channels up there right so it does something so i will have to figure out what that is and that has to do with callbacks so in this case this is some application for contacts and there’s a delete button somewhere and instead of just calling directly a callback when somebody pushes the delete button and then affecting the corresponding change in the model what David did the tutorial example is he he sends a message to an own channel and upon creating the the react component he creates a a cor a single loop that will listen on that channel and will try to etho and will make the corresponding change and so in this particular case you can see you all there’s that go loop receives a message called contact from the channel and then it calls something ohm transact which will remove that contact from the list right and well so here’s here’s that transact thing and it well it’s got a bang there so it’s probably doing something imperative right and and to corresponding contact view which is sing around it will then just put a delete message on the channel and when somebody pushes that button that clear at all to complicate it somebody shake your head if you don’t if it was like incomprehensible okay well go on if you don’t interrupt me I’m just gonna go on so anyway so it looks a little nicer than the the original react example it still has hash J s sprinkled throughout the coat and it’s got this thing that well it’s it’s doing something something imperative it’s not quite clear what it is from looking at the API example and I played around with it all and like the tutorial example it says if you write it naively it says oh well you know if you write this naively there’s immediately gonna be a bug that you only see if you open the debugger window in the in the browser and the reason is well you’re gonna make a change can you see what the change was okay you see it all it’s there right and the reason is even though kind of the the program looks as though it gets passed a contact that it’s trying to display it doesn’t get past the contact it gets passed what’s called a cursor it gets called a reference to that contact in the larger app state and you can only dereference that contact at certain times and in this particular case you want to do the program tries to dereference it in the go loop asynchronously and that happens to be a time when it’s not available so you need to dereference it beforehand so you see state creeping in your development process suddenly an eye on the first 1 or 2 hours of programming with all my immediately ran across this problem and so there’s this concept of a cursor you can read up on it I found it pretty complicated especially if the rules that say well when you have a cursor when is the cursor the same as the object that it refers to I found pretty confusing so also what it does it creates a structural correspondence between your app state and and your component hierarchy right so I mean oh one thing ohm does is it gives you a certain style of writing or programs where your entire application state is sending an entire up in one object and oh man the way almost setup it wants your component hierarchy to correspond to the tree

structure of your app state in the main cases that happens to work out just fine but there’s some cases where it doesn’t work out where your GUI is structured differently and then it gets more difficult to do this with ohm so so I wasn’t very happy with it after playing around with it because internal state of the ohm system leaks out because you can’t always dereference cursors when you want to this transact operation you can call it anywhere and it will even though it will just replace your app state object by another app state object it’s still an imperative operation that I wanted to keep under tighter control and so that creates a pretty good I mean even though technically there’s no mutable data structure it’s a pretty good mock-up of one right if you saw you know if you saw this code you know this transact thing it sure looks like I’m setting the contacts field of the app state to this value right which is not what’s happening but it’s almost indistinguishable from that so anyway so cursors the cursor API bothered me on the other hand you really need to think about how you’re going to map parts of your app state to a single component and that is something that we we had to experiment quite a bit with when we designed our own framework so here’s what we came up with trying to solve these gripes trying to resolve these gripes that we had with react and ohm is something called react all that you can also download I think even Google for that I that I think is better so you have a component hierarchy as a component instantiates another component you just pass it arguments that are look just like arguments to a regular closure function and you also each component manages application state in addition to managing application State on the right hand side each application can all eat component can also man managed transient state which is only something that people can see but that you don’t want to be part of the of your application state yeah and so that question is then how to get that under control and we got under control by saying that every modification to the applications here the local state has to go through passing a message so you need to reify each change into an object I’ll give you examples in a moment and that means you can’t have uncontrolled manipulation of State and also also you can’t manipulate state directly instead you will have react I’ll do it for you and when there’s a change to the to the application state you sometimes want to communicate that upwards because it’s part of a larger change in a surrounding application State and that’s when sending a message yields to what we call a reaction up above in the tree so let me let me show you how it works so here’s here’s a simple to do application anyway so there’s already a to-do item here right spend money something like this so it’s really simple you can check off items that you’ve already done you can delete items that you were no longer interested in this was really simple so in this case so we have clearly we have a a sing an individual to-do item that has fields text and dump ticks that describes it done that says whether it’s checked off and it also has an ID because you don’t want you don’t want to do items that have the same words and them to be considered the same otherwise you delete one and maybe you’d see the other one here and then there’s the application state which just has a list of the to-do items and the ID of the next to do that somebody might add and so here’s an individual item off of that to-do list and you can see that we have a custom deaf class form at the top we have a parameter parent which I’ll talk about in a moment and the application state is just the to do is just a to do object from that record definition that we saw on the previous slide now one thing that we would like to do is I’m getting ahead of myself a little bit but you can see that there is an event handler here which wants to refer to the check box that you can check right remember and the original react you needed to put a ref name into the object and then refer to that and here we can use a form that looks just like lanta called lead Dom which you can use to name individual Dom elements and then you can refer to them in your event handlers so that was that’s like the first nice thing about react oh so there’s that you can use let

Dom to bind checkbox and you can refer to check box to get the Dom node down here okay now you can see younext that you would see next that when somebody checks the check box or clicks on the check box that leads to sending a message to this object and so that really separates the modification of the stage to describing the change or the action that happens in the GUI so and and and then actually handling the event is a separate thing that you do in a message handler that you also define that you also put in the DEF class form and here’s the message handler for for the individual to-do item and so and you can see rev long you can see that it receives a message called checked check P that is just whether that particular check box was is checked or not and you can see that it says well I want the new app state Dubey to be created from the original to-do item and by replacing the done field by the value of the check box okay and so this is really the heart of react Hall is that that message handler it’s very it’s very much corresponds to those functions that you solve for the racket teach packs it really it’s a pure function right and all the actual state manipulation happens by reactor itself and it means there’s nowhere in the there’s nowhere in the program there’s no point in time where you can’t access the data that you’re interested in for example so this really is the heart of it is that you can have pure functions define your event handlers and you can also use this this mechanism of sending message it’s not just a sent message to the particular component that you’re it but you can also use it to send messages for example to your parent component so he remember there was a checkbox and it was also a zap button a delete button and so what we do is we just send a delete message to the parent object okay so far so good everybody not there’s enough notes thank you a couple of thumbs ups so somebody’s still awake so again and notice that we also refer to the thing that we bound by let Dom up there so we can use regular lexical binding that we’ve hopefully all come to love and enclosure to refer to our Dom elements and so that’s a single to-do item and here’s the the Houston that’s all that’s around it the to-do app and that will have both application state and local state and the local state is responsible for handling the text that I’ve typed right you only want it to be part of the application state when I push the new to-do item button and in this case you can see that we call to-do item to instantiate a to-do item component and it gets passed to do which is to do items parent which is to do items application state this is to do items parent this and also we pass it a reaction that says well if your application state changes I really would like to know about and I wanted to be turn into a message and that message gets constructed by calling the changed constructor of that record definition up there so again we just used the same mechanism is just to pass a message and then have the message handler be a pure function so here’s that reaction so and here’s the actual event handling well so for example the submit button gets again gets a regular event handler and that event handler hand sends a submit message and here’s another event handler on changing the text of the text field which says well there’s new text in the text field and this is what it is and so and you would see the record corresponding record definition is up there so there’s that and again we have we have the message handler here which now must distinguish well what is happening to what is happening in my application remember it could be either a new text record a submit record or delete Mac record so we just look at it and we say oh okay so somebody’s taught new text into the text field for the next to-do item and the text of the current to-do item is just sitting in local states so we’re gonna use react I’ll return to instruct our system that

there’s a new local state available and now it’s just it’s just very straightforward code right when there’s a submit button when somebody pushes the submit button well we we want to clear we want the on the next iteration of the system we want the text to be to be empty that’s up there and then we just wanted to find what the new application status which is well we’re gonna take the old list of – dues we’re gonna create a new to-do item with the next ID number with the text of the local state which is the text and it’s not done yet so it’s it’s a couple of lines of code but it’s does something very straightforward and of course the next to-do item after that should have a higher number than this one so and then it gets really boring but just so you see what that is the same thing or somebody requested that an item be deleted in which case we just so by pushing the delete button that’s right next to the item in which case we just change we just say well there’s a new – duze field in the application state and it consists of all the elements with the one that we were looking for removed okay and remember that was a change change message that could also be sent if somebody if somebody pushed the clicked on the checkbox and it’s again it’s the same thing we just go over all the items look for the one that has the ID that is being changed and replace it so it’s not not anything particularly complicated so but I hope you can all see this principle involved here is that handling events is split into two parts right one of them is creating a representation of what is happening in your GUI and the other one is and and doing something with that and the other one is actually saying well what is my application state going to be like after that GUI action and that is a pure function and so we feel that react whole is doing a little better then if you just use plain vanilla react and we also like it better than ohm because it’s really it’s like it gives you a lexical scoping and particular gives you lexical scoping for dome elements and it does everything underneath to stick refs in and refer to them you don’t have any destructive manipulation of application state in your user code at all there’s no transact operator or anything like that all message handlers are pure functions we felt it was really a good guideline for developers to have them separate the app state which is fundamental to your application and transient GUI state which is just something that the user sees but which only becomes maybe becomes part of the app state later on we’ve been using it in production for quite a while now but we’re still making changes to it um because we’re discovering sometimes we’re discovering that we could make it better so right now I think the documentation is a little bit out of sync with reality but hopefully we’ll have have that fixed in or two weeks but I’d be happy if somebody tried it out and gave us feedback so there’s that there may be a question or two I couldn’t follow everything actually I don’t know react in detail and I don’t know um but I understood your first slides about this video games and this fully-functional like world transformations and like the last concepts and what are the pros and cons but wouldn’t it be also wouldn’t be there a better solution more looking like your first video game proposal this looked like now a lot of code and then creating this Dom elements and script and so on so wouldn’t be like the ideal solution be something what you showed first we have like a render and then yeah sorry so that that was a smallest example I could come up with that really demonstrates everything so maybe that was a little bit too much well I mean so let me first say that it is like world and show you the place that it is mostly like world and maybe highlight the places where it isn’t right so the main place where it isn’t is this right isn’t that we attach event handlers to Dom elements and those event handlers do something imperative namely they send a message right this is the only place where it’s not like the world to each

pack and arguably we could make it be like that make those pure functions and then having the message machinery be in the background on the other hand it really wouldn’t mean intercepting all the calls to the Dom construction which we weren’t ready to do yet right but if you remember that picture is is so that picture said well you need to translate the original picture of the racket system I mean the most part was the most important part sure we’ll get there so that picture right really says well your event handler should be a function from your application state to your application state right so the event handler that learns what’s what’s the event had or knows what the user has done and and then it just Maps an application state of world to the next world right and I’m sure PowerPoint professionals can do better at this but you have to do with me to make do with me so so this is just that same function right it learns what the user has done the user has requested that the the checked status of that particular to-do item be changed you can and all it does is returns a new application state its I I could have made it worse for you I’m just saying I mean this is part of this right it’s it’s just sitting sitting in those parentheses and so in particular it refers to the old application state here and that old application state is just sitting it’s just coming from I’m not tall enough but you can see it there at the top it was an argument do that thing so I’m I would say it’s very close the only place you won’t really the only places that we still let you attach vanilla JavaScript handlers to Dom elements right that’s the only thing and arguably since I think most of our programs just say send message and nothing else maybe we should we should just take the plunge we just have been ready to do that yet just you sure question what do you think about ji6 if there will be any transform tool to transform from j6 to react which I I found it very useful so the other questions is what you think about flux their application architecture which Facebook is promoting now make some questions so JSX I should say I didn’t show you this but JSX is sort of a preprocessor for JavaScript programs that’s also part of react that allows you to write HTML templates in your code and I think that’s fine but we have we don’t we don’t need we don’t have anybody who really is able to have any to do anything better with that I think that hTML notation is mainly useful for designers who know HTML but who don’t want to do JavaScript and we just we just don’t have any in our organization it might be that and in some future collaboration with a designer somebody tells us well if I could only write HTML syntax now then we would do that and I don’t I don’t think it would be a big deal I don’t know how to make closure script do this with reader macros or something but actually racket has something very similar that lets you write XML subtext or the other question was the Flex application architecture I think I mean the thing is you know it’s it’s sort of a pattern right and what I mean we’re functional programmers most patterns are supposed to be code right if you look at this it really caught of codifies something that’s like off and I couldn’t tell you the difference between this and the flux application architecture I think it also encourages you make that separation to really give that you know really define those transformations in a very very similar way it’s just that here we have the means to codify that into an API enter an interface right and so so I think it’s fine I think there’s still some bits missing that we do that flux isn’t quite clear on but but I think ultimately what we’re doing is we’re just realizing flux as an API instead of as a bunch of video which is what Facebook is doing uh hi I just had a question about the message

Handler and the way I understand it any message handler in any component is still allowed to manipulate both global app state and local app state and I was just thinking when you’re using this in production do you tend to put most of the global app state manipulators in one place or how do you organize that and you kind of stay saying where the changes to global app state comes from yeah very good question so we the answer is and I probably didn’t explain this very well is each component has its own app state and local state so each component so when you see this write this upstate thing it real really refers only to we call it out state you might conceivably have an app state that’s shared among components but it’s really associate with that component and your top level component is typically going to have the state of here Terra application this reaction mechanism that I showed you right coordinates between the app state of the subcomponents and the parent components we had with this is a very good question because until a couple of weeks ago and I mean I’d already submitted this talk is we really had a global app state and we had a system of lenses to manipulate that global app state modularly among the components but we then switched to this and it really allows you to explicitly say well it allows you to isolate the sub components from the super components because all the sub component can do when something’s change it can send a message upwards and there has to be a corresponding message handler that knows what to do with it if it’s not there then you know you have a clear that makes it for clearly defined interface does that answer your question okay thanks okay so thank you very much once again