$30 off During Our Annual Pro Sale. View Details »

Web App Development Flow with Scala and HTMX

Avatar for Anatolii Kmetiuk Anatolii Kmetiuk
November 27, 2025
20

Web App Development Flow with Scala and HTMX

How to prototype web apps in Scala quickly and painlessly. More details in this blog: https://anatoliikmt.me/posts/2025-10-17-effective-webapp-flow/

Avatar for Anatolii Kmetiuk

Anatolii Kmetiuk

November 27, 2025
Tweet

Transcript

  1. Hi, I am Anatolii - Scala Consultant - Doing Scala

    for the past 10 years - Currently researching better ways to develop software スカラコンサルタントのアナトリーです。10年間Scalaに取り組み、現在はより良い ソフトウェア開発の方法を探求しています。 🌐https:/ /anatoliikmt.me 🌐https:/ /github.com/anatoliykmetyuk
  2. Sandbox Philosophy Tools Software Software Software APIs Frameworks Principles Constraints

    Software Engineering is about Sandboxes Inside - easy Outside - hard - Everyone has their unique approach to engineering. - You can create your own sandbox... - ...by defining your principles... - ...and picking appropriate tools. ソフトウェア開発では、ツールやAPI、フレームワークなど他人 の成果と、その背後にある哲学や原則が自分の「サンドボック ス」を形作り、開発体験を決めます。 P T S
  3. This Talk I'd like to share my software engineering Sandbox

    with you. Maybe you'll find inspiration to build your own! Principles Sandbox この発表では、原則がツールを生み、それがサンドボックスにつながる流れを紹介しま す。私のサンドボックスの例を共有し、皆さん自身のサンドボックス作りのヒントにな ればと思います。 P T S Tools
  4. Example: My Sandbox using HTMX and Scala Goal: Rapid Prototyping

    of Web Apps Develop & deploy an MVP of an idea as a solo developer in a reasonable time while having fun 今日紹介する私のサンドボックスの目的は、アイデアのMVPをソロ開発で素早く プロトタイピングし、短期間で楽しく形にすることです。
  5. Philosophy Constraints Principles Websites as rich applications Browser as runtime

    現在の主流であるReactやVue、Angularは「ウェブをリッチなアプリとして扱う」という 思想に基づいていますが、理論や原則が弱く、結果として複雑になりがちです。 T P
  6. Programming with mainstream frontend frameworks - Lots of options to

    do one thing - They are not following the same principle - Therefore do not compose well - Leading to increased complexity 主流のフロントエンドフレームワークは、同じことを実現する方法が多く、共通の原則に 基づいていないため組み合わせにくく、結果として複雑さが増してしまいます。 S
  7. HMDA & HTMX button on_click </> html fragment (HyperMedia-Driven Applications)

    アプリの状態管理やロジックをJSで持たないという原則から、HTMXのような ハイパーメディア駆動の手法を選び、ユーザー操作をJSなしで記述し、ロジッ クはすべてサーバー側に任せます。 S T
  8. RESTful Principles 1. Client-server separation of concerns 2. Stateless communication

    3. Responses label themselves as cacheable or non-cacheable 4. Layered System Architecture 5. Uniform Interface 6. Code-on-demand (optional) RESTの原則は正式に定義された制約であり、本来これらに従う必要があ ります。しかし現在の多くのウェブサービスはJSON APIを提供している だけで、重要な制約を満たしておらず真のRESTとは言えません。 - Roy Fielding’s PhD Dissertation (2000) "Architectural Styles and the Design of Network-based Software Architectures" P
  9. HMDA, REST & HTMX Consequences 1. No JS 2. No

    need for JSON 3. Front-end is Language-agnostic 4. Ability to reduce complexity via a well thought-through server language HMDAとHTMX、そしてREST的な考え方を採用すると、クライアント側の状態管理 やロジックにJSが不要になり、JSONも要らず、フロントエンドは言語非依存になり ます。また、サーバー側に適切な言語を選ぶことで全体の複雑さを下げられます。 S
  10. Approach: Visual Dev Principles: - A webapp is specced as

    a diagram of interconnected resources - Wireframes, architecture, domain model are visually displayed - Dev progress can be tracked right on the diagram with - Symbol names are easily derived from the image by both humans and AI for navigation and implementation Tools: - Obsidian - Excalidraw-obsidian plugin このスクリーンショットは語学学習用のフラッシュカードアプリの例で、私はワイヤーフレームを使ってページ同士をつなぐ「リソースのネットワーク」とし てWebアプリを視覚的に設計しています。HTTPエンドポイントで表現されたリソース名が、そのまま実装時の単一のソース・オブ・トゥルースになります。 Vocab Kanji Grammar Front: <html> Back: <html> Good Bad ✏️ ✏️ ✏️ Session ➕ Edit Records Vocab ✏️ 🗑️ Create New Deck New ➕ Key Prompt 🎴Default 🎴Back ➕ ➡️ Name Description 🚀 ⚠️ 🗑️ Vocab Session GET /decks GET /decks/{deck_id}/session GET /decks/{deck_id} GET /decks/new GET /decks/new POST /decks GET /decks/{deck_id}/session POST /cards/{card_id}/review PATCH /records/{record_id}/flag DELETE /cards/{card_id} GET /decks/{deck_id} PATCH /decks/{deck_id} // Edit name DELETE /decks/{deck_id} GET /decks/{deck_id}/session GET /records?deck={deck_id}&page=1 GET /card_types/{card_type_id} GET /card_types/new?deck=deck_id P T
  11. Naming Conventions 1. HTTP Endpoint as a source of truth

    2. HTTP Endpoints follow RESTful principles 3. All methods are either: endpoint, business logic or view 4. It is easy to derive one name from another ここでは、HTTPエンドポイントをソース・オブ・トゥルースとし、RESTの原則に沿 った名前付けを行い、メソッドを役割ごとに分け、名前同士が導きやすいようにすると いう命名規約をまとめています。 P
  12. Tools: Symbol-driven Navigation - vs - /src/main/scala/endpoints decks.scala, cards.scala ...

    この命名規約のおかげで、ファイル階層をたどる必要はなく、ワイヤーフレームで示された名 前をそのままシンボル検索でジャンプでき、ツールとのやり取りが大幅に効率化されます。 T
  13. Endpoints GET /decks/new POST /decks GET /decks/{deck_id}/session POST /cards/{card_id}/review PATCH

    /records/{record_id}/flag DELETE /cards/{card_id} def decks_new_GET def decks_POST def decks_ID_session_GET def cards_ID_review_POST def records_flag_PATCH def cards_DELETE def IMPL_decks_POST endpoints.scala services.scala Naming Conventions ここでは、HTTPエンドポイントをソース・オブ・トゥルースとし、パスとHTTPメソッド を組み合わせて実装名を自動的に導く命名規約を示しています。より複雑なビジネスロジッ クは、IMPL_ で始まるサービス層に切り出します。 S
  14. Naming Conventions: Ergonomics List( decks_GET, decks_POST, decks_new_GET, ) -vs- List(

    GET_decks, POST_decks, GET_decks_new, ) サンドボックスの命名規約では開発のしやすさも重 要で、HTTPメソッド名を接頭辞ではなくパスの後 ろに置くことで、アウトライン上で同じリソースの シンボルがまとまって表示され、より快適に作業で きます。 S
  15. Regular Patterns of Code endpoint .http method .input-output spec: path,

    headers... _ => handler, in terms of view and implementation methods - Allows for rapid prototyping - AI can easily repeat the pattern after few examples DO Repeat Yourself Don't もう一つの原則は「コードを規則的なパターンで書 く」ことで、この画面でも実装が互いに非常に似た形 になっています。これは意図的で、AIに例を示すこと で、図と指示を与えれば同じパターンに沿って実装を 自動生成させるためです。 P
  16. Summary - Principles give rise to tools give rise to

    sandboxes (developer experience). - Everyone has their own style, so it's good to assemble your own sandbox according to your own principles. 人それぞれ開発のスタイルが違うので、同じ原則やツールが全員に最適とは限りません。自分 の原則に合ったツールを組み合わせ、自分だけのサンドボックスを作ることで最良の開発体験 が得られます。 🌐https:/ /anatoliikmt.me/posts/2025-10-17-effective-webapp-flow/ Extended version of this presentation is in the blog:
  17. Q&A