April 26, 2012

Note

Arrived late, missed the intro talk about the venue. As always, got a seat up by the front. :-)

farmhouse.LA


Visualizing Sound

Note

Very good description of calculus and functional programming. :-)

Fundamentals

  • Accept a bunch of values
  • Convert it to output

Sample

ears.updateAudio(0.5);

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "rgb(80,80,80)";

var w = Math.floor(canvas.width / 3);
ctx.fillRect(0 * w, canvas.height, w, -canvas.height * ears.lows());
ctx.fillRect(1 * w, canvas.height, w, -canvas.height * ears.mids());
ctx.fillRect(2 * w, canvas.height, w, -canvas.height * ears.highs());

With colors:

ears.updateAudio(0.5);

ctx.clearRect(0, 0, canvas.width, canvas.height);

/* adding colors */
var red = Math.round(ears.lows()*255),
    green = Math.round(ears.mids()*255),
    blue = Math.round(ears.mids()*255);

ctx.fillStyle = "rgb("+red+","+green+","+blue+")";

var w = Math.floor(canvas.width / 3);
ctx.fillRect(0 * w, canvas.height, w, -canvas.height * ears.lows());
ctx.fillRect(1 * w, canvas.height, w, -canvas.height * ears.mids());
ctx.fillRect(2 * w, canvas.height, w, -canvas.height * ears.highs());

Native performance on Mobile with JavaScript


Mojito

Note

Way too many bullets on the slides. Links are just underlined blue titles. Sigh.

What is Mojito?

  • Open Source MVC client/server framework for node.js
  • Core component is the mojit (not quite a module, not quite a widget)

Mojito Features

  • Built on YUI 3
  • Server, client, or both
  • View engine is mustache
  • Broadcasts easily between server and client
  • routing, lazy loading, localization
  • Mojito is open source

Installation

$ npm i mojito -g
$ npm i supervisor -g

Mojito Terms

  • action context is the central access point to rest of mojito in a controller
  • affinity determines where a resource will be executed. client, server, or common
  • binder only execute in the client and provide access to the controller.
  • context key/value pairs for resolving configuration

Mojito request flow

  1. Middleware

  2. Routing

  3. App configuration

  4. Mojits

    • COntrollers
    • Addons and Autoloads
    • Mojit configuration
    • Models
    • Views
    • Binders
    • Assets (css, images, non-YUI libs)

Middleware

built on express.js

module.exports = function (req, res, next){
    // do something
    next();
};

Routing

  • stored in routes.json and can vary based on context
  • Specify an HTTP method and a mojit action
  • May contain Sinatra-style named params
  • Calls in entry in specs or an “anonymous” mojit
  • Can build URLs from routes using the url addon
[{
    "settings": [ "master" ],
    "conf": {
      "verbs": ["get"],
      "path": "/conf",
      "call": "conf.index"
    },
    "preso": {
      "verbs": ["get"],
      "path": "/slides/:slide",
      "regex": {"slide": "[0-9]*"},
      "call": "preso.index"
    },
    "home": {
      "verbs": ["get"],
      "path": "/",
      "call": "weather.index"
    }
}]

App configuration

  • Stored in application.json
  • Can vary based on context
  • Configures YUI in yui

Controllers

  • May run on the server or client
  • Responds to actions
  • Have access to action context, addons, autoloads, models, views, and configuration

Models

  • Have access only to confiuration, autoloads, and other models.
  • Any additional data must be passed through the controller.

Note

I’m guessing that’s for the sake of security

Views

  • Out of the box views are Mustache
  • They are switching to Handlebars soon, which is possible because the template languages are pluggable

Binders

  • Sole access point to controllers and the rest of Mojito in the client
  • Have access to autoloads, and other things. TOO MUCH STUFF IN EACH SLIDE

Addons and autoloads

  • Addons are how you share code
  • Have access to addons, autoloads, models, views, and configuration
  • Autoloads are normal YUI modules and will be deployed automatically if required in a binder, controller, etc
  • Mojito ships with many addons

Assets

  • Assets are css and non-YUI libs and images. They have no affinity
  • Does not deploy automatically
  • May be included in application,`json` or controller.
  • JSON Dialogue to call the asset is really uncomfortably nested control structures. Hmmmm…

My Impressions

  • Lots of boilerplate
  • looks ‘enterprisy’
  • Probably good for Yahoo’s use cases of dozens of types of content, a hundred languages, and thousands of regions. Not so useful for the rest of us.