What Hono brought to student organizations?

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/

• https://x.com/uec_VL_Lab
• 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

• https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy
• https://hono.dev/docs/guides/testing#env

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