Minimum Viable Interactions

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

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