 But it doesn't prove that he won the next one. Let's see how it goes. This is really a game very cool. It's something like, because I do see controls. When we make an ad, we go to the music. We go to the music. We go to the music. We go to the music. But it doesn't prove that he won the next one. We won the next one. We won the next one. We won the next one. Let's see how it goes. It's something like, I do see controls. When we make an ad, we go to the music. We go to the music. We go to the music. He will choose. He will choose. But it doesn't prove that he won the next one. We won the next one. He will choose. But it doesn't prove that he won the next one. We will see how it will go. Here's the adBlue. So he will choose. He will choose, but it doesn't prove that he won the next one. We will see how it will go. But we believe it's worth taking it, but it's not true behind it, because when we go in JPEG, our state is inside and off. If you remember me, we just cleaned, we just cleaned the cylinder compartment, we changed it, we directly changed it into the dome. We are not like, we don't want to deal with that. It is a problem if you guys don't come in with the mutation, right? Because you are getting from two directions. You just write a declarative code, react with under the implementation. React encourages you to write your function. Really important, pay attention to this. React makes you think before you mutate the state. This is really important. It is really important. It is better to fight with the outside code, when bugs come in, which won't make your code such an easy way. The mechanism that I am providing you with sets state, to keep the track of things that are changing, virtual norm, so that kind of mechanism that React is giving, that's what it makes you think before you mutate the state. Good knowledge of ES6. This is my learning. When I came to React, I really learned ES6. If you are calling all this, congratulations. You are ready to react. You are a React developer. When you think like this, I remember someone was saying that that person has come from option to retail background. Will you believe me? You don't completely need to be that kind of a mindset. You need a very right mindset for React, freedom. This is why React gives you freedom. Just please tell me what you want, I will do it. Tell me how you want to do it, I will do it. The development we give is given by React and I can make sure I will use it. Thank you. I am the Tikami. You can follow me on Twitter. You can talk to me throughout the day. I asked for any code. I told you that if you have any experience at first step, develop a link. I had it. Imperative. This is the mindset we come into Reacting. And it's fine guys. If you are making this mistake, you will actually understand how React works. If you make this mistake, you will learn. Thank you. People are saying that we are looking for someone to work on this. I have bought one last time, something in our last month. So the same person confused. So I think the way we write our React has changed a lot. When you look at it as a new person now, it can be intimidating. So that sort of makes us wonder. What do you realize ahead? Chakravarti. Sorry. We have a speaker, Chakravarti and he is exploring the future. So let's ask him what is the future of React. Chakravarti, please put some light on. Future of React. Are you ready? Can you bring up my slides? Can you repeat? Alexa, can you bring up my slides? Can you repeat? Can you bring up my slides? Just stop, can you repeat? Sorry, but the next generation company can add it right. It's the best company in the world. Always better in JavaScript. If you can do something in JavaScript, you should even do it in JavaScript. The things I love is pre-code cam, React, Knet and Repure. I don't know how many new developers are here. If you are a new developer, you want to learn code, just check out the pre-code cam. It's one of the best sites in the world to learn code, and that is what we do. It's an open source organization. So, I'm a webster, ninja developer in... You can't even write a function without Google. So, future of React. Make something new or something... Some of the things that have already existed in React that we can use. You can leverage all these applications for video code right now, and then improve your code bases. React has so many bugs, so many pieces has been released, and React 16 is one of the biggest things for React, because they say it's something called firewall, whatever. So, here is my lineup. I'll speak about fragments, error boundaries, coders, wares, context-taping, render posts, and migrating them. You're pretty sure most of them do some of these things, but still I'm pretty sure that most of them don't use it. So, frankly, when React introduced Python, one of the main things that caught developers' attention was rendering multiple elements without your app. These two things, like, what should I do? If I try to do something like this, it just says, Adjacent racism must be wrapped in an enclosed text. Some stupid error decision, but they don't want errors. So, what I cannot do like this, just doesn't... I can't do this, but it breaks my use cases, and I put whatever elements they have in an array, and you just have to remember that to put tamas, and for the strings, you have to put it in double quotes, whatever. This is, again, you don't write normal basics like this in your day-to-day life. So, they have introduced the component in 16.2. So, whatever the elements or components are tags you want to render, you can just put into it. So, the fragment takes whatever it is. The fragment is, like, it's shadowed up, you can say. So, it takes all the elements between the fragments and just goes to the parent element. So, empty fragments in text. So, you can use it if you want to, but in different elements in text. You can also write a string in 16. How you can use fragments? Let's say I have a few ideas about browsers. What I do is, I create a component called glossary, where I just map all the elements here in the reactor fragment, and whenever you have, you have to use key without some details or something. And then here, I use gt and dd with item.com and item.description. In React 16 or earlier versions, what you do is, we just put it in, which breaks the htmlpy syntax. So, this is how you can do it. So, you can also render something like convert text to emoji and link JavaScript errors in components. In React 15, so what happens when there is JavaScript errors in your components? You have to completely reload the page. It just breaks, corrupts the React's internal state and emits some errors which you don't understand either. And then, it cannot recover from its corrupted state. So, if React cannot recover from its corrupted state, the only thing you have to do is reload, which I don't want to do it. So, React cannot handle this type of error moments with JavaScript errors. So, I have few methods to handle this. One is, you don't have to write any errors in components. And the other one is, there's no use component didcatch. So, what is component didcatch? If a class defines this method, it becomes an error boundary. And this error boundary, it catch all the errors within its children, but not on itself. It can catch all the errors of the children and do something else, like show something. We just take all the errors and render them in the components made for them with the children It just was like the end of the trend. The end of the trend. So, we just use that element again. So, there is one more demo. So, when you demonstrate it, I have a hotel container with an idea of another route. And then the model, that is the component. So, inside my app, what I do is, I have a function called model, which, so whenever I change this data, whenever I click on rocket, so it shows some login content somewhere there on the top, you can see that. I am very bad at CSS. So, whenever I click it, it just miss a bit. So, in the data method, I just have this button and then later I have this code state of model open. So, if the modeling state is true, I just show the login content, or else nothing else. You can do some of the amazing things like this. So, let's say you have a state somewhere in the window and we can open a portal to another window and you can see the pool state is being saved. And you can also control this window from here. You can close the corner from here. You can close it from here. It has a complete control of the new window. This is some of the amazing things like practical skills of hotels. And I know that many people don't use hotels. They are very nice. And there is one more caveat when you are using hotels. So, this is rendered to the portal. So, I have an on-client listener on this window of clients in whatever way. So, we are not clicking with an increment. So, I am writing a portal instead of the on-click, this thing. So, what happens is, it just bubbles the event. So, if you see here, that is on-click on the top of the table. So, whatever inside it, it takes the on-clicks. So, you have to be a little careful about these things. So, talk about rest. Let's provide a way to access dom-logs or reactive stringing the render method. Like, what does it mean? You can access a component instance of dom-log and do some JavaScript functions or react functions by using these steps. Let's try that. Then, at least in the beginning, we have the string rest. And then, we have call liners and then we have this object rest, which is something amazing. So, in the string rest, what do you do? Let's say, you have input and you want to control this input by using a rest. So, what it is, I use this extra a proper rest in the string base. Here, it's something of a name. So, in the button, what I do is, when I click, I call this third rest name dot focus off. So, when I click on focus, and then when I click on here, it automatically appears. This is how you can use the own string rest and then people, the reactive string rest is not suitable for asset management or whatever. So, without reliving something difficult, all that rest. So, what it does is, it takes an element and then you assign it to the class variable, something called disk. Assign it to the element. So, it goes in the same way. So, here, we just use the class variable. This goes name dot focus off in the input button. Or as we have here, we just set this dot name dot value equal to this. Here, focus. I need you to focus here. Object rest. Recently, we have used this object rest. The one problem when you are facing, for that rest is, in the first render. So, this will solve that problem. So, all you have to do is, you have to create a class variable disk dot name, which is an event assigned in real dot created. In the existing, you have this thing called created. So, whenever you do real dot created, it creates an object for the disk dot name. So, how can I use it? So, in the input, what I do is, the disk dot name dot current dot focus off and then, you have to remember to put current. This is the data, this is the data focus off. The time render for render space is taken for sharing between real components using a cross tool. So, what I say as render for this is just a crop, which is in the function, which takes some arguments and written some jsms, that is it. So, I have a component for created and then, I have another component that I am passing full props to the header. He's logged in, anti-logging, right and left. So, he's logged in and the state of it. So, whenever the header component, I just check the user is, he's logged in. So, for him, long or not long. So, whenever I toggle the state, he just calls the discard anti-logging, which sets the state to what of the negate of the current state. So, when I click on click of the anti-logging, so I just call this crop anti-logging. So, it calls here this anti-logging and it just sets the state to, to a crop. It just changes the state. So, now I have a left crop, which takes the function, instead of returning some of this state. So, it is, what it is, it is returning something for left set native. So, what it is, here I just just give and then I call the left full function. So, I am returning the left and then you see the right crop. Instead of passing the empty function and then passing a function with name. So, in the name, I am using the state of the chain component to render some of the varying component. This is what the enter for this. Write down this for the state of native. So, to create food. So, I can change whatever I want. So, let's say you have a, you want to tag the user, tag the user, right. So, you want to tag this person. So, what it is, a create a state of initial state of x0, the expression y2 to 0 and some other extra state of message, there was nothing else. So, I have a handle mouse. It sends the state of x and y of the mouse. In the render method, I use one mouse, which takes the restored handle function and then I am just rendering x is restored state of x, y is restored state of x. So, what if I want to track in different places. So, what I do is, I want to make it something like real. So, inside the app I have a mouse and I have written it render function, but it is not using it. So, I just remove this x0, x is something like this. I use this render method. So, this I just call the disturbed render method in the current state of the mouse. So, you can see that I am trying the mouse position in as a really simple component. So, you can use this mouse component somewhere else, wherever you want. You can use it multiple times. Then you context it, one of the things that I really come from the reacting, because many people really suffer in the render. They suffer for 3 days, 3 nights to render it as. So, it really solves that problem. So, let's say how many of you felt that problem dealing like, you have you want to send a problem from the component to the bottom of the component. Please raise your hands see. So, many problems. So, the context we just solved this. So, you must be feeling the feeling of sending problems from top of it right. So, you can use the context here, if you are not using this. So, you can just take that state of the very component and access it in the same component. You can pass it to intermediate components, because they don't care about this data. You don't have to pass this. So, how can you use this? So, you just use create context which is available in the react. So, it creates an update with two things. One is a component and another is a component. So, here in my case, what I do is if I need to go there, they want to use the theme. They want to probably use the same theme. So, I use the theme context provided. Since I have sent the theme context to react. So, here I assign something like values background line and color line. It is very simple. So, this I want to use this theme context in the header main or cooler. So, what I do? In the header, I use the theme context but we have to import it. So, theme context and you can use the render props which you have left in the any spec. So, you can take background and color object and then you have all you have to do is written some jss. So, in the jss I have to build with this type of background and color. So, what I do is theme context so, I am using the theme context which I have sent it for theme context but you have to import it and then in the theme I have the state of background black and color white. Something called initially and then in the probably I just change the state from black to white to black whatever it is. In the render header, what I do is I use the theme context to create some value to pass to be passed. You can pass the decoder value and you can pass some value. I pass the model state as well as the function of cover theme. So, I am passing the function where you can pass the cover theme from the provide and I am just sending it to you. So, we have some value components useful component, another component. So, in the app theme provider with useful component they use useful component so, in another component I am using theme consumer with this background color cover theme. I am just using the button only in the cover theme which pass the provider. This is how context is enabled. The next thing is getting the state from cross. So, what does it mean? It is basically a standard header and it is not one of the industrial component will receive cross because it won't use it. So, basically it is based on the class not on the instance. So, if you want to change the state based on the cross we can use this gradient states state from cross the usage. So, what you are going to do it takes two or three minutes the expulsion previous state. So, let us say have a content. So, what you do is they come to the content whether the cross is equal to the current state the previous state. So, if it is equal to the just written or just this written content is expulsion content. So, let us say I have very complex state of the state content is over and then I am adding an attribute in the content. So, I use a handy function and passing all the state in the state. Then in the state I have content in this concept as initialized and then I have some extra state in the state hello. So, here I use the standard gradient state from cross. So, I can add this state from the gradient component to the by usage of cross. So, what you do is you then expulsion content is equal to the particular the previous state of the content. It is equal to the other states written in the past state of the content is expulsion content. So, same process in the demo. I have gradient component through here and this is the description I had about the in react. So, there is a that is called create subscription. So, that it is some sort of like context label, but it is not completely like context label. So, all you can use it. You can use create subscription to read values from real resources like location or some web socket things like that and you can update it without reading any news. So, what I do is I use the import create subscription import things this such a work. So, how I can create a subscription. So, I have this one subscription which takes to create subscription to two functions. One is base content value. You have to pass this to this. One is getCurrentValue function in the source and then subscribe. You have to subscribe to that source in the all right. The usage is simple. All you have to do is subscription source is some you can dispatch or observe all whatever it is which is which changes eventually. And you can use the value you need for one example. Here I have the subscription. So, here I have function create. So, please don't worry about that. It is an RxJs thing. So, here what this function does is it makes a value also good because they cannot show it which changes eventually at some time. So, I use this observable which is the create we have something create even something function. There I use the subscription with a source of observable. So, I use that something some product or you can do see that something which which takes a page one year straight. So, we have a change value which renders the current time which changes a page and if you see the subscription you can see the date current value which takes something like source and source and I am giving it like source code date value. So, probably it will be something like this source and in the subscription function I am using the source code subscription to call that and then you have also need to unsubscribe. So, whenever you are unmoving the component automatically unsubscribe it. So, there is a problem something called strict mode. So, there is a strict mode. So, when the editing wants to duplicate something or don't want to it is like it is not in best practice we can use it. It flows on on it is like it is component life cycle in somewhere deep in the nest. Component wherever it is it just flows this body and so basically it will be spawned. So, please see So, basically we can say repository for this which is used to modify the whole director is from that case of the after price from one function to another function like it feels that there is code mode and create this create code mode which you have to the clone it and install it and let's say you have from the 15 or 16 or 16 or 16.4 whatever it is all you have to do is J-Score Shift, Hypertase or Transform and then the Coolmaster the name of the Coolmaster play and say handle everything or something like whatever it is and then all of you are directly that is it. With this whole lecture code you can change the whole day you don't need to have control size for answer you don't have to change the component you don't have to worry about all of this with your experience I don't get to speak up on these suspense things in all other topics we have to deal with so I don't get to catch you there so please ask me anything So, after this what these people have to say when we ask questions this is not how I play I don't know I tried to move for yesterday and yesterday in the morning one of my clients he said can we start meeting on Saturday to discuss how to do it I said you know on Saturday I said I am going to a conference so you don't have to go to the conference on Saturday but when you start today itself right and Friday I was already in the office so last night I was in the office and ten of my clients were there so I missed him and again I was in the office I was running through the airport with my laptop back and there is the airport and you forget the shopping problem and things like that so that's how I this year this is what we are going to talk about today context theory is we are going to give a quick introduction to that which as seen today we are going to talk about what is context theory and how does it really help developers manage how do we use context theory when context theory is actually more important because we and developers are celebrating we get something good we just have to do it every day because you started using jQuery every day and you don't really notice what is the hierarchy which add to basket and then there is a small icon on the top of the right corner which teaches you the movement in the value field which has been added to your basket and if there is a reason that it should be integrated to the basket generally it has something like this and this basket icon so let's say let's say there is a separation of nonsense which is about separation of components so whenever I create one component at a time that component is only thinking about how do I handle myself it doesn't really do I have to make a game where do I need the data from the component says I don't have to think about all these things just giving this value to the property and this state it is your concern so you just think about giving the property as a basket comes and I can be in the basket and show you what here it is a very simple application let's say this is an activation component application and application the basket comes I will make a component and I will make a order for when you use the P1 let's say a product it is my analytics to build a product and you will do it but when the master comes you will do the generated property so this will work pretty well but as it says generally if you do not have the basket you will have a header like this at the top and then in the basket icon the component will promote a dynamic of 2 to the basket icon this is the application this is the basket icon and suddenly the header has a problem in it the data says that the master is going to be in my side and I am going to make a kind of application so now this application is thinking about the person in the basket icon to the basket icon component and so it is happening so it is thinking about some other data as it is part of the masternet but it isn't always going in the react so the way you can do it in this way so the application will look at its type where it is that way you know what then you do the basket icon and you will be using it and here it says that when you are saying the master does not pass on the basket so this is where the header is not related to the basket icon as you know the header just consists of I am a supermarket dot com and all this but it says I don't really care about what is the basket icon that is not my responsibility but you are still passing on it on to me so that I can pass it on folder to the basket icon and this is something called as this is something that everybody is thinking I am not really confident and the example that we just saw this is actually a very simple example that we have added and then you have to pass on all the classes properties down the way only so that your children somewhere down the area children can see them and this is something we saw that in the react part because react it came off like it was more as a view that it's purpose was to ensure that if you want to render it for you you will do it the most confident way but they didn't really touch management as part of the code like they did they never did it for the way the application was to pass on data like that how can it be really better the only way to do it is using state state in the vanilla react and state state has this kind of property because in state state we have some property one of them is a little let's say we have serif groups we have serif, mango, banana they use it to keep on this add buttons it is in a add button you can see mangoes and that should get updated so it is not just that the data is going from top to bottom the indication has got to go from this component back to top and that is the last one this kind of add complexity in our applications this is how it now looks like because in application this is the existing data in the market icon and this is the new product page where I am showing the list of products and you can add the data in any one of these products we have to raise the event that we will do all here the application will not update as I am trying to add some add complexity to the product and then I will write the total from there so now I am showing that there is so much of a rule happening for the aspect component so lot of places which do not really care about it like in this product page and the other space they say that we want to really care about the aspect component but we have to review these people so that I can connect the first one that is shown is using state state method the next property the components which do not want to be bothered about those properties they still have to take those properties and change it to the changes what is the other thing this is the first thing that comes to my mind like you have already discussed in this course of data the first thing that comes to our desktop is that I can just have a variable somewhere this is why Google views are debilitated because many of them use variables and one guy is updating the other guy is taking it very soon it becomes a terminal sometimes you have to report 4.9 or 30.75 and you don't want to take the character which works because you can just go and change it and manage the main application because the application code is not really clean we can solve it somehow with some good patterns like we say a single term but see this is one more basic problem that if I have a global variable if one component is updating that it is like the on the add button and it is updating my pasted form there is no way for my pasted form I want to know that this is updated it doesn't really generate any event so whenever the value changes it doesn't really care anybody that my value was 6 so if you are using global variables I am at loss because I have to get the code in the data and the pasted form changes and the pasted form changes and you can do this so that's how it works what do you think? this is a solution to that and we will see how and then depending if you have a function any solution you can use some state management which is like reader smoothness how many smoothness are there whenever you want to handle this kind of situation of moving data around that you will go for one of the state management tools and the reason why these tools came up was because of a gap in the end because the state management was continuing also but to give you a secret this gets actually internally used from the state case so we see what exactly is from the state end which is going to help us in the state management of our application and it's part of react person in 15.6 new version not new anymore so soon as that we have released 15.4 also but but also we see that it's part of the new react person if it is not maybe so so this was there in react since a very long time it was just there because it was kept under the hood and it was also said that this is something we should never do we will have like this old state management we will not be a contest at the end and we always figure out why not and then they came up with a very nice idea so that we will be a contest at the end it is not small management but it is actually a whole this one line and this one line in here we have this concept called create context which can take a different value we see and then the moment we say create context what exactly is the context now when we say create context I am going to reserve a space for it and then you you know you put whatever values for the variables you want in there I have just created a space for it and these are the two factors I am going to provide one is a provider the other one is a consumer so this is more like an observer at a set is here a provider A is basically the one who is going to provide some value to be created in the context the consumer is listening to that there is actually listening to any kind of change that happens into the variables that are stored in the context area so whenever the value changes in the variables that are stored in the context area all the consumers will wait to know so this is how the code looks like so let's say now I have defined one basket form this is the code here but it is just called a simple code I have had which is an exchange from React otherwise simple way that we do what I have done here is I have the same basket context that is create context in the cloud case across to the application what I am saying is the basket context is a provider this is the provider of the application we have to find out that the application is a provider so that any way within the application we can have consumers and then what is the value that they want to store within their context area so now that I have stored this value here whenever this value gets modified anybody who is listening to it they will get motivation that you know that the basket item has to be modified so now the application has this provider that brings the hail and this hail was basically the server who was saying that earlier I could have brought in faster this basket as a property so hail is just empty so hail is kind of I don't care about the basket I just have to store some nice logo and add anything I have to store the basket item somewhere in the cloud case but I have to take care of the basket item when I go to the basket item this is where my consumers is so wherever in my application if I want to consume that value they are not going to consume much I can have it in a marginal place and what it does is this one basically is actually a renderer so when I see my consumers as a child of it I have to design a renderer so basically whatever you have stored in your context in this case the basket item was already stored and the output of that is another component this is kind of using this query and depending on the basket I would want to store the basket from over here so now the basket changes so this is now how we just say I am just going to add the basket item as my child and it is the basket item in my head right now so both there and the second part like where it is it has become that it has got modified the state technique is going as a single period this may be an object so what I say is in my app component the state of my application has one variable for this perfect sum and here is a method which can update this state and now from there it is the same code like I just have a void I have a header and a product now and the product is deleting this function which is actually modifying the value of the product wherever the add value is it is basically going to keep on the same method and then that is going to go back to the application the application is going to change the value of the product state and even if it is consuming then they will get to know it so this one because you will see that this add item that I am causing this is basically actually defined in my application this is happening here also so in a bigger way what you really want to do is move this method as part of the product state like the way that these things load in my context here if you look at this code what we are saying is the default state is an object which has the basket form and now instead of bothering my application to do all these broader things I am creating this API part so we are creating a component we are going to create a context in the default state and after that I am creating a component of this provider and after that I also need to have the method that add item will change the basket form which is immediately to a one and now is j6 which actually is the provider and it says that the bottom there is a schedule here and this is the context state and this is the way that I am going to store in my provider so as part of the way that we are seeing that now is to create a state as well as the method which is going to work on the state this is actually a much bigger reason because now you have data and in this case there is some data both of them are actually kind of together in your context so this is an example this is kind of this provider that we are talking about this is actually the reader's provider that we have so readers if you have this provider you have to enter the application using the provider and you provide the store on the application so that is nothing but this kind of a provider where you store the application that is the default state that you are storing in the application and this is and then you do the that you are passing just kind of and then you do the and then you can just get updates about all this so when it comes to use this is actually the now why didn't you say don't use context state yet any idea why it would be so like it's just a why not to use it because one very kind of context state yet it is not somehow say I can just create a variable which is sitting outside my application anybody can change it and anybody can access it so it's kind of there are chances of your application getting messed up a little bit if you don't manage your state so what this job says is don't use context state just for jobs flowing out of the field if that is the only problem it is okay because by creating context state such as small situation you will actually create more best in your code so it's okay and I am going to talk to you but let's say in different cases where your data it needs to be accessed in multiple components and multiple layers so whenever it is used to create your data there is an aspect problem changing if there are four components between to that at different places it needs to be sensed to store this data at one place so that everybody can access and get in the code if you just have one provider and one consumer that's probably a place where you can say help all of them this is not really important it's a very kind of use what is things we saw in our previous topic how to use it for thinking so how thinking you just say in context okay currently my thing is dark and then you just go and say okay now I change my thing to light so what happens is anybody else who has to modify their visualization like just say there is a button which is dark in color what I am saying is like I just show a light color button they will actually be kind of continuous to the context and if they are okay anybody change the thing I will change myself similarly localization so consumers have currently in English but let's say wherever that takes in my case if I want to change from English to Hindi then all these components they are just listening for the languages they are very active languages wherever let's say application level let's say that okay you know what I don't want I want Hindi in that case all the components will have to show some kind of data they will change their language from English to Hindi similarly localization information you have logged in now you can use the username subscribed in the top of your data in this kind of places you can use STPA if you see the kind of users that you are looking at it's kind of being minimal you are not really looking at storing their application in context API another way to use the similar logic is just if I want to handle the meaning of my application what I do is I just create one context within the application so one more thing you can actually create multiple context in your and then you can actually use it all over context is more like your best friend how many of you have kind of compared to something very private to your friend most of you have done and then the next one if you know how you are thinking about it so yesterday for example like before even I reached Mumbai here my family view my sister view everybody was asking me so I just told my buddy I was my friend and don't tell it to anybody and that was very big of a mistake because the moment you say don't tell then everybody in this case will know about it so that is how far the state is you just told the guy somewhere so this is this is another way of creating a context API so what I do here is this is my theme context and whenever I have this kind of method I create things like that component in this method what this method will do is if you create another method with the context in mind so there is already a consumer here so whenever my I create a free render of the component you will do the new theme and it will be created in that way so let's say if I have a button like this I can create a theme button with the hsc of the button so now my theme button can actually listen to the changes to the theme of that you can have multiple providers this is kind of an example of a multiple provider in your language provider, theme provider there are a lot of different kind of providers so that they are having very specific purpose and many providers say that they are not going to consider what theme and I can say that I am not going to consider what language it is if you want to score any other application you can have a specific provider for that and similarly you can have a consumer for that so you can say this is my theme and language consumer where it has to be both of their consumers and when I have my child I am just going to pass on both the language as well as the theme to them so now I have to use this one to add the providers which have both the providers the language and theme and it also has both the consumers the theme and the language and all that I am going to show you is deep over here with the current theme and the current language so with either the theme changes or the language changes you always get to know about that in your so how is it here that readers readers will understand readers will understand the story and some readers will understand but not router so how many of you have used a router so you have seen that you are depending on the router mostly at the start of the application and some of the readers at the application will have the router, the links and redirect to the computer everything inside so how does this communicate with each other so for that the reactor needs context editing so that the router can save all the values and you want to evaluate it for example that can be passed on to all these solutions you will have to go with this so this is where the so react component is like the very core of the reactor that we use whenever we are editing component we say extend react component most of you have used only the props part right you have considered that you have enough component it will probably just take the props and probably send it to super state but one thing that we probably never used was the second argument which was context so context was actually part of react for a very long time and it was the second argument with the component so if needed you can always use it because just that they have always said don't use it but otherwise it's not really a new thing it just has become a good idea you see that context has actually been used in the region that it has actually internally it has been used in context for long time so what happened was all this life that is they were actually allowed to use context because there was a kind of trust that even if the context immediately keeps changing they will change themselves and they will know what they are doing but for general users for general projectors they say that you don't use it because you never know if you use that what are you using that for does it mean that renders is the same as you said you are using it yes renders apart from rending the best one is that it has been evolved like we have this renders date tools how many of you use renders date tools so you know the different thing that it is it makes it's not so easy suddenly you see that I did come the mango 4 times in the past you just do you just go in one step and you have to see that there are some things that are saving it to fight so those things that tools are there for more serious cases of radars and the idea that state management tools develop even the old things must be there which is that they evolved and suffered from this how good this is the last bit of it so let's say I will take the example of internationalization this language selector so I have a component which is consider that let's say there is a dot com the dot com is the language and the user just changes that and the moment the language is changed that is going to be the active language for my application so if I say you should be active in the active language how good is this component so let's say the component is called language relation and here we use the context and we have to store this language in the context so if I do it let's say I am using just what I do is I have to make the mock out in the context so within my component I will be having what he says that I use this context and let me create the context to store the language what I do is I will just mock that out and say that whatever we get stored the context is stored instead of sending whatever is there in the code send this one so there is a list of languages in English, French and Spanish and the active language in English and so now what will happen is within my test and this method is just going to be written with language the same component but the context between that is so now what happens is in the case if I say that change to a different language instead of connect to actual context it will just go to this mock and the mock will have its own pre-demand value so my test says that out of these three values if I have to write will the active language be here for now that will be the case if you want to just clear on that the good is everything may become you just can look up that so there are a lot of other things so we have a kind of script thank you so much, that was really nice this is for you thanks thanks so we have for that how many of you want to take 8? so they take a break now for some time we have so for those of you who are morning the speaker or not we have early stocks coming out next week some day when we do we are opening and also after this we have a great session because we have a scripted video so for the first case because we like something we like something original for the video I prepare questions after the break we are going to ask questions I want to see my questions let's start you go cast me far away play these little this script which is quite complex and the architecture is quite defined as the rest of the microsoft the rest of the microsoft on uis we are we are already since we are on the writing it is microsoft which doesn't matter what we are doing we just need to say that we have to make this we have to make this but we have to add extra several things to make this a clear state and again if you want completely we want to make it a clear state because it is manual we have to make this a clear state we are going to tell you did I say we have to make this a clear state consumers have to be inside the provider because if they are outside the provider the call goes outwards consumers have to be within the provider so they have to do the provider that is in this kind of call by situation like if you are a consumer you have to provide it but if it is going to provide it but if it is going to provide it you have to provide it inside the provider so that is why generally when you are on the page you would always have all of the providers all of them some of them are you know also all the readers you can use this context but as it shows you can actually create multiple context within an application so this is where you can have readers as well as your you will probably be an example of a clear state if you want to say that readers can store only an application within a state when it is an application it is related to an application so what exactly is all the data your data is flowing between the servers and the users and what they are just making so all your components are nothing to a data so if you say that I want to handle only an application related to data in my data source you can do that and you can say that this data is a cross-cutting concept you can have both of them so this is where I think this is the extension of the question that you asked so you can obviously write the difference between the readers and the context in here that has more rules and all so apart from that is there any advantage of context in here in performance and all so like in one of the product they use it so when it makes sense if I remove complete readers it is context in here so readers although even if they use context in here it is not just an actual whole context in here for example it is a concept of single store that they have come up with because it is a game you know it is context in here so if you can take a point which is as good as that it is actually not a very big advantage for support if you can do it then you can handle it but the point is it is actually a general process for when you are going to use a library most of the time there is a number of places where this happened so your application will explain how being must be stable and marketing because if you are using a standard library but if you are comfortable to do it you can do it so what do you suggest if I take care of the spring can you say about palm trees for that brother is very new so one thing in software is you cannot get everything if you have you must compromise on performance or else you must compromise on speed whatever you must compromise on at least one thing you cannot get everything in software so if you really want to make the job there easily if you have the power of native developers it depends on what you have what the resources you have rather than you should try to train your people in the something else it takes more time or energy and if you want to be the same the other person has the same experience with other technologies one more question there are two questions first one is you mentioned saying when you use marketing it is a little bit of a process on the same lines let's say we have an application which not just changes but also dominates or also changes we need to separate start of the logic based on that application so in terms of that does one basically also have a limitation that we can use that is the point in terms of an entire application that we can use so it doesn't really care about what we put in center and how we use that so we definitely have a limitation on how we can use it which is such a restriction that we have to provide it and then we are going to just say that so let's say this is more like a responsive design project like you said there are two different applications using same dates but changes you can change it plus you can take it down to the logic we have in this application but in this case you would have to use a data of one particular application if God can give you the last one you are not going to have the last one last one what's the like what is the hard fighting when it comes to Android you start thinking in components and the react styles in a way I really did start immediately with Rihanna I did Rihanna that was one of the motivations for me to learn Rihanna then to think in terms of in terms of communication so the speakers for answering the question and thank you guys for asking for this question I was wondering how many of you use Canvas or do you have Canvas for it Canvas and she gives me Canvas in production so I'll take her and see if we can use Canvas I will be some and explain us about Canvas so we have seen a lot of Canvas so we have seen a lot of Canvas in case of Rihanna you have some formats knowing the react styles make a good smooth application but we are I think every developer comes and say it's not as fast as the way they are it's just nothing but an attractive so when he is covering the top and he is using experiences when there is a motion on the screen like to be a pro like so the giant is basically giant or devil is basically related to the fact that how smooth your page is so whenever the user interacts with your page and the language experiences before the page responds so there is just a smooth version of your Python course of the user course there that's the way our refresh rate is especially high but I need my practice to understand so the browser needs to match the device this device is the refresh rate that is because when you come up with a new paper you enter for each of those refreshers and so if you calculate that this one second is counted in a second by 60 which is roughly as much as it needs to be but browser internally has to go up so that clearly we have 10 minutes to render for your future refresh rate now when a browser fails to do that that is when you experience that when you experience that if we move on a high why this is happening it's not as smooth it's not this smooth so we can understand that why it's very expensive to be paying for the browser so the browser actually follows a series of steps in order for you to see something for these steps first one is to calculate so in this step the browser basically determines all the CSS rules and which CSS rules apply for each element that is something for the category once it starts for the category phase it moves on to the layout phase so the layout phase of browser determines the position and dimension of each element of the page it gets done in the tag so don't have a factory see something on the page due to the page phase it only fills the pixel with the required color and it paints around the layers but these layers are not here that means you cannot see it the CLE which happens in the component phase that is when the browser actually records all the layers of this see one thing in mind that each of these steps if you render one of the steps it automatically impregnures all the steps that follow your particular CSS rule or style triggers the first step it has to follow through the layout of the element component so technically the browser has to go less work obviously it has to go from less step to means less work it needs more optimization so why do you like to consider this whole issue you know all of the complex where you are using today you are not required to even know what is the whole issue the user has to go through this so it has to be smooth because now you are using the way that they can see the difference you are not even able to get somebody as much so how you can optimize every developer what you can do when you are trying something first thing is you should avoid expensive styles so we know this you know as a main developer we use all the styles and you know and then in both the versions we say ok something is not working this thing is not working this thing is slow or expensive styles so let me give you an example I use a proper left property do you know a proper left property actually it goes step from layout so when you actually prefer top and left property on a particular element the browser has to go in layout to give you the correct answer so it has to go to the layout that has to paint that is still in the question and then I don't need to render this every once in a while so if you know you are using top and left property is something that top is minus 100% you can use it as a transform property the transform property only if it doesn't come to this there first that is how simple it is you just have to understand so let me explain what we know that we get that is the offset top property so whether you prefer offset top property on an element it gives the problem a lot of work because it goes and layouts so that it can give you the correct answer right it has to calculate it again to give you the correct answer that is called as equals and if by chance you want to change properties of some other element then it cause an error so it creates a bushier cycle of reflow then delays reflow then delays so the browser is actually stuck you don't realize that when you code but when you actually see behind the scenes that it creates so you should keep the labels that it creates so it creates the member one thing which serves very much as the utility blues and we should take a cheater the third thing is you want to save your score with this this is I think you should keep and write generally whenever we have a long score list we always update the UI based on how the score limit is 5 which used to work but now it came out and your actually browser has to come up with a spirit as a user is scrolling the page so the visual update we not necessarily stick with the scroll length instead it belongs to the scrolling a simple way to do this you can just keep the latest scroll position and variable and then apply what in the UI changes you want to do based on that so that means the browser doesn't have to trigger anything again so this is very good just actually a bit of a breeze how do you optimize scrolling performance why should we do canvas so the app basically leverages the stack which uses this app as a communication application so the app has basically gives the ability to be a writer to be famous to be invested you can use it for math, you can use it for thumb, browser, UI our API blends them with the hyper-formal strategy so technically you have a very hyper-formal strategy it's like a super pop-up so you understand what we have and this is just a superficial explanation of how what we have to do but how it actually continues like this it has different components so we have to understand the best which it provides it provides a set of standard we have which is really high in the underlying whether we do anything so if you have worked on canvas you might have seen that you have to write context and then in that context you are creating a rectangle or whatever it is but using the app you don't have to worry about that you can just directly writer these components and your difference to directly the writer so in the beginning there are three types of elements first one is the office component the parent component then the group component each component will be given a better understanding or nine different components these are the cases when you lost by the chip you create a rough image so these are the tools by which you can draw your UI and then add a line image or just an x-box as far as I remember when you do a UI you do a lot of things so the app has a set rate so the primitive component only handles the element part if you want to do the styling part it is handled by the layer component the layer component it adds nothing like a function and it returns the style to the supply and together it will make a new component so as you can see this is a very simple profile picture of the app component which I have created the primitive component you can see again in the styles method this is nothing but a layer it returns the style to the supply to the major element and together it renders the main thing in the RIA academy we add a lot of render adjacent styles it needs to be encompassed in a simple category so the group allows us to form it together to make a logical application or to make a sensible application and group something as a renderable right? you can use that in the RIA in this case for instance this is the third point it allows like the rate of cash and it is in drawing operations this is the best thing by which you achieve the PSU design it is a pretty activity out there so because of this when it caches all your operations when it uses clothes it doesn't have to be that clear it doesn't have to be that clear it has to be that clear so in draw it actually achieves this case before you try for example I just extended so instead of now just rendering the image and a group image and text together so I have a loaded group image and text from the RIA campus and the same layer component I have applied it on image and together I have lost the group of the component in profile picture along with the which separates your group from the campus so you can imagine like a component model which you place all your other components so this actually provides a space for all your other canvas element spaces let's see this example so this is what I was talking about so it provides actually a component to build that hide in which your canvas element will exist and because in our production case also we are not just in the canvas we have used other components also so this allows your dawn as well as the RIA component to library cycle and if you want to process which suits your needs you need to merge the limitations so one of the major limitations of RIA campus is you have to take care of your videos keep the performance monitor on and see your memory size whatever you want to use because if not taking care of your videos you can overlook that component RIA is the best thing mentioned before that RIA campus is not the only library but the library is the part of campus of RIA so these are the two component options for this RIA so the RIA is a very different use case and mine has somewhere to RIA campus it is basically used to create complex and if you want to create a new RIA you can use RIA but it is very much similar to RIA campus but RIA campus has other components so RIA campus is basically designed to achieve high performance RIA campus so let's see the RIA and the FPM is the maximum of this just when the FPM is a permanent no stretching that is the only way to do it so we should notice the speciality of the calculations that is the only one about campus CTR so do you guys have access to data from RIA and it is ready for the stream and this is something I read because we have to use the latest technology for the financial latest things so let's call the next speaker me in the room so let's see how the institute can handle I just saw this quick can I say that one in the background so the GS that is getting now faster, faster which is Sampa is an expert faster in the fast way and ultimately it results in the best user experience but again we are in trouble in the RIA where people are not able to code really number of times because you are passing time to the device so in the last few days we have been able to achieve better side performance because there is combinations like high main device high network high device, low end device low end device, low end device internet so this reading was best for all the tests we did it the worst we did it the best the best there might be a case where your response is maybe bigger than the page size itself the chance to read by that page you can change your response in chance the same way you are changing your JS code or JS code in chance you can think how they are decided so this institute is really a continuous stream of many input possible and engineering is an object to handle the device so what does it mean by the thing that let's say case of book manager there is a listing and in that listing you get the you strain those objects for problems by splitting JS this problem of large distance so we solve it we have some API code which requires to deny data control in a way another thing is if your response can be solved by server it will be it can be so if you are surfing your site surfing is the great site and the result that is going to be delivered is quite large but it will be the resources and the time is for 70 years so I divide the thing into small things that will impose penetration because if you page it that the listing of others will go on second page and that will be half the view of the issue because then no one from your site longer it will take to talk about longer it will take to argue it was your business so it is larger it will take longer to talk about and it will be the illustration is taken again from a advertisement screen and that is really half the job and the same way we turn our JS into a profile so your JSON response should be chun unlike JS and JSON thing there is an upper cap to create the JSON so the upper cap is 64k if there is a data beyond that that will be converted into an extra 30 years of this because server is new to browser it is a year that it was born on browser with streaming how it will work you activate that then it will pass it so next it will do it one by one it is the bar visible server that comes on it which was trained last year that waits for the last part to come that aggregates all the data and pass it in the JSON format using the so let's see how it will implement this one so first render was quick so within this scenario it was taken as a current device so as soon as data on the first render was done it rendered it as soon as the data was taken it rendered it from the activation it waited for the last part to come and then it collected it passed it and then it rendered so you would see a difference that it was very distracting you would say and it yielded to 1.2 seconds for the first render and the last so within making small changes at the back end as well this is the bug of the comparison to the S1 the movie was trained and this was the you can see the raw S1 site is more than the entire render of entire JSON around the movie so that is the difference and in this stage we are really not aware of what size of data we will be getting and handling so roughly you can see that each kind of raw can create meaningful and possible changes so there is a list in meaningful and possible so what I will do is the entire file and I will streamline by creating a chunk for each one its collection of same kind of data it takes over the file stringing from it storing some data which is the key element as soon as it is in the file so the chunk which is beyond that size can go to the next so for example that first time it was 50k which is 10 screens 26 shows in a day so that would be 60 shows a day so the chunk is 67k so what I will do is I will design the chunk 64k so there will be two chunks in present moment which is write response dot and over here write it down then it gives you on the line so there will be a call the buyer will trust me and then we what we will do is just as it will close the collection interpret from the state code it has an API which is available in modern models in response you get reader and reader is getting the point so you get point to the point there is something to read on this so this is pretty read this way you get this part so inside you can add here reader is out there and the chunk will be finished in response you get reader this is basically an unsigned reader and it is pushing it by writing and then it is done which ends to that where the response is finished on mark so done as it took on the line meanwhile it will close the value you can convert it to the JSON format and using the vspot as state to stack in the state some starts coming you are updating the state you are pushing the values in the state for this to read the chunk there is something in your case of movie for example certain movie can be released so things are fixed so once the data is fixed we can chunk it so that will be good but then your business might want to go again browser is like user browser so you will have to check whatever you want it might be useful for ads maybe it is how the ads are maybe for some other services so make sure you are not writing anything so probably you might have written another so these are some challenges that can be overcome so these are the earlier ones prepare yourself to say you can do it and my question is have you looked at the cases that may allow you to restrict or lay out main or composite basis business cases itself so when that is really good all the time react can this be relevant or so I feel that is available to all the process I mean the react can this so I have the ability to produce but it depends on what you support all the time so can this be supported by all the process for guys that was a major thing because we did not want to for every browser we had a customer base we did not want to lose that so that is what is important so I want to express the role and your statement behind you said that I want to see so is that for making sure that the chance comes export to you can edit the time so I think you are not so for example so you are from nowhere and you have to shoot your video on this so it has to and that is your so you have this for planning you can get what are the values different from you according to the process before sending the channel you spot them and then send them over make sure before sending another channel crush it over so crush it over so don't crush it like a red contact in react I have to talk about what are the best practices that when they are in contact then in that case you will see okay so that actually one of the basic thing if you want to identify whether it is in the performance monitor or the console always on and look at the needs and what it is occupying make sure the behavior doesn't include all of your react make sure every completely sure that something other doesn't make your variable, single or single one level so you have to keep everything segregated that's the major thing when you are using react with canvas just like you use react with normal components, it's very similar to react with canvas and you have to make everything separated, if you put in everything the second time chance that you might go over and you will get my cause of everything make sure you do that and also that not a challenge to become like you said that was chunky you have to store code splitting at the service like the chunking will be there at the client and as well as on the server side also you mentioned that please check the browser compatibility so suppose if your browser is not compatible, what is the fallback method you have occupied in each of the components so you are not supposed to make this 2, 1, 5, 2, 8 chance you are making changes on the server to 8 chance is the process which is done on the server for a competitive issue that you can always have a hardware component that can handle the condition of this so that's it there is a practical problem if it is not available then you can use the mind approach language that you are using as the best practice for example for the hardware process so if you use the baby news what are the baby news that is looked at by the young canvas and does this we have a canvas component communicated to you guys because it's just like normal as a component but just as in react when you render something to an energy essence so the GSS actually renders the canvas the component you are using so this component is the one which actually creates the canvas and everything is rendered on that it's not rendered on the top and that single image is rendered on top so if you check the code also so you can visit the site you can check the code we see only one canvas that can encompasses the entire scene and I don't know the second component supported by the canvas includes images and what amazing through the component it supports is this view so if you are using a normal application you have a horizontal list or vertical list a more common component is readily available to you you just have to provide the data to do what we do so if you want to use this functionality you can create it in a web view you can call that web view in your application because that's what we do we don't develop it on any application we directly do it on the web so that when you want to push up it won't have actually release a web view so you can do that so the view that I saw there was a lot of things were wonder that you wouldn't have to think about whether you are going to have a budget or if you are happy so it was there which was a wrap up it was actually something that you get into the job and you have all these challenges and passion you know so it's true so that was again we don't explode that in the library but certainly we don't want to go back taking libraries from the speakers and all this stuff last question okay I think the thank you Rehan and thank you all for being published on YouTube and for being shared with everyone the second question is we have police here, shirts and stickers so if you want you can go and collect that if you need any help you can ask me or any other material the third question is we have your expressions on state management and how to grow as a friend and family it will be really great if you guys have any questions so come up with a question and submit it to either me or Nivesh or Siddharth thank you all so we are taking propositions from flashbox for flashbox you can come for anything on stage graphite anything that you don't want you can ask the watch whatever so you can if you want to talk about it you can come here or we are putting up the live stream so you can use a laptop over there the other thing is when you have feedback forms then I will show you one of the feedback forms so there is the end of it and there is another one which is end of it if you like something or something you can call the speaker don't take the form and put it in then last quick so we have this we have managed to do so we have been putting up new subject flashbox so you have a discussion on a particular topic why do you take the discussion and any discussion flashbox are made to grow see you keep it on and music you have to listen to it you can come on to be seated you can see now so we will do something what do you want to do anybody else do you want to do something do you want to do something such much I have to do it I have to do it next slide is what do you want to do do you need to do it I will be inside inside so just so what do you do how do you expand how are you and so on now you have one you have to you have to and you just put a lot of thoughts what do you want to do so you can see some stakeholders are like it's like they are getting on the training this talk is the name not that is not it was made by the principal the principal he was and they wear it at a very, very, very high end like they are now now. If you are a people who want to talk to anybody in India, or people who are pretty straightforward like the NINI, there are testers, managers, we are often in a similar situation like they are in a world war or world development model and what actual product gets changed, outside, outside, outside, everyone is calling things like that, outside, outside. There is just one thing, there is just one way to decide that there will be some problems like we mentioned, one way. It's like there is no game, we have a lot of organizers, a lot of staff, and on top of that we have managers, so my name is Ajay, I've been a designer for over 8 years now and I've been in this type of situation for many times in my career so far. When we are in a world war, there is one designer, if your team tells you things are really very fast, they'll start guiding you from there. There is a communication going on, they jammed out and the products started selling. Over the years, last few years, I started working for Divine Systems and this is one of my young things from over the last few years which have now had a much, much more effective communication around the product and product line, which also helps their team and myself. But so far, I have before that, my other friends, I was thinking, what am I doing here, what am I doing here? So that's my design system, we say design systems, what do we mean by that, what are design systems? Design systems are an documentation of examples of rules and ideas that guide the ideas of a team into building the product. So it's just not thinking about the product in terms of rules or something like that, which says that most of us have all the specific things like features, checks in and out, so one or two people, if we take LMS, please, please, yes, please, yes, yes, yes, yes, yes, yes, yes. You don't think of it as a design product, design systems as a document in the case, so that you have a brand product, this is a different on-point service on your team. Modularity is not here in the new concepts and I don't think of it as a product. We have been using Modular for Modular products like a bootstrap or a log-in session or if you go back one, two, three, four, something like jQuery or YAMBI or something like that. These kinds of things, we have been using for a long time, so these kinds of things, we have been testing, cross-progressing, test-testing, like we do a cross-progress, which you can take, you can assemble them in some way to create your own product. What we have back is sort of a documentation, sort of an object or an action on how to use particular component to be here with the product, how to contextualize those components. Bootstrap tells you guys a lot about the app from global because it's got a standard idea on making everything look the same, but you have to date it, and in this case, we do bootstrap. So if you are using bootstrap, you don't have to name yourself a company where we do whatever they say, they also use bootstrap, it's very common. So if we take components, you may have enough for your components, for your components, let's say your component, let's say it is a set of components, then you can make your new line system as a diagram that tells you how to make something. You can make a session or whatever, like Cassius, Moria, or anything, but if you have an idea, it tells you how to do your pieces together to build something, something. So moving into the components or the ingredients of the line systems, what I have in mind here is a more complex approach. Okay, product model design. You take anything, you take your attention, what you want your product model to be, and then your design system and your design system and your design system. So to give an example of this, this is from Moria Design. I have people here who use material design or an idea. So material design, as laying down here, they want to use material as a metaphor for the product design. They want to create an app, at least users don't ask, very bold and grapple. They want to make it very colorful and motion is a very easy part of design to kind of add a meaning to give proper feedback to the users about the different activities on the field. Next is content. Content is what we communicate to our products to the user. It will be in terms of product forwards, item pages, or it will be visual elements, so this is an example from a popular product called MailChimp. So MailChimp has this, they have a dedicated website for how to use text text messages in their products, in their app. They have defined and anyone in the design system you can define what your message is to the user to see how to actually put even an idea of how to label your product action products. How much size you want your message to be whether you want your message to be humorous or you want to make it very straightforward and then you can also define and declare inclusively in your marketing. So for example, use of Jenga products, it's a huge point of how to use the Jenga products in apps where you may have seen being used more often in order to be more inclusive to the world. So similar things they get defined in your marketing. Images, you can remember images like this I mean, on the website, everyone will use these type of images on their website. Call it a lack of proper stuff for awareness but there was a time when everybody looked like this. Products have kind of moved on from there. We have started defining our images to be more inclusive, candid, diverse, you might have seen lots of products. They have clear definition what kind of images should go in their product. And there are more technical things you can define and present them like what exactly should be there. What reservation should be used and things like that. We have created values in ways that powers can have. You can immediately feed to the user that you are the target you are. Similar illustrations you can define your illustration size, specifications in your design system. This is an example of illustrations done for drop-off. It's completely musical and fantastical in step. They are really convinced about drop-off. So also trying to look like 70 years ago is not it. What kind of information should be used? Just take a step aside and ask a question. We are designers and other designers. Most of you are content designers. Why do we need to talk about content? When content is someone else's job someone in the company who doesn't work with content I would say no because as creators of digital products content is the best way best content is the best way to the users. That's what our products are for to serve some sort of content to the users. Secondly, when you work on content with other people in the company say someone from HR or marketing or from digital it breaks down the ecosystem it's like all the technical people are talking to each other but our users are completely different. They don't share the same background. They don't share the same space. When you work with cross-functional teams you have great that people can work out which is why I think content is one thing where everyone in your company should follow the company and work together. Anthrography Anthrography systems like selection of ideas or a scale the rhythm that's very important for any kind of product because a lot of them or apps is next to be there. In other words, again we have another product that conveys the values of your brand to the users. In your brand system you don't include your values but also specify the color combinations you can also specifically work for accessibility for people with different vision activities who don't have perfect vision and that a lot of us here are we don't realize we have another brand. So accessibility is also very important thing that should be defined idea concept in your design systems. For example from IBM's Power Design System they will take a color and kind of combination which enhances text and keeps text legitimate all the way. During structure your product can choose to use a grid with multiple columns or anything or you can just do a grid with it it's the context of your product or whatever it is, it's one to different sizes. You can use your grid to establish a design or a particular item. So people who are familiar with the material design you might know that they work at a design of four points. So all your elements and components at least have multiple types of four. So if you work with these things you can define. Another example from Power Design you see how the grid responds to the city size changes. Earlier you had 12 columns and it's a rating better. When you move to a smaller screen you change the number of columns and you get better. This is an example of how these things work with the grid of these lines and then all your components change. Components change or component library is something a lot of you might be familiar with. You might know using something like this in your organization. Components library is your category of all the UI elements that go into your product. So you define, you can define all your elements and how they are related to each other how they are formed. It would feel this way how the next generation things like that. You can define that structure of space and their behavior in the sense that how an element works when it is focused or active or something similar. You can also define states of larger entities for example something like empty space for how something would work when a user is using it for the way it works then how do you actually drive the user to take some actions. Those type of states can also be defined in your system. Data visualization if your product uses a lot of data visualization you can create definitions for them. Your charts, graphs and photographs are one of the five charts and how that user denoted by color and what order they work. So to summarize, your design system is made of your four principles your definition and declaration of about content, grid and structure typography colors your component library data visualization and rules for that. You can even add things like icons if your product is very dependent on animations you can create rules for motion design as well. So basically motion design is also a part of the design system. So going back to how I started the product why do we need design system? One thing I mentioned was from animation we came to the media department say you don't have that problem your product probably runs very smooth we don't have fights between designers and others after fighting them and really we still need a design system. So that's the case I am trying to create as I mentioned before communication is very important between different team members not only designers and devs but once you have done something that is going through the testers you testers understand what you are trying to create and I think all of these are created that's your true style that is something past the testing So when you create the design system you are essentially creating a shared language between all your different fields all your different departments which means that when I a designer mention something you know exactly what I am talking about the testers are exactly what we are talking about and you can extend that to the customer to the end user so they know what we are talking about when you create a design system and this type of shared language as devs you will be sure that there will be surprises you won't get a new screen between buttons all of different shape you know that there is something that already know about this product and the new work is going to be based on that these type of constraints make lives very easy when you know what kind of large tool you are getting things from your work is where it becomes very easy and kind of heavy so if you can example of how the shared language works this is something from a product called intercom some of you might have heard of you use this product as a jackpot you can create different designs so in their definition they use a name they use a place for a feature which then translates to their sketch file so from definition to design they have component in code for the same which I am not finishing of the project yet so they have the same name they have component library and then when a user searches for something on the website they use the same language users are also searching for colonization so from start to finish everything is using the same language their work effectively is same which means you have happy designers, gestures and managers good vibes and happy scalability when you have a shared resource a pool of resources as part of design system it is important for a product to go from idea to production you can create biotech start creating different components based on the rules you have already set and start creating scenes very quickly which means that from having an idea for a feature or something this is a review of your research and you have proper structure or flow in mind so from having from that moment to getting to a production person of that feature the turnaround time is very low and the turnaround time is the money to years of your production because it means you are saving a lot of money you are saving lots of money from idea to production knowledge sharing and consistency now because you have documentation it becomes very easy to share the knowledge with other team members between team members designers to designers designers to help on the knowledge sharing it also means that there is a transparency in the output who are working on multiple models you can be sure that the result is going to be the same because it is based on the same source of proof it allows for more functional teams to see the rational behind design design is a lot of magic and you have no idea how your designers come up with the curve they do but you are just supposed to take your developers and you are fine have you ever been in a situation where your manager uses to tell you why do you need certain choices why do you need choices like that but you are just supposed to work on that so what I have seen from a lot of teams that their designers they seem to think like designers some sort of black box in which many of these have because there is no transparency as designers we have to be able to not be very transparent and how we come up with certain solutions and how we build certain solutions when we create a design system can we document that rational and that logic it makes very easy to understand what a black box would mean it looks like something that can be easy to learn it is not an art it is a model that can be learned it is very easy for new team members if you are a senior team member in your team whether a designer or developer do you have a new journey coming up to you and asking about questions about why something is like that so no one has any user coming up to them asking questions at least it has happened with new designers come and ask questions why something is like that how do they create something etc when you have a design system when you have documented your principles and rational behavior the new team members can really see for those things and they become productive very quickly their network time to become productive reduces a lot which means you have very happy new team members they know what exactly how they are doing it response to external changes so based on an article by company for information architects there are something 290 years devices in the market which means a huge spectrum of device series sizes we are never going to be able to build anything design data and test anything about this action right there are and this is going to be much fun think about other things there are laptops families we have glasses TV, advertisement screens the streaming world is like a multi world it's larger than modern streaming world so what you can do is instead of designing in development world everything you can set rules as to how your system, how your product responds to streaming size changes so here is an example from one of your design ideas something that is a tooltip or a handkerchief they have defined it as a bottom sheet in that model like this you don't have to teach everybody you have created your conference at a conference you have defined how it's supposed to be built when streaming size changes device to device you are in a better reception because now you have shared missiles you have everything documented multiple tools can start working on different models, different features at the same time and the sharing is that you have to work on a shared meaning of the product you have one team working on one feature the other team can take out a different feature and their work will be consistent together people can work how many people here know what imposters environments and they find it for you and then ask again so imposters would not believe that you are able to do something but you cannot actually believe that you are a good idea whether it's development or design now how many people feel this on environment like you so when you are not able to actually believe that you are good at doing what you are doing often it is not because network hundreds I mean 22,000 network hundreds it is also because when you take certain decisions you are taking them based on internalized processes and resolution and you are not externally documented your national some of the decisions caused by medical use so you start feeling that you are not better than you were 6 months ago you are not able to see it when you document something when you write it down when you write down your national step by step process behind your decisions you are able to see that there was something it has to be a process when you start being better and completely be a character of evidence of one person which is me I would recommend you to try this documentally if possible when you start feeling much better than what you are doing you feel good just to summarize these are a few benefits that have caused many changes from the creative design it improves the communication between different teams it makes for happy team members unlike I would rather guarantee that it will improve your relationship with your designer it makes knowledge very easy and makes it very easy for the beauty person to learn something about the product you can define your responsiveness of your product you can design your product and it can give your investors the power so picture is not all over it is not as it when you start you learn about design system today tomorrow or the day morning you will start creating and using it one of the biggest challenge for implementing design system is that it takes time to create design system and then maintain it because it is a divine document we are going to make changes based on implementation and on research on data on how people are using your features we are going to have to go back and make changes to your design system it takes time it takes people's power to do it which our companies are not very interested in investing in it talk is on buying for a manager a lot of clients, managers and top management would rather spend time, money and energy on developing new features than something like design system may not give you any immediately to manage it a lot of the promises are future metrics like ok you can scale better your product will be more coherent your product will be much better but training that for 2-2 features that can go on next week for the management that is getting hard buying to get so when we take the top management to the U.S. their time and energy in U.S. is sort of hard lack of tools so very recently there have been recent tools for designers to make design system so normally the way designers would work is they would make two copies of the same resources so the shop was sketched make changes at the end of their work they would collide with like what tools for designers that has changed now a lot because most of the design tools now support design systems and libraries are the ones here is an example of a design system and a company for design systems you saw more examples of design systems here also this is a specific point because the audience the design system was their designers it's a little more specific in terms of design of specs and a lot of times the spec part is automated so any designer doesn't have to create it from scratch here is a very different example of using design system for TV there is a company which has created a product called which different financial institutes can buy cable and convert it into their own product so here is one thing this is the main theme for our employees is the design system that we created then we had to make certain changes to make a different product we simply change some components or some details in the design system like typography others and whatever and another product is design able to be different it's not entirely different but there are references so they can be sold to different companies so side by side these are based on the same things with changes in the design system which means cleaning is very easy once you have defined something the cleaning becomes very easy which is a huge asset to service these companies for your product based product if you can change certain things and create a new product there are examples of design systems of their sales codes change them, Shopify IBM Google is the one who started this all so Google's recognition has which you can study to kind of start on your own and see how they contextualize everything in terms of their own product it has become so popular that now there is a gap when something has a gap it has arrived so the question I want to leave you with is how can you or your organization use design systems how can you go and ask your designers to kind of take this concept make it so that you use the context of what you are making and come up with their national their decisions in a way so that it makes it easy for you you are the for any design content there are the very first customers it goes to users afterwards you are the first people who get to see your design and build something based on it what I would request you to do is go and think how these concepts apply to your product how can you ask your designers to use them that's the end of my talk if you have any questions I can I'll ask them in Twitter or my email address or outside thank you very much we have a next speaker we are going to talk about using we have we are going to talk about this and we are going to talk about this again what is this all about we sit together and they literally measure the complex and values are they color, colors and what what how do you do it this way how many of you get this this is a sketch design of a we are talking about heading so there are actually two different types of heading that is the section data and concept is four things what is inside the designs and there is one more kind of which is partner and feedback feedback feedback feedback and this is how we are going to see different magic in your designs one fine morning and it says let's change the section data and we do it that is simple beautifully, something has changed so they are fixing one thing and CSS is also your section data for the design and that is why it is broken that is why this is what we call it as design data what happens visually is that with the companies they have some great people with great CSS and there is some great people with great JavaScript and there are some things that are a little bit white but when you are a smaller team there are more chance for you now that that is what we have in our he says 45 or 80 goals without breaking anything is difficult to answer in that kind of situation and that is the question is to be optimized as before so that is what we are going to do we should not break other things when you are doing something last year we had an event we should take a new goal obviously we are going to react react is so cool we just declare a new component basically we have a lot of CSS and CSS and we have a lot of CSS and CSS and we can see all the files in our CSS page so what does this mean what do you think we can start and be able to import styles from styles of arrays and there is this style from the equivalent cases I don't know if you can see if it is a static case so if you know a static case CSS can repeat it so they have a new way of following a function which is actually a function defined from a style we would have to label that that is normal so you want basically you want to label it as a function and I don't label it because it is not much static if you know how to be static normally after the visit any of the libraries you might find this form attached size but this is very similar to the normal CSS that any government can understand that is very similar so if you have your own CSS for a CSS site if you have your own CSS for a CSS file then you can just convert it into a standard component so the minus part is this style is actually injected inside of the head section so you have a head section for this style is injected into the head section and there is a random CSS class which is generated and as a render it won't flash because you won't find two classes so you are not out of your code scope so this is where your code scope is all in this once the component is loaded once the component is converted to string it just adds the random class to the header this is here this is for dynamic so this is how do we do that this is one size that's one size initially it was 70 pixels now it takes new expect that's a path for AG size so that's a AG size that's what you expect and other than that and other than that we are expecting some AG size that's what we are expecting so we are expecting if it goes to 18.1 and we have written jobs for string.conc of AG size and this is how it works this is how it works all these 10 components they have string support so the string it comes automatically so the string comes with top you don't have to say anything and so you have a string object where the report size is defined so you can imagine this you can imagine team as a project which has defined as one size that your company needs so like this we have a design system where you are talking about design system and that's how we are going to do that so let's see how do we take this in the next I go there for the NFO concept render so we get a form size and then what I make any AG size as I have cropped so let's go AG size let's see how do we add AG size so if we do AG size it will be empty then it shows bigger right it is bigger you have to fill it in you have to make it bigger so we have a project so we are going to have a thumbnail like this we have buttons table we have three we have three you can have your custom key you can change it so we can use this one second thing is let's say we shift it to this red blue one when you are writing for buttons you are not worried about what is the finished case it doesn't support to the second so let me tell you what you need that might these cases when you want to slide for detail or something like that then you can use to go to the second but you don't make sure you don't produce it because you are going out on the blue one so one point I won't come to change so I am finding out when it comes up and says this is the project and we have two other kind of images for this one so you got the title new designs by the way we have templates to reuse the components but they can have a different shape but let's say but other things so we are going to use this one because we have some other stuff to do we don't want to do this thing so we are going to use this one so this is what we have this is the project so we are like waiting for the project we have something to use for the project we can't focus here we know it is a problem we can't work with the sources because it is a problem we can't handle this we can't do that we can't use it we can't ask everyone for a reference and we have to recognize if we are looking for some work we have actually looking for some work so we are like working on and doing research and we are looking at some work and this is one of the policies that we are going to fix we are still at the end projects they need to grow over time and in this case some projects can be used elsewhere and some projects for example just being a generic testing tool here work too many packages one of them is just snapshot that is not used in other projects this is like this is what we need this is what we want we have some projects that is important and somewhere in the other way because we are going to be done here we are going to secure dependency management and it is maintained in the case we are going to run it what is Yankovsky's overall it says to organize your projects you can reuse them on packages not using different folders with their dependencies complicated let's see if I make an error I will tell you yes with the purpose of react, apple, preview we will find Yankovsky's system let's see the second thing from the second one is you have to add a flag workspace is experimental here they do say they are experimental because they want to make a data from the community which is pretty simple so this command is experimental to prove it to you because Yankovsky's project was originally changed from the workspace back in the semester saying that anything inside the back end of the folder is now on the workspace so 3D task is independent on the workspace so it has its own dependency really about that this is what it says and if I am inside the back end the second thing is private so you don't want to make the main app as a reasonable thing because you have some blue code some business specific code so you don't want to from this type of code use it in the rest so you don't want to make private too so private too and back end is smart stuff you can have your own expressions you can have your own expressions here they are considered as more reliable they have their own back end they have their own dependencies and we have a back end version that's what we are seeing the changes so you might be wondering where is the gold module's folder being created so where is the gold part so we just push it to the top it's not like the usual back end so it makes sense you don't want to have when people talk about React to be inside the folder and that's why it is smart and there is one more thing only the local and the root dependencies differ in size so we find local local folder associated with that fact if only when the version number varies we will find that more wordings coming to the in-game result and this is all the politics and thoughts if you have a demo have created style so let's go and see style so style has index or shares and package or just it has its own dependencies for its title and it has its own version and then there is this endpoint which is index or shares so if you see index or shares it is pointing the label thing so if you go to label so we have some sizes we find local that so we have sizes we find people at medium and large this is 46 so we are doing other let's see what we will be using so inside our cart purchase we have my label let's look at the import I want you to focus on this if you are importing my label from type it is not an idea you can see we are installing it from the event it is type, slash index or shares or whatever so just switch type we don't know who has put my label let's try and make it let's not give anything in the city it does not matter what you have done you can just play around and use type of label so we use type of label see this is the way it is we are going to make your cart easier for sharing so you can it gets output factor so this is what I like the most we are not writing import the label from you know it gives you flexibility to go through your purchase from one corner to another this is a method concept called handoff I am going to deal with handoff if you do handoffs in the company just two people so let me try to explain what handoffs are your designer gets the requirement and everything and then you go into high weights and you come back with these fancy designs this is what you are going to make and then the developers and look at that design and they say I am decent working here and then come back and this is the product and then the QA does the same does that sound familiar so this is kind of the example of what your designer comes back with like nice design screens with like the layout perfectly they use nice open colors that's what I am studying right now and the developer has access to it and how many pixels is there which screen comes after which screen this looks pretty but what do I do so and of course I have to admit that our tools have come in our way designers are developers and they hover over it and tell you this button is 40 pixels or 12 pixels this thing like in this way they can comment on the thing and say these things and then collaboration but these tools revolve around the same idea of course it's still revolving on the same thing and it's not like enough company what's the solution so we try to come up with a solution into other elements with good stuff and basically made every upside in the world in the same way so like any self-respecting content game we try to create a good stuff and that's what we do so we have these buttons we have one of these states of the buttons we have the print stage for the print element we have icons and I have the top ones and this is kind of what it looks like we have an icon and a text this is how you do it if you go to the documentation to copy the class you say this is the button I am using an icon which for some reason is italics even though it's not the direct app I think I used to introduce it so you put an icon and you say I want a button icon and this is the icon icon and then it says access to the icon now the designers do a user research which is for them for the last five people and all of them are new and they say we're going to move icons to the right now so that's more accessible and then they say just what you should do so they change the size that doesn't really solve the problem because every user's icon you also have to go and switch it the icon cannot be copied you have to change it and the icon has to come second and the text has to come fourth so it's kind of it's very close to what what it's doing but it doesn't really do the job so this is what's known as the media abstract it applies to abstract all of the design details that are required it does a very large job and most of the implementation details will be copied to the user it's a nice surprise we have components on the right we have components we have components and so instead of this we can say things like this we can say import a button from the library and then it's important I can package and after this when they ask five people and they change it you don't really have to care because the implementation media doesn't really the user of this thing doesn't really know what the implementation media is this is not a media abstraction we have components on the right abstraction called design in depth and this is given to guys for this fancy looking for a design system which as we talked about I'm not going to explain about this import other than this one definition that I didn't really like so this is guys I think most of the design system is here and if the design system follows a set of shared and integrated components the key was the overall design of the product so when you look at Airbnb's you know it's Airbnb they have a certain style when you see a Facebook like button on the bottom you know it's Facebook you don't have to like Facebook under it it's the design of the code and so it has one of these things that we have already talked about and don't get me wrong components are still a part of it that's the kind of part of Airbnb's technical stuff so to build our designs is to believe these ingredients first of all we need tokens tokens are a fancy designer way of thinking so this is kind of how you can use mediators in the company so you have spacing so instead of using any of the value of spacing you want it's a good idea to kind of lay them out in the component so for example here it's 8 and then you have it's not small it's just 2 it's like 8 pixels and it's small it's 16 pixels and I rather than make it because it's extra extra larger it's 8 into 7 the name is much less over here but much more is common now so when you ask your designer what should be the larger you're not saying 32 pixels you're not saying 17 pixels that's like if you're communicating the other things are you can do the same with colors so you start with a base color for example let's talk about gray you have one gray color and then you have five shades over there you can imagine if you change the flash shades, the designs you can use the 16 shades for the classic but we can't find that five shades so we do this with every color we say this is a base color this is a dark color and we say I'm going to use the destructive color and you get a set of colors new so we don't even talk about which shade of gray, dark color you're just saying I'm going to use the destructive color so the good part about creating the disaster is that you can directly use them in the act so this is the CSS in jrshit I like to use it as well but what we also do with this is you can use it in an annual project you also export in a SAS video and XML files for our annual project so you can actually just take this and export it for everyone even if they aren't using the app components in a new k100 code I keep using the same color so that's an opportunity the next part of this is the big part which is complimented and this is like a long or very smart the important part when you're creating components for a design system it's important to prioritize API stability over any specific communication detail so the game and translation for this is it should do good when you can use it it doesn't really do whatever you want so and this is what we spend a lot of time so for example this is our API for an icon you say icon the icon name is analytics and the size is 20 then you say button I want a primary button with an icon of pop so this is kind of in that when you're designing a video can we have a button here the conversation is like can we have a primary button here and this is kind of what you're also typing so the more your code looks like the conversations are the easier your character similarly which is what it does this code has a font change on press etc because you have to support multiple devices to comment on how this works so you say on target and then you can pass it a couple of weird part is when you're working with a compound component so compound components are this concept where you can nest components inside of a component so because we have components we can actually just attach things inside of it for example when you create your tabs you can say the pair of your tabs and then inside of it you can say tabs or tabs the syntax looks weird but the good part of this is you only import tabs once you don't have to say import tab in a tab there's more tabs similarly you can create a font you don't have to say import font you just import font and then nest of the thing is not a student so that's why we didn't order this when you say font or text import you don't actually just create a text in here you can do a dapper around the text import and then we also must label this on a nice thing and come to the examples for this kind of how the a pair looks like thing all the time everything is weird so before I did the a pair should look nice because it should be intuitive internally you can do whatever you want to show you this is like my favorite comment how many people dare to write documentation on their own that's more than I expected the font part of art creating a lot of design systems documentation is the part if I create a part that I don't document you can sell us a stack over and find that out if I don't document it it literally doesn't exist for anyone documentation is the most poor art it's not documented so these are like nice things when you look inside you can see what you are talking about when you start it so if you want an isolated font please that's how you are going to be able to explain this time really when I think of font we ended up creating a custom mesh for this thing so we call that the nice thing I forgot why this side is here there is a thick line the next important is design decisions are big into this now I am regretting putting this topic in my stack anyway so here is an example when you say you want to create a video you are not saying I want a page 1 page 2 you don't really get to say I want to create a video and the design we get this is the size this is the accessibility when you say actions these are the actions that my editor he said this is my primary action this is my secondary action now what's the other of the primary versus the secondary you don't care that's big into this are they left line, are they right line does the primary come left secondary come left you don't care the designers have spent their time doing research after 5 people and they have big decisions the good part is mainly this isn't you don't really have to care because it changes internally it's in the implementation we get form is kind of my period I spent a lot of time doing this so here is a form which has 3 fields and then it has a primary action and let me just show the code part of the problem so sample page is kind of my period and I am just trying to copy and paste the same code outside and let me just try to go to a field of form and then you have formed our text report which has a tagging table your text data, your switch and then you have actions there are primary actions of this you have to give your own handle which you can write with help these are the nice things that happen the label is left line and it's the line line this this is not something you have to care about all of these are the lines these are design decisions these are the things that are designed to care about so don't care about you shouldn't have to care about so let them do the switch is called fancy guide this is a feature that I really like can you tell me if I keep on the input focus on the input but what happens when I keep on reading and what should happen it should focus on the input no matter how much code I write I always forget that the good part is how to make the system all of these accessibility things are already being made into the system and designers don't have to care about it everything is already accessible the same thing goes for the button it's aligned with these input things and not the left key all of these are things that I honestly don't care about I'm not a form I'm just using the input I want and this is the logic part another nice thing about this is so for example we have this and it comes with this by default label on the left now we have a product which is going with responses which means it's not going to use labels on the left because they won't have space so they don't need people on the top and for that we say label on the top label changes taking copy of this copy of this and paste it in my board and this thing retains to the top so these are the kind of things that you can do because these are design decisions that are abstracted and the funny thing is I know it's a few minutes of talk it's not matter breaking the second thing I'm going to talk about is their design assets should be sent to your component so I have an indicator when a design also starts on the input it goes to the sketch file and it's the new file and the new file is what you have I'm going to go into the design then the point testing process the design assets are not even the same because the design has to stick and sketch them with them again to make it simpler so the idea here is that people have already created nice tools like here we have the app sketch file this one is built from medium that one is known is nicer with web stuff and the only thing to care about is components are simpler than sketch so when you say I want a button from the box that is what the designer also says and sketch has live delivery so they basically do something like insert from customer side button what is possible is it import button from customer side so that kind of thing is a common language cross and overlimes are also the same thing and then as long as the source of the code and it generates a sketch file you make sure that things are already the same and when a designer wants to start a new project they basically just complete the sketch generally and give it to you all right so this is the result for learning on this project for 6 months first of all always prefer consistency over flexibility so for us it's like very easy to just add a new no add an F condition and give it but it's very easy to ask do we really need this extra variation of the same component and the thing is this is a question that is very difficult to ask but most of the time the variation exists not because it doesn't exist because nobody documented it so people did not know that this is a great new one now you just have to this is kind of how it was going to look so I'll just try to go for consistency the second thing is build abstractions but shift all the middle parts so I showed you page header I showed you form and how the layout things are going to work now the use case I think recently was even wanted like a bigger scale form they wanted like a delete button and then they wanted to give you like water and then if you're going to delete this and say are you sure you want to delete it and you say ok fine so that's the kind of thing that you want and all forms of support are very custom in their case so you also look for the when you call it the word block when you have multiple things that rely on the system it's very easy for a team to say this is not in the system so they block you get all the abstractions but you also shift all the middle parts now they can use the form label they can use the next input they can use the border conventions without this property and then they do the same and the good part is if they make it you can always bring it back to the system and promote it as a library component third thing is adoption is you want to create a model so you can create other fancy components that you want but if it's not good to use if it doesn't work out for your developers then you just bring in things for yourself there's no nerd right in doing things that you're using so optimize for usage, optimize for what are actual use cases are what are your developers have interesting example is I really wanted to use portals but I think they're very good so I went ahead and used portals from the access team but turned out the app that wanted to adopt as a system is the access team so you have to bring in all the access teams so you should upgrade but that's just adding more coordinates to the user so what we did is which portals would use an interface which adds a little bit to the site but they could use it in the application so it's not for port, UT and all those things so the last thing I wanted to talk about which is I hope that for some time is that design systems are cool we should use them but I don't know if this is something you want to find out, how do you go and what did they want to say we need to do that system this is like the one thing you need to do to people doing it and the students in this slide are against so the first thing you need to do is show people what's wrong so when you talk about design system you say design systems are beautiful but most people don't really know that under the whole thing they might not know they might not have that visibility of what's wrong so for example a product has to be happy with a product until we show that three different drop-down things are all different if this is what you want, if this is what is good then you're like yeah that's not good you should fix this and then we show this what you want and this is what you want and when did we make this so people might not know what's wrong and this has to do this and then as a designer actually he went through each and every art that we had and he got created and he went through all the things that we did and then designer then said this is our balance sheet and everyone was like oh we thought that a designer focused on creating an art here so let's fix it so show people what's wrong speak their language if you go to the CEO and say he was going to be in school sounds like you should fix this which is our mandate so you have to do this speak to their language so when you talk to business folks they say things like in current day most of the developers spend 40% time creating presentation content with 60% time creating logic this 40% time and view our model it's a pretty good view we can actually use this quote like if we come working that does a 40 and then everyone else does a half view this product and the same money what nothing is often in our case is those 40% people are going to go differently when you start the new product either way business things are about money so if you go to business folks product managers like CEO then you say usability and nerd stuff and now I start the VR so you don't really care it's about their language it's hard to get good support from the developer so before you do any of these things go to your fellow developers and talk to them about usability they care about that stuff they get excited about it the easiest way is to say if we can't do this we'll be hard developers and then people are like we also have good developers we can't find something so then we all have the same so you build something from the developer this is the new hot thing this is the way you go and you have the support from the development team and then when you start speaking to high-laws they go back to their team and like one day they're doing like this you give the fucking part to design system like yeah I believe this I don't think there's a problem yes we need designers to come to this thing so then it's going to be become like a then it's going to be become like a consensus thing and then your management team will be probably business and yeah I guess that's all the points I have good so I'm Siddharth Dehran Pillai this is the possible support it's all open source so you should look at the API you should look at the board design system processing place you're not saying what do I do with my designers so to that we should do something about spacing so does that mean now that my designer has to think in those terms how does it go how do you communicate with my design team they're on board and we are we are starting to factor in so we are proposing you were building on this what language as to the language challenge for your channel communication or design vocabulary between front end and design papers sir I think this is the right kind of but we are going to all of the design concepts for example we don't call it reggae we call it stokal and spacing again design concept where you want to create more consistent vertical alignment and all of these are more like design concepts instead of we let our designers try to standardize them for this we should come out of the conversation against headwinds and designers we can all be part of the decision-making process if we consider the design team to come up with this I think it sounds to me like this is exactly the concept behind the style of this yes I'm not really listening to a headwinds and designers there is a theme for that if you are testing it's a part of design system and if it is then to take the slides that follow consistency rather than flexibility then what will we do in that case? will we be testing without following consistency? I think the rule about that finding consistency over headwind if you pick a design A or B to do it across the yard it doesn't really stop you from trying to keep your experiment and if you find a B also in one case that's if you are you should go in all of the cases and if you are planning on a situation where A works in one case and B works in the other case then there are people things to look at what they usually do is they say this is the more modern case and can be used through the other case for this one the other part can be both in the design system the answer is yes this should be in the design system but the experiment does not necessarily need to be in the design system code based on practices each app can have a different experiment both the variation should follow design criteria they should come out of the system they shouldn't have a creative solution and say this is good you told about promoting the simple form does this enable to decide whether to appreciate yeah sure because your your form action is just like an object attached to form the platform actually we say it's pretty well and but the when you say I would say the intention of coming together is that if you are creating a form more often than not all your form things will be used together right if not in each form you'll have one form that you will follow that's right it's a super wonderful case you can perform yeah that's what I'm thinking here that you can see the difference but I don't think you will talk the time that you need and you want to share it what's your project you can inquire who you are and the what is your project but will you have a solution you are both using it and there is no idea if you want to make it you have to make it accomplished and if you are making changes yeah they need to be understood there will be others to see and the other question that you are addressing was what is the future like if future like that is never done but so you'll never know right that's what Bob shows you'll never know that some part of project will be used to make another project you'll never know that that piece of work will be used for some of this all the life that you have if you ask then you can start with the idea let's see they just they had some problems and they had this project which was going on in their head and then they thought yeah this is a new level now let's ship it so that's how the project will be built then when you see it it's for that the team that the design system one doesn't become like a developer and two doesn't seem to be like a dictator of things right and I think both this way because the design is built with time then I think what design system will be used that's how where anyone can ask if they have a question that they're designing nationally their answer should be not just national if possible they will some sort of reason and if they can do it then yeah I think there can be a method instead of the method so it's mostly a question about what kind of development I think it's a more organizational thing how to structure your teams to maintain and if you want to be a ownership of a creative and creative design system but not the involvement that the implementation is under part of the project because they might be made as ideal scenario but it needs to change their implementation so that means you need people from or future functions to ever say design is the kind of just like India but it's talking with the same base I don't want to make this my I think that in order to act as a decision I'm just saying this is the art of creative and creative so I want to have a monorail with server and the client so do you recommend Yarnspaces for that because there's been nothing shared between those two core bases it needs to be subred so if you look to the slides it had so if you go to India it will go one way or the other and it will go this way which you if you just begin your building the plan say the situations like this and understand that there's a lot more problems than what we have but we can actually get a real good experience but you also must try to it's really complex so how do you really understand the design of the writing whatever you do this is not your design it's working between the client and part of the communication yeah I think other products between different others it's like the client can either have his time or money or have the quality of the solution so a lot of times it is the middle ground the only reason why it works is because it is there to do the research with the users and think of the users' perspectives but they should be able to depend their design process and then solution and then you can also see the way because it will give you a timeline and then you can come up with an alternative solution solution for that if you want to push something out you can just look at it the other is that this has become quite less and then also starting with the same every time complex interaction so they end up getting less creative emptiness because they are also going to make my copy because other designs are hard then the complex interaction doesn't it stop the design from actually being more creative because I would say that's an embedded side effect which is that we have to work with what we already have so even if you can come up with a one-tier method for it but doesn't last the rest of your time it's far more than right so the idea is if you have city cross event because you don't have the most time and then try to all the time that you see you cannot be created you have to use that time to see through those tiny city blocks and the existence is not only stable so of course it adds capacity which first of all it has to be that's why we have this kind of design and design is supposed to work within this understanding but the good design is to kind of actually reduce that slowly, repeatedly and we can't actually do it so we have to work also so yeah so if the tool is internal don't worry about it but we usually we come up with numbers and then kind of tell the designer that we have to do this and then we say try to take it so that they have a vision what we have done is we let developers estimate something first because something you can design directly that's in your code page it might take a developer to your code page to activate your time changes exponentially but then it needs a certain page like Google's it needs so much time so just let the developer deal in terms of the estimations and what can go into it and then design let's start with last how what do you guys suggest speaker so the graph is about you don't need your standard code to be completely in real or start from scratch to build products in real so the thing that our company is that we have a world of code base because there was a Korean that year and it was really great for years so it's very easy but the kind of class I think that happens in the development is that we have a secure file which comes out of it using some mother's like girl or something and then it's attached to the HTML it's the product so we have 4,000 customers so it's pretty huge on scale so the thing that we are trying to do at our company is that we are trying to migrate things to real so for this we don't have to jump everything that has probably been done and now we are experimenting new because there are new components built for real and then so attaching them to the existing application so to show you how we are doing it so real components are a separate code base we are actually using the other codes to manage things and then right now we are using JAN to output a single file so this file is a complete real code which we will attach to the initial HTML or the main application and then the option is what it looks like so it is a white space now but it will be ingrained by this so we will have we are getting this widget on that side which will be attached to the main application so right now we are using JAN but I suggest you start up the webpack because we will have all the features like the design course which Praveen will explain your view on it so that is basically my talk the summary is that you don't need a complete function to be there and you can start up with small things and react and actually deploy them and then we will keep it now and it will be back to where it was sweet on his mind I have this cool smart legend that's what I say first of all the presentation is not at all we need to react or anything this is my I wanted to give a talk on it so the trick here you are seeing is a smart lamp which you can control over some alpha so this is the lamp but what's new with it so it is connected to the alpha so you can control any application you can change any color you want you can select any color and set it to the lamp as you can see it is currently rainbow height so there are various patterns to it you can select any pattern you want another cool thing about this is it is 4DA update 4DA is over the lamp so you can update it over the lamp when I want to update the firmware of the chip I can update it and the next time you will restart it is completely portable as you can see this is completely portable so why is that they might be this standard outside because just for example what hardware I use even mini this small chip that you can see in my hand I have used this this is the Wi-Fi chip which can connect to your Wi-Fi and then you can communicate to the board other than that to make it portable I have used LiPo battery voltage booster so that it makes it portable and then for color I have used NinoMixer RGB electricity what about the software so I have for the V-Mas board first I have tried it in MicroPython and then I have coded it in Arduino which is the business code you can see here and this side you can see the dashboard using which you can control this lamp currently this is pure HTML CSS in Java but in future I am thinking of using React Universal has anyone heard of React Universal it is a framework where actually you can write once and run anywhere and your application you can create React application and you can create an extra application using React Universal so this is the video the wave pattern so now you can see the color is fading lamp which is not being made of any kind of lamp you can choose any color you want if you want to slow down the fading effect it can increase the time I am looking for early adopters for this lamp who can use it and give you feedbacks so if any one of you are interested please agree next question is why accept it there is a function that might get out there and then it looks the thing is that you probably don't know about the errors in your websites so you need to find that if you are a new developer then you are going to use that as well but I am not sure you guys must have noticed that React is pretty popular it has been created many such people give talks and processes and talk about it so it is pretty popular because of that but it is not useless React is pretty powerful the idea of React is great but I don't like React the library itself it is broken in my opinion what the KDG said to minify you can start your app it is not acceptable so as we usually do programmers talk about creating new developers so that is what I did I have created this window that really costs $25 unfortunately this is not my laptop otherwise I would have to show this to you working but what it does all you have to do is I was able to post a snapshot of it it was able to create React so once you complete it does this snapshot and what it does this is the other side so what it does then it starts that server so it starts an experience and then a conscious property which is like this girl a conscious property and it starts crawling your website locally on your machine and it figures out all of the HTML which is inside your app if you are using React you don't obviously expect that and it crawls to your which is using your local products after this it constructs the generated HTML of your app after everything has been rendered and it takes a snapshot of this and it does this to your build directly and this is just one image it contains a whole skew of HTML depending on how complex your app is then on top of that it takes the CSS that you have got in your page and it runs that through a ASC generator so the CSS is then broken up into an ASC and then this ASC is passed to figure out which is the minimum amount of CSS required to get your page up in front of the ASC then the CSS is taken it's minified and dumped into a stack pack in your page the original CSS file is not required anymore in this point and it's thrown away similarly your JavaScript file simply is not required because your page is already there so your JavaScript file is thrown away your fonts are preloaded your JavaScript and your CSS are also preloaded but they are put into a page in such a fashion that does not block your page because you don't need anything for your initial render and so now this brings down the page load down to less than 10 kb usually depending on what your page weight is all your images all your CSS, all your fonts all your fetches all your size sheets, all of your everything all your scripts everything is just removed from the process of rendering your page and you only get one HTML file in one dot and that's all that you need for rendering your app so that's all thank you my next fashion is very pretty And the thing was, it was nothing. You can use this kind of function to generate your thought value for the object in the stack, and it should pass the new program of your object. It will take your exchange as an option, and your thought value. You check it out. It's there. It's not the app management. So that means I get to work independently and travel around conferences. So in the future of the app structure, we didn't talk about the future of the app, and probably we went over to the app portal for a minute. I'll tell you how I'm using it right now. Right now, we are testing the react-based second-wave application, but the future development should not stop, and it's not like the other stuff. Letting go of the entire thing that there has been in the years, years and years, and letting go of everything and starting from scratch to react. What we are doing is, we are using portals to attack the low-hacking crew, like maybe there is a button that triggers the portal. So that's the best thing to do for a portal. Your button can stay anywhere in your DOM that is rendered by trace. So let's say your button is rendered by the portal, and the portal is where you are starting to integrate the app. Here is a layout component. Here is a little layout component. Let's see what we have here. Whatever you can see. So basically, it's very simple. And then all you have to do is select a container, and enter my button. And this button can be a click-handler which opens the portal. That button can be react, but to attack legacy applications, it can start with a click-handler to go back to the portal. On the menu, what is it? So does this happen in your team? Are men given more technical tasks by the departments spending late nights at work? Are men taking bigger risks, like being with a task, taking a risk, moving fast, doing things right on the side? This one is just to find out if people don't like to talk about it, but in your team are many people too. Another aspect of the big-time story is you are talking about... Yeah, and this is true in your case. You are the biggest fan. If you think that, you know what I mean? I think this is the end of the story. And the big-time story is, you know what I mean? Everyone is done on the same standard, and the work should stay the same. The work should basically depend on what you do. So, it's an end to it too. The side part of the work, the same standard is the idea of working with kind of a big model. It's a big model. If men are given more technical tasks, it requires we have this convention, we have this weird bias in our industry, that women are not allowed to adapt, and not only do they have tasks, they have developers on the one hand, I'm sorry, we need developers on the one hand, into the north stuff. If you think you might require men to explain things like to the office, I'm sorry if you don't mind. I've seen enough countries, women, I know we should send them, hopefully, the parents are very fond of those things, easier for them. If men are given this, it's because we kind of have higher standards for doing things, like for women, women are not given the same tasks, right? We have like a bias, we just, we assume that the guy's work is more technical, all of these reasons kind of lead to this perspective. So, I'm sorry if you're looking for the bias, it's just how it is. If you're thinking, why am I getting involved in this today, I don't think this happens. You're in the water, right? This water now seems to be kind of, I don't know what this is because it's been on my mind for a long time, he kind of hit me on the other side. So the water is like, there are two fish swimming in water, and from the other side to the end of fish, and the end of fish, like everyone in the water goes into the fish. The end of fish says, it's all the water, and they're like, what is the water? It's like, this is the state, so fishes don't really know what water is all they know. They can't see the water on the side. That's kind of what we're in, this is the state. You don't really realize unless somebody shows it to you, ask if they're making this, they already know if it's not used to them. So if you ask them, they let you know about all the things they're doing. That's how they're facing it. That was awesome. I'm actually a threat of this as well. I didn't realize this until I started when I was 15 months. Then I realized that the system is so wide-eyed, and I haven't only done this by myself. So I don't like talking about this for a few reasons. One, it's kind of unbumped because it's hard to talk about it. I don't like talking about unbumped because it's hard to talk about it. I don't like talking about unbumped because it's a system. The other thing is I'm just going to say that I think it's quite very important to kind of question if you're not having your entire day of work. In the end, please don't comment. So what can you do? When you have to present something as a team, a team with something give the women in your team the chance to talk about it. Even if it doesn't matter who did this or what or who you think did this or what, give them a chance. The system is biased. Second is when a woman can do something cool and you notice it, like a woman actually did something cool or a manager did something cool. The manager has the same bias, right? You need to kind of take those guys. Last of all, second last of all try to create an inclusive workspace where women can contribute equally, right? If all of your departments have an element in mind it should be a task to kind of pass a writing order. Because everyone should do the same kind of thing. You will think in the morning you have to do some kind of thing. But above all, be aware of the difficulties, right? Every time you have this moment think about it, like for example if you are the sleeper today most of them will be, right? We don't have a lot of days there and we don't have. We still don't have the feedback, right? And it's kind of weird. The system is biased. So take a look at how it's biased in the first step. Kind of figure out where does the system come from. And then every time you do something at the workplace you realize something point it out and talk to your people about it, talk to guys, talk to the girls, right? The girls actually like why are girls not talking about the stuff they can provide? There are also no water, right? When they enter the workspace initially they might say this is bullshit but soon enough they will realize that this is how it is. We are talking about it. So yeah, be aware of what it is and do what you can. That's the end of the box. I'm taking it seriously. I'm thinking that didn't you try in my opinion? Yeah, I know someone who can make it who can give us programs and make it new for us. So let's follow the page from the stage and we can share this. Yeah, make it development. Yeah, make it. Now the first one will find it very easy because that's what it's looking for. The second one will find it in there. Okay, that's what we're looking for. It doesn't work as well as it was because we struggle for the second group of people who have just shifted because of performance as well as are needed to have. And it has the same design as that so you won't have to have some extra developers who just don't react. Continue to react and the developers can actually prove your react needed to have to. It doesn't give you a video where you feel like it's something inside of that video or landing or it actually wraps the game at first so who could call that a fool just. So but why react needed aren't there any competitors like there's native script now native script follow the festival right because it's new standard and react follow the festival learn what's right there. So this is the difference and what we're interested in is that native script will have a pendulum and react it will have some react. It will have the pendulum right now. So that will be the script for the react. There's one thing because you feel that it will get the extra sound that it has someone who I can ask and it's easier to get that service than 4K is. So is it relaxed I mean I see that the latest version is 0.5 5.4 I mean is it stable should I make one production using reactator so these companies are already doing they're after productions are on reactator and last one I have to look through after reactator my experience will be based on this is how you get started you take your app you go inside a flight folder you take it and you start your server so let's talk about the development process the first thing that you start developing you have to take care of the architecture and how you are going to write your code so the first thing to think about is I check it. Now one of the things that happens is that I am going to use drop tags or I am going to use flow or that's the great thing that you can have among your people I won't be saying anything about that I never do tags because you're going to sign even though method in drop tags you only need to do tag checking for the drops so the problem is that when there's a large list of response you have to write no tag names for them it becomes cumbersome what happens after you come out of pioneer developers I'm not going to write this again and again so let's get away with that let's step back to drop tags I created an online tool where you can paste your list on the left and you get your hypes or drop tags or types of hypes on there so I just automated that myself so the next thing is UI development now when you are developing a UI on the left it's actually easier because you have hard way of life and it gets misconnected so it's better to do UI development in isolation what is isolated UI development so you don't have to worry about your UI app you don't have to say I need a button on point I just have to say a button on point and I just know the requirements that I have to use these drops and you just implement your button on point like that and you can do that and that's easier because we have to test from the whole app if it makes sense and this is how you write the story on story so that is actually how I made a button on point different variations of it running on an emulator you can do it on your app also you can develop it like I have a button on point render different versions of it so this is isolated UI development and the pros of this is that it's de-coupled from your app architecture so if you have separate testing for it so if you change one your test is ready, you can already do that these are the things that will be affected by it and if you have something changed you won't have to worry about it this will change the behavior of this art this will change the behavior of this art because that is just like the library different set of props and products that you want to have and it depends on the user how they are going to use it so easier to manage so that's my new question the build size is very big how do I make it in the size of that lot of things what people do is they create a single build on Android now Android has different attributes and you have to create different builds for different attributes on iOS that's not the case so what you have to do is this is like an image that you use in my app and your game so what the app makes smartly is that some devices might be in my app either in the 2S or in that case some devices might be in the 3S or in that case so you have to put all the versions in your app now when you create a single build you actually pack all the versions of your builds and send it so that's something that we shouldn't do there are various I mean mobile phones like for example when I shifted from there to reactivity development the first thing that I thought was ok move a different version to support it but the problem was there was there was 15, 16 and right versions inside them so it is actually harder than that ok so you have different types of decimations and for that you have to use different image resolution you have to use at least 5 or 6 versions of your build ok so what it does is if it is the size of your app if you are not creating such a build reactivity SPG for this so what it does is reactivity doesn't support reactivity SPG's I mean you have to use this third party of package to use SPG's but the code that you see in the SPG is only compatible on the product ok so it's not compatible for reactivity apps you have to make it compatible this is a pain point actually how do I go to an SPG file make changes that are made to make it work on a reactivity app so on the left is the model SPG code that you see ok on the right actually you have to import those particular elements from reactivity SPG and then use it so you can see that when you import the SPG style you will have to inline them so this is a very tedious task so I will give you a tool that does this automatically so you paste your SPG code on the left and it will give you your reactivity SPG combined in code so you don't have to do it otherwise but the last time that I made was for housing last year and when we shifted what we saw how much can we decrease the size according to the images and if we see them as 40-50% on the size now let's talk about performance now there are people who might have a doubt in their mind that it's still not made it's still not not that easy how near and high to the best performance that I can get 200% but if you write up the weight is supposed to be you will fall right back to 95 to 97% we might not be able to differentiate so the first key idea is how So, what it does is, what it will write inside those blocks will get executed after all the interactions are finished. So, for example, if you are building on a button and there is a ripple effect, the code inside this won't execute until the ripple effect is gone. And the second thing, there is a request animation frame. This is also on the web. So, you already know that whenever the next frame happens, just before that it gets spoiled. Now, for growth in Safari, it gets spoiled just before the next frame. And for next, it gets spoiled just after that. But what I say is, a lot of people think that this is the best way to do everything with this. So, most of that I think is the first one. So, what the problem is, you have to choose between through it or fast. Through it, you have an animation. You want that animation to finish. And then you want to go to the next page. Suppose sometimes it might be that your animation is not on map. It might be that you are lining. That will be a kind of jam. But what happens in request animation frame? You have to wait for the animation to end. Whenever the next frame happens, it pulls the animation. Just before that. So, the second one then, actually faster. The first one is actually through it. Then you are using long lists. So, if you have not heard, there is a technique called rendering. So, when you only render the parts of a component which are actually in the view. And on the left part, there is an animation that does this. And on the native part, there are similar components like section lists, flat lists, that use the virtual language to give the same behavior. So, if you have 1000 elements in a list, you have to use those components rather than just rendering all of them at once. So, what kind of takes care of rendering only the parts that are actually in your view. You are sure when to make mistakes. And you will have to find a way to find them. Finding a mistake is the bigger part. It seems as easy as that. So, this is the 10-minute of a reacted map. So, it only can be shown in the dead grid of the reactor. So, these are the constraints of the different renderings. The second one is the given JS if you want to. So, it will help you to connect your device with the simulator to your room. So, that you can see the actual source code, the JS source code. And the third one is live load and hard load. Then there is probably a second that goes in the way to what the second element on the web does. So, it actually inspects the elements on the load itself. And then there is so far on the web that is similar to the FPS meter that you have on the web. So, it actually shows what the current takes for second form with your app. So, still using the app, most of the times you will be using it as well. And if you use a native developer that is provided by the app, you won't be able to do the debugging of your image file. So, it only shows you the JS code and you won't also be able to do the reacts, the inspect that you will do. If you want to see the cleaning of an element structure, you won't be able to do it. So, you can use the reacted developer for that. And that does that part. It has both reduced and other part that is present with the normal demo. But few pointers here. Don't probably use that. If you don't need reduced or if you don't need react inspect element, just use a native developer. There is a faster react native developer. And also, if you don't want to monitor networking requests, tell me how. You're not going to be able to do that fast, right? Because logging of networking requests takes a lot of time. And it actually stops your main campaign. So, for the difference between live-in loading and bottom loading, so, live-in loading is like a whole page gets reduced. Okay, so, in the app, what happens is, if you change the phone, the whole page gets reduced. But you still are on the same route. Okay? Because you are using them. The problem with the active app is, that's the URL. Okay, so, you are on the whole page. And you have three or four pages. And these are pages of development. And that will do live-in loading. You still do live-in loading first. If the app is generally working with, whichever team you are developing, we make it very complex. That's a hand. There's no solution for that. And secondly, hard loading is like, you only update the phone that you have changed. You don't do a reload, or you just update the UI with the latest phone. So, the state is lost because you have to change the phone, and you have to restart the app. But in hard loading, your state is still the same. If you are saving your state of, like, toggle, and you are saving the state in local state of the app, then it will still remain that way. All the sizes you can change, or the pool order you are going to fix. So, if you are developing on device, the way to bring the event is like, you have to change your phone. Okay? It's not that exciting, it first was the first time, but it was not the time for that. Because everyone is working in the office, and you are saving your phone, you are just saving it. You drive 100 minutes, you can do it in an app. Nothing shows up. So, what do we do? You can just run this hard on your phone to get it, but it's Android. So, make a case of that, and then you can run it on your phone. That's the definition. The user base is not that big. So, in that case, what happens? Someone faces a problem. It actually comes to you that, you see, this is the problem that I'm facing. And, in the beauty company, you can't say that there's devices that are getting used by just one person, two people. So, that's the problem. So, you can't do that. They are your own employees. So, that's the same thing. You have to ask a lot of questions. What is your IP? What is the version of your IP? So, you have to say, there are a lot of things. So, we have added a depth view to that. So, you go to the update and that is in RSS. So, you create a stream, you work on the clicks, and whenever the number of clicks is greater than 20 states, in one sentence, you actually execute the problem. So, that's what we do. And, one continuously part of the activity that we use. So, that's how we handle the releases, is that, we use semantic version. So, semantic version is that your version is like two contexts, one text. So, you change the last text when you have to type a hashtag, or here, but that can be fixed. You do the, you change the middle text when you have to come on that stage, but it doesn't change the API or the behavior of your update. And, you change the first one, like two, two, three. When you have to make the change, and you want to change it, it has to be in the whole documentation. So, but here the problem is that, it doesn't work that way. In a lab-making app, you can do this from game and app. It's through the play store, or through the app store, and the other thing is working it. It's an overnight update. But how about working it? So, this is how we manage our content. So, we have a master map, that is all this paper. The master map, that is already in production. And the media branch handles JS on it. So, when any PR has some changes that involve JS part, we make a PR to the media. And if it has changes that, it goes native code change too, we make PR on media media. So that, it goes set up 48, by mistake, which involves native codes. Over the years, can only be done for JS part. Can't change the native codes. So, after we set up, we release the build. So, whenever there's, we have to release the media later, but we have to make a release through play store or app store. And whenever we have to publish the JS update, we use code push, code push, to satisfy Microsoft, that handles this over the years. So, whatever, over the years. Now, your app is divided into two parts. It's a native code, and above it, there's a JS code. JS code communicates in the native code. And that's how your app works. Now, if you're going to play store code, every change that you're going to make, you have to make, because there's a little process that happens. In app store, it's going to be a longer than play store. So, but, you have a JS change that you can just replace the JS part of that app, and not send anything through the play store. It's like, you're sending some changes over the play store. You're replacing that JS part. It's a single file, right? So, you're replacing the whole file with the new one. Now, the code push was underneath that handle. When we send code push update, we change the last text of our build. When we do a new native release on play store or app store, we change the delivery. This app, every step of the step, native release it, or lastly, the super cry contest. The next native release will be on 6th. Now, when we are cooking, you have to be there. We'll go to version 3. So, it's like, version 2, version 3, you have to be there for like, you have to be there in your app for time. So, the release that you're going to follow is only if you're doing every two weeks, and for 48, you do it as a particular work which that can be solved by JSON. We do it instantly, or if we have a sent feature, we do it with you. So, sometimes what happens is, that you know that you made up this week, I'm going to shape a new feature that needs a few native different dependencies. Okay, so, but I won't be able to send them in the week because that will make my cycle. Because I'm sending a native release today, and I have to send it after 48. So, what the difference is, in advance, send that new update at the same time, you can just simply do it yourself, which we know that now we're going to be using the next feature that we are going to send it in the next week. So, that's one thing that you have to really mind when you're doing a 48. Is that, never use that character in your application. Because what happens is, if you have already sent native release, because of the NTF packages for the app, sometimes also contain native code. Okay? So, imagine you have sent a native release. This means that if you do a Yarn install, YMX install, A, it does a new version like 0.26.A, it will actually be installed in the next space. This means that everything after 26 is every day start, 7, 8, 9, 10, every day start. So, what is the latest version that you get this for? The problem is, that might involve a new native post. Okay? And you are sending it as a new year update. So, you are sending the JS part of that code, you haven't sent the native part of that code. Both are not the same. It's my question. All in nature, your version is actually 0.26.7, nothing before that. You have to be very much stick about that. So, we talk about the many different problems that we face and few solutions about them. But, we can avoid that. There's a new second utility which is called Xcode. So, that means getting started with reactant a bit easier. Definitely, what's the problem that you are talking about? And when should we use Xcode? Getting started with Xcode is as simple as can you make your code or copying a link in a layer. So, initially it was same for both Android and others. But, actually, I've done changes to reactant that you can't do that. And, they had to shift to open a new one. So, what happens is, this is an online editor. It has an online editor if you want to check. So, you write a code, you just install the app and Xcode. You scan it to our code and whatever you do in the code you are writing here you can move to your app. In reactant, you can change this if you would like to. But, the problem is that it comes with some created features and you can't actually add a you can only use a NDA packages that are just not created. But, it still includes a lot of things that you might need. So, a lot of times, 80% of cases we are writing on an app which only involves a page that you have listings and then you go to a dedicated page and you do something. I mean, an app where the user generally ends when the app is closed. Like, it doesn't have a type of app that you should follow but it always involves in the background. Okay, so, even if you close the app you know what people do. And there are types that you can do it. You stop in the app and you know what's going on and then you close the app. But, it's going to be nothing. So, that kind of apps can be built into the app. Okay, because those involve a lot of JS and not a lot of people apps like 2.9.4, a lot of people. You want to run something that as a end-of-service you have to maintain this to the limit. But, any of this real app with the reactable app is just running and at some point of time you feel that okay, it's not a good choice for you. So, whatever you reject you understand. It changes into an awesome reactable app that we have needed. And we have some questions that come back. So, one guy from my team who actually left we have made a development on a state management that's getting very complex. So, why don't you open your account? Okay, drop your account. I mean, no one uses the app in your development. All the way this is your website. Okay. See, I know that if you use drop your account you can develop an action in your development. Okay. So, let's follow the stage. Can we start? So, as we are with migrating an app from the latest package to the latest package and we are working on this energy software and this energy software that teaches library for example on every teach show, you have to tell that updates to the package. And we need this real-time data in the US and I do users are using the app at the time if one user edits something, rest of the the app and then they all that edits in their way should be saved to the database. If you think about it it's kind of another kind of common problem which the application should have. So, 20 years back we kind of evaluated the stack and we show the best stack good years, good years that were at the back end, and we used the reactiveness data for the training, which is exactly as that. Just the fact that we have a good time, and we go to the app, we work well. You know, we have a lot of complex features, so we started taking a lot of custom abstractions, right? Because to manage all the complexity we have in the app, we are taking a lot of support and we are taking a lot of expectations. And we were able to get the app working, but the downside of this kind of a lot of expectations is it's very hard for a user to find out, right? A user will find out, and so we said the more that is done, what we can do to improve our app. And in that sense, we found the app, right? After some research, we found that if we move our back end to the app, we can simplify a lot of our reactiveness. For those who are having a back end, I will give you a quick example of the back end. I have an API, and I am there for completing those processes, they give me a specific data. So I just made what this means. So in the back end, we define a schema according to our data model. For example, let's say we are building an app, we call this app, it has a user, product, orders, cards, so on and so forth, right? Because it has a lot of data models. For each model, we define a task. For example, if the user has a first name, last name, on another page, we define the task and we define how to calculate it. For example, if you have a user, how to compute that, that's it. That's how we do working with the back end, right? We don't have any points, and we just define our back end model and we pass the schema to the server and the server, the reactiveness works. For example, if you want to see an example of the type, you can see we have a type called user, and it has an ID, which is of type C, and we have a question, which is of type string, and last name, which is of type string. So this is the back end end, which is required. It's not optional, it's required. So every user should have an ID, every user should have a question, and the last name is last name, right? So in the graph here, for the entire data model of the application, we define this task, and we define the relationship using this type string. And this is the description of the task, and the second part is the server. In the server, we write the logic for how to compute these properties, right? And once we have that, we can pass this schema to a server, and what the server does is, it gets the queries on the client, and based on the client, the based on the query, it calculates the response and just reduce the entire data to the server. So you can see some of the issues on this query. For example, in the lab, you can see a GraphQL query. Here we are saying that, we are saying that we need a user, and instead of user, I want an ID and a question, right? So this is the query which the client is sent, and our capture servers will respond in the JSON time, right? And then we want the JSON data. So it records an ID and a question, right? Then you have to understand it, there is no response. And you can see that the user might have a lot more cases, but the response will not be ID and question, because, for example, if the user asks for, the client asks for last name also, then the server responds to last name. You can see there is a major contrast in the rest, right? In the rest, to get an endpoint, we get all the data, right? There is no refrigeration. But this is a completely contrast, right? In the GraphQL, the client is asking for what it wants, and based on this requirement, the GraphQL is resolving it, and we are going to take this, at the level of here, we can ask for multiple objects in here first. You can say, I want this ID, and I also want products with ID names, right? It's a single query. You are able to get two types of objects, right? And this can expand. And this query can be nationalized, and there can be relation. But if I don't put the product, it can be an inherent seller. And this could be a user, right? There could be relation seller. And the query should be very nationalized. So, you can see here, right? So, the GraphQL doesn't have an aspect of endpoints. It just has one endpoint, and the client sends the query. They are saying, in GraphQL, we do not worry about endpoints. They are asking, and we will focus on our data model, right? You know what kind of data, often times we have in our applications, we depend on the data model. We depend on how this can be calculated, right? And this is our take-through. And again, the client will extract it first, and the client gets based on the query. And this is about it. The server implementation, based on this, updates will be much more simple to implement, and much more scalable. We need not worry about implementing an endpoint for mobile, implementing an endpoint for desktop, and we need not worry about balancing the links of endpoints and so on and so forth. We move our data to the GraphQL, and because now we have a lot of data models, and our server implementation, much more convenient to understand and, you know, much more scalable. And then we move on to the front end, right? And in the front end, it doesn't matter. React is the same, React. We have, like, this declarator to model, and React works in WUs, Red Hat, GraphQL, REST. But React is the same. But the tricky part is the state management, right? If you think about the state management, the state management, there are a few types of states. One is the local state. The other is to be whatever data we are making, or the data model opens, right? The model is open or not. So that's the local state. And it's generally synchronous, right? We take some action, and the state is from the calculated data. It's synchronous. And the second type of state is from remote state, right? This is the data we get from the server. And we can get out this as data coming from the server, or if the data is coming by a socket, which is on the wave time of the system. So this is the remote data. This is generally asynchronous because the client has to request, or someone has to initiate some kind of action, and after some time, he gets the data. So this is the synchronous state. So generally, local state management is easy. Whether you use Red Hat, Small Bars, any state management like that is. Our valid local state is easy. The tricky part is managing the remote data. You know, there are several problems or several common problems with the remote state management. Well, it comes with, like, mannequins, machine data farming. So for example, let's say, we have a particular edition of products, right? If you save the products as an array, you could have some government issues. In a sense, and if you are doing a lot of contributions to this NAA, if you want to make it into a product, you have to find that product by doing one, in an array, doing a lot of administrations, and then, again, you save it. Generally, all those and all the administrations are in a business, right? So we might want to use object as a result. In a sense, you know, you get the products as an array from the start, but we transfer them, and save it as an object. In a sense, you know, we have an object inside the product to have something like a array and the key of the object will be the idea of that thing, but the array will be the action header. So here what happens is, when we want the product by one, we just object-references, much more action, right? The array gets the data. And to preserve the art of the product, we show, and the property called ID, we have to show the art of ID, right? So if you want to optimize the application of our products, you generally follow the object's group of products, right? You might be following some of these practices in the rest of your follow-up experiences, right? And if you think about it, if you might think something like transforming the array to object and managing the order identity, this is the last part of the array. Again, other problems like managing the loading space, for example, we initiate a transaction to server and server takes some time to do the response, right? And it takes, there's a gap, and even if you have to show something in the rest of the day, you have to manage all common network problems and to secure common address, and do aggregations, right? And earlier we used radars, and radars was primarily designed for blockchain management, it works very well, but the only problem we faced is you have to make a lot of logic for all the cases, right? But you can use radars for handling a lot of different data, you can have a bit less, you can use radars and radars for other things, but still you have to write some logic for all the network management problems which are a lot of issues for them. Let's take a simple example and compare the approach that requires to implement the same thing in radars versus on a load, right? Let's start, let's say we want to make a list of products for the server, and pass it to a product list component, right? And we can use the current component doing all the data in our Radars store, we can use the current component, we can write an actual product which picks the product's data from the store and pass it to our component as a product. And we can also implement the function for these products, and buy the pass to that and pass it to our products. Once you have that product string, right, you have to work it, the other sectors doesn't go to the server, right? There are a couple of things that you can do to go in the rock chain and other other ways to get rid of the company name on it, right? And on the company name on of the product list page, initiate the sequence, you get the data, right? Let's look at the logic which you have to write the product's string, right? And again, we are assuming that we are meeting Radars' son, right? Because Radars doesn't support a string in the package, but this product's string in a string has to make it solve the server, and you have to use some middle way. In this example, I'm using Radars' son, right? And in this Radars son, this action will return another function which gets dispatched to the first component, right? And initially, we dispatched an action part of the product's request because we have to maintain that loading state, right? So before even making any case of we dispatched an action part of the product so that it doesn't get dragged by the developers going down. And in this such set, we actually make the way for we get the response which is there are Radars, right? If there are Radars, we prove it, prove the error, otherwise we just don't repeat JSON. If we get this action, we get the data, right? We dispatched another action part of the product's request success in the payload from the product's data, right? And if it's a failure, we dispatched another action part of the product request failure of the action part. Let's look at the data. It is a part. And here we have to handle all the reaction since we have to do this. Initially, we have a product request and we have to say, what do we do? And this action will return. And in this such set, we will set the loading state to false but this is the kind of production and we will set the other rendition, right? If there is an error, we will take some of the loading state and set the error. We have written a lot of logic for this in a simple case, right? I haven't even mentioned about the data transformation of a simple use case of regimen data and server and part of it in a component. We have written a lot of logic. Let's see how we can implement the same thing in a protocol. In a protocol, again, I'm going to do uncoordinated shipment which is a graphical data and graphical which is an error component and I'm writing a graphical query. So what this query will have is we will specify what data we need. In this case, we are saying that we want product data, right? And we said that I want ID, name and price. Right? We specify the query and pass the query to the error component. We will wrap our product switch component to the graphical error component pass this query to that component. That's it. That's all we have to do. Right? So we have a couple of places here of actually taking the request. We need to initiate the request. How about we initiate the request? We specify data and I need to get the data. It also passes the query state. It passes the protocol already. There is nothing to interact until the request is going or not and once the request is gone, it actually passes the product data to our component. Right? So you can see in the previous video, we are going to wrap our component to that query state. You can see that the request is very declarative and the developer says it will be much higher compared to the rest of the limitation. Right? Because we are writing very less code and we are declarative to be defining what our application needs and creating all the product to that query state. We just pass more than what our previous data source does. In this sense, we normalize the data and we pass the data. For example, if another component request the same product, the developer doesn't send that request to the server because it knows that the colleague has the data, he casts the data and he knows that the colleague has the data because it sends that request. And all this normalize the query state. In this example, if you see, we have products and inside that we have two product options, like product normal and product normal. And again, there is a mode and inside that we have product page. But you can see the product ID, the product one is stored only once. Like, if we normalize the data, it doesn't duplicate the data. Even the product can be delivered to the product one and even the product request is delivered to the product one. It stores the data separately and it just records to the product. So in this case, both the product and the product page are pretty much the same option. The colleague has the data since the end. If we have a connection because it knows what data is, I can tell you that. So how do we get this and the same thing can be applied for writes and written updates and others. Let's take it again. So when you get the work, you call the writes to the server application and the graphic is very sophisticated. In the sense of for example, if you want to make a write or something like that, and you want to basically write that to the product, what kind of information would you need? So let's say we want to do product writing and it's up to I.C. We have to specify and in the sense that we will actually send all this data to the product page which is passed. And we need this kind of sit-out that we want to pass directly. If you have these characteristics, you can just write a documentation and write it. In the sense that in this case, you want a generic documentation and you should be able to pass this to any company. For that reason, you have to be aware of this. So the job application is a way of using everything that you see there. And again, this is a part of capital spec. And we write this documentation again, we just wrap up what kind of business we have to operate and just pass the documentation and that's it. So once you have done that, again, to work in the communication, you have to go and pass the info. It's not the appropriate way because the invitations are based on this interaction. So we can attach it to the company and the virtual program and if there is some actual card pattern, then we can use this documentation. And then to work in the communication component, when you pass the application to the carrier component, you get this function called retail. And inside the retail, you can use this retail function in their business. In the same way, you can implement subscriptions that you can create them. So capital has three constraints like where it's going to be created and where it's going to be done in the server and subscriptions to get subscriptions out of the straightforward way. So what we are looking at is remote data management. And what about the log shape management? Do you think there is some opportunity to do the log shape management? No, actually. So recently, Apollo has used this for local code. From Apollo 2.0, they started supporting log shape management as well. So from Apollo 2.0, they can use Apollo 1.0 to promote data management as well as log shape management. So you can completely get rid of the ideas like that. And this is Apollo 1.0 that's the way to react. And using this log shape management, it's exactly similar to the earlier remote data management. In a sense, we write a query and we wrap our contents in this query and the query is exactly similar to this and we have a practically log name which is local code in the client and we want to get that. The only difference between the server query and the log shape query is that at the left side, now that's how Apollo 1.0, whether to get this data from this local state or actually send that request to the server. Based on this, Apollo 1.0 is at the left side. If it finds at the left side, if it doesn't find it, we can actually send that request to the server. So the beauty of this is we can use the similar structure or similar query patterns for both log shape management and as well as similar remote data management. And we can even use an example, let's say we have this product, we are getting the properties like ID, name and price for the server. But we have a product we can send the chip off to that one's project but the data is just stored in local. Now, we can compare both the data like the data coming to the server and the local state either because it is going. Now the data like offers array to the product is ID, name, price, it is selected with both of our product which comes on it. But ID, name and price are coming from the server but it selects some from the local state. So, it is good that the data must not be synthesized in any way and it is really good. I am sure that the relationship is long and might be much easier than in relationship for the server because again as I said local state management, we want to use this in another way. We need to compute that in very very much directly in the form of GAS, and again for the local state management there is a really big gap. And it's much better to be able to pass the chain function because of the other way, other customers will be able to pass this task to our chain functions. I think that is the update of our chain functions. And then the next thing we have to do is to get these properties and we can come here. The new property is on our account. And it's right here in our category. And if you want to choose the latest property, you can let the value be set out, which I will show you in the video. So this is because of the limitations of local state management when it's directly connected to the bank. So this is because of the limitations of the bank. So this is local state management. And as I said, in Apollo 2.0, local state management is possible. It is possible because of this new feature, or new implementation, called Apollo 8.0. And Apollo 5.0 supports startup. They don't come to the cache team as an agent. They support startup. But sometimes we want some extra features that are not going to be available, right? Which are promise, but not just promise, but also a little bit, right? So we can extract the Apollo with our own information, for example, we can write something different, like a logic, we can extract the behavior of the Apollo, right? So this is the interface. How much can we get, how much can we get, you know? When we write a query, that query will pass through the link interfaces. Finally, it's done to the server. And the server letters to the data. And again, the data will pass through all these links. And by then, it will get sent. And because we have two ways to load, we can just think, you know, in the server. Let's just for example, let's say, we want to implement our main system. Right? We want to implement our main system for everyday users. And the way to do all that, we want to grab all the invitations, create values, and put them on the user. Of that, we want to send them back to the server, right? We can do that. There is a question, you know, that's part of our link to. We can start it and report it. And add it to our link, for example, let's see, this is the response for main system. So it's to this, we have the server. And we can add the session, because it's getting better and better. After add it to the server, if the server goes online, all the invitations will be forwarded to and then the user will have to go back online. So all the invitations will go to the server and the network will be on the server. And the network will be on the server. Right? All the invitations will be on the server and add it to our link. Because the server has provided this kind of main interface, if there are some users, who use cases, you can write and open something. And what you can use is all the cases, very specific to our link. We can write out one link interface and add it to our link also. Right? This is kind of opposite kind of thing. So, after migrating to our port, if you are on your own, so if you are not on your own, this is the next thing, right? There's a scope now, that's what we have, and the last thing, this is the problems we have. And support is very particular to both our server and the client right now. Getting the data from the server on how to use it very quickly and so on. And support is much more important. Hi. Because we have a lot of applications to have, because we have all in the venue, we can kind of see the result of it. We can see this because they have to get it right. They will go to the outlaw paragraph, but my friend, I will then go to check out some more questions. They can, they'll get the help, because we are not all on the server, we have to understand what we're calling many different planning steps. So, it's much easier for you to come and do more of a project. I think, as it is, because of the many different things, if people can start to compute it into the how to do it, which can help you to understand how to do it. I also just want for you to change your video course. This is the how to relate to you and your vision. Yeah. First time, we have to understand, you know, it does not come up. For example, you can use new features for the If we add that, now our client data will be existing in the server. If the product data has been changed on the server, after we make the query, we have to make sure that the server data is existing in the query, without writing any query data. Right? We are getting it, because as we do that, we don't write any query code. We don't need to do it for split-second. We don't need to do it for split-second. All we have to do is, we don't make query, and we add another client. Now our server, on the client, has completed the query. Right? It's kind of a very powerful feature. I hope it can be used very soon. And there is one more thing about Christmas, right? How the Christmas hall says, it's kind of that, we write types, character types for Christmas, and do it to the Christmas tool, and Christmas will perfectly do as a gradual endpoint. It takes care of making, creating table-to-table data, it takes care of handling the migrations, it takes care of giving us a basic graph to itself. Right? All we have to do is, we define our data model as a type, which is kind of very different, you can see for example here, how the type of product, like I say ID, and the ID of IP, which is required, and it should be in it. So it doesn't get very unique, because it's kind of a base construct, right? So that is, we do an ID screening. So that's the reason we are saying, as they're in it, and it's different, they are in it, it's interesting. When we write this, and mark it as Christmas tool, Christmas creates a table-to-table data base, it could be a bicycle, push-pillars, or whatever it is, any data, right? It can make any data base. Christmas, we create a table, and we can start interacting with our data balance, with our model, and see how that works at the end. It's kind of very powerful, right? So the amount of support for the data base, things you can tell it is. You can still write a layout from this tool, when you make some business planning, but with the initial, initially, things you can tell it is, where they have all these kind of tools. So the reason I'm finding out live queries and business is because, you know, we have this graph tool stack, which is kind of evolving, and based on this stack, we get kind of, you know, a lot of very good tools like this. Again, I think our graph tool has an idea for modern era. Just like how React has revolutionized the UI development, right? I'll use that graph tool and apology to revolutionize how we interact with ourselves and how we deal with our clients, right? Again, React has brought this declarative pattern for UI development. I'll use that graph tool and apology to give the same declarativeness to how we comment for the clients coming here with this error, and how we comment for the servers on error. We have clear plans, a lot of plans to react in the next weekend. And I hope you'll give it a try and see how it works. I'm going to end here, and I have created a very basic application, a very good application, and it's in Python, get ready, see how it works, and if you have any questions, you can reach out to me. Thank you guys so much. Thank you very much. We are surprised to know that we see so many of these who will be at the end of the day. Thank you, sir. Thank you very much for giving me this talk. Thank you. There's one problem, which is that you need to have verification, verification of something, and, uh, uh, preaching. What is that like about the specs? I mean, I didn't get that at all. So, it's not an incredibly linear and incredibly expulsive object, as there is this word, so that's very important in the object, and in some ways, anything is there, and that is the best part of it. That's not really the case. That's what we said. In case you're still curious, okay, but I think you'll listen to the next speaker. It's going to be a lot more open, perhaps there's a good change from, yeah, and the last couple of ideas or something like that. Enjoy. Thank you. I'm going to, I've been talking to my father and my legs are current. We talk about things, and everything will be back, and everything will be back. And everything will be back. And everything will be back. And everything will be back. So, uh, last hour of the week, and we really get people to go to school, to go to school, so chill out there. And I'm worried. I work for a company with a job here. I'm not sure people would just bring up the rubric types of the same. And if you have every use, things like bootstrap, beautify, or DSS, how many of you use DSS? So, if you, so if you use DSS, okay, this will be for people. And I love CSS. So, all these things that you're seeing on screen, are basically my love for CSS that I've created in my brain, and trust, and stuff like that. So, since I only use CSS, and I know absolutely nothing about VR, it only makes me talk about that. So, remember, I just think it has found its way to package CSS as that. It's not literally any product that you can find. But, how do you write? I mean, why don't you even read and monitor? How does it even work? And, how would life support you? So, what we're going to do today is to take three sections. The first one will be giving you a perspective into how, where we are and why we are there. The second is, I will show you how you can work with that and give it deep relevance. The third one is, I'm going to show you the way that how do you make our life even better. So, let's talk about this. Now, back in the day, when the web was very, very simple, we did not need to know the behavior of the client section. So, whatever we wanted, we could just stick it to like, Apple, JS file, server, and do the software. But then, as the web grew, we wanted to serve which of the features clearly to the client section. So, what did we do? We just put it into our Azure client. So, we broke that into the features of the client. So, we broke that for the purposes of me. But now, we hit a problem. And the problem in here with this thing is that if you know HTTP-1.1, it says you can, the browser can only have two connections but if you have ever worked on a project, even medium to large size project, you know that you always need more problems, right? The problems kind of deliver it to actually make those numbers more. So, it's locally 6, we're trying to do that at 30, somewhere at least 30 knots. But then, you know that those numbers are not enough right now. So, what did we do? We did some tests and put them together so we can get average years so we didn't want to do but we used to have all the different colleagues all the weeks before. So, while you're selling, you're selling just a lot of money. Awesome, right? It's not different. No, actually. Because once you start contacting the problem of order, right? So, you're not sure the order that I showed here is the correct one. Or, any of the numbers you might have probably done that if it was yourself. So, the problem of order came in and if you were a real developer like I was, I had to work for like 100 to 5 somebody from my scene and he might have to actually consult me and I would just jump into the world. So, we actually we want all the great things about your code to be written and isolated chunks and we want these to be written for us. The computer doesn't like computers very different. It's like smaller space of code it's like faster code it's like even bigger So, what do we do? We make tools. The tools that will allow us to have the system to work. So, we build tools like JSP, we put all the problems and also separately how we design We then build something which kind of did all of that it was a bit passionate of fun So, it would want to invalidate your new build file and then we came out with loaded file which brought in concept of sourcing. So, if you are developing and you are studying all this they provided source maps to you to be easy. And then we all know the studio well, they came up with different ideologies that they can either do integration or do these tasks properly. The problem is that we did not actually solve any problems we were still problematic or we were in certain ways but we were thinking that we were still doing any and if you screwed it up the other thing is that we were serving all the we were matching together all the file and we were not thinking about the features that are actually not useful so it doesn't matter whether they used it or not we still serve it and we also saw flow so you were doing your work you were still serving it because we were not sure whether that was useful or not and it did not actually increase our capacity so in the time you were around the same time what was happening is that in the normal world people came up with modules and one of the most popular learning technologies and if you don't remember what technologies were like this so you have that where you have to do something a module that exports and then you go to a different file and if you want to use that function you just require that file and then use it it was as much as actually going forward to a module of the system and there was scope of using all the amazing modules that bothered by making sure that all the forward learning packages are available so they work so they did all the hard work to actually making the forward learning process so that worked and now the client has continued its work on making JavaScript more better than the people of JavaScript we do not just deal with all these different kinds of things which are individual videos which are human and understandable so if you want to solve this modularization problem for those how could we solve them well if you think alright we could somehow express these things in that exactly important like that it allows us to express all these different sort of types into a JavaScript version of the set and then we kind of go through all the things that we have in our code which are dependent on each other and are actually used but that figures out things that are optimized to be used rather so that's what I've done and what allows is like allowing you to require just one thing not just one so you would require CSS file and so what system is it and you could also use the ESL T-Code if you want to and this is part of the putting together the React and Facebook that kind of found out this unknown was a fact and they really endorsed this so they actually made it popular and we have the fact in today for having the fact everywhere so that's the thing and if everyone's trying to work out there really want to work and work like this part you're like happening because it's been hard to contribute happening is once another job comes saying hey you know you want somebody who can actually do the project so I'm here to tell you it's a myth because like all that make people crazy about oh I don't know so let's start with that so what kind of aspects you start with the latest kind which is the common which is sports and then we are starting with a key and this is this is a starting with a key when you start building a dependency graph and look for also where we are saying start with and then process the next thing is we say hey we want the output prior to being made by the project everything that you do and doing the process put it to that point now one of the four things in one package is loaders loaders are like those functions that kind of take one input and outputs another thing and that's either JavaScript or something that other loaders do that's actually JavaScript so here in this example what I'm doing is taking all the types of files all the TS files passing them through TS loaders transferring them to JavaScript and then they have to put them in the pipeline so if you think about loaders they are put into files or into modules it is probably a few hours from all the things that they can do and you want to occupy that type of language that's what you will do and those are the four things that that will actually get you through the most of my position so we are here and I'm here I'm here I'm here the project is up I have a package also and this is loaded and that's stuff I do the object I am And we want to say that in 3 days basically, the source lab will be searched by us. Now that's good. And now we have to add the back row models. The way we can do it is by using the version 3 because the back version 4 works without any integration. And 3 doesn't. So it gives you useful errors which I actually want you to see. So we'll do that and we'll also go to the packages where I will add a script where you search it and we're going to execute it. So let's start running that script and see what happens. So if we come up, there's an error and the back is really good with errors. It's insane that the output with Python is required even if it takes 12 hours and it's sitting. So it clearly tells me what to do. So I go to Python integration and come up here and say, hey, I need to review your file name and I need to review my work. But I also want to do is go to index.html and add a script source to it and say, this is my text. Because that's where we are now operating my file. And let's run that build again and see what happens. And you can see that this piece of code that we wrote in our index.html is here. And if we reload this, we will see that we actively want to launch the statement as well. To us. But in a real project, we do not put our bundle line just like that along sections. We can put it directly on this. So let's do that and go to the output and say, hey, we want to put it in a class which is going to be an absolute class. And we create absolute class using the unit for the class, which comes in the normal world. So we don't have to expect this much of an extraordinary question. We say that, hey, this is the active directory line that comes in the class. And then go to the create directory of the build. That's where we want the model of JS to exist. And we have this import file. So it's going to sit by and it's going to apply. Like that. And run the build again. You'll see that now there's a bit of a directory here. And you'll take this here from the build.js. But if I go ahead and change this to build.js, I'm going to create a build.js file. So let's add some CSS to it and see how that works. So I'm going to create this file.js file in the source. And we're going to go to the unit.js file for something. Let me show it to you. I'm going to use the vector for the build. And the other is going to be white. And I want to have a bigger form size. So we can just make that. And I want this file to build. Now, as I mentioned, in fact, a lot of people don't just want to make it white. So let's try to do that. So you go to the next file.js. So if I do, there is an error. It says that you need an appropriate order to handle this file. So now, in fact, it's telling me what to do. So I come up here and, well, I figured out that you need a CSS order. And it's silent. So I'm going to create a CSS order. So that's what I'm going to do. And I'm going to tell you why we need two orders in here. So let's do that. And we are also going to have the value of the vector from here. So what we are saying is, hey, for each order, for warnings, we have some sort of rules, which are basically objects, which are sticks. And what are we testing? We are testing it in the primary type. So in this case, what we are saying is that, hey, if you apply it into the extension, you are going to use the loaders to style loaders. Now, the thing that we need to know about loaders is that they are working on the right side, because it's like having a function execute and gives it output to another function. And that's how the other function is the output function execute. So we have cases of loaders which actually does the job of finding out all the new order imports of the images and stuff in the CSS. In both, there are some other orders. One is the one that actually does the job of coding and doing the stuff. So we now have that. And let's try to build this in the tool. Now, we have a build, which is the game. And if you read our history, you can see it. This is my drawing. So the next thing we want to do, I said that we want to do a proper view that happens in the development setup. So let's go ahead and do this. So in source, I'm going to create a new file and add a little parameter here. I think we want a beautiful one. So we might probably get it all and create all the images we need for coding and add that component to the file a little from SQL. So that is it. And now we need to add loads for views in Java and JS file. So I'm going to copy this file and I'm going to say, hey, this is JS. Battle. Because battle is the one that can process JavaScript files. But we also want to say, hey, let's do anything that comes from node points. Because the node points. And then for view files, we want to say, hey, we want to use view files. You know that these loaders are basically indium packages that can be installed. So in this case, I'm going to install those packages and let's do that. And I figured out that if we do loaders, we do and if we compile that, it's going to be for battle loaders. So let's go ahead and install that, because now we're going to load our index for JS files and also do this code, which we haven't installed yet, but we will. And go back and then we have this bootstrap code where we say, hey, we want to do that. And we say the element that we want to want you to focus on is this app. And then we say, hey, take this and create an element using the app we're going to use. Go ahead and start this guy. So basically, we use for this guy and then render the app that we have here inside the app. So that's something to do. Then we also have to add views to do that. And now if I run with, you'll see that there is a new build that will happen. If I load this, you'll see that we've also seen that it has loaded views and triggered a view value. Awesome. So we have done the view and what we need to do right now is to do something that we can actually use in creation. So let's start with the first thing is we want to delete the world so everything is in view so let's go with accuracy. And it's a good build to start with I'm going to say the next one build, it's the next one. And then we should delete what we're going to use later. I'm also going to I'm also going to do one is that right now all my budget files is just not going to be so every time I need them even if they're not the latest the other gas will stop what I can do is use this hash and the name of the file and then everything and we're going to get this new one file in that hash so let's go ahead and do that by coming up here and then using these I'm just going to play for you to see what happens just have a minute to see so if it's okay and if this is what you thought there's a hash that's there now here's the build I have this in case of html it only has access to one build with a hash so how are we going to fix this if we're going to remove we're going to use a plugin of html to backflip and what that does is we can look into the bottom of your project and how can we put it into the backflip so let's say so we haven't done that we need to respond to that we do that to come up here and say hey, we've got plugins which is an error call plugin to actually change that so once we do that we are going to put the build in so now we've built this directory now you also have this in this file which now has it's not pointing to the build that your work package is using it's done so we move that and it's double so now we are ready and we now have a a solid problem of caching the last thing that we want to do is basically have a platform in which we're working and have a good work package so we're going to go back we're going to store some things we're going to go back to ourselves and along the other projects then we can go over to you that must be here that's going to come up here and say there open so so once we're done with that we're going to go on to the stand and you see that this is working you want to test it this is going to show you yes so yes now so let's we have done that and I wanted to touch upon the point that I spoke about earlier we were suddenly getting here and we didn't know what to do so how that worked out it's also a problem for you so see if you're working that and you have some kind of feedback and you want to know the feature when somebody has backlighted so what we're doing here is we have a bucket which calls this function and loads that and it dynamically inputs back to our JS so we do that and what that does is creates another JS file for you and it loads that when we pick that one so it does that all of a sudden so it does not get loaded to the main model it gets loaded only to the user the other problem that I talked about is something to do so the way my pack saw this is by doing something and teaching so here's an example say I have built this and I have two functions and I'm only using a function not a built-in if I run the pack built it will show you that actually you will build the source code and it will tell you that hey, hello it's actually used so it acts to the exports and then it marks the word that has a new function so what I'm going to do all the removal part all by itself it can then allow other plugins like unify JSON to put into the source code so you can do that so all of this you can do that and it was really interesting to get this done so I think in the future it's coming with 0 cj so what that means is the continuation of the guide road most part especially unify and allow parts to go all in more production and what I can do for them is to do all by itself it's super fast and it's very fast so it's also coming with this easier so you can not just use JS file as an enterprise but any ht file as an enterprise which makes more sense in the world so the reason we have talked about why it is important to do this on your own we have also talked about it's not that difficult it's not that difficult to do and then which is the thing that people don't do for a long time remove the growth but you have to and then finally it's actually awesome it looks like it has increased the complexity but it really has one so thank you so much what do you think about it it's all in the last three speakers so what did they wish can I please come on switch there are three very different topics we think that it was changing a little bit more work or more work yeah yeah it will work it's not a problem so whenever you build you create a signal but the JS file what about the reducers whatever there is for the whole quality preparation anything you are changing in JS gets changed it isn't a problem to react to it also works for other types of applications it might work to react on Apple because it's a kind of based on a concept that you can just base a JS nothing about the components what you are trying to say is the location of all the images in japan yeah copies that copy those images you have or the amount of a bit that so whenever you have to be answered those images get copied to the xy tool rather than you have to change the change and that's what takes care of copying those files so the thing is there are many applications so there are many applications that depend on the application and few of the applications are in the same application so when I propose to use the application the main application that I got from the deal is that there are many things that we are using of the stick so it wouldn't make sense to write a new server to map your server to only for the new component only for the new things that we have here so how do we deal with the migration process if you want to invest in this then let's take it as something like this even if the Russian points are in place it can last two days to end up taking all the Russian points so implementing this things that makes it easy, brilliant and sometimes we can do it automatically sometimes we can change the schema automatically and then once we have it in the active layer we can get all the things on Apollo in the engine we can get this Apollo site on the front-end side we have not put your data inside we still have everything that we can get all of it I'd like to add to that I'm just going to add a situation that we are moving from one of the state data streams so if you want to get the local data database all the data is on the logins so that it works well so what it means is we need to get it and what the question is kind of then how do I understand we need to get it and then we need to get all the state data and put a lot of data and so then we can get it and it will be easier to manage the whole state data and we can ask the engine to activate it so I think that's a hard call because we have been creating a jazz it might be a lot of news but at the end of the day you are making a tech change nothing is going to change on the other side so it's the step in the state to take a call and see that new ideas are going to be there so we said that we don't take a graph to a very if I want to fetch as a high-end person it will be cached on the server now the hook will be cached right? yes it will be cached on the client side on the client side so now of course if I want to purchase as a high-end person and ask them so what will the process be the caching would be used because I give one there will be only one location where it will be stored and it will be now all the problems but as I said earlier the first request request only is of course not the data it will be still there and you make the second request the same object will be updated the second request you can now go to the server the latest data will be updated and the second question is what is the question about the Adlerate line when you copy the other object from the line to the local so if I am not setting that object and if I maintain it will be cached on the server and on the client so what it can cause like a problem the Adlerate line is just a proposal it's not part of the spec it's not even implemented so the idea of Adlerate line is that we made somebody and without writing any post with the help of some corporate languages let's say we got some information from a number chosen area I gave the Adlerate line just to be dependent on the actual user but not actually now on the server that is permanently in line syncing with the client so we get a lot of good ideas that's the idea and we also got that library it's not harder than any because you know there are a lot of expectations about it how do we keep that dependent phase there are a lot of challenges but I am confident that the accuracy to these challenges is revolving and if they do more and if they do more it's a part of the spec if they do more they get inspired this is for our applications now we already mentioned that we need that feature but I am confident that it's not there so we will be using some other mechanism maybe we will be making that by a subscription but that means we have an example so now we will be buying one that's the challenge that we do technologies take some time for us to get to and get around to all of that we need to actually do it so most of your projects are there you can probably take out the projects that are not there and they are the they couldn't ask you to do it because how are you going to do it in fact they are going to do it and how are you going to do it maybe you can do that but I am confident that we will be able to do it for example as in our policy case something is on power and water and we will be able to provide them with important projects the next thing we will add is that they will be able to they will be able to publish things so they are like the size of the app they are very important so we can talk about the performance and the animation what's special about it is that parts of the most of that they will be able to do it yeah that will be a big part of the project so if I am going to do it I will be able to do it and then solve that problem so yes and we will be able to do it but the pros are a lot okay one more the last question so first I have a clarification of what you are speaking about both speaking so if my understanding is like the chunk that you created will get loaded on the browser is that correct? so my main question is what are the characteristics of the work and the basis of the session is like the function I am like the function very much the name of the the experience for example the same number of function after the initial browse then we are visiting the app I understand the final size is far from here so what are the characteristics of the work what should be the difference so the kind of work that I have so I work for my thing and here for the interaction when people see the work that I have done the tiny pieces are they don't want to do it they don't want to do it so we have mentioned that so we know you might also have something similar in your system that what should be the work maybe in our case in our profile that's something that's something people are going to use to gain experience so if you know that that's something you can actually use so basically something that for example if you have those things are already basically I can't do it and so only then similarly you think that some features will actually be labeled off but when we were developing a real do-it-yourself project we had to decide how are we going to do it chance and what are the chance that we want to do so it's different from the past so it was a long-distance team and it was a deep-distance team what we did was we did low-distance part we're going on the idea of the current work if we go into the current page partly it's going to know that what's actually going to be done so we told it that next page is chairs and the specs and everything and if there's something that you don't know so this is the one out of 100 times so that was a separate chunk of that and that is made up of the kind of that you can take on that's also that we want it's still in development what it does is it might be better to come up with what is the next job that you want to do next for me my next job is design system design system I'm very happy to be able to migrate from the last two jobs here optimize the production model to the next finally it's all done last one our lab doesn't work on any sorry so for that I think this September we have J.S.Pool Tiger how do you think we should go there thank you so thank you everyone for allowing us to do that can we ask you a question to your patients please react to our best strategy so they want to give each other an excellent proposal if you want to meet them please don't meet them we can ask me anything about react to me do you need any help regarding the proposal for somebody to talk in order to reach out to me I'll show you that so we will be happy if you can record us anything you would like us to do this is the first time any more consideration thank you so much I want to call Zena welcome she is here please be welcome thank you thank you thank you we are very grateful for your help if you are interested in react to me I don't know if you have any idea the idea is it will be nice to work out Thank you very much for being here, you guys have been very important to me, thank you very much for this, very important to me, very well.