Blending React into a Rails Project

November 7, 2016 by Steven Leave a Comment

With the release of Rails 5.1 and the integration of webpack and yaml into rails all that is described here can be done much more simply using what is integrated into rail. That said, if you can’t upgrade yet or require serverside render the solutions below are still great options for you.

While the dawn of the large JS frontend app is long past and there is a new magical unicorn and pixi dust JS framework every time you turn around, there are still a lot of stock standard web apps out there. As a web consultancy, these apps have been our bread and butter for quite some time and there is no real need to change them. They just work.

But as things change, it would be nice to add some of the dynamic features of the new javascript hottness to our standard rails apps. Here are a few ways to integrate React into rails.

Notice: there is going to be a stupid amount of alliteration in this post. Fair warning. React rendering in Rails rendered radical web app.

React-Rails gem

I am starting here because this is the easiest way to get started with React on Rails. Per usual, just include the gem in your gem file gem react-rails, bundle install, and then run the install generator rails g react:install.

The reason I say this is it is fully integrated with sprockets and the current rails asset pipeline. if you already understand the asset pipeline and helper methods, then you’re good to go. Also, there is no dependacy on npm.

This is all you need to mount a React component to a spot on the page. That is this helper react_component.

<%= react_component("MyCoolWidget", prop1: "123", prop2: "abcd") %>

Other features include the ablitiy to render the components on the server for faster rendering and SEO, rendering a component as a view, and writing your components in ES2015 syntax or CoffeeScript.

One problem to note is that this doesn’t support a module system for JavaScript like Common-JS or ES6 imports. So, working with packages for React that do not have a version that does not export a useable variable is difficult.

[Read more…]

React Testing

October 3, 2016 by Steven Leave a Comment

React Testing

Lets face it, testing is important but testing javascript UIs is not often straightforward.

Now for React. React is a excellent choice for your front-end view logic. I love React for how productive it makes me feel. However, one downside of the React ecosystem is that there are so many choices to make in terms of what tools you will use. Varying choices include Webpack, Browserify, ES6 and Babel to manage your state, business logic and request data. It requires a lot of sifting through. To make it easy, here is a set of good choices for testing React that have worked well for us.

Tools

Mocha & Chia

Mocha is a test runner that has been around for a good while. It provides describe() and it() functions for BDD style testing. It is reminiscent of Rspec in the Ruby world. Chia is often used with Mocha as it brings a whole host of assertions for whichever style of testing you like.

Chia

With Chia you have the options of using expect, should, and assert style assertions making it flexible for anyone’s taste.

Enzyme

Enzyme is a React component testing library from airbnb. It provides multiple, optimized ways to render React components and make assertions against them. Enzyme uses JSdom for some of its functionality and will be included as a dependency.

[Read more…]

Implementing a Bootstrap Theme

June 29, 2016 by Crystal Richardson 2 Comments

After completing the development bootcamp, LEARN! in San Diego, and joining Notch8 as Interns, my team members and myself were tasked with creating a web app using a bootstrap template. We had worked on front end and had previously created web apps from the ground up in our group projects but we spent a full day browsing blogs and guides on how to best implement a template. Unfortunately, the guides we had found were not as straightforward as we would have liked. None offered a simple set of instructions of what to do and the rational behind it. So we created our own guide.
The most important aspect of web development to understand when using a bootstrap template is the asset pipeline. It is highly recommended that you familiarize yourself with this framework before attempting to use a template.
In simple terms, using a template requires that you copy all the images, scripts and css into the asset pipeline. Once this is done, you are free to use whatever you want from the html part of the template and take out what you don’t need. The following is a step by step guide on how to achieve this.

[Read more…]

Phrack Magazine Article in Hacking Rails

May 16, 2016 by Matt Clark Leave a Comment

Older Rails applications are more vulnerable to hacking now

Phrack magazine, a prominent hacking zine, just published a new issue. For the first time, it includes an article on Rails vulnerabilities and how to exploit them. If your app is current, there’s nothing to worry about, but older apps should definitely be aware of all these items:

http://phrack.org/issues/69/12.html#article

It’s also good to see the kinds of attack vectors people are exploiting so that we keep a sharp eye out for new issues as they arise.

Bash Commands – But In Ruby!

March 24, 2016 by rob 2 Comments

Ruby Developer – Essential Bash Commands, Ruby Edition

Ziemek wrote an amazing post about essential bash commands for Ruby developers over at his blog. I thought it would be fun to show some of the same commands, but using command line Ruby instead. I find using Ruby with the -ne flag easier to remember and easier to expand in to more complex scripts.

This is not a hammer vs screwdriver kind of argument… more of a composite handle hammer vs a wooden handle hammer. Without further ado, I’m going to show you how to use Ruby instead of the awk / grep / sed combo going example by example to transform each of Ziemek’s fantastic Bash examples in to Ruby ones.

[Read more…]

React-Rails gem

React Testing

Tools

Older Rails applications are more vulnerable to hacking now

Ruby Developer – Essential Bash Commands, Ruby Edition

Capabilities & Services