Sudut: status pada 2019

Sekarang musim panas adalah tahun dimana berbagai konferensi dan acara lainnya diadakan di seluruh dunia. Pemrogram saat ini benar-benar kewalahan dengan informasi baru, yang biasanya cukup sulit untuk berasimilasi.

Dunia pengembangan ujung depan menyerupai kereta yang bergerak tanpa henti. Kita semua tahu betapa sulitnya mengikuti kereta ini. Menonton video konferensi membutuhkan banyak waktu, akibatnya, alasannya jelas bahwa banyak dari kita, setelah bekerja, lebih suka menonton film di Netflix.



Penulis bahan, terjemahan yang kami terbitkan, mengatakan itulah sebabnya ia memutuskan untuk membantu semua orang yang ingin memahami inovasi Angular. Di sini kita akan berbicara tentang keadaan Angular saat ini, tentang fitur segar dari kerangka kerja ini, tentang tren saat ini.

Tentang Angular Scaling Up

Menurut data yang diberikan di ng-conf 2019 oleh Brad Green, seorang anggota tim pengembangan Angular, ruang lingkup Angular telah tumbuh sekitar 50% sepanjang tahun!

Jelas bahwa data ini dapat dipengaruhi oleh fakta bahwa banyak proyek sedang dalam proses transisi dari Angular 1.X ke versi kerangka kerja yang lebih baru. Tetapi 50% masih merupakan indikator yang mengesankan.

Angular tidak tumbuh secepat Svelte atau Vue. Kerangka kerja ini tidak digunakan seluas Bereaksi. Tapi, tidak seperti apa yang bisa Anda baca tentang kerangka kerja lain tentang sumber daya seperti Reddit atau Twitter, Angular dalam kondisi sehat dan digunakan oleh jutaan pengembang dan tim.

Angular memiliki infrastruktur yang besar dan dinamis.

Meskipun Angular memiliki banyak alat bawaan yang berguna yang dibuat oleh tim pengembangan inti, ekosistemnya, komunitas penggemar yang berkontribusi terhadap pengembangannya, sangat besar. Dia, di samping itu, diwakili oleh proyek-proyek berkualitas sangat tinggi.

Bersama dengan kerangka dasar, Anda dapat menggunakan banyak alat menarik. Yaitu, kita berbicara tentang hal berikut:

• Integrasi mendalam dengan alat yang luar biasa, pengembangan dinamis. Di antara mereka, TypeScript dan RxJS dapat dicatat. Perkembangan teknologi ini memiliki efek positif langsung pada Angular.
• Berbagai jenis perpustakaan untuk mengelola status aplikasi.
• Alat untuk menganalisis dan meningkatkan kualitas kode. Seperti Codelyzer .
• Perpustakaan elemen antarmuka pengguna, komponen, arahan, jalur pipa, dan sebagainya.
• Banyak pilihan plugin untuk berbagai IDE.
• Perpustakaan dan kerangka kerja untuk menguji aplikasi.
• Dokumentasi terperinci berkualitas tinggi yang sedang dikerjakan oleh anggota masyarakat dan tim Angular. Ini termasuk pedoman praktis, panduan, materi pelatihan, buku, dan kursus video. Meskipun ini adalah item terakhir dalam daftar ini, tetap saja sama pentingnya dengan yang lain.

Di bagian berikut, kami akan fokus pada beberapa alat yang sangat menarik yang dapat Anda gunakan saat mengembangkan proyek Angular.

CLI sudut

▍ CLI Inggris dan proses pembaruan sudut yang sangat sederhana

Ini bukan kata-kata kosong. Di sini Anda dapat menemukan cerita yang bagus tentang bagaimana proyek BlueWeb, melayani setiap setengah miliar pengguna, ditingkatkan dari Angular 7 ke Angular 8 dalam satu hari kerja. Ini merupakan pencapaian yang mengesankan, mengingat bahwa transisi dari versi Angular yang kedua ke keempat memakan waktu 30 hari dari proyek yang sama.

Ini membuktikan nilai besar CLI Angular. Menggunakan alat ini dapat meningkatkan produktivitas ke tingkat yang belum pernah saya temui sebelumnya.

Saat ini menjadi sangat sulit untuk membayangkan bekerja tanpa CLI Angular.

▍ Alat skematik

