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
68
Elixir in Elixir
Avatar for Jay Hayes iamvery
1
150
A Less Complex Web with Ratchet & Jank
Avatar for Jay Hayes iamvery
0
270
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
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
190
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
340
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
840
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
4
920
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
360
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
250
KotlinConf 2025 現地で感じたServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
230
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
480
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
130
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
1k
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
290

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.9k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k

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?