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

Minimum Viable Interactions

mulderp
August 28, 2014

Minimum Viable Interactions

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

mulderp

August 28, 2014
Tweet

More Decks by mulderp

Other Decks in Programming

Transcript

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

    View Slide

  2. technology transforms
    the way we work

    View Slide

  3. digital jobs

    View Slide

  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

    View Slide

  5. complex stack.
    slow deployment.
    no feedback.

    View Slide

  6. Mental models

    View Slide

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

    View Slide

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

    View Slide

  9. less “surprises”

    View Slide

  10. use static files
    static files
    requests
    browsers

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  14. $ divshot push [production]

    View Slide

  15. frontend first
    design
    deliver
    get!
    feedback

    View Slide

  16. generating files
    static files
    data templates
    requests
    browsers

    View Slide

  17. Templating Engines
    code
    express in

    View Slide

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

    View Slide

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

    View Slide

  20. handlebars
    abstractions
    top level template
    partials
    helpers

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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}
    );

    View Slide

  25. simple build
    $ node build.js

    View Slide

  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

    View Slide

  27. Static
    ListView
    Example

    View Slide

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

    View Slide

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

    View Slide

  30. include helpers
    var Handlebars = require('handlebars');
    !
    Handlebars.registerHelper('html5', function(main) {
    var html = '\
    \
    \
    \
    \
    \
    voki.me \
    \
    ';
    !
    return html + main.fn(main.data.root) + '';
    });
    !
    module.exports = Handlebars;

    View Slide

  31. generate full page
    {{#html5}}
    !
    Profiles
    !
    {{#creatives}}
    {{>profile}}
    {{/creatives}}
    !
    {{/html5}}

    View Slide

  32. $ divshot push

    View Slide

  33. The Outcome

    View Slide

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

    View Slide

  35. building interactions

    View Slide

  36. add javascript
    static files
    data templates
    requests
    browsers
    javascript

    View Slide

  37. state machines

    View Slide

  38. browser state
    context
    URLs
    Controls

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. nobackend.org

    View Slide

  44. 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"
    });

    View Slide

  45. Stripe Shop

    View Slide

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

    View Slide

  47. ArangoDB
    API as a service

    View Slide

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

    View Slide

  49. tweet #backbonejs questions to @pipefishbook
    http://pipefishbook.com

    View Slide