3 Kerangka/Perpustakaan JavaScript Terbaik untuk Pengembangan Front End

JavaScript semakin populer selama bertahun-tahun, komunitas berkembang pesat, dan pengembang terus mengembangkan dan membangun alat untuk bahasa setiap hari.

Ini membuatnya kewalahan ketika memutuskan alat/kerangka/perpustakaan apa yang akan digunakan untuk tugas tertentu karena selalu ada banyak opsi untuk apa pun yang ingin Anda lakukan dalam JavaScript. Pada awalnya, masih sulit untuk memutuskan perpustakaan atau kerangka kerja apa yang akan dipelajari.

Artikel ini berfokus pada mengungkap keuntungan menggunakan beberapa kerangka kerja/pustaka front-end JavaScript dan pada akhirnya memberikan gambaran yang lebih jelas tentang mereka. Hal ini dimaksudkan untuk mempermudah proses pengambilan keputusan memilih salah satu.

Reaksi

Reaksi bukan kerangka kerja tetapi pustaka JavaScript untuk membangun antarmuka pengguna.

Ini adalah open-source dan dikelola oleh Facebook dan komunitas pengembang individu. React awalnya ditulis oleh Jordan Walke sebagai alat internal di Facebook. Itu kemudian open source dan dirilis ke masyarakat umum pada tahun 2013, dan telah mendapatkan berbagai popularitas setelah itu.

Beberapa fitur tersebut antara lain sebagai berikut.

  • Menyediakan komponen Reaktif, dapat disesuaikan, dan dapat digunakan kembali
  • Memanfaatkan DOM virtual
  • Sangat cepat
  • Berbasis komponen
  • Pengikatan data satu arah
  • Penggunaan kembali kode
  • Ini memiliki ekosistem yang hidup dan berkembang di belakangnya
  • Penanganan Manajemen Negara yang Nyaman

Instalasi/Penggunaan

React dapat digunakan di frontend dengan dua cara berbeda.

Lebih dari CDN

Anda dapat merujuk ke mereka situs resmi untuk mendapatkan tautan skrip, yang dapat Anda sertakan dalam tag header di markup HTML Anda. Pilih tautan berdasarkan tujuannya.

  Cara Menghitung Hari Antara Dua Tanggal di Excel

Misalnya, jika menggunakan dalam lingkungan pengembangan, maka:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

Dan, untuk produksi

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

Menggunakan Node.JS

Saya berasumsi Anda sudah menginstal NodeJS. Untuk menginstal React, cukup ketik perintah berikut.

sudo npm i -g create-react-app –save-dev

Setelah Instalasi selesai, ketik perintah berikut

buat-reaksi-aplikasi-pertama-reaksi-aplikasi saya

Perintah di atas akan menginstal semua pustaka yang diperlukan agar Bereaksi berjalan dengan benar, yang mencakup server pengembangan, webpack, dan babel.

Arahkan ke folder my-first-react-application dan jalankan perintah berikut

npm mulai

Di atas akan meluncurkan server pengembangan pada port 3000. Dan, ketika Anda mengakses IP server Anda dengan port 3000, Anda akan melihat sesuatu seperti di bawah ini.

React semakin populer dan sesuai permintaan oleh sejumlah organisasi besar. Jika Anda tertarik untuk belajar, maka saya akan merekomendasikan mengambil ini kursus lengkap.

Vue.js

Vue.js adalah kerangka kerja JavaScript progresif untuk membangun antarmuka pengguna interaktif dan aplikasi satu halaman. Ini adalah kerangka kerja tampilan model dengan pustaka inti, dengan fokus pada lapisan tampilan. Vue populer, karena kemampuannya untuk memberi daya pada aplikasi satu halaman. Tidak seperti React, Vue menggunakan HTML mentah dan bukan JSX.

Vue.js adalah open-source dan awalnya dibuat oleh Evan Kamu dan dirilis secara publik pada Februari 2014. Berikut ini adalah beberapa fiturnya.

  • Ini menyediakan komponen tampilan Reaktif dan dapat dikomposisi.
  • Memanfaatkan DOM virtual
  • Mempertahankan fokus pada perpustakaan inti (yaitu, Perutean dan manajemen status)
  • Lingkup dalam CSS ditangani tanpa CSS-In-Js
  • Pengikatan satu arah di dalam komponen.
  • Dukungan untuk add-on penting
  • Penggunaan kembali kode
  Cara Mengaktifkan Peringatan Flash LED Hanya Saat iPhone Anda Diam

Instalasi/Penggunaan

Anda dapat menggunakan Vue.js di front-end baik melalui CDN atau dengan Node.js

Untuk menggunakan cara CDN, Anda dapat menambahkan skrip berikut ke bagian header halaman HTML Anda.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Skrip di atas cocok untuk tujuan pengembangan karena menyertakan pesan konsol yang penting. Namun, untuk produksi, Anda harus menggunakan yang di bawah ini.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Dan, untuk digunakan dengan Nodejs, Anda dapat menginstalnya menggunakan perintah npm.

npm install vue

Saya sangat menyarankan Anda untuk membaca Vue JS resmi dokumentasi untuk mempelajari lebih lanjut atau mempertimbangkan untuk mengambil ini jalur.

sudut

sudut adalah kerangka kerja JavaScript struktural untuk halaman dinamis. Hal ini memungkinkan penggunaan HTML sebagai bahasa template dan memungkinkan penggunaan sintaks HTML untuk mengekspresikan komponen aplikasi dengan jelas dan ringkas. Ini adalah proyek sumber terbuka yang dikelola oleh Google dan kontributor lainnya.

Instalasi

Pastikan Anda telah menginstal Nodejs terbaru. Hal pertama yang harus kita instal adalah alat Angular CLI.

npm install -g @angular/cli

Setelah terinstal, kita dapat membuat proyek baru dengan perintah berikut.

ng new my-first-angular-app

Ikuti petunjuk di layar. Ini menghasilkan beberapa file dan folder dan menggunakan modul npm untuk mengunduh perpustakaan pihak ketiga yang diperlukan agar Angular berjalan dengan benar.

Untuk memulai aplikasi yang baru dibuat, jalankan perintah berikut dari folder aplikasi.

ng server

Ini akan secara otomatis memulai server pada port 4200.

[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Compiled successfully.

Kesimpulan

  Cara Mengaktifkan Crunchyroll di Perangkat Apa Pun

Jadi, apa yang Anda pilih untuk dipelajari lebih merupakan preferensi pribadi daripada hal “mana yang lebih baik”.

Semua kerangka kerja/pustaka yang tercantum di atas sangat bagus. Berikut rekap singkatnya;

  • Anda harus mempelajari Angular jika Anda menginginkan Kerangka yang ingin Anda andalkan tanpa harus berurusan dengan dependensi eksternal.
  • Anda harus mempelajari React jika Anda ingin membangun aplikasi PWA, Halaman Tunggal dengan cepat, dan Anda nyaman menggunakan BEJ.
  • React memiliki komunitas yang paling bersemangat dan lebih banyak peluang kerja karena komunitasnya yang besar.
  • React relatif mudah untuk memulai.
  • React sangat dapat dikustomisasi dan memperlakukan setiap bagian dari UI sebagai komponen.
  • Vue memiliki keunggulan yang sama dengan React tetapi tanpa JSX.
  • Pasar kerja untuk Vue terus meningkat.

Berikut grafik di Google Trends yang menunjukkan perbandingan tingkat popularitas dari 3 di antaranya.

Jika pengembangan front-end adalah minat Anda, maka Anda dapat melihat ini Kursus Udemy.