Bersiap untuk 2020: 8 tren dalam pengembangan JavaScript sisi klien yang perlu Anda ketahui

Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia ingin berbagi ramalan dengan pembaca mengenai perkembangan teknologi web untuk tahun-tahun mendatang. Secara khusus, di sini kita akan berbicara tentang apa, menurut penulis, pengembang front-end mungkin layak untuk mulai belajar hari ini.

Semua yang berhubungan dengan JavaScript berkembang sangat cepat. Ini juga berlaku untuk apa yang dapat dikaitkan dengan bidang pengembangan web. Saat ini, mereka yang proyeknya tidak didasarkan pada teknologi paling modern mulai merasakan kesenjangan antara apa yang mereka gunakan dan yang baru yang muncul hampir setiap hari. Teknologi ini termasuk Webpack, React, Jest, Vue, Angular dalam kondisi saat ini. Sementara "populasi" dunia dari pengembangan front-end, termasuk spesialis teknis dan programmer, terus tumbuh, dunia ini berjuang untuk standardisasi. Munculnya teknologi dan alat baru sudah mengubah situasi.



Kita dapat mengatakan dengan tingkat kepastian yang adil bahwa standardisasi pengembangan antarmuka pengguna akan menjadi tren umum dalam pengembangan teknologi front-end. Secara khusus, kita berbicara tentang komposisi berdasarkan komponen, keinginan untuk sistem modular. Tren ini memengaruhi hampir semua hal - mulai dari penataan gaya hingga pengujian dan bahkan pengelolaan kondisi aplikasi. Tren ini dapat mencakup teknologi yang dibangun di sekitar komponen web, modul ES, alat yang sesuai dan banyak lagi jatuh di sini.

1. Sistem untuk bekerja dengan komponen web, terlepas dari kerangka kerja dan perpustakaan

Secara umum, kita dapat mengatakan bahwa ini adalah masa depan. Mengapa Masalahnya adalah bahwa sistem tersebut tidak tergantung pada kerangka kerja. Ini berarti bahwa mereka dapat bekerja sepenuhnya secara independen dan bersama-sama dengan kerangka kerja apa pun, mengingat fitur-fiturnya mengenai penyajian kode. Sistem ini tidak dicirikan oleh apa yang disebut "kelelahan JavaScript," "kelelahan JavaScript." Mereka didukung oleh browser modern. Dalam proyek yang dibuat dengan penggunaannya, jumlah optimal kode bantu disertakan. Mereka memanfaatkan kemampuan VDOM dengan baik.

Komponen yang dimaksud dibangun menggunakan standar Elemen Kustom. Ini memungkinkan Anda membuat tag HTML baru, menyempurnakan propertinya - mulai dari tampilan hingga mekanisme internal dan fitur bekerja dengan Shadow DOM.

Proyek-proyek penting di bidang ini adalah Lit-html (dan elemen-Lit ), StencilJS , SvelteJS , Bit .

Bagaimana seharusnya prinsip-prinsip modularitas, penggunaan kembali, enkapsulasi dan standardisasi terlihat di era komponen? Jika Anda memikirkannya, pikirkan tentang masa depan pengembangan UI, ternyata masa depan ini diwakili oleh komponen web. Kami akan kembali ke ide ini. Sementara itu, berikut adalah beberapa bahan yang berguna pada komponen web. Di sini Anda dapat membaca tentang alat untuk mengembangkan komponen web. Berikut adalah bahan tentang pustaka komponen web. Di sini Anda dapat menemukan contoh prototipe pembaca RSS menggunakan komponen web.

2. Tentang masa depan perang kerangka kerja dan perpustakaan

Dalam hal jumlah unduhan dari NPM, Bereaksi masih terus melewati Angular dan Vue. Setidaknya untuk saat ini .

Di sini kita tidak akan berbicara tentang kerangka kerja dan perpustakaan mana yang lebih baik daripada yang lain dan mengapa demikian. Jika Anda tertarik untuk membacanya - ini dia - bahan-bahan yang digunakan untuk membandingkan data nyata, Angular, React, dan Vue. Kita akan mempelajari gambaran besarnya. Dan terlihat seperti ini: dalam pengembangan front-end, pangsa teknologi berbasis komponen tumbuh. Itu terus berkembang. Jumlah pengembang yang menggunakan teknologi serupa juga meningkat, dan - cepat. Selain itu, di area ini ada cukup ruang kosong untuk pengenalan alat baru.

