5 причин використовувати JSX як рушій шаблонів HTML

У екосистемі Node.js, спосіб створення сучасних веб-застосунків продовжує еволюціонувати, зокрема для багатосторінкових застосунків (MPA). Одне з поєднань, яке варте уваги — це використання JSX як рушія шаблонів HTML.

У цій статті я покажу конкретний приклад використання Hono, легкого і швидкого веб-фреймворку. Разом вони пропонують переконливе рішення для розробників, які хочуть створювати ефективні та зручні у підтримці MPA-сайти.

Ось 5 ключових причин, чому це поєднання варто розглянути.

1. Знайома та інтуїтивно зрозуміла синтаксис

JSX широко відомий своєю простотою та зручністю для розробників. Походить з екосистеми React, JSX дозволяє писати код, схожий на HTML, безпосередньо в JavaScript. Це надає більш інтуїтивний спосіб створення шаблонів порівняно з традиційними рушіями, такими як EJS чи Handlebars.

З JSX кожен компонент є функцією:

const Template = ({ title, content }) => (  
   <div>  
     <h1>{title}</h1>  
     <p>{content}</p>  
   </div>  
);  

Ви можете чітко та лаконічно виразити структуру вашої сторінки, зменшуючи повторення коду та покращуючи читаність. Розробники, знайомі з сучасними JavaScript-фреймворками, зможуть легко прийняти JSX для MPA. І перш ніж сказати, що це не найкращий спосіб проектувати інтерфейси користувача, варто зазначити, що інші фреймворки, такі як Solid.js, Qwik чи навіть Astro, також використовують цей підхід.

2. Перезавантажувані компоненти для кращої масштабованості

JSX дозволяє проектувати на основі компонентів, що сприяє розділенню вашого застосунку на перезавантажувані та композиційні частини. Цей підхід особливо корисний для MPA, де різні сторінки часто мають спільні елементи, такі як шапки, підвалі чи меню навігації.

Це не є чимось абсолютно новим, оскільки майже всі рушії шаблонів дозволяють повторно використовувати блоки або подання. Однак JSX дає відчуття близькості до HTML при повторному використанні компонентів.

Приклад перезавантажуваного компонента:

const Header = ({ title }) => (    
  <header>{title}</header>  
);  

const Footer = ({ date }) => (    
  <footer>Brand Name {date}</footer>  
);  

const Page = ({ title, content, date }) => (  
  <div>  
    <Header title={title} />  
    <div>{content}</div>    
    <Footer date={date} />  
  </div>  
);  

Повторно використовуючи компоненти між сторінками, ви зменшуєте надлишковість і гарантуєте узгодженість у дизайні вашого застосунку.

3. Обмеження через пропси

Для мене це одна з головних переваг. Як функція, компонент JSX приймає аргументи (пропси). Це гарантує, що ваш вигляд використовує необхідні та відповідні дані.

Візьмемо попередній приклад: компонент Header потребує пропса з назвою title, а Footer — пропса date. Якщо батьківський компонент не надає ці пропси, виникає помилка.

const Header = ({ title }) => (    
  <h1>{title}</h1>  
);  

const Footer = ({ date }) => (    
  <footer>Brand Name {date}</footer>  
);  

const Page = ({ title, content, date }) => (  
  <div>  
    <Header title={title} />  
    <div>{content}</div>    
    <Footer date={date} /> {/* Якщо пропса date відсутня, Footer не працюватиме належним чином */}  
  </div>  
);  

4. Рендеринг на сервері для кращої продуктивності

Гнучкість JSX поширюється на рендеринг на сервері (SSR), що робить його відмінним вибором для MPA.
Генеруючи HTML на сервері, ви можете надати клієнту повністю відрендерену сторінку, що знижує час до першого байта (TTFB) і покращує SEO.

З бібліотеками такими як react-dom/server або альтернативами, такими як Preact, інтеграція Hono, kitajs/html або плагін HTML для Elysia, ви можете ефективно використовувати JSX для генерації HTML на сервері:

import { renderToString } from 'react-dom/server';  

const App = () => (  
  <div>  
    <h1>Ласкаво просимо на мій сайт</h1>  
    <p>Ця сторінка була відрендерена на сервері!</p>  
  </div>  
);  
const html = renderToString();  
console.log(html);  

Цей підхід гарантує, що навіть користувачі на повільних мережах отримають значущий контент якнайшвидше.

5. Екосистема та підтримка інструментів

Екосистема Node.js надає чудову підтримку для JSX завдяки його кореням у React. Інструменти, такі як Babel або TypeScript, можуть транспілювати ваш JSX в чистий JavaScript, гарантуючи сумісність з різними середовищами.

Приклад з Hono

Hono — це легкий і швидкий веб-фреймворк, оптимізований для простоти. Він добре поєднується з JSX, оскільки не накладає строгих обмежень на ваш вибір шаблонів, крім того, він нативно підтримує рендеринг HTML.

import { Hono } from 'hono'   
import type { FC } from 'hono/jsx'  

const app = new Hono()  

const Layout: FC = (props) => {  
  return (  
    <div>{props.children}</div>  
  )  
}  

const TopPage: FC<{ messages: string[] }> = (props: { messages: string[] }) => {  
  return (  
    <div>  
      <h1>Hello Hono!</h1>  
      {props.messages.map((message) => {  
        return <p>{message}!!</p>  
      })}  
    </div>  
  )  
}  

app.get('/', (c) => {  
  const messages = ['Good Morning', 'Good Evening', 'Good Night']  
  return c.html()  
})  

export default app  

Швидка маршрутизація і підтримка middleware від Hono гарантують, що ваш MPA залишатиметься чуйним навіть при розширенні.

Звісно, в цій статті наш випадок використання є дуже простим. Ми можемо створювати набагато складніші додатки 🙂

Висновок

Використання JSX з Hono як рушія шаблонів HTML — це сучасний і ефективний спосіб створення сайтів MPA в екосистемі Node.js. Завдяки своїй інтуїтивно зрозумілій синтаксису, перезавантажуваним компонентам, плавній інтеграції з Hono, можливостям рендерингу на сервері та підтримці потужних інструментів, JSX є переконливою альтернативою традиційним рушіям шаблонів.

Незалежно від того, чи будуєте ви маленький проєкт, чи великий веб-додаток, це поєднання надає гнучкість і продуктивність, необхідну для створення підтримуваних і ефективних сайтів. Якщо ви шукаєте спосіб модернізувати ваш MPA-робочий процес, спробуйте JSX та Hono: ви можете знайти свою нову улюблену стектуру!

Не соромтесь слідкувати за мною, я публікуватиму кілька статей про цю "нову" стектуру!

Перекладено з: 5 Raisons d’utiliser JSX comme moteur de templates HTML