Tumpukan teknologi web baru saya untuk tahun 2020

Ingat hari-hari ketika tumpukan teknologi web itu sederhana? Kapan tingkat tumpukan ini dapat ditunjuk dalam bentuk pengurangan empat huruf seperti LAMP, LEMP atau LEPP? Ketika semua yang diperlukan untuk membuat dan memelihara situs dikurangi menjadi perangkat keras yang sepenuhnya biasa, untuk beberapa perangkat lunak open source, dan untuk bertahan dalam mencapai tujuan?

Situs sukses pertama saya, sekarang merupakan proyek lama tahun 1999, dibuat menggunakan teknologi yang dapat dihitung dengan satu tangan: HTML4, CSS2, JavaScript3 dan Apache 1.1. Semua ini berputar pada server dengan Linux 2.0. Situs ini mencakup 38.000 halaman. Dan hari ini, setelah 20 tahun, dia masih menerbitkannya .



Sejak itu, semuanya telah berubah. Ini juga berlaku untuk tumpukan teknologi web. Sekarang mereka sama sekali tidak sama seperti sebelumnya.

Penulis artikel, terjemahan yang kami terbitkan hari ini, ingin berbicara tentang bagaimana ia pindah dari tumpukan penuh ke tumpukan 2020. Beberapa teknologi secara tak terduga menjadi favorit selama perjalanan ini, dan beberapa kehilangan daya tarik sebelumnya.

Stack Web 2020

2020 adalah awal dekade baru. Inilah saatnya untuk berbicara tentang tumpukan teknologi web baru.

Seperti apa bentuk tumpukan 2020? Saya harus mengatakan bahwa ini sangat dipengaruhi oleh apa yang coba dicapai oleh pengembang situs. Memilih level yang tepat sangat tergantung pada tingkat skalabilitas yang diperlukan untuk proyek.

Saya sangat tertarik pada situs web kecil. Mereka yang merasa nyaman di server virtual. Situs-situs ini tidak memerlukan load balancers atau penyimpanan data yang persisten. Ini adalah ceruk CMS yang telah lama ditempati WordPress. Tetapi pada intinya semua ini bukan semacam server minimalis. Sebaliknya, kita berbicara tentang suatu sistem yang dapat menahan arus lalu lintas yang konstan tanpa perlu secara otomatis meningkatkan kekuatannya selama jam sibuk.

Sekarang untuk pengembangan dan dukungan proyek di bidang yang saya minati, saya menggunakan tumpukan teknologi yang terdiri dari 12 level.

▍1. Penyedia cloud

Basis tumpukan saya adalah penyedia cloud yang memperhitungkan kebutuhan mereka yang terbiasa mengatur lingkungan di mana proyek web mereka dijalankan. Saya menggunakan server saya sendiri sampai biaya dukungan mereka menjadi terlalu tinggi. Menyewa ruang di rak server, alamat IP khusus, memastikan bandwidth yang diperlukan ... Semua ini berkontribusi pada biaya bulanan server fisik. Tetapi ransomware yang sebenarnya adalah biaya listrik. Penyedia cloud jauh lebih murah daripada $ 1,25 per hari yang saya kirim ke pemasok listrik. Menolak pengeluaran seperti itu membuat saya bisa menghemat ratusan dolar setahun.

▍2. Distribusi Fedora Linux dengan SELinux

Keamanan adalah hal yang benar-benar mengganggu kita semua. SELinux dapat dibandingkan dengan sistem keamanan yang kuat yang berjalan di Linux. Jika kita menambahkan iptables-firewall yang terkonfigurasi dengan baik, itu akan memungkinkan pemilik situs untuk tidur nyenyak di malam hari. Jika Anda tidak yakin perlu semua ini, lakukan percobaan berikut. Menyebarkan server baru di penyedia cloud favorit Anda dan menonton bagaimana itu akan diserang segera. Saya melihat bagaimana serangan brute force pada server baru dengan upaya masuk SSH dimulai kurang dari 10 menit setelah mereka dibuat.

▍3. Layanan Baca Baca Server Server