Jadi, kerangka mana yang akan lebih dulu dalam 5 tahun? Tidak ada yang tahu itu. Tetapi aman untuk mengatakan bahwa seseorang yang ingin dipersiapkan untuk masa depan harus mempelajari teknologi dasar dari ekosistem JavaScript dan terbiasa dengan lingkungan di mana DOM dikendalikan oleh komponen web. Mungkin dalam 5 tahun Bereaksi akan menjadi alat terkemuka untuk pengembangan antarmuka. Anda dapat memikirkan hal ini dengan melihat grafik di atas, yang dibangun di atas data NPM. Tapi tidak sesederhana itu. Lihatlah, misalnya, pada metrik ini . Mereka memungkinkan kita untuk mengatakan bahwa, dalam hal penggunaan nyata, jarak antara React dan Vue sangat kecil.


Vue dan React, dalam hal penggunaan aktualnya, sangat dekat

Di masa depan, kami berharap dapat meningkatkan standardisasi komponen web yang tidak tergantung pada kerangka kerja. Dalam hal ini, seseorang dapat merefleksikan apa efek ini pada perang kerangka. Dan omong-omong, seperti yang kita semua tahu, Bereaksi bahkan bukan kerangka kerja, tetapi hanya sebuah perpustakaan.

3. Isolasi, penggunaan kembali, dan komposisi komponen

Bit adalah contoh platform yang berfokus pada pengembangan komponen, berkolaborasi dengan mereka dan menggunakannya kembali

Berbicara tentang pengembangan front-end dan komponen dari mana antarmuka pengguna dibangun, orang tidak dapat tidak mengingat Bit .

Platform open source ini memungkinkan Anda untuk mengisolasi komponen (atau potongan kode JS yang cocok untuk digunakan kembali) dan mengubahnya menjadi blok bangunan yang dapat digunakan dalam banyak proyek. Dalam hal ini, pengembang dapat mengontrol kode sumber komponen, mengelola perubahannya dan susunan lengkap dependensinya.

Sederhananya, terima kasih kepada Bit, pengembang memiliki kesempatan untuk meningkatkan komponen mereka dalam berbagai proyek dan menyinkronkan perubahan. Berkat hub komponen bit.dev, ide ini meluas ke pengembangan tim, memungkinkan anggota tim untuk mengatur kode dan membagikannya.

Hub Bit memberi pengembang semua yang diperlukan untuk pembuatan bersama dan penggunaan komponen. Misalnya - alat pencarian yang nyaman, lingkungan interaktif di mana Anda dapat bereksperimen dengan komponen, dukungan penuh untuk CI / CD.

Berkat Bit, Anda dapat menggunakan tidak hanya komponen yang dibuat oleh upaya tim Anda, tetapi juga proyek sumber terbuka. Ini termasuk kemampuan untuk merekomendasikan perubahan pada komponen yang ada, dan kemampuan untuk berbagi perkembangan mereka.

4. ES-modul dan CDN

Modul-ES adalah bagian dari standar ES6 yang menjelaskan cara bekerja dengan modul di browser. Dengan menggunakan teknologi ini, Anda dapat mentransfer beberapa fungsionalitas ke modul yang dapat diunduh, misalnya melalui CDN. Setelah rilis Firefox 60, kita dapat mengatakan bahwa modul-ES mendukung semua browser utama . Bekerja pada dukungan untuk modul ES juga sedang berlangsung di Node.js. Selain itu, dukungan untuk modul ES diharapkan akan ditambahkan ke WebAssembly .

5. Manajemen status tingkat komponen

Apa yang baru tentang manajemen status aplikasi? Hari-hari ini, manajemen negara bermuara untuk meletakkan apa pun di repositori Redux global.

