Code Challenge Retrospectives: React on Rails Chatroom

Recently, I’ve started doing personal projects a little differently. I’ve realized that I learn much quicker and get more done when my time to complete a project is limited. As such, I’ve started putting limits on the number of hours I can spend working on any given personal project. This approach pushes me to work faster, forces me to make decisions on how to fail gracefully,  and gives me practice with timeline estimation, a vital skill in the industry. Note that the hours do not have to be consecutive, but they are carefully logged on Github to make sure I don’t exceed them. I generally work three hours at a time.

The week before last, I gave myself the job of creating, in six hours, a sliding-tile puzzle that uses open access hi-res photos of art from the Met. It was tough, but a success. This last week I tried to push myself further, by attempting to create a React on Rails chatroom for the first time within nine hours. (Don’t expect too much from that link.) Most of what I did get done followed this tutorial. I wish I could have failed gracefully and created a blogging platform or something when it became clear that I couldn’t pull off the chat room in nine hours, but I couldn’t change direction in time and it was essentially a flop. However, I learned an absolutely insane amount about Rails technologies that I had zero exposure to before, including Decorators, Action Cable, Active Job and the react-rails gem (I had just used Rails APIs that talk to separate React front-ends up until now). It was also a great example of when to use serializers, and a very solid review of how to do so. In this post, I’ll be documenting the things I learned, the new subject matters I broached, and how I understand them at this point.

Decorators

I’d heard the term ‘Decorator’ thrown around before this week, but it was a very vague concept in my head. I think it’s pretty understandable that I thought that decorators had something to do with styling and CSS. As it turns out, decorators are a design pattern.

The Decorator design pattern lets you give an object a behavior without changing the class that it’s an instance of. Usually, something like this would be done by creating a subclass, but if you keep doing this you can end up with way more subclasses than you want, and on top of that you may need to create even more subclasses that are combinations of the previous subclasses to give a particular object all the behaviors you want. Ex: Bike, BikeWithBell, BikeWithLights, BikeWithBellAndLights, BikeWithBasket, BikeWithBellAndBasket, BikeWithBellLightsAndBasket, etc…. Any small amount of complexity in terms of custom object abilities can result in an explosion of subclasses, generating lots of code, and leading to confusion.

Decorators are an alternative. Think of them as as a wrapper for our objects that temporarily give them extra methods. There are a few different ways to implement decorators in Rails, but this time around I used the ‘draper’ gem.

Image result for don draper

I suspect that the name comes from the visual of ‘draping’ the decorator around an object. Once you install the gem, you can generate decorators from the command line, and they appear in a new directory: ‘app > decorators’.

Here is an example of a decorator:

class ArticleDecorator < Draper::Decorator
delegate_all

def published_at
object.published_at.strftime(“%A, %B %e”)
end
end

There are many ways you can now use this decorator. You can fetch an object from the database, enhanced with the published_at method:

@article = ArticleDecorator.decorate(Article.first)

…or you can create a new object with said enhancements, or you can fetch the full collections of all Article objects, with the published_at method now available for each. Decorators are super flexible and the sky’s the limit!

Action Cable

Action Cable was released with Rails 5 in July 2016. It’s the push by the Rails to integrate Websockets with the rest of the framework. Websocket is a protocol, standardized in 2011 and built on top of TCP/IP. It’s purpose is to facilitate real-time data transfer (streaming) between a server and client. This is made possible in part by the client not being required to send a request to the server in order to receive content. Information can be sent continuously between server and client while keeping communication constantly open. Action Cable is the integration of this protocol into Rails.

Action Cable comes in two parts: server-side and client-side. It exposes an API on the back end, written in Ruby, and one on the front-end, written in Javascript. Pretty wild, I don’t know of any other place where Rails exposes a JS API. Please let me know if you’re  aware of another example of that! Action Cable is a huge topic in its own right, and I’ll go further into detail about it another week.

Active Job

Active Job is a framework for declaring jobs. What we mean by ‘jobs’ is asynchronous background tasks. What callbacks and promises handle in Javascript, jobs handle in Rails. They are defined in the Jobs directory as classes that inherit from ApplicationJob. Their primary method is ‘perform’, which details what they ought to do when they are run. Once they are defined, they can be added to the queue of background processes from the controller.

The react-rails gem

Up to this point in my React on Rails adventures, I’d been keeping the two Rs largely separate from each other. I would fire up a rails API that would provide JSON endpoints for a React frontend generated with create-react-app. Though I might keep them in the same directory, I really just had two apps that didn’t know anything about the other’s existence. The react-rails gem is very different, and brings a much closer coupling to the two technologies. Once the gem is installed, we can generate new React components from terminal, and we can give Rails views access to them with the react_component method. It’s a lot of fun to work with, and I’ll probably use it much more in the future!

Conclusion

I learned a ton from this project. I’m going to try to start working more with all of these technologies, Action Cable in particular. The possibilities are crazy, my dream is to get a video chat up and running. It’ll be a little while before I start messing with that, but it’s fun to think about. Woo Rails!

Don’t Forget Design! (Pt. 3)

Time for more design features! Woot!

Photo Realism 

The simplest implementation of this is the practice of giving the site a high-res photograph as a background, and mapping links to different coordinates on the page.

More advanced examples of photorealism include visually impressive bits of UI that are made up to look like objects.

Image result for cupcuff website

Icons

Though icons seem like an afterthought, they have become a major part of every site on the web now, and are often used as a central design feature.

The following are the standard social media icons. These are the standard versions, but they show up in several different flavors and colors. Take a look at the social media icons up in the CupCuff website for an example.

Image result for social media icons

There are plenty of places for more generic icons, however, which can serve as a much better version of bullet points. Several icons have animations that can be set to play on mouse-rollover or scroll-down. The effect can look great, in a way that doesn’t even hint to the average user that you are using generic icons.

Image result for icon gifs

Guided Navigation

This is the term that I give to designing your site so that the user is guided in a certain direction, especially if that user is visiting for the first time. If you know what the majority of your users will be coming to your site to do, this is a good way to design your landing page. For example, the designers of the Bootstrap page know that most of the people coming to the page will be coming to download Bootstrap:

Image result for bootstrap website

This approach can also be useful if you want to elicit a certain response from visitors. Putting a giant login button front and center isn’t going to bring Netflix any extra revenue, but putting such a button aimed at first-time visitors might do just that:

Image result for netflix landing page

Tiles

Basically, make your website look like Windows 8. Or Pinterest. It can be accomplished through pure CSS, or a framework like bootstrap. It can be kind of jumbled together is a sort of on-purpose random way, or much more consistent.

Image result for tiles web design

Image result for tiles web design

And we’re done! Yay, design features!