Hacking create react app to use preact

0 0

[Music] I'm gonna do a quick intro we are using create react app but then there was the react license thing going on and then we saw that for react 16 as you can see here it's not gonna be very good for web components and any external libraries used so we were like hey what else can we do so we stopped react and we try to find a way to switch over to pre-act which what priya compact can use the same API as react but we might smaller have nice support for external libraries and web components and all this stuff so I'm gonna show this to you and like five steps start the step zero so first you set up a project with create react app and what you get is a hundred and twenty three kilobyte javascript file which does nothing it's a 38 after gzipping but of course all of this has to be parsed and it's quite big this is how it looks react just react Dom takes up 80% of the whole thing so then I was looking at how this whole thing is built up and and well what I found you can do is you take the scripts that react is using which is this in react scripts build and real scripts start and then you just hack web pack to replace anything that's react with pre-act compare and react down would also create combat so this way when you run build or run start then you will actually get pre act in your code for testing it's a bit trickier what what you need to do is replace a bunch of stuff in just you can check this repo the URLs up there if you can read it and I did need to hack it a bit I take the module constructor of note to resolve the just config to this replace just config and you write test a little bit differently but you have render and shallow render and you can have snapshot testing and run stuff there's also this hack which is because of Babel pre-sale react that itself and source but basically you're still writing the same code and it becomes 38 kilobytes before gzipping and 13 afterwards so after this I was looking at what else can I do so I I was like okay we don't need ie 9 and 10 so you can patch be able to use ie 11 as a target I also made a really really shitty less compiler with watch which you just changed some stuff where is thank you Jason it's gone here that you build the CSS and wash the CSS when you start or build or test or whatever then our security guys were like hey we need some resource integrity right now and I still didn't want AJ because I just don't want to maintain wet pad coffee because it's all the same everywhere why should you so you go in and you push to the plugins to add the ESRI plug-in to web pack and it just works out of the box so yeah you can check the repo here and still have one minute so here's a picture of my cat [Applause] [Music]