3.2K Views
June 22, 24
スライド概要
Hono Conference 2024で利用した登壇資料です。
電気通信大学 コンピューターサイエンスプログラム B3 Webのこと / Cloudflare Workers / Hono など
What Hono brought to student organizations? Hono Conference 2024🔥 Kentaro Suzuki @sushi-chaaaan
Whoami? sushi-chaaan / Kentaro Suzuki University of Electro-Communications(UEC) TypeScript / Cloudflare Workers Engineer at Virtual Live Lab
About us: Virtual Live Lab 広がれ、創作の輪。 Student Organization at UEC Producing MIKUEC: Fan-made 3DCG live concert of virtual singers 1000+ Visitors in 2023 X: @uec_VL_Lab Web: https://mikuec.com/
We are producing live concert! ● Create 3D Models ● Motion capture ● Stage operations ● Develop reservation systems Picture of MIKUEC 2023
We are producing live concert! ● Create 3D Models ● Motion capture ● Stage operations ● Develop reservation systems Hono + Cloudflare Workers Picture of MIKUEC 2023
Use hono for reservation system development
Today’s topic: What Hono brought to us? 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow
What Hono brought to us: 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow
Importance of Infrastructure Selection in Student Organizations Why Infrastructure Selection is Crucial: ● Directly impacts running costs ● Limited financial resources ● Prefer to operate for free if possible
Importance of Infrastructure Selection in Student Organizations Challenges in Choosing JavaScript Execution Platform ● Use on-premises Node.js? ● Opt for serverless environments like Cloudflare Workers? ● Choose fully managed Hosting services like Render.com?
Importance of Infrastructure Selection in Student Organizations Challenges in Choosing JavaScript Execution Platform ● Use on-premises Node.js? ● Opt for serverless environments like Cloudflare Workers? ● Choose fully managed Hosting services like Render.com? ● New, more cost-effective platform might be available in the future…🤔
Consider Future Runtime Changes, and… We use Hono🔥 for backend framework! - Core of Hono is runtime-agnostic - Based on Web standard API - Less code change when switching runtimes - Adaptor to absorb runtime differences
Tips: If we switch from Cloudflare Workers to Node.js… Only we need to do: replace adaptor 😄
Consider Future Runtime Changes, and… We use Hono🔥 for backend framework! - Core of Hono is runtime-agnostic - Based on Web standard API - Less code change when switching runtimes - Adaptor to absorb runtime differences Now, we have the flexibility to choose infrastructure! 🎉
What Hono brought to us: 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow
Our Pain: Frequent member turnover - Engineering team leaders change every year - Team members completely turn over in about 3 years
Our Pain: Frequent member turnover Challenges in Codebase Continuity - Most members start programming after entering university - High cognitive load leads to abandonment if juniors can't understand - Low cognitive load must ensure robustness
Our Pain: Frequent member turnover Challenges in Codebase Continuity - Most members start programming after entering university - High cognitive load leads to abandonment if juniors can't understand - Low cognitive load must ensure robustness Ease of understanding and robustness should coexist
Balancing Understandability and Robustness We use Hono🔥 for backend framework! - Simple core API - Appropriately abstracted middleware - Maximized TypeScript type safety - High testability
Balancing Understandability and Robustness We use Hono🔥 for backend framework! - Simple core API - Appropriately abstracted middleware - Maximized TypeScript type safety - High testability Simple but powerful mock🔥 Env / Testing - Hono getPlatformProxy / API · Cloudflare Workers docs - Wrangler
What Hono brought to us: 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow
Good Skills to know for Modern Web Development…? - Fundamental JavaScript - HTTP Protocol / Request, Response cycle - TypeScript - Component Oriented Frontend - JSX for easier component definition - Testing And more…😑
Challenges in Gradual Learning - Need to prioritizing essential skills step by step - Difficult to learn all essential concepts with one library/framework - Encountering multiple libraries/frameworks can cause confusion for beginners
Optimized learning workflow We use Hono🔥 for learning web development! - Covers fundamentals like Request and Response - Can teach even JSX and Tests in a single framework - Knowledge remains universal and long-lasting - Based on Web standard
Learn step-by-step Example: Return HTML Response Step1: Raw Response Step2: Hono API Step 3: with Hono JSX
Recap: What Hono brought to us? 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow
Thank you!
Appendix: Connect backend and frontend with Hono RPC 1. Create Hono API Server in packages/api
Appendix: Connect backend and frontend with Hono RPC 2. Export entrypoint for client and server
Appendix: Connect backend and frontend with Hono RPC 3. Use typed client on frontend Use normal fetch on dev Use internal fetch on prod