fie

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

  1. Home
  2. Quick Start

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!

Next up: Guide ->