Build a Twitter clone in 10 minutes with Rails, CableReady, and StimulusReflex

hi my name is Nate Hopkins also known as hop soft on both Twitter and github I founded code fund with my good friend Eric Barry it's an open source ethical ad platform built for developers I encourage you to check it out I'm also the creator of cable ready and stimulus reflex to libraries designed to help you build reactive applications with Ruby on Rails why is the industry turned to building highly reactive applications well there are several reasons as the web has matured applications have become more sophisticated and user expectations have intensified we've experienced these demands that code fund here's a brief example of one of our UIs this was created by two developers over the course of one week in fact the most sophisticated part was the business logic for fetching the appropriate data that's as it should be simplifying how reactive applications are built allows developers to focus on the logic that makes the business unique you know the stuff that actually makes money so how do we accomplish that goal we leverage three tools rails is the foundation on which everything else is built cable-ready provides the tooling to directly interact with the Dom from your rails back-end stimulus reflex is a piece that helps you build reactive applications with ease cable-ready and stimulus reflex solve different concerns so let's quickly review what each library does cable-ready is designed to broadcast Dom updates from your rails back-end to multiple clients at once it uses action cable and makes notifying users and updating the UI incredibly simple think real-time updates things like progress bars counters chat etc stimulus reflex is designed to help you build reactive applications in the simplest way possible when a single user interacts with your site rails is notified and a server side reflex is called after the reflex logic executes the current page is rear-ended server-side and then sent back to the client where a Dom diff is performed and only the changed elements are updated no complex front-end stack required just speed of development tailored to developer productivity and happiness in this video we'll build a Twitter clone using these tools first we'll set up rails for this style of development next we'll build some cable ready broadcasts and finally we'll use stimulus reflex to react to user input so let's set up our rails application we'll call it chatter now we need to add some dependencies Redis cable-ready and stimulus reflux and we'll install the NPM packages as well and finally we'll install stimulus reflux into the application okay now we can start thinking about the data model will generate a scaffold here call it a post give it a user name body some counters and we don't need J builder let's just modify the migration we'll set up some data integrity and add some defaults here there we go and we'll add one small validation and migrate you can go clean up the controller let the scaffold generated for us we'll get rid of some of these things we don't need let's order these posts with the newest at the top get rid of some of the stuff that we don't want to use and we'll just redirect back to the post path after we create a new one and we can delete these methods we're not using and let's update our params because all we care about is the body and now let's hop over and update our routes we only need index and create and let's set our route route okay let's pop over to our layout and we're gonna use bootstrap CDN to pull an bootstrap here and I took the liberty of creating a couple of pre-baked templates using bootstrap all we need is the form and the index let's update the post controller we'll set up on a post variable and we actually need to create as opposed to instantiate during create let's start up our rails server and then go preview this thing make sure it looks good in a browser it looks great let's try to create a post there we go so that gets us to our standard rails form and standard rails functionality let's make it a bit more interesting and wire in cable ready so that when someone submits all users are updated to accomplish this we have a little bit more setup to do on action cable we'll go to the connection and just set up the identifier to be session ID that way we can isolate users from each other as they connect on the web socket next we need to create an action cable channel we'll set one up for our timeline here and then we need to drop in and make just a couple of minor changes on the timeline channel we don't need unsubscribe too but unsubscribed we're going to stream from timeline that's just an identifier for who's going to receive this payload over the WebSocket next we'll go to the consumer on the client side as we receive data here we're going to look for cable ready data if it's cable ready then we're going to ask cable ready to perform its operations on that data will import cable ready and now cable ready is wired up and ready for use so now let's pop over to the controller include cable-ready broadcaster and let's start setting up the broadcast so we'll use the cable ready helper or specify the timeline stream name and we're going to use insert adjacent HTML which is a standard Dom operation we're gonna use a selector a Dom selector we're going to use the position after begins so that we put this at the top of the list and then we're going to render a partial for our post and set the locals and then the final thing we need to do is actually do the broadcast so let's go refactor the views now all right let's go create that partial there we go now we're gonna render that partial and feed it our collection of posts let's just chop this implementation out and put it in our partial and now let's wrap this in a div identified as timeline and let's see if it works awesome looks like we're in business so that covers broadcasts but now let's make it reactive with stimulus reflex so let's do a little refactoring let's copy the actual count and move it inside of this block we're doing that because we want to isolate it inside of a span tag or some element with a unique ID that will allow us to increment this by targeting it from the back end later once we've got that we'll do the same thing for the likes and our view is almost ready next let's set up the reflexes so we'll set a data attribute for reflex listen for a click event and on that click we're gonna invoke the post reflex repost method we need the ID of the post so we'll set that up as a data attribute and we'll do the same sort of thing for our likes note that reflex attributes are similar to stimulus actions that's by design okay we're ready to go create a reflex now so let's use a generator to generate our post reflex we'll pop into the app drop into the reflexes directory go to the post reflex we'll get rid of some of those comments and we'll define our repost so let's reference the element data set ID that's the ID we tacked on to the element itself and now we'll just increment the repost count and we will do the same for likes so let's go see if that worked looks like it does for the individual user we have a reactive application notice it doesn't update for the other user we need to go do a cable ready broadcast to make that happen so let's go set that up we're gonna change this value in this element so let's grab its ID go back into our reflex we'll include the cable ready broadcaster and then we'll go set the broadcast up we'll connect to our timeline stream and we're gonna set a text content which is another Dom action we'll give it the selector of that element ID and we'll just put the repost count in there and then we'll broadcast that change will do the same for likes and I think we're ready to test again and look at that it works we have a Twitter clone in ten minutes pretty fantastic all thanks to Rails cable ready and stimulus reflex special thanks to code fund and get coin for making this video possible reach out on Twitter I'm hop soft please try the library I'm excited to hear what you think and to see what cool things you're gonna build with it thanks for watching I will see you online

Channel: Hopsoft

Views: 25,412

Keywords: ruby on rails, ruby, rails, react, programming, web development

Id: F5hA79vKE_E

Length: 11min 31sec (691 seconds)

Published: Tue Apr 28 2020