How to build and deploy a flexible React:Django hybrid application

This video features Kensuke Numakura and Patrick Sneep at DjangoCongress JP 2019 in Tokyo, Japan.

How to build and deploy a flexible React:Django hybrid application
0:42:40
Published June 9, 2019
408 views

#django #python #programming

Speaker: 沼倉健介(Kensuke Numakura) Patrick Sneep

Djangoアプリケーションのフロントエンドとして、メンテナンス性高くUIを実装するために、ReactなどのJSフレームワークを採用することが増えています。本発表では、Djangoのviewレンダリングのシンプルさと、Reactコンポーネントの柔軟さや再利用性を生かした、React/Djangoハイブリッドなアプリケーションアーキテクチャを紹介します。私たちのプロダクトGenomelink(https://genomelink.io)において経験した問題や知見を共有できればと思います。

Transcript

2,168 words · auto-generated Show

Automatically transcribed, so expect mistakes in names and technical terms.

0:14

Speaker 1: And I So I don't know about it. How do we deploy our address to the application to type of Knotling program? Yeah, but

1:00

Speaker 1: Your son has opened up because I think it 's not easy to start up okay. San Francisco , I must take it. Serious on the marketing company scale and years into the service generally. Okay , huh?

2:22

Speaker 2: E que eu han sido controla nettet, hogy jam motorni to non göra. Yes, the soil my knee choice. Down in our template So single page application.

3:14

Speaker 2: So API needs to be a good idea. So, open touch that the law. You know what I'm saying?

4:00

Speaker 2: You know, that complexity of the high -free key I can't actually arrive. Hejdito. A full is all your Dynaformatsky. The highlight of your thought. I have an artificial fashion.

4:49

Speaker 2: So it's not all up to something that you can do the DNA to the same thing. Not say Hello, up you are single pitch up e dental.

6:11

Speaker 2: Complexara , template to cara. We have to know things, we have to up the new start.

7:01

Speaker 2: That's an accord Oh, it 's a cute thing that's really hard, Mabasa. So there are Yakto 's got the PG. Tutana, kiddo , yeah, sentence, come on IPG, that's not the water , I do That's not funny else. That they are into all of the EU the future of the U. S. All of the U, third-party line is got there. Yes, to Tabana, something called

7:47

Speaker 2: Shibano Page. Microsoft SEO at search engine optimization, real kg swap. For landing kg rock. Can take it to that. It's good things. Up to Jamozical again in the add-in console tour, and scaffolding the sky back So

8:32

Speaker 2: I've been watching the shall I look at the personal sense to be my own. See , so temperature up here. It's got this. I didn't know how to go. Time when we call up , you have to matter to react to the key colour. So as example, what do we have to model for touchboard?

9:33

Speaker 2: The follow page of browser , test the start , get flash dashboard and stuff. The view of function U, isn't it? Yes. Was that changed that data model method of variable? To give up.

10:26

Speaker 2: I shouldn't see this next. The call of soil reactor me if it's like this. Jason down less cut there, so we have an output to what Jason string Template Toto Shuyakushi Masta Kino, Tondaitai to a Hombana to issu le.

11:12

Speaker 2: Dashboard up in the phone. I don't care. So dashboard up in the moment. That uh founder of bookback, I thought they were canceling my more watch dots, what more typical questions feel? Which one's like a so you have divine IPONET or Jacobs up? Template to Kara Trops the JavaScript hands to me.

11:57

Speaker 2: Imagina la canción para la kit or data. Render you are talking about the time to go. Right, enter into point to this. Well the other time for the cut, it's for cut up into That's why , for the hunt of rap leaf, on rack up feeling, for the staff. Wenn der Kopf

12:43

Speaker 2: so tot , jagt ab hier still. So how those good metal selectors between any dog So I think you might the Django if the back end or time it's your front end on your

13:29

Speaker 2: Pretty much it took. I mean, head on

14:14

Speaker 2: the new summit, the authentication was then client. Slip So the community is nice. So it also done any. Then the temperature markets are

15:01

Speaker 2: data or something. Imag no sector. It will not be got to be too laptop you not can style components that you like yourself. Style components

15:46

Speaker 2: like the CSS in JavaScript.

16:48

Speaker 2: No , you need the one to make the one to make a cardboard , but a to my moss. I'm gonna say the file. Say taking statistics.

17:34

Speaker 2: And so I'm sure Deploy and for most XMAQ type. Okay

17:52

Speaker 1: , but you've actually picked it up there, um, that's the jam, but you have to navigate that. Please

18:53

Speaker 1: Et library a hyper , the control. It's a whole for the day and application taking the five plus. Jak to zajedni pozycko? Jak to kopajosła jest mandorwisz? The design you know process there , but still there's no compiler bundle of script you know commandos

19:46

Speaker 1: Sorry, the mic just for you, ecco già political static , ecco fine studies, no tempo. Mark, well yeah, you know why it's saying it was the scale meant for afterwards. Mark, see bringing into some east because The must send off the thing over all the bags to get or the CSR setting product something you're done with. We got a lot of child within the skill, but we have to localize that.

20:32

Speaker 1: That 's the meeting.

21:20

Speaker 1: It's the code, of course, posterity. Qual é o design triangelata? Juka vannek a lot tai stannua aika. It does have the trade. Yes, we are stunning to have a free me all. See the other store.

22:06

Speaker 1: Study to temperature. So you'll make scores up to be more because I'm tempted to make city study to Five years old, if you have a page and make it more page , we'll see. They say when you get my proposal, so they 're seeing what that's cool. The AWS is the most things they want to do.

22:52

Speaker 1: A particular hype sheet, a lot of time they take it to level the stream out of the stream. This is only with the primo sequence. Il y a ton masio. Y a tu abandoné, y a tu style. So they're all studying five or state high school studies for months. Stage is I1. Some of the

23:37

Speaker 1: Rosai for it to set it as the IO is C. After stage it. Già non salvava e per un po' se on a fancy unit. On condition

24:25

Speaker 1: Statify no casual control, statify the meat or hash skip , and so they know that. Omo kosete positivity to ginkhamon denos kummer to lie to. Not to police. The thank you, but

25:11

Speaker 1: we'll highlight the sky of it. The moment of total is good. Container, you have a component of your capital.

26:05

Speaker 1: This part of the single page and disposed to more to know it yet to see now. Oh you like that to the market. That 's the key on the state gave a whole mass type. It sounds like it was gonna

26:50

Speaker 1: talk about the You are easy always. It was too much.

26:59

Speaker 3: I uh go to the microphone.

27:19

Speaker 1: Ah, tieful, it 's nick. You're falling gift. I feel this.

27:24

Speaker 4: Ah, you tie

27:25

Speaker 1: a little And it's one. Allo , you say holla attack your jamboys of stuff like she must do. Temperaturen criteria, cancel more to adapt your moment. So you're all here. I

28:00

Speaker 4: 'm going to still say it.

28:05

Speaker 3: Hey, Matton, can you let you push them on the crew?

28:47

Speaker 1: They might also have a lot. You are nine. Now it's a pretty side to go there, but it's all three still on me, so countries are all

29:04

Speaker 3: short

29:16

Speaker 5: The hot reloading devices. How does that work when it's kind of Like I've done a full like a client full you know full client side rendering before. I understand how the hot reloading and everything works. Does it uh how does it work with the hybrid app? Does it just work out of the box?

29:32

Speaker 2: Yeah, hot reloading. So the just to make clear what we mean when we say hot reloading, right? There's I guess there's maybe two different types of hot roading you can talk about in this context. Maybe I'll answer the question.

29:47

Speaker 5: Yeah.

29:47

Speaker 2: Um the when you use normal um webpack depth server just standalone and you talk about hot reloading. I think what you mean is that you change the code and it will reload just that part of the code and the state will stay the same right after running app.

30:05

Speaker 5: Yes

30:06

Speaker 2: Yeah, so that's we didn't get that far yet. So what it means is you don't have to um restart uh the Java server or anything, you just keep that running and when you change the JavaScript code it will um use the uh the in-cache memory of webpack dev server so that after a few seconds you can reload the page and um And yeah, I can try it out, but it will um reset the state of the application. So it's it's um maybe not the same thing that we're looking for. So this we haven't added yet. Um But yeah, we haven't really remissed it either so.

30:46

Speaker 5: Great, cool. Thank you. Uh not not much. I've just been uh recently been working on uh single page application so that we can head around. that and also

30:58

Speaker 2: Django on the back.

30:59

Speaker 5: Oh yeah Django background. Thank you.

31:03

Speaker 2: Thank you.

31:06

Speaker 3: Hey Rashad.

31:23

Speaker 6: Por esto vemos I used to got the door

32:02

Speaker 1: Mother Jason. Jason , the I mean it's all covered in the source.

32:52

Speaker 6: eso diana As this

32:53

Speaker 1: name is near. No lock. Astadi Sala Jambul I can use that so still study Kimon usually I'm not D. Then most of the quiet global study study must see. So

33:35

Speaker 6: what I killed that they are in how you have to say.

33:54

Speaker 2: Some of your computer I like this color. I have some damage.

34:10

Speaker 3: Ai , o cara. There's some just a little bit. So

34:49

Speaker 1: that 's the funny thing. I

35:19

Speaker 7: was uh Do

35:28

Speaker 2: I make some folding nostrils on the way? Lift all. Pick up my tongue, do make some like this. Kidders are rather kickbook with chip on simple now. Kidders are in the inspiration. Are you

35:46

Speaker 3: like a little button? Joo, enemmän.

36:24

Speaker 7: David This one is an element to this type of span, cause of Fred Apples on which we're going to be able to do this.

36:35

Speaker 1: I don't think

36:38

Speaker 7: we start figuring this in the check or supposed to pay.

36:41

Speaker 1: Uh this is that So why do they have the period of the API?

37:10

Speaker 2: Ah, Dutch. Ah, six banned your wall. Come on, come That's a good cut down. A hype.

37:43

Speaker 5: How do you handle the unit testing or like an integration test? How do you

37:53

Speaker 1: Yeah, uh a good question. Um we maybe write E2E test only, or multi-e to e test, or we are we have to read it up Uh previously we used storybook um for some React side testing separately, right? Now that it's a bit hard to make things, so now we made the DJ test to combine the react world and jam world.

38:34

Speaker 2: So we have no unit tests on the on the front end. Um but for doing the end testing what we do is we deploy everything. Um and then we run on Action Server run the whole testing suite using um where uh

38:53

Speaker 1: yeah so we use the we need from uh from channel side so we are test i test into and to and test and test the behavior of react through the through the channel cases

39:11

Speaker 5: So you use Selenium to basically uh uh manipulate the application rather than instead of checking like is this context exists or exist state equal to

39:25

Speaker 2: we don't use tests or anything like that so we don't run names this front end only tests we don't run Um yeah. We just test like the important parts of the app. Also we have a lot of the app changes constantly, so It's also a pull out of effort. Like if you check like details about the app itself, like you feel like you have to rewrite the test every week anyway. So I don't know so far we haven't done But of course it's better if you have more tests, but so far we have doing got a good balance out of just using the end crank.

40:13

Speaker 1: What's going to happen about?

40:15

Speaker 3: Yeah, hey, I'm open there.

40:21

Speaker 2: So we took the exposition isn't opening high. So example for the repository or stuff about the synchronous Example of the master. It's pretty much the car. Try order like the order of the car. I guess that was a little

41:06

Speaker 2: fun to do that. Oh, cool. Props also print out the set of it. So yeah , so So they're performing the top toll. Oh big things more. So there's our communities. The cars are the one to tap here, so I'll do that. This is most interesting , but you know , new teams or most of the arc up to the panel. So now that's

41:51

Speaker 2: the right data.

42:06

Speaker 3: C C zero. I think the hype. That's what it's hype.

42:12

Speaker 1: CC zone. Well I don't know it might be because I'm not going to be able to do that.

42:25

Speaker 3: I got the microscope. I thought I'd think about the possible game but that I'll be

Questions this talk answers

How does hot reloading work in a React-Django hybrid app?

The webpack development server can reuse its in-memory bundle, so you do not need to restart the Django server when changing JavaScript. However, the current setup requires reloading the page after a few seconds and resets application state; React-style state-preserving hot reload had not yet been added.

Discussed at 29:32

How do you handle unit and integration testing in a React-Django application?

They do not currently write separate front-end unit tests. Instead, they deploy the full application and run end-to-end tests with Selenium through Django, testing important React behavior and application flows; they previously used Storybook for isolated React-side testing.

Discussed at 37:53

Note: We understand that names change, people change, and bodies change. We respect each individual's journey and privacy. If you have any concerns about a video or need us to remove content, please don't hesitate to contact us. We will handle your request with care and promptly address any issues.

More videos from DjangoCongress JP