Jamstack: Revolusi laman web statik menaikkan pembangunan web

Jamstack adalah falsafah pembangunan web yang semakin popular yang bertujuan untuk mempercepat proses pembangunan web dan masa muat turun halaman web. Mengambil dari pergerakan devops dan teknik integrasi / penyampaian berterusan (CI / CD) yang menjadi kebiasaan di banyak organisasi, Jamstack menggunakan teknik lama untuk membina halaman web interaktif, mengalihkan pelaksanaan kod waktu muat dari pelayan web dan ke arah JavaScript dalam penyemak imbas dan perkhidmatan luaran yang diakses melalui antara muka pengaturcaraan aplikasi (API).

Apa itu Jamstack? Jamstack, ditakrifkan

Jamstack adalah model aplikasi web berdasarkan tiga tiang, yang memberikan inisial dalam namanya: JavaScript, API, dan markup. Halaman web untuk laman Jamstack terdiri daripada bahasa markup standard, sehingga dapat dibina dan diuji di mana saja, tanpa bergantung pada pelayan aplikasi atau teknologi sisi pelayan seperti Node.js. Sebarang fungsi interaktif disediakan oleh kod JavaScript standard yang dijalankan di penyemak imbas, yang membuat panggilan ke API yang dapat digunakan semula melalui HTTPS untuk mendapatkan akses ke data luaran atau fungsi lain yang tidak dapat dimasukkan ke dalam laman web itu sendiri.

Untuk memahami mengapa falsafah Jamstack revolusioner, pertimbangkan tumpukan LAMP, yang menunjukkan cara pemikiran kebanyakan pembangun mengenai pembangunan web selama 15 tahun terakhir. LAMP bermaksud Linux (OS yang memberi kuasa kepada kebanyakan pelayan web), Apache (perisian pelayan yang berjalan pada mesin Linux tersebut), MySQL (pangkalan data di mana maklumat yang diperlukan oleh aplikasi web disimpan), dan PHP / Perl / Python (bahasa yang kod sisi pelayan ditulis dalam). Apabila anda mengarahkan penyemak imbas anda ke laman web berasaskan LAMP, pelayan web melaksanakan kod sisi pelayan yang menghasilkan halaman web dengan cepat, menarik data seperti yang diperlukan dari pangkalan data MySQL.

Senibina LAMP memungkinkan untuk mewujudkan laman web yang dinamik dan interaktif, tetapi ia juga memerlukan pelayan web yang kuat - dan semakin banyak lalu lintas laman web, semakin banyak kuasa pengkomputeran di sisi pelayan yang diperlukannya. Walaupun dengan pelayan yang lengkap, laman web dinamik memerlukan masa yang lama untuk membuat dan memuatkan. Dalam dunia orang dengan perhatian pendek melayari laman web di telefon mereka, penundaan itu menjadi semakin tidak dapat diterima.

Jamstack dilahirkan sebagai bagian dari gerakan "web statik", yang muncul pada pertengahan tahun 2010 sebagai reaksi terhadap model tradisional ini tentang bagaimana laman web harus berfungsi. Untuk memahami Jamstack, anda perlu memahami teknologi hari ini di sebalik  laman web statik.

Laman web statik, penjana laman web statik, dan Jamstack

Sekiranya anda harus menjelaskan kepada pemula yang lengkap bagaimana web berfungsi, ia mungkin seperti ini: Di ​​suatu tempat di sistem fail pelayan web terdapat fail HTML, dapat diakses dengan alamat HTTP, yang dimuat turun oleh penyemak imbas web dan kemudian menafsirkan untuk membuat halaman web . Tetapi itu adalah perihalan laman web statik:  Ia menganggap fail HTML sudah ada ketika penyemak imbas web mencarinya. Seperti yang telah kita lihat, sebahagian besar web selama satu dekad terakhir didominasi oleh laman web yang dinamis, yang malah menghasilkan fail HTML dengan cepat sebagai tindak balas kepada permintaan web, sering berdasarkan parameter yang dikirimkan ke pelayan web melalui borang atau di URL itu sendiri.

