Project: fie - The Ruby Toolbox

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

fie is a framework for Ruby on Rails that shares the state of your views with the backend.

For each controller within which you wish to use fie, you must create a commander. fie uses commanders in the same way a Ruby on Rails application uses controllers.

When an instance variable is changed in the commander, the view is updated. Likewise, if the same variable is modified within the view (through a form for example), the change is reflected in the commander and within other instances of the variable in the view. This means that fie supports three-way data binding.

fie therefore replaces traditional Javascript frontend frameworks while requiring you to write less code overall. If you implement fie within your application, you will no longer rely on Javascript for complex tasks, but rather use it only for what it was intended to be used for: to be sprinkled in your views and make them feel more dynamic (through animations for example).

Installation

Add the gem to your gemfile like so:

gem 'fie', '~> 0.3.6'

Run the bundler

$ bundle install

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>

Add //= require fie to your app/assets/application.js file.

//= 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/commanders folder.
Restart your application.
Create your first commander in the app/commanders with the same prefix as one of your controllers. e.g. app/commanders/hello_world_commander.rb

class HelloWorldCommander < Fie::Commander
end

Hello World

Create a hello world app using our tutorial.

Usage

Usage is documented and described in our guide.

Development

Your first step is to run npm install within the root folder in order to install the relevant NodeJS packages.

To work on the JavaScript, begin by running npm run build. This will start a watcher that will automatically transpile your ES6 within the lib/javascript folder into a bundle within vendor/javascript/fie.js using webpacker.

The Ruby files can be found within lib/fie and their development is the same as in any other gem.

Please add tests if you add new features or resolve bugs.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/raen79/fie. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.

Code of Conduct

Everyone interacting in the Fie project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.