Alat Skema Angular adalah sesuatu yang cenderung digunakan oleh pengembang Angular setiap hari. Misalnya, saya yakin Anda sering menggunakan perintah ini:

ng generate component my-component 

Ini didasarkan pada alat Skema yang dibangun ke dalam CLI Angular.

Mungkin baru bagi Anda bahwa pengembang memiliki kesempatan untuk membuat aturan Skema sendiri. Penggunaannya memudahkan pekerjaan dengan fragmen kode yang sering digunakan.

Pembuat ▍API

Pembuat API memungkinkan Anda untuk memperluas atau memperluas tim yang ada . Misalnya, Anda dapat membuat tim yang menjalankan tes menggunakan Jest dan Cypress, daripada menggunakan Jasmine dan Protractor. Anda dapat, misalnya, menggunakan linter alternatif.

Fitur baru yang menarik dari framework

Pada saat penulisan materi ini, versi 8 Angular telah dirilis, berisi berbagai peningkatan dan fitur baru.

Tidak ada apa pun di sini yang akan secara serius mengubah cara kerangka ini digunakan. Pernyataan serupa tentang versi baru alat biasanya dianggap sebagai berita baik. Namun dalam Angular 8 ada banyak perbaikan yang tidak terlihat, sehingga untuk berbicara, dengan mata telanjang. Berkat mereka, proyek sudut menjadi lebih kecil dan lebih cepat. Perbaikan ini membuat proses pengembangan aplikasi Angular bahkan lebih menyenangkan daripada sebelumnya. Selain itu, versi baru dari kerangka kerja ini memiliki sistem render baru yang hampir siap untuk digunakan penuh.

Loading Pemuatan diferensial

"Pemuatan diferensial", yang dinamai dengan nama teknologi ini, mungkin tampak seperti sesuatu yang sangat rumit, tetapi kenyataannya tidak. Singkatnya, berkat fitur ini, kompiler menghasilkan dua bundel. Salah satunya untuk browser modern. Tidak ada kode polyfill di dalamnya. Yang kedua adalah untuk versi browser yang lebih lama.

Sebagian besar browser terbaru mengunduh bundel modern. Dan browser lama yang membutuhkan rakitan unduhan polyfill yang dirancang khusus untuk mereka.

Ini adalah inovasi yang sangat berguna. Karena sebagian besar pengguna sangat mungkin bekerja di versi browser terbaru, ini mengarah pada fakta bahwa bundel dengan polyfill, lebih besar dari bundel modern, hanya digunakan oleh sejumlah kecil pengguna.

▍ Pekerja Web

Anda mungkin sudah pernah mendengar tentang pekerja web, jadi kami tidak akan membahas penjelasan tentang esensi teknologi ini. Tetapi Anda mungkin tidak tahu betapa mudahnya mengintegrasikan pekerja web ke dalam aplikasi dalam rilis Angular baru. Di sini Anda dapat membaca lebih lanjut tentang ini.

▍ Kotak Alat CDK

CDK adalah toolkit yang dirilis oleh tim yang mengembangkan komponen Angular. Di dalamnya Anda dapat menemukan abstraksi yang digunakan oleh Bahan Angular , yang tidak tergantung gaya.

Misalnya, berkat CDK, pengembang memiliki arahan yang memungkinkan Anda untuk mengimplementasikan fitur-fitur berikut:

• Bekerja dengan objek dalam gaya "Seret dan Jatuhkan".
• Gunakan area teks yang secara otomatis mengubah ukuran.
• Munculan.
• Pengguliran virtual.

CDK adalah alat yang sangat berguna karena kenyataan bahwa sebagian besar aplikasi dapat menggunakan abstraksi luas berkualitas tinggi, yang masing-masing hanya menerapkan fungsi terbatas. Ini jauh lebih baik daripada penggunaan komponen full-blown yang tersebar luas dan tidak selalu dibenarkan. Material Angular adalah seperangkat komponen yang luar biasa, tetapi kekuatan CDK adalah memungkinkannya membuat komponen sendiri dari blok bangunan dasar.

▍ Mesin rendering Ivy

Ivy adalah pengembangan baru yang sangat menarik, yang merupakan mesin rendering. Bekerja pada Ivy belum selesai, secara default mesin ini dinonaktifkan. Tapi, dimulai dengan Angular 7, sudah bisa dinyalakan dan digunakan. Ivy diharapkan menjadi mesin render utama di Angular 9.

