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

Ratchet & Jank

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jay Hayes Jay Hayes
October 15, 2016
Programming
0
200

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
74
Elixir in Elixir
Avatar for Jay Hayes iamvery
1
150
A Less Complex Web with Ratchet & Jank
Avatar for Jay Hayes iamvery
0
350
Feature. Tests. Implementation.
Avatar for Jay Hayes iamvery
0
67
Elixir in Elixir
Avatar for Jay Hayes iamvery
6
1.2k
Rubyist Does Swift
Avatar for Jay Hayes iamvery
0
91
Swift Introduction
Avatar for Jay Hayes iamvery
0
280
Data Integrity
Avatar for Jay Hayes iamvery
0
100
Pairing with tmux
Avatar for Jay Hayes iamvery
2
220

Other Decks in Programming

See All in Programming
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
130
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
200
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.2k

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
290
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
86
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
49
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k

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?