Ruby on Rails — Front-end tools (part deux)

So, you’ve loved our first post about Ruby on Rails tools and tips so much that you’ve decided to come asking for more? Or did you stumbled on this by accident when looking for an instructed opinion about some Ruby gems? Either way, feel free to continue reading about some of our favorite gems. And don’t forget to check the other posts of the series for dozens of other cool and useful suggestions!

Keep in mind that all the gems on this list were used in at least one of our projects, so I think I know what I’m talking about. Let’s get to the list immédiatement!

Front-end Tools

So you’ve got all the back-end on your app sorted out. The data is being processed the right way and your unit tests are tired of showing you the green dots. Still, the models are crying out to the controllers for help to show all their strings and integers to le world!

Well, this will become much easier with the help of some of these gems.

Styling ✨

Bootstrap must be the world’s most beloved responsive component library there is. This gem will enable you to use every one of its components with ease. Ignore the haters and you’ll be happy for the rest of your app’s lifespan!

Autoprefixer is a must have in today’s multi-browser world, where you need your web app to look pretty on every browser. When you add the standard CSS rule this gem will do the dirty work for you! Missing the old days of ‘You are using an incompatible web browser’? Those were better, simpler times… Is something no one ever said!

Forms 📝

Formtastic gem might be the quickest way to have a good looking form out of the box. With a nice syntax for you to style it as you like and support for multiple models in the same form.

Like Formtastic, Simple Form helps you build your forms in a simple way — La Palice wouldn’t have said it better. It also supports nested models whilst giving you more freedom to customize its style. The syntax is similar to Formastic’s so you should be able to choose which one to use based on your design needs.

So now you want more power on your nested forms and you want it right away? No problem! Cocoon is a nested form builder, which works well with both Formtastic and Simple Form. It will give you a nice quick way to handle adding and removing nested elements to the form. Although it depends on jQuery, this gem could be a real time-saver. So you could get some extra spare time to eat delicious croissants. Hmmmmmmm… Croissant au fromage… 😋

Would you like to have a contact form on your app to receive feedback from the users? MailForm is the right gem for this! Create the email structure, style it and get your clients’ messages on your email box. Make sure your app is working properly to prevent hate email.

JavaScript Utilities 📎

With JsRoutes your Rails’ named routes are available on javascript, which makes this gem a must have on almost every project that you’ll be working on. You have a myriad of useful options to configure the routes helpers, including making them camel case. Really nice if you’re a convention disciple like us.

For those issues where you would love to access your Rails variables on your JS, it’s always good to count on the Gon gem. Right now you can instantiate a Ruby Hash with all the variables you need, push it to the Gon object and access them directly as this object is available on your javascript. Can’t think of a simpler more convenient way to do this!

Want to use cool ES6 style javascript? Webpacker enables that and much more. It has so many features that you should take some time exploring it, but code splitting and support for React, Angular, Elm and Vue are a must in the Era of the Javascript.

Pagination 🗒

WillPaginate is a nice gem to solve your pagination issues. Install and start using it painlessly! It offers some versatility by supporting ActiveModel Relations and Arrays! The only drawback is that the HTML and links generated are not customizable. If you need to add some parameters to your link you’ll have to choose an alternative away.

Kaminari is the best alternative. This one lets you personalize everything and even create some themes if you need to. The drawback? No Arrays Allowed. So be smart in choosing which pagination gem suites your project better.

I know you were enjoying the list but this is it for now. If you know about any new gems that work like a charm and are more useful than a charm give us a heads up! We do like to be on the vanguard of Rails development, so you can expect another awesome collection of gems in the next post. Paulo will probably be back on the writing desk for that one, so expect more gifs with minions, and say bon voyage to the French vocabulary.

À bientôt!

Deemaze Software is a digital agency developing products for web and mobile. Catch up with us on Twitter, Facebook or Instagram. Let us know it there’s something you want us to write about! 🎈