 How about closure? Okay, that's heartening to know. Okay, so basically this talk is about OM. OM is a kind of a library or a framework, so to speak, for building user interfaces and how about now? Slightly better. Okay, so OM is a closure script library that is used for writing user interfaces and applications in the browser. So just a little bit about me, I work for this company called Tarka Labs. We are a consulting company. We are also looking for a product. I mostly work with or I like to work with closure Ruby and JavaScript mostly, but also have to work with Java sometimes that being mainstream and all. So just a little bit of word about closure script. Closure script is closure getting compiled down to JavaScript. So it uses a piece of technology called the Google closure compiler. It has nothing to do with the J thing. It's the closure compiler and closure compiler is pretty much used in every single agglification or minification thing that you have used before. So it's a very high-performance thing. It does a lot of optimization on your JavaScript code and then, you know, renders out code that can never be understood by humans actually. So basically, so once you write closure code that basically, you know, it goes through the Google closure compiler and becomes JavaScript and then it's used in the browser. So this is a thing called React.js. So how many of you have done web application development with frameworks and all that? Okay, good. That's good. So React.js is a view library. It is not a framework. It was built by guys in Facebook and Instagram and it has a very different take on how you build web application. And we'll get to that a little bit. And OM is basically a wrapper on top of this React library. There are multiple wrappers. Actually, there is reagent, there is quiescent and I'm sure there are more going to come up because it's a pretty good library and, you know, I'm sure things can be more simplified and made better. So first off, I mean, if you're from Angular or Emberland, React is not a MEc framework. It is just a view library. And once it's claimed to claim that, it's fast. And the reason it's fast is that, I mean, it actually treats your view as a function of the state of the data and it does some interesting things like DOM dissing and virtual DOM and all that. We'll get to that very shortly. So just a little bit of word about, you know, the problem with the web, I mean, the problem that most of these frameworks try to solve. Most of these frameworks try to solve a problem where one you have the model and then you have your views. And then it's basically you have to decide when do you update the view when the model changes, actually. And Angular says, okay, you can have watches, actually, and then you have multiple types of watches. You have a generic watcher and you have the, you know, collection watcher and so on and so forth. You have various levels. And in Ember, it says that, okay, you can have key value observables. And then the way you change your model is always through a get or a check statement. And you can then have computed properties and then you could declare that this depends on this particular property or one of the, you know, some special syntax like, if it's a collection, then you say, you watch every item in the property and then whenever something changes, then trigger this function. So on and so forth, right? So, but React takes a different view. Now, in React, there is this, everything is a component. So this is like a DOM 3. So you have, I mean, so if you have a component A which then composes component B, which composes 3D and E, then React's solution to this is that whenever you want to change something, just do a set state on some component. And then we'll render that component and all the children of the component below, right? Imagine the good old days where you just had ASP pages or PHP pages. And then you change something and the model hit refresh and the whole thing gets changed. I mean, it's not very far from that and it would be just that bad or like, I mean, for example, with Backbone and EJS where you just do a, you know, just render and take the whole template out. But it would be that bad except that React has something called a virtual DOM. So as it turns out, JavaScript is fast, actually. So the slowest part of JavaScript is actually affecting the changes onto the DOM, right? So what React does is that it keeps a version of DOM in memory. And then it makes changes and then after you set state or whenever it needs to repaint, it'll basically construct the tree from that point on where you set set state. And then it's going to have these two trees. Then it's going to do the diff of those two trees and then only play this. So here in this example, we start off with, you know, div which just has one element and then you have two elements. So, I mean, you could see how it plays out. So the first thing it says that, okay, for the first element, replace the text content to second. And then it says, okay, insert a node called first after that. Ideally speaking, it should have just done insert of this thing. But I'll come to that. There is this concept of E in React views that you can use. But I mean, this is this fairly illustrious point on how react does the DOM. But then if you have a large set of components, then your thing is like, okay, it's going to do all this work. It's fast, but it doesn't have to do all this work. Right? So react provides a shortcut and it says, okay, you could also do should component update. There's a function that you can write where you as a programmer who implements this component can look at your data structure that you have and then decide whether the component should go for an update or not. It doesn't need an update, then it doesn't even bother generating the virtual tree. Right? Now this gives an idea. So the problem with JavaScript is that they are mutable, right? All the collections, I mean, like the objects, the arrays, anything that you use in JavaScript is mutable. Right? So if you have to really know if one array equals to the other array, you cannot know unless you go through all the items in the collection and then say this is equal to that actually. But if you have, you know, persistent data structures or immutable data structures, then you could clearly say as long as the reference equality is the same, then the objects are the same, which is awesome because closure has immutable data structures. It's one of the biggest deals about closure apart from being a list. Right? So, yeah, they are also based on the closure, I'm sorry, closure scripts in limitation of try. Not yet. They are not using it because I don't know if that's going to make it mainstream. The reason is because people are comfortable using just objects and arrays and all those kind of things. So if you have to use immutable, yes, that's a whole different learning curve that you have to go through today. No, I mean, if you're using pure JavaScript, then it cannot be because you need, I mean, you can't just turn a normal data structure to an immutable data structure because the way in which you change or manipulate those data structures would be different actually. But in closure, since they are built out of the box, it feels very natural to deal with them the same way. So this is a really great idea because in OM, it actually implements should component update and it just does a reference equality check. And if the reference equality check is the same, then it simply says, okay, don't you don't have to update. Now this has one other side effect, right? Now earlier, we remember that you used to do set state and after you do that state, then it has to do that. Now that anywhere this thing is there, the browsers have this feature called request animation frame. Does anybody know what a request animation frame is? The request animation frame is basically a callback that gets generated. I mean, approximately every 16 milliseconds to keep up for the 60 FPS kind of a display, smooth display. So what OM does is that it basically triggers a re-render of the entire view every request animation frame, right, for the whole thing. And it's super fast because the persistent data structures things don't change that frequently in apps. So essentially you, most times, it's a no-op. There's no DOM update. So here, I mean, ClosureScript actually makes React faster. So with OM and all these things, OM out of the box is, you know, twice as fast as React with native JavaScript, even though it's built on a language which compiles down to JavaScript and it has its own overhead, right? So, I mean, you might be wondering, okay, so where is the code? So I'm going to do some live coding and I'm not, I mean, I hate CSS. So it's going to be pure HTML thing. It's going to look ugly, but it's going to prove the sum of the points. So let's get there. Let me start my terminal. Let me change my, let me see if I can mirror my disk space. Let me also change my files. Okay, this is good. Can you all see it? So those of you who know Closure, I mean, this line engine is one of the most popular things. So I'm using a template called OM Start. I mean, the one that is available on Closure, so right now it's not up to date with the latest OM versions and all that. I have a four-coffee time. They have, he has merged my pull request, but he hasn't pushed it to Closure, but hopefully by the end of today it should be available on Closure with the latest OM version and all that. So I'm going to do the thing that every single, some of the field that I could raise around the funding after building this. So I'm going to create a to-do application. Now, I'm going to launch my editor. And before that, let me also go to the Rappel. So it's trying to, it's trying to compile all my Closure script files the first time to do this. So this kind of template has a server that is there and it also has a browser Rappel kind of connected to it and it also injects the browser Rappel into the statically generated file. It does a little bit of magic there, but it's pretty nice. So let me show you. So I start the server. I open up the browser Rappel and get to the Closure script Rappel from the Closure Rappel. And now I can visit localhost 3000. It gives me hello words. And the nice part about it is now I can say words and it's going to be back. So it's kind of like wired up now. Everything is working. So let me should quickly walk through the code. I mean, apart from the standard project CLJ and all that, the only thing worth anything is the core CLJS. So I have one in the HTML file. Is this readable or should I increase the font size? So here, I just have one div ID app. I'm getting React and I'm getting the ClosureJS and that's about it. So and the ClosureJS is basically this file which gets compiled down to JavaScript and gets executed. And here, we have something called as an app state. So app state is basically an atom. Atom is a since Closure has immutable data structure. It needs some sort of a reference type to point to immutable data. Say for example, if you want to change something, but you want this pointer to make sure that it's always pointing to some version of the immutable data structure, then that's what Atom does. So Closure has multiple types. But as far as ClosureScript is concerned, Atom is the only thing that's there and that's the only thing that we need to bother with. And once you have that, Oum defines something called as a root. So this is similar to React.mount actually. So how you mount those components. And then here, or you say React.render component, it's very similar to that. And here, what it expects is a function which returns an instance of an object which has a render method actually. So reify basically takes a interface or in Closure it's called a protocol. Here, iRender actually has only one method in it, which is the render method which we are setting up. The first argument to a render method is always this object which we don't care about. So we just put an underscore there. And all it does is we actually return a h1 and we actually say text of app. So here, whatever this app and owner is there, so whatever we give an app state here is the one that goes as app here actually. Now here app state is defined as an Atom, but by the time it comes here, when you use Oum root or when you use build or something like that, Oum actually converts it into something called the cursor. Now cursor is very similar to a reference type. It's just that Oum uses it to manage the hierarchy of its properties and all that just to track when things change, what needs to update and so on and so forth. So okay, so now let's try changing this and see what happens. So I am going to say in ns2dos.core. I am going to change there and I am going to say swap app state. So now the browser has this, the moment I execute this, so it's going to change essentially. So the moment something in this app changes, I mean since it's rendering on request animation plane, it's going to find that the value has changed and it's simply going to re-render it. So there is no set state done or nothing like that. It just keeps watching it and it changes. So we haven't done any two-way data binding, none of those itchiness actually, so it is pretty nice and very clear. So now let's start building our to-do app, right? And the, I mean, React basically says when you start building a React app or a React component, you should first build the user interface and then start extracting out functionality from that. So that's what we are going to do. So I am going to take this function out and we are going to call it app component. It's still going to have this I render method of course, but this is going to change. I am going to say we will put it in a div and in the div we will have an input element which basically has, which is of type text and then you give a placeholder, create a new item. Just to ensure it's a little bit free. So we do this and then we close this guy out and say don't smash UL and then no properties. So when you do this first thing, you give us properties and then you give the children of them. So here it has no attributes. So when you have children, don't slash li, again no attributes and children is so when they learn React, assuming you have something in there. So let's see if you haven't broken anything. So what I am also going to do is I am going to start off automatic compilation on the background for this. So this is basically going to watch the changes on files and automatically keep installing them. So the first time it starts out it's slow. I mean I have done some mistake. So I don't think it matches. So it should give us a green thing here. Done. So let's see what happens. And so you get this output. So let me close other times. So we get this. The placeholder is not coming actually though. So the reason why it is not coming is that here we gave it as a map here which is a closure script map. But what React expects that there should be JavaScript objects actually. So the way in which you do JavaScript objects in closure script is that you have this thing called, you have a reader macro called hashjs. Once you put this hashjs in front of it it's going to turn that map into a JavaScript object and pass it to that. It's compiling. Now if you refresh and you have the placeholder as well available. So now what we have to do is, so the first thing we'll do is figure out how to add items to this list. So I just want to hit something and hit enter and then it should get added to the list. So before that we'll turn this into a model in the back end. So here we'll say we'll add, so we'll give a title for each one of them and we'll go learn. So we have these things and now we need to make sure that these basically render from here. So what we could do is we can do a map of DOM slash LI, no attributes again and in this case now we have a column title of that percentage and we'll give the column to do of app. So app is what gets passed in. We'll get to do the app and then we'll close this guy. So I'm going to get all the ending parenthesis in one row. We have a lot of parenthesis. So now that we have this let's see what happens. It says wrong number of args passed through. What did I do wrong? I'm sure I balanced something. So this thing needs to close here. So this should close the map. Sounds good. Let's wait for it to compile. Done. Now it says 0, 3, 2, 3, 7, 4, 6, 9, 8. So very helpful actually. The reason that it happens is that I mean if you notice here it accepts a pass and then it just accepts this you know flat out like this. It doesn't expect it in a sequence here. So here map gives out a sequence actually. So in order to solve this all you have to do is do an apply here. I mean apply is very similar to the JavaScript apply where it kind of flattens out. I mean if you have arguments in a list at the end this flattens it out into arguments in the center. So we'll save this compile for the finished compilation. So I have the advanced mode turned on because I wanted source maps and all that. So this works. So we haven't broken anything yet. Moving on. So now we want a way in which for the input base holder yeah. So even though this is all the code that we have right now we are choosing om.core and om.dom and then that depends on the react and then you have like Google so just to give you an idea of the size of the file. This basically gets the Google thing and then you have this whole bunch of things which are in here. It's a pretty long file. It gets the basic Google thing and all that. It gets the Google string, Google DOM all the things that are required for us to work with. So there is a way for it I mean you can turn on advanced plugin flags to make this event shorter but that means your compilation will become slower. I have put simple as the optimization mode. Once you have optimization mode advanced it will reduce it further. But I am not happy with the compilation speed myself. It has to be faster. 7 seconds every time is crazy. Anyway. So what we will do is when we hit enter that's when we want to add it. So we will use the on key down event. Now even though these look like your normal DOM events these are react synthetic events actually. So react gives kind of like you know events which are cross browser compatible. So even on change would be on key up on something. It will be on blur on some other thing and so on and so forth. React kind of homogenizes the event handlers side effect of having a layer of functionality for us. So like the polyfill for all your DOM events. So you have on key down and on key down you call a function which is a handle new item and you will pass it the event which is the first argument and we will also pass the app and the owner which so and you will write the function handle new item and that has event and the app and the owner. So we only need to bother about it when the when the value of the event or rather the which of the event is actually the enter key which happens to be 13. So good programmers then you have to say enter and make it deaf one rather. So only when it is enter we need to bother about it and what we need to do here is we need to we need to find out what is that input element that we are dealing with. So to do that what I am going to do is I am going to do one more thing. I am going to create I mean React allows you to put a reference to some DOM nodes. So whatever component that you give here so these are all synthetic components. DOM slash input is still a React defined component actually which then wraps a normal HTML component right. So here you can pass a ref2 I mean you can indicate any of these or rather tag any of these components with the reference and then you can get the actual DOM node from them later the rub DOM node. So here I will say new input sorry new item input and then I will say input is om slash get node of owner which is the component that has it and the one that defines the ref so new item input. So this will give me the DOM node which which is behind the scenes. So now I can say item text is or item title is actually value of input right. It is just a DOM node so I can get a dot value on that once I have that all I have to do is I have to add it to the produce collection on top so to do that you cannot directly do a swap anymore because that is the global variable and this is like an event handler within your component so you cannot leak reference to the global variable. So the app thing that you see on top here is actually a om cursor actually. So om allows this thing called the transact. So which is very similar to the swap function which closure script gives so what this does is lets you reach to the app and then it also lets you reach to one of those nodes you can give like a vector of keys that you want to get to. So here since it is just one level for us I am just going to do a to do and for this to do then you have to pass a function to say how do you want to modify it actually. So here we just want to simply conge that with a new new item which is going to be title of item title we will balance out the parenthesis and you are good. So now that this is done lets see what happens lets see if everything compiles for us so far so good and so we should be able to enter at something wrong validity one in one second I just want to know where it happens the app owner conge this sorry here it does not I just need to conge the object directly I do not know why I put the bracket so the only thing is that the input is not getting cleared actually so we will have to do that for it to compile that is done we should be able to refresh so we have been we can add to this now now the next thing what we want to do is we want to mark toggle something whether it is complete or not that is the next thing so to do that what I am going to do is instead of having the DOM like created here I want to turn this into its own component because so we will turn this into a react component own component actually so let us do that so here we can say defn item component so this will have an item and an owner it will reify and then om slash irender om slash irender has one method called render it is taking this as an argument for which we do not care and now this is going to have DOM slash li so what I am going to do is I am just going to put DOM slash span within this and do that because I also want to support inline editing later so that I can put either this or the added box if it is editing so DOM slash span and then I can say no attributes to this and then title of item so how do we then use this item component now pretty simple so we have this guy so this guy should go instead we should use the item component and instead of map we will use something called as build-all of course this is within om so om slash build-all so what this does is basically it takes each one of these functions it then creates object of that I mean render I mean the object which has the render method and then it then actually you know that is the item that is here because since we are doing the to-dos of app each one I mean it is going to take it from that sequence from the collection and for every item it is going to come here and it is going to display so let's see if this works so this works so far so good so this continues to work that's nice let's actually implement this thing so whenever I double click on span I want to mark this as completed but even before that I just wanted to show you one thing so react comes with this awesome plugin here so awesome plugin here which actually lets you expand this dip so this is our input, this is the ul and within this ul you have these unknown components within this you have these props for each one of these unknown components here you see this key component so remember we talked about the diff algorithm so if you add something in the beginning then what it's going to do is it's going to replace the text of each one of those and then add one more node at the end which is not ideal thing you just need to add one thing in the top or one thing in the beginning so to do that react has this thing called the key which uses to track the uniqueness of a node among its siblings the ID which is which has to be unique throughout the page that's the problem with the HTML ID but key simply has to be unique within the siblings of it so it's actually pretty neat so what we are going to do is we are going to generate that ID for us so the way we can do it is so remember I told you that use google closure library is available to us so we can do that so we are going to be google.ui has a thing called ID generator I am going to use that and I am going to have a GUID method which is going to get next ID of get instance of so this is going to give us a unique idea so for those of you who don't like this style you can also do this it makes you feel any better this is called the trading macro so I am going to set the ID here and similarly when I create this item object I am going to also set an ID here just so that we can keep track of it now and yeah so we have said I mean this is something that we call it could be my ID or something like that so it's just your domain model whatever you call it that actually but when you are doing it here so the third so in the ohm build or ohm build on it then takes a options hash which actually says which is the value that I need to look up into this map that is given for the ID value for the key value so he says now we say okay for the react key or even for the ohm key use the ID property of the map that I am giving you as the key now let's see if this works it says 7 seconds and somehow feels more than 7 seconds so let me go to react oh yeah so now you see the key set up here which is colon 0 and then colon 1 colon 2 and so on and so forth so it will keep generating unique ID okay so far so good so we have created the unique ID and everything is set up now I want to support the double click here right so I mean I want to support the completion for which I will use double click so the same way it has to be a js object on double click and this needs to be a function so I will just use the event and the item and what I will do here is I can do an ohm flash transact item and then I can complete it and this should be I mean whatever state it is it should just toggle that so it should be not of so far so good right because it's going to I think I haven't tried this let me I think it should be possible that way so so let me also do one more thing from the resources public css I need to create this directly I am going to say .computed text decoration just a very simple style like I said I have mad css so here so far I mean it's just some thing so we just got a completed style that's all so now let's see if this works or not so what I am going to do I am going to set the class for it here so I am going to say let me class name is going to be completed of items then completed there is nothing and here we will set the class name and we will set it to the class name so most of the html properties should be the same except that few of them like this since for and class are JavaScript reserved keywords so I mean I think they are the only two html attributes that are aligned to class name and html for but otherwise all other html properties should just work like that so that's fresh so I am going to double click on this and so that's the style and so double click again and it's awesome and that's my I am sorry that's something else alright so I mean we are almost out of time so if we start an online edit then we won't have time for questions so what I am going to do is I am going to skip that if you are interested you can always come I'll be hanging around you can always hack on it if you get more so this is what I had to show if you have any questions no right so because that gets generated once it's there in as a part of your domain model right so only when you create it I am just creating that you would do it and output I am putting it there and that's about it so when you choose a key you have to make sure that it is unique among all this otherwise it will be a problem usually if you are basically reading this object from the backend you will have some identity of the object which the backend is going to give you from a web service or something like that from a restful endpoint you can simply use that id so what closure script have what closure has is that so you have these protocols so this comes from java land right so many times you would have to implement an object of a particular interface and then you will say new this and then implement it directly right so what reify does something similar to that so it says this is an object which conforms to this protocol and this irender protocol has this one render method and that's about it so reify basically gives you an object which satisfies this contract so there is a model in between if you actually notice we are binding on this model and we are getting those values and so on and so forth I just wanted to show you I'm just digressing a little bit but I think it will be a good I'm going to quickly go to jspin and show you how react looks for real so I'm just going to add library react so this is like the pragma thing for react actually so I'm going to give id is equal to so yeah I'm not helping am I I mean I'm putting code looks even smaller yeah I'll hide the HTML right so I'm not making this any better for you I'm just putting HTML I mean directly on to JavaScripting but it is not that bad because it is the same as doing this actually so if you don't have this react jspin this won't work so what this really is is react dot dot h1 of no values and it's just the same thing so the way you deal with it in the react and the way you deal with it in GNOME it's not very different but yeah you have Angular and you have all this I mean Ember whatever doing HTML bars sorry handlebars and you know Angular templating and all that sticking code, slicking HTML and this kind of DOM into your component seems a little kind of a you know regressive step but give it 5 minutes right I mean when I say give it 5 minutes it means that try building a small app in react the components that you write will be the view layer actually so react also advocates something called as a flux a flux pattern where you have tour and then you have events and then it goes in with ohm you can do similar kind of thing with co-racing unfortunately 45 minutes is not enough to cover the architectural patterns here behind ohm no react is not based on request animation react is a view library so react basically deals with DOM this thing it deals with you know DOM differences and it has the optional JSX component and that's about it actually so everything else is something that you build on top so with closure script you have immutable data structures and since we have immutable data structures then we can go ahead and leverage request animation frame without any performance analysis which simplifies our life as programmers dealing with complex user interface request animation here as far as ohm is concerned ohm makes a choice of doing this on request animation frame quiescence or reagent does not do that actually with quiescence or reagent you then do set state like how you do deal with react and it's kind of simpler there actually but with ohm I mean it almost feels magical that you just change the model and automatically something changes without paying performance penalties on that right essentially like redrawing the entire thing but because the way in which closure has immutable data structures and react has DOM differing and these two work together very well you have almost a magical feel to your thing where you just write UIs completely declarative on your app state the moment you change your app state everything just works actually which is if you think of complex user interfaces that's kind of the holy grail so you have several request animation frame policies that are available actually so that would still work so you can do a set time out and then you can just do it so I mean wherever it is available then ES5 dirty check is available it will use it dirty check it doesn't have to do I mean like for example since it has a immutable data structure we are not dealing with javascript objects and javascript arrays these are closure vectors and closure maps they are immutable by default actually so you don't need dirty check just the reference equality is enough to find out whether they are same or different so you don't need two way binding so if you notice in our code it is almost as if you are doing two way binding so if you have input so here in input we didn't we didn't do that so here so we did on key change so let me do this let me see this so actually when you come to the edit mode maybe I will show you how that works so you don't have to do two way data binding because here it's pretty much the whole point of react or flux is to have a unidirectional data flow so you have your model and any change in your model view is just a representation of the model any change you make in the view actually has to go through the cycle to get to the view it needs to raise an event it needs to change the model it needs to come back and then the view will get updated and when I say this change I am talking about the view model change so whatever is the view model that is backing the view that needs to change and then the view would change which is exactly exactly absolutely we need to put events but then you pay the cost in terms of what I mean so has anybody dealt with bind once here you can ask him about the pain of why bind once existed in the first place yeah yeah sorry it's not to beat up an angular angular is a good framework but I mean it comes with the cost actually all that binding two way binding comes with the cost if you have no further questions then we can call it a wrap I'll be around so you can all this is free to catch thanks guys