A Rails-centric frontend framework running over a permanent WebSocket connection.

Quick Start

Last updated: Jul 25th, 2018

Requirements

  • Ruby >= 2.0
  • Rails >= 5.2.0 (with action cable)
  • Redis
  • A deep burning desire to write less Javascript

Installation

  1. Add the gem to your gemfile like so:
              
                gem 'fie', '~> 0.3.3'
              
            
  2. Run bundle install in your terminal.
  3. Replace yield in your main layout with <%= render template: 'layouts/fie' %>. Below is an example.
    • Old:
                    
                      <!DOCTYPE html>
                      <html>
                        <head>
                          <title>Fie</title>
                          <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
                          <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
                        </head>
      
                        <body>
                          <%= yield %>
                        </body>
                      </html>
                    
                  
    • New:
                    
                      <!DOCTYPE html>
                      <html>
                        <head>
                          <title>Fie</title>
                          <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
                          <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
                        </head>
      
                        <body>
                          <%= render template: 'layouts/fie' %>
                        </body>
                      </html>
                    
                  
  4. Add //= require fie to your app/assets/application.js file.
              
                //= require rails-ujs
                //= require turbolinks
                //= require fie
                //= require_tree .
              
            
  5. Ensure action cable uses Redis in development by changing async to redis in config/cable.yml.
              
                redis: &redis
                  adapter: redis
                  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
                  channel_prefix: fie_example_app_production
    
                development: *redis
                test: *redis
                production: *redis
              
            
  6. Create an app/commanders folder.
  7. Restart your application.

Your first commander.

Create a commander for one of your controllers in app/commanders.

app/commanders/hello_world_commander.rb
      
        class HelloWorldCommander < Fie::Commander
        end
      
    

Hello World

Route
app/config/routes.rb
      
        Rails.application.routes.draw do
          get '/', to: 'hello_world#index'
        end
      
    
Controller
app/controllers/hello_world_controller.rb
      
        class HelloWorldController < ApplicationController
          def index
            @messages = ['Hello World!']
          end
        end
      
    
Commander
app/commanders/hello_world_commander.rb
      
        class HelloWorldCommander < Fie::Commander
          def say_hello
            state.messages << 'Hello World!'
          end
        end
      
    
View
app/views/hello_world/index.html.erb
			
        <b>Messages</b>

        <br>

        <% @messages.each do |message| %>
          <%= message %>
          <br>
        <% end %>

        <br>

        <button fie-click='say_hello'>Say hello</button>
			
		
Result:
Messages
Hello World!