Penulis materi, terjemahan yang kami terbitkan hari ini, ingin berbagi cerita tentang teknologi apa yang ia gunakan untuk dengan cepat mengembangkan prototipe aplikasi web. Teknologi ini termasuk perpustakaan Fastify dan Preact. Dia juga menggunakan perpustakaan htm. Ini terintegrasi dengan mudah dengan Preact dan digunakan untuk menggambarkan elemen DOM menggunakan konstruksi intuitif yang mengingatkan pada JSX. Namun, untuk bekerja dengannya, Anda tidak perlu transpiler seperti Babel. Setelah mendemonstrasikan alat pengembangan prototipe dan metode bekerja dengannya, penulis materi akan menunjukkan cara mengemas aplikasi tersebut ke dalam wadah Docker. Ini membuatnya mudah untuk menunjukkan aplikasi kepada semua orang yang tertarik.
Mulai
Saya mulai menggunakan seperangkat teknologi tersebut beberapa minggu yang lalu ketika saya perlu membuat aplikasi web prototipe yang sangat sederhana yang dirancang untuk memeriksa, bersama dengan kolega, beberapa asumsi.
Eksperimen saya sangat sukses. Saya dapat membuat prototipe dengan sangat cepat, rekan-rekan saya dapat dengan mudah bereksperimen dengannya, mereka dapat dengan cepat mengekspresikan kesan mereka tentang itu. Pada saat yang sama, mereka dapat menguji proyek bahkan jika Node.js dan NPM tidak diinstal pada komputer mereka.
Semua ini membawa saya pada ide bahwa saya harus menulis materi tentang pendekatan saya terhadap pembuatan prototipe aplikasi web secara cepat. Ada kemungkinan bahwa pendekatan ini akan bermanfaat bagi orang lain. Bagi mereka yang sudah terbiasa dengan Fastify dan Preact, saya akan segera menguraikan hal yang paling penting, yang akan memungkinkan mereka untuk segera menerapkan ide-ide saya ke dalam praktik.
Ide utama
Jika Anda sudah terbiasa dengan Fastify dan Preact dan ingin belajar tentang bagaimana mengatur pengembangan proyek berdasarkan teknologi ini, maka Anda benar-benar beberapa langkah dari apa yang Anda inginkan. Yaitu, kita berbicara tentang perintah berikut:
git clone https://github.com/lmammino/fastify-preact-htm-boilerplate.git my-new-project cd my-new-project rm -rf .git npm install
Tentu saja, Anda dapat mengubah nama proyek, proyek
my-new-project , menjadi nama proyek Anda.
Setelah menginstal semua yang Anda butuhkan, Anda dapat mulai mengerjakan proyek. Yaitu, kita berbicara tentang hal berikut:
- Folder
src/ui berisi file-file bagian klien dari aplikasi (di sini Preact dan htm digunakan). - Folder
src/server berisi file yang terkait dengan sisi server aplikasi (Fastify digunakan di sini).
Dengan mengedit file yang sesuai, Anda dapat menjalankan proyek:
npm start
Setelah itu, Anda dapat mengujinya dengan masuk ke
localhost:3000 address di browser.
Dan satu hal lagi. Jika Anda menyukai perkembangan saya, saya akan sangat berterima kasih atas bintang di
GitHub .
Sekarang mari kita lihat teknologi yang digunakan di sini dan fitur-fitur yang bekerja dengannya.
Fastify
Fastify adalah kerangka kerja web yang cepat dan ekonomis untuk Node.js. Proyek ini awalnya dibuat oleh dua programmer. Sekarang tim dari mereka yang mengerjakannya memiliki 10 orang, lebih dari 130 orang membantu dalam pengembangan proyek, ia mengumpulkan hampir 10.000 bintang di GitHub.
Fastify dipengaruhi oleh kerangka kerja Node.js seperti Express dan Hapi, yang telah ada selama beberapa waktu. Awalnya ditujukan untuk produktivitas, pada kenyamanan programmer dan memperluas kemampuannya dengan bantuan plugin. Omong-omong, ini adalah salah satu fitur favorit saya dari Fastify.
Jika Anda tidak terbiasa dengan kerangka kerja Fastify atau ingin mengetahuinya lebih baik, saya dapat merekomendasikan
dokumentasi resminya.
Perlu dicatat bahwa saya terkait dengan Fastify. Saya adalah anggota tim pengembangan utama dan saya terutama terlibat dalam mendukung lokasi proyek dan mengerjakan dokumentasinya.
Preact
Preact adalah pustaka untuk mengembangkan antarmuka pengguna untuk proyek web, yang dibuat oleh satu orang sebagai pengganti yang ringkas dan cepat untuk React. Proyek ini ternyata cukup sukses, sekarang seluruh tim pengembang terlibat di dalamnya, di GitHub ia mencetak lebih dari 20.000 bintang.
Salah satu alasan saya menyukai Preact adalah bahwa perpustakaan ini memiliki lapisan yang dapat diperluas untuk menggambarkan komponen visual aplikasi. Dalam keadaan normal, perpustakaan ini dapat digunakan menggunakan JSX dalam kombinasi dengan Babel untuk menerjemahkan kode, tetapi jika Anda tidak ingin menginstal Babel dan mengkonfigurasi proses pembuatan aplikasi, Anda dapat menggunakan Preact, misalnya, bersama-sama dengan perpustakaan
htm , yang menggunakan templat literal dan tidak memerlukan transpilasi saat meluncurkan proyek yang digunakan dalam peramban modern.
Pada artikel ini kita akan menggunakan perpustakaan htm dan akan segera mempertimbangkan beberapa contoh.
Tinjauan Proyek
Di sini kita melihat seluruh proses pembuatan proyek. Tujuan kami adalah mengembangkan aplikasi web sederhana yang menampilkan informasi tentang waktu di server pada saat peluncurannya. Di sini, untuk memperjelas apa yang akan kita perjuangkan.
Aplikasi di browserIni adalah Aplikasi Halaman Tunggal (SPA), di mana Preact dan htm digunakan untuk membentuk bagian kliennya, dan Fastify digunakan untuk membuat API yang dirancang untuk menerima waktu server.
Pembaca yang penuh perhatian mungkin memperhatikan bahwa halaman yang ditunjukkan pada gambar sebelumnya memiliki ikon favicon yang cantik. Benar, dia sangat kecil di sana, jadi saya akan memfasilitasi tugas untuk mereka yang, dengan mata putus asa, mencoba untuk melihat. Ini versi yang diperbesar.
FaviconMenyiapkan sisi server aplikasi
Mari kita mulai dengan membuat folder baru:
mkdir server-time cd server-time
Sekarang inisialisasi proyek NPM dan instal Fastify:
npm init -y npm i --save fastify@next fastify-static@next fastify-cli
Harap dicatat bahwa saya menggunakan konstruk
@next ketika menjelaskan beberapa
@next dependensi. Hal ini dilakukan untuk memastikan bahwa proyek tersebut menggunakan perpustakaan Fastify 2, yang saat ini dalam status kandidat rilis, tetapi akan segera menjadi versi stabil utama.
Harap dicatat bahwa Anda juga dapat membuat proyek baru berdasarkan Fastify menggunakan
fastify-cli baris perintah
fastify-cli :
npx fastify-cli generate server-time
Pada saat penulisan materi ini, tim ini membuat proyek yang dirancang untuk menggunakan Fastify 1.x, tetapi segera, setelah rilis Fastify 2, alat ini akan diperbarui.
Mari kita menganalisis paket yang diinstal:
fastify adalah komponen inti dari framework.fastify-static adalah plugin tambahan yang memungkinkan Anda melayani file statis dengan mudah dengan server Fastify.fastify-cli adalah alat baris perintah yang memungkinkan Anda membuat proyek berdasarkan Fastify.
Saat ini, kami siap membuat API berdasarkan Fastify. Jadi mari kita letakkan kode server di file
src/server/server.js :
const path = require('path') module.exports = async function(fastify, opts) { // `src/ui` fastify.register(require('fastify-static'), { root: path.join(__dirname, '..', 'ui'), }) // API fastify.get('/api/time', async (request, reply) => { return { time: new Date().toISOString() } }) }
Saya percaya bahwa kode di atas menjelaskan dengan baik, tetapi ada beberapa detail menarik yang layak untuk dibicarakan. Ini akan sangat berguna bagi mereka yang tidak memiliki pengalaman dengan Fastify.
Hal pertama yang dapat Anda perhatikan dalam kode ini adalah bahwa kata kunci
async digunakan di sini. Fastify mendukung pengembangan gaya async / await dan pendekatan panggilan balik yang lebih tradisional. Apa yang sebenarnya harus dipilih tergantung pada preferensi pengembang tertentu.
Detail menarik lainnya adalah kita mendefinisikan server di sini sebagai modul yang diekspor. Modul ini (ini disebut "plug-in" dalam jargon Fastify) adalah fungsi yang mengambil instance Fastify (
fastify ) dan seperangkat opsi (
opts ) sebagai argumen. Di dalam deklarasi modul, kita dapat menggunakan instance
fastify untuk mendaftarkan plugin. Inilah yang terjadi dengan plugin
fastify-static . Kami juga dapat menggambarkan titik akhir HTTP menggunakan metode khusus seperti
fastify.get dan
fastify.post .
Pendekatan modular yang digunakan di sini, meskipun terlihat agak tidak biasa, memiliki kelebihan. Untuk memulainya, perlu dicatat bahwa ini memungkinkan Anda untuk menggabungkan beberapa server. Bayangkan Anda telah membuat server yang dirancang untuk melayani blog, dan yang lainnya untuk forum. Mereka dapat dengan mudah diintegrasikan ke dalam aplikasi yang sudah ada dengan melampirkannya ke jalur seperti
/blog dan
/forum .
Selain itu, pendekatan ini memungkinkan Anda untuk mengabstraksi aplikasi dan sub-aplikasi dari binding server (misalnya, socket binding), meneruskan solusi untuk tugas ini baik ke aplikasi root atau
fastify-cli .
Mulai server menggunakan
fastify baris perintah
fastify :
node_modules/.bin/fastify start --log-level info src/server/server.js
Untuk menyederhanakan hidup kita, kita dapat menambahkan perintah ini ke bagian
scripts dari file
package.json kita:
{ "scripts": { "start": "fastify start --log-level info src/server/server.js" } }
Sebelum benar-benar memulai server, kita perlu memastikan bahwa ada folder di mana sumber daya statis akan ditemukan. Jika tidak,
fastify-static akan
fastify-static kesalahan. Buat folder ini:
mkdir src/ui
Sekarang kita dapat memulai aplikasi dengan perintah
npm start dan menavigasi menggunakan browser ke
localhost:3000/api/time .
Jika semuanya berfungsi dengan benar, di browser Anda dapat melihat sesuatu seperti berikut:
{ "time": "2019-02-17T19:32:03.354Z" }
Pada titik ini, Anda dapat menghargai fitur lain dari Fastify. Itu terletak pada kenyataan bahwa serialisasi JSON, dalam hal rute tertentu mengembalikan objek, diterapkan secara otomatis.
Sekarang pekerjaan di server API selesai. Mari kita memiliki frontend.
Pengaturan frontend
Semua kode proyek kami yang terkait dengan frontend akan berlokasi di folder
src/ui . Ini akan terdiri dari 5 file:
app.js - Kode aplikasi preact.bootstrap.min.css - kode CSS untuk menata aplikasi (diambil langsung dari kerangka Bootstrap).favicon.ico - file favicon. Jika Anda mengembangkan aplikasi serius, Anda tidak dapat melakukannya tanpa file favicon yang baik.index.html adalah file HTML utama aplikasi satu halaman kami.preacthtm.js - kode perpustakaan Preact dan htm.
Pertama, letakkan file di folder, yang merupakan gaya, perpustakaan, dan ikon favicon:
curl "https://unpkg.com/htm@2.0.0/preact/standalone.js" > src/ui/preacthtm.js curl "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > src/ui/bootstrap.min.css curl "https://github.com/lmammino/fastify-preact-htm-boilerplate/blob/master/src/ui/favicon.ico?raw=true" > src/ui/favicon.ico
Sekarang buat file
src/ui/index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/bootstrap.min.css" /> <title>My awesome server time</title> </head> <body> <div id="app"></div> <!-- JavaScript --> <script src="/preacthtm.js"></script> <script src="/app.js"></script> </body> </html>
Kami memiliki halaman HTML yang sangat biasa di mana kami memuat semua sumber daya (CSS dan JS) dan membuat elemen
<div> kosong dengan
app pengenal, di mana kami akan menampilkan aplikasi kami selama pelaksanaan proyek.
Sekarang lihat kode aplikasi, yang seharusnya ada di file
src/ui/app.js :
/* htmPreact */ const { html, Component, render } = htmPreact class App extends Component { componentDidMount() { this.setState({ loading: true, time: null }) fetch('/api/time') .then(response => response.json()) .then(data => this.setState({ loading: false, time: data.time })) } render(props, state) { return html` <div class="container mt-5"> <div class="row justify-content-center"> <div class="col"> <h1>Hello from your new App</h1> <div> ${state.loading && html` <p>Loading time from server...</p> `} ${state.time && html` <p>Time from server: <i><font color="#999999">${state.time}</font></i> </p> `} </div> <hr /> <div> Have fun changing the code from this boilerplate: <ul> <li>UI code available at <code>/src/ui</code></li> <li>Server-side code available at <code>/src/server</code></li> </ul> </div> </div> </div> </div> ` } } render( html` <${App} /> `, document.getElementById('app') )
Hanya ada satu komponen stateful dalam aplikasi ini yang disebut
App . Keadaan komponen ini mencakup 2 variabel:
loading adalah variabel logis yang digunakan untuk menunjukkan apakah permintaan ke API server sedang dilakukan pada titik waktu tertentu untuk mendapatkan informasi tentang waktu server.time - string yang berisi informasi waktu terbaru yang diterima dari server.
Jika Anda terbiasa dengan Bereaksi, maka Anda dapat dengan mudah memahami kode di atas.
Menggunakan Preact dan htm, kita dapat membuat komponen dengan mendeklarasikan kelas yang memperluas kelas
Component bawaan.
Di kelas ini, kita bisa menggambarkan perilaku komponen menggunakan metode siklus hidup seperti
componentDidMount() , dan juga menggunakan metode yang berperilaku seperti metode
render() dari React.
Dalam kasus kami, segera setelah komponen dilampirkan ke halaman (metode
componentDidMount() ), kami menetapkan properti
loading status dan menjalankan permintaan API menggunakan
fetch .
Setelah permintaan selesai, kami menetapkan nilai properti status
time dan mengatur ulang properti
loading ke
false .
Metode
render() dipanggil secara otomatis setiap kali status komponen berubah atau ketika properti baru diteruskan ke sana. Dalam metode ini, kami menggambarkan komponen DOM menggunakan htm.
Pustaka htm memungkinkan Anda untuk menggambarkan node DOM menggunakan literal templat yang ditandai dengan tag-
html . Dalam literal templat kami, ekspresi dinamis mungkin ada, seperti yang kami gunakan untuk memeriksa status dan memutuskan apa yang akan ditampilkan jika aplikasi memuat data dari server, dan jika data sudah dimuat.
Perlu juga dicatat bahwa kita perlu membuat instance aplikasi dan menampilkannya pada halaman HTML. Ini dilakukan dengan menggunakan fungsi
render() dari objek global
htmPreact .
Sekarang pekerjaan pada aplikasi front-end selesai. Anda dapat me-restart server, pergi ke
localhost:3000 dan bereksperimen dengan apa yang baru saja kita buat. Misalnya, Anda dapat mengembangkan sendiri berdasarkan aplikasi ini. Dan ketika apa yang Anda buat tampaknya cukup menarik untuk ditunjukkan kepada orang lain, mungkin akan berguna bagi Anda untuk mengemas aplikasi Anda dalam wadah Docker.
Aplikasi kontainerisasi
Saya percaya bahwa cara terbaik untuk menunjukkan proyek kecil baru Anda kepada orang lain adalah dengan menggunakan kemampuan Docker untuk tujuan ini.
Berkat Docker, siapa pun yang mencoba menjalankan aplikasi Anda di rumah akan dibebaskan dari memikirkan apakah ia memiliki versi Node.js dan NPM yang sesuai, ia tidak perlu mengunduh kode sumber aplikasi untuk mengurusnya dengan memasukkan urutan perintah yang benar. , instal dependensinya dan mulai server.
Untuk mengemas aplikasi ke dalam wadah Docker, kita perlu membuat
Dockerfile sangat sederhana di folder root dari proyek kami:
FROM node:11-alpine WORKDIR /app COPY . /app RUN npm install --production EXPOSE 3000 CMD ["npm", "start"]
Di sini kami menjelaskan tindakan berikut:
- Gambar ini dibuat berdasarkan gambar Node.js 11, dibangun berdasarkan Alpine Linux.
- Semuanya dari folder saat ini disalin ke folder
/app wadah. - Setelah itu, kami menjalankan perintah
npm install untuk mengunduh dan menginstal dependensi. Menggunakan flag --production mengarah pada fakta bahwa hanya dependensi yang diperlukan untuk penyebaran proyek dalam produksi yang akan diinstal. Ini mempercepat pembuatan gambar jika proyek menggunakan banyak dependensi pengembangan. - Kami menunjukkan bahwa wadah harus memiliki pori terbuka 3000, di mana, secara default, server akan berfungsi.
- Pada akhirnya, kami menggambarkan sebuah perintah,
npm start , yang akan dieksekusi ketika wadah mulai. Dia meluncurkan aplikasi.
Untuk mengumpulkan gambar untuk wadah, jalankan perintah berikut:
docker build -t server-time .
Setelah beberapa detik, gambar akan siap dan Anda dapat memulai wadah:
docker run -it -p 3000:3000 server-time
-p memungkinkan Anda untuk mengkonfigurasi koneksi antara port kontainer 3000 dan port lokal 3000. Ini akan memungkinkan Anda untuk mengakses aplikasi kemas di
localhost:3000 .
Sekarang Anda siap untuk membagikan aplikasi Anda dengan orang lain. Untuk menjalankannya di lingkungan Docker, itu sudah cukup, asalkan Docker diinstal pada komputer, untuk menjalankan dua perintah di atas dalam foldernya.
Ringkasan
Pada artikel ini, kami berbicara tentang cara membuat lingkungan untuk pengembangan cepat aplikasi web menggunakan Fastify dan Preact. Selain itu, kami berbicara tentang cara berbagi aplikasi dengan orang lain menggunakan Docker.
Seperti disebutkan di atas, alat yang diusulkan dirancang untuk pembuatan prototipe cepat, jadi sekarang Anda mungkin bertanya-tanya apa yang hilang di sini untuk mengembangkan aplikasi nyata. Kemungkinan besar, ketika Anda berbicara tentang "aplikasi nyata", maksud Anda adalah fitur berikut:
- Kompilasi sumber daya dari bagian ujung depan aplikasi: pembuatan file yang dioptimalkan (bundel), mungkin menggunakan Webpack, Babel, atau alat lainnya.
- Routing di front-end aplikasi.
- Render server
- Sarana penyimpanan data permanen.
Semua kemungkinan untuk mengembangkan aplikasi nyata ini belum ditambahkan ke set teknologi yang dibahas di sini, jadi saya masih menganggapnya sebagai alat untuk mengembangkan prototipe. Saya yakin bahwa jika Anda menyukai apa yang Anda lihat, dan Anda menganggap semua ini sebagai dasar untuk aplikasi masa depan yang memecahkan masalah nyata, Anda dapat dengan mudah menemukan apa yang Anda butuhkan dan membuat aplikasi yang siap untuk Fastify dan Preact. rilis produksi.
Pembaca yang budiman! Bagaimana Anda membuat prototipe aplikasi web?
