A Less Complex Web with Ratchet & Jank

https://conferences.oreilly.com/oscon/oscon-tx/public/schedule/detail/56904

Transcript

1. Ratchet+Jank live slides: bit.ly/2pV0PhP @iamvery ♥
2. @iamvery ♥ This is a talk about the web.
4. @iamvery ♥ This is a talk about the web.
5. @iamvery ♥ This is a talk about complexity.
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
58. We develop.
59. We teach.
60. We write.
61. pakyow.org
62. @iamvery ♥ HTML Templates
63. @iamvery ♥ The web works.
64. @iamvery Questions?