Minimum Viable Interactions

Patrick Mulder! @mulpat Minimum Viable Interactions frontend zurich! 2014

technology transforms the way we work

digital jobs

complex stack. slow deployment. no feedback.

Mental models

skill models Skills Interests D3 Ruby Backbone Ember CSS3 Angular
Java

How to avoid server “waste” ? PHP/DB requests browsers

less “surprises”

use static ﬁles static ﬁles requests browsers

static structures HTML / JavaScript / Data mental models agency
team creative skills portfolio interests project

HTML ﬁles ├── static │ ├── creatives │ │ ├──
Glennz.html │ │ ├── _jannalynn.html │ │ ├── choreographics.html │ │ ├── deedl.html │ │ ├── itsAnnaHurley.html │ │ ├── jonnotie.html │ │ ├── ozanoz.html │ │ └── tyr.html │ ├── error.html │ ├── profiles.html

git for everything * 520d348 update examples * 1904c47 background
image only with large width * 43d3ce9 add profiles * 4842a36 new layout * fa93ba1 init

$ divshot push [production]

frontend ﬁrst design deliver get! feedback

generating ﬁles static ﬁles data templates requests browsers

Templating Engines code express in

var compiled = _.template("hello: <%= name %>"); compiled({name: 'patrick'}); =>
"hello: patrick"

var compiled = Handlebars.compile("hello: {{ name }}”); compiled({name: 'patrick'}); =>
"hello: patrick"

handlebars abstractions top level template partials helpers

multiple environments http://template-demo.divshot.io/

design process Data templates DOM populate render improve data improve
templates ﬁles browser

entering JavaScript var Handlebars = require(‘handlebars’); $ npm install handlebars
// fetch handlebars with node package manager: // require in .js scripts

build.js -> page var Handlebars = require('handlebars'); var helpers =
require('./helpers'); var partials = require('./partials'); var templates = require(‘./templates’); ! var fs = require(‘fs'); // for working with files ! // initial data var creatives = JSON.parse(fs.readFileSync(‘./creatives.json')); ! // assemble templates var rendered = Handlebars.templates.profiles( {creatives: creatives.shots} );

simple build $ node build.js

build automation partials.js: handlebars -c handlebars -p -f partials.js ./partials/*
! templates.js: handlebars -c handlebars -f templates.js ./templates/* ! all: partials.js templates.js node build.js $ make -B all $ vim Makefile

Static ListView Example

Top-level template <h2>Profiles</h2> ! {{#creatives}} {{>profile}} {{/creatives}}

cURL data from e.g. dribbble.com [{ id: 1684751, title: 'Overview',
description: '<p>I\'ve been working on this in the little spare time that I have these days ;)</p>', height: 600, width: 800, likes_count: 124, comments_count: 6, rebounds_count: 0, url: 'http://dribbble.com/shots/ 1684751-Overview', short_url: ‘…’ }]

include helpers var Handlebars = require('handlebars'); ! Handlebars.registerHelper('html5', function(main) {
var html = '\ <!DOCTYPE html> \ <html> \ <head> \ <meta charset="utf-8"> \ <meta http-equiv="X-UA-Compatible" content="IE=edge"> \ <title>voki.me</title> \ </head> \ <body>'; ! return html + main.fn(main.data.root) + '</body></html>'; }); ! module.exports = Handlebars;

generate full page {{#html5}} ! <h2>Profiles</h2> ! {{#creatives}} {{>profile}} {{/creatives}}
! {{/html5}}

$ divshot push

The Outcome

Ready for Feedback http://vokime.divshot.io

building interactions

add javascript static ﬁles data templates requests browsers javascript

state machines

browser state context URLs Controls

Backbone collections var creatives = require(‘creatives.json’); ! creatives .setSort(‘likes_count’, 'desc')
.filterBy({ location: ‘berlin’ }); https://github.com/jmorrell/backbone.obscura

Ready for Feedback http://vokime-creatives.divshot.io

keeping browser context https://github.com/maccman/stylo

backend-less state browsers noBackend API static ﬁles GET POST, PUT,
DELETE

nobackend.org

Firebase var ref = new Firebase("https://mulpat.firebaseio.com/ contacts"); ! ref.set({id: "patrick",
email: "[email protected]"}); var Contacts = Backbone.Firebase.Collection.extend({ firebase: "https://mulpat.firebaseio.com/contacts" });

Stripe Shop

Divshot services - proxy service - forms service - prerender
service

ArangoDB API as a service

“Design only what you need. Deliver it quickly. Get feedback
fast.” Josh Seiden (Lean UX)

tweet #backbonejs questions to @pipeﬁshbook http://pipeﬁshbook.com

Minimum Viable Interactions

Minimum Viable Interactions

More Decks by mulderp

Other Decks in Programming

Featured

Transcript