Inilah yang dapat Anda harapkan dari mesin Ivy berfitur lengkap:

• Mengurangi ukuran bundel.
• Template Debugging.
• Perakitan proyek lebih cepat, pengujian lebih cepat.
• Koreksi kesalahan yang ada.

Jika kita berbicara tentang debugging, berikut adalah tangkapan layar tempat Anda dapat melihat pemicu breakpoint di konsol Chrome.


Kode debugging

Seperti yang Anda lihat, arahan ngForOf memberi kami informasi tentang nilai yang diteruskan.

Platform sudut dan seluler

OnicIonic

Ionic adalah kerangka kerja untuk mengembangkan aplikasi seluler. Meskipun komponen dasarnya dibuat menggunakan Stensil, mereka memberikan abstraksi pengembang yang memungkinkan Ionic untuk digunakan dengan kerangka kerja Angular dan lainnya.

▍NativeScript

NativeScript adalah kerangka kerja pengembangan aplikasi seluler asli yang mirip dengan React Native. Ini fitur integrasi yang dalam dengan Angular - bersama dengan dukungan Vue dan kemampuan untuk menggunakannya untuk pengembangan dalam JavaScript murni. Sayangnya, pengalaman saya dengannya tidak terlalu berhasil. Saya tidak bisa membandingkannya dengan React Native. Namun, jika Anda serius mengembangkan aplikasi seluler, cobalah NativeScript.

Pengujian

Asmine Melati dan Busur Derajat

Jasmine dan Protractor tidak perlu diperkenalkan. Ini adalah alat standar untuk menguji aplikasi Angular. Mereka diuji dengan baik oleh waktu, diperbarui secara berkala, dan mereka bekerja dengan baik dengan Angular.

▍Jest dan Cypress

Menguji aplikasi Angular dengan Jest dan Cypress dimungkinkan berkat alat baru berdasarkan Pembuat API yang merupakan bagian dari CLI Angular.

Jest adalah kerangka pengujian unit berbasis Jasmine. Ini dikembangkan di Facebook. Ini adalah kerangka kerja standar untuk menguji proyek Bereaksi, didistribusikan secara luas karena kecepatannya. Banyak orang lebih suka menggunakannya di atas Jasmine. Jika Anda cenderung untuk Jest juga - sekarang Anda dapat menggunakannya untuk menguji aplikasi Angular.

Cypress adalah kerangka pengujian aplikasi ujung ke ujung yang sangat dihormati. Bukan kebetulan bahwa komunitas pembangunan memperlakukannya dengan sangat baik. Ini independen dari Selenium atau WebDriver. Cypress memungkinkan Anda untuk bekerja dengan log tim, tahu bagaimana mengatur lalu lintas jaringan. Ini cukup stabil, sehingga Anda dapat berharap bahwa hasil yang diperoleh dengan bantuannya akan sangat dimengerti dan dapat diprediksi.

▍ Kotak Alat Pustaka Pengujian Sudut

Angular Testing Library adalah seperangkat alat untuk menguji komponen antarmuka pengguna dengan fokus pada mereproduksi tindakan pengguna.

Ini berarti bahwa perpustakaan ini mendorong pemrogram untuk memastikan bahwa ia tidak bekerja dengan komponen secara terprogram. Ini bertujuan untuk menguji perilaku komponen. Perpustakaan melakukan tindakan yang biasanya dilakukan pengguna.

Misalnya, ketika bekerja dengan alat dari perpustakaan ini, konstruksi seperti itu tidak digunakan:

 myComponent.onClick(); 

Sebaliknya, perilaku alami pengguna disimulasikan:

 const { getByText, click } = await render(CounterComponent, {    componentProperties: { counter: 5 } }); click(getByText('+')); 

Manajemen negara

▍NgRx

NgRx adalah perpustakaan untuk mengelola keadaan aplikasi, dibuat di bawah pengaruh gagasan yang tertanam di Redux. NgRx kemungkinan besar perpustakaan manajemen negara yang paling banyak digunakan dalam pengembangan Angular. Nama perpustakaan menunjukkan bahwa ia menggunakan aliran RxJ secara serius.

▍NGXS

