DEV Community: Cristhiam

Setup Bulma CSS framework in your Rails application

Cristhiam — Sun, 29 Nov 2020 21:40:00 +0000

In this tutorial, I will show you how to setup the CSS framework Bulma in a Rails application

Prerequisites

Rails 6.x

Create new rails project

Go to your terminal and execute rails new bulma-test. You can read the guide to Starting your Rails project with an ultra-light setup

Enter to folder project, run your application by executing rails s, and go to url localhost:3000

Setup Bulma in the project

Install bulma package by executing yarn add bulma

Open the file /app/assets/stylesheets/application.css, replace all its content by

@import "bulma/bulma";

Finally, rename the file to application.scss

Ok, the setup is done, let’s try it

Create your first rails view styled with Bulma

Create Home controller and index view by executing this command rails g controller Home index.

Open the file app/views/home/index.html.erb and replace its content by:

<div class="box m-6">
  <div class="content">
    <div class="title is-2 has-text-info">Hello Bulma!</div>
    <div class="button is-success">Success</div>
  </div>
</div>

Open the file config/routes.rb, and add a route to our new view

Rails.application.routes.draw do
  get 'home/index'
  root 'home#index' # <- This one
end

Refresh the browser and you should see this page

That’s it!

Starting your Rails project with an ultra-light setup

Cristhiam — Sun, 11 Oct 2020 15:50:00 +0000

Suppose that we need to create a Rails project that will use the classic ERB views and PostgreSQL. One way to start with is simply by running the following command to create a new Rails project called my-project :

I’m using Ruby 2.7.1 and Rails 6

rails new my-project --database=postgresql

That command will generate the folder my-project , and inside it we will find the Gemfile where are defined all of the gems that will be used by our application

This is the content of the generated Gemfile

I always prefer to delete the generated comments to get a clearer view of the gems

source 'https://rubygems.org'

ruby '2.7.1'

gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 4.1'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Those are the default gems for Rails 6 installed after ran the last command. For the case of our application, we are not going to need all of them (YAGNI), so lets clean up the Gemfile a little bit

We are going to add some options more to our rails new command. You can see the full list of options by running rails new -h

Remember to delete the last generated folder before generate it again. To do it, you can use this command sudo rm -r my-project

rails new my-project --database=postgresql --skip-keeps --skip-action-mailer --skip-action-mailbox --skip-action-text --skip-active-storage --skip-action-cable --skip-puma --skip-test --skip-bundle --skip-webpack-install

Explanation of the options

--skip-keeps why? This avoids adding empty folders to your git repository (I want not commit empty files in my repository)
--skip-action-mailer why? I don’t need this stuff to start with my project
--skip-action-mailbox why? I don’t need this stuff to start with my project
--skip-action-text why? I don’t need this stuff to start with my project
--skip-active-storage why? I don’t need this stuff to start with my project
--skip-action-cable why? I don’t need this stuff to start with my project
--skip-puma why? Puma web server is suitable for Production environment, but for development I can use the default WebBrick web server
--skip-test why? I’m going to use RSpec, so I don’t need the default Minitest stuff
--skip-bundle why? I’m going to make some changes to my Gemfile then I will manually run bundle install command
--skip-webpack-install why? I’m going to manually run the command rails webpacker:install after the changes on the Gemfile are done

This is the resulting Gemfile after run the last command

source 'https://rubygems.org'

ruby '2.7.1'

gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
gem 'pg', '>= 0.18', '< 2.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Cleaning more the Gemfile

Although you have already cleaned the Gemfile by using the rails new command options, you can even clean it more by removing unneeded gems manually. Let’s do that

Gems that we can keep

rails and pg gems why These two gems are basics to develop the application with Rails and PostgreSQL
sass-rails and webpacker gems why These two gems are needed to Sprokets (default CSS bundler) and WebPack (default JS bundler)
turbolinks gem why This gem is needed to speed up navigation between pages
bootsnap gem why This gem is needed to optimization loading of the application
byebug and web-console gems why These two gems are useful to debugging the application
spring, spring-watcher-listen, and listen gems why These three gems work together to speed up the development by caching some common operations like running the rails console, tests execution, and so on

Gems that we can remove

tznfo-data why This gem is not necessary on unix-based systems (Mac or Ubuntu), so if you are using Mac or Ubuntu like I, then you can remove it
jbuilder why I’m not going to work with JSON data (at least not for now) which is commonly used in API development

This is the final Gemfile

source 'https://rubygems.org'

ruby '2.7.1'

gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
gem 'pg', '>= 0.18', '< 2.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  gem 'byebug'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