Tetapi pendekatan semacam itu dapat mempersulit pekerjaan dengan komponen, dapat menjadi hambatan bagi pengungkapan penuh kemampuan mereka dalam hal penggunaan kembali dan modularitas. Jika kita mempertimbangkan situasi dari sudut pandang ini, kita dapat mengatakan bahwa proyek-proyek seperti MobX memberi kita pendekatan yang menarik, lebih reaktif untuk bekerja dengan keadaan aplikasi (di sini Anda juga dapat mengingat proyek yang tidak disebutkan ).

Jika kita berbicara tentang mekanisme Bereaksi standar baru untuk mengelola negara, kita dapat memanggil kembali Context API dan hooks. Penampilan mereka berarti bahwa pemrogram tidak lagi membutuhkan perpustakaan pihak ketiga untuk mengelola keadaan, dan keadaan itu dapat dikelola pada tingkat komponen fungsional. Ini meningkatkan modularitas proyek dan kemampuan untuk menggunakan kembali komponen.

Akibatnya, jika Anda mencoba melihat ke masa depan, mungkin terjadi bahwa istilah "negara" akan digunakan terutama dalam aplikasi untuk komponen yang dienkapsulasi, dan bukan dalam aplikasi ke beberapa gudang data global tingkat aplikasi.

6. Stylisasi komponen adalah komposisi

Pemisahan komponen yang menerapkan logika dan gaya - cara untuk menyesuaikan dgn mode komponen melalui komposisi

Banyak yang telah dikatakan tentang cara mendesain komponen. Ada banyak peluang di bidang ini. Ini adalah CSS tertanam, modul CSS, deskripsi CSS dalam kode JS, komponen bergaya, dan solusi antara seperti Stylable.

Berpikir tentang styling komponen di masa depan, saya cenderung membayangkan styling sebagai komposisi. Ini berarti bahwa sistem desain komponen harus mencakup komponen yang menerapkan logika dan komponen yang menggambarkan gaya. Dengan pendekatan ini, dimungkinkan untuk membuat sistem desain komponen yang berkembang seiring dengan perkembangan proyek. Ini menghilangkan kebutuhan pengembang untuk menguasai perpustakaan besar untuk penataan. Alat yang digunakan untuk merancang komponen seperti Sketsa atau Figma juga dapat menggunakan ide ini.

7. GraphQL-API dan aplikasi klien berbasis data

Teknologi GraphQL dan pendekatan pengembangan berbasis komponen memberikan peluang menarik untuk aplikasi klien berbasis web. Misalnya, menggunakan Apollo, Anda dapat dengan mudah membuat komponen UI yang berfungsi dengan data melalui GraphQL. Ada banyak alat lain yang membuat bekerja dengan GraphQL lebih mudah.

Penanganan yang wajar dari berbagai API menyederhanakan pengembangan aplikasi berbasis data. Ini memungkinkan Anda untuk meningkatkan kecepatan pengembangan. Akibatnya, GraphQL adalah teknologi yang harus diperhatikan oleh mereka yang memikirkan masa depan.

8. Alat perancang berbasis komponen

Komponen secara bertahap menjadi bagian integral dari sistem desain proyek web. Ini mengurangi kesenjangan antara desainer dan programmer. Keduanya saling mendekati.

Sebagai contoh, Sketch sudah menyediakan alat untuk pengembangan modular dari desain komponen yang memerlukan ketergantungan antar komponen. Sudah ada alat untuk bekerja di Sketsa dengan komponen yang membentuk presentasi visual mereka secara terprogram. Meluasnya penggunaan alat-alat seperti itu hanya masalah waktu. Alat seperti Figma terutama ditargetkan pada komponen antarmuka pengguna yang dapat digunakan kembali. Proyek Framer sedang mengembangkan alat untuk desainer pemrograman. Alat ini memungkinkan desainer untuk mengontrol bagaimana elemen antarmuka pengguna ditransformasikan menjadi komponen Bereaksi.

Ringkasan

Di sini kami memperkenalkan Anda dengan beberapa tren dalam pengembangan web klien, yang, menurut penulis materi, harus memperhatikan seseorang yang ingin siap untuk masa depan. Kami berharap publikasi ini memberi Anda pemikiran matang.

Pembaca yang budiman! Bagaimana Anda melihat masa depan pengembangan web?