Jamie Gaskins jgaskins

I've been experimenting with a lot of things in Clearwater since I first introduced it at B'more on Rails. The reason I showed it to people was because I was hoping to get people talking about front-end development in Ruby with Opal (I've also given a presentation about Opal at B'more on Rails). One of the things that Clearwater does on every link click, at the moment, is rerender the entire app. It does it with a single call, so it's not rendering chunks of HTML here and there, so it's not the worst performance in the world, but I did notice it was clobbering input fields, and micromanaging event handlers (for individually rendered views and attribute-bound blocks) has been a nightmare.

Experiment #1: Components with templates

Components are an interesting way of thinking about web development. Having all of your functionality specified as smaller and smaller subdivisions of content makes perfect sense on th

	require 'hashie'
	require 'ostruct'
	require 'benchmark/ips'

	class PORO
	attr_reader :foo, :bar, :baz

	def initialize attrs={}
	attrs.each do \|attr, value\|
	instance_variable_set "@#{attr}", value

	require 'perpetuity/postgres'
	require 'securerandom'
	require 'pp'

	Perpetuity.data_source 'postgres://localhost/customer_stuff'

	module Customer
	class User
	attr_accessor :name, :email, :api_key, :accounts

	require 'benchmark/ips'

	class Foo
	def bar
	# "Foo#bar"
	end
	end

	module Bar
	def bar

	Calculating -------------------------------------
	sqrt 103.322k i/100ms
	x ** 0.5 125.661k i/100ms
	-------------------------------------------------
	sqrt 2.277M (± 6.1%) i/s - 11.365M
	x ** 0.5 3.717M (± 5.7%) i/s - 18.598M

	Comparison:
	x ** 0.5: 3717095.3 i/s
	sqrt: 2277003.6 i/s - 1.63x slower

	class AppHeader
	include Clearwater::Component

	def render
	header({ style: style }, [
	h1({ style: app_name_style }, 'My App')
	nav({ style: nav_style }, [
	NavLink.new('Home', '/'),
	NavLink.new('Foo', '/foo'),
	NavLink.new('Bar', '/bar'),

	def proc_return(enum)
	l = proc { \|x\| return x * 2 }

	enum.map { \|i\| l[i] }
	end

	def lambda_return(enum)
	l = lambda { \|x\| return x * 2 }

	enum.map { \|i\| l[i] }

	require 'opal'

	class Foo
	def opal_no_args_block(*args, &block)
	end

	%x{
	var TMP_3;
	def.$js_no_args_block = TMP_3 = function() {
	var self = this;

	require 'opal'

	def benchmark message, duration=5, &block
	measured = 0
	count = 0
	while measured < duration
	start = Time.now
	block.call
	finish = Time.now
	measured += finish - start

	#!/usr/bin/env ruby

	puts ARGF.read