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

Ratchet & Jank

Jay Hayes
October 15, 2016
Programming
0
180

Ratchet & Jank

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

Jay Hayes

October 15, 2016
Tweet

More Decks by Jay Hayes

See All by Jay Hayes
Build Elixir Phoenix
iamvery
0
61
Elixir in Elixir
iamvery
1
140
A Less Complex Web with Ratchet & Jank
iamvery
0
210
Feature. Tests. Implementation.
iamvery
0
61
Elixir in Elixir
iamvery
6
1.1k
Rubyist Does Swift
iamvery
0
77
Swift Introduction
iamvery
0
240
Data Integrity
iamvery
0
92
Pairing with tmux
iamvery
2
160

Other Decks in Programming

See All in Programming
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
480
僕がつくった48個のWebサービス達
yusukebe
20
17k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
540
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
140
Outline View in SwiftUI
1024jp
1
280
役立つログに取り組もう
irof
28
9.3k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
160
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ～俺のやらかしを越えてゆけ～
techouse
53
34k
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
770
Click-free releases & the making of a CLI app
oheyadam
2
100
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
420

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
RailsConf 2023
tenderlove
29
890
A Philosophy of Restraint
colly
203
16k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
We Have a Design System, Now What?
morganepeng
50
7.2k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Teambox: Starting and Learning
jrom
133
8.8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
A designer walks into a library…
pauljervisheath
202
24k

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?