Halo semuanya!Sekarang saya akan menceritakan satu kisah aneh kepada Anda. Suatu kali, saya tinggal di sebuah kondominium, di mana, di lantai dasar, ada ruang kebugaran dengan treadmill. Di masa muda saya, saya aktif terlibat dalam olahraga dan kemudian saya bisa mempelajari keadaan yang terjadi selama berlari dan disebut "angin kedua": ini adalah ketika Anda tiba-tiba mulai merasa seperti dewa bersayap yang tidak tahu kelelahan. Pernapasan, jantung berdebar, dan gerakan-gerakan tubuh muncul dalam resonansi khusus, dan mengubah Anda menjadi mobil yang sedang berlari. Perasaannya lebih cerah, menurut pendapat saya, semakin Anda tidak suka berlari ke titik ini. Jadi, setiap hari saya berjalan melewati treadmill dan berpikir akan menyenangkan untuk mengingat masa muda. Ya saya ingat. Treadmill membantu dengan ini, memungkinkan Anda untuk menyempurnakan langkah dan mencapai ritme yang diinginkan. Di jalan, saya tidak bisa melakukan ini: sangat sulit untuk berjalan di sekitar kota pada kecepatan yang rata, medan dan hambatan mengganggu. Setelah beberapa waktu, saya pindah ke apartemen biasa (tanpa ruang kebugaran), dan mulai berpikir untuk membeli treadmill sendiri.
Ya, tentu saja, Anda bisa membeli langganan ke klub olahraga terdekat, tetapi saya, seperti banyak rekan saya di TI, adalah fobia sosial. Jika bukan sosiopat. Olahraga adalah proses intim bagi saya. Nah, untuk menggunakan menit gratis untuk pelatihan juga menggoda: "kesehatan geek" dan semua itu ... Singkatnya, saya melihat penawaran dari toko online, membaca ulasan, bertanya-tanya berapa banyak yang bisa saya habiskan untuk bisnis ini, bagaimana menyelesaikan masalah dengan kebisingan dan di mana menempatkan bandura yang agak besar ini ... Lalu aku jatuh ke tangan lompat tali biasa, dan aku berkata pada diriku sendiri: yah, ini dia, pilihan yang bagus untuk latihan kardio tanpa terlalu banyak wasir! Yang Anda butuhkan adalah langit-langit tinggi dan ... Tidak ada yang muncul darinya: untuk dapat melompat pada tali lompat secara ritmis dan merata, Anda harus dapat melakukannya. Kami kembali ke pemikiran tentang treadmill atau ... Tunggu sebentar, mengapa tidak mencoba RUNNING IN PLACE? Oh well, entah bagaimana TERLALU sederhana dan bodoh. Tetapi saya mencoba. Dan tahukah Anda? Ini bagus! Sensasinya hampir sama seperti yang saya alami di treadmill, hanya semuanya jauh lebih sederhana: Anda memegang gelang kebugaran, mengenakan headphone dengan musik sosis, menyalakan timer - nyalakan timer! Ya, ada nuansa, tapi percayalah, itu tidak penting. Akibatnya, saya sudah muak dengan topik ini untuk beberapa waktu sekarang, sangat banyak sehingga saya ingin bergabung dengan sekte orang-orang gila yang sama. Anda bertanya kepada saya: apa yang Anda bicarakan secara umum, bagaimana ini semua terkait dengan pengembangan web?
Dan begini caranya
Pertimbangkan tumpukan teknologi populer untuk pengembangan front-end modern:
TypeScript + KURANG / SCSS / PostCSS + Bereaksi + Redux / Mobx + WebpackDe facto, sekarang ini adalah standar tertentu. Sangat mudah untuk memverifikasi ini dengan menganalisis lowongan. Setiap proyek baru tahun ini, dengan tingkat probabilitas tertinggi, akan diluncurkan dengan daftar serupa di bawah tenda. Ini adalah set
treadmill teruji waktu yang sangat baik. Mari kita lihat daftar ini bersama-sama dan melihat apa yang tersisa jika kita menggunakan pendekatan Run in Place.
TypeScript
Hal yang indah Siapa pun yang pernah menulis sesuatu yang serius untuk web akan memahami ini. Seringkali dalam artikel tentang TypeScript untuk pemula, memberikan contoh, mereka berbicara tentang beberapa hal yang sangat sederhana dan dangkal, seperti meneruskan argumen yang diketik ke fungsi atau perubahan-perubahan jenis casting dalam JavaScript, dari mana Anda diselamatkan. Tetapi kemampuan TS lebih besar dan lebih dalam dari pada pengecekan tipe pada tahap kompilasi, itu dapat mengarahkan pengembang "dengan tangan" di seluruh proyek, mendorong dan tidak membiarkan satu lagi tersandung. Tetapi TS memiliki kekurangannya: ia TIDAK bekerja di browser tanpa transpail dan sintaksnya, katakanlah, "riak" di mata. Ketika Anda bekerja dengan front-end, alur kerja Anda sering melibatkan memeriksa bagaimana kode Anda berjalan di browser, Anda perlu akses konstan ke runtime asli. Hilangnya waktu untuk membangun kembali proyek untuk mencerminkan perubahan, secara agregat, bisa sangat besar. Bahkan jika Anda memiliki semua yang Anda butuhkan di-cache dan dioptimalkan. Apa yang harus dilakukan Opsi saya: gunakan JS + JSDoc. Ya, TS Static Analyzer mendukung format
JSDoc . Pada saat yang sama, Anda melihat kode Anda langsung di browser dan memanfaatkan manfaat peradaban. Blok yang menggambarkan tipe dan petunjuk lainnya tidak dicampur dengan kode dan memiliki batasan yang jelas, yang bagi saya pribadi, sangat membantu untuk membaca kode “secara diagonal”. Jika Anda menggunakan Kode VS, Anda dapat mencoba pendekatan ini dengan hanya menambahkan baris // @ ts-check di awal kode Anda. Jika Anda memerlukan dukungan untuk browser lawas, kompilasi dari ES6 +, tentu saja, masih akan diperlukan, tetapi hanya untuk versi produksi. Akibatnya, Anda menyederhanakan debugging di runtime (dari mana tidak adanya kesalahan dan peringatan selama perakitan tidak akan menghemat) dan menghemat banyak waktu.
KURANG / SCSS / PostCSS
Dari set ini, favorit saya KURANG dan PostCSS. Saya menyukai KURANG karena sintaksinya yang lebih "asli" dan relatif mudah untuk ketergantungan yang diperlukan untuk lingkungan pengembangan. PostCSS membantu menciptakan segala macam trik dengan SVG dan melacak awalan. Kerugiannya, seperti pada paragraf sebelumnya, saya akan menyebut perlunya kompilasi ulang yang konstan. Nah, ketergantungan itu sendiri. Namun, di tahun 2018 kami, kami memiliki hal yang luar biasa seperti variabel CSS asli! Ini adalah hal yang sangat kuat yang tidak dapat dibandingkan dengan preprocessor: Anda dapat mendefinisikan ulang variabel Anda secara langsung di runtime! Ini membuka seluruh dunia kemungkinan baru. Misalnya, Anda dapat dengan sangat sederhana, "on the fly", mengubah tema seluruh aplikasi, serta blok individualnya. Secara harfiah, pengguna dapat menempelkan kulit untuk aplikasi dengan pemilih warna, dan untuk ini Anda tidak perlu menyimpan paket terpisah dengan gaya yang telah dikompilasi sebelumnya atau membebani JS Anda dengan logika tambahan. Dan lebih banyak lagi, lebih halus dan spesifik. Saya memilih CSS modern asli. Tetapi jika Anda perlu mendukung IE11 maka
kesedihan .
Bereaksi
React membawa kita konsep baru dekomposisi modular, yang jatuh sangat baik pada kebutuhan pengembangan sisi klien, karena struktur komponen mengulangi struktur presentasi, menyederhanakan persepsi dan menertibkan kepada kepala pengembang. Itulah sebabnya, menurut saya, dia menjadi sangat populer dan itulah mengapa dia berterima kasih padanya. Namun, sekarang Bereaksi semakin banyak memperoleh sifat-sifat kultus kargo: orang mulai menyeretnya ke dalam proyek hanya karena "semua orang melakukannya." Dan ini mengerikan, karena pilihan enjiniring, terutama dalam masalah yang begitu penting, harus sedapat mungkin disadari. Dan untuk kesadaran, Anda perlu memahami bahwa Bereaksi penuh dengan kekurangan. Bagi saya, ini, pertama-tama, ini adalah abstraksi terlalu tebal di atas DOM asli dan membawa sejumlah besar spesifiknya sendiri yang perlu Anda tangani alih-alih langsung memecahkan masalah. Ini terutama terasa dan menekan jika tugas Anda sedikit kurang sepele daripada cetakan dangkal. Anda dapat berbicara tentang topik ini untuk waktu yang lama, ingat JSX, VDOM dan banyak lagi, tetapi bagi kami sekarang pertanyaan utamanya adalah: apa alternatifnya? Tidak, bukan Vue. Dan tidak, terutama, Angular. Bagi saya, ini adalah komponen web: seperangkat standar
CustomElements +
ShadowDOM +
ES Modul +
Template HTML . Mengapa Karena ini adalah standar yang didukung oleh platform web itu sendiri, dan bukan platform meta dan JS add-ons.
Anda dapat memecah kode Anda menjadi blok yang rapi dan mengaturnya sesuka Anda menggunakan modul asli. Ya, modul didukung oleh semua browser modern dan Anda tidak perlu membangun kembali selama proses pengembangan. Ya, Anda dapat menyimpan gaya dan template secara terpisah dalam modul. Ya, Anda dapat secara khusus mengaktifkan dukungan sintaks untuk file-file ini dan bekerja dengannya sebagai HTML dan CSS asli. Siklus hidup komponen web akan membantu Anda mengatur rendering dan pembaruan tanpa penguraian yang tidak perlu dan mengubah struktur DOM. ShadowDOM memungkinkan Anda untuk menyingkirkan BEM yang rumit dan tidak perlu khawatir tentang enkapsulasi gaya.
ShadowDOM transparan untuk variabel CSS dan memungkinkan Anda untuk mengirim parameter ke dalam dari tingkat yang tepat untuk bersarang. Ini memungkinkan Anda untuk bereksperimen dengan desain parametrik dan melakukan banyak trik lainnya. Komponen web sepenuhnya bekerja dengan DOM API yang biasa sambil menjadi elemen html lengkap: semua metode standar ada di tangan Anda. Anda dapat menggunakan atribut khusus untuk meneruskan parameter dan pengaturan tampilan (meskipun, tidak seperti Bereaksi, Anda tidak bisa melewatkan apa pun selain nilai string dan Boolean, tetapi bagi saya itu bukan masalah sama sekali). Kode Anda akan lebih mudah dan lebih cepat. Percayalah, saya sudah bisa membandingkan. Agak menyedihkan: bagi sebagian besar pengguna, semuanya akan bekerja secara asli, tetapi beberapa akan membutuhkan
polifile . Jika statistik dan audiens target Anda, terutama tentang browser modern, merasa bebas untuk menyelami topik ini, itu sangat berharga.
Redux / mobx
Itu lebih rumit. Di satu sisi, ada banyak artikel yang mendaftar kekuatan dan kelemahan dan membandingkan berbagai pendekatan untuk menyimpan negara. Dan untuk pergi ke spesifik - Anda perlu kasus khusus. Ternyata topik ini telah menghantui saya selama beberapa waktu: Saya menemukan tugas yang cukup rumit untuk bekerja dengan data terstruktur yang kompleks. Secara umum: data yang dekat dengan kenyataan tidak pernah dalam praktiknya sederhana, mudah dinormalisasi dengan hierarki universal yang jelas. Paling sering, ini adalah beberapa grafik rumit, yang mengharuskan Anda awalnya meletakkan fleksibilitas maksimum dalam sistem. Dalam hal ini, saya adalah penganut bangunan sepeda, tetapi saya tidak akan merekomendasikan cara saya sendiri kepada semua orang tanpa pandang bulu. Apa yang bisa saya sarankan adalah untuk tidak meremehkan dasar-dasar ilmu komputer modern, membaca sesuatu yang populer tentang teori graf, teori himpunan, teori chaos. Terlebih lagi, saya tidak berbicara tentang semacam hardcore: ide-ide paling umum bisa sangat berguna dan “membersihkan otak” dengan cara yang benar. Dalam kasus sederhana, Anda akan dapat menulis repositori negara Anda sendiri dengan blackjack dan langganan di lutut Anda, dan itu tidak akan lebih sulit daripada menggali dokumentasi perpustakaan populer.
Paket web
Tentu saja, kita dapat meninggalkan sistem perakitan sepenuhnya. Tetapi menyelesaikan rantai impor dalam kode waktu-nyata bukanlah hal tercepat. Karena itu, kami masih memerlukan bundel untuk versi produksi. Nah, semacam minifikasi / kebingungan, sekali lagi, dan dist ayah yang kompak ... Itu sebabnya kami meninggalkan Webpack. Tetapi kita hanya membutuhkan dia beberapa modul dengan konfigurasi minimal, dan tidak ada pengamat dan pembangunan kembali untuk proses pengembangan. Secara pribadi, konfigurasi build saya terlihat sangat ringkas dan tidak memerlukan banyak dependensi. Baru-baru ini, saya sering mendengar tentang pembuat Parcel baru, dan konsep minimalisnya sangat menarik bagi saya, tetapi, sejauh yang saya tahu, itu tidak bekerja dengan modul-ES, dan menurut saya, itu adalah file. Semoga ini berubah.
Apa hasilnya
Saya sering mendengar pendapat bahwa jika Anda menulis "vanilla" - Anda pasti akan menemukan kenyataan bahwa proyek Anda akan segera berubah menjadi bubur yang tidak didukung dengan mie. Biarkan saya menangkis: pertama, jika diinginkan, bubur juga dapat dibuat dari reduksi dengan reduksi (saya sudah cukup melihat ini). Dan kedua, semuanya akan sangat baik jika Anda menggunakan modul, JSDoc dan praktik OOP yang baik. Jadi, apa yang kita ketahui:
JS + CSS + Komponen Web + WebpackDari lima "treadmill" kami hanya memiliki satu, secara signifikan ringan. Dan ini sudah cukup untuk merasakan "sayap di belakang."
PS I sama sekali tidak menegaskan bahwa pendekatan saya akan cocok untuk semua orang. Saya meminta Anda untuk menganggap karya ini setidaknya sebagai kesempatan untuk memikirkan apa yang tampaknya bagi kita begitu saja.