Merken

Confident web development with React

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the but the and the and the and and the and the and the and everyone can you hear me OK yeah as so thank you for coming today to my talk I just very briefly about me as
well work would go since 2007 and being a general call commuter since 2011 and if you are interested in what I'm saying you can always check out my attitude account I work and you run we are aware the agency based in and have offices all around the world and I encourage you to go website of you like to see where we're at to so what about the stock so this studies about genuine react and why does assume that you know a little bit about react as to going to cover some the basic principles of flux and react and then I'll show some examples of how jungle and react and work together so 1st about flux so the flux is an architecture that who's call principle is based on a unidirectional dataflow now at that corpus in principle is not particularly noble groundbreaking it's been used for long time in many disciplines like video games for example and you may also argue that it's been using the web in general we traditional web sites if you consider the traditional http requests service tempered rendering response cycle over and over but it easily is a big new in the world of reach client-side Web occasions the so let's see how it it all works typically starts with an action and action it is basically an event that is triggered by various things that could be triggered by a user clicking on on something only the user interface he could be also a regular event that is triggered at a regular interval by time or we could also be that are being pushed me I would circuits from server so 1 of our lectures triggered that action is called by the dispatcher which would none has that action long to store stories is responsible for holding the state of your
application so 1 of the storm mate and modified the uh the state and the internal data and then as that they are
over 2 views an interview is responsible for rendering itself you may also have some views so in that case you we pass along the data down to its of using them so use we run cells and so on so it was very and in this architecture is that whenever something changes that needs to challenge in the state of your application where you wanna do is to trigger a new action so for example if a user will click somewhere on interface would trigger an action a new action and then that action would be called by the dispatcher and then you will enter turn this whole cycle again it we then go through this entire circle of re-rendering entire the entire interface the react itself is really just about these views history just book for this is purely on rendering everything that sits outside it well there are several implementations available out there can say for example redox reflects FIL non-strict and uh and mounted isn't about an old couple dozens of extract and it's it's to in all uh 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 we the next few miles there would be 1 or 2 that emerge as factors stand out the phrenologist encourage you to try if you want to work which 1 feels the best so let's see
now what are some of the advantages of facts so 1st of all it streamlines the rendering process as we just so any time that anything happens that would that might impact the status of your application you enter the this same entire uh rendering process which means that you will approach to the other rendering of a page initially and 1st I'm the same way as on the 2nd and 3rd time etc. I and because of that other is that you all 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 changes you you can really focus on uh of 1 particular view at a time and that all that makes up for a reciprocal based because you don't have to do with mutations for views that eliminates a whole class of potential boats and you basically never have to worry about and that is very liberating so all of that the together really for consistent predictable behaviors and i goes a long way in making you as a developer more confident about your application now this is some advantages of react specifically so react abstracts the only components allows you to think of the architecture of your application really in terms of uh modules and submodules and again you can always focus on 1 that is at a time it also handles all the done mutations automatically mutating the dog is something that can be quite complex sometimes especially in there to do in an efficient way well react we handle all that for you and it is also agnostic about the rest the stack and the other thing that we have really cares about is that you feed it someday done and we take care of all the rendering it really doesn't matter in which context reactors user could be used to render you want terror condition but it can so we used to just run the 1 little piece of of an existing works that for and also doesn't matter where the data came from wider data challenge high was charged hours which was that you can use use it with primarch any by continuity in our case we use in general so To illustrate some so this concept I'm going to walk you through a small Penal act built it's very simple it's just release of photos you may have filtered this photos based on whether it's black and white or color and you can also then select some of those photos 2 monomers your favorite but 1st let's see what other pieces involved the 1st we have general which will be responsible for providing a risk that United allows you to access and manipulate the data server side and then we have reactor will be responsible for rendering the UI client-side and to handle all the user interactions I would see how this pieces fit together so 1st we have the client so that in this case will be the browser react will be rendering the page and then whenever the user will click on on the photos a POST request would be energy to the server to the API and then Django will the database without serialized the current state of the data on and pass your virtue back to time and then react we give what true rerun the page out to reflect the changes have been made and we try to follow this unidirectional flow of data now you may be
wondering OK so how others react Due to render the page initially have this you have access to the the out to a hydra distorts meaning that to load the stores with initial data I'm going to cover a couple different methods 1 and you might think of as conventional is 1 and the server we 1st return in a pre-match empty document HTML documents and that we do and all the AJAX request to Fisher data so we can then render the content of the page and other May 30 which my thing of less conventional 1 the service industries general will serialize the data are and stick the data into the initial HTML document and a it as a global JavaScript variable and that is for example how Instagram that so now taken at who working the OK
so and you'll see the right
so so here we have a application we
have all of our photos and to the left you may shooter
there the frozen uh whether they're black and white or color we can also represent the the
same least in 2 different ways you can here is a
list or as a as a grid of
thumbnails and uh whenever you click on a photo you see that in the 1st 2 we highlight the following will also the bigger the panel to the right which assists all the favorites that have been selected so what's important to you know what I want emphasize here is whenever I feed on an event's of Austrian photo whenever I click on any of those buttons the
entire that page gets refreshed you you you can really see because reactors really fascinating that but good anybody even here triggers a full page refresh and you can see also here that
whenever the photo but did it sounds are requested it and to the server suppose request delete requests alright so now let's see how what would
the code excited going to start with
it the model so it's at really simple stuff here with can you also see that it can be bigger so we only have 2 models here the photo which we hold just all all the photos each photo has a URI now also has a boolean flag that would indicate whether it's a color or black and white and then if uh another model the favorite model which we hold physically at all the pointers to the photos that have been favored then the API at the idea was built with generous framework is your family B uh generous free market should all rules pretty on the only thing that I'm doing here that is a little bit different is for them favorite and point when I add or remove a favorite so far as the 1 I add a fair it so that's to create method here a we 1st do the the the actual action of adding the favorite to the but then I will also serialize all of the current favorites and send them back with the response and this is just a small optimization here I'm doing and I I just explained why I'm doing this and you can see here and there and doing the same for the distro method which is called when you delete or remove effect the OK so then let's take a look at view of view is extremely simple states 1 at the top Ajax hydrogen only does really is that you will run this template and it's basically untiI there's nothing in there we just have the links to arginase group and CSS around but you have decided ahead and as you can see here initially
will basically have absolutely nothing so we do need to do that 2nd AJAX request to load the data so that is done with this
function here so this function gets cold as you 1st uh displayed a page and then on the page in the browser so 1st we're under our react in main view so this rather method here is going to get called so the very 1st and then use that this is going to get called the stories and you dehydrated will then when you need data at this point so we will 1st displayed this progress bar so this is where you can see here when I refresh the page
what
step at 1 then and here I
am I'm just waiting for us again is used to simulate a slope of to a connection to the internet and but really what this what this does is that it would call this method fits data the and that you can fits data that are really only does it is restaurants uh a couple it just goes it so we call IPI fits the data on once we receive all of it then we are ready to hybrid the store so we visit the loaded data into a store at that point are you is automatically going to be re-rendered so this random method is going to get called again and that but the point was to Western displaying the progress but the progress bars to displayed on the page but at that point the store has been hydrated so we are going to run of this instead which is the I bond component that's a custom component that I've made and react would be smart enough to know that he needs to remove the progress instead I don't our uh uh at 1 component by the way you can see here that I'm using progress God that's just uh the a pre-made component that I've taken from the reactor boostrap our library which is a reactant presentation of the track but it can shows how you can build your application is a bit like legal cases the so now this drill down into our admin outgoing component the again very simple here all that we do is to add 2 subcomponents the photo panel which is basically degree the photos to the left and if every panel which is the the the small a panel to the right of displays all of the fair it's uh that selected by the user and in each case we also passed down some data are so the photo about 0 needs to know about the photos so you can run the photos and also the fair it's really knows how to highlight the different photos that have been favored and where's that theory can only needs to know about the ferrets so here you can see I would passing down to the set views stay could add to the photo panel is probably the most complex again these random method is going to get called automatically at this point the 1st thing that we do here is to just theater the dataset that we have based on those sure
words you can so be here because the resolution yeah death but this
OK so it's going to loop
have for whatever selected here to filter down and be to know exactly what
follows we need to to display and that's just
a customer said here's this indigenous crude that's going to uh go through the list and only returned for that he we actually want display all right so now that we have uh the list of that the photos to display we then ran there some more components and small subcomponents here I am going to call this a function you run the photos it's just this custom method that I have here in this class and its components class all I do here is to look through all the photos so I can do the computation i and i times find out for the police the photo the term photo is federated stock and figure out what color is finely tuned a display highlighting around it so that's despite here and then based on what we selected between the
thumbnails year all the least
option we are going to take 2 different so in this case if where forever decided that we wanted to show as a thumbnail and we don't run this and this particular photo as a thumbnail that's another component of the from the a rehab distract library and every assign a URL makes a try and a given style or if any at this
point I have selected these keys then have this this
function is going to get cold and are going to render it as a niece who and component again you can see here that isn't absolutely no code that says remove the thumbnail added the least items instead of vise versa all I have to say EI EC encode the discomfort of a declarative way I can only focus on a given state and say this is how you should displayed given the state or you displayed this way given the state or the transitions here are
basically handled by react because it's going
to go through that method every time I Ch
and you can see here that I am passing an action to use that to both methods here so when they're actually on a photo
CEO or at least I can hear
the same action is going to be triggered it's called
toggle favorite now you can see where what is going to catch the action and do with it so it's this method here 1st we try and figure out where there the comfort that's been clicked is a favorite if it is that we're going to remove offer rates if it's not done we're going to add it so let's take a look for the word adding and now he I'm going to do 2 things I really that this 1st thing is not particularly react specific it's more of an optimization for the user experience I I do know 1 weights for the round trip to the server to be able to display feedback to the user that the that that photo has been a favorited it so what I'm doing here is that I'm holding a local data structure which is basically an array and that holds all of the current favorites and I will add that photo to that local data structure and then I will call this method here property propagates state which is going to trigger for under all the entire page which is gonna cause the the photo you just clicked to already be highlighted and this is
because of the this is called optimistic abates and East 1 you trusted the back-end is most likely going to work and it is the 1 that the user wait too long before they see anything changin interface and then this is where we actually challenged the actual data service side so for that we need to run a POST request to our API and I will pass down the photo then what I do here and again this is this piece of is optional if you remember earlier I said that whenever I run an API call always return the current state of the data service side because this is really the and as the authoritative data this this is the day that I really trust the 1 instead of staying on the server I return that from the service so that I can replace my local data structure we've but the data was provided from the server and here I'm only doing this just to give myself some extra confidence that the UI reflects the actual state of the data service I if everything went well greedy nothing's going to challenge by given is smart enough to figure that out because here I replace of the day that I came back from the server I replace it with you into the local store and then propagate the state so that's going to trigger under the full run however react is going to be spun enough to know that OK well I have already made that chance previously I was I had already highlighted the photo and I see that you are asking me to highlight the photo again so I'm not gonna do anything so this is not the Cisco have very low impact on the performance and this catch method here is if something ever want long on the server that I'm going to fetch the date I again from the server and then that is also going to retrieve you're a fool and rendered and that's going to allow me to roll back the previous year had optimistically abated interface but if something went wrong on the server that's going to basically revert the change and I do the same thing when I wanna remove a server the uh favorite here I 1st optimistically remove that for that varied from my local my local storage and then pro or trigger for and there and and something I send a request to the server and since again replaced the local data with the new the the server the the the data item back from the server and remember everything so that
was for the Ajax
hydration that I mentioned earlier there is another technique for the uh purely the initial
rendering and that is this 1
so this is exactly the same then all loops and it all works exactly the same the only
thing that changes here is that we're going to be
calling this view serialized hydration so what we do here we 1st serialize the data using this arises from my API the same ones I then dumping all that stuff into adjacent objects and I passed that over to my template and here we just done that Jason object into gets DML inside and a global variable the so this is here where you can see if should the
source against the that's the object so what's the what's good about is
what's interesting about this is that it saves you from doing an extra uh eject school so it means that along with the initial HTML document you already have the DIU given to right away of rendering things now you might you want ecosystems have a gigantic amount of data that a minor be suitable because it's going to make the initial call but to server slower saying it you in to find out what and when Mr. works best for you that the Ajax vibrational there that pretty serialized and method OK
so that was for a brief demo of very there's something else I wanna talk about
which is server-side rendering service summary may be interesting in different cases 1st of all if your concern about a CEO always would be much more easier is for search engines to crawl your side and to index the content on your side Eve all back and stuff like content was free rounded at the spot of the HTML document is doing service airing also is also good for and if your audience has a large amount of mobile devices uh that it's also good because it would say some resources resource uh and CPU processing on your on your device because that would say then the effort of rendering the page initially um and instead a brother I so it's good because of since the page comes free rendered you can already stopped consuming it you don't have to wait a later time for it to run the and react made that actually pretty easy to do and the cool thing about it is that again I mentioned earlier react really doesn't care in which context it's being used as a means that you can use Jackson code to run their things on the server as you would and as shown earlier in the process and that is called universal JavaScript universal distance for the fact that it's the actual same code and use that is sometimes also referred as isomorphic JavaScript script and it's actually easy to implement if you use the right tools I recommend using by from reactants small nifty by phone application that will allow you to be service I rowing but with any Python frameworks and it does come with and uh generous support you we also need to use a very simple node it should be server to do this so let's see how well those species it together the 1st is In the client so that's a browser 1 those the user we 1st type in a URL to access a website so there would be a get a GET request sent to the server gender we then fetch at the data serialize eats it as Jason and send out over the HTTP to that separate notes that's that notes over all that it does is just to render HTML you would use the data you provided and then use the the the react components of those Chymistry react component to run render whatever component you want and then he will return some HTML China we put out all that together and send it over to the client and by that point in the subsequent refresh the need to happen we'll be done by react client-side exactly the same way as i showed earlier and the cool thing is I will use exactly the same code is the same react components but show so let's take a look at a
quick demo so it is this
function this value here
again exactly the same exactly the same
thing but works and behaves the same it's the
exact encode basically and see what
happens server-side so here this is the view of the general view that it's going to get cold here again I 1st serializer data using the same serializes from might API I We then call use a small function that's a function is provided by Python react the all in each of the past to that function is the of a reference to the component you wanna around there and then the data that you just surrealist so in the background that function is going to call that separate notes server is going to sound all that they up to of that Serbia http that node server is also very simple it's basically just a dozen line of code he will receive the data fast from general the http that contains both a specification of we each component to render an and with which data and then call that react render function which is going to use of the same but passing component that I was showing earlier and then you will you will result into some HTML which we're going to return back to General the so this is where we are now now we have all of our rendered HTML and we're ready to pass it down to engender template and here we basically just output that HTML interactive that we can see here that we have all
of the HTML mean free rounded and
has that point to the exact same rare component of taking over from there and the the same the same
happens it's exactly the same thing OK
but
this is another coupled to be sent to cover 1st about acid pipelines I personally recommend using something like what packed and Goepel and browser or go and brother if I for a bundling all your JavaScript code up until about a year ago I was using pretty heavily general pipelines and gentle compressor to do that sort of stuff but the 2 leading in the JavaScript word has improved a lot in the past year and now I think it's a bit more flexible to use this javascript tools to handle that stuff and also and for developers already used to using those tools on a field much more confortable using those as opposed to moral opaque tools like a general pipelines or compressor also recommend using babble forward J 6 transpiring j 6 is that temp each syntax that there was no showing in the the code samples earlier that run react users and babble which is transformed into actual JavaScript that your browser can indicate and finally 1 1 comes the time comes to push coach to production than I recommend using gender study files and the AP and also on the manifest 35 storage which we apply a unit has to each all your assets which would guarantee that all the cash is in your browser in CDN it's it's a try would be busted on your users will be using the very latest version of your assets and finally I was going to talk a bit about testing a good test reads should contain some unit test for that you could use some JavaScript frameworks like just minimal can just to unit also are recommend some functional testing for that you can use something like selenium and doing good that's come with some support for that and particularly the nicer at this case if you're interesting all that stuff you should stick around because there's going to talk right after this that's gonna cover some of those topics but also on the cover 1 particular method which is sort of a hybrid between unit and integration testing and values actually using the same tools as I was describing the earlier about server-side rendering even if you don't really care about service rendering you could use the same tools to do some amount of testing i'm going show you had a works but
so here we have a very simple this case method in the set up here I just create a bunch of a bunch of photos for the 1 2 and 3 and I'm going to create some varied so just marking photo 2 and 3 as favorites so then mean that test methods I 1st serialized it's data will again using the same serious from might uh serializer for my API I We then call the same render component method from Python react so where this is going to do is going to render our favorite panel component by passing the ferry data over to the notes server and that's running in the background and then render the component again here we're talking about this 1
to down and to the right and just and just
a component in this case so then you you visit to retrieve all of the HTML that that's been rendered for the components and then you can basically test the content of the list and you could test for example which of the photos are present inside that additional secure check that photo 1 since it's not a theory that should that it's not engaged in Eleanor check that for the 2 and 3 actually are you may also use something like a a tool called query supreme nifty python library which sort of mimics the API from to query it said in Python that allows you to select pieces of your HTML so in this case on on selecting the D. the has the batch class so it's this thing here and I
just checked that it's text is to since we only have 2 ferrets in this case and you may also use a method that comes with a gender Django testing framework a certain HTML equal weighting can compare 2 blocks of HTML so here I'm I'm the inspecting the HTML from the age for tag and that's this whole
thing here so it's and the badge and I'm
checking that it actually is exactly that it's you know now with only common using these for huge amounts of HTML but issue of strategic your body can be pretty powerful because essentially we here we using the Python and Django to test the JavaScript because background is the actual JavaScript it's been used to render medicine permanent that's about it for my
talk so thanks again for coming i abused all the code the chances interesting taking that out and also publish my slides later and I'm happy to try and answer some of questions and if fit but retire I think you have and I'm curious if explored good ways to integrate this with forms of all general forms the yeah forms form sets or if if this is your work towards you know applications style native style web patrons right so I assume you talking about validating the data I don't know I I have not and I don't see why you wouldn't some but I guess so at the end of the day if you you shouldn't use react to render you forms you do wanna use react components so you can use just the output that a general form so do you but there might be a way of turning that into instead of rendering at some raw HTML you could put you forms to instead run the react components we could to get round otherwise you you could just use the you could still use the uh the for the forms an validating a process but just hand over all the rendering to react I guess of the reason I bring it up as I've but I like the convenience of Django forms right you can just set it all up and then render with as Peter or anything like that but then I found it difficult to construct a native style acts and so you know generally I would I gravitate more towards this method if that's what we're trying to do this I was just curious about you know what your experience yeah so again I have not used in falls with this but I believe you would have to sort of reimplement the the outputting of HTML from the jungle forms to and XML vehicle project actually the awesome if somebody wanted to down and that's something out in the definitely look into interesting thinking that yeah and so I've been using react lately can of similarly to how you're of you presented here um spin really useful it's been very fine but the 1 thing that still very comfortable is js GSX ah um and it also makes the front in developers I work with braille comfortable because the use working in something like handlebars and examples so embedding a mean even having things like if you're specifying a class on component it uses class name you know CamelCase retribution said there is there any compelling reason to use Jess x over trying to use 1 of the alternatives really I think it comes down to personal preference I personally actually really like it and I know that the community is pre divided about it some of its some hated I I just I advise just go with whatever works best for you I something you might be interesting looking choose react templates it's a library that but it's basically an interface in between so it will and you will be able to write template cantaloupe lights angular templates a but we output JavaScript and say it's basically a replacement for sex so you know about the model into that it with different you look more familiar and you'll be able to use the regular html each of our or attributes in tags so you think there's any downside Annetta's religious personal preference no downside that I can think of at the end a stressful it's basically just JavaScript and what I like about a that gives you a bit more power than you would have and we templates typically because you have the with all the power of the JavaScript constructs and data structures in and out and you know processing and you can use your advantage should do cool things for looping through the least and no doing some kind of computation so I I personally like that but I do not understand that needs to be of putting for you know if you're really just a few more profitable we just HTML light syntax thank you i k so my question is we the agenda and the city showing here looks like Django effectively is being reduced to genderist Frederick purely serving the the the the IPI portions of what's going on and that maybe some really really life templating to put up the initial height age that then react doing all the actual hard work here is is this a question where Jan goes place in the world is just changing always there when Django to interact better with these parts or is there some In this section conglomerate that both through the we can use preferably 1 that means I don't have to write JavaScript for living on have no I I don't think so and also what I think is great we react is that you it's great for doing really complex dynamics sites that you know when you have lots of things such as all over the place but but that's not all websites will all websites I like I like that and so some websites are a bit more studied engine good this perfect for those of you know the traditional general images DAPI side of but he condensed to use reactive to focus on the small bits of your site that may be a little bit more dynamic so I just see react as a complement to to you as a gentle developer locally not as a replacement for gentle and it has to be used to react really shines when you have things that challenged dynamic but that doesn't mean that all web sites need that or if they do it sometimes just a small portion of the and it can give both cases we can use react thank you affected by my my my my my
Web Site
Bit
Gruppenoperation
Fluss <Mathematik>
Euler-Winkel
Computeranimation
Fluss <Mathematik>
Benutzerbeteiligung
Computerspiel
Regulärer Graph
Endogene Variable
Speicher <Informatik>
Ereignishorizont
Benutzeroberfläche
Systemaufruf
Datenfluss
Kommutator <Quantentheorie>
Ereignishorizont
Office-Paket
Dienst <Informatik>
Dreiecksfreier Graph
Digitaltechnik
Server
Computerarchitektur
Aggregatzustand
Sichtenkonzept
Punkt
Natürliche Zahl
Gruppenoperation
Zellularer Automat
Kartesische Koordinaten
Teilbarkeit
Computeranimation
Fluss <Mathematik>
Dreiecksfreier Graph
Computerarchitektur
Aggregatzustand
Schnittstelle
Vektorpotenzial
Prozess <Physik>
Browser
Desintegration <Mathematik>
Gateway
Kartesische Koordinaten
Computeranimation
Homepage
Komponente <Software>
Client
Analytische Fortsetzung
Managementinformationssystem
Sichtenkonzept
Prozess <Informatik>
Abstraktionsebene
Datenhaltung
Kontextbezogenes System
Variable
Digitale Photographie
Arithmetisches Mittel
Dienst <Informatik>
Bimodul
Konditionszahl
Server
Client
Aggregatzustand
Sichtbarkeitsverfahren
Subtraktion
Server
Mathematisierung
Klasse <Mathematik>
Interaktives Fernsehen
Term
Datenhaltung
Datensichtgerät
Homepage
Wurm <Informatik>
Fluss <Mathematik>
Variable
Rendering
Digitale Photographie
Zusammenhängender Graph
Inhalt <Mathematik>
Strom <Mathematik>
Softwareentwickler
Speicher <Informatik>
Demo <Programm>
Modul
Datenfluss
REST <Informatik>
Energiedichte
Last
Kantenfärbung
Computerarchitektur
Schreib-Lese-Kopf
Digitale Photographie
Rechter Winkel
Thumbnail
Kartesische Koordinaten
Kantenfärbung
Gammafunktion
Demo <Programm>
Lesezeichen <Internet>
Thumbnail
Digitale Photographie
Rechter Winkel
Ereignishorizont
Homepage
Chipkarte
Hydrostatik
Router
Retrievalsprache
Bit
Punkt
Minimierung
Familie <Mathematik>
Gruppenkeim
Computeranimation
Komponente <Software>
Fahne <Mathematik>
Speicherabzug
Emulator
Caching
Sichtenkonzept
Template
Element <Gruppentheorie>
Volumenvisualisierung
Farbverwaltungssystem
Benutzerbeteiligung
Rendering
Digitale Photographie
Lesezeichen <Internet>
Lemma <Logik>
ATM
Server
Aggregatzustand
Objekt <Kategorie>
Spielkonsole
Gruppenoperation
Content <Internet>
Framework <Informatik>
Code
Datenhaltung
Quellcode
Informationsmodellierung
Digitale Photographie
Datennetz
Endogene Variable
Zeiger <Informatik>
Ereignishorizont
Meta-Tag
Soundverarbeitung
Vererbungshierarchie
Datenmodell
Schlussregel
Binder <Informatik>
Sichtenkonzept
Schlussregel
Endogene Variable
Schnelltaste
Modelltheorie
Zeitzone
Faserbündel
Lineares Funktional
Punkt
Sichtenkonzept
Hyperlink
Browser
Division
Datenmodell
Content <Internet>
Hypertext
Zenonische Paradoxien
Sichtenkonzept
Computeranimation
Datenhaltung
Gesetz <Physik>
Homepage
Fluss <Mathematik>
Lesezeichen <Internet>
Arithmetische Folge
Verschlingung
Ereignishorizont
Term
Benutzerführung
Server
Bit
Punkt
Datensichtgerät
Besprechung/Interview
Datenmanagement
Kartesische Koordinaten
Aggregatzustand
Kombinatorische Gruppentheorie
Physikalische Theorie
Computeranimation
Datenhaltung
Komponente <Software>
Weg <Topologie>
Mailing-Liste
Modul <Datentyp>
Arithmetische Folge
Digitale Photographie
Gamecontroller
Speicherabzug
Programmbibliothek
Zusammenhängender Graph
Speicher <Informatik>
Ereignishorizont
URL
Demo <Programm>
Einfach zusammenhängender Raum
Sichtenkonzept
Division
Datenmodell
Systemverwaltung
Thumbnail
Volumenvisualisierung
Dateiformat
Sichtenkonzept
Digitale Photographie
Lesezeichen <Internet>
Minimalgrad
Kommandosprache
Wurzel <Mathematik>
Rechter Winkel
Grundsätze ordnungsmäßiger Datenverarbeitung
Modelltheorie
Schwaches Gesetz der großen Zahlen
Faserbündel
Kontrollstruktur
Datensichtgerät
Klasse <Mathematik>
Computerunterstütztes Verfahren
Extrempunkt
Term
Steuerwerk
Computeranimation
Datenhaltung
Loop
Komponente <Software>
Mailing-Liste
Digitale Photographie
Statistische Analyse
MIDI <Musikelektronik>
Zusammenhängender Graph
Figurierte Zahl
Ereignishorizont
Bildauflösung
Demo <Programm>
Lineares Funktional
Schreib-Lese-Kopf
Datenmodell
Thumbnail
Mailing-Liste
Rendering
Digitale Photographie
Gruppenoperation
Wort <Informatik>
Kantenfärbung
Modelltheorie
Benutzerführung
Faserbündel
Punkt
Thumbnail
Kontrollstruktur
Gruppenoperation
Code
Computeranimation
Datenhaltung
Komponente <Software>
Mailing-Liste
Digitale Photographie
Programmbibliothek
Statistische Analyse
Zusammenhängender Graph
Ereignishorizont
Cliquenweite
Demo <Programm>
Lineares Funktional
Thumbnail
Datenmodell
Sichtenkonzept
Konfiguration <Informatik>
Gruppenoperation
Digitale Photographie
Wurzel <Mathematik>
Schlüsselverwaltung
Benutzerführung
Aggregatzustand
Faserbündel
Rückkopplung
Gewicht <Mathematik>
Primideal
Kontrollstruktur
Minimierung
Gruppenoperation
IRIS-T
Unrundheit
Computeranimation
Datenhaltung
Homepage
Komponente <Software>
Softwaretest
Lesezeichen <Internet>
Digitale Photographie
Datenstruktur
Ereignishorizont
Normalvektor
Demo <Programm>
Physikalischer Effekt
Kategorie <Mathematik>
Schreib-Lese-Kopf
Datenmodell
Stellenring
Thumbnail
Spieltheorie
Vorzeichen <Mathematik>
Bitrate
Sichtenkonzept
Gruppenoperation
Digitale Photographie
Lesezeichen <Internet>
SLAM-Verfahren
Server
Wort <Informatik>
Modelltheorie
Benutzerführung
Informationssystem
Aggregatzustand
Faserbündel
Kontrollstruktur
Mathematisierung
Stellenring
Systemaufruf
Sichtenkonzept
Computeranimation
Datenhaltung
Digitale Photographie
Lesezeichen <Internet>
Komponente <Software>
Dienst <Informatik>
Bereichsschätzung
Chatten <Kommunikation>
Digitale Photographie
Server
Datenstruktur
Speicher <Informatik>
Ereignishorizont
Figurierte Zahl
Aggregatzustand
Schnittstelle
Faserbündel
Kontrollstruktur
Mathematisierung
Content <Internet>
Computeranimation
Datenhaltung
Eins
Loop
Komponente <Software>
Serielle Schnittstelle
Speicherabzug
Skript <Programm>
Ereignishorizont
Demo <Programm>
Gammafunktion
Sichtenkonzept
Template
Thumbnail
Volumenvisualisierung
Sichtenkonzept
Digitale Photographie
Objekt <Kategorie>
Lesezeichen <Internet>
Einheit <Mathematik>
Wurzel <Mathematik>
Hydrostatik
Stellenring
Schreib-Lese-Kopf
Rohdaten
Güte der Anpassung
Thumbnail
Systemaufruf
Quellcode
Sichtenkonzept
Computeranimation
Objekt <Kategorie>
Spezialrechner
Würfel
Ereignishorizont
Benutzerführung
URL
Demo <Programm>
Server
Demo <Programm>
Web Site
Punkt
Prozess <Physik>
Euler-Winkel
Browser
Familie <Mathematik>
Zentraleinheit
Code
Framework <Informatik>
Computeranimation
Homepage
Homepage
Komponente <Software>
Client
Knotenmenge
Suchmaschine
Datentyp
Zoom
Rechenschieber
Volumenvisualisierung
Skript <Programm>
Zusammenhängender Graph
Abstand
Inhalt <Mathematik>
Grundraum
ART-Netz
Implementierung
Trennungsaxiom
App <Programm>
Mobiles Internet
Volumenvisualisierung
Isomorphismus
Kontextbezogenes System
Endogene Variable
Einfache Genauigkeit
Arithmetisches Mittel
Dienst <Informatik>
Automatische Indexierung
Rechter Winkel
Geschlecht <Mathematik>
Client
Server
URL
Shape <Informatik>
Stellenring
Demo <Programm>
Bloch-Funktion
VIC 20
Interaktives Fernsehen
Code
Computeranimation
Datenhaltung
Spezialrechner
Komponente <Software>
Hypermedia
Adressraum
Volumenvisualisierung
Zoom
Rechenschieber
Zusammenhängender Graph
Ereignishorizont
Gerade
Funktion <Mathematik>
Demo <Programm>
Umwandlungsenthalpie
Trennungsaxiom
Lineares Funktional
Fehlermeldung
Sichtenkonzept
Schreib-Lese-Kopf
Template
Thumbnail
Volumenvisualisierung
Sichtenkonzept
Endogene Variable
Lesezeichen <Internet>
MKS-System
Server
Gerade Zahl
Serielle Schnittstelle
Decodierung
Modelltheorie
Programmbibliothek
Benutzerführung
Faserbündel
Dualitätstheorie
Bit
Komponententest
Punkt
Desintegration <Mathematik>
Atomarität <Informatik>
Browser
Familie <Mathematik>
Versionsverwaltung
Regulärer Ausdruck
Content <Internet>
Framework <Informatik>
Code
Computeranimation
Überlagerung <Mathematik>
Komponente <Software>
Softwaretest
Einheit <Mathematik>
Stichprobenumfang
Zusammenhängender Graph
Softwareentwickler
Hybridrechner
Speicher <Informatik>
Demo <Programm>
Caching
Softwaretest
Beobachtungsstudie
Schreib-Lese-Kopf
Thumbnail
Volumenvisualisierung
Lineares Funktional
Sollkonzept
Biprodukt
Elektronische Publikation
Hybridrechner
Sichtenkonzept
Quick-Sort
Integral
Dienst <Informatik>
Datenfeld
Einheit <Mathematik>
Geschlecht <Mathematik>
Wort <Informatik>
Modelltheorie
Benutzerführung
Objekt <Kategorie>
Softwaretest
Sichtenkonzept
Computeranimation
Datenhaltung
Digitale Photographie
Komponente <Software>
Lesezeichen <Internet>
System F
Lesezeichen <Internet>
Digitale Photographie
Rechter Winkel
Volumenvisualisierung
Server
Zusammenhängender Graph
Serielle Schnittstelle
Modelltheorie
Ereignishorizont
Benutzerführung
Demo <Programm>
Addition
SCI <Informatik>
CD-I
Computersicherheit
Klasse <Mathematik>
Volumenvisualisierung
Abfrage
Mailing-Liste
Sichtenkonzept
Quick-Sort
Physikalische Theorie
Computeranimation
Digitale Photographie
Datenhaltung
Lesezeichen <Internet>
Komponente <Software>
Digitale Photographie
Programmbibliothek
Zusammenhängender Graph
Inhalt <Mathematik>
Modelltheorie
Stapelverarbeitung
Ereignishorizont
Demo <Programm>
Softwaretest
Gewicht <Mathematik>
Spielkonsole
Volumenvisualisierung
p-Block
Sichtenkonzept
Framework <Informatik>
Computeranimation
Datenhaltung
Softwaretest
Differenzkern
Geschlecht <Mathematik>
Permanente
Volumenvisualisierung
Flächeninhalt
Modelltheorie
Ereignishorizont
Benutzerführung
Demo <Programm>
Bit
Web Site
Prozess <Physik>
Klasse <Mathematik>
Besprechung/Interview
Schreiben <Datenverarbeitung>
Kartesische Koordinaten
Komplex <Algebra>
Code
Bildschirmmaske
Benutzerbeteiligung
Programmbibliothek
Äußere Algebra eines Moduls
Zusammenhängender Graph
Softwareentwickler
Datenstruktur
Bildgebendes Verfahren
Leistung <Physik>
Attributierte Grammatik
Funktion <Mathematik>
Konstruktor <Informatik>
Videospiel
Diskretes System
Template
Güte der Anpassung
Quick-Sort
Rechenschieber
Arithmetisches Mittel
Datenverarbeitungssystem
Mereologie
Projektive Ebene
Garbentheorie
Fitnessfunktion

