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

A Less Complex Web with Ratchet & Jank

A Less Complex Web with Ratchet & Jank

Jay Hayes

May 10, 2017
Tweet

More Decks by Jay Hayes

Other Decks in Programming

Transcript

  1. Ratchet+Jank
    live slides: bit.ly/2pV0PhP @iamvery

    View full-size slide

  2. @iamvery

    This is a talk about
    the web.

    View full-size slide

  3. @iamvery

    This is a talk about
    the web.

    View full-size slide

  4. @iamvery

    This is a talk about
    complexity.

    View full-size slide

  5. @iamvery

    "

    View full-size slide

  6. @iamvery

    COMPLEXITY

    View full-size slide

  7. @iamvery

    git reset --hard 2004

    View full-size slide

  8. @iamvery

    Turbolinks

    View full-size slide

  9. @iamvery

    <% if [earth, moon, sun].all?(&:aligned?) %>

    <%= moon.between?(earth..sun) ? sun.eclipsed : moon.eclipsed %>

    <% else %>
    <% if earth.daytime? %>
    <%= sun.shine %>
    <% else %>
    <%= moon.shine %>
    <% end %>
    <% end %>

    View full-size slide

  10. @iamvery


    View full-size slide

  11. @iamvery


    <%= celestial_body.display %>


    {{ celestial_body.display }}

    View full-size slide

  12. @iamvery

    Logic-less

    View full-size slide

  13. @iamvery

    HTML

    View full-size slide

  14. The Web
    Something I’m building
    Something you’re building

    View full-size slide

  15. @iamvery

    Plain HTML

    View full-size slide

  16. @iamvery


    The Post Title

    The post body.


    View full-size slide

  17. @iamvery

    %{
    posts: [
    %{title: "Interesting Facts”,
    body: "Cats are soft. Dogs are
    noisy."},
    %{title: "Bears",
    body: "Bears eat beets."},
    ]
    }

    View full-size slide

  18. @iamvery

    <%= for post <- @data.posts %>

    <%= post.title %>
    <%= post.body %>

    <% end %>

    View full-size slide

  19. @iamvery


    Interesting Facts

    Cats are soft. Dogs are noisy.



    Bears

    Bears eat beets.


    View full-size slide

  20. @iamvery

    Content

    View full-size slide

  21. @iamvery

    The 5 Forms of Data

    View full-size slide

  22. @iamvery

    1. Properties are mapped

    View full-size slide

  23. @iamvery

    %{property: “value”}

    View full-size slide

  24. @iamvery

    2. Tag content

    View full-size slide

  25. @iamvery

    “value”
    %{property: }

    View full-size slide

  26. @iamvery

    3. Tag attributes

    View full-size slide

  27. @iamvery

    [href: “http://…”]

    View full-size slide

  28. @iamvery

    4. Combined content

    View full-size slide

  29. @iamvery

    {“Click”, href: “http://…”}

    View full-size slide

  30. @iamvery

    5. Iteration

    View full-size slide

  31. @iamvery

    <%= for post <- @data.posts %>

    <%= post.title %>
    <%= post.body %>

    <% end %>

    View full-size slide

  32. @iamvery

    %{items: [“first”, “second”]}

    View full-size slide

  33. @iamvery

    %{
    active_user: %{name: "Jay"},
    posts: [
    %{
    title: "Cats Facts",
    body: "Some cats are fuzzy.",
    comments: ["I like cats.", "I prefer dogs."],
    edit_link: {"Edit 'Cat Facts'", href: "http://example.com/posts/1"},
    },
    %{
    title: "Sleepy Dog",
    body: "Dogs sleep a lot.",
    comments: [],
    edit_link: {"Edit 'Sleepy Dog'", href: "http://example.com/posts/2"},
    },
    ],
    new_post: [disabled: true],
    }

    View full-size slide

  34. @iamvery

    Ratchet

    View full-size slide

  35. @iamvery

    “A set of
    pre-defined transformations
    used to
    bind content to
    elements”
    https://github.com/iamvery/ratchet

    View full-size slide

  36. @iamvery

    Caching

    View full-size slide

  37. @iamvery

    I Designers

    View full-size slide

  38. ERB EEX JSX %

    View full-size slide

  39. @iamvery

    “It’s a mystery to me why we
    can’t write plain HTML and CSS.”
    - Designer

    View full-size slide

  40. @iamvery

    But…

    View full-size slide

  41. Data Transform View

    View full-size slide

  42. @iamvery

    Jank

    View full-size slide

  43. Controller
    Browser
    Model
    View
    Router
    JS
    DOM
    Jank
    Channel

    Hi

    View full-size slide

  44. @iamvery

    “Like Ratchet, but more Janky”
    https://github.com/iamvery/jank

    View full-size slide

  45. Jay Hayes
    https://iamvery.com — @iamvery

    View full-size slide

  46. @iamvery

    HTML Templates

    View full-size slide

  47. @iamvery

    The web works.

    View full-size slide

  48. @iamvery
    Questions?

    View full-size slide