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).
- 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 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.
-
Create your first commander in the
app/commanderswith the same prefix as one of your controllers. e.g.app/commanders/hello_world_commander.rb
class HelloWorldCommander < Fie::Commander
endCreate a hello world app using our tutorial.
Usage is documented and described in our guide.
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.
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.
The gem is available as open source under the terms of the MIT License.
Everyone interacting in the Fie project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.