19 กุมภาพันธ์ 2567 ครีเอทีฟด้านการสื่อสารทางการตลาดออนไลน์ และการออกแบบเว็บไซต์
HONO WEB FRAMEWORK เพิ่มการสร้างไซต์แบบ STATIC

สำหรับ Hono 4.0.0 ซึ่งเป็นรุ่นล่าสุดของ Web Framework ที่เล็กและรวดเร็วมากๆ ซึ่งทำงานบนรันไทม์ JavaScript ใดๆ พร้อมใช้งานแล้ว โดยการอัปเดตครั้งนี้ประกอบด้วยการสร้างไซต์แบบคงที่ ส่วนประกอบไคลเอนต์ และการกำหนดเส้นทางตามไฟล์

 

ซึ่งได้เปิดตัวเมื่อวันที่ 9 กุมภาพันธ์ Hono 4.0.0 ขอแนะนำ SSG Helper ซึ่งสร้างหน้า Static ของแอปพลิเคชัน Hono นักพัฒนาใช้สิ่งนี้โดยการสร้างไฟล์แยกต่างหากจากแอปพลิเคชัน build.ts และเรียกใช้ฟังก์ชัน toSSG() ในนั้น SSG Helper ดึงข้อมูล เนื้อหาของเส้นทางที่ลงทะเบียนและบันทึกเป็นไฟล์ Static

 

อะแดปเตอร์พร้อมใช้งานสำหรับชุดเครื่องมือ Bun และรันไทม์ Deno JavaScript เพื่อเพิ่มความเร็วในการพัฒนาปลั๊กอินสำหรับ Vite @hono/vite-ssg สร้างไซต์คงที่ด้วยคำสั่ง vite

 

ด้วยส่วนประกอบไคลเอนต์ hono/jsx ขยายเพื่อทำงานบนไคลเอนต์ไม่ใช่แค่เซิร์ฟเวอร์เท่านั้น Hooks เช่น useContext, useEffect และ Memo ช่วยให้นักพัฒนาสามารถสร้างส่วนประกอบไคลเอนต์ได้เหมือนกับใน React 

 

การกำหนดเส้นทางตามไฟล์ที่เรียกว่า HonoX มีให้ใน แพ็กเกจแยกต่างหาก ช่วยให้สามารถพัฒนาแอปพลิเคชันขนาดใหญ่ รองรับการเรนเดอร์ที่รวดเร็ว โดยใช้ Hono และช่วยให้นักพัฒนานำเรนเดอร์ของตัวเองมาได้ มันทำงานเหมือน Hono ดังนั้นจึงสามารถใช้มิดเดิลแวร์ Hono ได้

 

Hono ทำงานบนรันไทม์ JavaScript รวมถึง Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge และ Node.js โดยเฟรมเวิร์กมีเราเตอร์ 5 ตัว

 

ซึ่งในแต่ละตัวได้รับการปรับให้เหมาะสมกับความเร็วหรือขนาดหรือการใช้งานอื่นๆ กรณีต่างๆ หนึ่งในนั้นคือ SmartRouter จะเลือกเราเตอร์ที่ดีที่สุดในบรรดาเราเตอร์ที่ลงทะเบียนไว้ตามความต้องการในการกำหนดเส้นทาง

 

ลองใช้งาน Hono

ต่อไปนี้จะเป็นการลองใช้งาน Web Framework ที่เล็กและรวดเร็วที่ทำงานร่วมกับ JavaScript runtime ต่างๆ และมี Middleware ต่างๆ ให้ใช้งานกัน ฉะนั้นจะเป็นอย่างไรไปลองกันเลย!!

 

ขั้นตอนที่ 1 ทำการสร้างโปรเจกต์

ผู้ใช้สามารถเลือกได้ว่าจะใช้ Template หรือ ทำงานร่วมกับอะไร เช่น  aws lambda, cloudflare, bun, nodejs และ deno เป็นต้น ขอยกตัวอย่างการใช้งานร่วมกับ bun ดังนี้

 

1     $npm create hono@latest my-app

2

3     create-hono version 0.2.6

4     ? Which template do you want to use? › - Use arrow-keys. Return to submit.

5 ❯   aws-lambda

6     bun

7     cloudflare-pages

8     cloudflare-workers

9     deno

10     fastly

11     lagon

12     lambda-edge

13     nextjs

14     ↓ nodejs

 

ขั้นตอนที่ 2 ลองสร้างเราเตอร์

เราจะทำการสร้างด้วย RegExpRouter ซึ่งเป็น library ที่ทำงานเร็วมากๆ

 

1     import { Hono } from 'hono'

2

3     const app = new Hono()

4

5     app.get('/hello', (c) => {

6         return c.json({

7             message: `Hello!`,

8         })

9     })

อย่างไรก็ตามยิ่งไปรันบน bun ยิ่งแรง!!

 

1     $npm run dev

2     > dev

3     > bun run --hot src/index.ts

4

5     Started server http://0.0.0.0:3000

6

7     $wrk -c 100 -t 5 http://localhost:3000

8

9     Running 10s test @ http://localhost:3000

10       5 threads and 100 connections

11       Thread Stats   Avg      Stdev     Max   +/- Stdev

12         Latency   823.16us  200.19us   7.92ms   91.26%

13         Req/Sec    24.42k     1.08k   26.64k    78.61%

14       1227161 requests in 10.10s, 148.63MB read

15     Requests/sec: 121485.79

16     Transfer/sec:     14.71MB

 

อย่างไรก็ตามนี่เป็นอีกหนึ่ง Framework ที่น่าสนใจและเป็นอีกหนึ่งทางเลือกที่ดีเลยละ

 

#ขอคำแนะนำ เกี่ยวกับการทำเว็บแอปพลิเคชัน

#ขอคำแนะนำ เกี่ยวกับการทำแอปพลิเคชันมือถือ

#ขอคำแนะนำ เกี่ยวกับการออกแบบเว็บไซต์

#ขอคำแนะนำ เกี่ยวกับการตลาดออนไลน์

 

 

 

 

---Wynnsoft Solution รับทำเว็บไซต์ รับทำ SEO รับทำการตลาดออนไลน์ รับทำโฆษณา Facebook รับทำเว็บไซต์ ขอนแก่น และรับทำเว็บไซต์ทั่วประเทศ

ข้อมูลจาก: Hono 4.0.0 / Hono / infoworld / somkiat