Tweet
Tweet

Slide 1

Slide 1 text

Hono Conference 2024 - Our first step Adaptor, Helmet, SSG 2024-06-22 #honoconf

Slide 2

Slide 2 text

Me Watanabe Yohei(watany) ● NTT TechnoCross Corporation ● AWS ○ AWS Assosiate Ambassador 2024 ○ Japan AWS Top Engineer 2023 ○ JAWS-UG Tokyo https://jawsug.connpass.com/event/316

Slide 3

Slide 3 text

Latest Developments

Slide 4

Slide 4 text

Contents 1. Adaptor 2. Helmet 3. SSG

Slide 5

Slide 5 text

1. Adaptor

Slide 6

Slide 6 text

Adaptor 󰢃'hono/adapter' https://hono.dev/docs/helpers/adapter

Slide 7

Slide 7 text

Adaptor 󰢏'github.com/hono/tree/main/src/adapter'

Slide 8

Slide 8 text

Adaptor Contributions ● AWS Lambda ● Lambda@Edge https://hono.dev/getting-started/

Slide 9

Slide 9 text

Why Contribute？

Slide 10

Slide 10 text

Why Contribute？ I’ｍ AWS CDK User & Contributor ● Blog and Talks ● Promotion → https://jawsug-cdk.connpass.com/event/317921/

Slide 11

Slide 11 text

Why Contribute？ "NodejsFunctions", you can directly build `.ts` files and deploy them along with AWS Lambda.

Slide 12

Slide 12 text

Why Contribute？ ● Wanted a framework compatible with CDK (TypeScript)... ● Hono looks great! https://qiita.com/watany/items/72dad3c4953238a16c9c

Slide 13

Slide 13 text

Adaptor - AWS Lambda

Slide 14

Slide 14 text

Adaptor - AWS Lambda Contributions ● Events ● Response Streaming

Slide 15

Slide 15 text

Adaptor - AWS Lambda(Events)

Slide 16

Slide 16 text

Adaptor - AWS Lambda(Events) v3.10: Supports only API Gateway in the diagram. https://github.com/awslabs/aws-lambda-web-adapter/blob/main/docs/images/lambda-adapter-overview.png

Slide 17

Slide 17 text

Adaptor - AWS Lambda(Events) v4.0 : Almost all HTTP-related services are supported. https://github.com/awslabs/aws-lambda-web-adapter/blob/main/docs/images/lambda-adapter-overview.png

Slide 18

Slide 18 text

Adaptor - AWS Lambda(Events) ● This operation (or the opposite) in Request/Response https://github.com/awsdocs/aws-lambda-developer-guide/blob/main/sample-apps/nodejs-apig/event.json https://developer.mozilla.org/en-US/docs/Web/API/Request/Request

Slide 19

Slide 19 text

Adaptor - AWS Lambda(Events) https://x.com/astuyve/status/1791902700210102422

Slide 20

Slide 20 text

Appendix. vs Lambda Web Adapter AWS Lambda has an extension called "Lambda Web Adapter" Ref：Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化する https://aws.amazon.com/jp/builders-flash/202301/lambda-web-adapter/

Slide 21

Slide 21 text

Appendix. vs Lambda Web Adapter When using Hono, the built-in adapter is sufficient. ● `hono/aws-lambda` ○ Input Event→Request Obj→Response Obj→Response ● Lambda Web Adaptor ○ Input Event→HTTP Request→Request Obj→ Response Obj→Response ○ Either way, an adapter for Node.js is needed. Using Lambda Web Adapter ● For container operations and considering other frameworks.

Slide 22

Slide 22 text

Adaptor - AWS Lambda (Response Streaming)

Slide 23

Slide 23 text

Adaptor - AWS Lambda(Response Streaming) https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/

Slide 24

Slide 24 text

Adaptor - AWS Lambda(Response Streaming) https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/

Slide 25

Slide 25 text

Adaptor - AWS Lambda(Response Streaming) Impressive features ● Wrap everything with the decorator `awslambda.streamifyResponse` embedded in Lambda's Node.js runtime. ● Requires `NodeJS.WritableStream` for compatibility with Node.js 16 (!). ○ Hono requires Node.js 18 or higher. It uses WritableStream. ● No comprehensive documentation available (?!).

Slide 26

Slide 26 text

Adaptor - AWS Lambda(Response Streaming) Implemented "streamHandle" !! https://hono.dev/getting-started/aws-lambda#lambda-response-streaming

Slide 27

Slide 27 text

Appendix. "streamSSE" was created due to a misunderstanding of the Response Streaming. https://github.com/honojs/hono/pull/150

Slide 28

Slide 28 text

Adaptor - Lambda＠Edge

Slide 29

Slide 29 text

Adaptor - Lambda@Edge 2023/7 An "Impactful" Pull Request https://github.com/honojs/hono/pull/121

