5 причин використовувати JSX як рушій для шаблонів HTML - javascript.org.ua

Приклад використання з Hono.js

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

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

Нижче наведені п’ять ключових причин, чому це поєднання варто розглянути.

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

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

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

const Template = ({ title, content }) => (  






{content}
           );

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

І перед тим, як сказати, що це поганий спосіб проєктувати UI, варто знати, що інші фреймворки також використовують його: Solid.js, Qwik і навіть Astro.

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

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

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

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

const Header = ({ title }) => (    
{title}
   );      
const Footer = ({ date }) => (    
Brand Name {date}
   );      
const Page = ({ title, content, date }) => (            
{content}    
           );

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

3. Обмеження пропсів

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

Розглянемо приклад із попереднього розділу: компонент Header приймає один пропс під назвою “title”, а Footer — пропс “date”. Допоки їх батьківський компонент використовує відповідні пропси, будь-які змінні з такими іменами будуть передаватися їм. Що це означає?

 // У цьому випадку, якщо прибрати пропс date в компоненті Page, ви отримаєте помилку 
      const Header = ({ title }) => (    
{title}
   );      
      const Footer = ({ date }) => (    
Brand Name {date}
   );      
      const Page = ({ title, content, date }) => (            
{content}    {/* Якщо ви так зробите, Footer не зможе отримати значення для пропса date */}    
           );

Якщо ми розглянемо батьківський компонент для Page, будь-яке ім’я змінної “date” і її модифікація з якоїсь причини не змінять пропс date компонента Footer.

Коротше кажучи, пропси повинні бути передані всім вкладеним компонентам. Це і є основним недоліком використання JSX (я не буду це детально пояснювати в цій статті).

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

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

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

import { renderToString } from 'preact-render-to-string';  

const App = () => (  

Welcome to My Site
This page was rendered on the server!
   );      
const html = renderToString();   
console.log(html);

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

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

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

Приклад з Hono

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

Ось як ви можете використовувати JSX з Hono:

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

const app = new Hono()      

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

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

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

export default app

Швидка маршрутизація та підтримка проміжного ПЗ Hono забезпечують високу швидкість вашого MPA навіть при його масштабуванні.

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

Останні думки

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

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

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

Перекладено з: 5 Reasons to Use JSX as an HTML Template Engine