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

Ratchet & Jank

Avatar for Jay Hayes Jay Hayes
October 15, 2016
Programming
0
190

Ratchet & Jank

Reduce the complexity of web development by generalizing view transformation on the server and client.
Avatar for Jay Hayes

Jay Hayes

October 15, 2016
Tweet

More Decks by Jay Hayes

See All by Jay Hayes
Build Elixir Phoenix
Avatar for Jay Hayes iamvery
0
70
Elixir in Elixir
Avatar for Jay Hayes iamvery
1
150
A Less Complex Web with Ratchet & Jank
Avatar for Jay Hayes iamvery
0
280
Feature. Tests. Implementation.
Avatar for Jay Hayes iamvery
0
64
Elixir in Elixir
Avatar for Jay Hayes iamvery
6
1.1k
Rubyist Does Swift
Avatar for Jay Hayes iamvery
0
83
Swift Introduction
Avatar for Jay Hayes iamvery
0
270
Data Integrity
Avatar for Jay Hayes iamvery
0
96
Pairing with tmux
Avatar for Jay Hayes iamvery
2
200

Other Decks in Programming

See All in Programming
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
440
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
Avatar for yosh_yumyum yoshyum
3
890
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
120
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
240
GitHub Copilot and GitHub Codespaces Hands-on
Avatar for Kento.Yamada ymd65536
2
150
AIプログラマーDevinは PHPerの夢を見るか？
Avatar for Shinya Saita shinyasaita
1
210
関数型まつりレポート for JuliaTokai #22
Avatar for GOTOH Shunsuke antimon2
0
160
Team operations that are not burdened by SRE
Avatar for zosokh kazatohiei
1
310
PicoRuby on Rails
Avatar for makicamel makicamel
2
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
52
33k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
920
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
180

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
18k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

Transcript

  1. Ratchet+Jank

  2. None

  3. COMPLEXITY

  4. View & Client

  5. View

  6. So much logic

  7. None

  8. Client

  9. None
  10. None
  11. None

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

  13. None

  14. +BZ)BZFT IUUQTJBNWFSZDPNn!JBNWFSZ

  15. None

  16. tech256.com

  17. None

  18. 8FEFWFMPQ

  19. 8FUFBDI

  20. 8FXSJUF

  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?

  48. None

  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

  75. None

  76. JavaScript

  77. Powerful, but…

  78. None

  79. JS apps are complex

  80. None

  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?