Bestand wählen

React.js on Rails

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Erkannte Entitäten
the time and in the end of the and the aura of get
this thing started had is everyone the more that 1 have that gives the really I think the amazing film uncomfortable on this so much for coming to this humble talk I'm really glad that of all the time so they decided to come to this 1 and 2 on the the feels right now but In
this talk we can talk about jobs scripts I'm sure the lottery being I will talk about job scripts a Ruby conference and fill when those pieces of the rail sector it's still just pretty terrible in general and we have to talk about how to make it a little bit better and what is interesting in this particular covers is active in a lot of talk about JavaScript and talking about the proper backpacks in like a zombie apocalypse and whether that JavaScript should be in a zombie apocalypse Berber backpack process that at times faster I and so I tell you just about how we solve the jobs could problem were not how we solved about how we're using the right view framework to help us write better rails at and the JavaScript women's roles my name is Michael Chen collection
tastic on Twitter and is a much younger happy version of meaning you might find
I saw gone application called services but it's it was launched in 2006 answer rails 1 . 13 and services and application and for church is actually it helps us help churches organize volunteers there timelines services although stuff recall and believe it or not there is actually a market for future software so mean certain 7
6 operation JavaScript has kind of been yes right the and
as you know after a little bit of time of sprinkles 10 turn into
mountains so we did we did better structured job for about cations right and so in 2012 or our 2nd after we search will have a look at the landscape and see what people were doing as we
look at bigger rail shops with shopify and that they were just started work on a project called Batman ingenious and has anyone in here you spend years but hello good for you guys target-free free all had the the yet so but anyway
so we did this and was really a standard it had all of the curve of markers of the 2012 JavaScript framework is not to a binding and you simple wooden observers to catch track stating update things and what not and so we built our application to pieces we have the API on 1 side we have a client side at the customers actually interface with the and now this actually created a whole new hosted problems for us right because now we had 2 sets controllers into sets models and 2 sets of uh validations into routers and like you don't realize how much you really enjoy form for until you don't have any more and like it's terrible and so
really are after the feel like this right would have liked to takes like 2nd and how each other and this is a terrible situation of any change you a friend that will result in a change in the back and that this is no good
and we says change this out but I ask that the product manager for that team as a lead you having to do juicy cards where state was like just unbearable in about an hour and I was solve in we moved back to this rails is you like all of them the Peter it pursue this and you like
eat cards and so eventually gave up and but it is social cards it's a have higher refresh them and so what this means is that we had happen so we had a parts out there were still reliable the best solution for a JavaScript application was just the sale at 0 if if user accounts this router is probably not work which is refreshing this could titulus so as you imagine as you might know
shopify kind of abandoned back and yes in 2014 would have what's left holdings hammered only you like the the and it actually been
pretty vocal and gets to client side and the on sense than uh so this is Toby this year there's talking about how ridiculous client-side is I think he tweeted at some point about how the bad product Customer kind thousand dollars or something like that we just go up in smoke the on
and as you mentioned yesterday but were on Tuesday and Bennett have Shutterfly has been really instrumental in some kind of building out trolling so again we have fallen shovelers lead and as we build the restaurants some of our banner ads that we rebuilt and squarely on rails path right and now real pad sprinkles as 2 rulings and actually to be honest because like and I know that's you know like controversial in here but like know work were pretty into it but but were still running a lot of
JavaScript there are a lot of places and is from Paul
request of it is just a give kind election something where we have a lot like transient state right like this isn't event it's this isn't an event it's going gets sent to the server and respond with some the surrender JavaScript right like this is surely for the user and was just user action it does need to be handled by a rails controller the we also have
pages there like fully real time so I'm as I was saying we have services we'd have a service that plan you plan services and and and this is kind of like the of 1 down for that and this happens in real time you have we pusher connected tied devices with wireless devices and the person running the presentation can never moves through an obstinate have changed the side on the tracks how much time has gone by others like a real-time chat thing it's like it's pretty exciting to get JavaScript NBC's persons like dream and so all we
needed was we needed something would actually scale on from the small interactions that we needed for onto these big full 1 pages of replication were everything with real time but we found reacts to be instrumental in an instrumental in us being able to stay on rails path but then just use as little job we needed to solve a job but particularly this concept of react components so that that that will but more and I had to go through this so I
1st goal is that you available to walk out of here and should a reactor feature in our to do like 5 minutes to set up and then like yeah 55 minutes accounts that's my goal if any of you tell me and I'll like you again digital I 5 the of and my 2nd goal is that you don't make the same mistakes that we did we made a ton of mistakes and it as since the mid term season jobs for a minute time estates just porting our application logic to react so I don't watch it makes a mistake so we did a show show you have the ideal path that were using right now for Albany involvement so it's you react prior a
reactor JavaScript library by Facebook as for creating user interfaces using components the policy 3 things it when the the receive props maintain state if you do pretty well to think about a reactive component as a partial of locals so let's say we have it an audio service and we want to show the songs on this album right so this partial should make sense to anyone who's done rails for a day for and so they're already out some like this or the other on word list of songs this particular list as 19 89 criteria swift yes thank you I may or may not have been able to create this list however from my mind but
the the US or just into the this is again I was gonna create a new part of well Woods dump the whole thing in there and then will say Brenda Song spread easy so now who really want this to be reusable right we can't say album songs here right we want have abstract that'll that and so to state songs will require some type of local data in our view we update this to say OK songs is going to be problems songs and so now who want to show a list of Taylor with albums users would die at each of these arms as obligate least 50 players on my items to the best and citizen of the
albums risk of a title and use a partial again now these are the different because word yet because were singing songs as well as a matter of particles in care so you know this Austin JavaScript now the so surrender partial I will Hopper called react component instead of using songs which is going to look for the signs partial we use uh songs which is going to look for the songs component no the yes which was on all so here so a I'm this is the same part and is blocking parts of it out so rights in our uni-grams songs off of
the is a terrible no thank you to the fact that it has the songs component of the widow logic and in sending local then and we just descend action is the same thing we just say songs and songs and reacted call these props for properties so prosecutable kind of but if you read the whose rust talk yesterday and he talked about how Ross has this concept of of ownership borrowing and how ownership of the right to destroy or modify something and we pass props like that component should not modified destroy it would be just have at at the ability to view and use the a solidifying our component and is it this is now everything's looking get recall uh we of the songs variable to react to create class to class with the render functions the Caribbean retirado on list when he grabbed the songs of props and iterate over it wouldn't matter the soul the defendant really cut above it and who have blocks we actually call function for each of these and freedom these items the we can take a song and spit it out as a listener something right was Guipúzcoa tendentious real quick as songs is Rick react class as write a function you will grandsons of props NASA room call this function for each song and returns a list item the consortium it is let's
practice that this idea of what's taken out of that a real that that everyone here knows about will take 15 a blog I will add some real-time comments to 1
of had a case so if you haven't seen the 50 minute lot of this is the inverted version of the world I had the other so
there's a there's a block in a like this where we have posed by the iterative reached comments and spit out the uh comment body with nature because 2003 us a little Stratus rich react so will create comments that's react class the render function at when the function is going return dividend China and we're going to take our comment graph props interplay that out can principle so here in our view on user reacts and component helper and spit out the comments component has hard said should choose a different example come component and that use a common up by their right so that goes from looking like this
clothing like this the steward will say those of exactly the same and they would be correct except now these to come into being rendered in JavaScript so that's recall solar
cells do the rest this critical what now I we saw this was songs in a create comments to react class the render function so I did it takes all the comments maps over them runs this function for each a plot the body of a common and in react we have the school syntax forwarding user comments like like HTML tag right so we don't have doing things just from that and this in in a comment when we were with props and as an HTML actually that's courses concerning the body cool take out changes comments and all the comments down and are at those who will you
this like this astute observers
again so that looks exactly the same in your correct the I said now the entire comma blocks in the block is rare JavaScript is pretty cool until it hits the real
time that right so we have a commons component the result comments the a common component represents a single common for the creative commons container or this is you think that this kind of like a rules controller right this constant here it knows how to fetch comments and knows which component to render when have a comment it wants to anything that this color Carell's controller and this is a special it is kind of a convention this container conventions the a so here I would tell ditch all the stuff that we had before or any other comments directly or going to now give and so we use that to comes container or give it up half now and say hey this is where you can fetch promises worried fetch the MJ some for comments is that a constant here looks like this 1st half is the fetching some of the comments we have our render function bottom and have this get initial state so these are the piazza we talk about this is this is the things we haven't talked about yet is referred kind of managing stay in 1 hour them this in place we actually and interact with and set that state so so that into it so we had a countertenor it returns the comments component I wanna start by just giving kinds of like an indirect right so this isn't it so there's no regret nothing it is the 1st interact that interaction state is well as special object for that around it and there's props and state going to ways the interactive data as the 2nd was the state so or props is immutable and state is designed to change this container compare this comments container on knows what's a comments as an and as how to get new comments and has set those comments and so now we can use this this ABA could get initial state this is just a way to can protect ourselves and we were doing and an asynchronous call to the 1st time we render render with an empty state at least now send undefined all over the place the so again are we getting our state from current state all rights is a function as a pretty simple were actually undertake the commons path properly we send in order to fetch that Jason so on 6 of outside the past of NetView and unsuccessful annotated data only use a special function calls set state as a state is now on his now the new data that we got back I can think of this set state as a ago refresh a refresh 1 for component 8 of any you call this method with new state is going Tolley we render anything it's down 1 of the tree so that case is going render are components there are comments components and subsequently every component after that and we have another hope here that we can use called component will mount unassisted initializer function so when this components way the go it's initialized we can only run functioning here were discussing hate it get all the comments and when you that every 2nd source guy he's palling for Austria's more and interesting examples later and so now for the 1st dimensions
you change and hopefully you can see it but as I add comments to last string and get word in rice could as a particularly exciting but we'll write a whole lot of code to get here and the code we wrote is all in 1 place but is totally isolated to those 3 component files we have the change like you know jobs for file and then up to review to have a down of stuff with it's all there is totally isolated we can you know implement early differently in the future if we need it very cool of so
another cool thing about reactor you is an is very smart about the way that it does updates by become hard to see but if you look at that list some comments you'll see it is only doing an insert of the last comment that I added so the way this works is that react does re render on on every set state so right here we're setting state with comments and it does we render but renders in memory and energies does a deft silicate how my different the down and render it says OK we need to change these 2 things and then will be up to date but it doesn't like wrap the whole thing out and is doing in sort of all common bond this is also pretty call for a lot of performance reasons of this so I
should you valid for things right actually manipulate state so where a lot of with a number of things that you need to know to be effective with reactor that will start not too many or show you a couple
of things and fishing already knows that we haven't and so that's so 1st this is how you render out the component in your or in your rails use at is a and and props degrees eases a greeting opponents a hi Bob or something like that and this I define a component words returning in each to use high murder plating nano and this a thing called Proc types which is pretty cool we can actually specify and what type of name should be on which is really handy when you wanna read for the for the reusability of these components was really awesome because I'm now in development of so tries to use this greedy component not quite sure how works on the and a number that I get a really cool clear like the 1 in like this summer consul as a discussed that hey you're trying to use greeting and the same number is name and we really need a string uh there's medical did
default props and this is can like sit initial state worked initial state where you and we can set initial values so if someone uses component and we don't pass the name were this Ergasilus they high guest In think this is like a orequals being asset state is like the refresh button inferior components I initial state saw this we have set an initial state for component at component will now this is where you do things like digit sciences and this is a components ready we're fire or something you know getting the data and handle it also has a sibling called component will on Mount and this is for things like if you attaching that listeners so you'd have to but will not go out will uh now as component goes in and out of you of but but you don't attach event was there and then you would can remove that event was to clean up after yourself words if you're using service and events on the pusher were using pusher recall so that
9 things you know but is now a lot of things right but things because a lot the the gals alive that there are 11 there but this is an I think is is incredibly small amount of things that you need to know and that were not telling them what telling it had spot about updates is doing that by itself when I am not granting Donne's my changing the mountain doing all this stuff we're saying hey when this surrender where the state is just like you know where that state you know just every time rendered as you do the right way and and figure out I own time had a you in in the most effective way so I show you example this
is from an our services why that that is how you and beginning and so if you watch you can see the clock and the 6 so where but since 2 o'clock in the on the right the only of this happening is is that like iteration now this is really cool I and is hold it in memory this entire app is re-rendering is just something that is just sending in and time so those were getting your 2nd snapshots of this application I use the that chat application and as at constant in the table right there is going to insert this year old rose I I suck
shift a little bit to implementation as this
is something we struggle with a lot there is um at 1 point every single act that we have use react was doing in a different way of some Iittle you AlDS 5 or 6 ways they were doing it by will tell you the way that we that we landed on the way that we feel is the most and effective in most honoring of rails NASA pipeline the the and so we use Racal's jam despise you a couple things buys that helper those lying about the reactive component helper and that we've been using in all these examples and it's really smart uses UDS to mount an unwanted components as really smart about her going so whether used for Boeing's demuestra links and extended the right thing 3 simple
set up is dead is chairman minus scholar installers really pretty minimal all it does is really give you a components directory to 1 minute Freud components and I'd also this is really good generator assistance they react component grading and spit out this really cool you know all the coding into use the red agreeing and allows you to have a missile syntax for profits so if you know the Union name string unaware of this for with profits in time and so it
again Israel's assets this is incredibly cool project and what it does is it works on Bauer and so it will be uh was the words of our and so in a
gym science news at the source block and you add the and yet these gems you can find on the react at rails assets site and you see this is the prefix that rails assets alter roles as as react rather whatever what and what will realize assets does is it it works on the hour and I'll pull down the Bauer repository alter or react router among j ust a pull that down and he will create an honest to goodness Jim Fourier that of so you have like a cygnus jam created from of bowel JavaScript a CSS repository of is super easy this is the easiest way to you found to be a will to you on pull core job trip libraries into roles of
the of singly may was fighting as a pipeline worked a lot with them trainees use browser fire packed and all this kind stuff there are benefits there I'd be happy to talk with you afterwards about what those are and but we found that for the most part the easiest the easiest solution was the best solution for us and so this is great it communicates well our change really happy with it I'll send languages so
so you might have been a washing and things like that they and still this with this magic is happening in the whole like HTML and JavaScript and so so you might have heard the controversy sects and but I really think is a big big deal I like it I like seeing a job strips right here in my components it's nice that I have a separate file that's doing this and the and the date but it's no different than the way like the B. works are handlebars works is just processing out of its preprocessing are and g sex In the function calls like this but we have a look at that I to write that in this right is iterating all right and that's that's the jobs group 1 on react reals can those of us who support for coffee scripts so you just can't coffee on the back on see you lose a couple brackets in parentheses 1 on the weird part is the have the back take escape out bj effects which is a huge problem if you really love cover script that much I we don't sell just don't use that others also really had used this because as being backtrack backticks skates and you can't use at inside component used everywhere else but i've said inside a template used everywhere else but on inside a template the as so we've really come to love is that yes 6 there's a little luck flagging set up in the reactor rails jam and it will convert uh yes 6 in 2 years 5 for you so and this is great now this has a little bit of a difference attacks which is I'm just fine you get used to it we really love it because it buys us all the things we really love about script and but mean not have a script and we can just return this effects at the and so the 1st is all the different is that you can define his class finds green class and extends react components so before we were creating but we're using create classifier components and here we're going just extends the class rep component I'm also Proc types get pulled out of them of the class and the uses a constructor property on 2 things are pretty simple L 1 nice thing is that you can actually um that reactors it's extremely smart I was talking about the great warnings and errors in time into and so if you try using API to deeply dedicated to the Cree at create class way of doing things we introduce the class and you need a wine this has a k initial state was defined ago comment a plane jobs to class this is only supported for classes are created using reactor create class did you define a state property instead but this is an amazing air and that all land and switching from a jobs reflect like yes sex and like but room easily and they figure this out for monotone exactly what I'm new retired on the wearing solve this problem and what I'm doing wrong why do you can learn a thing or 2 about copywriting from this there will be ways it was revealed in the
what's when change it's a right thing which attended on slide for the it's not so early on we made the mistake of not embracing GSX we do a lot of somersaults to try to get around using Julia sets and drawing up the functions ourselves and copies script 1 hour we found that the best path is just embraced a sex you really start love after about like an hour and and this is where of Facebook and reacting is hiding a lot of the implementation details from you so the most painful updates that we've ever had are the ones were trying use copper strip instead of various acts and it's something wasn't hidden from us because of that so is yes that's it's awesome domain mistake needed I use yes 6 is really great and I'm serious in more and more uh documentation react and using a 6 things the way and we're moving forward so a lot of people are using react really embrace 6
I so I'll use warning and with just this concept of all much Javascript as need so maybe here is unstitch the rails path as much as you can and and just just do the minimal our jobs between you and I feel react helps you there and so is the
common takes local functional his so this is your Rails on the inverted the this is your Rails ever sprinkles this is your Rails app after 2
years of sprinkles this is your Rails app using
client-side and seeing and this is what I
imagine traveling links to read to the like we're actually using the sprinkles account like came down the reviews on top of the cage but I don't know and this is the party who were having with reacted appointees they watch you some of the some of the things in the in in the
Partielle Differentiation
Vorzeichen <Mathematik>
Skript <Programm>
Schreiben <Datenverarbeitung>
App <Programm>
Kategorie <Mathematik>
Güte der Anpassung
Wiederkehrender Zustand
Web log
Dienst <Informatik>
Rechter Winkel
Drahtloses lokales Netz
Ordnung <Mathematik>
Tabelle <Informatik>
Selbst organisierendes System
Klasse <Mathematik>
Dienst <Informatik>
Mathematische Logik
Überlagerung <Mathematik>
Open Source
Weg <Topologie>
Reelle Zahl
Endogene Variable
Installation <Informatik>
Ganze Funktion
Tablet PC
Binder <Informatik>
Elektronische Publikation
MIDI <Musikelektronik>
Wort <Informatik>
Konfiguration <Informatik>
Prozess <Physik>
Web log
Natürliche Zahl
Formale Sprache
Familie <Mathematik>
Kartesische Koordinaten
Komponente <Software>
Spezielle Funktion
Prozess <Informatik>
Maskierung <Informatik>
Mapping <Computergraphik>
Figurierte Zahl
Konstruktor <Informatik>
Lineares Funktional
Element <Gruppentheorie>
Plot <Graphische Darstellung>
Arithmetisches Mittel
Funktion <Mathematik>
Twitter <Softwareplattform>
Projektive Ebene
Web Site
Interaktives Fernsehen
Zellularer Automat
Kombinatorische Gruppentheorie
Framework <Informatik>
Zusammenhängender Graph
Automatische Differentiation
Inverser Limes
Arithmetisch-logische Einheit
Mapping <Computergraphik>
Objekt <Kategorie>


Formale Metadaten

Titel React.js on Rails
Serientitel RailsConf 2015
Teil 82
Anzahl der Teile 94
Autor Chan, Michael
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen 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 und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/30695
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract React is the best way to bring interactive UIs to your Rails apps. But using React.js on Rails can be hard. NPM libraries are difficult to include, JSX seems nonsensical, and “can we still use CoffeeScript?” There’s not one obvious path for working with React.js on Rails. In this talk, we’ll review the sordid past of Rails and JavaScript, explore the complementarity of React and Rails, and navigate the woes of integrating with NPM. We’ll discover why React is a natural fit for Rails today and how to make Rails love React in the future.

Ähnliche Filme