Note that, I have removed the platform part of byebug. Since the default platform on unix-based systems is ruby and I’m not going to developing on Windows, the platform parameter is not necessary

One downside of this approach is that everytime you want to start with this lighweight setup like I have shown you here, you will have to execute the same long command every time

rails new my-light-project --database=postgresql --skip-keeps --skip-action-mailer --skip-action-mailbox --skip-action-text --skip-active-storage --skip-action-cable --skip-puma --skip-test --skip-bundle --skip-webpack-install

There are shortcuts to some flags that you could use to reduce a little bit this long command: rails new command option shortcuts

-d postgresql instead of --database=postgresql
-M instead of --skip-action-mailer
-C instead of --skip-action-cable
-P instead of --skip-puma
-T instead of --skip-test
-B instead of --skip-bundle

So, the command will look like this:

rails new my-light-project -d postgresql --skip-keeps -M --skip-action-mailbox --skip-action-text --skip-active-storage -C -P -T -B --skip-webpack-install

Ok, that is quite better, but it is still very long. So, the better way is to move that long command to the .railsrc file (You can take a look on mine here)

Just put the flags in the .railsrc file like this

--database=postgresql
--skip-keeps
--skip-action-mailer
--skip-action-mailbox
--skip-action-text
--skip-active-storage
--skip-puma
--skip-action-cable
--skip-test
--skip-bundle
--skip-webpack-install

Once you have moved the flags to your .railsrc file, you can run only this command to create your rails project rails new my-project by applying the changes based on the options defined in the .railsrc file

Summary of all steps to create a lightweight project

Create your .railsrc file with the needed options
Run rails new my-project
Edit your Gemfile and remove not necessary stuff (as explained lines above)
Run bundle install
Run rails webpacker:install
Run rails db:setup
Run rails s

Note that this strategy to clean up your Gemfile and got a lightweight project setup is though to a new project with a very basic stuff that will use server-side rendering

The final recommendation here would be that always starting with the simplest stuff and grow up from that instead of starting with a lot of unknown stuff that you don’t need right now and likely you are going to not need it

An example of convivence between abstract classes and interfaces

Cristhiam — Fri, 05 Jun 2015 13:50:39 +0000

Some years ago, someone asked me about of when to use an interface and when to use an abstract class. Well, the answer depends of some factors like common behaviors and level of extensibility. I thought it would be a good idea to express my answer by using an example

The example

For this example, we are going to create an imaginary concept of social network so for us a social network is something that can post messages with images and save an history of posted messages.

Creating a SocialNetwork abstract class

public abstract class SocialNetwork
{
    public List<string> History { get; private set; }

    protected SocialNetwork()
    {
        History = new List<string>();
    }

    public void Post(string comment, byte[] image)
    {
        DoPost(comment, image);
        History.Add(comment);
    }

    protected virtual void DoPost(string comment, byte[] image)
    {
    }
}

Adding Facebook and Twitter social networks

public class Facebook : SocialNetwork
{
    protected override void DoPost(string comment, byte[] image)
    {
        //Logic to make a post on facebook
    }
}

public class Twitter : SocialNetwork
{
    protected override void DoPost(string comment, byte[] image)
    {
        //Logic to make a post on twitter
    }
}

Fig. 1 Shows a diagram with the classes relationship Fig. 1

Now imagine that, we have a class that can post a message to all of our social networks:

public class SocialNetworkProcessor
{
    private readonly SocialNetwork[] _socialNetworks;

    public SocialNetworkProcessor(SocialNetwork[] socialNetworks)
    {
        _socialNetworks = socialNetworks;
    }

    public void Post(string message, byte[] image)
    {
        foreach (var socialNetwork in _socialNetworks)
        {
            socialNetwork.Post(message, image);
        }
    }
}

Putting all together

class Program
{
    static void Main(string[] args)
    {
        var socialNetworks = new SocialNetwork[]
        {
            new Facebook(), 
            new Twitter()
        };

        var processor = new SocialNetworkProcessor(socialNetworks);

        var someImage = new byte[] {1, 2, 3};
        processor.Post(&quot;Hello&quot;, someImage);
    }
}

So far so good, but the code we have just written above has a serious design problem. Did you see the problem?. Imagine that, we have to handle a totally different kind of social network. E.g. something tha doesn’t store messages history, something like Snapchat, so our new class will be called Snapchat. Snapchat class will only keep a track of the latest posted message. Of course, we will pass our class by our SocialNetWorkProcessor, in order to post messages by our new class as well. Let me show you:

Creating Snapchat social network

public class Snapchat : SocialNetwork
{
    private string _lastMessage;

