Wstęp do frameworka Volt

Michał Zdunek

WEBDEV Obecnie

• MVC, routing po stronie serwera (RoR, NodeJS etc.)
• MVC, routing po stronie klienta (Angular, Ember etc.)
• Czy da się to uprościć?

Volt Framework

• Premiera pod koniec 2014 roku
• Obecnie w wersji 0.9.7
• Ten sam kod po stronie serwera jak i klienta

Opal

class User
  attr_accessor :name

  def initialize(name)
    @name = name
  end

  def welcome(day)
    "Welcome " + @name + ", it's " + day
  end
end

function $User(){};
var self = $User = $klass($base, $super, 
    'User', $User);

var def = self.$$proto, $scope = self.$$scope;

def.name = nil;
self.$attr_accessor("name");

Opal.defn(self, '$initialize', function(name) {
  var self = this;

  return self.name = name;
});

Opal.defn(self, '$welcome', function(day) {
  var self = this;

  return $rb_plus($rb_plus($rb_plus("Welcome ", 
    self.name), ", it's "), day);
});

Ruby

JavaScript

AUTOMATYCZNA SYnchronizacja danych

• Model po stronie klienta przesyłany do serwera
• Inni klienci automatycznie otrzymują aktualizacje przez WebSockets

Podział Aplikacji Na komponenty

• Każda aplikacja składa się z przynajmniej jednego komponentu (main)
• Komponenty mogą być różne - od małych widżetów po duże sekcje aplikacji
• Mogą być wydzielane do gemów

Taski

• Umożliwiają wykonywanie kodu tylko na serwerze

MathTasks.add(23, 5).then do |result|
  alert result
end.fail do |error|
  puts "Error: #{error}"
end

class MathTasks < Volt::Task
  def add(x, y)
    x + y
  end
end

• Wykorzystywane jako obiekty Promise

KOLEKCJE

• Identyczny interfejs do różnych kolekcji: page, store, cookies, params, itd.

page._name = 'Ryan'

store._items << {name: 'item 1'}

cookies._user_id = 520

demo

Koniec

• https://github.com/voltrb/volt