In order to stay connected to the latest technologies in the world of front end development, I started side projects to learn them.
I was primarily motivated to solve real life problems I encountered on a regular basis. I chose to develop a hairdressing booking application because I often had to wait for hours to get a hair cut and beard styling. My favourite barber was not only a talented stylist but had a highly entertaining personality — attracting all sorts of people, from young ones to teenagers, businessmen to retired people.
As an avid reader, I started reading the bestseller The Lean Startup and got inspired to develop this booking app. I also apply knowledge from this book at work, which was a tremendous boost from the traditional Scrum practices as our team was small.
ReactJS was all hype at that time with plenty of tutorials available online. Most of the job applications I found for full stack or front end developer, required at least knowledge or experience in this library.
I chose ReactJS with firebase as I did not want to spend money on buying and maintaining a server for friends to test for feedback.
Finally after almost 6 months of work, I only managed to complete the :
- registration part
- image upload
- display a list of barbers and salons in the region
But, there was a lot of positives.
I got to learn :
- ReactJS 16 at that time
- Redux 4
- Document based databases
As too much effort was required to progress, I decided to pause and look for alternative solutions. At that point, I implemented most the features myself from scratch.
Meanwhile, in my free time I also tried looking for another framework or solution that could provide a more efficient approach. I initially tried Django but using Manjaro Linux at home at the time, I had issues with important python dependencies.
Being an avid reader of the signal vs noise blog from a few years, I instead chose to experiment with Ruby on Rails. David Heinenemier Hansson impressed me on his stand against Test Driven Development (TDD) when I was studying Information Systems at University. From that time, I have followed his works whenever possible.
Nonetheless, I could not install rails on Manjaro Linux too. Nokogiri library could not be installed and it was an important dependency. I tried looking for solutions on line to no avail. I finally replace Manjaro by Kde Neon, that uses Ubuntu.
Nonetheless, I had the same issue. No Nokogiri. However, I quickly found an answer in the Ubuntu forum. I downloaded the gem through Github, compiled and installed other tools. Finally Rails was installed.
On Windows, the process was much quicker though. It just worked with a single click. It took more time though. There was other alternatives such as rbenv and rvm, which I learnt much later when deploying my app on digital ocean VPS droplet.
My immediate productivity boosts were features that could easily be implemented via gems. For example, using devise, authentication was easy to add with a few keystrokes.
I followed a few weeks of Rails tutorials, watch countless videos before jumping in. I found the initial MVC structure not easy to learn but having worked with Zen Framework 2 and Symfony on PHP before, it was way easier than expected. In 2 weeks, I added more features than I had with ReactJS + Firebase for 6 months. And I was still learning Rails at that time.
I believe for developing a quick MVP for product market fit, the ideal solution is using Ruby on Rails. I spent only 4 to 5 hours per week including the weekends to implement fully working features. As a comparison, I once spent 2 to 3 hours on a Sunday, only to understand how to store and retrieve images with the Firebase storage.
After a few months, I started appreciating the excellent Ruby language and outstanding productivity capable using the Ruby on Rails framework
The following is a list of gems I found highly useful and how I implemented it. Some were tricky, others straightforward.
This is my sideproject done with Rails : http://184.108.40.206/
This one done using ReactJS + Firebase and hosted on Heroku: https://bookhairstylist.herokuapp.com/
UI & Front End
For the front end of the application, as I am well versed in bootstrap, I chose the latest version so that I can use custom themes and develop pages rapidly using already existing codes.
Instead of coding the active link in the navbar, I use this gem.
With devise, I find it easy to add authentication to a controller. For example, if I want any user to have access to the index page —displaying the list of businesses, I apply the authenticate_user helper to other actions.
In Rails, I found implementing image upload a breeze. Codes for displaying and saving images are available all around the net.
For example, to save a photo, I used the lines below in the create function in my photos controller.
I assign a photo to a business id. The get_user_business helper returns a collection of the currently logged user. I just use the id.
A user has to create a business. Once done, any photo uploaded will be assigned to it. For an admin, he or she chooses from a list of already available businesses.
A simple upload button with bootstrap styling that does its job.
This gem is used in conjunction with carrierwave for image upload.
Using this gem with active record, makes it easy to upload and attach a photo to a business entity.
Kaminari is an excellent gem for pagination. The first time I used it, I thought it was not working. I tried guessing the reason — I had to have a minimum of records for it to display. In fact, the process was simpler than I could imagined, having recently part of a team that implemented a full blown pagination in the MEAN stack from scratch.
Ransack is a brilliant gem for searching. I only added only a few lines for it to work. Moreover, pagination with searching is always tough to do well. At work, in my previous projects, whenever search or advanced search feature was used, the pagination had to be updated as well. But in Rails, Ransack and Kaminari does all the heavy lifting — a huge productivity boost.
Businesses are retrieved depending on ransack parameters.
The Active Records collections from ransack is filtered to get :
- active ones
- including photos that belong to the business
- sorted by name (this could also be date created or another property)
Kaminari takes the filtered collection and creates an array that displays the pagination in the index page.
I found capybara highly productive when writing End To End tests. I did not use any front end library at this point, so testing was straight forward. I use this cheatsheet to quickly grasp the key points and experiment with the different matchers.
When I started learning TDD and Unit Testing with Jasmine and Karma for AngularJS back in 2016, I found plenty of references to RSpec. In mosts Ruby on Rails tutorials I followed, they used this gem instead of the default one.
I used this gem for generating fixtures or factories that make it easy to create and manage objects when writing tests.
The records are created in the test database. I use this gem to remove them after the testing suite is completed. I add this line in the rails_helper.rb file :
The following gems help in :
- Reloading the HTML page when a change has been made, similar to gulp-reload or hot module replacement in webpack
- The testing suite reruns whenever a spec file has been modified.
They did not work by default on Windows 10.
On production, I use Postgresql as sqlite3 is not recommended. This gem makes it easy to connect to the appropriate database using simple yml configuration.
I followed this tutorial to deploy my application on my VPS. I found it a bit hectic to start with but after a couple of hours, I understood how deployment was automated using capistrano.
Using capistrano, with this command, I deployed my app as seamlessly as heroku.
cap production deploy
I find Ruby on Rails a highly productive Web framework to quickly implement ideas that could be tested by users or solve a solution for myself. For example, an idea that has been brewing in my mind is to automate the upload of documents by taking photos on my mobile — using a library such as Rtessaract to convert the images to words and store them as documents. They can be added into specific folder for easier retrieval. I got this idea when reading the Getting Things Done book by David Allen. In fact, many of my important documents are scattered around the house and usually takes me time and effort if I needed to look for one.