From jQuery to React
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Untertitel |
| |
| Serientitel | ||
| Anzahl der Teile | 561 | |
| Autor | ||
| Lizenz | CC-Namensnennung 2.0 Belgien: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/44280 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
FOSDEM 201949 / 561
1
9
10
15
18
19
23
24
27
29
31
33
34
35
38
39
40
43
47
49
52
53
54
55
58
59
60
63
65
67
69
70
78
80
82
87
93
95
97
102
103
104
107
110
111
114
116
118
120
122
123
126
127
131
133
136
137
139
141
142
148
153
155
157
159
163
164
168
169
170
171
172
173
174
181
183
185
187
188
193
196
197
198
199
200
201
205
207
208
209
211
213
214
218
221
223
224
226
230
232
234
235
236
244
248
250
251
252
253
255
256
257
262
263
264
268
269
271
274
275
276
278
280
281
283
284
288
289
290
293
294
296
297
300
301
304
309
311
312
313
314
315
317
318
321
322
327
332
333
334
335
336
337
338
339
340
343
345
346
352
353
355
356
357
359
360
362
369
370
373
374
375
376
377
378
383
384
387
388
389
390
391
393
394
395
396
406
408
409
412
413
414
415
419
420
425
426
431
432
433
434
435
436
438
439
440
441
445
446
447
448
453
455
457
459
466
467
471
473
474
475
476
479
480
484
485
486
489
491
492
496
499
500
502
505
507
508
512
515
517
518
529
531
533
534
535
536
539
540
546
550
551
552
553
554
555
557
558
559
560
561
00:00
Virtueller ServerHybridrechnerWeb-ApplikationClientOpen SourceTransformation <Mathematik>Ordnung <Mathematik>RenderingCodeBitDatenverwaltungMechanismus-Design-TheoriePhysikalismusZusammenhängender GraphRuby on RailsCASE <Informatik>ZahlenbereichBenutzerbeteiligungMultiplikationsoperatorKartesische KoordinatenRechter WinkelEreignishorizontRoutingProzess <Informatik>Dienst <Informatik>ServerSoftwaretestTermEinfach zusammenhängender RaumCoxeter-GruppeComputeranimation
03:59
Ruby on RailsZusammenhängender GraphZentrische StreckungQuick-SortOrdnung <Mathematik>Web-SeiteCodeClientTransformation <Mathematik>Mechanismus-Design-TheorieKonfigurationsdatenbankFunktionalElektronische PublikationMathematikGeradeMathematische LogikSelbst organisierendes SystemEin-AusgabeComputeranimation
05:51
Zusammenhängender GraphObjekt <Kategorie>Programm/Quellcode
06:13
ProgrammbibliothekZusammenhängender GraphRuby on RailsEndliche ModelltheorieWeb-SeiteDämpfung
06:33
MusterspracheUnternehmensarchitekturOffene MengeKartesische KoordinatenMusterspracheOpen SourceBootstrap-AggregationZusammenhängender GraphComputeranimation
06:54
Zusammenhängender GraphRuhmasseInformationsspeicherungQuick-SortMechanismus-Design-TheorieClientMathematikTaskLesen <Datenverarbeitung>KonfigurationsdatenbankGruppenoperationComputeranimation
07:48
TexteditorURLGruppenoperationOrdnung <Mathematik>InformationsspeicherungZusammenhängender GraphKartesische KoordinatenFunktionalMenütechnikWeb-SeiteElektronische PublikationFlächeninhaltCodeObjekt <Kategorie>Cookie <Internet>Mechanismus-Design-TheorieSkriptspracheReelle ZahlAppletBildgebendes VerfahrenXML
09:50
TabelleGruppenoperationCodeMathematikOrdnung <Mathematik>InformationsspeicherungMaßerweiterungKartesische KoordinatenHyperbelverfahrenVirtualisierungZeiger <Informatik>Trennschärfe <Statistik>SichtenkonzeptRenderingZusammenhängender GraphCASE <Informatik>GruppenoperationComputeranimation
11:39
Objekt <Kategorie>Kartesische KoordinatenWrapper <Programmierung>Zusammenhängender GraphFunktionalEin-AusgabeBildschirmmaskeComputeranimation
12:39
LastIntelVerschlingungTurbo-CodeVolumenvisualisierungRouterKartesische KoordinatenWeb-SeiteWurzel <Mathematik>UmwandlungsenthalpieGamecontrollerRoutingClientRuby on RailsRenderingRouterTelekommunikationEinfache GenauigkeitZusammenhängender GraphMechanismus-Design-TheorieBitQuick-SortServerElement <Gruppentheorie>PunktwolkeVerschlingungWort <Informatik>LastTurbo-CodeProzess <Informatik>Rechter WinkelCASE <Informatik>MakrobefehlReelle ZahlGeradeFlächeninhaltComputeranimation
15:37
VolumenvisualisierungDedekind-SchnittRouterWeb-SeiteClientRenderingRoutingServerDefaultFlächeninhaltTotal <Mathematik>VolumenvisualisierungWhiteboardURLMixed RealityObjekt <Kategorie>VerschlingungComputeranimation
17:36
Einfache GenauigkeitKartesische KoordinatenWeb-Seite
18:07
BitObjektorientierte ProgrammierspracheRouterWeb-SeiteComputeranimation
18:37
Zusammenhängender GraphKartesische KoordinatenServerGraphAttraktorWeb-SeiteEinfache GenauigkeitTaskClientMultiplikationsoperatorMereologieTermDickeRenderingBitHybridrechnerGanze FunktionComputeranimation
21:26
UmwandlungsenthalpieRenderingKartesische KoordinatenServerSystemzusammenbruchApp <Programm>LastFront-End <Software>Ordnung <Mathematik>Quick-SortDebuggingWeb-SeiteGüte der AnpassungMultiplikationsoperatorEinfache GenauigkeitClientObjekt <Kategorie>Projektive EbeneDienst <Informatik>Turbulente StrömungNichtunterscheidbarkeitBildschirmmaskePhysikalischer EffektComputeranimation
25:05
PunktwolkeComputeranimation
Transkript: Englisch(automatisch erzeugt)
00:14
before recording, and with the paper.
00:39
Thank you. Yeah, okay, it's good.
00:43
It's on? Yeah. Thank you. Hello, everybody.
01:00
I hope you pass a great FOSDEM event. Right now, we have a great presentation, how to migrate from jQuery to React, and I think a lot of people has work to do that. Thank you a lot for the presentation.
01:22
Hi, everyone. It's amazing to see so many people in JavaScript room. And so today, I will talk about the process, the transformation from legacy JavaScript from server-side rendering into a more modern web application, which in our case is React.
01:40
So first of all, my name is Amir. I work at Reddit for more than three years, and in my team, we mostly focused on Foreman. Foreman is an open source for a management tool and to servers, physical servers, and of course, virtual servers.
02:01
So Foreman established in 2009, and in 2009, Ruby on Rails was very popular. So we used Ruby on Rails, and we used server-side rendering. So today, I'll start with the first steps. What you should do. What the first step you should do
02:20
in order to start this process, in order to start this transformation process. After that, we'll talk about the connection, how to communicate between the old world, between the legacy JavaScript and the new world. After that, we will talk about client routing. Do we need client routing in our modern application
02:44
in hybrid way? And after that, we will wrap up things, and we'll talk about long-term goals. So let's start from the first steps. So first of all, why React? Why use React? So we have plenty of reasons for that.
03:00
I think the number one reason, of course, is performance. React renders only the components that has been changed. So your web application doesn't need to re-render each time. Of course, you can scale up things very fast. Due to the mechanism of components,
03:22
you can start from small, and then you can gain some complicated components after that. React is great community, and I don't have to mention that, of course, and with great packages. And it's fully testable with just an enzyme, and you can just, with one second,
03:40
you can write a test. And of course, the debugging stuff with React, you can see, actually, you can see the code in React, and you can understand immediately what happens. But with legacy JavaScript, it's a bit harder to do. So be my guest and see this thing.
04:01
So this is our legacy. One file, one JavaScript file. As you can see, it's very long file, more than 800 lines, and it's very difficult to debug. If you change something here, if you change that jQuery stuff, other functions can be changed as well.
04:21
So it's really difficult, it's really frustrating to debug this file, or even to change things, small things, or you want to do some refactoring, it's really frustrating to do. So that's the major reason we did that transformation. So our approach is start from small,
04:42
which means bottom-up approach. Start from basic components such as buttons, inputs, and you can gather these components, and you compose it from these components, much more, of course, complicated components. And with these complicated components,
05:02
of course, you can reach and have a full React page. So that's our logic, start from small, and then, of course, scale up. But first, let's imagine we just wrote a button component. We need to combine this component in our Ruby on Rails page.
05:24
So we need some sort of mounting mechanism to put a new code, a client code, client rendering code in our Ruby on Rails page. So we need to use some sort of mounting mechanism. So we have that function, that mount,
05:44
and the component we want to put in our Ruby on Rails page. But first, we need, of course, a registry in order to register that component. So we have a component registry, so let's imagine we have that button I mentioned before, and I just need to add it to my,
06:03
to our object, to our registry, and then we can mount it with the mount. So the mount, as you can see here, is a Ruby on Rails model. And with that, we can mount components,
06:22
we can mount React components in our Ruby on Rails page. So that's great. But instead, of course, to write your own components from scratch, you can use all the libraries. So I don't know if you're familiar with React Bootstrap, but it's really well-famous. And of course, we use and we contribute to Patternfly,
06:43
so if you have enterprise applications, Patternfly can give you really nice design and really nice components, and it's open source, of course. So this is the first step you should do. You should have some sort of registry,
07:00
and of course, a mounting mechanism to mount your components. How about the way to communicate between these worlds, between the old world and the new world? How we can communicate between these? So we use for that task, we use Redux. And why Redux? Because Redux is very easy to understand what's happening.
07:21
And of course, with Redux, you can access to the store. The store is your client data. It's like your massive data store of your client. And you can invoke actions, and when you call some actions, you can change the store. And if the store has been changed, it forced the component to be re-rendered.
07:41
So with this, we can control our components. And of course, we can subscribe the store for changes, and we can call a specific callback. So we use a special object, a global object, in order to be the glue between these layers. So as you can see, each entry here
08:01
can be just an ES6 function, or can be action that we can invoke later. Or as you can see here, we have subscribed, so we can subscribe to the store. If the store has been changed, we can run some callbacks, or we can gain some data from the store.
08:22
So for example, this is a page in our application. So this one, the layout, as you can see, the menu here and the top bar here, is fully based on React. And as well as the breadcrumb, as you can see here, still is, it's a React component. But beneath it, this area is not React code.
08:42
This area is a server-side rendering, OBE on Rails. So in order to communicate between these breadcrumbs and this name, as you can see, it's the same, and we need a way to communicate between these. So we use that ecosystem.
09:01
We use that mechanism. So as you can see here, this is a file which we import the store. We import a specific action that changed the breadcrumb title, and then we can just invoke that.
09:21
We can create a function that invoked that, dispatched that action. And with this, we can actually change the breadcrumb, the React component. So as you can see here, we use that function, update title, in the legacy JavaScript.
09:41
So it's jQuery, and we can just apply React things in jQuery code, in legacy code. So another thing, as you can see here, we can subscribe to the store, and if the store has been changed, we can run this callback, and this callback
10:02
allows us to reach the store, check the last action, and check if there's some errors, and we can just alter and change our legacy code, our server-side rendering code.
10:21
So as you can see here and here, I use jQuery, and I alter and change my legacy code. I cannot change React code with this. I can change only legacy code, because with React, I have access to the actual DOM, and I don't have access to the virtual DOM, and we'll talk about that later. What about the opposite way?
10:42
What about how we can use jQuery inside of our React component? Do we need it at all? So sometimes you do need it. In our case, we use select-to. Select-to is extendable jQuery, a nice one, really nice one, gives you a lot of features
11:01
in your select, and we decided, in order to keep our application unified, we decided to use select-to-jquery extensions in our selects, even in select in React. So let's see, first, how does it work? So as I mentioned before, we have the virtual DOM and we have the actual DOM. So React uses the virtual DOM,
11:22
and we need some reference in order to reference the actual DOM. We need the pointer to point to the actual DOM. So lucky us, we have React-to-f. So React-to-f is a really nice thing that React gives us, and as you can see here,
11:42
this thing, this dot select, is a reference to the actual DOM. So I can apply jQuery function from React component. So this is select, as you can see here. It's a wrapper for our select in our application.
12:05
So this dot select is the reference, and now we can initialize that reference. So here, as you can see here, I have the ref inside the select input, and then I put that select, which is the actual DOM,
12:25
I put it in this object. So now I have a reference to my actual DOM, and I can apply jQuery function inside of it. So that's the opposite way, and sometimes you need it.
12:40
So that's about how you can connect, how you can communicate between the old and between the new, between these worlds. And it's very important, because when you started to do that process, you don't rewrite your entire application in one day. So it's really important to have some sort of communication.
13:00
What about client routing? Do we need a client routing in our hybrid approach? So in Ruby on Rails, we use TurboLinks. And TurboLinks, in fact, mimics the feel and looks of SPA, single page application. So how does it work? In a few worlds, TurboLinks just swap the body element
13:24
between the new page and the old page, instead of, of course, full page load, and it makes your loading faster a bit. So you have the feeling that you have a single page application. But what about combining TurboLinks and React?
13:42
Does it work together? So we try that, and yes, it works together. But what if you have plenty of React components in your page? It's basically based on React components, so you don't have any server-side rendering. So in that case, do we have some benefits from TurboLinks?
14:01
And the answer for that is not really. So we decided, we looked into something else that will give us some benefits. So that tool is React Router. But wait a minute, we have server-side rendering, we use Rails, Ruby on Rails. And so how this can work in our application?
14:23
So we do some research, we do a POC, and we manage to combine these two. We manage to combine between client routing and server-side routing. So how we do that?
14:40
So we use React Controller, a specific controller that you can inherit after that, and that React Controller is rendering a specific React layout, which is still in the server-side area, which is very small, it's a very lean layout. It's not the layout you're familiar with, the urbanness, it's a really lean, really small layout.
15:03
And after that, in the client, we have a root component, which wrap your component, and of course, we have a switcher to switch, to distinguish between pages, to render the right page. And of course, if it's not a React page,
15:22
we should take the real page, we should render the page from the server. So we should use some sort of mechanism for server-side rendering, and client-side rendering together. So this is our,
15:41
root, as you can see, the router is wrapped, our layout, as you see before. And this is our switcher, and with the switcher, we can switch between our pages. So how the switcher looks? So the switcher looks something like that. So I have the switcher, and I iterate over my entire routes,
16:03
as you can see here, and my routes, and by the way, these routes are only the client routes, not Ruby on Rails, not the server-side routes. So if I have a page which I would like to render in a client rendering, I have this in this route object,
16:23
and then, as you can see, I render it with a client-side rendering. But what happens if that page is not React? What happens if my local, my current location is not React-based? So I have a default route, as you can see here,
16:41
and with the default route, I just use two rings, as you can see here, and then a server-side rendering appears. So we have a client-side rendering, and we have a server-side rendering together, mixed. So we benefit with these worlds.
17:00
So I would like to show you a demonstration of that, and first of all, please have a look on a page with two links with no React router.
17:41
So as you can see in the spinner here, and you can see that this page is, it's not a single page application. It's not single page application behavior. So let's have a look, it's skipped a bit,
18:13
with React router.
18:20
The same page, it's almost instant. So as you see, it's really amazing
18:42
to use React router, even if you have, most of your page are based on your server-side rendering. So you can scale up it, you can scale up things, and start from small, start from one React page, and after that, you can have, you know, when you have that feeling in your application,
19:03
I bet in, so it's only a matter of time that you use this kind of pages. You use this technology. So for long-term goals, is hybrid enough? So it's not a question of, it's not that, the question is something else. The question is, are you, do you wish
19:24
to rewrite your entire application? It's a really tough task. It's a really time effort. It's a really time-consuming task. So do you really wish to rewrite your entire application? So I bet you don't want to do that at first.
19:43
So in our approach, we thought that it's really better to use single-page application infrastructure, which means to, at first, to make your effort in infrastructure, and not in just rewriting your entire application, because with that,
20:02
you enjoy the technology now, and not just rewriting your application. You have the benefits of React now with hybrid approach. So when you have that infrastructure, which means you have better API, such as GraphQL, which, of course, use the client better,
20:20
you have client routing, as you've seen before, and you have plenty and plenty of components. And when you gather these three, it's only a matter of time until you become, until you become a single-page application. So yeah, it's not a matter of do you wish to rewrite your entire application? You will enjoy from this rewriting task.
20:43
You have fun with that part. But you still have that feeling today. You still use the new technology today, and not in the next future. So thank you very much.
21:11
Yeah? The format, what?
21:25
The format, what? Before, that went a bit fast for me. Like, what did you do here? Oh, in this specific page? No, just like with the format thing. You tested how fast it was, with and without Turbolinks?
21:41
Yeah, and we just put React Auto, and it's based on React, and it's client-side rendering. We don't use server-side rendering. We don't do round-trip to the server in order to get HTML. So it's much faster, just get JSONs and data, and you don't get any HTML from the server.
22:02
So it's much faster. Basically, it's single-page application. Single-page application, yeah. So with single-page apps, usually what happens is, they grow so much that the initial load
22:22
is impossibly long, and then the data that gets pulled from the server, also people usually, hey, I need all the people in my app, and not just five of them, and what happens is, they load all of them, they have it on the front end, and then they do stuff with that,
22:41
but the rendering, just parsing the requests from the server, in that case, starts getting too long, and I have seen where a single-page app has so much data to go through on the front end that that becomes a bottleneck, and I've seen stuff crash when you have too many objects, so how do you do that?
23:00
So it's for sure that single-page application is like an application in your application, because you have the server side, you have the backend, and then you have the client, so it's something else. It's not just like we used to be to have full-stack engineers that do both. We have some sort of application in our application.
23:21
So yeah, it's a bit complicated, but you gain a lot from it, so if you look at the, you know, in the next future, not what happened now, it probably, for us, you know, not for our project,
23:40
we took the hybrid approach because of that concern, because it's really, we don't like to be, to distinguish between our, in our application into this backend and client, and we want to have something more hybrid, something that combine between these server-side rendering and client-side rendering.
24:00
Yeah, we have the last question here. Could you share more about the price, how many working hours caused this relitening from jQuery to React? Sorry, again? Could you share more about how many working hours caused this relitening from jQuery to React? Okay. Price.
24:21
So from jQuery to React, so it's really a good question. From jQuery to React is something that you don't do instantly. It's something that you, you know, you join that technology because you want to gain something more.
24:43
With jQuery, you cannot do, you can do the same things like you do with React, but it takes you much more time. So you have much more benefits with this ecosystem, with this, of course, a hybrid approach because you still enjoy from new technology, from React, from packages, from, you know,
25:02
from new stuff, complicated stuff, but you still.