Pro Yearly is on sale from $80 to $50! »

Minimum Viable Interactions

5d75f8af878f069a3b5939894c2e57ab?s=47 mulderp
August 28, 2014

Minimum Viable Interactions

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

5d75f8af878f069a3b5939894c2e57ab?s=128

mulderp

August 28, 2014
Tweet

Transcript

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

  2. technology transforms the way we work

  3. digital jobs

  4. |-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
  5. complex stack. slow deployment. no feedback.

  6. Mental models

  7. skill models Skills Interests D3 Ruby Backbone Ember CSS3 Angular

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

  9. less “surprises”

  10. use static files static files requests browsers

  11. static structures HTML / JavaScript / Data mental models agency

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

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

    image only with large width * 43d3ce9 add profiles * 4842a36 new layout * fa93ba1 init
  14. $ divshot push [production]

  15. frontend first design deliver get! feedback

  16. generating files static files data templates requests browsers

  17. Templating Engines code express in

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

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

    "hello: patrick"
  20. handlebars abstractions top level template partials helpers

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

  22. design process Data templates DOM populate render improve data improve

    templates files browser
  23. entering JavaScript var Handlebars = require(‘handlebars’); $ npm install handlebars

    // fetch handlebars with node package manager: // require in .js scripts
  24. 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} );
  25. simple build $ node build.js

  26. 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
  27. Static ListView Example

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

  29. 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: ‘…’ }]
  30. 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;
  31. generate full page {{#html5}} ! <h2>Profiles</h2> ! {{#creatives}} {{>profile}} {{/creatives}}

    ! {{/html5}}
  32. $ divshot push

  33. The Outcome

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

  35. building interactions

  36. add javascript static files data templates requests browsers javascript

  37. state machines

  38. browser state context URLs Controls

  39. Backbone collections var creatives = require(‘creatives.json’); ! creatives .setSort(‘likes_count’, 'desc')

    .filterBy({ location: ‘berlin’ }); https://github.com/jmorrell/backbone.obscura
  40. Ready for Feedback http://vokime-creatives.divshot.io

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

  42. backend-less state browsers noBackend API static files GET POST, PUT,

    DELETE
  43. nobackend.org

  44. Firebase var ref = new Firebase("https://mulpat.firebaseio.com/ contacts"); ! ref.set({id: "patrick",

    email: "mulder@mtpartners.de"}); var Contacts = Backbone.Firebase.Collection.extend({ firebase: "https://mulpat.firebaseio.com/contacts" });
  45. Stripe Shop

  46. Divshot services - proxy service - forms service - prerender

    service
  47. ArangoDB API as a service

  48. “Design only what you need. Deliver it quickly. Get feedback

    fast.” Josh Seiden (Lean UX)
  49. tweet #backbonejs questions to @pipefishbook http://pipefishbook.com