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

Made with Slides.com