Metadaten

Formale Metadaten

Titel Confident web development with React
Serientitel DjangoCon US 2015
Teil 44
Anzahl der Teile 46
Autor Phalip, Julien
Mitwirkende Confreaks, LLC
Lizenz CC-Namensnennung 3.0 Unported:
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.
DOI 10.5446/32755
Herausgeber DjangoCon US
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract React has become increasingly popular over the past year and is already used in large-scale products and companies such as Facebook, Instagram, Khan Academy, Hipchat and Netflix. This rapid success can in part be explained by React's performance qualities as well as its clean, predictable development workflow. To boot, its learning curve is very short despite it introducing a pretty radically different way of approaching front-end web development. Overall, React tends to greatly appeal to Django developers as both tools share the same philosophies of elegance and practicality. React can benefit all types of web applications, from single-page apps to more conventional websites and can easily be introduced to complement existing web architectures. While React is Javascript-based and is primarily a client-side presentation tool, it remains agnostic about the rest of the stack and works really well with backend technologies like Django. In this talk I will present how React and Django can work together to build powerful, easier-to-maintain web applications with confidence. I will start with a brief introduction of React's key concepts: the Flux architecture, the virtual DOM, JSX and the React component life-cyle. I will then explain how React can integrate with Django-powered backends and discuss some advanced topics such as server-side rendering, isomorphic JS, animations, testing, production environments and integration with asset pipelines. Numerous code samples will illustrate the various concepts presented. By the end of this talk, members of the audience who are unfamiliar with React will have a good grasp of its functioning and of its benefits; those already familiar with React will also have learned several useful tips applicable to their Django projects.

Ähnliche Filme

Loading...