Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Minimum Viable Interactions

Avatar for mulderp mulderp
August 28, 2014

Minimum Viable Interactions

A talk I gave at Frontend Zurich on using static pages and building prototypes with JavaScript.

Avatar for mulderp

mulderp

August 28, 2014
Tweet

More Decks by mulderp

Other Decks in Programming

Transcript

  1. |-js! |! |---libs |-----backbone |-----impress |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require

    |-----underscore |! |---modules | |-templates |---dashboard |---directory |---shared development production App Server CSS/HTML/Images API/Data browsers
  2. static structures HTML / JavaScript / Data mental models agency

    team creative skills portfolio interests project
  3. HTML files ├── static │ ├── creatives │ │ ├──

    Glennz.html │ │ ├── _jannalynn.html │ │ ├── choreographics.html │ │ ├── deedl.html │ │ ├── itsAnnaHurley.html │ │ ├── jonnotie.html │ │ ├── ozanoz.html │ │ └── tyr.html │ ├── error.html │ ├── profiles.html
  4. git for everything * 520d348 update examples * 1904c47 background

    image only with large width * 43d3ce9 add profiles * 4842a36 new layout * fa93ba1 init
  5. entering JavaScript var Handlebars = require(‘handlebars’); $ npm install handlebars

    // fetch handlebars with node package manager: // require in .js scripts
  6. 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} );
  7. 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
  8. 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: ‘…’ }]
  9. 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;
  10. Backbone collections var creatives = require(‘creatives.json’); ! creatives .setSort(‘likes_count’, 'desc')

    .filterBy({ location: ‘berlin’ }); https://github.com/jmorrell/backbone.obscura
  11. 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" });