×
Eventil - Find Tech Events
Official mobile app
FREE - In Google Play
View
×
Eventil
Official mobile app
FREE - In App Store
View

The React on Rails Story

0 0

[Music] thank you so much for coming to my talk I'm absolutely beyond thrilled to be here this has been a three year journey of coming up with a single with a little bit of an idea that oh hey I could do something useful and write an article and I've been walking around here and I got say more than half of the people I've talked to not only have heard of react on Rails but they actually use react on Rails when we get to take here how many people actually use react on Rails in their projects and how many of you have heard of react on Rails for this okay so pretty much everybody I am so stoked so I did come here all the way from Hawaii I am the CEO and founder of Shaka code and friends and guests and if any of you want to get the slides after the talk Shaka code calm slash talks I'm super easy to reach also Justin at Shaka code calm a little bit about me my to bear favorite things in life that bring me happiness are surfing and a great work environment they kind of go together in Hawaii you also need fast internet okay so it's a little quote format the last talk was great cuz it talked about happiness and you see the highlight at the beginning at the middle of this Ruby is designed to make programmers happy and I wanted you know when I go about designing react on Rails a big part of it is is I want happiness and I want to make it like rails kind of like the last talk it's not going to be quite like what we saw with the other languages and other frameworks I want to build something that just works ok the rails doctrine the rails doctrine came out in January 2016 this is about maybe a year and a half after I started or about half a year after I started working on the jab and about a year and a half after I started working on just this idea what I loved about the rails doctrine is I read through it and I go oh my god this is exactly you know why I love rails and this is also exactly how I'm designing react on Rails to be pretty much just like this so optimized for programmer happiness convention over configuration the menu is omakase omakase means chef selections you're going to get my chef selections and react on Rails and I'm not a dictator though I get community feedback but I do make the final decision no one paradigm the no one paradigm is actually great because like this also applies to rails adoption of react on rails because rails has came out with web Packer I'm going to be talking about that during the talk it's like what do you need react on rails now we go web Packer but no one paradigm there's different ways to do it and in fact react on rails was very different than the standard way of doing because back then it was just CoffeeScript it was you know jQuery so I was you know renegade okay exalt beautiful code making make it look good a course sharp knives I think all of you know how to use webpack and he had six no it's a pretty darn sharp knife compared to little CoffeeScript world jQuery value in a grade system this is react on Rails and rails this is it all just works you just run a few commands you'll see that today progress over stability I love this one because I release react on Rails all the time when I feel like it and the reason why I do that is we have a great great integrase great set of integration tests and push up a big tent this again is like the no 1 paradigm I was actually talking to David a bit about this stuff because oh yeah push up a big tent you know that you read this article the doctrine it's like you know everybody can bring their own drinks to the party yeah cool I brought my own Drake has said maybe you might like the drink they bring cool so by the way rail david Hyde Meyer Hanson creator Ruby on Rails I didn't mention Matz creator of Ruby in addition to the rails doctrine this is our big part for react on Rails run with the JavaScript word so why is that so important part of it you'll see with web packers they're trying to a little bit a part of web Packer is is they don't want you to have to configure web pack well we're all about when you're in JavaScript land in front-end land just go with this go of the community run with the herd rails back in 2014 anybody remember Rails 2014 back then CoffeeScript was cool maybe use Hamill maybe use the RB and you know rails just work that was great we build web apps it was so easy it's like I swear when I first started using rails like yet superhuman powers guys so good now this is an example from the rails tutorial actually learned Ruby rails from the rails tutorial Michael's a friend of mine is simple jQuery on a Rails view happiness and it was back in 2014 hey look at this example you can like validate this file upload here cool how about in 2017 well this is the app friends and guests this is the app my company is building I told MCU about shot code and friends and guess is really one company so we're building a consumer app and now consumer app is not that easy to build this kind of looks a little bit like maybe like Airbnb this is an application that's we it's going to be kind of basically a combination of the features you get an Airbnb plus some of the features you get and LinkedIn such as privacy options so how easy would it be to build this using some jQuery can you imagine manipulating all these Dom elements with jQuery flipping stuff around doing all this stuff not really right okay so jQuery for modern UX is really was really not the way to go and I knew this from all that CoffeeScript jQuery soup I made I mean if you ever felt you kind of it just becomes this like massive you know goop just not very well organized and then so I knew at the time I had to find something better than jQuery so react came along before I looked at react I looked at ember I looked at angular and then luckily this is like lot of stuff and life is good luck a guy that I met stayed over at of got a place or Maui I can host friends to stay that I know and somebody that maybe know that and so thank you you do want to come visit me in Maui email me Justin Shaka code comm it's a good good place in a great place for any of my friends here that want to telecommute for a week or a month that's it that's a it on that react so anyway a guy stayed at my place is true story um guy just buh Hartshorn YC grad made the website instant domain search awesome little thing then he worked at Facebook for four years and one day and he came to stay at my place originally for three months ended up staying nine months actually had his um child it might well staying at my place and we got to be pretty good friends he actually inspired me to start friends and guess he goes I would use that business anyway I must stop digressing he said use react check it out it's different okay I watched the video from Pete Hahn on it I go oh my god this is different it was just like you know what why is it so easy to lapse in um in rails because what happens is is that the request response cycle the data is going one way and as soon as I realize that oh my god that's brilliant because now you know you get a request you update you send back you know it's like an API request and doing stuff in the browser with jQuery soup was just god-awful you know doing this do that do that do that and do the timing of this and then you get that bug right we've you ever seen that awful anyway react single flow of data gives you superhuman powers it just works amazing community as well and now react native my little consoling company is we build react native apps as well so can't go wrong there half half of your friends here but probably 90% of you use react now if you if you're using any JavaScript framework so value in a grade systems so this is a quote from the rails doctrine that's to have all have most of it all we seek all the power of individually tuned and distributed applications and easy to use in understanding a single integrated system so why you know how does it apply rails we sits on the last talk the whole thing it just works I wanted to make it work like that for putting Java square with react on the front end and I think the reason why most of you are here is you'll see I think we've accomplished that right so this is what happens if you don't kind of do it the react on Rails way sure build a separate node jf and you know get an express server go on build your API server maybe even throw in a few micro services too and make it a couple github repos right is that going to be a lot of fun maybe not okay but in case you do think it's fun one of my team members actually wrote an article to us it's complicated so the react - rails gem this is really really popular back especially back 2014 this system came along I think in maybe 2012 and look it's from the reaction ization that's pretty official right let's see let's see how this thing works out so I made a tutorial showing people step-by-step how to do everything cool now when I was doing that I realized oh cool I'm using react I like Twitter bootstrap there's a library called react bootstrap there's 2014 how easy was it for me to integrate react bootstrap with you know in 2014 react - rails is acid pipeline based so what I would have had to do is I would have had to copy paste the J's files on my project do any of you still copy and paste JavaScript files from github repos on your projects I hope not I was but hey in 2014 did any of you ever do that oh yeah everybody did right so then you have you know it's just always awful and then slows your other alternate ruby gems right how many of you used I call Gemma fide JavaScript jQuery right the jQuery Lite is all these libraries right so here's like an example of gem fi Java react reacts rails oh great you know these are they have only 2500 or 3600 loads has been up to in 2015 because they figured out hey this is not cool remember I did this this is a 2014 this is the dark days of doing this stuff so here's an example of copy and paste dependencies why would you want to work on an open-source project that's doing that I don't think so okay so what do we all believe in the you know the programming world dry don't repeat yourself right and copying and pasting code into your vendor records yeah okay so what do we have in the Ruby world ruby gems bundler it just works right open source with the JavaScript world we got npm we got github we got yard the NPM stuff it just made it so easy all of a sudden you have a package JSON you can reference the exact version you want or you can reference a github repo and I looked at all the alternatives to doing it back in 2014 and it is clear that we just had I had to come up with something I looked at some like browserify whatever they were I don't know there are a bunch of other ones none of them I can't even remember right now so so what are the things I'm going for you know when I was trying to build a system I definitely wanted programmer happiness I wanted to embrace j/s and that's kind of where I came up with number 10 run with the JavaScript herd and part of why I wanted to run with the JavaScript herd back in those days is that it quickly became apparent when I was using some of the examples from react that were in JavaScript and I want to do CoffeeScript was that going to be fun not at all here's the example this is a current example from react so what do we do what you do when you do any of you ever do this when you're like learning you didn't want you guys saw JavaScript let me copy and paste at the CoffeeScript example right well great I copy and paste the react code into the CoffeeScript converter and well script does not defined or whatever it's just errors out okay that kind of sucks so writing your code the way of your herd is happiness that's one of our philosophies so you know emulate the example they come probably hardly anybody that starting a new projects going to use CoffeeScript these days okay so recap what are the challenges with react gas rails why didn't I want to do the way that just works and a lot of people at this time we're using react as rails number one was no es6 support number two was that there was no support for common J's modules and Babel everything was global literally it was global back then and babbles the thing to put it all together and gave us es6 and so once again I got lucky bo told me to talk to his friend Pete hunt maybe you've probably seen Pete Hans videos he goes hey Justin we're using a web pack over at Instagram check it out so I check it out there was no really obvious way to use it per se when I first started looking I found one little article on maybe a way to do it and the key concept that I took away from using webpack was I could take all of my JavaScript files load the stuff up using package JSON you know you know configure it and web pack would take all these files and just stick them all together and I could stick that thing through the asset pipeline that was the only concept that I had to get me started on this so I figured this was just so great because there was no other easy way to use babel at the time in ESX so i got so excited about this and at the time I still am well at this time I was an independent consultant now I've got a team of a small team of consultants and so I the only way of its finding work was I would write articles I think it's like a better than you know paying for Google ads where just give away stuff and people see your stuff and they get in touch with you so I wrote a super detailed article back 2014 October 3rd how many of you saw this article they were doing some of this work I did talk to a couple people here they said oh yeah just right before this talk platter the company that does a there's a food delivery which does not deliver to Hawaii so that's why don't use them but they um they said that oh yeah you you helped us figure out how to do it we don't use your jam we wrote our own little thing but they taught us before I wrote the jam so here were my main points of the article was Gemma Phi JavaScript you know what I call this torus JavaScript because literally most of the rail stuff in 2014 with still CoffeeScript I go no way this is using the gemma fide JavaScript CoffeeScript and Global's how cool are you know JavaScript Global's these days not that cool so we're going to use NPM we're going to use es6 we're going to use modules now I love this little picture because this is the way it felt once I discovered the world of JavaScript open-source then there was so much out there I can just easily put it just like Ruby gems the amount of work it takes out a ruby gem to a prog project compared to you know what if you had to copy and paste a bunch of Ruby code and that's what we did with the JavaScript or CoffeeScript so I came up with this example app the react - web pack rails tutorial some of you may have seen this this is actually live at react rails calm um by the way if anyone you know you can go on the site right now if anybody um check this out there's like kind of running example of stuff I think these mics are on also by the way kind of picking me up when I get close to this thing so here's the example laughs I can say right here here's this is live right now you can go to react rails say I love Go ruko all right in fact this is even markdown so I will put this in a pound all right I also love going anywhere you can do this here's an example of the technique and I thought this was going to be enough just building an example app and building a really detailed article we had some funny so sob okay by the way this there is no filtering on this someone could put anything on there however I quickly figured out it worked better to delete all the messages at the end of every day in this little toy example they also did not let me put this toy example on the App Store when I made a react native out of it but anyway this has got some cool stuff like for example if you said like you know how's this cool it's like look this is all you know using a Redux tour right here and so I change this to oh that's nice say something here and you know it's in line it's this I can go up here I can go here this is in I'd not even sure Chinese maybe um this is an example of react router and so I can go over to here this will redirect back this goes to a different page wah-wah okay that's enough of that but it's live and you can see here's the open-source repo of this this was kind of cool okay but we're going to do better hello let's go back to presentation thank you okay part of what I showed in the example was was that running with the JavaScript heard is way better we have es lint there CSS modules the prettier thing and all these cool tools so why make a gem okay this was like September I came out with the article and you know I think the gem was released I think um 2015 so I thought I was so cool I wrote the article and I had this example but then people are saying oh no no we still use react rails because you know the main reason was actually is no server rendering as I didn't understand what server rendering was because I was writing an internal app that you know I needed to do something like react but it didn't need SEO so it was - so then the other example explains rendering a little bit more later the other thing was it was too hard to implement the example app and article it was too hard to implement from the example app an article because it's like a cookbook recipe there are a lot of you know different little steps you have to copy and paste all the stuff from the example out so hey you know we saw this in the last talk it just works its happiness right that's the rails way right well shoots I've liked challenges and I'm going to figure out a way to make this work so I started to react on rails Jim the very first commit was August 16 2015 you know so what were the influences you're going to go build a jam extract you know make an open-source example like I did don't build a jam for just some code you know I have this open source code people were already helping you out with so extract code you can reuse and be influenced by other gems it's heavily influenced by the react - rails gem so what are the things that react on Rails gives you put react on your rails views we get the view helper react component we can pass the rails props seamlessly to react being data comes out of your database will render automatically in the JavaScript or and will even better than that it'll even serve a renderer and then the job then the react server in turn will load so server rendering why it's server rendering the big one now we just had discussed with and so on SEO with web crawlers they now take JavaScript but they might only wait a second or two to see if your JavaScript is loaded so in the so it's how easy is it to turn on surrendering you set one option when you render your component Redux this is something we integrate with right out of the box and you can have multiple react components on a page and react on Rails using the same reacts or I use this for a header that's got a Redux or and a body and that we have the same header code that could be associated with regular ER be in the body or it can switch to react in the body support react router which shot just does what I'm not going to go into it but if you know that the fact we support that with the yum server rendering it's cool stuff it handles your routes our spec integration is super easy all you do is you put in this test of it why is our spec configuration kind of a bit difficult with react with things like you know when you're building your stuff with web pack well look if you run your integration test and you didn't update your files update your web pack created files in your JavaScript where your test fails right and so is react on Rails you don't even need to do anything at all for CI you just set up so it works in development mode and it just works with that simple helper localization all your Ruby yamo files will just work now in your JavaScript that was an incredible effort by I can't remember off the top of my head in terms of the amount of work that went into that in terms of the pull request we've taken so how does it work how does like you know what's the basic over philosophy of react and rails it I call it it's simple running with the JavaScript herder you basically put your whole client app underneath the client directory slash quiet pretty much everything is there a couple files are not but almost everything so your web pack config the other requirement is you're gonna make a web packing figure in a must public it must publish a file to the public directory and output a manifest.json in that directory and that's how the whole all the glue works together so your view helper will no be able to put it on your rails layout and say oh yeah here's the right javascript file so I say incremental migration to a high fidelity UX is happiness so if any of you take like a large app and you want to make it a brand new single page ember app is that going to be easy not necessarily actually it could be quite painful so you can mix and match rails and react.js components really super seamlessly and this is what people would react to react - rails framework a people long time ago the other thing you can do also which we're doing at chocolate code is we're incrementally migrating angular angular in rails projects to react now why are angular projects going to react because they're using angular 1 they don't want a good angular2 and we're using react on Rails some of you have probably been to ake head io we're doing that for them so the menus omakase so the mandatory parts of the omakase a part Rimmer chef selection reactant web pack that was the difference I made then react - rels react - rails was just react so we recommend react router Redux and react i18n but it's not required so what about the rails herd in 2017 you they picked yarn and es6 hey we were there with the the react on rails way in 2014 so I was pretty stoked that I made the right bets on these so you some of you have been looking at us go ok now wet packer rail supports web pack out-of-the-box right and react why do you need react on rails well as a difference in the philosophy with web Packer it's all about convention over configuration we don't want to have you we don't want you to have to do the messy work of figuring out where you know we don't they don't want you to have to figure out how to use web pack so with react on rails excuse me so with web Packer you just do some things with convention or configuration with react on rails I like to say it's the sharper knives approach you put your full client app in the client directory you can do and so that your you have to learn how to do web pack you're gonna do server rendering you're gonna and it's going to be more of our omakase approach we pick you know Redux react rather and all this stuff so it's different with web Packer it's very simply they make the react library available to you now it turns out that well explained a sec but react on Rails now also depends on web Packer so what is it like with react and rails install you know this is what it takes this is the itch s work literally this is it just works let me show you this video so what I did was so I just made a brand new rails app I'm now going into the directory I'm going to edit the gem file I'm going to add react on Rails to the gem file and I'm going to set the version of react on Rails it's really important because there is a node library that also goes with react on Rails so it's not just a gem it's also an NPM module I ran bundle now I just ran the Installer we at rails generate react on Rails install that's it bundle and yarn Foreman star def proc file - dev and that's it literally that's it that gives you hello world I give this talk if you do a few times over at pivotal so hello pivotal labs that's it so how is that kind of it just works for adding react with web pack to an app okay so what does this look like under the hood so we've got the JavaScript pack tag web pack bundle this is this is literally when you run the Installer this is what we're going to put in there by the way there's two main things you're going to get with react on Rails so one thing is see the default generator generates a simplest possible hello world app with react on Rails the other example app I showed you earlier shows you how to do it with a more production type app I'm showing you the generator one because this is a very quick demo so Java Script pack tag that is web Packers new helper so we're using it so what does it look like in your er B view you put react component hello world my props are my hello world props those could have come from the database and I passing pre-render fall so default is fall so I'm just showing you this here because we're going to convert it to true in a sec so what does this look like import react on rails from react on rails this is the compo the janitor react component import hello world from components hello world now I'm going to call react on Rails dot register hello world that is a glue between your JavaScript code and your rails view do you guys like that you know like that kind of simple right clean okay with client rendering you get here rendered hello world to Dom node so this is some debug rendering you get into development mode so part of what I wanted to do in terms of developer happiness which give you anything helpful out of the box to help you build your apps one of them just counsel logging by default you can see the props that were passed in and you're told it rendered so if you have any mistakes in there you'll know immediately this is what it looks like in the JavaScript in the source it's nice to take a look at this you can see what actually happens under the hood you can see what the web Packer view helper tag did up at the top there and down at the bottom is or your props that got passed could have been from your database and below that as a placeholder for the client-side rendering that basically rails puts a div with this gobbly gook ID there and then your JavaScript will be told by your app via some magic in react on Rails hey render this component after the page loads to that div so you see this kind of interlacing of rails world and the rail and the rails JavaScript world so what does this look like with server rendering we just had to change it to true the pre render option that's not a whole lot of work is it so in this case so notice our Council log message tells us that we serve a rendered now by the way if you've ever tried to serve a rendering you get lots of weird errors you can appreciate I think some of you probably use reaction rails I put a huge amount of work and making sure the error messages are as good as possible so here's what it looks like in the server rendering server rendering shows a special react code and that what that does is it just puts that way the browser loads instantly and somebody can looking at the app can see what going on but they don't actually you know they can't interact with the app yet so avoiding yak shaving its happiness this is one of the philosophies of shot yom of myself i teach my team members the key thing is to get out of i am stuck land one of the things I've gone from react on Rails it's just a lot of fan mail from around the world and this one I really wish error messages were all this good I kind of like that one and it kind of encouraged me to put even more and more maher messages so happiness fast feedback is fast feedback is happiness you want to quit put development cycle so we get hot reloading there's nothing you can do with react you don't even hit refresh progress over stability is happiness as I mentioned we have a very detailed changelogs if any of you see that I think I hope some of you appreciate that and the only way I can release so quickly is that some of my contributors are parts of my team built incredible integration test our integration tests will react on Rails create new rails apps add tests capybara tests to that code and that was generated and runs that as part of our CI suite and we haven't run CI on both um code chip and Travis I'm so neurotic about this yeah with different um different j/s engines it really helps I mean you find just you know if you're debugging stuff so it's great so I can release with a great deal of confidence we even support all the way back to rails 3 and Ruby 2-1 but I don't necessarily test on those ok sharp knives this is this is key sharp knives web Packer light versus web Packer why in the world would I fork something is part of the rails you know part of the rails organization who's going to use a for well I knew that I would get a few people using because its dependency in my gem so so it wasn't that bad that I did that and the problem that I was getting at first was the principle of least surprise or just doing this stuff it didn't work the way I wanted to work I'm not going to go in the details as detailed conversation on the issues but I just wanted clarity and simplicity if you're not using webpack err but we have to be able to use the view helpers you know the acid helpers to do stuff I mean you're just like gum really quick the way web Packer a big part of the way it works is is that you create your from your web pack file it will deploy files to the public directory and you'll deploy files of the manifest there's a view helper that will see the manifest and will be able to map to the name you put in your rails view and it'll put that gobbly gook unique hash on the end of it and it will display it in production mode the right thing so that's that's like the big thing right there so the helper just kind of gives you all that stuff and that was all I wanted what Packer gives you a whole lot more stuff that I didn't want anyway the good news is we've kind of come to agreement on our differences and right after the conference I'm going to be putting in the pull request and merging it web Packer light gets merged back into web Packer and react on Rails depends on it react on rails version seven and below we put everything through the asset pipeline and what happened then is I dependent on the asset pipeline to minify everything in fingerprint everything so now now what we do is we go through the web Packer helpers and it's a lot simpler now it's a lot better it's a lot more elegant so we've got a really active community on react on Rails this might even be higher now I'm super stoked on that you know running with the herd definitely the thing about using react and rails stuff gets fixed really fast most because I fix it and but other people report issues super fast we have a lot of commercial projects that are live on it by the way anybody you hear that are have projects on please please email me your project I'd love to list it too the projects are using this friends and guest uses it of course egghead IO uses it they went from angular over to react blanks another client of ours that is it so avoiding yak shaving is happiness once again so what do I do you know some of the things I've done is I created a forum and this is a place you can close your questions on react react on Rails I've got a community forum here anybody can feel free to email me and I will add you to our slack forum we have a coaching program which is kind of just like a you know small amount for some paid support for react and rails and I really do appreciate you know any referrals you give to us because is how the sabe pay for development of react or elles this obviously takes a lot of time paying if you try to do any open-source in your free time so you know the key thing what does the key stick the key thing about react on rails why are you going to use it because you're going to run with the JavaScript herd thank you very much [Applause]