Pada masa-masa awal web, ketika halaman web selalu statik, banyak pembangun web menulis kod HTML dengan tangan. Apabila laman web bertambah kompleks, alat seperti Dreamromeaver Macromedia tiba, yang dapat menghasilkan halaman HTML statik tersebut secara terprogram. Ketika pergerakan web statik bermula pada pertengahan tahun 2010, gelombang baru yang disebut generator laman web statik mula muncul, termasuk Gatsby, Hugo, dan Jeckyll. Tidak seperti alat WYSIWYG seperti Dreamweaver, penjana laman web statik didorong oleh baris perintah, dan dirancang untuk disatukan dengan proses CI / CD. Fail HTML dihasilkan oleh alat, sering berdasarkan pada kandungan yang ditulis dalam Markdown, dan dimuat secara automatik ke repositori kawalan versi seperti GitHub. Oleh kerana fail-fail ini ditandakan siap untuk dikeluarkan, halaman statik di laman web langsung dikemas kini secara automatik.

Perkara penting yang perlu diingat adalah bahawa statik dalam konteks ini tidak bermaksud bahawa ini adalah halaman web 1.0 yang mudah dan tidak interaktif. Ingat, halaman ini dapat menyertakan JavaScript lanjutan yang dijalankan di penyemak imbas dan membuat panggilan API ke pangkalan data, fungsi sisi pelayan, atau fungsi tanpa pelayan yang dihoskan. Tetapi kerana tidak ada pelaksanaan yang berlaku di pelayan web itu sendiri, laman web statik tidak memerlukan hos web berkuasa industri lengkap dengan pangkalan data. Banyak laman web statik dikerahkan ke jaringan pengiriman konten, atau CDN, di mana kandungan dicerminkan di beberapa pelayan di seluruh dunia agar dapat disampaikan dengan cepat kepada pengguna di mana saja.

Mathieu Dionne, peneraju pemasaran di Snipcart, menggambarkan hari-hari awal dunia baru yang statik dalam catatan blog, dan menyebutkan bahawa sekitar tahun 2015, "pengasas Netlify ... baru saja muncul dengan istilah 'Jamstack' untuk mengatasi konotasi negatif 'web statik.' "Dengan kata lain, kami telah menerangkan proses Jamstack di bahagian ini. Tetapi sekarang kita perlu membincangkan secara ringkas Netlify dan peranan mereka dalam ekosistem.

Apa itu Netlify?

Netlify adalah syarikat pengkomputeran awan dan web hosting. Pengasas Netlify Mathias Biilmann mencipta istilah Jamstack, dan perkhidmatan Netlify disesuaikan untuk pelanggan yang ingin membina laman web berdasarkan falsafah Jamstack.

Netlify mendakwa telah memecahkan masalah tertentu yang menahan laman web statik, iaitu pembatalan cache. Laman web dinamik yang didorong oleh pangkalan data mungkin memakan banyak sumber pelayan, tetapi anda boleh yakin bahawa mereka akan menyediakan versi terkini laman web anda kepada mana-mana pelawat yang berhenti. Kerana laman web Jamstack sering dihoskan di pelayan CDN yang diedarkan, kemas kini kurang mudah. Dari beberapa minit hingga beberapa jam, setiap pelayan CDN dapat mengetahui bahawa versi laman webnya yang disimpan dalam cache tidak lagi sah. CDN Netfliy memberikan pembatalan cache segera untuk fail HTML untuk mengatasi masalah ini.

Tetapi Netlify bukan satu-satunya penyedia hosting di ruang Jamstack, dan ia tidak mempunyai apa-apa jenis cap dagang atau kawalan proprietari untuk jangka masa tersebut. Terdapat sebilangan besar penyelesaian hosting dan penyebaran Jamstack yang tersedia, dan kebanyakan penyedia cloud besar mengambil tindakan, termasuk AWS, Google Firebase, dan Microsoft Azure.

Jamstack CMS

