A Rails-centric frontend framework running over a permanent WebSocket connection.
Quick Start
Requirements
- Ruby >= 2.0
- Rails >= 5.2.0 (with action cable)
- Redis
A deep burning desire to write less Javascript
Installation
-
Add the gem to your gemfile like so:
gem 'fie', '~> 0.3.6' -
Run
bundle installin your terminal. -
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>
-
Old:
-
Add
//= require fieto yourapp/assets/application.jsfile.//= require rails-ujs //= require turbolinks //= require fie //= require_tree . -
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 - Create an
app/commandersfolder. - 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
Controllerapp/controllers/hello_world_controller.rb
class HelloWorldController < ApplicationController
def index
@messages = ['Hello World!']
end
end
Commanderapp/commanders/hello_world_commander.rb
class HelloWorldCommander < Fie::Commander
def say_hello
state.messages << 'Hello World!'
end
end
Viewapp/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!
Hello World!