Mungkin, pengembang front-end akrab dengan sesuatu yang serupa: Anda masuk ke dalam mesin pencari "kerangka kerja JavaScript terbaik" dan Anda mendapatkan segunung hasil sebagai tanggapan, dari mana sangat sulit untuk memilih dengan tepat apa yang Anda butuhkan.
Apa yang terbaik untuk mengembangkan bagian sisi klien dari proyek web? Penulis bahan, bagian pertama dari terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia, sebagai orang yang bekerja dalam pemrograman penuh waktu, tahu bahwa penyedia front-end mencari sesuatu yang akan memungkinkan mereka untuk mempercepat pekerjaan dan memfasilitasi pembuatan antarmuka.
Kompilasi peringkat kerangka kerja dan pustaka ini didasarkan pada survei terhadap lebih dari 450 pengembang dari
ValueCoders . Lima alat paling menarik sampai di sini.
ValueCoders Pengembang Pilih React
Ketika saya mengetahui bahwa rekan-rekan saya memilih untuk Bereaksi, saya tidak terkejut. Sebagian besar peserta survei dianggap Bereaksi salah satu perpustakaan JavaScript terbaik. Pengembang kami telah menggunakan Bereaksi dalam banyak proyek. Ini memungkinkan untuk melihat dengan jelas kekuatan alat ini. Siapa pun yang menggunakan Bereaksi mendapat kombinasi fitur berikut:
- Komponen yang dapat digunakan kembali.
- Sinkronisasi keadaan aplikasi dan antarmuka.
- Sistem perutean dan standardisasi.
Pengembang kami sangat bergantung pada kemampuan React dalam menciptakan logika proyek front-end. Alat ini sangat kuat, tetapi pada saat yang sama, yang mengejutkan saya, sangat mudah digunakan.
Tinjauan umum aplikasi kami
Aplikasi kami diatur dengan cukup sederhana. Ini adalah program guru musik yang membantu mereka mengelola kegiatan sekolah online. Proyek ini membantu para guru melakukan bisnis dasar mereka, membuatnya lebih mudah untuk menyelesaikan masalah organisasi.
Kesulitan utama dalam membuat proyek ini adalah pengembangan panel kontrol yang dirancang untuk guru. Ini memungkinkan mereka untuk mengelola kegiatan siswa dan melacak prestasi mereka. Kami memecahkan masalah ini dengan menggunakan ekosistem perpustakaan
Redux sebagai dasar aplikasi. Yaitu, kami membuat bagian aplikasi yang dirancang untuk guru, yang dengannya mereka dapat menerima informasi tentang prestasi siswa, mendemonstrasikan pelajaran musik baru kepada mereka, berkomunikasi dengan mereka, membandingkan permainan mereka dengan apa pun, memberi mereka umpan balik.
Informasi tentang siswa dan kegiatannyaSebenarnya, saya mendapatkan pengalaman dengan Bereaksi selama pembuatan aplikasi ini. Apakah ini berarti bahwa Bereaksi adalah pemimpin yang diakui dalam alat front-end? Tidak, tidak. Banyak, misalnya, terutama dapat mencatat Vue, menyebut kerangka kerja ini salah satu yang terbaik dan mengingat serangkaian alat bantu standar yang tersedia di dalamnya.
Secara umum, keputusan tentang kerangka mana yang cocok untuk menyelesaikan tugas tertentu dibuat oleh pengembang front-end. Membuat keputusan seperti itu, mereka dihadapkan pada kebutuhan untuk menjawab banyak pertanyaan sulit. Selain itu, mengingat fakta bahwa pengembang biasanya hampir tidak punya waktu untuk memilih alat, mereka biasanya berhenti pada apa yang mereka ketahui. Pada saat yang sama, mereka kehilangan keunggulan potensial dari teknologi yang bersaing. Misalnya - kita dapat berbicara tentang fakta bahwa kerangka kerja yang akrab bagi pengembang, jika Anda membandingkannya dengan sesuatu yang lain, mungkin bukan yang tercepat.
Dan untuk pengembang pemula, bahkan sulit untuk membuat pilihan, membatasi opsi pada tiga kerangka kerja terkemuka - Angular, React, dan Vue. Untuk memfasilitasi pilihan ini, kami telah memilih 5 kerangka kerja dan perpustakaan front-end yang paling menarik yang harus diperhatikan oleh mereka yang akan melakukan pengembangan web pada tahun 2020.
Lima alat front-end yang besar
Berdasarkan popularitas dan prevalensi alat pengembangan front-end, berikut adalah lima kerangka kerja dan pustaka JavaScript yang paling terkenal:
- Bereaksi
- Vue
- Sudut
- Ember
- Backbone.js
Masing-masing alat ini telah mengembangkan komunitas pengembang yang signifikan. Dan jika Anda mencari dasar untuk proyek web Anda berikutnya, maka Anda tidak akan kalah dengan bertaruh pada salah satu alat ini. Berikut adalah informasi tentang mereka selama enam bulan terakhir, yang dikumpulkan oleh
npmtrends.com .
Unduh volume untuk paket angular, sumber bara, reaksi, vue, dan backbonePerbandingan paket angular, sumber bara, reaksi, vue dan backboneSekarang mari kita bicara tentang masing-masing proyek ini. Mari kita mulai dengan Bereaksi.
1. Bereaksi
Di dunia JavaScript, Bereaksi pasti pemimpin. Perpustakaan ini menggunakan ide-ide
pemrograman reaktif , ia memperkenalkan pengembangan front-end dan banyak konsepnya sendiri.
Untuk menggunakan Bereaksi secara fleksibel dalam pengembangan proyek web, Anda perlu mempelajari banyak alat tambahan. Di sini, misalnya, bukan daftar lengkap alat yang disediakan oleh perpustakaan yang dapat digunakan bersama dengan Bereaksi. Ini adalah Redux, MobX, Fluxy, Fluxible, RefluxJS. Dalam pengembangan Bereaksi, Anda juga dapat menggunakan jQuery AJAX, Superagent, Axios, dan Fetch API.
Mode Mode kompetitif
Berikut adalah tweet dari 24 Oktober tahun ini, yang melaporkan pengantar dalam Bereaksi kemampuan eksperimental untuk mendukung mode kompetitif (Mode Bersamaan). Bereaksi pengembang terus meningkatkan mode ini.
Di sini Anda dapat menemukan tautan ke pertunjukan dari React Conf 2019 pada mode kompetitif dan inovasi React lainnya, seperti rendering komponen malas (dibuat dengan
React.lazy ) di dalam komponen
React.Suspense . Kedua teknologi ini membuat Bereaksi aplikasi lebih responsif dengan rendering tanpa memblokir utas. Ini akan memungkinkan Bereaksi untuk tidak menunda pemrosesan tugas-tugas prioritas tinggi, seperti membentuk respons aplikasi terhadap interaksi pengguna.
UsSuspense dan teknologi lainnya
Teknologi
React.Suspense meningkatkan pemrosesan pemuatan data asinkron dalam aplikasi Bereaksi. Jika kami menggambarkan teknologi ini secara singkat, maka kami dapat mengatakan bahwa ini memungkinkan Anda untuk mengatur komponen yang menunggu kondisi tertentu dipenuhi dan pada saat yang sama tidak mengganggu operasi seluruh aplikasi.
Inovasi lain yang diperkenalkan dalam React 16.8 adalah kait. React hooks memungkinkan pengembang untuk mengambil keuntungan dari kemampuan penting React tanpa harus menggunakan komponen berbasis kelas. Di antara fitur-fitur ini adalah mengelola keadaan komponen dan bekerja dengan metode siklus hidupnya. Bereaksi berisi beberapa kait bawaan, tetapi memungkinkan pemrogram untuk membuat kait sendiri.
Bereaksi aplikasi terdiri dari komponen yang berisi logika aplikasi dan markup HTML untuk membentuk antarmuka. Untuk meningkatkan interaksi antar komponen, pengembang dapat menggunakan Flux atau pustaka JavaScript serupa.
Bereaksi pemrograman menggunakan konsep-konsep seperti keadaan dan sifat-sifat komponen. Mereka diwakili oleh objek yang relevan. Penggunaannya memungkinkan pengorganisasian penyimpanan data dalam suatu komponen dan pertukaran data antar komponen. Misalnya, mentransfer data dari logika program yang dilaksanakan oleh komponen ke antarmuka aplikasi, atau mentransfer data dari komponen induk ke komponen turunan.
▍ Bereaksi Elemen Ekosistem
Di sekitar perpustakaan React, seluruh ekosistem telah muncul, diwakili oleh berbagai alat pendukung dan perpustakaan. Berikut adalah beberapa komponen ekosistem ini:
- Pustaka Bereaksi dan Router Bereaksi itu sendiri adalah alat untuk mengelola rute dalam aplikasi.
- Paket reaksi-dom yang dirancang untuk bekerja dengan DOM.
- Bereaksi Alat Pengembang untuk Firefox dan Chrome.
- JSX adalah bahasa markup yang memungkinkan Anda untuk menggambarkan elemen HTML dalam kode JavaScript.
- Alat baris perintah buat-reaksi-aplikasi , yang dirancang untuk membuat proyek templat Bereaksi.
- Berbagai perpustakaan pendukung. Di antara mereka, misalnya, kita dapat menyebutkan perpustakaan Redux yang digunakan untuk mengontrol keadaan aplikasi, dan perpustakaan Axios digunakan untuk bertukar data dengan server API.
Mengakhiri pembicaraan tentang Bereaksi, kita dapat mengatakan bahwa perpustakaan ini mungkin menjadi pilihan terbaik bagi mereka yang berencana untuk membuat proyek web lanjutan.
2. Sudut
Pada konferensi AngularConnect 2019, tim pengembangan Angular membuat pernyataan yang memungkinkan Angular 9 dianggap sebagai titik balik dalam pengembangan kerangka kerja ini. Secara khusus, direncanakan untuk membuat kompiler
Angular Ivy alat standar yang tersedia untuk semua aplikasi. Keuntungan utama dari teknologi ini adalah aplikasinya memungkinkan Anda untuk mempercepat proses pengembangan, mengurangi ukuran aplikasi, meningkatkan kinerja dan keandalannya.
Modern Angular adalah kerangka modular canggih untuk pengembangan front-end. Sebelumnya, untuk menghubungkan Angular ke sebuah halaman, cukup dengan menambahkan tag yang sesuai ke kode HTML-nya, sekarang pengembang dapat mengimpor modul Angular yang dia butuhkan ke dalam proyeknya.
Angular dikenal karena fleksibilitasnya. Itu sebabnya versi Angular 1.x masih relevan. Namun, banyak pengembang saat ini menggunakan Angular 2+ karena arsitektur kerangka MVC, yang telah berubah secara signifikan ke arah arsitektur berbasis komponen.
Siapa pun yang ingin menggunakan Angular harus menghadapi beberapa kesulitan saat menguasai kerangka kerja ini. Jadi, untuk membuat aplikasi Angular, hampir wajib untuk menggunakan TypeScript. Meskipun ini mempersulit pekerjaan dengan Angular, situasi ini memiliki kelebihan. Secara khusus, ini meningkatkan keandalan aplikasi karena kontrol tipe lanjutan, ini memberikan alat pengembangan tambahan bagi programmer.
Ecosystem Unsur ekosistem seluler
Berikut adalah beberapa bagian dari ekosistem Angular:
- Alat baris perintah untuk menyederhanakan pembuatan preset aplikasi.
- Satu set modul yang dapat digunakan ketika mengembangkan proyek Sudut:
@angular/common , @angular/compiler , @angular/core , @angular/forms , @angular/http , @angular/platform-browser , @angular/platform-browser-dynamic , @angular/router dan @angular/upgrade . - Perpustakaan Zone.js, yang memungkinkan Anda untuk mengontrol konteks eksekusi kode.
- Bahasa TypeScript dan CoffeeScript.
- Pertukaran data dalam aplikasi Angular dapat diatur menggunakan objek RxJS dan Observable.
- Angular Augury adalah alat untuk men-debug aplikasi Angular.
- Teknologi Universal Angular untuk mengatur rendering sisi-server dari aplikasi Angular.
Angular adalah kerangka kerja JS lengkap yang memberikan programmer web modern segala yang diperlukan untuk pekerjaan produktif. Angular harus memperhatikan mereka yang ingin memiliki seperangkat alat standar yang luas dan meminimalkan penggunaan perpustakaan pihak ketiga.
Lanjutan,
bagian 2Pembaca yang budiman! Jika Anda ditawari untuk menyebutkan kerangka kerja terbaik untuk pengembangan front-end - apa yang akan Anda pilih?
