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 full-size slide

  2. technology transforms
    the way we work

    View full-size slide

  3. digital jobs

    View full-size 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 full-size slide

  5. complex stack.
    slow deployment.
    no feedback.

    View full-size slide

  6. Mental models

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. less “surprises”

    View full-size slide

  10. use static files
    static files
    requests
    browsers

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  14. $ divshot push [production]

    View full-size slide

  15. frontend first
    design
    deliver
    get!
    feedback

    View full-size slide

  16. generating files
    static files
    data templates
    requests
    browsers

    View full-size slide

  17. Templating Engines
    code
    express in

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. handlebars
    abstractions
    top level template
    partials
    helpers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  25. simple build
    $ node build.js

    View full-size 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 full-size slide

  27. Static
    ListView
    Example

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  32. $ divshot push

    View full-size slide

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

    View full-size slide

  34. building interactions

    View full-size slide

  35. add javascript
    static files
    data templates
    requests
    browsers
    javascript

    View full-size slide

  36. state machines

    View full-size slide

  37. browser state
    context
    URLs
    Controls

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. nobackend.org

    View full-size slide

  43. 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 full-size slide

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

    View full-size slide

  45. ArangoDB
    API as a service

    View full-size slide

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

    View full-size slide

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

    View full-size slide