Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

lissio - e vai col lissio

lissio is a VCL (Vai Col Lissio) framework for Opal to implement frontends completely on the client side.

Here you can find the best musical background while developing lissio applications.

Getting Started

To create a new lissio application just run lissio new <path>, change to the created directory and run lissio start.

By default it will run the server on port 9001, you can change it with --port, run lissio help start to see a list of other options.


Every lissio frontend begins with an Application singleton.

A Lissio::Application singleton is a Lissio::Component that takes ownership of the body element and renders itself on it, since it's just a component you can do anything you can do with any other component.

It also internally creates a router, so you can define the routes and what they do directly in the #initialize method.

class MyApplication < Lissio::Application
  def initialize

    route '/' do
      alert "This is an awesome index, ain't it?"

    route '/about' do
      alert "I don't know you, you don't know me"


Components are the heart of any lissio application, in the MVC pattern a lissio component would be a mix of a view and a controller.

Every component has the ability to define the HTML, the CSS and the behaviour in pure Ruby using various DSLs.

class MyComponent < Lissio::Component
  on :click, '.title' do
    alert 'You clicked on the title'

  on :hover, '.subtitle' do
    alert 'You hovered over the subtitle'

  html do
    div.title 'hue'
    div.subtitle 'huehuehuehue'

  css do
    rule '.title' do
      font size: 32.px

    rule '.subtitle' do
      font size:  18.px,
           style: :italic

Every component has a #render method, once it's called it will create an element based on the #tag definition or render itself in the defined #element.

On rendering the #html DSL block will produce the DOM directly, there won't be any generate-parse passes, and the #css block will generate the CSS style and put it in the <head>


Models are the classic models, they have properties and can be populated using adapters.

class Message < Lissio::Model
  property :id, as: Integer, primary: true
  property :at, as: Time, default: -> { }
  property :content, as: String

You can then instantiate the model 2, content: "huehue").


Collections are, well, collections of models, they're separate entities since they can have different adapters and have different methods of fetching or working on the models they contain.

class Messages < Lissio::Collection
  model Message


Without adapters models and collections would be pretty much useless since you wouldn't be able to persist them.

When you define a model you can set an adapter calling the #adapter method.

lissio comes with two default adapters, REST and localStorage, they take various options to define endpoints and other behaviour.

class Message < Lissio::Model
  adapter Lissio::Adapter::REST, endpoint: '/message'

  property :id, as: Integer, primary: true
  property :at, as: Time, default: -> { }
  property :content, as: String

Now you'll be able to fetch a model like this.

Message.fetch(1).then {|msg|
  alert msg.content
}.rescue {|error|
  alert error.inspect

All operations using adapters use promises, since they're all asynchronous.


lissio comes with a server to run and provide the built application, you're not forced to use it, but it provides seamless access to the HTML5 history.

This means it always gives you the index when accessing any URL that isn't a static file.

In the future it will do prerendering using phantomjs to make lissio applications indexable and crawlable by search engines, so you might want to stick with it.

Following an example on how to run the server.

require 'bundler'

run {|s|
	s.append_path 'app'
	s.append_path 'css'
	s.append_path 'js'

	s.index = 'index.html.erb'
	s.debug = true

The application usually goes in app/.

External CSS should go in css/, usually you don't need to write CSS at all, you should just use the #css method in the component.

External JavaScript should go in js/, typically compatibility files like json2 and sizzle go there, or other libraries you are using that aren't Opal libraries.


E vai col lissio!



No releases published


You can’t perform that action at this time.