Pengenalan kepada Jamstack: Membina laman web yang selamat, berprestasi tinggi

Jamstack: Membina seni bina moden untuk laman web yang lebih cepat, selamat dan berskala

gambar yang disediakan oleh: netlify

Pada tahun -tahun kebelakangan ini, teknologi pembangunan web telah berubah dengan setiap hari berlalu. Artikel ini akan memperkenalkan seni bina Jamstack dan menjelaskan konsep dan kelebihannya.

Pada masa lalu, seni bina lampu menguasai perkembangan laman web dinamik. Seterusnya, arsitektur min meletakkan asas bagi generasi baru aplikasi web. Hari ini, dengan kebangkitan API dan komponen yang boleh diguna semula, laman web statik telah menjadi trend lagi. Ini adalah cara untuk "kembali ke asas", tetapi tidak betul -betul.

Poin teras:

Jamstack adalah seni bina pembangunan web moden yang membantu mewujudkan laman web yang lebih cepat, lebih selamat dan lebih berskala. Ia mewakili gabungan JavaScript (J), API (A) dan Markup (M), dan gaya kerjanya telah memberi inspirasi kepada banyak pemaju di seluruh dunia.
Jamstack menukar laman web dinamik ke laman web statik, yang meningkatkan kelajuan, meningkatkan keselamatan dan meningkatkan SEO. Ini boleh dilakukan dengan membuat artikel dan halaman menggunakan penjana tapak statik, menyegerakkan kandungan statik dengan repositori kod, dan mengautomasikan proses penempatan.
Jamstack menggunakan CDN untuk penggunaan global, saluran paip automatik dan halaman pra-diberikan untuk meningkatkan kelajuan berbanding pembangunan stack tradisional. Ia juga membolehkan decoupling front-end dan back-end melalui API dan microservices, dan menggunakan tumpukan teknologi tunggal-JavaScript.

Apa itu Jamstack?

Jamstack adalah seni bina yang mentakrifkan semula web moden untuk membina laman web yang lebih cepat dan lebih selamat. Laman -laman ini lebih berskala dan lebih mudah (lebih menyeronokkan) untuk membangun dan mengekalkan dengan set alat yang betul.

mari kita memecahkan istilah ini:

J bermaksud JavaScript.

Ia telah berkembang sejak Netscape melancarkan JavaScript pada tahun 1995. Dengan perpustakaan responsif dan progresif, anda boleh merancang aplikasi web yang berkelakuan hampir sama dengan aplikasi mudah alih.
• A bermaksud API.
Daripada menulis semua ciri sendiri, anda boleh bergantung kepada pihak ketiga untuk mengendalikan sejumlah besar tugas.
• M bermaksud markup.
Anda boleh menggunakan semula komponen yang dibangunkan atau membuat komponen baru yang lebih mudah dikekalkan.
• Adakah ini hanya gembar -gembur?

ya sedikit sebanyak. Istilah "Jamstack" (asalnya digabungkan sebagai Jamstack) dicipta oleh Netlify untuk mempromosikan "platform semua pusingan untuk mengautomasikan projek web moden." Prinsip -prinsip di sebalik Jamstack tidak sepenuhnya baru, kerana komponen web dan API telah wujud untuk beberapa waktu.

tetapi sangat mirip dengan apa yang Ajax (JavaScript Asynchronous dan XML) dicipta oleh syarikat lain, Adaptive Path, pada tahun itu - walaupun XMLHTTPREQUEST (XHR) API yang menjadikan Ajax mungkin juga wujud untuk sementara waktu, kedua -dua Ajax dan Jamstack ia adalah Peningkatan yang menyegarkan kepada falsafah yang sedia ada dan mempunyai tujuan yang sah yang telah diterima dengan cepat oleh masyarakat. Hype ini wajar: cara kerja ini telah memberi inspirasi kepada banyak pemaju di seluruh dunia.

laman web statik?

"Laman Web Statik" adalah bertentangan dengan "Laman Web Dinamik", bukan? Jadi, bagaimanakah kita dapat menyediakan interaksi yang kaya dan dinamik menggunakan fail HTML yang mudah? Jawapannya ialah JavaScript.

