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

1433d0176e764f9ce48f70673baa72e8?s=128

Jay Hayes

May 10, 2017
Tweet

Transcript

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

  2. @iamvery ♥ This is a talk about the web.

  3. None
  4. @iamvery ♥ This is a talk about the web.

  5. @iamvery ♥ This is a talk about complexity.

  6. None
  7. None
  8. None
  9. @iamvery ♥ "

  10. @iamvery ♥ COMPLEXITY

  11. @iamvery ♥ git reset --hard 2004

  12. @iamvery ♥ Turbolinks

  13. View

  14. @iamvery ♥ <% if [earth, moon, sun].all?(&:aligned?) %> <figure> <%=

    moon.between?(earth..sun) ? sun.eclipsed : moon.eclipsed %> </figure> <% else %> <% if earth.daytime? %> <figure><%= sun.shine %></figure> <% else %> <figure><%= moon.shine %></figure> <% end %> <% end %>
  15. @iamvery ♥ <figure>…</figure>

  16. @iamvery ♥ <figure> <%= celestial_body.display %> </figure> <figure> {{ celestial_body.display

    }} </figure>
  17. @iamvery ♥ Logic-less

  18. @iamvery ♥ HTML

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

  20. @iamvery ♥ Plain HTML

  21. @iamvery ♥ <article> <h2>The Post Title</h2> <p> The post body.

    </p> </article>
  22. @iamvery ♥ %{ posts: [ %{title: "Interesting Facts”, body: "Cats

    are soft. Dogs are noisy."}, %{title: "Bears", body: "Bears eat beets."}, ] }
  23. @iamvery ♥ <%= for post <- @data.posts %> <article> <h2><%=

    post.title %></h2> <p><%= post.body %></p> </article> <% end %>
  24. @iamvery ♥ <article data-prop="posts"> <h2 data-prop="title"></h2> <p data-prop="body"></p> </article>

  25. @iamvery ♥ <article data-prop="posts"> <h2 data-prop=“title">Interesting Facts</h2> <p data-prop=“body”> Cats

    are soft. Dogs are noisy. </p> </article> <article data-prop="posts"> <h2 data-prop="title">Bears</h2> <p data-prop=“body”> Bears eat beets. </p> </article>
  26. @iamvery ♥ Content

  27. @iamvery ♥ The 5 Forms of Data

  28. @iamvery ♥ 1. Properties are mapped

  29. @iamvery ♥ %{property: “value”}

  30. @iamvery ♥ 2. Tag content

  31. @iamvery ♥ “value” %{property: }

  32. @iamvery ♥ 3. Tag attributes

  33. @iamvery ♥ [href: “http://…”]

  34. @iamvery ♥ 4. Combined content

  35. @iamvery ♥ {“Click”, href: “http://…”}

  36. @iamvery ♥ 5. Iteration

  37. @iamvery ♥ <%= for post <- @data.posts %> <article> <h2><%=

    post.title %></h2> <p><%= post.body %></p> </article> <% end %>
  38. @iamvery ♥ %{items: [“first”, “second”]}

  39. @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], }
  40. @iamvery ♥ Ratchet

  41. @iamvery ♥ “A set of pre-defined transformations used to bind

    content to elements” https://github.com/iamvery/ratchet
  42. (Demo)

  43. @iamvery ♥ Caching

  44. @iamvery ♥ I Designers ❤

  45. ERB EEX JSX %

  46. @iamvery ♥ “It’s a mystery to me why we can’t

    write plain HTML and CSS.” - Designer
  47. Client

  48. @iamvery ♥ But…

  49. Data Transform View

  50. @iamvery ♥ Jank

  51. Controller Browser Model View Router JS DOM Jank Channel Hi

  52. (Demo)

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

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

  55. None
  56. None
  57. None
  58. We develop.

  59. We teach.

  60. We write.

  61. pakyow.org

  62. @iamvery ♥ HTML Templates

  63. @iamvery ♥ The web works.

  64. @iamvery Questions?