 Can you hear me? Yeah. OK, so yeah. Yeah, I'm Xiang Yu from Singapore Power. I joined Singapore Power like two months ago. Yeah, I'm quite happy there. So yes, today I'm going to talk about React on a real sub-backpacker approach. So the reason that I got this slide here is that because we have some complex frontend logic and when I was dealing with it, the initial code was in GQuery. And it's a lot of GQuery updates. And I feel it's really bad. I mean, it's really hard to maintain. So I'm thinking probably I should take the help from React and Redux. So yeah, finally, I did some experiments and now it's working fine. And actually, frankly speaking, I'm quite honored to talk about React in Facebook here in Ruby Meetup. Yeah. Thank you. So yeah, long story short, I see I just do a little bit of demo of what I actually got in the end, which is localhost. Yes, this is what I got. And basically, if we take a look at the experiment. Yeah, I'm a bit nervous. So yes. So basically, we can see that we actually got two React components and a two React connected with Redux. And what it has is, number one, it has style. I forgot. Let me see what the folder name is. Oh, I'm here around folder. Yes, this is one Webpack to demo. So I put it here. So basically, what we can do is we can actually change it to red. And it's red. And we can change it to a back. And then what else? It basically is hot reload, what they call hot module replace. So I can add some to do here. And I can add some more. And I can actually modify on the fly, which has been demoed a lot of times in other framework. But today, when I check online, there are some existing talks I found out. There are some people talk about it already. And then, yes, basically, as you expected, if I do some modification here, we can see something got changed real time. And we can also do change some logic here. So basically, this reducer. So I assume that I don't need to explain about how Redux works. I'm not so sure about this. I will explain later on. It's part of the slides. But for the demo purpose, I just. So basically, now if I add to do, I'm not adding to do. Oh, sad. OK. It's having some issue, obviously. Oh, I know why. Yeah, I know why. Yeah. Sorry, this is not part of the plan. So I know why. I know why. Just now, I was doing some change. And this thing give me some error. OK, fine. What should I do in this case? But it's not related to. I mean, the error is because the lab reload. Actually, this thing, I guess, is this ID thing got reset. And that is probably causing issue. But I'm not planning to do a live debugging yet. So basically, I just try to show that, OK, if I change the reducer, the reducer actually got re-loaded. So basically, it works very nice that I can't even. Oh, my god, it's so good. Yeah, so basically, this is just a. Next up. This is not a React component, but still, by changing the styles, I can still change the color also. So basically, by doing this approach, it makes the development really, really fast. Because if you want to change something, you just change. And then you can view immediately. You don't really need to go back to the original state whatever. So yeah, this is a demo. And then the talk starts. Yeah. So yeah, so back to motivation. Yeah, so basically, we have some complex front end. I want to have React plus Redux to help me. And then because we are using Rails, I don't really want to have a separate component. If I want separate, I just use Node.js is good enough. So I still want Rails, but I want Rails and Sprocket. Yeah, Sprocket is good. So I still want them. And yeah, and then Webpacker, I think it's helpful because if I use Webpacker, I mean if I use Webpacker, I can use all the good things from JavaScript world. Basically, it gives me yarn. And then if I yarn, it's basically similar to NPM install if I'm not wrong. So yeah, the next thing is that I want to keep it simple and stupid. Basically, I want it to be very easy to learn. Basically, it's not like I don't really want to add in a lot of DSL. Although DSL is good. And then, yeah, in the end, I want a hot module replacement like what you see just now so that it can ease the environment. So basically, what I use is Webpacker. I think it comes by default with Rails 5.1. So Webpacker comes together with yarn and Bible and the rest of the things from the JavaScript world. And then if you click on the link, it tells you everything about how to set up since then. Of this talk, we will not cover about testing and just link because I haven't explored that part yet. But I think the Webpacker is supporting the testing just that I don't know how to do it yet. And then, yeah, about set up, there are two ways. Like if you are starting a new app, you can just do a real new dash dash Webpack. Equals to React. You can do that or if you want to use something else like View or what do you call it? There are some other Web frameworks that Webpacker support. You can click on the link and go inside and see it. And then, if you have an existing framework, I think the Webpacker supports at least to four point something. You can check on the Webpacker website for the support. And then, you can just add in the gem and do a Webpacker install. And it will set up the things automatically for you is quite easy. And then, yeah, another thing you need to do is you need to update your layout to include the JavaScript tag tag. Basically, what this does is automatically include the thing that compelled by the Webpack. So, a bit troublesome part is that now you need to have two commands. One is real serve. Another one is to start a Webpack Dev Server. It's a standalone instance. You can, basically, in the config, you can config on where to start. So, basically, you can config on the host that is listen to on the part number where you start. So that when it runs, it's actually runs like this. So, basically, you have two instances. And then, I think there is what they call proc file, oh, I forgot the name. Or format, right, yeah, format, yeah. You can use that, but, personally, I don't really like to use that approach because sometimes I want to see the specific log of each of the different, when I just go to different type, it's good for me. But by using format, you simply need one single command. So, yeah, this is the part I'm planning to explain about Redux. So, basically, the idea about Redux is like, yeah, it's just a view. So, basically, from some model, you render the view. And then, Redux provides you, it has a store. It's a global store. So, basically, from the store, you render the view. And then, from the view, when something happens, you dispatch an event. Basically, this event, it will go through the reducer and update the store, so that it triggers the MV, module, view, view, module, sorry, model, view, view, model, update. So, the flow like that. Yeah, it's not very clear. But, yeah, I think I just continue. So, Redux, how to set up Redux? I think it's quite standard. You just add in the React Redux and then, this is some of my tricks. I should probably show you my JavaScript file, like for how I set up Redux. So, basically, let me see. I need to do it this way. So, it's, that's all that I still have to do some live debugging. Okay. I'm kind of like inventing some of my own approach. Basically, for my current approach, I still use GQuery, which can be taken out but for the ease of coding I just use. And then, for the component, I give them attribute, which has the component name. So, basically, this is one of the React component and then it has a component name. But then, by the way, what I demo here is just my own convention. You can build your own convention. So, for each of the component name, you will actually look for this React component. The React component is just a couple of exports. So, basically, each of them is, my convention is that I have a React and then I have a Reducer. Reducer is a logic and React is a view. And then, the star instantiation is here, basically. For each of the components, for each of the components, I find the corresponding component and if it has a reducer, basically, it means that it has logic. It is a Redux component, so I instantiate the star for it and then put it on the view. Otherwise, I just create the element and render it on the view. So, that's how I render it. So, basically, now I basically separate out the component on my view, on my UI part. So, basically, wherever I want to use a component, I just let that, and then let the component itself handle the logic internally. This is my own approach. By the way, the code is online. If you want to take a look, I can put the link later on. So, basically, this is how I add in the Redux. Yes, another thing that we probably want to do is to pass value into React, into React. So, the gem that I use is gong. So, basically, this one, in the controller, you can specify, you can just put some attribute into the gong, and then going in the frontend is just a global variable you can get from there. But another idea, another approach you can do is that you can actually put, in the component itself, you can also choose to put some attribute here, like data, something, data name, and then use whatever approach you like to extract out the data here, and then pass it to the reducer. Pass it to the reducer, yes. So, basically, but this one, I just introduced some of my own approach. So, basically, when I first set up the reducer, I will have a global dispatch, which is like the first initialization. After I set up the store, I will dispatch the initialization event, and then the data is just from the gong. But you can have your own approach. So, yes. If you want to make the component to interact with the JavaScript code, right, you can just make this component variable, global variable, and then in the JavaScript, you can just, whenever you need it, you can just reference to this global variable. In that case, you can actually interact with the React component. Yes. Actually, do I need to go through the hot module? How I enable the hot module audio reload? Basically, I just follow the guys here. For the CSS, I just follow this issue page, CSS, a webpacker issue page there. So, the big idea about hot module reload is that whenever there are some changes, whenever there are some updates, and then the webpack will, the webpack will actually create this diff, and then the frontend will actually get this update, and then, where is it? This is my understanding one. So, basically, you can see that whenever it changes here, the update is fetched, and then, okay, sometimes I need to restart the server because I change. Ah, okay. For the CSS, I just follow the issue there, easy. And then, the server side for the hot module reload for the React component right on the server side, I use what they call, there is a gem called webpacker.react, it actually provides both gem, it functions both as a gem and also a NPM module. But the part I use for this NPM module is that you just add in some configuration for add in some configuration to the webpack. So, basically, if you take a look at this, if you take a look at here, basically it tells you how to set up, and I just follow the gem here. Yes. And then the client side, I do a little bit of coding myself. Basically, it's like, whenever I see that I can actually hot reload, I'll listen to this event and then whenever my server side change, I'll re-render my component. That's the big idea. So, basically, this, whenever the server side change and then this render got caught, this render is actually taking the, do I need to explain? This render will actually take, I buffer the star locally. Remember, we have three components, three things, the component, the react component, the star and the reducer. So, star is something that is something in the page itself is available. And then the reducer and the react component are just code. So basically when it changed, we can just replace them and then it hot reloads. That's a big idea on the client side. Yes. I think for the details of the code, you can actually take a look at my code here later on on the GitHub. If you are interested. Yes. Another good part about this WebPycle approach is that if you want to go to public, you actually hook into the asset pipeline. So, when you do a asset pre-compel, you actually put the images into, compel the images into the public folder. And also whatever asset here, you got compelled there in the public folder. So, I can do a demo. So, actually, I did this beforehand. So, now if we start the production server and we see errors, okay, fine. So, let's do a asset pre-compel. So basically this asset pre-compel is, you will read from the, this manifest.gc is generated from the WebPycle and this is the exported file that is going to be pre-compeled by Rails. So, Rails will take this manifest.gc and do the pre-compel by this sprocket. So, now if we do a Rails production, it will be there. So, we have the logic ready and then now it's without the hot replace because it's production. And the files are in public folder, that you can see the assets, the PNG and GFR inside there. Yes, and then now we need to talk. So, if you want to go with this approach, the issue that I found with the default approach, what you can improve is like, the first is the folder structure. I'll show you how the folder structure like when it's first generated. So, this is at first. So, at first the folder structure here, I'm not sure if you can see. So, when it first generated the default, by default it will put everything into this JavaScript folder. So, it's a bit weird that in the app you have a set and in the set you have JavaScript and then also in the app you have a JavaScript and then in the JavaScript you probably want to have style, a set, then it's a bit confusing. So, you can actually rename it here in this webpacker.config. Basically, it tells you where's your source pass and where's the entry pass. Entry pass is another thing. So, where's the source pass? So, if you want, the way I'll rename it is like this. So, now inside of this JavaScript I just call it webpack. Another thing I want to mention is that this entry pass is actually the files inside this entry pass will actually be compelled in this manifest, will be generated by this manifest. So, with it what it means that if you have another file here, you can actually get from the webpack.dev server. Oh, yes, another thing is that the hostname. So, basically initially the hostname is 0.0.0.0. It's some weird behavior that I observed that in Mac, right? If you go to, in Mac by default it hides this line. This one, I don't know why yet, but if you have this line and you have this setup, what do you have is, Murphy's law happens. What will go wrong, always go wrong. Dev server. Yeah, so basically, when you have this line, Dev server, that is serving the part 8080, by going to local host, you cannot really visit the server. If you have this thing in your host, and this thing is in your host by default, I think it's related to some IPv6 configuration, but I haven't figure out why yet. So, now you have it. This is the webpack.dev server, but with this enabled you, basically it's gone. So, this is something you need, like if you are facing this kind of issue, you need to take, because of the default, configuration actually has this kind of issue, and somehow it doesn't appear in the issue page of the webpacker yet. Another thing is like, because you are actually hard-holding this part number, so suppose if you want to have different webpacker servers, you need to manually config this part number, otherwise they'll conflict. My current approach, my issue is that because I'm using this gong, it doesn't really work well with TurboLink, because TurboLink is actually doing a JavaScript get, so this gong variable will not update it. So, this can be actually better improved. There are some other libraries online, but I haven't checked out. You can take a look on them later on. So basically, both of them are supporting server-side rendering, and one is like a standalone gem, and the other one is on top of the webpacker. Yes, that's all. Thank you. I'm not sure if you've got question about support I have, or about this red unreals. Sorry, in the interest of time, I'll ask any questions to be directed to YangYu after this. Yes, I can post this GitHub repo link and update the slides. Yeah, thank you.