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

Ratchet & Jank

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Jay Hayes Jay Hayes
October 15, 2016
Programming
200
0

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

More Decks by Jay Hayes

See All by Jay Hayes
Build Elixir Phoenix
Avatar for Jay Hayes iamvery
0
84
Elixir in Elixir
Avatar for Jay Hayes iamvery
1
160
A Less Complex Web with Ratchet & Jank
Avatar for Jay Hayes iamvery
0
370
Feature. Tests. Implementation.
Avatar for Jay Hayes iamvery
0
71
Elixir in Elixir
Avatar for Jay Hayes iamvery
6
1.2k
Rubyist Does Swift
Avatar for Jay Hayes iamvery
0
99
Swift Introduction
Avatar for Jay Hayes iamvery
0
320
Data Integrity
Avatar for Jay Hayes iamvery
0
110
Pairing with tmux
Avatar for Jay Hayes iamvery
2
230

Other Decks in Programming

See All in Programming
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
260
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
15
4.4k
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
Avatar for じゅん junholee
0
800
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
130
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
200
[KCD Czech] eBPF Meets the GPU: Future of AI Infra Observability
Avatar for Donia Chaiehloudj doniacld
0
130
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.1k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
500
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
820
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
400
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Hive Metastoreを通して学ぶIceberg REST Catalog ― 仕様から実装まで
Avatar for okumin okumin
0
310

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
7
670
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
390
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
240
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
360
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
760
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
210
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
780
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
830

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?