Menggunakan JSX sebagai view engine Express.js

JSX adalah sebuah ekstensi sintaks javascript. Walaupun dipopulerkan oleh React, tapi JSX tidak sama dengan React. Ada banyak framework lain yang menggunakannya seperti Preact, Inferno, dan Solid. Pada artikel kali ini, saya akan pakai JSX sebagai view engine untuk Express.js

Kenapa JSX?

Karena pada dasarnya jsx adalah javascript, sehingga semua tools yang tersedia untuk javascript bisa kita pakai untuk membangun UI yang menarik. Kalau butuh satu function tinggal import atau bikin langsung di file yang sama.

Berbeda sekali dibandingkan menggunakan template engine seperti pug, ejs, nunjucks, dkk. Yang masing-masingnya memiliki sintaks sendiri dan kalau mau menambahkan satu fungsi helper perlu diregistrasikan dulu ke enginenya atau didaftarkan sebagai local variable di express.

Sebenarnya ada library yang sudah jadi yang menggunakan jsx di expressjs, tapi semuanya depends ke React. Saya ingin sesuatu yang sederhana dan hanya memproduksi plain html. Karena ga ketemu yang cocok, saya putuskan untuk mencoba membuatnya sendiri.

Setelah membaca halaman Developing template engines for Express, saya berkesimpulan sepertinya membuat custom template engine bukan hal yang sulit. Express hanya butuh disediakan satu callback dengan signature (filePath, options, callback) => void

• filePath adalah lokasi file yang diinvoke dengan res.render. Misalnya jika diinvoke res.render('index'), value filePath adalah /absolute/path/to/index.jsx
• options adalah value dari parameter kedua res.render digabung dengan value lain yang disediakan oleh express.
• callback adalah function yang harus diinvoke dengan hasil rendering dalam bentuk string.

Ada satu library bagus yang mengubah jsx element menjadi plain html string yang bisa dipakai sebagai dasar untuk percobaan membuat view engine expressjs. Yaitu vhtml yang dibuat oleh creator preact.

Untuk mentransformasi jsx menjadi javascript normal dengan vhtml function call, kita perlu menggunakan babel dengan plugin @babel/plugin-transform-react-jsx.

Berikutnya agar bisa mengimport css dan menggunakan css-in-js, saya tambahkan webpack dengan css-loader. Untuk css-in-js, saya menggunakan linaria dengan linaria/loader untuk webpack. Dan tentu saja tidak lupa tambahan konfigurasi untuk tailwindcss.

Hasil jadi dari percobaan ini bisa diakses di https://whatsmyip.fly.dev.

Seperti inilah code untuk halaman home yang dibuat dengan jsx, dan menggunakan kombinasi linaria + tailwindcss untuk styling.

	app.get('/', (req, res) => {
	res.render('home', { ip: req.ip });
	});

view raw app.js hosted with ❤ by GitHub

	/* @jsx h */
	import h from 'vhtml';
	import { css } from 'linaria';
	function Home({ ip }) {
	return (
	<main
	className={css`
	@apply min-h-screen flex items-center justify-center bg-gray-800;
	`}
	>
	<h2
	className={css`
	@apply text-4xl tracking-tight leading-none font-extrabold text-white text-center;
	@screen sm {
	@apply text-6xl;
	}
	`}
	>
	<span
	className={css`
	@apply text-indigo-400;
	`}
	>
	Your IP Address is
	</span>{' '}
	{ip}
	</h2>
	</main>
	);
	}
	export default Home;

view raw home.jsx hosted with ❤ by GitHub

Kenapa saya pakai linaria + tailwind, gak cuma tailwind aja? Karena hasil markup akhir terlihat lebih rapi dengan satu class saja, dan juga lebih gampang untuk mengkombinasikan tailwind dengan custom css yang kita tambahkan sendiri seandainya diperlukan.

	<main class="mtltgbr">
	<h2 class="h1963ca6">
	<span class="shvdru7">Your IP Address is </span>120.xxx.xx.xxx
	</h2>
	</main>

view raw rendered.html hosted with ❤ by GitHub

Source code lengkapnya tersedia di

armedi / express-jsx

referensi:

• https://github.com/saltyshiomix/react-ssr
• https://github.com/reactjs/express-react-views