Jamstack: Revolusi situs web statis yang meningkatkan pengembangan web

Jamstack adalah filosofi pengembangan web yang semakin populer yang bertujuan untuk mempercepat proses pengembangan web dan waktu pengunduhan halaman web. Menggambar dari gerakan devops dan teknik continuous integration / continuous delivery (CI / CD) yang menjadi norma di banyak organisasi, Jamstack meningkatkan teknik lama untuk membangun halaman web interaktif, mengalihkan eksekusi kode waktu muat dari server web dan menuju JavaScript dalam browser dan layanan eksternal yang diakses melalui antarmuka pemrograman aplikasi (API).

Apa itu Jamstack? Jamstack, sudah ditentukan

Jamstack adalah model aplikasi web berdasarkan tiga pilar, yang memberikan inisial dalam namanya: JavaScript, API, dan markup. Halaman web untuk situs Jamstack terdiri dari bahasa markup standar, sehingga dapat dibuat dan diuji di mana saja, tanpa ketergantungan pada server aplikasi atau teknologi sisi server seperti Node.js. Fungsi interaktif apa pun disediakan oleh kode JavaScript standar yang dijalankan di browser, yang membuat panggilan ke API yang dapat digunakan kembali melalui HTTPS untuk mendapatkan akses ke data eksternal atau fungsi lain yang tidak dapat dibangun ke dalam halaman web itu sendiri.

Untuk memahami mengapa filosofi Jamstack revolusioner, pertimbangkan LAMP stack, yang mencontohkan cara sebagian besar pengembang memikirkan pengembangan web selama 15 tahun terakhir. LAMP adalah singkatan dari Linux (OS yang menjalankan sebagian besar server web), Apache (perangkat lunak server yang berjalan pada mesin Linux tersebut), MySQL (database tempat penyimpanan informasi aplikasi web), dan PHP / Perl / Python (bahasa yang kode sisi server ditulis dalam). Saat Anda mengarahkan browser ke situs web berbasis LAMP, server web menjalankan kode sisi server yang menghasilkan halaman web dengan cepat, menggambar data sesuai kebutuhan dari database MySQL.

Arsitektur LAMP memungkinkan pembuatan situs web yang dinamis dan interaktif, tetapi juga membutuhkan server web yang kuat — dan semakin banyak lalu lintas yang didapat situs, semakin banyak daya komputasi di sisi server yang dibutuhkannya. Bahkan dengan server berfitur lengkap, halaman web dinamis dapat membutuhkan waktu lama untuk dibuat dan dimuat. Dalam dunia orang-orang dengan rentang perhatian yang pendek saat menjelajahi web di ponsel mereka, penundaan itu menjadi semakin tidak dapat diterima.

Jamstack lahir sebagai bagian dari gerakan "web statis", yang muncul pada pertengahan tahun 2010 sebagai reaksi terhadap model tradisional tentang cara kerja situs web. Untuk memahami Jamstack, Anda perlu memahami teknologi saat ini di balik  situs web statis.

Situs statis, generator situs statis, dan Jamstack

Jika Anda harus menjelaskan kepada seorang pemula yang lengkap bagaimana web bekerja, mungkin akan terjadi seperti ini: Di ​​suatu tempat di sistem file server web ada file HTML, dapat diakses oleh alamat HTTP, yang diunduh browser web dan kemudian ditafsirkan untuk membuat halaman web . Tapi itu deskripsi dari situs statis:  Ini mengasumsikan file HTML sudah ada saat browser web mencarinya. Seperti yang telah kita lihat, sebagian besar web selama dekade terakhir didominasi oleh situs dinamis, yang menghasilkan file HTML dengan cepat sebagai tanggapan atas permintaan web, sering kali berdasarkan parameter yang diteruskan ke server web melalui formulir atau di URL itu sendiri.

Pada masa-masa awal web, ketika laman web selalu statis, banyak pengembang web menulis kode HTML dengan tangan. Saat halaman web menjadi lebih kompleks, alat seperti Macromedia's Dreamweaver tiba, yang dapat menghasilkan halaman HTML statis tersebut secara terprogram. Ketika pergerakan web statis lepas landas pada pertengahan 2010-an, gelombang baru yang disebut generator situs statis mulai muncul, termasuk Gatsby, Hugo, dan Jeckyll. Tidak seperti alat WYSIWYG seperti Dreamweaver, generator situs statis digerakkan oleh baris perintah, dan dirancang untuk diintegrasikan dengan proses CI / CD. File HTML dibuat oleh alat, seringkali berdasarkan konten yang ditulis dalam Penurunan Harga, dan diunggah secara otomatis ke repositori kontrol versi seperti GitHub. Karena file-file ini ditandai siap untuk diproduksi, halaman statis di situs web langsung diperbarui secara otomatis.

Satu hal penting untuk diingat adalah bahwa statis dalam konteks ini tidak berarti bahwa ini adalah halaman web 1.0 sederhana yang tidak interaktif. Ingat, halaman ini dapat menyertakan JavaScript lanjutan yang dijalankan di browser dan membuat panggilan API ke database, fungsionalitas sisi server, atau fungsi tanpa server yang dihosting. Tetapi karena tidak ada eksekusi yang terjadi di server web itu sendiri, situs statis tidak memerlukan host web yang didukung industri lengkap dengan database. Banyak situs statis diterapkan ke jaringan pengiriman konten, atau CDN, tempat konten dicerminkan di beberapa server di seluruh dunia untuk dikirimkan dengan cepat ke pengguna di mana saja.