JavaScript telah banyak berubah sejak perang penyemak imbas pertama, dan dengan kemunculan node.js dan kemunculan perpustakaan seperti React, Angular dan Vue.js, ia telah menyatukan dirinya sebagai status bahasa pengaturcaraan sejagat. Kemungkinan merancang antara muka pengguna lanjutan (UIS) tidak berkesudahan.

Sudah tentu, JavaScript bukanlah Panacea. Anda kemungkinan besar tidak akan menggunakannya untuk analisis data atau AI. Tetapi untuk pembangunan web tidak ada kaitan dengan API yang tidak dapat anda lakukan dengan kaedah JavaScript, kerana kemungkinan besar seseorang telah mencipta microservice untuk ini.

Dan jika anda dapat merangkum semua proses dan markup ini ke dalam komponen yang boleh diguna semula -anda boleh memasangkan pada bila -bila masa apabila anda memerlukan ciri tertentu -maka anda boleh menjimatkan jam kerja setiap kali.

Ini adalah stack J · a · m: JavaScript, API, tag.

decoupling, tanpa kepala, mikroservis, tanpa pelayan ... maaf, apa ini? Semua ini adalah topik panas dalam pembangunan web, mereka berkait rapat, tetapi tidak sama. Anda akan mendengar syarat -syarat ini dengan kerap, jadi mari kita jelaskan sebahagian daripada mereka dari awal.

gandingan dan decoupling dan tanpa kepala

digabungkan

merujuk kepada kandungan laman web yang dibuat, diuruskan, dan disimpan di belakang laman web (di mana pangkalan data terletak, seperti Panel Admin WordPress). Kandungan ini kemudian diekstrak dari backend dan diwakili dalam penyemak imbas melalui antara muka depan (seperti templat WordPress). Untuk beberapa tahap, aplikasi "digabungkan" secara tradisinya "stack penuh", dan backend dan frontend adalah aspek yang berbeza dari aplikasi yang sama. Sebaliknya, decoupling bermaksud bahawa backend dan frontend diuruskan secara berasingan - ini bermakna bahawa pangkalan data dan alat pengurusan akan ditempatkan di satu pelayan, sementara frontend akan ditempatkan di pelayan lain . Sudah tentu, medium diperlukan untuk menyambung kedua -duanya, biasanya API. Selain itu, sejak backend kini sebenarnya terpisah dari frontend, mungkin terdapat beberapa frontends di lokasi yang berbeza! (Fikirkan tentang kedai depan yang berbeza menggunakan enjin yang sama, seperti Shopify.)

Secara ringkasnya, perisian

tidak mempunyai lapisan depan atau pembentangan sama sekali. Sebagai contoh, CMS tanpa kepala boleh menjana kandungan statik dan menolaknya di mana sahaja: aplikasi mudah alih, peranti IoT, laman web statik. Diakui, ini juga merupakan keadaan "decoupling", tetapi di sini anda mungkin tidak memerlukan API. Fikirkan enjin WordPress yang mengeksport jawatan sebagai fail HTML statik untuk perkhidmatan: Ini tidak kepala. Malah, anda kini berada di halaman yang dihasilkan dengan cara ini.

monobody (digabungkan dengan ketat) dan microservices (longgar digabungkan)

hanya meletakkan, monotype boleh ditakrifkan sebagai perisian yang dibina secara keseluruhan. Contohnya termasuk aplikasi mudah alih, kebanyakan aplikasi yang boleh dipasang pada komputer anda, dan aplikasi web seperti WordPress. Aplikasi ini masih boleh mempunyai "modul" dalaman atau "komponen", tetapi kami mengatakan ini digabungkan dengan ketat kerana mereka adalah bahagian penting aplikasi, tanpa mereka, aplikasi itu tidak akan berfungsi. Sebaliknya, komponen perisian yang dilengkapi dengan longgar berfungsi lebih seperti plugin yang boleh dikeluarkan atau diganti, dan fungsi mungkin berubah, tetapi teras aplikasi masih boleh berfungsi. Prinsip ini membolehkan fungsi "penyumberan luar" melalui API pihak ketiga (biasanya dirujuk sebagai "microservices") - kerana mereka menyediakan ciri -ciri kebolehaksesan (saiz semula imej, log masuk, penyimpanan) yang tidak semestinya penting untuk aplikasi.

