What Hono brought to student organizations?

3.2K Views

June 22, 24

スライド概要

Hono Conference 2024で利用した登壇資料です。

profile-image

電気通信大学 CSプログラム Webのこと / Cloudflare Workers / Hono など

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

What Hono brought to student organizations? Hono Conference 2024🔥 Kentaro Suzuki @sushi-chaaaan

2.

Whoami? sushi-chaaan / Kentaro Suzuki University of Electro-Communications(UEC) TypeScript / Cloudflare Workers Engineer at Virtual Live Lab

3.

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/

4.

We are producing live concert! ● Create 3D Models ● Motion capture ● Stage operations ● Develop reservation systems Picture of MIKUEC 2023

5.

We are producing live concert! ● Create 3D Models ● Motion capture ● Stage operations ● Develop reservation systems Hono + Cloudflare Workers Picture of MIKUEC 2023

6.

Use hono for reservation system development

7.

Today’s topic: What Hono brought to us? 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow

8.

What Hono brought to us: 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow

9.

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

10.

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?

11.

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…🤔

12.

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

13.

Tips: If we switch from Cloudflare Workers to Node.js… Only we need to do: replace adaptor 😄

14.

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! 🎉

15.

What Hono brought to us: 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow

16.

Our Pain: Frequent member turnover - Engineering team leaders change every year - Team members completely turn over in about 3 years

17.

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

18.

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

19.

Balancing Understandability and Robustness We use Hono🔥 for backend framework! - Simple core API - Appropriately abstracted middleware - Maximized TypeScript type safety - High testability

20.

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

21.

What Hono brought to us: 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow

22.

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…😑

23.

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

24.

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

25.

Learn step-by-step Example: Return HTML Response Step1: Raw Response Step2: Hono API Step 3: with Hono JSX

26.

Recap: What Hono brought to us? 1. Flexible infrastructure choice 2. Simple and takeover-friendly code 3. Optimized learning workflow

27.

Thank you!

28.

Appendix: Connect backend and frontend with Hono RPC 1. Create Hono API Server in packages/api

29.

Appendix: Connect backend and frontend with Hono RPC 2. Export entrypoint for client and server

30.

Appendix: Connect backend and frontend with Hono RPC 3. Use typed client on frontend Use normal fetch on dev Use internal fetch on prod