    protected override void DoPost(string comment, byte[] image)
    {
        //Logic to make a post on snapchat
        _lastMessage = comment;
        ProcessLastMessage();
        History.Clear();
    }

    private void ProcessLastMessage()
    {
        //Some logic here.
    }
}

As you can notice above, Snapchat class inherits from SocialNetwork class, so Snapchat class will store a history of posts too. But we don’t want it, so we have to clear the history list

Fig. 2 shows the class diagram including the new Snapchat class

Fig. 2

Interfaces comes in action

The problem with the implementation shown above is that, Snapchat has a thing that he doesn’t need it, i.e. History. Imagine for a moment that, SocialNetwork class would has a lot of things like History, image history, timeline generator or whatever necessary for a normal social network. Every new social network that we would want to implent would be forced to inherit all of the current staff in SocialNetwork base class. That’s why we need a higher level of abstraction there. SocialNetwork base class is what we know how a normal social network, but we need a super abstraction to define what a SocialNetwork will do without define any behavior for it, so we need to define an interface

public interface ISocialNetwork
{
    void Post(string message, byte[] image);
}

Now, we will do SocialNetwork class to implement ISocialNetwork

public abstract class SocialNetwork : ISocialNetwork
{
    public List<string> History { get; private set; }

    protected SocialNetwork()
    {
        History = new List<string>();
    }

    public void Post(string comment, byte[] image)
    {
        DoPost(comment, image);
        History.Add(comment);
    }

    protected virtual void DoPost(string comment, byte[] image)
    {
    }
}

Here is the new Snapchat class:

public class Snapchat : ISocialNetwork
{
    private string _lastMessage;

    public void Post(string message, byte[] image)
    {
        //Logic to do a snapchat post
        _lastMessage = message;
        ProcessLastMessage();
    }

    private void ProcessLastMessage()
    {
        //Some logic here.
    }
}

Fig 3. Shows the SocialNetwork and Snapchat classes implementing ISocialNetwork.

Fig. 3

Of course, we need to update our SocialNetworkProcessor class by replacing SocialNetwork class references by ISocialNetwork interface:

public class SocialNetworkProcessor
{
    private readonly ISocialNetwork[] _socialNetworks;

    public SocialNetworkProcessor(ISocialNetwork[] socialNetworks)
    {
        _socialNetworks = socialNetworks;
    }

    public void Post(string message, byte[] image)
    {
        foreach (var socialNetwork in _socialNetworks)
        {
            socialNetwork.Post(message, image);
        }
    }
}

So far, the design is powerfull enough, SocialNetworkProcessor can post in any social network that implements ISocialNetwork interface. Facebook and Twitter share common behavior from SocialNetwork and it implements ISocialNetwork. Snapchat class doesn’t share any behavior with Facebook and Twitter but it is a social network too, so it directly implements ISocialNetwork interface

A new player comes to the game

Now imagine that, we need to create a new social network e.g. Sobbr. Sobbr is a social network that only stores your posts by 24 hours. We also need a logic to process the lastPost of Sobbr like Snapchat does. By taking advantage of our current design, we can easily create a new class to share behavior between Snapchat and Sobbr, because those are volatile social networks, so our new base class will be called VolatileSocialNetwork and of course it will implement our ISocialNetwork interface

public abstract class VolatileSocialNetwork : ISocialNetwork
{
    private string _lastMessage;

    public void Post(string message, byte[] image)
    {
        //Logic to do a snapchat post
        _lastMessage = message;
        ProcessLastMessage();
    }

    private void ProcessLastMessage()
    {
        //Some logic here.
    }
}

Creating the new class Sobbr

public class Sobbr : VolatileSocialNetwork
{
    private DateTime _creationTime;

    private void DestroySocialNetwork()
    {
        //Some logic here to destroy data after 24 hours.
    }
}

Of course Snapchat will inherit from VolatileSocialNetwork too

public class Snapchat : VolatileSocialNetwork
{
}

Fig 4. Shows the final design with Facebook and Twitter inherited from SocialNetwork base class, also Snapchat and Sobbr inherited from VolatileSocialNetwork base class. SocialNetwork and VolatileSocialNetwork implement ISocialNetwork interface

Fig. 4

The final

class Program
{
    static void Main(string[] args)
    {
        var socialNetworks = new ISocialNetwork[]
        {
            new Facebook(),
            new Twitter(),
            new Snapchat(),
            new Sobbr()
        };
        var processor = new SocialNetworkProcessor(socialNetworks);

        var someImage = new byte[] {1, 2, 3};
        processor.Post("Hello", someImage);
    }
}

By following that design, we won’t to modify other parts of the code to include more social networks

Thanks for read