pengkomputeran tanpa pelayan dan tradisional

sahih, "tanpa pelayan" adalah sedikit salah faham. Tidak kira apa jenis kerja pengkomputeran yang anda lakukan, pelayan akan terlibat. Walau bagaimanapun, cara anda mengakses dan menguruskan pelayan anda mungkin sangat berbeza. Dalam model tradisional , anda mungkin mempunyai pelayan fizikal sebenar (kadang -kadang dipanggil logam telanjang), atau pelayan peribadi maya di mana sumber diperuntukkan kepada anda -dan pengguna lain -dalam pelayan fizikal. Sumber adalah terhad, dan sama ada anda menggunakan 100% sumber atau tidak, anda perlu membayarnya seolah -olah anda menggunakannya.

Dalam model tanpa pelayan

, banyak pelayan disambungkan antara satu sama lain, menyediakan sumber yang besar. Anda hanya mengeluarkan sumber yang diperlukan apabila diperlukan dan skala mereka seperti yang diperlukan (naik dan turun). Anda tidak boleh memastikan bahawa mana -mana pelayan fizikal adalah milik anda - anda hanya tahu di mana sumbernya datang.

Model tradisional

Model Serverless

pelayan fizikal dengan sumber terhad Kolam Sumber Tanpa Had terdedah kepada kegagalan (seperti kegagalan cakera keras) lebih banyak seni bina yang boleh dipercayai*

Skalabiliti terhad Skalabiliti Tanpa Had Bayar semua yuran, termasuk perkhidmatan terbiar membayar penggunaan (bayar atas permintaan) mudah dan mudah digunakan perlu belajar dan melaksanakan ** Sila ambil perhatian bahawa cakera keras, CPU dan kegagalan cip memori masih akan berlaku. Tetapi kerana sumber -sumber diperuntukkan secara telus, anda tidak akan melihat walaupun perkakasan gagal dan digantikan. Contoh praktikal jamStack Terdapat banyak perkara, terutamanya jika anda tidak biasa dengan konsep -konsep ini. Oleh itu, mari kita berehat dari teori dan lihat beberapa aplikasi praktikal Jamstack dalam kehidupan sebenar.

Kajian Kes 1: Tukar WordPress ke laman web statik dengan kelajuan 10x

Jika statik adalah pilihan terbaik, maka apa yang lebih baik daripada menukar blog WordPress (WP) yang dinamik ke blog statik? Dengan berbuat demikian, kami akan mengurangkan kelajuan pemuatan halaman dan latensi dengan sekurang -kurangnya urutan magnitud, meningkatkan keselamatan, dan meningkatkan SEO kami pada masa yang sama. Singkatnya, prosesnya adalah seperti berikut:

Buat artikel dan halaman dari WP menggunakan penjana tapak statik (SSG), tetapi dalam format statik (teks, markdown, html).

Kandungan statik Synch dengan repositori pada GitHub, Gitlab, atau Bitbucket.
Automatikkan proses penempatan supaya setiap kali perubahan repositori kod, perubahan akan segera dalam talian ke CDN global.
Bersantai, nikmati hosting percuma, mempunyai laman web yang selamat dan cepat dan penggunaan automatik. ?
4. tetapi ...

Sudah tentu, ini menimbulkan banyak masalah:

Apa yang harus saya lakukan dengan panel pengurusan?

Apa yang perlu dilakukan dengan kategori dan suapan RSS?
bagaimana saya menguruskan kandungan sekarang?
Apa yang perlu dilakukan dengan bahagian komen dan surat berita?
• Pada ketika ini, anda boleh mengucapkan selamat tinggal kepada panel admin WP, kerana dari sekarang, anda akan menggunakan SSG untuk menjana kandungan. Malah, SSG seperti Jekyll direka khusus untuk membina blog, manakala SSG seperti Gatsby.js sudah mempunyai semua ciri yang disertakan.

Menguruskan kandungan (seperti mengubah suai jawatan sedia ada) adalah di mana CMS tanpa kepala dimainkan. Untuk komen dan surat berita, adakah anda sudah menggunakan API luaran (seperti disqus dan mailchimp)?

