Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
A Less Complex Web with Ratchet & Jank
Jay Hayes
May 10, 2017
Programming
0
100
A Less Complex Web with Ratchet & Jank
https://conferences.oreilly.com/oscon/oscon-tx/public/schedule/detail/56904
Jay Hayes
May 10, 2017
Tweet
Share
More Decks by Jay Hayes
See All by Jay Hayes
Build Elixir Phoenix
iamvery
0
47
Elixir in Elixir
iamvery
1
130
Feature. Tests. Implementation.
iamvery
0
52
Ratchet & Jank
iamvery
0
160
Elixir in Elixir
iamvery
6
920
Rubyist Does Swift
iamvery
0
51
Swift Introduction
iamvery
0
110
Data Integrity
iamvery
0
67
Pairing with tmux
iamvery
2
140
Other Decks in Programming
See All in Programming
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
CSE360 Tutorial 07
javiergs
PRO
0
110
git on intellij
hiroto_kitamura
0
170
こそこそアジャイル導入しようぜ!
ichimichi
0
1.3k
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
340
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
5
270
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
170
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
5.8k
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
9
4.1k
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
350
設計の学び方:自分流のススメ
masuda220
PRO
10
7.5k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
68
4.8k
Producing Creativity
orderedlist
PRO
334
37k
We Have a Design System, Now What?
morganepeng
35
3k
Fireside Chat
paigeccino
12
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Bash Introduction
62gerente
597
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Visualization
eitanlees
125
11k
Making Projects Easy
brettharned
98
4.3k
Building an army of robots
kneath
299
40k
Adopting Sorbet at Scale
ufuk
63
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Transcript
Ratchet+Jank live slides: bit.ly/2pV0PhP @iamvery ♥
@iamvery ♥ This is a talk about the web.
None
@iamvery ♥ This is a talk about the web.
@iamvery ♥ This is a talk about complexity.
None
None
None
@iamvery ♥ "
@iamvery ♥ COMPLEXITY
@iamvery ♥ git reset --hard 2004
@iamvery ♥ Turbolinks
View
@iamvery ♥ <% 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 %>
@iamvery ♥ <figure>…</figure>
@iamvery ♥ <figure> <%= celestial_body.display %> </figure> <figure> {{ celestial_body.display
}} </figure>
@iamvery ♥ Logic-less
@iamvery ♥ HTML
The Web Something I’m building Something you’re building
@iamvery ♥ Plain HTML
@iamvery ♥ <article> <h2>The Post Title</h2> <p> The post body.
</p> </article>
@iamvery ♥ %{ posts: [ %{title: "Interesting Facts”, body: "Cats
are soft. Dogs are noisy."}, %{title: "Bears", body: "Bears eat beets."}, ] }
@iamvery ♥ <%= for post <- @data.posts %> <article> <h2><%=
post.title %></h2> <p><%= post.body %></p> </article> <% end %>
@iamvery ♥ <article data-prop="posts"> <h2 data-prop="title"></h2> <p data-prop="body"></p> </article>
@iamvery ♥ <article data-prop="posts"> <h2 data-prop=“title">Interesting Facts</h2> <p data-prop=“body”> Cats
are soft. Dogs are noisy. </p> </article> <article data-prop="posts"> <h2 data-prop="title">Bears</h2> <p data-prop=“body”> Bears eat beets. </p> </article>
@iamvery ♥ Content
@iamvery ♥ The 5 Forms of Data
@iamvery ♥ 1. Properties are mapped
@iamvery ♥ %{property: “value”}
@iamvery ♥ 2. Tag content
@iamvery ♥ “value” %{property: }
@iamvery ♥ 3. Tag attributes
@iamvery ♥ [href: “http://…”]
@iamvery ♥ 4. Combined content
@iamvery ♥ {“Click”, href: “http://…”}
@iamvery ♥ 5. Iteration
@iamvery ♥ <%= for post <- @data.posts %> <article> <h2><%=
post.title %></h2> <p><%= post.body %></p> </article> <% end %>
@iamvery ♥ %{items: [“first”, “second”]}
@iamvery ♥ %{ active_user: %{name: "Jay"}, posts: [ %{ title:
"Cats Facts", body: "Some cats are fuzzy.", comments: ["I like cats.", "I prefer dogs."], edit_link: {"Edit 'Cat Facts'", href: "http://example.com/posts/1"}, }, %{ title: "Sleepy Dog", body: "Dogs sleep a lot.", comments: [], edit_link: {"Edit 'Sleepy Dog'", href: "http://example.com/posts/2"}, }, ], new_post: [disabled: true], }
@iamvery ♥ Ratchet
@iamvery ♥ “A set of pre-defined transformations used to bind
content to elements” https://github.com/iamvery/ratchet
(Demo)
@iamvery ♥ Caching
@iamvery ♥ I Designers ❤
ERB EEX JSX %
@iamvery ♥ “It’s a mystery to me why we can’t
write plain HTML and CSS.” - Designer
Client
@iamvery ♥ But…
Data Transform View
@iamvery ♥ Jank
Controller Browser Model View Router JS DOM Jank Channel Hi
(Demo)
@iamvery ♥ “Like Ratchet, but more Janky” https://github.com/iamvery/jank
Jay Hayes https://iamvery.com — @iamvery
None
None
None
We develop.
We teach.
We write.
pakyow.org
@iamvery ♥ HTML Templates
@iamvery ♥ The web works.
@iamvery Questions?