NGXS adalah pustaka alternatif untuk mengelola status dalam aplikasi Angular, mirip dengan Redux. Jika Anda membandingkan NGXS dan RxJS, ternyata fitur-fitur NGXS adalah bahwa ia menggunakan banyak kelas dan dekorator. Ini dilakukan untuk mengurangi jumlah kode boilerplate. Mungkin, fitur NGXS ini bisa menentukan ketika memilih perpustakaan untuk mengelola negara jika seseorang yang mencari perpustakaan seperti itu digunakan untuk menggunakan kelas.

KAkita

Akita adalah perpustakaan manajemen negara yang dikembangkan oleh Datorama. Perpustakaan ini juga didasarkan pada RxJS. Jika Anda membandingkannya dengan dua pustaka sebelumnya, ternyata fiturnya adalah bahwa ia dapat digunakan dalam proyek-proyek di mana Angular tidak digunakan. Ini berarti bahwa memilih perpustakaan Akita dalam jangka panjang dapat meningkatkan peluang untuk menggunakan kembali kode proyek.

▍ Mungkin hanya mengambil RxJ?

Saya dapat memberikan jawaban positif untuk pertanyaan yang diajukan dalam judul bagian ini. Itu semua tergantung pada apakah Anda suka perpustakaan yang mengingatkan pada Redux, dan apakah proyek tersebut membutuhkan perpustakaan untuk mengelola negara. Jika diinginkan, Anda dapat membuat layanan yang menyimpan status menggunakan alat RxJS standar.

Perpustakaan Komponen Antarmuka Pengguna

▍StoryBook

StoryBook sebenarnya bukan perpustakaan komponen UI. Ini adalah alat yang memungkinkan Anda untuk membuat komponen terisolasi dan memungkinkan untuk mempelajari komponen dan variasinya.

Ini adalah alat yang hebat. Sebelumnya, itu hanya tersedia untuk Bereaksi pengembang. Aku iri pada mereka. Tapi sekarang pengembang Angular dapat menggunakannya, jadi saya tidak bisa tidak menyebutkannya.

Bahan Materialngular

Di sini kita akan mengatakan beberapa kata tentang perpustakaan Bahan Angular terkenal, yang memberikan tangan pengembang modern seperangkat komponen bagus yang dirancang untuk versi terbaru Angular.

Backends untuk Aplikasi Sudut

IrFirebase

Firebase adalah platform pengembangan aplikasi yang dimiliki oleh Google. Konsekuensi dari ini adalah bahwa ada perpustakaan resmi untuk Firebase dan Angular - AngularFire . Perpustakaan ini menggunakan RxJS yang dapat diamati untuk mengalirkan data. Ini terintegrasi secara mendalam dan efisien dengan Angular.

RaphGraphQL

Mungkin Anda berpikir bahwa kesenangan bekerja dengan GraphQL hanya tersedia untuk Bereaksi programmer. Jika demikian, maka Anda salah. Ada versi perpustakaan Apollo untuk Angular juga. Apa yang dapat Anda buat dengan perpustakaan ini adalah alternatif yang bagus untuk Firebase. Apollo diperuntukkan bagi mereka yang lebih suka bekerja dengan GraphQL.

EstNestJS

NestJS adalah kerangka kerja web untuk Node.js yang dirancang untuk mengembangkan aplikasi server. Dari contoh-contoh itu, kita dapat menyimpulkan bahwa konsep dasar Angular memiliki pengaruh besar padanya. Ini adalah modul, pengontrol, konveyor, dan sebagainya. Jika Anda suka Angular, maka Anda mungkin akan menyukai NestJS juga.

Jika Anda menggunakan Nx Workspaces , kemudian membuat kerangka kerja untuk aplikasi tumpukan penuh berdasarkan Angular dan NestJS adalah masalah mengeksekusi satu perintah di konsol.

Ringkasan

Sebagai hasilnya, kita dapat mengatakan bahwa ekosistem luas yang telah berkembang di sekitar Angular menawarkan semua orang yang menginginkan alat berkualitas tinggi dan andal untuk memecahkan berbagai masalah.

Tentu saja, saya tidak bisa memberi tahu di sini tentang lusinan perpustakaan dan alat favorit saya. Jika saya melakukan ini, materi ini tidak akan ada habisnya. Tapi saya harap artikel ini memberi Anda gambaran tentang fenomena pengembangan web modern yang disebut Angular. Saya berharap di sini Anda telah menemukan sesuatu yang, di masa depan, dapat Anda gunakan dalam proyek Anda.

Pembaca yang budiman! Apa yang paling Anda sukai (atau tidak suka) di Angular 8?