Integrating Rails Applications with JS Frameworks
I have been working on a large rails project for the better part of a month and I find myself much more immersed in the back-end and database development. Creating models and controllers for data is exciting so I decided to use materialize as a front-end framework to cut down on development time.
Materialize is an easy-to-use framework, but it requires a few tricks to make it shine with a rails application. By writing exclusively in Rails, much of my code is in .erb format. Here are a few lessons about integrating materialize that I have learned along the way.
- You can still use action view helpers from Rails like form_for or url_for in your code.
In the example above, I used the form_for Ruby helper method which generates HTML quickly and easily. Materialize also has a set of handy form HTML templates that serve the same function. Integrating these two frameworks is as easy as wrapping the form in the form_for block. It sounds simple, but if I can save you some time then I’ve accomplished my goal.
2. Changing UI color looks like this:
The materialize documentation does a great job of explaining more complex topics, but adjusting the color is almost too obvious that it’s easy to miss.
If you look at line 4 in my example, I create a search field and by adding ‘grey darken-1’, I can change the field color to grey without affecting any other CSS property. The Materialize color options are wide-open, as long as you add your color choice to the class name, you are in business.
3. Adding Materialize is as easy as adding a gem and placing the CSS file into the stylesheets folder.
Add gem ‘materialize-sass’ and place the entire materialize folder that you download from the materialize website into ‘app/assets/stylesheets/materialize’. Finally, add this line to the bottom of your application.html.erb file:
Add add this line somewhere in the header:
Front-end programming is fun when you are designing custom functionality like a game or a more interactive graphic. When it comes to complex back-end development with clean and simple user interfaces, just let materialize do the heavy lifting so you can focus on the part that matters. That or hire another programmer.