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.
Happy coding.
