Bestand wählen

React on Rails

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Erkannte Entitäten
the without and here and on and get started everyone i and j and super excited to be here this is my 1st ever rails comp and that's great and I come away from Melvin in Australia I wanted to tell you a story today and the story starts In Melvin it starts to the group of
4 engineers they start up a company called culture and and this company that I work for now it builds an online application using Ruby on Rails to 1 employee engagement surveys and provided real-time analysis of the results and today we have around 50 people working in a productive and we have 10 development teams working on product and it's built with a whole bunch of technologies we still have that Ruby on Rails monolith we also has announced an elixir and a whole heap of java script we back to at the beginning there was a whole other world and always
at the same little bits of this story makes sense so only to about a product in the market where we started out and they talk about the front-end development seen what was going on back there and it's all about the evalution that happen to us that happen in front-end development seen sorry and then the need to To change where we ended up the the so the product that we had was
offering analysis of survey responses and had 2 main areas of competition the first one was consulted they would run a survey they would go away and spend a long time producing results in the form of PowerPoint documents OK and they beautiful but they took a very long time and then the other alternative was things like survey monkey all people forms and these words give you plenty of flexibility in real-time results but it was very difficult to do anything with the data you have to do a lot of the analysis itself so in this market it was a very difficult forced create pretty groundbreaking front-end we but in a bit of real-time analysis and some basic interactivity easily could drill down into the results and that was enough to beat of these generic tools in the consultants power we now that then the
popular tools of front-end development would J. Korean bootstrap the the now it was 2011 we were talking about the dark ages his he could kind of be forgiven for thinking why did they use something better I mean backs bacteria that point was pretty mainstream angular was gaining popularity when we think about query it wasn't game-changer when it was 1st introduced it's motto was J. Curry is designed to change the way you write out script it was designed to get rid of the jobs to the people writing and what putting in line inside the html so they gave you wait to me that jobs which separate files and its current struck now is white let's do more it's really unobtrusive it's really easy to introduce it into riles in fact it was included by default with rails 3 . 1 which is where we started it just makes things really easy and if you look a bit staff at this time Twitter had just released the version to reach strap was a whole library of layout great components so suddenly column layouts were available to the masses it was easy to add we could drop but from CDN we could just put the file into the vendor followed in rails unlike many start-ups we really just wanted to have a reasonably nice you eyes and smooth indirect interactions for our users and we wanted to get something to market quickly we didn't want to waste a lot of time playing around with JavaScript and CSS is a back and engineers primarily so what more you want and the things that make life easy the so years passed by we we had a lot of new features we had a lot of back and features emissions data analysis these kind of tools in the front-end really was something a means to an end it didn't get a lot a lot of and may also also makes it very easy to manipulate the vendor files which is 1 of those things where just because she can does not mean that you should because once you've change 1 or to try upgrade is a nightmare so we just had a later spaghetti the and meanwhile the job script
world was moving on the some the early benefits of japery 1 of the things they have done really well with standardize across browsers so if you wanted something that behave the same into next law as it did in I was insane at state there well how does that you and crying by books and fell and then it it will give you that would let you have those behaviors but as a result the library had become really blasted and browsers were really standardizing so we don't need this place anymore we users meanwhile was starting to use mobile and surf the web on a mobile devices which meant they were demanding faster down we have to build smaller jobs that libraries that did more so jealous in environment started to really become first-class language the we have to think about how we structured we have to start adding in tests we had frame like Jasmine into the work of becoming Main Street I meanwhile we were back in this world where we had all this the getty carried in when we try to fix a bug another 1 popped up somewhere else I saw this video when I was preparing a presentation of this is exactly what it feels like when you try to fix 1 thing and it just there somewhere but
this is how it is that we're so we need to change now what's happening at the time was and react was emerging from the talk a little bit about that I wanna talk about why we decided to go with react how we involved are acid pipeline to use it and how we started to build the 1st complainant the
now we was open source in 2013 and the 1st thoughts it really looks like another shiny JavaScript framework right it was a slide in the young talk earlier without a lot of different jobs to frame accident if some of you saw that that people he was starting to and just now I really overwhelmed by the number of choices that there are so react to such a little bit different 1 of the things that really make it stand out is the idea of 1 data flies properties in react only flow down from the initial state through the components and each individual component in capsule encapsulated in Proc can't modify this props come modify the global state and the only way I can do that is through callback react components are representation of the URI given a specific state that it's in right now so we don't within a react companion try and change the donor way J. curried us instead of just friend is a representation of the URI and he uses this language called Jacek when he 1st come to react it really kind of makes you wonder vomit a little bit because you know mixing HTML in new JavaScript components and adjust the learning that's really bad you should have meant templates having separate but at the time he such kind of realize that this is such a much nicer way of working so looks a bit like this it says that the maximal like syntax and it looks like H out supports HTML tag components as well as custom component time the the jails set allows us to pass properties down componentry into the other react companion now react is also different because every time the state changes every time we change the data that we using to display view on the page but it really renders the components it does this by maintaining a copy in memory of what he of the dog and it causes is that Trudeau so every time state changes it can compare the current version of the Don with the previous section and so it knows which of the components need to be re-rendered and will tell them to rear-end themselves based on the new state divide boiling rendering the hold on it means that users don't necessarily have to rescore all the time and it maintains the position of the cursor and so on it also is a much more performance if you compare this to Jay query it turns out that trying to manipulate individual elements in the dome is much slower than if you just redraw the things so if you imagine implementing a to do list the other to do user enters Anderson text and then hit the button text to add a new 1 when you hit the button we would call a callback which would update the overall state of the page and avenue the need to do to it I react with then know that to do this needs to re render itself and include that new data and 1 of the other benefits of reactors that is backed by Facebook it was open source by Facebook so it's got a big company backing it building the tools and investing in it unlike some the other open-source tools all of which amazing and built by amazing community members are having a big company behind it makes it a little bit more reliable and it's being maintained over the longer term the 1 other thing on its mention is very easy to integrate 1 piece of reactants the Cape so with things like time-delay have to migrate and an entire page over would react what we're able to do was pick 1 small piece and then just put that comment on the page side or the other spaghetti job script and and leave alone so that we could happens when companion we so we thought about what does the framework we should use and taught yesterday about how really we should've gotten tried out 7 and all due diligence really done the proper technical investigation that surprise surprise we did not but we did consider a few factors 1st of all our is a b to be at the users that we have primarily people working in HR and easy access in the UK when a desktop computer so we were able we don't have to worry about things like rendering on mobile phones running on small screens we could be quite targeted in the browser that we had to build full the and we can restrict our support so we actually support i.e. tenderly dates for anything less than that and we need to support the latest versions of the other browsers so we were pretty lucky in that we don't have to worry about these older browsers another consideration was that we had hired somebody who was a react expert so we have somebody in the team he could help us with this transition and I think this is a really important aspect of the decision for we we also don't have to worry about SCA reacts is 900 being able to do isometric job scripts server-side rendering and so on but for us we didn't know that wasn't something we needed to do so to give an SEA was concern is that she quite difficult in rails as well to get reactor to work that way I don't know on on his done and so not having to worry about that kind of opened up our choices L 1 size doesn't fit all teams I don't wanna try and promote the idea that react the framework you should all be using it was right for us at the time now before we jumped into building react components we needed to have a few things and and jobs which really moved on from the model code we were trying to work with we went even using any is 5 features let Lanier 6 but out now be quite well they're all these amazing things that have been introduced to the S 6 it was a really significant update and again it contributed to making jobs script a much more first-class language to establishing so that fixing issues they block state and mutable constants were introduced to the essay we also have some syntactic sugar say RE functions introduced we had string interpolation and we have a spread operator all of which made our lives jobs script developers is much easier yes 6 introduced classes which some people of some people hate and it and promises that was something had a long for a long time been part of J created now it was part of the core JavaScript 10 and although is 6 would be a presentation itself if not more so there's a really great repaid by Lee K then you should check out if you want to see more information on the features now not browsers support yes 6 features so we need to choose a transport and babble is 1 of most popular ones we have to figure out how to get it to run the acid pipeline on the transporter would do was to use appropriate poly feels when we started using Essex features Intel at which browsers you want to target and would introduce the body feels when they were needed and back for the new year 6 styles like the error functions to the oldest of script embattled supports enabling different feature sets you can tell it what you want to use a more browsers you want to target now medieval males
asset pipeline uses sprocket all in your job ascriptive images your CSS is processed by sprockets before it gets on to the client and struck its users require trees if you've written jobs script files we've acquired another file in it struck it stays and gets the content from another file that sitting as a bundle and then that's the 1 that gets sent to the client in production when you create these files when you run your acid compilation it puts a hash of the file contents into the file names so every time you update you re release a new version it's making sure that because the filenames changes preventing the browser from caching old file for as sprockets doesn't support transport like Apple there are gems now to do this it was going back a while we're trying introduce there and so we looked at some of the tools will be use in a job script Packham browser phi where the 2 most popular and both of these are written in Java Script on sprockets which is also written in Ruby and we're an adjustment environment persist in jobs which carries the current makes sense to use it to Whitman jobs script to do so our 1st step to integrate went back into the wells are supply pointed to be like this we have Jan that would run we needed to run in a process in order to run web packet needed to run inside nite so we write the gem that would run on a satellite process alongside the those an agenda school Rubino talk we then had and separate called web pack rails and what that would do you would run pre-build process within the node process so that we could incorporate these ES 6 features a majestic stem plates module the trans filing within that step once but that finished processing then sprockets would do its processing and bundle these new web capital files in with the old JavaScript and then out them as normal this is pretty gnarly are not necessary recommending this is a good solution but it let at the time as a 1st step it got us to the point where we can actually start using react but it was pretty soon wing we found we needed to to update it 1 of the biggest problems we had was the source maps which is supported by were not supported by sprockets so is we able to debug we saw an error we'll just get along and backtrace and we can figure out exactly where an original files was coming from so instead what we started to do was and we would separated but unlike like we we treat the set up so the files that were processed among by Web packed within no longer being included into these legacy files with bundle by sprocket so they were treated as a complete separate asset and the impact was then we have to tighten the handle wasn't too much of a big deal we try to avoid that but ultimately this meant we could have source maps of hot model relating in development environments and so that made it much easier this we now we need a way to introduce area complainants onto the page and we reason Hamel fraud template language with in said we introduced this method into the we could use a non-halophiles the the at the top level because it's a it's a method that will add a top-level component into the page and passes state from the review sites so we wanted to be able to pass props as a really hatch into this campaign so we just output is a with content targets appositives and we use the data attributes we put the complainant 9 inside Wankel date reacts companion and we put the hash inside reactor to be we then added jobs method that would register all of the components we intended to users top-level components in the page this way and so we just registered them as a pages related and this created a map with the component name and the actual component itself and what it meant was that we could then mount them on the page laid and the mount components method looks at all the HTML and the page and it takes up any nodes in the HTML the happiest day to react companion actually it can then pick up the component name and the component parts which have been loaded into the state after the and these that passed into the mount comparing methods now knows what component is it knows what it's props or and knows the HMO node where we wanted to appear on the page only pass all of that to react on render and that does all the hard work about using the forest so after the page is loaded in our react paid some we had react working in rails so I wanted to evolve a little bit
newborn induce more interesting stuff with it we added just 10 we added CSS modules In the end we lost sprocket we introduced react Raffarin redox was more complex coach we introduce animations and we also introduced a mutable state I the we we the we so we call started using just we want to have with this beautiful clean code that would introduced we really want to have unit test from the ground up just was created to work with reactor again it's been created by things it's quite different to other frameworks like doesn't you unit would to Wikinews using for when we 1st introduced it it was designed to mark everything by default and this is really weird it's a really kind of difficult learning curve in a difficult mind-set change when you 1st start using our framework everything is not ultimately I think we got to the point where we actually found that made us right that OK because you could only test the thing that was that was actually the thing you trying to test the 1 unit said the test became much cleaner and just testing 1 individual thing they have actually changed it now so and if you if you install just now the D 4 is that it doesn't mark everything they've written on a blog post explain their reasoning but lost its because Samy people just found it up to mind shift and so different and difficult to get to grips with we just as also introduced some of sorry that I wanna talk about shallow rendering and this is how we were able to test the output of react say given that its rendering components we had to figure out how we can to test the output because the usually would render into the dog would render into the browser DOM and shall rendering is part of the reactor test utilities library what this does is rather than achievement in companion into the browser DOM it renders it as a kind of an object so it just went is 1 level and you can then see you can test that the outputs of that rendering all what you would expect and wheezing compare in combination with a package called reaction tostitos on what that allowed us to do was to pick up nodes in the output and test whether the props were correct and whether they were appearing as we expect and so this is what you would get from this Charlie tostitos will go and find a node in the output and it would have something like this which is a normal job script objective you out it's the so so it's quite easy to just inspect all the different parts in it now those about say again just more recently introduced snapshot testing and so what snapshot testing allows you to do is that you can save the output of your component and it saves into a file so that every time you updating of component you can just compare across sessions you decide if there's the change in the output is that something I meant to have their or is it about that I've now introduce the what we've done without complainants over time we've abstract a lot of the logic into very small files very small jobs script companion so whether it branches OK statements so actual business logic in the complainant's we try and pull those out say we try and a single responsibility principle when does have a lot of these very small modules just doing 1 thing well and this is late testing of the logic of these much much more straightforward and if the component is just ran a set a set of parts is really very little value in creating a lot of unit tests around and say the test and the focus just on the models that we the now we also introduce CSS modules if this is only have come across before it's a smart implementation of names class lectures the CSS so rather than having a CSS class that's just the label across your application you can have classes within CSS module that any applied to the 1 module where included and it was created by 2 prominent Australian front-end developers when I'm not terribly say for us we were able to have freedom of job script files the corresponding satisfy our CSS file so each job scripts campaign and have ownership over recession CSS styles and lattice avoid the hell of CSS class name clashes when we're using these components in various places on the side CSS modules used as a tool called post CSS and model allows us to do is to process it with our jobs script compiler compilers we just a plugin sorry so we could use Web pack to process the CSS modules and help them as job script and then within the just get following you can indices in like a job script object the next thing that we
wanted to do was to try and get rid of sprocket we were really starting to feel the pain away from its pockets together with web pack in our development environment especially we want originally to try new things the rails way but the we wanted to avoid a change that fell to be that the time that people getting used to a pack now and will also finding that if it if it had Scott stock compiling something we have to restart the whole rail 7 because of this nature satellite process that we've introduced and K. this is growing in complexity so this is happening more more often it was a real pain and we still consult support source maxim production because ultimately the code is still getting compiled by sprocket so the solution was to entirely replace sprockets with web pack the 1 problem that we have left to resolve here was that sprockets does this as I mentioned it renamed the files with this hash in the file name so we have to find a way of the setting where pick up to do that same thing so that our production files when being cached by the browsers and why sprockets does this is it maintains a manifest file and it maps the original name of the file that's going to be compiled against the name with the Hessian and then when you later files in development it's going to get them from the local machine when you load them in production it's going to going get the filename with perhaps so we used an MPM package colds and with pet manifest plugin I think and that does the job of creating this manifest file for web packaging having the same functionalities as sprockets was doing so that then we need sprockets anymore and went several of our files and production we then we wanted to add
single-page transitions we had all this fancy carried we have all these nice new components in react we wanted to use them to create a better user experience on this meant that we had to g introduce redox we needed something more complicated to manage the overall state so
the higher level we was introduced yet router the high-level relapses estate management library and was heavily influenced by flux Biomine design so the state the act is stored in a single global state a single global store and the only way that you can make changes to this stole from a companion despite missing actions and actions will contain Peled so to go back to the to do list example if you add if you make an ad action for to do will contain the details of the 2 D this in turn cold calls a method and reduce which knows how to produce an updated version of the current state we don't change the state with energy edit the object itself we create whole new version and that gets sent back to the store this then updates of the complainant's reacts looks at that of Don decides which ones need to change and passes the updated state down to them and react rasa is adjusted graphing library which allows the you the URL to stay in sync with what's on the page there's a new version of version for and it's very very different to the point where there's a lot of stories on the Internet about people who tried to upgrade it matches the complainants in the URL to components on the page so they can decide based on the euro components which pieces to display we we're still using the old version we have managed to upgrade yet because it's such a big change and they are maintaining the old version indefinitely although I think of your starting a new application now it's for better to go with the new 1 not all else we wanted to implement actions that could be called in response to a user interaction can play so you click a link to the data for specific question and you have actions that trigger actions so the 1st thing we did was to trigger an action say the URL is changed the this triggers a 2nd action which checks if you require new data to be stipulated which if your going to be a different question or a different page 9 times out of 10 you do unless it's the part 1 we so this would change your own and this would trigger a new action which would go in trigger an AJAX request users fetch which returns a promise and then when the ideas request returns it results from a this triggers a new action again which updates the data tells the tells us that the date been updated and finally this goes to the reduced set which processes the data the components of them rear ended with the new version of the data this is a very simplified overview of how we act process and read so working in our application I really recommend if you if it's something you want to learn more about this all some videos on a cat and a lot a free and they have a couple series on the react on redox America after that's the best place to get what we also
introduce an animation without single-page transitions we needed some kind of feedback in the UI to show the user that the page was changing these away we do this is that animations and so we found this library called react motion and it did things like shifting the Boston the old value to the new value when the data is changing then him package and it supports a thing called spring which is a way of animating amazing things in the URI but unlike timed animation is 1 of the nice things about springs is that the interruptible so you get these nice realistic kind of animation cares but if you have to stop halfway through it and then jump from wherever it is to the next place which is better than the usual time animations you haven't CSS some issues that we ran into you will we tried to render pdfs we have to make sure that the animations were not running man and in our tests as well we have to find ways around it because we didn't want to check the com the value of the complainants with the animation half from now I mean sorry
redox is based on the principle of a mutable state and we wanted to try and use that more cross are applications so this is 1 of the libraries that we introduce very early on immutable JS which has helped us to think in terms of a mutual data and in terms of not changing something in place the returning a new version of it separate provides a number of different objects that we used map enlist were the ones we use the most and the normal job script if you edit an object or an array it just edit the object in place what immutable dress does is that it will return you a new collection with the changes that you want without changing that original object so it's protecting you against a lot of subtle bugs that can come up a new JavaScript and is also highly optimized if you try to implement this sneering you probably end up in a state where running out of memory but it uses a lot of shared structures underneath so it can it's optimized the performance and you can use this a lot more safe in UK and this is an example of what it would look like if you change the map and image format you can see that the original map hasn't changed we also use record type 3 mutual JS and we use these to define specific types of data structures that we could cost between all components and leave toward more strict type checking in job script community in general and new funds in languages like ELM already have static types built-in it reacts allows us to define crops the each of our complainants and so what we're able to do is defined types with this record of these records that would have specific properties that we knew should be present and we created a strong record classes a wrapper around the need for Js record so the presenters morning so we could really check does it have the properties does not have any they shouldn't have and when you pass a prop types to react we could do more checking to make sure whether something was required or not and what pops it should it is expected to have in development environment it would give you warnings in the browser so you could see if you were passing the right things so again this allows us to identify subtle bugs much more easily say what we learned on this journey we learned a lot for staff it helps us to introduce a lot of new patterns and better ways of approaching instruction reactors inspired from functional programming principles so it something also see happening in the region rails well there's more functional programming ideas coming into that so we had a head start there and it really makes you think slightly differently about how you structure you code in any language example state never been mutated creating new objects storing state and passing things 3 functions together a new value back instead of modifying them and we found that we end up creating clean code is easier to test because you just testing inputs and outputs instead of having to mock behaviors so it is the story
had a happy ever after well legacy jobs it still a thing we have got rid of it yet we know the mass of a library of react companion the and so we have given an awful lot of thought so far to the reusability of those components so that's starting to be initially we have a number of different components to do very similar things and we do still have a lack of label consistency in our CSS well using CSS modules it's awesome but we also have a lot of global style still on I never knew there was say many different ways you could make a button a pair that I think we've got about 15 seconds so this story has an apple the we are moving toward more of a shared component library something a lot of companies are now doing is implementing a living style guide so people like embody Lenny planning at the MB and at last in all companies that have published their style guides and lady planets case they have a agenda they use an RC and they have a lesson you which is a Java package that people can actually use to use their components and styles we we're also experimenting with in alternatives like we've got about a quarter of our application now which has an L mu integrated into the reactor 1 we and we started seeing this guy this front-end experience in trying to place all of those 15 different buttons with at least 1 or maybe 2 and I think this is we started our journey we've really learned a lot of funding caters moved on and the world around us continues to move on and evolved so still not perfect the biggest difference there is that we now treat are carried much more as a 1st class citizen on the front-end not just the spaghetti mass means to an end but it was before and we hear that for my users that they can really tell the difference because of that so I guess whatever you're doing wherever in your journey you all whatever library you choose to use a you may but something out of our perspective on our experience with reactor male thank you thank the so if the
change if
Quelle <Physik>
PASS <Programm>
Skript <Programm>
Lemma <Logik>
Ordnung <Mathematik>
Computerunterstützte Übersetzung
Mathematische Logik
Virtuelle Maschine
Modul <Datentyp>
Endogene Variable
Äußere Algebra eines Moduls
Mobiles Internet
Verzweigendes Programm
Plug in
Binder <Informatik>
Wort <Informatik>
Prozess <Physik>
Atomarität <Informatik>
Element <Mathematik>
Komplex <Algebra>
Komponente <Software>
Lineares Funktional
Arithmetisches Mittel
Web Site
Front-End <Software>
Speicher <Informatik>
Bildgebendes Verfahren
Leistung <Physik>
Wald <Graphentheorie>
Objekt <Kategorie>
Gesetz <Physik>
Elektronischer Programmführer
Befehl <Informatik>
Kategorie <Mathematik>
Gebäude <Mathematik>
Prädikat <Logik>
Rechter Winkel
Cloud Computing
Klasse <Mathematik>
Automatische Handlungsplanung
Fluss <Mathematik>
Inhalt <Mathematik>
Verband <Mathematik>
Attributierte Grammatik
Open Source
Elektronische Publikation
Einfache Genauigkeit
Demoszene <Programmierung>
Web log
Formale Sprache
Kartesische Koordinaten
Einheit <Mathematik>
Prozess <Informatik>
Funktion <Mathematik>
Prozess <Informatik>
Twitter <Softwareplattform>
Funktion <Mathematik>
Interaktives Fernsehen
Kombinatorische Gruppentheorie
Framework <Informatik>
Wurm <Informatik>
Wrapper <Programmierung>
Zusammenhängender Graph
Cross-site scripting
Elektronische Publikation
Dämon <Informatik>
Einfache Genauigkeit
Mapping <Computergraphik>
Formale Sprache
Funktionale Programmiersprache


Formale Metadaten

Titel React on Rails
Serientitel RailsConf 2017
Teil 59
Anzahl der Teile 86
Autor Cranford, Jo
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/31280
Herausgeber Confreaks, LLC
Erscheinungsjahr 2017
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Eighteen months ago, our fairly typical Ruby on Rails app had some mundane client side interactions managed by a tangle of untested JQuery spaghetti. Today, new features are built with React, CSS modules, and a far better UX. With ES6 front end code, processed with Babel, compiled (and hot-reloaded in development) with Webpack, and tested with Jest – all within the same Rails application. Come along to this talk to hear how we migrated our app a piece at a time to use technologies that don’t always sit naturally alongside Rails. I will cover technical implementations and lessons learned.

Ähnliche Filme