 Currently I am working at a bookman's show, I am leading our PWA team over there, so yeah here is a short story I am going to tell you that you know what were the problems that we had to migrate to react, also some of the patterns and the practices that you know that made us that we worked for. So back in 2014 this is what I felt for most of the websites I mean they were really slow and I mean if I talk about book my show the website it was also slow so the main problem we faced was page load time and yes the first page so it took really long, the page load time was like 7.7 seconds and the first page was 12 seconds. This was a graph we had, what were the problems? The main problem was we had like same codebase for both mobile and desktop and we actually realized you know by the time that you know a lot of bookings were happening through mobiles, why are we shipping you know desktop I mean why are we shipping the desktop code to mobile? Also the second thing was like when I had when I saw the code it was like you know one of the files had like 3,500 lines of code I was like oh man come on and thirdly the URL structures were not so clean coming it was randomly put up so the URLs were not so clean. Also I was not able to manage my state and navigating through the pages I did not understand how do I manage my state these were the problems and yes so we thought of like let's fight against this legacy code and you know have the motivation to turn everything to react though it was not easy because when you actually have to you know make understand your product managers and you know your leads that you know come on let's jump this out let's pick up something new it's very difficult to make them understand because for them what matters is revenue business that's it no matter what tech stack you use but then we developers actually made them understand that you know let's fight against this and make it better so yeah this is where our journey actually started and so the main motivation for us was just ship it no matter what we are going to ship it so mean my living when we started working on you know moving our PHP tech stack to react there were few goals that we had planned initially the first one was we planned for the optimization like we need the speed needs to be increased secondly we have this in mind that the entire booking flow I mean the entire movie booking flow should be completed in about say 30 seconds I mean the entire checkout flow also we wanted this add-to-home screen feature just like the native app experience so yes these were the goals that we had in mind even before we started off so why react so the multiple frameworks why we chose react so the reason we chose react because for us performance really mattered so we need something and react kind of has virtual DOM feature which kind of you know so it acts like a state machine and it only updates whatever has changed so your entire DOM the re-render part is just taken care of by the DOM whereas in you know when you're actually updating the DOM and playing with the real DOM it creates a lot of problem so this is a reason we chose react because we wanted a tremendous increase in our performance secondly what react gives you is it kind of enables you to declaratively describe your user interface and the model so you need not track if the entire state changes I mean whatever you're changing in your UI whatever you're updating you react takes care of updating and triggering the re-renders to your DOM automatically so you need not worry about all that and trust me like PHP didn't give us all this the first thing is I would say that you know it was it was a component driven so in PHP I would write a code say you know if I had to write a seat layout if I had to design my seat layout page I would actually I actually saw that there were no tons of code which were repeated I mean just by saying I don't know why but then when we chose react it was it kind of was very useful to us because it behaved like you know a plug-and-play thing where in you know our component if I've created a component once I can use it at multiple places so composable reusable and yes testable which will be talking later was was the best thing that react could provide so if you see both of these cards like you know left-hand side and right-hand side one of them is a movie card and one of them is evened card so we did not actually go and build you know two of them separately we just had a pure you know a super card component where in by changing the props you know I could actually make sure that you know okay fine if I'm passing something like say evens I would actually see the events card and if I'm passing something for movies I would see movies I actually didn't go and you know I had to write to sit separate codes so this is where reacts come comes into picture and you you actually your work begins simple you are not repeating your code as a developer I think this is this is what you should be thinking about this is this was a code for component where in you know you actually see that you're passing the props and the label and I mean nothing changes so whether it is even card or whether it is movie card it doesn't really matter next one was again the show times so you see we have one show times your show 10 spill your and second one year again this is a component so we have this component and based on the props and whatever style I mean whatever props I'm passing as a style it it got rendered I mean I'm not just going and creating the other I mean other code in my application it is so plug-in play and it is so reusable that you just go and change your props and you can use it and different variations of your pages the second thing was there was no direct manipulation with the DOM so if you see when you direct directly access your DOM it demands like high performance and we should be ready for it I mean it is very expensive if you're dealing with your actual DOM it is very expensive but then when you're dealing with virtual DOM it doesn't really matter because your virtual DOM always keeps a track you know whatever changes it'll only re-render that part so that was where react was very good for us also the rendering speed since I told that it was not manipulation with the direct DOM it was always the virtual DOM which was in the picture and always the changes so wherever your state changes only that part will be re-rendered so the rendering speed was much much higher than you know if I compare it to PHP also it was since react is a view layer you kind of you can use it with any of the frameworks I mean no you can use it with say you can actually use it with PHP as well you can use it with any framework so it kind of just gave you a view layer for any of the frameworks that you wanted to use in your application so that is where we wanted to use and try it so we spoke about react a lot now so we when we migrated we thought of you know also a lot of companies were actually start we had actually started using Redux and we actually had no time to see whether we should be using Redux with react so just so we chose Redux because we actually wanted something called a store at our application level but then we actually didn't make a choice whether to go for flux whether to go for Redux we just went because there was companies who were actually using react Redux architecture and so like so also we also went with that but then later we did know what were the advantages for using Redux but we didn't make the personal choice of actually choosing what to go for so Redux kind of gives you a state management whereas when it has a central store for your application and you know you need not worry about whatever whatever changes you're making so whatever whenever your state changes it's being communicated to your store and you have a single store so it matters whether you're using a flux architecture or you're using a you know Redux because flux doesn't support the single store thing and yes Redux does it has a single store and it kind of gives you access to whatever whatever state changes is happening accordingly your DOM updates also the predictable state updates is much like you know you're using you're using to try and you know you're testing it in a much predictable way as in you're not depending on any of the other models or other databases also when you use the Redux architecture you kind of also see that you know you're using pure reducer functions I will not go much deeper into it you can have a look at the link and know about what Redux architecture actually is and why we actually use pure reducer functions for it so this is just an example where I'm using pure reducer functions so pure means you know any input given and output you cannot manipulate your function so a function will simply give you the output as it is I mean there will be no mutation in it so if you see all of the you know the reducers whatever I'm returning is just the pure functions that I'm returning third the Redux thing also kind of gave us you know the time time and debugging which was so time time debugging there's a Redux DevTools which kind of gives you access to you know it has all your dispatched actions and all your stores it can you can actually go and inspect and see you know what has happened so you see you know if you actually made changes to your reducers and it says okay you know something is wrong so you actually can inspect just like you do in the browser right the JavaScript developers are familiar to the DevTools and the same way you can actually see whatever what is happening I mean that it gives you entire bunch of things where you can inspect each and every actions that you have dispatched or you know what is happening in your store so for the migration process for us initially when we started we didn't really know that you know how should we start with the boilerplate or something like that what we did is we know that we you know we want to use react and Redux so we started building a you know react components on code pen that is how we started and yes I we did start like that because we didn't really had things in mind you know that this should be the architectural something like that the boilerplates and stuff but then initially once we had all the components ready in the at the code pen level we started thinking on you know the build process that is where we used the web pack and after we were done we got a similar idea that you know okay one our components are ready now let's just try stitching them to our code base and that's when we decided the architecture and it went on like for five months so first when we started off we started off with the website I mean even before I mean we chose to build our mobile website the PWA we thought of giving it a shot on website let's build you know one of the listings in react when we actually failed this is because there was no server side rendering we faced a lot of issue for SEO so okay we just reverted it back and we started off with our mobile website that is a fresh thing when we started with so there was no PHP hindrance with our code okay so I'll answer you back so yeah so this is where we started building our website and yes we reverted it back means that we shifted it back to the PHP text tab because the we couldn't afford the SEO problems after all it's business and yes so even when you try to so this was one of the problems that we faced while we were using we did it on website if you try and use your reactor with your PHP view you'll always face a problem and yes that is where we also faced few problems and but finally we could resolve it but then yes ultimately our goal was the mobile website since the analytics data straight away proved us that you know all of your bookings are done through mobile and yes we went page by page we went from movie listing showtimes the seed layout you see was the very difficult job for us because it involved a lot of things like day three we had to see how we could use the day three thing in react and yes we did a good job by the way in like 6-7 months oh yeah then we picked up the events listing because this was also the part of our mobile website oh shit this was a bad thing for us because we had to make it work on the UC browser now so yes for react we did use a paper polyfill which kind of you could use a promise object assigned a lot of things don't work on UC browser for that we have to use that in polyfill so there are few issues that we faced we faced the word wrapping issues on you know UC browser by the way fixed it using no rap then there were few things which didn't work in flex model because it was not entirely supported by the UC browsers and the position fixed became like very good we didn't even understand what we are going yeah so since UC browser like it had only partial support it was mentioned on your website as well we did face few few JavaScript issues as well sometimes what were the aftermaths like when we actually did this job and we actually found that you know our application was about 4kb which is like super the business was like how did you do it I mean it was like awesome thing and secondly the initial load time this is what was needed for us so 4 seconds and yeah they need the substituent loads were like 2.94 seconds again the conversion rates on mobile like PWA was 80% so we are a party we actually did and yeah the first paint like went on from 12 seconds like not 12 seconds also like from 13 seconds to 8 seconds and then this was like so we also got featured in Chrome Dev Summit yes this was also a great achievement for us because that shows like 80% increase in the conversion rates I'll continue in the transition we are still you know converting our desktop in that mode to react desktop and so I'm going to tell you few patterns that worked for us so this might work for you or might not but you can take it as a key take away so so preshaking feature of webpack helped us a lot because when we moved from PHP to react so preshaking is nothing but it's it's like so I have exported two functions say square and Q and if you see the code I've only you know important queue and I'm not important the square so preshaking helps in the dead coat elimination I mean whatever whatever is unused unused exports will not be taken care back right so if you use this preshaking feature of the packet will actually eliminate all your unused export so this is where PHP could not do it right because there's no important export thing content also we use we kind of used pure functions called map and reduce we strictly followed this pattern which helped us we we had this thing in mind that you know we should be using a set state is I mean using a function in the set state instead of an object because what happens is when you use set state sometimes it doesn't behave how it should behave so you should always make it a point so if you see here I'm just passing you know an object instead I will do it this way that you know I'm passing a previous state as an argument so you should always be doing these were certain practices that we use that helped us make a sometimes that state behaves differently because it is us synchronous and it is in a different way wherein it might not update your state immediately so this is where you should pass you know the previous state as an argument and call back also we believe in you know replacing the node modules with indigenous library so we've built our own so we were using moment and it was like too huge and that's why we decided go on let's make something on VMS summit and we made the VMS summer which kind of had only those things what we actually wanted moment was like kind of very huge even the things we don't need that were getting shipped off and that were added in the bundle which kind of again you know reduced things but then we figured out come on let's make something on VMS summit downloads though it has like 4994 downloads so far and we started this I think last year so yes I would suggest that you know try building your own stuff and always look up always compare between libraries or packages that you are using yeah be choosy about using libraries just like Trump is because I would say you would have different libraries different packages but then experimenting around them will ultimately give you you know a satisfaction to your product it will increase the page load speed it will improve your product so few things that we chose we chose we going through what is it we chose the redox zero or redox this is this this is what we chose while we were experimenting things also we chose the redox first rotor or reactor after four so Tim I think a few weeks back we even removed it so we keep on experimenting things but by when we chose to use immutable we found that we are not doing a lot of writing operations on the arrays which is what immutable is meant for we're doing more of reading stuff so let's use Tim which is quite you know smaller in size than immutable that's where we chose then if you want to have more detail about you know what then to use Tim then to use immutable and to use seamless immutable just go through the link you can find more distinguish but this is what worked for us you're the small example when you know I'm using the merge thing and from the team and I'm just merging it so it kind of gives you more things but it's on you to decide whether you know what we should pick up because for us we wanted something small we don't want an ad hoc like really that would have that I would depend on also redox we chose redox zero or redox because sometimes I felt sometimes I feel that even we felt that you know redox is doing just way too much I mean come on I'm writing my actions I'm writing my reducers I'm writing my action types and whatnot in different different files and I'm shit how do I maintain stuff and how I mean how do I make a developer learn so sometimes the learning curve also mattered but when we saw redox zero it was like not writing your reducers and very lightweight so yeah what is happening is I'm just creating my store actually writing my actions and you see my component I'm just directly calling my action so there you could use a part is actually on the action types is actually gone my state changes is directly being done by from my actions I mean I don't need to do all that stuff because sometimes it kind of when you start making you know when you start from scratch or learning the learning curve is actually very steep for redox you need to actually understand how it works when you're actually using redox but for us I think redox zero worked well also redox first so initially we started with the reactor out of four but then what we felt is you know we're actually is reflecting react application I'm writing the reactor application that's what I felt so the reason we chose the redox first router was so if you see react out of four it deals with the history API and you know updates the changes to your view and your store now your state is just unknown to what you are else you're using I mean there's no and the town that you say that you the single source of truth is just gone because your store is not aware what is happening right at the you are it is just not a bit so here I say okay you know the router thing is the single source of truth for routers react router and my for my store is redox but that part is already gone I have like two single source of truth so that is where we chose the redox first because there are a lot of problems also with the reactor if you see it's also mentioned on the box that you know you can use the react reactor but you know redox will be the source of truth for your data and the reactor will be the source of truth for you because all your store thing will not be known to the you are the other problems were update blocking and no deep integration this means that you couldn't actually know what is actually happening you know the state any any store would not come to know about your URLs at all so there were a lot of solutions for it like you see there was react router redox a lot of solutions were given by the communities all set up you see on the screen but we chose the redox first router because this is where we actually got what we needed we actually could see that so this redox first router does not think in terms of components it things in terms of state application like whether your state application knows about your URLs or not so here my URLs would directly you know communicate with the actions and so on the state so whenever so any changes to the state the my URL would know and any changes to the URLs my state this is what I wanted so for example if you see the older approach if I have a sidebar component wherein I have say two states say open and close I would do it this way say you know so case sidebar closed and sidebar open and in case of closed it returns me false this is the older approach how I would do it with reducers but then how I would do it with Redox first router is I have a set of you know application so this is my entire application I'm just saying that say case home I actually know that you know in case of settings my sidebar will be open so I'm not thinking in terms of components I'm thinking in terms of my state of an application state of an application tells me that on the settings page the sidebar will remain open the give me way too much and yes we were like this but then one important point to understand is whenever you're like understanding the architectural decisions behind the tools you're using is perhaps more important than many things a new package does fit so you need not pick up some of the package or tools just because someone is saying try understand it might I mean it might not suit for your product and vice versa it might suit for your product always keep on experimenting things because when we leached the state view actually had gone through a lot of things like we did try react not to fall deep then manually say that you know I don't know you react out before it is it is it is not nice it doesn't way like that it doesn't work like that so you need to decide on things by using it also we built a common components this is so this is the common components so what we believe in the when you're working with the react architecture components are your power this is what react gives you right why not create so we kind of we call it a design framework style guide and book my show so any developer who's working on it and whatever component he is creating or adding will be added to the style guide so he or she before adding has to look up whether it is there or not so we kind of have from like counter to check box to even even cards we have all of them and you can actually go there and you know you can edit the code and see if I need to see the book button and if I actually need to code say you know just make it proceed I just changed that change at one place and I import the same thing I mean I import this component in my code and use it this is how we created so this was like a set of design I mean a set of components that we use throughout our application because then your team grows you would not know you know what components you back in and I think a component should all together be a separate step out this is what I think and you can always import whatever you need also this was the thing we chose that you know the initially we were using higher order components but later on we started using prop types you can have a look at this article because I cannot go deep into it also the reason we chose the prop types so prop types is nothing in real you just pass you know prop types as a function what where in the value is of the prop types is a function so it's nothing new it's just the functional way itself but it is way better than the higher order components wherein you keep passing function I mean you keep passing components to other components also we did use this stuff called you know optimizing with should component update so at a lot of places you might see that you know whenever a state changes all of your dome and the sub trees all of them are changing and you might not want that right so you can use this should component update when you want to actually optimize stuff you can go for it a lot of things like strict lint rules these were things possible like if I could imagine doing it in PHP it was possible for me but then it was like kind of how do I even start with it so a lot of things we did like pre-commit hooks we actually also run test cases on pre-commit hooks and we use flow for the compile time checking so a lot of things that when we started using react kind of was easy for us like linting things like using flow type if I would imagine these things in PHP I don't know how I would do that definitely there's a way but then the person has to struggle a lot also testing components in react was like super this is all together a different topic if you see testing with PHP we kind of tested few things but then we stopped because we kind of had to use the so many so many different frameworks like if you have to use coverage results you use Istanbul and what not but then yes when react it was like very easy you can you have this snapshot feature as well and then react so for a book measure we use just an enzyme for testing react components also we found that a B testing was much simpler when we switched to to react this was a just a very good example wherein we actually found the conversion rates increased we had a sidebar at the left-hand side and suddenly we decided to change it at the top to a B testing this is when we changed our text act to react and we saw that you know the topic increased to 4% that means when my sidebar was at this level I mean nobody would even go and click on evens so this is this we observed on evens two key takeaways from my side is focus on small and consistent wins like it's okay that you know you take more of time but give it give it give or give your best and try choosing small stuff at a time also move fast and break nothing so as you keep moving you see that there are a lot of libraries coming up just habituated I mean accept it and try learning it and implement it in your project also learn out I mean when you're learning to make sure that you're saying it to others because also we had book my show initially faced a lot of problem when it comes to you know making or trying to make learn that the HP developer the react text act but then yes whatever you learn just keep passing that's it thank you