Agenda

Hello World
Demo
Little Data
Wunderbar Syntax
Angular.js
Ruby2JS
Vagrant
Resources

Speaker Notes

Hello World

I start by presenting “hello world” in a number of languages. This not only “breaks the ice”, it allows me to softly introduce the idea of optional parenthesis.

Demo

Next, I ask for a volunteer from the audience. After I verify that they are a committer, I enter their name into my committer search application. I bring up their information, click on a committee that they participate in, and then bring up prior reports from that committee.

Little Data

In a world where people focus on terabytes and transaction rates, I’m focusing on applications that are run perhaps a few times per day, and where one can feasibly download the entire database (e.g. list of committers). I note that most of my scripts are CGI, though I am now expanding to Sinatra.

Wunderbar syntax

Elements, attributes, text, combined, nested; end with a web hello world, followed by a form based greeting showing logic seemlessly integrated with presentation.

Angular.js

Splitting up larger applications. Models are JSON, or are loaded from JSON; more generally, models are classes. Views are templates and partials; augmented by filters and directives. Controllers are also class like objects, with scopes.

Ruby2JS

Examples of conversions provided, based on deployed code. Show some of the value filters provide. Show the value of angular.rb.

Vagrant

Walk through the steps of setting up your own virtual machine to do development on.

Resources

Links to where you can find more information.

Hello World

print "Hello World"

print("Hello World")

print "Hello World\n";

puts "Hello World"

              public class HelloWorld {
                public static void main(String[] args) {
                  System.out.println("Hello World");
                }
              }

Demo

(ASF committers only)

Little Data

Big Data

Transactions per second
Terabytes
Separation of concerns

Little Data

Transactions per day
Kilobytes
Mixed logic and presentation

Examples

One board report published per month
One ICLA received per day
Two new ASF PMCs per month
Three invoices per month
One members meeting per year

ICLA - process

View ICLA
move from received to iclas
add a line to iclas.txt
svn commit
send an email

ICLA - data

PDF
name and email

Commonalities

Scripts

SVN
LDAP
email

Produce HTML
Mostly CGI, some Sinatra

Wunderbar

_br

<br/>

_p

<p></p>

_h1 "title"

<h1>title</h1>

_script src: "http://example.com/jquery.js"

<script src="http://example.com/jquery.js"></script>

_div.name

<div class="name"></div>

_a.link!

<a id="link"></a>

_a "text", href: "link"

<a href="link">text</a>

_ul do
  _li 'one'
  _li 'two'
  _li 'three'
end

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

require 'wunderbar'

_html do
  _style %{
    input {display: block; margin: 2em}
  }

  _h1 'Greeter'

  if @name
    _p "Hello #{@name}!"
  else
    _form method: 'post' do
      _p 'Please enter your name:'
      _input name: 'name'
      _input type: 'submit'
    end
  end
end

  if @name
    _p "Hello #{@name}!"
  else
    _form method: 'post' do
      _p 'Please enter your name:'
      _input name: 'name'
      _input type: 'submit'
    end
  end

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"/>
    <title>Greeter</title>
    <style type="text/css">
      input {display: block; margin: 2em}
    </style>
  </head>

  <body>
    <h1>Greeter</h1>
    <form method="post">
      <p>Please enter your name:</p>
      <input name="name"/>
      <input type="submit"/>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"/>
    <title>Greeter</title>
    <style type="text/css">
      input {display: block; margin: 2em}
    </style>
  </head>

  <body>
    <h1>Greeter</h1>
    <p>Hello Sam!</p>
  </body>
</html>

Prereqs

Ruby
gem install wunderbar

Integrations

CGI
Sinatra
Rails

Angular.js

HTML enhanced for web apps!

Server

HTML (fragments)

Stylesheets

JSON

JavaScript

Images

Client

Model

View

Controller

Router

Model

JSON

any class

AsfRosterServices.factory("Committer", function(Roster, Member) {
  function Committer(ldap) {
    angular.copy(ldap, this)
  };
  return Committer
}

View

templates

partials

filters

directives

_h1 'PMCs'
_table do
  _tr ng_if: 'loading' do
    _th 'loading...'
  end

  _tr ng_repeat: 'pmc in pmcs | orderBy:"display_name"',
    ng_controller: 'PMCLine' do
    _td do
      _a '{{pmc.display_name}}', href: '{{pmc.link}}'
    end
    _td ng_bind: 'pmc.chair.cn', asf_id: '{{ pmc.chair.uid }}'
    _td '{{ status }}', class: '{{ class }}'
  end
end

_tr ng_if: 'loading' do
  _th 'loading...'
end

_tr ng_repeat: 'pmc in pmcs'
  _td do
    _a '{{pmc.name}}',
       href: '{{pmc.link}}'
  end
end

Controller

logic

scope

AsfRoster.controller("Committers", function($scope, $location, $rootScope) {
  $scope.search.committer = $location.search().q;
  $rootScope.title = "ASF Committers"
});

Object.defineProperty($scope, "loading", {
  enumerable: true,
  configurable: true,

  get: function() {
    return Object.keys($scope.pmcs).length == 0
  }
})

Router

AsfRoster.config([
  "$routeProvider",
  function($routeProvider) {
    $routeProvider.when(
      "/committee/:name",
      {templateUrl: "partials/committee.html", controller: "PMC"}
    ).otherwise(
      {redirectTo: "/"}
    )
  }
]);

Ruby2JS

function A()

function A();

function B();

B.prototype = new A();

class A; end

class B < A; end

list << item unless list.include? item

if (list.indexOf(item) == -1) list.push(item)

AsfRosterServices.factory("Committer", function(Roster, Member) {
  function Committer(ldap) {
    angular.copy(ldap, this)
  };
  return Committer
}

class Committer
  def initialize(ldap)
    angular.copy ldap, self
  end
end

AsfRoster.controller("Committers", function($scope, $location, $rootScope) {
  $scope.search.committer = $location.search().q;
  $rootScope.title = "ASF Committers"
});

controller :Committers do
  @search.committer = $location.search().q
  $rootScope.title = 'ASF Committers'
end

Object.defineProperty($scope, "loading", {
  enumerable: true,
  configurable: true,

  get: function() {
    return Object.keys($scope.groups).length == 0
  }
})

def loading
  @pmcs.keys().empty?
end

AsfRoster.config([
  "$routeProvider",
  function($routeProvider) {
    $routeProvider.when(
      "/committee/:name",
      {templateUrl: "partials/committee.html", controller: "PMC"}
    ).otherwise(
      {redirectTo: "/"}
    )
  }
]);

case $routeProvider 
when '/committee/:name'
  templateUrl 'partials/committee.html'
  controller :PMC
else
  redirectTo '/'
end

Vagrant

Install VirtualBox
Install Vagrant
Configure virtual machine
Start VM
Run script(s)
Visit URL