 Thank you. So I'm going to talk on react.js We will cover some basic concepts of react.js how it should be used and we will be building a small application For understanding those concepts. So I'm Prathamesh. My Twitter handle is here. So you can follow me. I Work for big binary. We are a Ruby on Rails consulting shop based out of Miami All of our team members work remotely and after react.js was released We interest we got interested into it and started using it and that's why I'm giving talk on react today. So today's agenda is we will be discussing some of the concepts of react Some of the features that go against the traditional way of web development and we will be building a small app based on open library API For understanding those concepts. So you can check this link bit.ly sip of react.js Here I have mentioned some resources for getting started with react. I have also added a link for a Video series that we have prepared for getting started with react You can check out this video link and then you can find code examples from my talk and link to the presentation So let's start we will be using open library API. So open library is an attempt to attempt to create a page for Every book that has ever been published So it is a open catalog of all the books that are ever being published and it has some API Like I will be using this search API from from them So they allow us to search books based on some query and we will be using a similar kind of We will be building a similar kind of app where user will be able to enter the query and then we will show We will show whatever books which match that query so We will start from scratch and in the end of the session We will have a simple minimal app where user can enter the query and they will get the results So Wi-Fi is slow. So this page is not yet loading. Let's see Yeah, this one just go to bit.ly slash sip dash off slash dash react.js Okay, you can you can go to this link bit.ly slash sip of react.js Thanks Okay, so let's start with react first. We'll discuss what react is react is a simple JavaScript library for building user Interfaces it was developed at Facebook and Instagram and now it is open source for everyone to use Its job is very simple just building the UI So it doesn't care about what rest of the technology that you are already using it also doesn't care about what backend You are using or what other tools in your front end you are using so its scope is very limited We can't compare it with big client-side framework like ember gels or angular gels You can compare it with view layer in traditional MVC architecture So it just takes care of rendering your UI and nothing else It it's aim is to be very simple So it gives developer all the power to be expressive in specifying what their UI should look like and it takes care Of how to manage and handle that UI in the in the background. So in the react We are just specifying what I want not how I want So my UI I will describe it in terms of okay If this is the state then I want my UI to look like this But how that UI is going to change and how the state is going to change from one step to another React will take care of that in the background This is achieved by providing a declarative API So let's say I have a app where I have a video encoding service user uploads the video and I send that Video for encoding to a third-party service and then I'm pulling okay if the encoding has been completed then remove the loader that I was already showing and display the header text that Video has been encoding has been completed. Maybe I will redirect to some other page and otherwise I will keep showing the loader. So here we are talking talking with the DOM We are interacting with the DOM as per the state of our app But in react what we'll do is we'll just specify that if encoding has been completed Then my header will be this and if it is not completed then I will keep showing the loader I will be keep showing the loader as it is. So I'm specifying what I want based on the data I'm not specifying how I want it React also has some unconventional ideas like one way data flow no data binding. It also has immutability So all of these ideas go against the traditional way of doing web development like mixing markup and display logic So we will be discussing all of these features to understand why react relations So let's start our first step is hello world I have already set up the app to work as a npm app I will not be discussing this setup because I want to focus more on react features and how it should be used So let's start our first step is we should be able to see the Hello world message So I'm on the first branch and I will start the app using npm start Let's go to localhost 3000 Okay, I'm able to see the hello world message. So what is happening here is this is my entry point This is my entry point of that. I import the app.js file from Second file and all of my application related code will come into this file app.js So right now I just added a alert hello, why to just make sure that everything is set up properly and working So that is working now. Let's go to our next step So how many of you attended Alex's talk on Kansas on Thursday? Okay, so not many people so he talked about how we should build large application the secret of building large Applications is not actually building large applications But building smaller components smaller reusable composable components and then combining them in the end So that we get the big application that we want and this is the code from author of Kansas Justin Meyer So react also has similar Similar features so react what it has is a concept of components So our UI is broken down into small parts of reusable components And in the end we combine those components to form the complete UI So a component represent a related set of HTML JavaScript and CSS bundle together So for a specific part, let's say I want to show the sidebar So whatever HTML JavaScript CSS required for that particular sidebar will be present in sidebar component So let's start with building our first component now that NPM start will be running and we will be able to Code side code along with it Okay, so my app.js is now changed. What I'm doing here is I'm code is visible, right? Okay, so I'm first requiring react using common.js style Once that is done, then I'm using this create class method So this is one of the top level API method which we need to use for creating the component so create class Method creates a react component and every react component must implement a render method So what render does is it it renders that particular UI on the on our in our browser So this is the minimal method that we need to implement. I'm just Rendering one day with an h1 tag h3 and simple do so if I see My if I refresh the page Yeah, I'm able to see this h1 and h3 and And we are also doing one more thing which is in index.js so here What we are doing is we are first requiring I'm using your ESI a sick style syntax for importing the modules I'm requiring the app model that was that I just showed you and then I'm using this react render method So this is another top level method which is used to Render a particular component on the document. So here the second argument is documented body I'm just mounting that react component onto documented body, but you can also pass a specific element Like I want to render this component on a particular ID particular div with a particular ID. Then that is also possible So let's go to next step Now if you see our component If you see our app.js, it is nothing but a simple function So we pass arguments to this function and it describes our UI it returns our UI So consider it as Consider it same as whatever function that we are writing in our server side back in code Same thing for given a set of parameters. It gives the same UI all the time So it becomes very easy to sort of reason about what my UI will look like for a particular input because it is going to Give same input for that all the time So that's why component is a simple function It is also reusable once I developed the component for displaying a book I'm I'm able to use it on my dashboard. I'm able to do use it on my purchase page on my cart page I'm able to use it everywhere because it's a simple unit It is also composable. So by building small modular components We are able to compose a book list from them. So if I if I Write a component for displaying a book. I'm able to display a book list. I'm able to display a catalog I'm able to display a dashboard using those components And it provides right kind of separation of concerns. So I'm only worried about how my UI will look like and It's sort of similar to building a domain specific library for your particular app So what we are doing is as per our domain we are just building small components and we are able to use all the advantages of Writing classes or writing functions in our back-end code But this time these advantages are present in our front-end one because of the app Let's look closely at our component So here what I'm doing Am I directly writing HTML inside JavaScript? That is bad, right? We should not do it, right? We are we know that we should separate the markup from its display logic all the templating languages that we use for Separating our markup. We're already using it. So my react is forcing us to do this Is it bad? So turns out it is not really HTML. It is JSX and JSX is a syntax XML is syntax for specifying components in our Components in our react components. So what it allows us to do is it allows us to write HTML like tags and It converts them into actual DOM at the time of rendering So this is not actually a div, but it is a function in react React library so it gets converted to react dot create element and it renders that particular div So we are not writing HTML inside JavaScript, but it looks like we are writing HTML inside JavaScript One of the advantage of using this style is our designers can easily understand this code So if if somebody is not somebody doesn't know react, but still they will understand this part of HTML They will see it as HTML. So they will be able to understand this code very easily So it becomes very easy to onboard people who are not into react But still they will be able to contribute to that Another thing is this is completely optional. So if you don't want to use JSX you can skip it But I'm not sure if anybody is not using JSX with react because the syntax for not using JSX is very bad So you have to write a lot of code for it and this is very natural. So we get used to it We get used to it very quickly So if you have still not yeah, so what I have done here is I have used Babel For converting my ES6 code to ES5 and Babel takes care of converting my JSX It has a transpiler for converting my JSX code to normal JavaScript So I don't need to require anything, but if you're using the vanilla react that comes then I think I think they are also switching to Babel now, but Some versions ago you have to require the JSX transformer that comes with react explicitly Yeah, right Correct, so you can do that without any problem because this is a normal because this is getting converted by Babel It is not related to react So if you are using the vanilla JSX transformer that comes with react then you have to include it But here in this case what is happening is it is getting converted using Babel loader. I Will show you after the talk how it is getting read. I just don't want to go into too much details of how the app is set up Yeah, yeah, I will come to that point. Yeah I will come to that point So if you are still not convinced about JSX Think of it as a pill that is test bad given by doctor, but it is actually healthy for you You feel guilty, but it is good and give it five minutes start Write a simple app using react with JSX without JSX. You will you will find out that JSX makes it really easy Okay, let's come back to our app We will start rendering a first book will start with one book at a time and right now We are not worried about data coming from API. So we will just hard-code the book for right now Let's go to our third step Okay So I'm displaying my first book Lord of the Rings and let's see what change in our app component So here I can see that I added a array. Sorry. I added a object for with name and author and then here I Added some code for rendering that particular book. So I'm rendering div with class name So you see that here? We are not specifying classes in our normal HTML style We are specifying class name and n is capital that is sort of react way of Rendering HTML attributes. We have to specify them in camel case Then I'm switching image with a class name height h2 h3 nothing nothing very special here So that's how we are displayed our first book Now I come to the point of templates. So here if you see we are not using any sort of templating language for rendering This we are just using JSX and plain JavaScript. So react philosophy is Not to burden you with any other templating language. So templating language What they do is let's say you want to iterate over a collection and render each item in that collection You have to write a construct for that in your templating language If you want to do conditionals like if the condition satisfies then display this otherwise display this you have to write a construct In your templating language for that, but what we are actually doing in that case is we are trying to mimic the existing Features that are already present in a programming language in a complete programming language. So react takes a reverse turn and says that We should not use any templating language, but we should just use JavaScript So JavaScript has all the features of a complete programming language. Let's use those rather than inventing our own templating language Let's go to next step We want to display a list of books now and I will show you how we are using JavaScript rather than a templating language So here I Have converted my book to a book list and it is a now array of components. It is not very visible So I will decrease the font Is it visible now? Thank you. So here what I've done is I am iterating over that array I'm using map function of JavaScript and then I'm calling a function render book for rendering that particular book and I just moved that code for rendering one book into this function So rather than hard coding those value I'm using here this curly braces So whatever code that is present in those curly braces gets run as JavaScript expression So my book that name gets evaluated in the runtime Whatever object I passed and it gets displayed. So if we see the if we see our page We see that whatever values I was passing passing to that function. I'm seeing those two books here So I just use plain JavaScript. I didn't have to use anything other than that and that comes Now I will answer the question about underscore JS Because it is just plain JavaScript you can use any other JavaScript library that you are already using So just include that in your package.json Require it using common JS and you have access to it. So it is it is plain JavaScript It is not it is nothing special. So you can use any JavaScript library that you want to use Now this is one of the challenge, right? Our apps are becoming more and more interactive We are providing so much functionality in our apps that it is becoming very hard to Managing the data which is changing as per the interactions of the user in early days It was very simple. You just have to refresh the page and everything everything gets loaded again But now we are doing more Ajax. We are replacing only some parts of the page so it becomes very hard to manage data and React is made for building applications with data changing over time. So Facebook is one of the example We know how interactive Facebook it is and Instagram also So piton says data changing over time is root of all evil. He worked on react at Instagram and React sort of tries to solve this problem by giving us props So props are simple properties that are passed to a job to a react component earlier I talked about how a component is a function it gets parameters and it renders UI so those parameters are props so let's see Let's see how we can use props Am I going too fast or is it okay? Just give me feedback so that I will change it Is it okay? Thank you Okay, so let's see how we are going to Yeah, okay, so If you see in my app.js all of the code that was actually rendering the book is now gone And I'm using another component called as book list and I'm passing it sending I'm passing it a prop with name books And I'm using curly braces so that my array gets passed to it rather than string So if I if I want to pass any string then I will have to pass it like this but as I want to pass the array I'm passing it like this and now my book list component what it does is It gets those props and it it calls another component called as book It maps over those props as this dot props dot books So it it can access those props under this dot props and whatever you have passed and then it renders another small component for rendering a particular book and we pass that particular single book object to book component and All of the code related to rendering that book is present now in book component So here I can access the cover and name as this dot props dot book dot cover this dot props dot book dot name So it becomes very sort of Now I can use this book component outside of book list also because this has specified an interface that this component needs Input props in a particular way. It needs it in terms of book object. So this is how we can create props Now if you think of it props are really immutable. We are passing props from a parent component to a child component So child component doesn't own those props. They are owned by parent parent decide what needs to be passed to the child Child only tells okay. I want data in this format But the control of data is present in parent component. So for child the props are immutable The child component doesn't have to care about how my data is coming or what should I do? Do that data it just needs to know that okay I'm getting data in this format and I need to use it for ending the UI and This gives rise to the one way data flow data is always flowing from parent component to child component We are not going in the reverse order props are getting passed from above So this is how you can pass data from parent to child But sometimes you have to pass data from child to parent you have to notify parent that something has happened Some event has happened user has interacted with me in some way. So how that is possible? So turns out that is also possible Using a simple trick So let's see that child to parent data flow So let's say in my app. I Want to I want to do some logging Whenever this image is clicked I want to do some logging that a particular book has been clicked and I want to do Logging in my book list component not in my book component. So how will I achieve that? So here I will go back to my book list again now with passing I was earlier I was only passing book object but now I am passing another another prop which is logger and This is a reference to a function of parent component Okay, so this is a reference to a function. We are not passing the object or any string We are passing a function and in my child component Whenever somebody clicks on the image So I added an on click event handler and this is how we do event handles So in our normal HTML, we we write the event handles as on click on change Similarly, we can write it here. So here what I'm saying is on click call this this dot handle click function And in that function I have access to the function that was passed from parent So I can call that function and pass whatever data that I want to pass and then my parent component will have access to that data In its parameters and then it it will do whatever it wants to do So this is how I can send data from child component to parent component. So let's see that in action Let's see if really it is getting logged or not. I'll just refresh Clear I click on it something got printed Book jQuery in action clicked Book head first jQuery click. So this Logging is happening in my parent component, but from my child component I'm telling my parent that what has been clicked. So this is how you can do the Data flow you can pass data from child to parent. So our child components specify a way of They just say that I want props in this particular way But what if you are interacting with a third-party API and you don't have control over how data is coming to you So in that case our components can also tell our components can also add some Validations for making sure that the props that are coming to them are coming in proper way and that is done using prop types So let's see how prop types can be used Okay, so here I'm saying that Whatever books that I get in my props there should be an array It should be an array object and it is required value. I cannot function without it So whatever whoever it's passing me those books needs to make sure that they're passing an array and they're Passing it all the time if I don't get it. I will not be able to render it So if I change my app.js now to instead of passing an array I just pass the first element of that array now. I will get a warning in my console. So if I refresh now Here I get a warning failed prop type invalid prop books of type object supplied to book list Expected area. So this is also so I will say this is also one of the features of react that it gives you proper warnings It tells you exactly what needs to be done Even if you have typos in your code like instead of capital react use you spell a small small case react It will try to guess that okay You're trying to write capital react and it will show you in the morning. So this is how Prop types can be used for validating your props making sure that your child components are getting data in proper format You can also write props like you want You want functions you want functions to be prop a past as prop you can specify that this particular prop is optional So there is a lot of way of specifying how you want data Next up. We are state. So props Component doesn't have control over props. They come from parent, but in case of state state is internal So every component has its own state and that state can be changed So a component can it's a changes state based on user interactions and then it can do some action if if needed So you can change the UI based on state changes so state is internal and the entry point of Assigning state to every component is get initial state. So let's see how that is done Now if I go to my app.js I just added a function here get initial state Now this is where we are again going back to our application And trying to complete it. So we wanted a search form and we wanted an input box for our for users where they will enter their query So in this step, we have added that input box We have added some default value because right now we are we are not yet reached the step of fetching the data from API and This is how it looks currently so We have added a search box. There is some default value and then there is a search button So we can access this state as this dot state Similar to props props you are accessing as this dot props same to similar to that we can access state as this dot state Okay, so right now. I have just added One event handler for making sure that whatever value that user has been Changing in the text box gets alerted. So here whatever handle change I'm alerting the value. So let's say if I change I will get the updated value Later on what I want to do is pass this value to the search API and fetch results based on that when the search button get button gets clicked So this is about state and get initial state Let's go to our next step because whenever the state has whenever the state is changing. We want to respond to that change Okay so here So on change of input we we are calling this handle change method So whenever user types something we will call handle change and what it what it will do is it will use a set state method So whenever we want to change the state of component We will use this set state method and it expects that you write a JavaScript object inside it and there I'm changing my existing query to even that target dot value. So what is happening here is initially my query is Just a empty string my books array is empty array and then whenever user changes the input Handle change will get called and it will update the state with new query new whatever the user has entered it will update that state so if I And I think I'm also doing console.log to just make sure that that state has been updated No, I'm not so let's add a console.log here This dot state dot query just to make sure that I'm updating state properly Okay Search books now I have removed the default value and You can see jjq jq u jq u e and in the end j query So I added that console.log in my render render method This means that every time that state is getting changed my render method is getting called So react will make sure that whenever you are changing the state it will make sure that your render method gets called Okay, so this is how it it responds to state changes Whenever you change the state using set state method it will call there it will just re-render that particular component by calling the render method So let's see now how we are going to use our submit button Now let's just refresh again Please enter a query because I have not entered any query. I have added a handler for submit button also so on click call this dot handle submit and In that function I Just prevent the whatever event prevent default. I don't want to use that and here I check if this dot state dot query is empty then alert please enter a query. So here instead of So in Traditional way what we could have done was we had a input box And we had a button when button is clicked we check the value of this input box directly Okay, so we need to access this particular input box directly, but here Because we are managing the state of that input box using set state method We can directly access our state because it gets updated every time that something in that input box change So here we can just check that this dot state dot query is empty. Please enter a query Otherwise we will fetch data from open library. So just use Ajax pass that data and Construct an array So here I will just make sure that it is readable Okay, so we pass we use map function iterate over that array and we just parse it because they send data in Particular format we don't want that because our components expect us to send data in another format in terms of author and name So we just make all the required changes that we need to do so if I write jQuery here and Search let's see if internet works and it comes. Yeah So here I got the data from a third party API open library API. I converted it into whatever format I wanted and then Because my state would change because here I'm calling this dot set state and Assigning new books to it render render method gets called again and Earlier I was passing the books array as it is but Now I'm passing this dot state dot books. So whatever the current Books that are that are in my state. They get passed to my book list component. So if I Change the search now, let's say I search for react. Yes Let's see if there is any book. There is nothing because what happened was Search when we click search it called that handle submit handler then it contacted the Open library API fetch data from it updated our state react Got trigger that state has been updated Rerender the component and when that component was re-rendered it displayed the new book list because it was using whatever books were present in our this dot state Okay, so We use set state We use the re-rendering of component after the state was changed and if you think of it It is sort of similar to refreshing the page. So we are where we aren't actually refreshing the page We are refreshing a particular component So we are refreshing only that part without actually refreshing the page and Re-rendering a single component is not enough because if that is the parent component and that is rendering 10 other components Then we are rendering everything that is below under that parent. So we are actually re-rendering the complete component tree and Will it make my app slow? Will it will it be too much like if I'm rendering everything based on just one input change Will it make my app slow? So turns out Incomes virtual DOM so react also has this feature of virtual DOM which makes sure that the re-rendering will not cause any performance issues So what virtual DOM does is is it makes sure that it keeps a copy of your current DOM in memory? It it it converts your it makes sure that it creates a copy of your existing DOM based on the current state Keeps it in memory Then when something had changed using set state it will create another copy of existing DOM based on the new state It will use an algorithm for finding diff difference between those two Representations and it will find minimal set of changes. So how many of you attended yesterday's talk about JavaScript performance? Yeah, so he talked about doing only minimal changes to a DOM DOM operations are expensive So here react will make sure that it will find the correct diff and it will only do the required changes So if your component is not getting changed nothing will get re-rendered it will make sure that you have access to It will make sure that only minimal set of changes get supplied and it will also do batch updates So he also mentioned yesterday that if you do batch updates our DOM operations will be faster So react will take care of doing batch updates for you If you think of it nothing has been new here. We know that DOM operations are expensive We already know that if you do batch updates our app will perform better But what here happening is as a developer? I don't have to worry about it react will take care of it for me in the background This is another feature life cycle hooks I have not added any code for it, but I will just explain it shortly So react component has a life cycle it gets initialized it gets rendered and then it gets unmounted So react also provides us with some hooks where by using those hooks We can tap into life of a component and we can perform some actions at particular events in that in the life of the component So whenever that component gets mounted we can use component will mount so at this stage component is not mounted But that is the next step. So whatever you want to do before mounting a component. You can use this function Component did mount as soon as a component gets mounted if you want to do some cleanup You want to fetch some data from API you can use this hook similarly There are some more will receive props will unmount data and mount you can do clean up Let's say you want to track something then you can use this unmount hooks Let's discuss some patterns of using react so avoid state as much as possible as I Showed you in my app component. I'm fetching the data, but my book list and book doesn't care about how that data is coming So they don't know from where the data is coming. How it is coming. They just know that okay I'm getting today. This makes components reusable now I can use my book list outside of my app also because it is not depending on how the data is coming so avoid states as much as possible and this also Make sure that the state changes are minimal. They are located at a particular place in your app So it becomes very easy to manage that state So if you can render a component using only props and avoid state all together that is better use props This also leads to a concept of dumb and smart components So in our case our book list and book are dumb components. They don't know any logic They are logic sort of logicless because they just only care about rendering the UI and our app component Care about how the data is coming how it should be cleaned up and how it should be passed So this makes components reusable again and composable So use dumb and smart components With every new technology. We have to invest time in it. We have to make sure that And on it it it makes sense. It makes sense for us in long term For react learning curve is very small So you just need to the minimum API is very minimal and you just need to know JavaScript and HTML J6 is there, but J6 again gets converted to JavaScript and it is simple htmlx syntax So you get used to it very easily It also doesn't care about rest of your stack as I mentioned earlier So it is easy to sneak into existing projects try out on some new feature and decide whether it makes sense for you and Don't just use it as Alex said in his keynote Don't just use any tool because somebody's saying about it or Facebook is using it or there is a lot of hype Know about it experiment with it and then decide whether you want to continue using it or not So let me know your experience. You can quit to me How you feel or you can catch me later? That's it. Thank you. Any questions Okay, thank you Yeah, so virtual down batch updates all of them will make sure that your performance is good You're not Like your performance will not degrade But in case of a lot of nesting components a lot of child and parent component And you want to do some communication between this child to that child this child to parent which is not parent of current child Then my the way I showed how to pass data from child to parent will get complicated So in that case you can look out for flux, which is a sort of architecture for using react apps I have not mentioned flux in this this presentation because I wanted to keep scope to only react But you can look for flux which makes this kind of communication between components very easy Correct. So that is a good question actually So what he is saying is a react keeps a memory representation of your current on then whenever state changes It creates another representation dips it and finds the difference But all of this is happening in JavaScript. So we are not touching the DOM yet so this is this is more performant than doing DOM updates and also the algorithm for Finding this particular diff is Return in a good manner by Facebook people so that they make sure that it doesn't take a lot of time And also there are some use cases where this fails So recently there was a tweet from one Google employee where he he created a infinite scroll app on mobile Where react took a lot of time for re-rendering. So there are certain use cases which which where this doesn't make sense also So again, it it goes down to the same thing that you have to use it And then you will figure out like where it is failing so that you can tell react team that improve on this Yeah, yeah, we can we can discuss it in the break Right. No, it is not so consider react components only as rendering layer So I can easily pull out this Ajax code and put it into some utils folder Okay, which will be simple JavaScript plain JavaScript nothing else But for demo purpose, I just kept everything in the same component because I wanted to show you how it how it was I will show you later some code which which separates them properly You can also take a look at flux which user stores actions and Dispatchers where this all of this is separated Something correct react. So that is the main point of the yesterday also. I was discussing with few people Some of them were migrating from angular to react and they were thinking that okay I have to do everything in this react doesn't do all of these things which are done in angular But that's the point right react is not everything. It's it's only concerned about rendering So yeah Yeah, so that's the point right react makes it sort of implicit that or explicit that you will mix The HTML inside Josh what I was mentioning from with respect to separation of concerns was yours sort of I Get the same advantage. So I come from a back in background So whatever advantage that I get from writing classes single responsibility print following some principles like single responsibility Writing modular functions. I get same advantages by building react components But a component as I mentioned earlier also component will have HTML JavaScript and CSS Related to a particular part of here and in long-term that actually makes sense because you have only single place for looking looking for bugs Let's say you have some bug. You know which component I need to look into right Right in this case anyone can work on this Yeah Yeah, because if you're if you're a designer you can still understand JSX because it is similar to it You can consider it as same as HTML. So you can for HTML person He can still understand it for JavaScript back in person He can still understand it because he knows all the logic that is going on So but you can even if you are not doing JavaScript You can still understand the code because it looks like HTML plain HTML. Yeah, and I was trying to so I came from a Back in I'm rails programmer basically So I am talking in that perspective that it becomes very easy to understand what is happening And if I if I want to add a new element to my UI, I know that okay I need to do I need to add a new component or I want to pull out something from existing component So that it is reusable. There is no hack, but again, it's boils down to JavaScript. So correct, right? So I have not used backbone angular ember at all. I can only talk about react and because We are a real shop when react came out We experimented with react and we found out that it is a very easy to replace some parts of our app using react We don't want we don't have to invest a lot of time in making like making so many changes in our app So that we could integrate react. So that is my experience. I am I don't know about Ember or angle. This is just a view layer. So you can I'm not sure about it But maybe you can try react with angular or ember. I'm not sure about it Thanks. Okay, we're done. Thank you