 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 in Ryan article and I've been walking around here, and I got to 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 Let me get a 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 shock of code and friends and guests and If any of you want to get the slides after the talk shock of code comm slash talks I'm super easy to reach also Justin at shock of code comm It's a little bit about me My two 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 as a quote from Matt's the last talk was great because 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 want to 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 Okay, 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 Jeb and about a year and a half after I started working on just this idea Where I loved about the rails doctrine as 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 a pretty much just like this So optimize for programmer happiness Convention over configuration the menu is omakase omakase means chef selections You're gonna get my chef selections in 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 this also applies to rails Adoption of react on rails because rails just came out with webpacker. I'm gonna be talking about that during the talk It's like well, you need react on rails now We got a webpacker, 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 it Because back then it was just coffee script. It was you know jQuery. So I was you know renegade Okay exalt beautiful code Making make it look good of course sharp knives I think all of you know how to use webpack and ES6. No, it's a pretty darn sharp knife compared to a little coffee script a little jQuery Value integrate 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 integration great set of integration tests and Push up a big tent. This again is like the no one paradigm I was actually talking to David a bit about this stuff because oh, yeah, push up a big tent You know that 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 drink and said maybe you might like the drink they bring Cool. So by the way rail David Heinmeyer Hansen creator of Ruby on rails I didn't mention Matt's creator of Ruby In addition to the rails doctrine, this is our big part for react on rails run with the JavaScript herd So why is that so important? Part of it you'll see with webpackers They're trying to a little bit of part of webpacker is is they don't want you to have to configure webpack Well, we're all about when you're in JavaScript land in front-end land. Just go with this go with the community run with the herd Rails back in 2014. Does anybody remember rails 2014 back then coffee script was cool. Maybe use Hamel Maybe ZRB 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. It's like guys so good Now this is an example from the rails tutorial actually learned Ruby rails from the rails tutorial Michaels 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 them see you about shock code and friends and guests is really one company so We're building a consumer app and now a 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 in 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 coffee strip jQuery Soup I made I mean if you ever felt you kind of like 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 a lot of stuff in life It's good luck a guy that I met stayed over at I've got a place or Maui I can host friends this day that I know and Somebody that met me know that and so maybe you do want to come visit me and Maui email me just in a shock of code com It's a good good place and a great place for any of my friends here that want to telecommute for a week or a month That's it. That's it on that React so anyway a guy stayed at my place is true story Guy just bow heartshore and yc grad made the website instant domain search Awesome little thing then he worked at Facebook for four years in one day and he came to stay at my place Originally for three months ended up staying nine months actually had his child at might while staying at my place And we got to be pretty good friends. He actually inspired me to start friends and guests 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 Han on it. I go. Oh my god This is different. It was just like, you know, what why is it so easy to build apps and um in Rails because what happens is is that the request response cycle the data is going one way and As soon as I realized 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, oh do this do that do that do that and do the timing of this and then you get that bug Right. We've ever seen that's awful. Anyway react Single full of data gives you superhuman powers. It just works amazing community as well and now react native My little consulting company is we build react native apps as well So can't go wrong there ask half of your friends here I've been probably 90% of you use react now if you if you're using any JavaScript framework So value integrated systems. So this is a quote from the rails doctrine That's a have all have most of it all we seek all the power of Individually tuned and distributed applications and ease in use and understanding of a single integrated system So why? You know, how's that applied rails we just saw in the last talk the whole thing it just works I wanted to make it work like that for Putting java squared 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 Js and you know get an express server go on build your API server Maybe even throw in a few microservices to and make in a couple github repose 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 do this It's complicated So the react dash rails jam This is really really popular back especially back 2014 this system came along I think in maybe 2012 and look it's from the react J. S organization. That's pretty official, right? Well, 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. This is 2014 How easy was it for me to integrate react bootstrap with you know in 2014 react dash rails is acid pipeline-based? So what I would have had to do is I would have had to copy paste the JS files in my project Do any of you still copy and paste JavaScript files from github repose in 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 oh it's awful and then so what was your other alternative Ruby gems, right? How many of you used I called gemmified JavaScript jQuery, right the jQuery libraries all these libraries, right? so Here's like an example of gemmified JavaScript react redux rails. Oh great, you know, they do they have only 2,500 or 3,600 downloads hasn't been updated in 2015 because they figured out hey, this is not cool Remember I did this. This is 2014. This is the dark days of doing this stuff So here's an example of copy and paste dependencies. God would you want to work on an open-source project that's doing that? I think so Okay, so what do we all believe in the you know the programming world drive? Don't repeat yourself right and copying and pasting code into your vendor director is yuck, 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 yarn 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 and I looked at some like browser fire Whatever they weren't I don't know there were 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've definitely one programmer happiness I wanted to embrace JS and that's kind of where I came up with number 10 run with the JavaScript heard and part of why I wanted to run with the JavaScript heard 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 coffee script. 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'd you do when you do any of you ever do this when you're like learning? You didn't want you guys saw JavaScript. Oh, let me copy and paste get the coffee script example, right? Well, great. I copy and paste the react code into the coffee script converter And well script is 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 examples and they come probably hardly anybody that's starting a new project. It's gonna use coffee script these days Okay, so recap what are the challenges with react-rails? Why didn't I want to do the way that just works and a lot of people at this time were using react-rails number one was no ES6 support Number two was that there was no support for common JS modules and Babel everything was global literally it was global back then and Babel's the thing that put it all together and gave us ES6 and So once again, I got lucky on bow told me a talk to his friend Pete Hunt Maybe you've probably seen Pete Hunt's videos. He goes. Hey Justin. We're using webpack 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 Webpack 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 ES6 So I got so excited about this and at this 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 I was finding work was I would write articles I think it's like a better than you know paying for Google ads We're 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 that 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 I don't use them but They they said that oh, yeah, you you helped us figure out how to do it We don't use your gem. We wrote our own little thing, but they saw us before I wrote the gem so here were my main points of the article was Gemified JavaScript You know what I call this tourist JavaScript because literally most of the rail stuff in 2014 was still coffee script I go no way. This is using the Gemified JavaScript coffee script and globals. How cool are you know JavaScript globals these days? Not that cool So we're gonna use npm. We're gonna use ES6. We're gonna use modules And 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 in just like Ruby gems the the amount of work it takes out a Ruby gem no 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 coffee script So I came up with this example app the react-webpack rails tutorial Some of you may have seen this. This is actually live at reactrails.com By the way, if anyone you know you can go on this site right now if anybody 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 app. 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 marked down. So I will put this in a pound All right, I also love go 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 got some funny. What's up? 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 And this little toy example. They also did not let me put this toy example on the app store when I made a react native of it But anyway, this has got some cool stuff like for example, if you said like, you know, how is this cool? It's like look this is all you know using a redux store right here. And so I changed this to 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'm not even sure Chinese maybe 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 blah blah blah. 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 gonna 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 hurt 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 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 didn't need SEO So it was too so then the other example I'll explain server 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 this stuff from the example app So hey, you know, we saw this in the last talk. It just works as happiness, right? That's the rails way, right? Well shoots, I've liked challenges and I'm gonna figure out a way to make this work So I started the react on rails gem the very first commit was August 16 2015 You know, so what were the influences you're gonna go build a gem Extract, you know make an open source example like I did don't build a gem for just some code You know, I had this open source code people were already helping me out with so extract code You can reuse and be influenced by the gems as heavily influenced by the react dash rails gem So what are the things that react on rails gives you put react under rails views? We got the view helper react component We can pass the rails Prop seamlessly to react meaning data comes out of your database will render automatically in the JavaScript Or and even better than that it'll even server render and then the job then the react server rendering will load So server rendering why is server rendering the big one now? We just had discussion with someone SEO with web crawlers They now take JavaScript, but they might only wait a second or two to see if your JavaScript's loaded So in the so it's how easy is it to turn on server rendering? You set one option when you render a 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 redux or I use This for a header that's got a redux store and a body and that way have the same header code That could be associated with regular e or b in the body or can switch to react in the body Support react router with shot just does look I'm not going to go into it But if any if you know that the fact we support that with the server rendering is cool stuff it handles your routes Our spec integration is super easy all you do is you put in this test helper 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 back Well, look if you run your integration test and you didn't update your files Update your web pack created files and your JavaScript where your test fails, right? And so as 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 YAML files will just work now in your JavaScript That was an incredible effort by a guy I can't remember off top of my head in terms of the amount of work that went into that in terms of the pull requests We've taken So how does it work? How's like, you know, what's the basic over philosophy of react on rails? It I call it it's simple running with the JavaScript heard you basically put your whole client app underneath the client Directory slash client pretty much everything is there a couple files or not, but almost everything So your web pack config the other requirement is you're gonna make a web pack config in a must public It must publish the files 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 know 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 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 gonna be easy? Not necessarily actually 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 The react-rails framework a people a long time ago The other thing you can do also which we're doing at Chaka 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 one and they don't want to go to angular two and we're using react on rails some of you have Probably been to a head IO. We're doing that for them So the menus omicase So the mandatory parts of the omicase part remember chef selection react and web pack That was the difference. I made than react dash rails react dash rails was just react So we recommend react router redux and react i18n, but it's not required So what about the rails heard 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 this go okay now web 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 over configuration With react on rails. I like to say it's a sharper knives approach You put your full client app in the client directory You can do and so that you have to learn how to do web pack. You're gonna do server rendering You're gonna and it's gonna be more of our omakase approach. We pick You know redox react router 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, I'll explain in a sec But react on rails now also depends on web packer So what what is it like with react on rails install? You know, this is what it takes. This is the it just 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 gonna edit the gem file. I'm gonna add react on rails to the gem file And I'm gonna 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 are rails generate react on rails install. That's it bundle and yarn Forman start f Proc file dash dev and that's it literally that's it That gives you hello world I gave this talk a few days a few times over at pivotal so hello pivotal labs. That's it So how was that kind of it just works for adding react with webpack to an app? Okay, so what does this look like under the hood? So we've got the JavaScript pack tag webpack bundle. This is this is literally when you run the installer This is what we're gonna put in there by the way There's two main things you're gonna get with react on rails So one thing is see the default generator Generates the 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 JavaScript pack tag that is webpackers new helper. So we're using it So what does it look like in your erb view? You put react component hello world My props are my hello world props So this could have come from the database and I passing pre-render false the default is false But I'm just showing you this here because we're gonna convert to true in a sec So what does this look like? Import react on rails from react on rails. This is the component the jet the react component Import hello world from components. Hello world now. I'm gonna call react on rails register Hello world that is the glue between your JavaScript code in 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 in development mode So part of what I wanted to do in terms of developer happiness Was 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 that so you can see what actually happens under the hood You can see what the webpacker View helper tag did up at the top there and down at the bottom is are your props that got passed could have been from your database and Below that is 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 our app by 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 rear 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 counsel 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 react on 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 For 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's going on, but they don't actually You know they can't interact with the app yet So avoiding yak shaving is happiness. This is one of the philosophies of shot You know of myself I teach my team members a key thing is to get out of I am stuck land One of the things I've gotten from react on rails is 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 the one that kind of encouraged me to put even more more mirror messages. So happiness Fast feedback is fast feedback is happiness. You want a quick quick development cycle? So we get hot reloading There's not thing you can do with react. You don't even hit refresh Progress over stability is happiness as I mentioned we I have a very detailed change log 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 tests our integration tests will react on rails create new rails apps Add tests capi bar a test to that code and that was generated and runs that as part of our CI suite And we even run CI on both them code chip and Travis. I'm so neurotic about this Yeah with different different js 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 on by don't necessarily test on those Okay sharp knives, this is this is key sharp knives Webpacker light versus webpacker why in the world would I fork something as part of the rails? You know part of the rails organization who's going to use a fork? Well, I knew that I would get a few people using it because it's dependency of my gem So so it wasn't that bad that I did that and the problem that they I was getting at first was a principle of least surprise They're just doing this stuff. It didn't work the way. I wanted to work I'm not going to go in the details as a detailed conversation on the issues But I just wanted clarity and simplicity if you're not using webpacker But we have to be able to use the view helpers. You know the asset helpers to do stuff. I mean here here just like Really quick the way webpacker a big part of the way it works is is that? You create your from your webpack 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 gobbledygook unique hash on the end of it and it'll display it in production mode the right thing So that's that's like the big thing right there So the 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 that we've kind of come to agreement on our differences and right after the conference I'm going to be putting in the pull requests and merging it webpacker light gets merged back into webpacker 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 they depended on the asset pipeline to minify everything and fingerprint everything so now Now what we do is we go through the webpacker 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 Super stoked on that You know running with the herd definitely the thing about using react on rails stuff gets fixed really fast Mostly 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 it. Please please email me your project I'd love to listen to the projects are using this friends and guests uses it of course Aked IO uses it They went from angular over to react Blinks another client of ours that uses 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 Post 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 on rails and I really do appreciate You know any referrals you give to us because this is how this is how we pay for development of react on rails It's obviously takes a lot of time for any of you tried to do any open source in your free time So, you know the key thing what is the key? 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