Slide 30

Slide 30 text

Adaptor - Lambda@Edge Q1. Why did you create this? A1. The Cloudflare Meet-up was exciting, and I wanted to join the fun. Q2. Why not use Cloudflare Workers? Q3. Is it used in production? https://cfm-cts.connpass.com/

Slide 31

Slide 31 text

Adaptor - Lambda@Edge Q1. Why did you create this? A1. The Cloudflare Meet-up was exciting, and I wanted to join the fun. Q2. Why not use Cloudflare Workers? A2. I'm known as the "AWS person" in my company, so I thought it would be fun to integrate Hono with Lambda@Edge. Q3. Is it used in production? https://cfm-cts.connpass.com/

Slide 32

Slide 32 text

Adaptor - Lambda@Edge Q1. Why did you create this? A1. The Cloudflare Meet-up was exciting, and I wanted to join the fun. Q2. Why not use Cloudflare Workers? A2. I'm known as the "AWS person" in my company, so I thought it would be fun to integrate Hono with Lambda@Edge. Q3. Is it used in production? A3. I implemented it, but due to its simplicity and execution cost, we opted for CloudFront Functions. https://cfm-cts.connpass.com/

Slide 33

Slide 33 text

Appendix. CloudFront Functions Adapter？ No plans to create an adaptor for CloudFront Functions at this time. ● The size limit is 10KB. ● Runtime environment is ES5.1 + custom extensions. ● Execution time, including idle CPU time, is limited to 1 second.

Slide 34

Slide 34 text

Contents 1. Adaptor 2. Helmet 3. SSG

Slide 35

Slide 35 text

２．Helmet

Slide 36

Slide 36 text

Sorry, time's up😂 Read this. https://zenn.dev/watany/articles/c25bb4fef78c3d

Slide 37

Slide 37 text

Contents 1. Adaptor 2. Helmet 3. SSG

Slide 38

Slide 38 text

3．SSG

Slide 39

Slide 39 text

Hono/SSG was Released in v4. https://zenn.dev/yusukebe/articles/b20025ebda310a

Slide 40

Slide 40 text

Motivation ● If Hono routes could be saved as files … ○ Cloudflare Pages, GitHub Pages, or S3 ○ Hono has built-in JSX and CSS. ● Strange features suddenly created during the New Year's holidays. https://x.com/yusukebe/status/1742850872651206724

Slide 41

Slide 41 text

What Hono/SSG is doing 1. Passing a Hono instance to the helper function (toSSG) https://hono.dev/docs/helpers/ssg

Slide 42

Slide 42 text

What Hono/SSG is doing 2. Analyze the routes registered in the Hono instance ● Remove middleware ● Remove routes with methods other than ”GET” and ”ALL” ● Use the ”app.fetch” and ”app.request” APIs to retrieve response data directed at localhost.

Slide 43

Slide 43 text

What Hono/SSG is doing 3. Writing the response Use the "fs" passed to toSSG for writing. ● Hono is a multi-platform framework. ● Custom “fs” implementations for Deno and Bun are also provided. https://hono.dev/docs/helpers/ssg

Slide 44

Slide 44 text

What Hono/SSG is doing That's not enough???? We continuously apply patches at a bi-daily pace... https://github.com/honojs/hono/graphs/contributors?from=2023-12-29&to=2024-02-09&type=c

Slide 45

Slide 45 text

Sorry🙇 ● Dependent on Node.js APIs (fs/promises, Buffer.from…) ● File extension generation breaks ● Cannot output binaries ● etc...

Slide 46

Slide 46 text

What Hono/SSG is doing As of version 4.4, with everyone's support, it has significantly improved. ● Pipeline from route loading to writing ● Support for Vite Plugin ● Custom Hooks ● Middleware like "generateStaticPaths" https://hono.dev/docs/helpers/ssg

Slide 47

Slide 47 text

Conclusion ● I often develop features for use with AWS. ● However, I believe that these features should benefit users beyond just AWS. ● Developing such versatile features is challenging, but there's nothing more enjoyable.

Slide 48

Slide 48 text

Contents 1. Adaptor 2. Helmet 3. SSG 4. And More...

Slide 49

Slide 49 text

4. And More ~2024 Roadmap~

Slide 50

Slide 50 text

4. Load map? ● GA for hono/ssg ○ Finalize several specifications ○ Create plugin functionality ● 3rd Party Middleware `@hono/aws`

Slide 51

Slide 51 text

@hono/aws

Slide 52

Slide 52 text

@hono/aws/s3 S3 + SSG

Slide 53

Slide 53 text

@hono/aws/lambda Catch up with the "Lambda Web Adaptor" https://github.com/awslabs/aws-lambda-web-adapter

Slide 54

Slide 54 text

See you again 👋