Ratchet & Jank

Reduce the complexity of web development by generalizing view transformation on the server and client.

1. Ratchet+Jank
3. COMPLEXITY
4. View & Client
5. View
6. So much logic
8. Client
12. The Web Something I’m building Something you’re building
14. +BZ
    )BZFT IUUQTJBNWFSZDPN
    n
    !JBNWFSZ
16. tech256.com
18. 8F
    EFWFMPQ
19. 8F
    UFBDI
20. 8F
    XSJUF
21. View
22. Templates
23. <% 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 %>
24. <figure>…</figure>
25. “Useview models” presenters” decorators”
26. Yes this, but…
27. <figure>{{sky.body}}</figure> <figure><%= sky.body %></figure> <Sky body={sky.body} />
28. Still not HTML
29. Why care?
30. Web is HTML
31. Logic-less By Def
32. Prototypes
33. <article> <h2>Bears</h2> <p>Bears eat beets.</p> <a href=“/posts/1”>1</a> </article>
34. Design screens
35. I Designers ❤
36. They know HTML
37. ERB EEX JSX %
38. “It’s a mystery to me why we can’t write plain HTML and CSS.” - Designer
39. Currently…
40. Delivers prototype
41. Translation
42. Changes
43. Ugh
44. Who owns what?
45. A better way…
46. Plain HTML Template
47. Possible?
49. What’s in a view?
50. Structure + Content
51. <article> <h2> </h2> <p> </p> </article> <% @posts.each do |post| %> <%= post.name %> <%= post.body %> <%= link_to post.id, post %> <% end %>
52. <%= link_to post.id, post %>
53. <a href=“<%= path(post)%>”> <%= post.id %> </a>
54. <article> <h2>Bears</h2> <p>Bears eat beets.</p> <a href=“/post/1”>1</a> </article> <article>… Content
55. Tags + Attributes (content) (some)
56. is Data
57. Rest is structure
58. <article> <h2>Bears</h2> <p>Bears eat beets.</p> <a href=“/posts/1”>1</a> </article>
59. <article> <h2></h2> <p></p> <a></a> </article>
60. <article> <h2></h2> <p></p> <a></a> </article>
61. <article > <h2 ></h2> <p ></p> <a ></a> </article> data-prop=“post” data-prop=“name” data-prop=“body” data-prop=“link”
62. %{ post: [ %{ name: post.name, body: post.title, link: {post.id, href: “/post/bears”} }, %{…} ] }
63. <article> <h2>Bears</h2> <p>Bears eat beets.</p> <a href=“/posts/1”>1</a> </article> <article>…
64. Ratchet https://github.com/iamvery/ratchet
65. Structure | Content
66. Structure is HTML
67. Content is Data
68. Render is generalized
69. Transformations (predefined)
70. Data Transform View
71. (Demo)
72. Eh?
73. https://github.com/iamvery/ratchet
74. Client
76. JavaScript
77. Powerful, but…
79. JS apps are complex
81. When to app?
82. APP
83. APP
84. PAGE
85. PAGE
86. Apps + Pages
87. Documents
88. _ Server Rendered JS Apps !
89. 1. Time to render 2. Realtime data
90. Time to render
91. Turbolinks ✅
92. Hijack interaction
93. Async request
94. Swap <body>
95. Good Enough™
96. Realtime data
97. Custom JS
98. Wheel reinvention
99. Maybe there’s a better way…
100. What are view updates?
101. Transformation
102. Data Transform View
103. Ratchet!
104. Jank
105. 2 things
106. 1. Data stream
107. 2. View updates
108. Controller Browser Model View Router JS DOM Jank Channel Hi
109. Updated view ✨ ✨
110. (Demo)
111. Eh?
112. Elixir optional
113. TODO no initial view
114. TODO data events
115. TODO boot new elems
116. Get involved!
117. https://github.com/iamvery/jank
118. Complexity
119. !JBNWFSZ Questions?