FIE

FIE

• Front end framework voor Rails via WebSockets
• Vervangt traditionele JavaScript front end frameworks
• State van de views delen met de back end
• Commanders (controllers)
• Three-way data binding
• Ook changes in child objects

FIE

• Front end framework voor Rails via WebSockets
• Vervangt traditionele JavaScript front end frameworks
• State van de views delen met de back end
• Three-way data binding
• Ook changes in child objects

Installatie

gem 'fie', '~> 0.3.0'
$ bundle install
<%= render template: 'layouts/fie' %>
//= require fie

Redis

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

Commanders

• Controllers van Rails
• Voor elke controller een commander
• Alleen keyword parameters

class GuideCommander < Fie::Commander
  def my_method1(argument1:)
    puts argument1
  end

  def my_method2(argument1: 'default', argument2:)
    puts "This is an optional argument: #{ argument1 }"
    puts "This is a required argument: #{ argument2 }"
  end
end

HTML DoM bindings

• Vergelijkbaar met JavaScript event listeners
• Methodes aanroepen in commanders
• Attributen met "fie-" prefix
• JSON object met parameters: "fie-parameters"

<% parameters = {
  string: 'string',
  integer: 123
}.to_json %>

<a fie-click="my_method" fie-parameters="<%= parameters %>">klik mij</a>

Beschikbare dom bindings

• fie-parameters
• fie-click
• fie-submit
• fie-scroll
• fie-keyup
• fie-keydown
• fie-enter

Pools

• Pub/sub systeem
• Identificatie met 'subject', zoals channels in Action Cable 
• Hook met een callback in een commander
• Pool wordt automatisch gemaakt na toevoegen van een pool hook

Publishen naar pools

• Kan overal vanaf gedaan worden
• Subject is benodigd
• Welke parameters worden verwacht?
• Publish lazy ontvangt de subscriber het object als eerst
• Grote pool, verzender is niet de eerste ontvanger

Fie::Pools.publish(:notifications, 'New message arrived.')

Fie::Pools.publish_lazy(:notifications, 'New message arrived.', '1b733ccc-8bfd-49e4-bfc3-6ceed876acf0')

Caching

• Langzamer naarmate de pagina's groter worden
• Partials cachen
• Voorkomt dat de gehele pagina opnieuw geladen wordt

<%= render partial: 'guide/commander', locals: { message: 'hoi' }, cached: true %>

Beperkingen

• Instance variables mogen niet nil zijn
• Partials altijd prefixen met de path
• Vermijd jQuery libraries
• Gebruik de event listener van fie, niet de native versie 
• Performance in development is slechter dan productie
• Any Cable wordt aangeraden i.p.v. Action Cable

DEMO