Desarrollo web con React para programadores Django

Extracto de la transcripción automática del vídeo realizada por YouTube.

yeah so thank you for coming today to my talk just very briefly about me so I work with Jango since 2007 being a jungle coke meter since 2011 and if you ever interested in what I'm saying you can always check out my Twitter account I work on neuron we

are a web agency based in San Francisco and have offices all around the world and I encourage you to check out our website if you'd like to see what we are to so about this talk so this talk is about jungle and react and while it does assume that you know

a little bit about react are still going to cover some of the basic principles of flux and react and then I'll show some examples of how jungle and react can work together so first about flux so flux is an architecture whose core principle is based on

a unidirectional data flow now that cooperative principle is not particularly novel or groundbreaking it's been used for a long time in many disciplines like video games for example and you may also argue that it's been used in the web in general with

traditional websites if you consider the traditional HTTP request server-side pre-rendering response cycle over and over but it easily it is a bit new in the world of rich client-side web application so let's see how it all works typically it starts with

an action an action may is basically an even that is triggered by various things it could be triggered by a user clicking on something on in the user interface it could be also regular even that is triggered at a regular interval by a timer it could also be

there are being pushed via WebSockets from a server so one of our action is triggered direction is caught by a dispatcher which will then pass that and long to store a story just responsible for holding the state of your application so when a the store may

notify the state and internal data and then pass that data over to views and then the view is responsible for rendering itself you may also have sub views so in that case you will pass along that data down to its abuse and then serve use with rather than cells

and so on so what's very important in this architecture is that whenever something changes needs to change in the state of your application what you want to do is to trigger a new action so for example if a user will click somewhere on interface and you

will trigger an action a new action and then that action would be caught by the dispatcher and then you will enter this whole cycle again you will then go through this entire cycle of rerun during the entire int the entire interface react itself is really

just about this view system it just focuses purely on running everything that sits outside well there are several implementations available out there I can say for example redux reflux flam hogs flexor and an old multi there's about an hour couple dozens

extra it's it's still you know pretty new there are no clear winners at this point so it really comes down to personal preference and to the nature of your application hopefully within the next few months there will be one or two that emerge as de

facto standouts but for now I'll just encourage you to try it a few and see what which one feels the best so let's see now what some of the advantages of flex are so first of all it streamlines the rendering process as we just saw anytime that anything

happens that would might impact the state of your application you enter the the same entire rendering process which means that you will approach the rendering of your page initially the first time the same way as on the second time the third time etc and because

of that is that your cognitive load is drastically reduced because you you don't really need to worry about how the different views impact each other as the state of your application challenges you you can really focus on one particular view at a time

that that then makes for a simpler codebase because you don't have to deal with mutations for your views that eliminates a whole class of potential bugs that you basically never have to worry about and that is very liberating so all of that put together

really makes for consistent predictable behaviors and that goes a long way in making you as a developer more confident about your application now let's see some advantages of react specifically so react abstracts the down with component it allows you to

think of the architecture of your application really in terms of modules and sub-modules and again you can always focus on one piece at a time it also handles all the Dom mutations automatically we teaching the Dom is something that can be quite complex sometimes

especially in to do in an efficient way well react will handle all that for you and it is also agnostic about the rest of the stack the only thing that react really cares about is that you feel it some data and will take care of all the rendering it really

doesn't matter in which context react is used it could be used to render your entire application but it can also be used to just render one little piece of an existing website for example and I also doesn't matter where the data came from why the data

change how it was changed which means that you can use use it with pretty much any background and obviously in our case we'll be using Django so to illustrate some some of those concepts I'm going to walk you through a small demo app that I built it's

very simple it's just a list of photos you may filter those photos based on whether it's black and white or color and you can also then select some of those photos to mail them as your favorites but first let's see what are the pieces involved

so first we have Django which will be responsible for providing a REST API that allows you to access and manipulate the data server side and then we have reacted will be responsible for rendering the UI client-side and to handle all the user interactions now

let's see how the species fit together so first we have the client so that this case will be the browser react will be rendering the page and then whenever the user will click on on the photos the post request will be emitted to the server to the API and

then Django will update the database we then serialize the current state of the data and then pass it over to back to the client and then react will be able to rerun at the page to reflect the changes that have been made and we try and follow this unidirectional

flow of data now you may be wondering okay so how does react do to render the page initially how does he have access to the data to hydrate the Stahl's meaning to load the stores with initial data I'm going to cover a couple different methods one that

[ ... ]

Nota: se han omitido las otras 3.291 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.