Mathieu Dionne, pimpinan pemasaran di Snipcart, menjelaskan hari-hari awal dunia baru situs statis ini dalam sebuah entri blog, dan menyebutkan bahwa sekitar tahun 2015, "para pendiri Netlify ... baru saja menemukan istilah 'Jamstack' untuk mengatasinya konotasi negatif dari 'web statis'. ”Dengan kata lain, kami telah menjelaskan proses Jamstack di seluruh bagian ini. Tapi sekarang kita perlu membahas secara singkat Netlify dan perannya dalam ekosistem.

Apa itu Netlify?

Netlify adalah perusahaan komputasi awan dan hosting web. Salah satu pendiri Netlify, Mathias Biilmann, menciptakan istilah Jamstack, dan layanan Netlify disesuaikan untuk pelanggan yang ingin membangun situs berdasarkan filosofi Jamstack.

Netlify mengklaim telah memecahkan masalah tertentu yang menahan situs statis, yaitu pembatalan cache. Situs web dinamis berbasis basis data dapat menghabiskan banyak sumber daya server, tetapi Anda dapat yakin bahwa mereka akan menyajikan versi terbaru situs web Anda kepada setiap pengunjung yang mampir. Karena situs web Jamstack sering kali dihosting di beberapa server CDN yang terdistribusi, pembaruan menjadi tidak mudah. Setiap server CDN memerlukan waktu mulai dari beberapa menit hingga jam untuk mengetahui bahwa versi cache situs tersebut tidak lagi valid. CDN Netfliy menyediakan pembatalan cache instan untuk file HTML untuk mengatasi masalah ini.

Tetapi Netlify bukan satu-satunya penyedia hosting di ruang Jamstack, dan tidak memiliki merek dagang atau kontrol kepemilikan apa pun atas istilah tersebut. Ada sejumlah solusi hosting dan penerapan Jamstack yang tersedia, dan sebagian besar penyedia cloud besar ikut serta, termasuk AWS, Google Firebase, dan Microsoft Azure.

Jamstack CMS

Jika Anda seseorang yang harus berurusan dengan situs web setiap hari, Anda tahu bahwa membuat dan menghosting situs web hanyalah permulaan. Anda juga memerlukan cara untuk membuat konten baru dan menambahkannya ke situs Anda. Karena orang yang akan melakukan itu biasanya bukan pemrogram, mereka membutuhkan alat yang ramah pengguna - yaitu, sistem manajemen konten, atau CMS. CMS tradisional, seperti WordPress, menawarkan UI back-end tempat Anda dapat memasukkan konten situs web, mengelola database tempat konten itu disimpan, dan membangun halaman web dinamis yang menyajikan konten tersebut sebagai tanggapan atas permintaan browser.

CMS untuk situs Jamstack bekerja secara berbeda, dan biasanya disebut sebagai tanpa head. Headless CMS menawarkan UI untuk memasukkan dan mengelola konten dan database atau cara lain untuk menyimpannya, tetapi tidak dengan sendirinya menghasilkan kode HTML untuk diurai oleh browser. Sebaliknya, halaman HTML statis situs menggunakan JavaScript untuk melakukan panggilan ke CMS API, dan CMS mengembalikan konten dalam format yang dapat diubah JavaScript menjadi halaman web.

Sistem ini secara menyeluruh memisahkan konten dari presentasi, yang tentu saja merupakan program yang ideal sejak lama. Karena CMS memiliki API yang dapat diakses, banyak halaman web dapat dengan mudah mengaksesnya. Misalnya, jika Anda membuat versi seluler, desktop, dan jam tangan pintar dari situs web Anda, semua versi ini dapat mengakses konten yang sama yang disimpan di CMS.

Netlify, seperti yang Anda duga, memiliki penawarannya sendiri di ruang ini, yang disebut NetlifyCMS, tetapi ada sejumlah penawaran lain yang tersedia; pengembang Nebojsa Radakovic memecahnya untuk Anda dalam entri blog. Ada banyak pendatang baru di daftar itu, serta satu nama yang sangat akrab. Meskipun kami menggunakan WordPress sebagai contoh CMS tradisional, WordPress dapat dijalankan sebagai CMS tanpa kepala untuk mendukung situs Jamstack juga.

Konferensi Jamstack

Netlify juga bekerja untuk membuat komunitas Jamstack dan mensponsori konferensi Jamstack. Perusahaan mengadakan acara di New York, London, dan San Francisco pada 2019, dan menyelenggarakan acara virtual pada Mei 2020. Sampai tulisan ini dibuat, Anda dapat mendaftar untuk acara San Francisco yang dijadwalkan pada 6-7 Oktober 2020, meskipun pandemi virus Corona masih membuat rencana konferensi gagal. 

Jika Anda menginginkan pembaruan, Anda dapat mengikuti konferensi di Twitter. Anda juga dapat melihat pembicaraan sebelumnya di saluran YouTube Jamstack Conf.

[Juga di: 6 JavaScript IDE terbaik | 10 editor JavaScript terbaik]

Tutorial jamstack

Ingin tahu lebih dalam? Lihat tutorial Jamstack ini yang akan memberi Anda pengalaman langsung dalam membangun situs Jamstack:

  • Pengembang David Neal memiliki tutorial pengantar yang bagus tentang membangun situs Jamstack, dimulai dengan sangat sederhana dan kemudian menjadi semakin kompleks. 
  • Di blog LogRocket, insinyur perangkat lunak Ogundipe Samuel memberikan pandangan mendalam, langkah demi langkah tentang cara membangun situs e-niaga berdasarkan prinsip Jamstack. 
  • Netlify menawarkan tutorial video berdurasi tiga jam lebih yang mencakup banyak hal dari dasar hingga topik yang lebih maju. 

Setelah Anda menguasai konsep dasar yang diuraikan di sini, Anda akan siap untuk mulai bekerja dengan pengembangan Jamstack dalam kehidupan profesional Anda. Selamat belajar!