bagaimana anda sebenarnya melakukannya?

Kami tidak dapat menutup selok-belok SSG dan CMS tanpa kepala di sini, tetapi sila perhatikan susulan siri ini. Kami akan menyediakan panduan langkah demi langkah untuk memindahkan laman web WordPress.

Kajian Kes 2: Hosting Laman web statik secara percuma dengan saluran paip automatik

Dalam komuniti Jamstack, anda akan sering mendengar "percuma" - bersyukur, ia tidak percuma, kerana

anda masih perlu memberitahu kami nombor kad kredit anda

secara percuma.

Singkatnya, prosesnya adalah seperti berikut:

Dalam kes ini, kami akan mengambil laman web statik kami (mis., Blog yang kami berhijrah dalam Kajian Kes 1) dan meletakkannya dalam talian:

Sediakan repositori GitHub, Gitlab, atau Bitbucket.

Deploy untuk Netlify, Gitlab Pages, atau GitHub Pages.

Pada ketika ini, setiap perubahan ke repositori secara automatik akan mencetuskan penempatan baru (melalui webhook) dan boleh dilancarkan kembali dengan sangat anggun jika ada yang salah.
Mengapa syarikat menyediakan perkhidmatan ini secara percuma?
overhead meletakkan fail HTML pada CDN yang digunakan adalah kecil. Ingat, tiada pengiraan sebenar yang terlibat, tiada rendering PHP terlibat. Kecuali anda menjadi tuan rumah laman web yang sangat popular yang menggunakan banyak jalur lebar, syarikat tidak keberatan menawarkan beberapa perkhidmatan hosting. Melakukannya boleh membawa mereka publisiti yang baik.

Syarikat juga akan mengunci anda dengan memberikan banyak percuma. Apabila anda memerlukan perkhidmatan lanjutan (anda memerlukannya jika perniagaan anda berkembang), anda sudah bekerja dengan mereka. Ia adil - dan, pada masa itu, anda perlu membangunkan penyelesaian sementara untuk menyelesaikan masalah anda atau menggunakan perkhidmatan untuk masa berbayar.

bagaimana anda sebenarnya melakukannya?

Netlify atau GitHub/Gitlab adalah sangat mudah dan memerlukan usaha yang minimum. (Walau bagaimanapun, kita akan masuk ke dalam proses secara terperinci dalam artikel berikut.)

Perbandingan antara Jamstack dan Pembangunan Stack Penuh

mari kita lihat bagaimana pendekatan baru ini dibandingkan dengan lampu atau tumpuan bermakna:

LAMP/MEAN Stack Jamstack

pelayan web menjalankan laman web penyebaran global ke CDN muat naik ftp/ssh, mulakan pelayan Line Assembly Automation Running Page Prerender halaman untuk meningkatkan kelajuan Aplikasi monobody (seperti WordPress) API dan microservices (decoupling front-end/back-end) stack penuh (bahasa depan dan backend) stack berteknologi tunggal ("JavaScript di mana -mana")

apa lagi yang boleh anda lakukan dengan jamStack?

Harap anda telah mempelajari manfaat mewujudkan laman web pada masa ini. Tetapi anda masih boleh ragu -ragu tentang bagaimana untuk melaksanakan operasi yang paling asas tanpa pemprosesan backend, seperti log masuk pengguna dan menguruskan atau menyimpan kandungan dinamik tanpa pangkalan data relasi (RDBMS).

Berikut adalah beberapa contoh lain yang boleh anda lakukan dengan jamStack:

Melaksanakan pangkalan data tanpa pelayan menggunakan laman web statik
identiti sebagai perkhidmatan (idaas): Pengesahan tanpa statik
sistem pengurusan kandungan tanpa kepala
menggunakan fungsi tanpa pelayan di laman web statik
Pengurusan bentuk pelbagai guna
Pemprosesan pemberitahuan multi-platform
keranjang belanja tanpa kepala
carian responsif

Kesimpulan

