Hanami and htmx

This talk is focused on the Hanami Ruby web framework and the htmx JavaScript library to craft simple and more streamlined Hypermedia REST applications which don't require large teams, tons of communication, complicated JavaScript stacks, and convoluted deployments. Instead, you are empowered to design, architect, and implement features that not only are a joy to develop and maintain but deliver happiness to your customer base as well.

Transcript

1. Brooke Kuhlmann htmx Hanami & alchemists.io
2. alchemists.io
3. A return to sanity. alchemists.io
4. A return to sanity. alchemists.io
5. A return to alchemists.io
6. simplicity. A return to alchemists.io
7. alchemists.io
8. ? Why alchemists.io
9. A Few Problems alchemists.io
10. Software Stack alchemists.io
11. Software Stack Svelte React Angular Ember Vue alchemists.io
12. Software Stack Svelte React Angular Ember Vue Node alchemists.io
13. Software Stack Svelte React Angular Ember Vue Node SASS Post CSS alchemists.io
14. Software Stack Svelte React Angular Ember Vue Node Webpack SASS Bun Post CSS Parcel esbuild alchemists.io
15. Software Stack Svelte React Angular Ember Vue Node Webpack SASS Docker Kubernetes Bun Post CSS Parcel esbuild alchemists.io
16. alchemists.io
17. alchemists.io
18. "Whenever you find yourself on the side of the majority, it is time to pause and reflect." -- Mark Twain alchemists.io
19. Conway's Nightmare youtube.com/watch?v=5IUj1EZwpJY alchemists.io
20. Conway's Nightmare youtube.com/watch?v=5IUj1EZwpJY 👩💼 Backend Engineers 👨💼 Manager 🧑💼 Team Lead 👨🎨 Designers 🧟 SCRUM Master 🦹 Quality Assurance 🧑💻 Frontend Engineers 🧙 Architect 🧑🚒 Product 🧑🔧 DevOps alchemists.io
21. Conway's Nightmare Version 1.0.0 alchemists.io youtube.com/watch?v=5IUj1EZwpJY
22. Conway's Nightmare Version 2.0.0 alchemists.io youtube.com/watch?v=5IUj1EZwpJY
23. Conway's Nightmare Version 3.0.0 alchemists.io youtube.com/watch?v=5IUj1EZwpJY
24. Conway's Nightmare Version 1.0.0, 2.0.0, 3.0.0 alchemists.io youtube.com/watch?v=5IUj1EZwpJY
25. Conway's Nightmare Version 1.0.0, 2.0.0, 3.0.0 😱 alchemists.io youtube.com/watch?v=5IUj1EZwpJY
26. A Return to Simplicity 🤵 Full Stack Engineers alchemists.io
27. "This façade can't stay up forever Someone's gonna come along and knock it down." -- Henry Rollins Rollins Band: Get Some Go Again L.A. Money Train 🎶 🎶 A Return to Simplicity 🤵 Full Stack Engineers htmx Hanami alchemists.io
28. Ecosystem alchemists.io
29. Ecosystem htmx Hanami Dry RB ROM alchemists.io
30. Ecosystem htmx Hanami Dry RB ROM Functional core alchemists.io
31. Ecosystem htmx Hanami Dry RB ROM Functional core Persistence layer and object mapper alchemists.io
32. Ecosystem htmx Hanami Dry RB ROM Functional core Persistence layer and object mapper Web framework alchemists.io
33. Ecosystem htmx Hanami Dry RB ROM Functional core Persistence layer and object mapper Web framework Hypermedia REST alchemists.io
34. Primary Focus alchemists.io
35. Primary Focus "If you’re looking for new ways to build maintainable, secure, faster and testable Ruby applications, you’re in for a treat. Hanami is built for people like you." "The goal of [htmx] is not less JavaScript, but less code, more readable and hypermedia-friendly code." alchemists.io
36. A Teaser alchemists.io
37. github.com/bkuhlmann/hemo alchemists.io
38. github.com/bkuhlmann/hemo alchemists.io
39. A closer look alchemists.io
40. A closer look 🔎 alchemists.io
41. github.com/bkuhlmann/hemo alchemists.io
42. github.com/bkuhlmann/hemo alchemists.io
43. github.com/bkuhlmann/hemo alchemists.io
44. Hanami hanamirb.org alchemists.io
45. Quick Start alchemists.io/projects/hanamismith alchemists.io
46. Quick Start gem install hanami hanami new demo hanami server alchemists.io/projects/hanamismith alchemists.io
47. Quick Start gem install hanami hanami new demo hanami server gem install hanamismith hanamismith build --name demo overmind start --proc fi le Proc fi le.dev alchemists.io/projects/hanamismith alchemists.io
48. Quick Start gem install hanami hanami new demo hanami server gem install hanamismith hanamismith build --name demo overmind start --proc fi le Proc fi le.dev alchemists.io/projects/hanamismith 🚫 alchemists.io
49. Hanamismith alchemists.io/projects/hanamismith alchemists.io
50. Hanamismith alchemists.io/projects/hanamismith alchemists.io
51. Hanamismith alchemists.io/projects/hanamismith alchemists.io
52. Hanamismith alchemists.io/projects/hanamismith alchemists.io
53. Hanamismith alchemists.io/projects/hanamismith XDG https://alchemists.io/projects/xdg alchemists.io
54. Skeleton Application alchemists.io/projects/hanamismith alchemists.io
55. Hanami Framework alchemists.io
56. Structure the.exa.website alchemists.io
57. Structure the.exa.website RSpec (rspec.info) Dotenv (github.com/bkeepers/dotenv) Reek (github.com/troessner/reek) Puma (puma.io) RuboCop (docs.rubocop.org) SimpleCov (github.com/simplecov-ruby/simplecov) alchemists.io
58. Structure alchemists.io the.exa.website
59. Structure Action, repository, and view. alchemists.io the.exa.website
60. Structure alchemists.io the.exa.website
61. Structure alchemists.io the.exa.website
62. Structure alchemists.io the.exa.website
63. Structure alchemists.io the.exa.website
64. Structure alchemists.io the.exa.website
65. Structure Providers, settings, routes, etc. alchemists.io the.exa.website
66. Application Con fi guration alchemists.io the.exa.website
67. Application Con fi guration alchemists.io the.exa.website
68. Application Con fi guration # .env.development DATABASE_URL=postgres://localhost/demo_development alchemists.io the.exa.website
69. Application Con fi guration # .env.development DATABASE_URL=postgres://localhost/demo_development alchemists.io the.exa.website
70. Application Con fi guration Dry Types dry-rb.org/gems/dry-types # .env.development DATABASE_URL=postgres://localhost/demo_development alchemists.io the.exa.website
71. Routes alchemists.io the.exa.website
72. Routes alchemists.io the.exa.website
73. Providers Lifecycles alchemists.io the.exa.website
74. Providers • Prepare: Basic setup and dependency requirement. • Start: Any startup code necessary to make your component usable at runtime. • Stop: Any cleanup or code to properly shutdown a component. Lifecycles alchemists.io the.exa.website
75. Providers • Prepare: Basic setup and dependency requirement. • Start: Any startup code necessary to make your component usable at runtime. • Stop: Any cleanup or code to properly shutdown a component. Lifecycles alchemists.io the.exa.website
76. Providers • Prepare: Basic setup and dependency requirement. • Start: Any startup code necessary to make your component usable at runtime. • Stop: Any cleanup or code to properly shutdown a component. Lifecycles alchemists.io the.exa.website
77. Providers • Prepare: Basic setup and dependency requirement. • Start: Any startup code necessary to make your component usable at runtime. • Stop: Any cleanup or code to properly shutdown a component. Lifecycles alchemists.io the.exa.website
78. Providers • Prepare: Basic setup and dependency requirement. • Start: Any startup code necessary to make your component usable at runtime. • Stop: Any cleanup or code to properly shutdown a component. Lifecycles alchemists.io the.exa.website
79. Providers • Prepare: Basic setup and dependency requirement. • Start: Any startup code necessary to make your component usable at runtime. • Stop: Any cleanup or code to properly shutdown a component. Lifecycles Dry System dry-rb.org/gems/dry-system alchemists.io the.exa.website
80. Structure alchemists.io the.exa.website
81. Structure ROM (Database) alchemists.io the.exa.website
82. Structure alchemists.io the.exa.website
83. Structure ROM (persistence, relations), re fi nements, types, etc. alchemists.io the.exa.website
84. Structure alchemists.io the.exa.website
85. Structure Assets (images, manifests, stylesheets, etc.) alchemists.io the.exa.website
86. Structure alchemists.io the.exa.website
87. Structure Slices (business logic) alchemists.io the.exa.website
88. Structure alchemists.io the.exa.website
89. Structure Home alchemists.io the.exa.website
90. Structure Home alchemists.io the.exa.website
91. Structure Home alchemists.io the.exa.website
92. Structure Home alchemists.io the.exa.website
93. Structure Home alchemists.io the.exa.website
94. Structure Home Tasks alchemists.io the.exa.website
95. Structure Home Tasks alchemists.io the.exa.website
96. Structure Home Tasks alchemists.io the.exa.website
97. Structure Home Tasks alchemists.io the.exa.website
98. Structure Home Tasks alchemists.io the.exa.website
99. Structure Tasks alchemists.io the.exa.website
100. Dependency Inversion alchemists.io
101. Dependency Inversion alchemists.io
102. Dependency Inversion alchemists.io
103. Dependency Inversion "persistence.rom" alchemists.io
104. Dependency Inversion alchemists.io
105. Dependency Inversion "persistence.rom" alchemists.io
106. Dependency Inversion alchemists.io
107. Dependency Inversion "rom" alchemists.io
108. Dependency Inversion alchemists.io
109. Dependency Inversion "rom" alchemists.io
110. Dependency Inversion alchemists.io
111. Dependency Inversion :container alchemists.io
112. Dependency Inversion alchemists.io
113. Dependency Inversion Dry Container dry-rb.org/gems/dry-container Dry AutoInject dry-rb.org/gems/dry-auto_inject alchemists.io
114. Dependency Inversion Dry Container dry-rb.org/gems/dry-container Dry AutoInject dry-rb.org/gems/dry-auto_inject 🚫 alchemists.io
115. Dependency Inversion Dry Container dry-rb.org/gems/dry-container Dry AutoInject dry-rb.org/gems/dry-auto_inject 🚫 alchemists.io
116. Dependency Inversion Dry Container dry-rb.org/gems/dry-container alchemists.io
117. Dependency Inversion Dry Container dry-rb.org/gems/dry-container alchemists.io
118. Dependency Inversion Dry Container dry-rb.org/gems/dry-container Infusible alchemists.io/projects/infusible alchemists.io
119. Dependency Inversion Container alchemists.io
120. Dependency Inversion Container alchemists.io
121. Dependency Inversion Container Import alchemists.io
122. Dependency Inversion Container Import Deps alchemists.io
123. Dependency Inversion Container Import alchemists.io
124. Dependency Inversion Container Import Inject alchemists.io
125. Dependency Inversion Container Import Inject alchemists.io
126. htmx.org alchemists.io
127. htmx.org htmx alchemists.io
128. History Tim Berners-Lee alchemists.io
129. History Tim Berners-Lee HTML/Hypermedia 1990 alchemists.io
130. History Roy Fielding REpresentational State Transfer (REST) 2000 Tim Berners-Lee HTML/Hypermedia 1990 alchemists.io
131. History Roy Fielding REpresentational State Transfer (REST) 2000 Carson Gross 2020 Tim Berners-Lee HTML/Hypermedia 1990 htmx alchemists.io
132. History Roy Fielding REpresentational State Transfer (REST) 2000 Carson Gross 2020 Tim Berners-Lee HTML/Hypermedia 1990 ~30 Years htmx alchemists.io
133. History htmx 2020 Unpoly 2014 Hotwire 2021 hotwired.dev htmx.org unpoly.com Phoenix LiveView 2019 www.phoenixframework.org alchemists.io
134. History htmx 2020 Unpoly 2014 Hotwire 2021 hotwired.dev htmx.org unpoly.com Phoenix LiveView 2019 www.phoenixframework.org alchemists.io
135. History htmx 2020 Unpoly 2014 Hotwire 2021 hotwired.dev htmx.org unpoly.com Phoenix LiveView 2019 www.phoenixframework.org 🚫 alchemists.io
136. History htmx 2020 Unpoly 2014 Hotwire 2021 hotwired.dev htmx.org unpoly.com 🚫 Phoenix LiveView 2019 www.phoenixframework.org 🚫 alchemists.io
137. Hypermedia As The Engine Of Application State (HATEOAS) en.wikipedia.org/wiki/HATEOAS History alchemists.io
138. Hypermedia As The Engine Of Application State (HATEOAS) en.wikipedia.org/wiki/HATEOAS • 1990: HTML • 2011: JSON Hypertext Application Language format (HAL) • 2011: Siren • 2014: JSON Linked Data (JSON-LD) • 2015: JSON:API • 2017: Hydra History alchemists.io
139. Hypermedia REST alchemists.io
140. Hypermedia REST Hypermedia alchemists.io
141. Hypermedia REST HTTP GET (REST) Hypermedia alchemists.io
142. Hypermedia REST alchemists.io
143. Hypermedia REST alchemists.io
144. Hypermedia REST Browser alchemists.io
145. Hypermedia REST Browser GET: / Host: wikipedia.org HTTP Server 200 OK <h1>Wikipedia</h1> alchemists.io
146. Losing Our Way giphy.com/gifs/retro-games-lemmings-uRxRLxPbtKf28 alchemists.io
147. Losing Our Way giphy.com/gifs/retro-games-lemmings-uRxRLxPbtKf28 alchemists.io
148. Data API (NOT REST) Browser alchemists.io
149. Data API (NOT REST) Browser POST: /article Host: wikipedia.org alchemists.io
150. Data API (NOT REST) Browser POST: /article Host: wikipedia.org JSON alchemists.io
151. Data API (NOT REST) Browser POST: /article Host: wikipedia.org HTTP Server JSON alchemists.io
152. Data API (NOT REST) Browser POST: /article Host: wikipedia.org HTTP Server 200 OK {...} JSON alchemists.io
153. Data API (NOT REST) Browser POST: /article Host: wikipedia.org HTTP Server 200 OK {...} JSON JSON alchemists.io
154. Data API (NOT REST) Browser POST: /article Host: wikipedia.org HTTP Server 200 OK {...} JSON JSON alchemists.io
155. htmx.org htmx alchemists.io
156. Quick Start alchemists.io
157. Quick Start alchemists.io
158. Quick Start alchemists.io
159. Quick Start alchemists.io
160. Quick Start alchemists.io
161. Hemo github.com/bkuhlmann/hemo alchemists.io
162. Hemo alchemists.io github.com/bkuhlmann/hemo
163. Hemo alchemists.io github.com/bkuhlmann/hemo
164. Hemo git clone https://github.com/bkuhlmann/hemo cd hemo bin/setup overmind start --proc fi le Proc fi le.dev alchemists.io github.com/bkuhlmann/hemo
165. alchemists.io/articles/git_rebase 📖 Git Rebase alchemists.io
166. alchemists.io/articles/git_rebase Added project skeleton 📖 📄 Added tasks migration 📄 Added database seeds 📄 Added user relation 📄 Added user factory 📄 Git Rebase alchemists.io
167. youtube.com/watch?v=UxqUIZ6kBTI alchemists.io
168. The Source youtube.com/watch?v=UxqUIZ6kBTI alchemists.io
169. HTTP DELETE alchemists.io
170. Routes alchemists.io
171. Routes alchemists.io
172. Action Routes alchemists.io
173. Action Routes alchemists.io
174. Action Routes alchemists.io
175. Action Routes alchemists.io
176. Action Routes alchemists.io
177. Action Routes Dry Schema dry-rb.org/gems/dry-schema Dry Validation dry-rb.org/gems/dry-validation alchemists.io
178. Action Routes alchemists.io
179. Partials Routes Actions alchemists.io
180. Partials Routes Actions alchemists.io
181. Helpers Routes Actions Partials alchemists.io
182. Helpers Routes Actions Partials alchemists.io
183. Helpers Routes Actions Partials alchemists.io/projects/htmx HTMX alchemists.io
184. Helpers Routes Actions Partials alchemists.io/projects/htmx HTMX alchemists.io
185. Helpers Routes Actions Partials alchemists.io/projects/htmx HTMX alchemists.io
186. Demonstration alchemists.io
187. Demonstration alchemists.io
188. HTTP GET alchemists.io
189. Routes alchemists.io
190. Routes alchemists.io
191. Actions Routes alchemists.io
192. Actions Routes alchemists.io
193. Actions Routes alchemists.io
194. Actions Routes alchemists.io
195. Actions Routes alchemists.io
196. Actions Routes alchemists.io
197. Actions Routes alchemists.io
198. Views Routes Actions alchemists.io
199. Templates Routes Views Actions alchemists.io
200. Templates Routes Views Actions alchemists.io
201. Templates Routes Views Actions alchemists.io
202. Partials Routes Views Actions Templates alchemists.io
203. Partials Routes Views Actions Templates alchemists.io
204. Partials Routes Views Actions Templates alchemists.io
205. Partials Routes Views Actions Templates alchemists.io
206. Partials Routes Views Actions Templates alchemists.io
207. Partials Routes Views Actions Templates alchemists.io
208. Search alchemists.io
209. Search alchemists.io
210. Slow Jam youtube.com/watch?v=vAFQIciWsF4 alchemists.io
211. Slow Jam youtube.com/watch?v=vAFQIciWsF4 alchemists.io
212. Sleep alchemists.io
213. Sleep alchemists.io
214. Search alchemists.io
215. Search alchemists.io
216. Partials Routes Views Actions Templates alchemists.io
217. Partials Routes Views Actions Templates alchemists.io
218. Partials Routes Views Actions Templates alchemists.io
219. Helpers Routes Views Actions Templates Partials alchemists.io
220. Helpers Routes Views Actions Templates Partials alchemists.io
221. Helpers Routes Views Actions Templates Partials alchemists.io
222. Helpers Routes Views Actions Templates Partials alchemists.io
223. Helpers Routes Views Actions Templates Partials alchemists.io
224. Helpers Routes Views Actions Templates Partials alchemists.io
225. Separation of Concerns Routes Views Actions Templates Partials Helpers alchemists.io
226. Browser History alchemists.io
227. Browser History alchemists.io
228. Simplicity alchemists.io
229. Simplicity htmx Hanami alchemists.io
230. Simplicity htmx Hanami Server Browser Hypermedia REST alchemists.io
231. Simplicity htmx Hanami 🦸 Full Stack Engineers Server Browser Hypermedia REST alchemists.io
232. Resources dry-rb.org discourse.dry-rb.org rom-rb.org discourse.rom-rb.org htmx.org hypermedia.systems hanamirb.org discourse.hanamirb.org alchemists.io
233. Resources dry-rb.org discourse.dry-rb.org rom-rb.org discourse.rom-rb.org htmx.org hypermedia.systems hanamirb.org discourse.hanamirb.org alchemists.io alchemists.io
234. Thanks! alchemists.io
235. 🙇 Thanks! alchemists.io
236. @bkuhlmann@mastodon.social Let's Connect! alchemists.io