Minimum Viable Interactions

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

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: "mulder@mtpartners.de"});
    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