Saya menggunakan server web Read Write Serve dengan sertifikat TLS dari LetsEncrypt. Saya dulu penggemar Apache, hanya butuh beberapa menit untuk membuat dan meluncurkan situs web baru. Tetapi karena saya beralih dari PHP ke JavaScript, saya harus melupakan Apache. Server Express bagi saya merupakan alat yang sangat sederhana, tetapi hanya sampai saya mencoba mereproduksi semua fungsi yang diberikan oleh Apache kepada saya. Kita berbicara tentang mekanisme koordinasi konten, tentang caching bersyarat, tentang kompresi data, tentang penulisan ulang URL untuk SEO, tentang CORS, tentang kebijakan perlindungan konten. Akibatnya, saya beralih ke server Read Write Serve, di mana semua fitur ini ada secara default.

▍4. Aplikasi Runtime Node.js

Lingkungan Node.js bertanggung jawab atas logika aplikasi yang berjalan di server. Ada perasaan bahwa dalam ekosistem NPM ada paket untuk semua kesempatan. Oleh karena itu, tugas mengumpulkan dari paket yang tersedia apa yang saya butuhkan dengan tepat dan meluncurkan semua ini pada Baca Tulis Melayani ternyata sederhana dan jelas. Untuk mengatur pekerjaan semua yang diperlukan untuk proyek web modern, Anda tidak perlu melakukan upaya berlebihan. Ini mengirim email, bekerja dengan layanan pembayaran, mengakses database, dan yang lainnya, menyiratkan bekerja dengan API server.

▍5. Database MariaDB

Saya menggunakan server database MariaDB. Ini adalah fork dari MySQL yang diberi nama baru dan dikuasai oleh komunitas open source. Ketika saya perlu menyimpan data JSON yang tidak terstruktur, saya menggunakan PostgreSQL. Faktanya adalah ini memungkinkan saya untuk mengeksekusi permintaan langsung pada properti JSON tertentu. Ini sedikit seperti MongoDB, tetapi berdasarkan sintaks SQL yang sudah dikenal.

▍6. HTTP / 2

Saya mengandalkan kemampuan HTTP / 2 dengan koneksi terus-menerus dan stream multiplexing untuk berkomunikasi antar bagian aplikasi. Ini adalah dua tambahan pada protokol HTTP / 1.1 yang terhormat. mengubah pendekatan saya pada pembentukan dokumen. Pertama, masalah pemblokiran awal antrian telah hilang. Akibatnya, kebutuhan untuk daftar sprite telah menghilang bahkan jika saya memiliki puluhan gambar kecil. Kedua, sekarang tidak perlu mengoptimalkan file JavaScript dan CSS dengan menggabungkannya ke dalam bundel. Setelah koneksi client-server dibuat, semua file kecil ini ditransfer tanpa gangguan melalui koneksi ini.

▍ 7. Template HTML Menggunakan Frase Biru

Blue Phrase adalah sistem template yang memungkinkan Anda untuk secara akurat menggambarkan struktur HTML dalam bentuk yang ringkas. Bagi saya, waktu hash kode HTML yang tidak dapat dibaca dan perbedaan antara tag pembuka dan penutup telah berakhir. Dalam template, saya biasanya hanya menggunakan sejumlah kecil variabel (judul, deskripsi, kata kunci, data SEO, memuat layar, tanggal, dan sebagainya) dan menempatkannya dalam templat dengan gaya deklaratif.

▍8. Menulis Kode Halaman Menggunakan Baca Tulis Doc

Ketika saya membuat halaman baru, saya fokus pada apa yang saya coba ekspresikan, bukan pada desain. Untuk mengatasi masalah ini, saya menggunakan Baca Tulis Doc. Alat ini membantu saya melakukan bisnis tanpa terganggu oleh apa pun. Saya menggunakannya bahkan ketika apa yang sedang saya kerjakan rencananya akan diterbitkan di Medium (dan ada editor WYSIWYG online yang sangat baik). Saya menganggap diri saya seorang veteran pengembang web, jadi saya terbiasa dengan font monospace, dan untuk memastikan bahwa tangan saya akan berada di keyboard, dan tidak terburu-buru antara keyboard dan mouse. Bagaimanapun, jika saya perlu melihat apa yang sedang saya kerjakan dengan CSS yang diterapkan padanya, saya bisa, menggunakan kombinasi tombol sederhana, beralih antara mode tampilan dan pengeditan.

▍ 9. Komponen web standar