Sekiranya anda seorang yang berurusan dengan laman web dari hari ke hari, anda tahu bahawa membina laman web dan dihoskan hanyalah permulaan. Anda juga memerlukan cara untuk membuat kandungan baru dan menambahkannya ke laman web anda. Oleh kerana orang yang akan melakukan itu biasanya bukan pengaturcara, mereka memerlukan alat yang mesra pengguna - iaitu, sistem pengurusan kandungan, atau CMS. CMS tradisional, seperti WordPress, menawarkan UI back-end di mana anda boleh memasukkan kandungan laman web, menguruskan pangkalan data di mana kandungan itu disimpan, dan membina laman web dinamik yang menyajikan kandungan itu sebagai tindak balas kepada permintaan penyemak imbas.

CMSes untuk laman Jamstack berfungsi secara berbeza, dan biasanya disebut sebagai tanpa kepala. CMS tanpa kepala menawarkan UI untuk memasukkan dan mengurus kandungan dan pangkalan data atau cara lain untuk menyimpannya, tetapi tidak menghasilkan kod HTML untuk penyemak imbas penyemak imbas. Sebaliknya, halaman HTML statik laman web menggunakan JavaScript untuk membuat panggilan ke API CMS, dan CMS mengembalikan kandungan dalam format yang JavaScript dapat berubah menjadi laman web.

Sistem ini secara menyeluruh memisahkan kandungan dari persembahan, yang tentunya merupakan ideal pengaturcaraan lama. Kerana CMS mempunyai API yang dapat diakses, banyak halaman web dapat mengaksesnya dengan mudah. Sebagai contoh, jika anda telah membuat versi mudah alih, desktop, dan smartwatch yang terpisah dari laman web anda, semua versi ini dapat mengakses kandungan yang sama yang tersimpan di CMS.

Netlify, seperti yang anda harapkan, mempunyai tawaran mereka sendiri di ruang ini, yang disebut NetlifyCMS, tetapi ada sejumlah tawaran lain yang tersedia; pemaju Nebojsa Radakovic memecahkannya untuk anda dalam catatan blog. Terdapat banyak pendatang baru dalam senarai itu, dan juga satu nama yang sangat dikenali. Walaupun kami menggunakan WordPress sebagai contoh CMS tradisional, WordPress dapat dijalankan sebagai CMS tanpa kepala untuk mengaktifkan laman Jamstack juga.

Persidangan Jamstack

Netlify juga berfungsi untuk mewujudkan komuniti Jamstack dan menaja persidangan Jamstack. Syarikat itu mengadakan acara di New York, London, dan San Francisco pada tahun 2019, dan menjadi tuan rumah acara maya pada bulan Mei 2020. Pada penulisan ini, anda boleh mendaftar untuk acara San Francisco yang dijadualkan pada 6-7 Oktober 2020, walaupun wabak coronavirus masih mempunyai rancangan persidangan jatuh di udara. 

Sekiranya anda mahukan kemas kini, anda boleh mengikuti persidangan di Twitter. Anda juga boleh melihat perbincangan yang lalu di saluran YouTube Jamstack Conf.

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

Tutorial Jamstack

Ingin pergi lebih mendalam? Lihat tutorial Jamstack ini yang akan memberi anda pengalaman langsung dalam membina laman web Jamstack:

  • Pembangun David Neal mempunyai tutorial pengantar yang baik untuk membina laman web Jamstack, bermula dengan sangat sederhana dan kemudian menjadi semakin kompleks. 
  • Di blog LogRocket, jurutera perisian Ogundipe Samuel memberikan tinjauan mendalam dan terperinci dalam membangun laman web e-commerce berdasarkan prinsip Jamstack. 
  • Netlify menawarkan tutorial video selama tiga jam yang merangkumi banyak perkara dari asas hingga topik yang lebih maju. 

Setelah anda menguasai konsep asas yang dinyatakan di sini, anda akan bersedia untuk mula bekerja dengan pengembangan Jamstack dalam kehidupan profesional anda. Selamat belajar!