Isi
- 01. Jalankan pemeriksaan versi
- 02. Instal Angular
- 03. Buat kerangka proyek
- 04. Memanfaatkan pembebanan diferensial
- 05. ... dan lihat hasilnya
- 06. Menelurkan pekerja web
- 07. Jelajahi kodenya
- 08. Menyiapkan perancah
- 09. Jangan khawatir tentang kekurangan konstruktor
- 10. Jalankan proses kompilasi kecil
- 11. ... dan temukan hasilnya
- 12. Mulai bekerja
- 13. Jelajahi Ivy
- 14. Coba modifikasi pemrosesan ng
- 15. Nikmati migrasi yang lebih baik
- 16. Jelajahi kontrol ruang kerja
- 17. Mempercepat proses
- 18. Hindari orang mati berjalan
- 19. Lihat log perubahan
Angular 8 adalah versi terbaru Google's Angular - salah satu kerangka kerja JavaScript terbaik yang pernah ada. Dalam artikel ini, kita akan membahas apa yang spesial tentang Angular 8, dan menunjukkan cara memulainya. Pertama, lihat sekilas kembali apa yang terjadi dengan framework tersebut sejauh ini.
Pengenalan Angular menyebabkan pergeseran paradigma dalam pengembangan web: sementara sebagian besar perpustakaan membatasi diri untuk memberikan dukungan kepada pengembang dengan pengaruh arsitektur yang relatif terbatas, tim pengembang Angular mengambil arah lain. Produk mereka memaksa Anda untuk menggunakan arsitektur tertentu, dengan penyimpangan mulai dari yang sulit hingga tidak berguna secara komersial. Faktanya, sebagian besar kode Angular berjalan melalui toolchain transpilasi yang relatif kompleks sebelum mencapai browser.
Karena kesuksesan besar Angular, baik di dalam maupun di luar Google Inc, pengembangan - pada umumnya - menjadi stabil. Ini berarti sedikit perubahan kode yang melanggar, sedangkan peningkatan tengah tahunan difokuskan pada adaptasi kerangka kerja terhadap perubahan dalam lanskap penjelajahan web.
Dalam kasus Angular 8, misalnya, compiler JavaScript baru diterapkan (meskipun masih secara eksperimental). Ini mengoptimalkan kode kompatibilitas yang dihasilkan menjadi jauh lebih kecil dan lebih cepat dengan mengorbankan browser lama. Selain itu, dukungan Web Worker diintegrasikan untuk meningkatkan kemampuan pemrosesan Angular. Singkatnya, ada banyak hal yang bisa dilihat - jadi mari kita selami.
Jika Anda lebih suka mendesain situs tanpa kode, cobalah salah satu pembuat situs web yang mudah ini. Dan untuk membuat semuanya berjalan lebih lancar, lakukan layanan hosting web Anda dengan benar.
01. Jalankan pemeriksaan versi
Toolchain Angular ada di dalam lingkungan NodeJS. Saat tulisan ini dibuat, Node.js 10.9 atau yang lebih baik diperlukan - jika Anda menggunakan versi yang lebih lama, kunjungi situs web Node.js dan dapatkan peningkatan. Kode di bawah ini menunjukkan status versi pada mesin ini.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instal Angular
Toolchain Angular berada di utilitas baris perintah bernama ng. Itu dapat diinstal melalui NPM terkenal.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versi
Berhati-hatilah untuk menjawab pertanyaan yang ditunjukkan pada gambar di bawah ini.
Mendapatkan info versi dari alat ini cukup sulit - sintaksnya tidak hanya unik, tetapi hasilnya juga bertele-tele (lihat gambar di bawah).
03. Buat kerangka proyek
ng menghasilkan perancah Angular untuk kita. Pada langkah-langkah berikut, kami ingin menambahkan perutean, dan menggunakan Sass untuk transpilasi CSS. Jika penerapan gagal karena alasan tertentu, kosongkan direktori kerja, dan mulai ulang ng dengan hak superuser.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng workertest baru
04. Memanfaatkan pembebanan diferensial
Versi baru Angular mengoptimalkan kode kompatibilitas mundur untuk mengurangi dampak - sebuah file bernama daftar browser memungkinkan Anda memutuskan browser mana yang akan didukung. Buka daftar browser dan hapus kata tersebut tidak di depan IE 9 hingga IE11.
. . . > 0,5% 2 versi terakhir Firefox ESR tidak mati IE 9-11 # Untuk dukungan IE 9-11, hapus 'tidak'.
05. ... dan lihat hasilnya
Pesan kompilasi proyek, ubah ke folder distribusi dan bersihkan file peta yang tidak dibutuhkan.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Panggil pohon untuk melihat hasilnya - ng membuat beberapa versi dari berbagai file kode (lihat gambar di bawah).
06. Menelurkan pekerja web
Pekerja web membiarkan JavaScript memasuki batas terakhir aplikasi asli: pemrosesan tugas yang paralel secara masif. Dengan Angular 8, pekerja web dapat dibuat langsung dari kenyamanan ng utilitas baris perintah.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng menghasilkan web-worker myworker BUAT tsconfig.worker.json (212 byte) BUAT src / app / myworker.worker.ts (157 byte) UPDATE tsconfig.app.json (236 byte ) PERBARUI angular.json (3640 byte)
07. Jelajahi kodenya
ngKeluarannya mungkin terlihat mengintimidasi pada pandangan pertama. Membuka file src / app / myworker.worker.ts di editor kode pilihan mengungkapkan kode yang harus Anda ketahui dengan baik dari WebWorker spesifikasi. Pada prinsipnya, pekerja menerima pesan dan memprosesnya sesuai kebutuhan.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Menyiapkan perancah
Aplikasi sudut terdiri dari komponen. Memecat pekerja web kami paling baik dilakukan di dalam AppComponent, yang diperluas untuk menyertakan pendengar untuk OnInit peristiwa. Untuk saat ini, itu hanya akan memancarkan informasi status.
impor {Komponen, OnInit} dari ’@ angular / core’; @Component ({..}) Kelas ekspor AppComponent mengimplementasikan OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Jangan khawatir tentang kekurangan konstruktor
Pengembang TypeScript berpengalaman bertanya pada diri sendiri mengapa kode kami tidak menggunakan konstruktor yang disediakan oleh bahasa pemrograman. Alasannya adalah itu ngOnInit adalah peristiwa siklus hidup yang dijalankan setiap kali peristiwa inisialisasi terjadi - ini tidak perlu dikaitkan dengan pemanggilan kelas.
10. Jalankan proses kompilasi kecil
Pada saat ini, program siap dijalankan. Kami akan menjalankannya dari server di dalam ng, yang bisa dipanggil melalui perintah serve. Aspek rapi dari pendekatan ini adalah bahwa program mendeteksi perubahan dan menyusun ulang proyek dengan cepat.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Perhatikan gambar untuk melihat ini beraksi pada gambar di bawah.
11. ... dan temukan hasilnya
ng melayani putputs alamat server web lokalnya, yang biasanya http: // localhost: 4200 /. Buka halaman web dan buka alat pengembang untuk melihat keluaran status. Ingatlah itu console.log mengeluarkan data ke konsol browser dan membiarkan konsol instance NodeJS tidak tersentuh.
12. Mulai bekerja
Pada titik ini, kami membuat instance pekerja dan memberinya pesan. Hasilnya kemudian ditampilkan di konsol browser.
if (typeof Worker! == ’undefined’) {// Buat const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’halaman mendapat pesan: $ {data }’); }; worker.postMessage (’hello’); } else {console.log ("Tidak ada dukungan pekerja"); }
13. Jelajahi Ivy
Versi Angular yang akan datang akan menggunakan kompiler yang lebih canggih, yang mengarah ke tampilan yang lebih kecil. Meskipun produknya belum selesai, kerangka berkemampuan ivy dapat dimunculkan melalui ng proyek ivy baru - aktifkan-ivy. Alternatifnya, ubah pengaturan kompilator seperti yang ditunjukkan dalam cuplikan.
"angularCompilerOptions": {"enableIvy": true}
Peringatan: Ivy menyebabkan pengurangan ukuran yang luar biasa, tetapi tidak gratis. Produk belum stabil, jadi tidak disarankan untuk menggunakannya di lingkungan yang produktif.
14. Coba modifikasi pemrosesan ng
Angular's ng alat baris perintah menggunakan skrip anak secara internal untuk beberapa waktu. Angular 8 meningkatkan taruhan yang sekarang Anda dapat, juga, menggunakan fasilitas ini untuk menjalankan tugas Anda sendiri saat aplikasi Anda dirakit dan dikompilasi.
"arsitek": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Satu aplikasi rapi ng skrip melibatkan pengunggahan langsung aplikasi ke layanan cloud. Repositori Git menyediakan skrip berguna yang mengupload pekerjaan Anda ke akun Firebase.
15. Nikmati migrasi yang lebih baik
Pengembang yang bermigrasi dari Angular 1.x, juga dikenal sebagai AngularJS, memiliki cukup banyak masalah dalam membuat navigator bekerja dengan benar di aplikasi 'gabungan'. Layanan Lokasi Terpadu yang baru bertujuan untuk membuat proses ini lebih lancar.
16. Jelajahi kontrol ruang kerja
Proyek besar mendapat manfaat dari kemampuan untuk mengubah struktur ruang kerja secara dinamis. Ini dilakukan melalui Workspace API baru yang diperkenalkan di Angular 8.0 - cuplikan yang menyertai langkah ini memberikan gambaran umum singkat tentang perilaku tersebut.
fungsi async demonstrasikan () {const host = ruang kerja. createWorkspaceHost (NodeJsSyncHost baru ()); const workspace = menunggu ruang kerja. readWorkspace (’jalur / ke / ruang kerja / direktori /’, host); proyek const = workspace.projects. dapatkan ('aplikasi-saya'); const buildTarget = proyek.target. get (’build’); buildTarget.options.optimization = true; menunggu workspaces.writeWorkspace (workspace, host); }
17. Mempercepat proses
Membangun basis kode JavaScript yang besar membosankan. Versi AngularJS yang akan datang akan menggunakan sistem build Bazel Google untuk mempercepat proses - sayangnya, pada saat penulisan, sistem ini belum siap untuk prime time.
18. Hindari orang mati berjalan
Meskipun Google sangat berhati-hati untuk tidak merusak kode, beberapa fitur hanya perlu dihapus karena tidak lagi diperlukan. Periksa daftar penyusutan ini untuk mempelajari lebih lanjut tentang fitur yang harus dihindari.
19. Lihat log perubahan
Seperti biasa, satu artikel tidak akan pernah berlaku adil untuk seluruh rilis. Untungnya, log perubahan ini memberikan daftar mendetail dari semua perubahan - kalau-kalau Anda ingin memeriksa denyut nadi fitur yang sangat Anda sukai.
Punya banyak file yang siap diunggah ke situs Anda? Cadangkan di penyimpanan cloud paling andal.
Artikel ini awalnya diterbitkan di majalah desain web kreatif Desainer web.