Di bidang bekerja dengan komponen web, saya mematuhi standar W3C. Ini adalah bayangan DOM, elemen pengguna, <template> HTML, modul ECMAScript. Ini memungkinkan saya untuk sepenuhnya memasukkan semua yang saya butuhkan ke dalam paket yang saya distribusikan melalui NPM. Bagi saya, keuntungan terbesar dari semua ini adalah tingkat isolasi yang disediakan bayangan DOM. Ini memungkinkan kami untuk menyingkirkan kutukan CSS, dari mencemari ruang nama.

▍ 10. JavaScript untuk skrip klien

Untuk menulis skrip klien, saya menggunakan kode JavaScript berorientasi objek modular. Saya menerapkan fitur baru dari standar ECMAScript hanya ketika dukungan mereka muncul di rilis browser terbaru. Yaitu, saya memasukkan mereka ke dalam gudang senjata saya saat saya melihat bahwa semua peramban utama " berubah menjadi hijau" di caniuse.com . Saya menghindari polyfill.

▍11. Penataan CSS

CSS adalah tipografi dan tata letak halaman. Tipografi dimulai dengan pemilihan font yang tepat. Yang paling penting bagi saya adalah keterbacaan teks yang baik. Baru-baru ini, saya membuat aturan untuk meng-host file font yang digunakan di server saya sendiri. Ini melindungi sumber daya saya dari kemungkinan pemblokiran yang disebabkan oleh bandwidth terbatas dari beberapa layanan pihak ketiga. Sebagai contoh, saya menggunakan kira-kira konstruksi berikut:

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

Keuntungan tambahan dari pendekatan ini adalah ia benar-benar menyelamatkan saya dari masalah yang dikenal sebagai FOUT - (flash teks tanpa gaya, flash font biasa).

▍ 12. Mempersiapkan sumber daya grafis dengan GIMP dan InkScape

Dan akhirnya, untuk menyiapkan sumber daya grafis, saya menggunakan beberapa editor. Saya menyiapkan gambar bitmap PNG menggunakan GIMP, dan bahan-bahan vektor SVG menggunakan InkScape.

Teknologi yang telah kehilangan daya tarik sebelumnya

Beberapa alat yang benar-benar saya sukai sebelumnya, serta beberapa yang hanya saya sukai sebentar, tidak lagi termasuk dalam tumpukan teknologi web saya.

• Adobe Photoshop dan Illustrator. Ini adalah dua aplikasi hebat yang selama bertahun-tahun telah memenuhi semua kebutuhan grafis saya. Dengan sedih saya mengucapkan “selamat tinggal” kepada mereka dan berterima kasih kepada mereka karena telah bersama saya. Sekarang yang saya butuhkan adalah pengganti open source gratis mereka.
• jQuery Perpustakaan ini menjadi tidak perlu ketika perang kompatibilitas lintas-browser berakhir. Fitur jQuery paling berharga bagi saya adalah sintaks pemilih. Ternyata permintaan sangat tinggi sehingga pada tahun 2009 ditambahkan ke DOM sebagai querySelector .
• AJAX. Nenek moyang dari Web 2.0 ini. sekarang berubah menjadi peninggalan masa lalu. API XMLHttpRequest sedang digantikan oleh API fetch modern dan lebih sederhana, dan JSON menggantikan XML.
• SASS / SCSS. Saya akui bahwa menulis kode CSS tanpa variabel tidak efisien, akibatnya, banyak orang menyukai SASS. Dan modul juga merupakan fitur yang sangat penting. Tetapi pada akhirnya, untuk menggunakan semua ini dalam JavaScript, Anda harus menghabiskan terlalu banyak waktu dan usaha. Pada saat yang sama, seiring dengan pengembangan alat bantu untuk bekerja dengan gaya, standar CSS juga tidak berhenti. Akibatnya, berbagai alat untuk mengkonversi kode CSS secara bertahap menjadi sesuatu di masa lalu.
• BEM. Skema penamaan entitas BEM (Blok, Elemen, Pengubah) yang digunakan dalam pembentukan nama kelas CSS memecahkan masalah namespace global. Tetapi Anda harus membayar untuk itu menggunakan desain yang sangat panjang. Saya beralih ke penyeleksi induk / anak dalam elemen semantik, lebih memilih pendekatan yang lebih mudah untuk pengidentifikasi dan nama kelas.
  
  Sebagai contoh:
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• Font Georgia dan Verdana. Kedua font ini telah berada di puncak peringkat font saya selama bertahun-tahun. Saya bisa mengandalkan aksesibilitas dan keterbacaan mereka. Tetapi setelah aturan @font-face muncul, dan setelah font open-source mulai menyebar, saya mulai menggunakan font yang serupa.
• Babel, Grunt, Gulp, Browserify, WebPack. Empat item pertama dalam daftar ini tidak akan mengejutkan siapa pun. Tapi mengapa webpack saya meninggalkan Webpack? Fakta bahwa bundler ini kehilangan relevansi bagi saya memiliki beberapa alasan yang akan saya fokuskan lebih detail:
  
  
  1. Sebelum HTTP / 2 dengan dukungan untuk koneksi persisten dan multiplexing aliran, kami bergantung pada kemampuan alat-alat ini untuk membangun bundel sumber daya aplikasi. Tetapi bundling tidak memberi kita apa pun di dunia di mana ada HTTP / 2.
  2. Standar ECMAScript 2015 adalah kata baru dalam pengembangan JavaScript, semua orang bergegas menggunakan fitur-fitur baru bahasa pada saat mereka melihat cahaya hari. Namun, ada satu masalah. Kode yang ditulis menggunakan fitur baru tidak didukung oleh browser. Oleh karena itu, harus diubah menjadi ECMAScript 5-code. Dalam bisnis ini kami mengandalkan Babel, aplikasinya adalah langkah standar dalam menyiapkan proyek web untuk dipublikasikan. Hari ini, semua fitur bahasa baru yang saya butuhkan tersedia secara harfiah di mana-mana. Akibatnya, saya tidak lagi membutuhkan Babel.
  3. Sebelum kemungkinan impor dinamis modul di browser, kode harus diterjemahkan ke dalam format CommonJS. Sekarang, sebagian besar browser utama mendukung <script type='module'> (dan Edge 76+ akan segera berhenti). Sebagai hasilnya, kami akan segera dapat menyapa modul-modul ECMAScript dan mengucapkan selamat tinggal kepada yang lainnya.