Perkembangan perkara tidak dapat dielakkan, terutamanya dalam bidang IT. Sebelum ini ia adalah timbunan lampu, maka timbunan min. Kini ia adalah Jamstack, dan dalam masa lima hingga sepuluh tahun ia akan menjadi sesuatu yang lain. Lebih baik menerima perubahan ini dan menjadikannya sendiri!

Pembelajaran cara -cara baru untuk melakukan sesuatu mungkin terdengar rumit, tetapi ia juga dapat menghidupkan semula semangat anda untuk pembangunan. Anda mungkin mendapati diri anda menghabiskan lebih sedikit masa mengekalkan pelayan dan bimbang tentang isu keselamatan. Anda mungkin mendapati bahawa pembangunan memerlukan kurang usaha dan pelanggan anda lebih berpuas hati. Anda mungkin lebih kompetitif (dan dapat meminta kenaikan) kerana ini. ?

Asas Jamstack

Sila ikuti lebih banyak artikel mengenai topik ini. Walaupun kami telah memperkenalkan Jamstack selama bertahun -tahun, ia telah menjadi disiplin dan amalan bebas. Kami akan memberikan anda tutorial yang anda perlukan untuk menjadi profesional jamStack dan mengemas kini dalam indeks pada halaman ini. Anda juga boleh dikemas kini dengan suapan RSS atau media sosial kami.

Asas Jamstack

• Pengenalan kepada Jamstack: Membina laman web yang selamat, berprestasi tinggi
• Jamstack Tools, API dan Perkhidmatan: Perbandingan Komprehensif
• cara menggunakan saluran paip automatik untuk menjadi tuan rumah laman web statik secara percuma
• bagaimana untuk berhijrah dari WordPress ke penjana tapak statik

Jamstack Tools

• Gatsby Bermula: Bina laman web statik pertama anda
• pemula Eleventy

dan lebih banyak kerja yang berterusan.

Soalan Lazim mengenai Jamstack

Apa itu Jamstack? Jamstack bermaksud "JavaScript, API, dan Tags". Ini adalah seni bina untuk membina laman web dan aplikasi web, yang menekankan decoupling front-end dari back-end untuk prestasi yang lebih baik, keselamatan, dan pengalaman pemaju.

Bagaimana Jamesstack berbeza daripada pembangunan web tradisional? Dalam pembangunan web tradisional, pelayan bertanggungjawab untuk menghasilkan HTML secara dinamik dalam setiap permintaan. Sebaliknya, Jamstack pra-membina halaman semasa proses membina, secara langsung menyediakan aset statik kepada pelanggan, dan menggunakan API untuk melaksanakan fungsi dinamik.

Apakah prinsip utama seni bina jamStack? Prinsip-prinsip utama Jamstack termasuk pembangunan pra-penanaman, pembangunan API-centric, dan penggunaan rangkaian penyampaian kandungan global (CDN). Pre-rendering melibatkan menjana HTML statik semasa fasa binaan, manakala API mengendalikan fungsi dinamik.

Apakah faedah menggunakan Jamstack? Jamstack menyediakan banyak faedah seperti prestasi yang lebih baik kerana penjanaan tapak statik, meningkatkan keselamatan dengan mengurangkan permukaan serangan pelayan, dan berskala mudah dengan CDN. Di samping itu, ia sering membawa kepada pengalaman pemaju yang lebih baik.

Bolehkah saya menggunakan fungsi pelayan dalam aplikasi jamStack saya? Ya, aplikasi Jamstack dapat memanfaatkan fungsi pelayan-pelayan melalui fungsi tanpa pelayan atau API. Fungsi tanpa pelayan membolehkan anda melaksanakan kod pelayan sebagai tindak balas kepada peristiwa, menyediakan fungsi dinamik sambil mengekalkan manfaat penghantaran tapak statik.

Adakah Jamstack sesuai untuk semua jenis laman web? Jamstack sesuai untuk pelbagai laman web, dari laman blog dan pemasaran mudah ke aplikasi web yang kompleks. Walau bagaimanapun, kebolehgunaannya bergantung kepada keperluan khusus projek dan keperluan untuk pemprosesan sisi pelayan masa nyata.

Atas ialah kandungan terperinci Pengenalan kepada Jamstack: Membina laman web yang selamat, berprestasi tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!