• BEJ. Saya tidak mengerti mereka yang percaya bahwa JSX itu baik. Dan "Tetapi Anda sudah terbiasa dengan itu," bagi saya - bukan argumen.
• Pemrograman fungsional. Saya membatasi penggunaan pemrograman fungsional dalam kode saya untuk konstruksi garis tunggal sederhana seperti numbers.sort((a, b) => a - b); . Untuk yang lainnya, saya menggunakan pemrograman berorientasi objek.

Teknologi yang telah menjadi favorit

Berikut ini adalah ikhtisar tingkat tumpukan teknologi saya yang sangat saya kagumi:

• Modul JavaScript. Modul telah membuktikan diri dalam kode JavaScript sisi server. Dan saya sangat senang akhirnya saya bisa menggunakannya di sisi klien.
• JavaScript Berorientasi Objek Berikut adalah lima aturan emas untuk pengembangan JavaScript berorientasi objek:
  
  
  1. Ganti objek anonim dengan kelas bernama.
  2. Deklarasikan dan inisialisasi semua properti objek dalam konstruktor.
  3. Lindungi objek dari perubahan segera setelah pembuatan.
  4. Nyatakan metode dengan tanda tangan abadi.
  5. Ikat this ke setiap panggilan balik.
• Frasa Biru Sistem ini memungkinkan saya untuk menggunakan pendekatan deklaratif saat membuat template dan menyiapkan berbagai bahan. Itu membuat menulis kode HTML yang berkualitas sangat menyenangkan.

Ringkasan

Sebelumnya, tumpukan teknologi web bisa mencakup hanya empat elemen. Tetapi dalam kondisi modern Anda tidak akan mengejutkan siapa pun dengan tumpukan dua belas level. Saya tidak ingin terlihat seperti orang yang menyuarakan kebenaran terkenal, tetapi, bagaimanapun, menyelesaikan materi ini, saya akan mengatakan bahwa setiap pengembang dapat memiliki tumpukan sendiri. Dan akan sangat menarik bagi saya untuk belajar tentang apa yang orang lain sebut sebagai "tumpukan ideal teknologi web tahun 2020".

Pembaca yang budiman! Dan apa milik Anda - tumpukan teknologi web Anda pada tahun 2020?

Penafian dari penerjemah: Blue Phrase, Read Write Serve dan Read Write Doc - teknologi yang dikembangkan oleh penulis artikel ini. Pengunduhan dan pemasangan adalah risiko Anda sendiri.