Ionic 2 vs. Ionic 1: Peningkatan Performa, Alat Baru, dan Langkah Besar ke Depan

Proyek Ionic dengan cepat mendapatkan popularitas. Dengan lebih dari 27.000 bintang di GitHub, itu telah meningkat menjadi salah satu dari 50 proyek sumber terbuka paling populer di seluruh dunia.

Dan karena versi stabil Ionic 2 baru-baru ini diumumkan, inilah saat yang tepat bagi para insinyur untuk menganalisis dan memahami perbedaan antara Ionic 2 dan Ionic 1.

Pada level tinggi, Ionic 2 adalah penulisan ulang lengkap dari proyek Ionic 1 dengan Angular >= 2.x. Dari pengalaman saya selama 2+ tahun menggunakan Ionic 1, inilah artinya secara praktis.

Performa Deteksi Perubahan yang Ditingkatkan

Ionic 1 didasarkan pada Angular 1.x, dan Ionic 2 didasarkan pada Angular >= 2.x. Peningkatan kinerja yang Anda dapatkan hanya dengan menggunakan Angular >= 2.x saja sudah signifikan.

Dengan Angular 1.x, untuk mendapatkan aplikasi yang berkinerja baik diperlukan banyak pengetahuan kerangka kerja yang mendalam (seperti $watch , One-time binding, dan sebagainya). Dengan Angular >= 2.,x aplikasi cukup berkinerja di luar kotak.

Versi baru Angular menjatuhkan siklus intisari yang terkenal dan dicela (melacak dan menguji setiap variabel aplikasi di setiap perubahan). Sebaliknya, Angular >= 2.x bergantung pada Zone.js untuk melacak perubahan aplikasi (baik sinkron maupun asinkron).

Ubah Deteksi di Angular >= 2.x perlu ditelusuri untuk memahami cara kerja segala sesuatunya. Di Angular >= 2.x, deteksi perubahan selalu dilakukan dari atas ke bawah. Menggunakan strategi deteksi perubahan yang tepat ( OnPush atau Default ) dalam komponen Anda sendiri adalah sangat penting jika Anda ingin mengontrol kinerja aplikasi Anda.

Semua komponen Ionic 2 menggunakan strategi OnPush , artinya deteksi perubahan tidak dilakukan setiap saat, melainkan hanya ketika input berubah. Strategi ini juga menghindari rendering subpohon komponen yang tidak perlu. Ini pada dasarnya sudah dioptimalkan untuk Anda.

Jika Anda ingin tahu lebih banyak tentang cara mendapatkan aplikasi Ionic1 yang berkinerja baik, saya sarankan membaca lembar contekan kinerja Ultimate AngularJS dan Ionic ini.

Kinerja DOM lebih cepat

Manipulasi Angular Document Object Model (DOM) telah banyak berkembang. Jika Anda menginginkan Antarmuka Pengguna (UI) reaktif, manipulasi DOM dan kinerja JavaScript adalah penting.

Misalnya, membuat 1.000 baris dalam tabel membutuhkan waktu 126 milidetik dengan JavaScript vanilla, 110% lebih banyak (264 md) dengan Angular. 1.x, dan hanya 40% lebih (177 md) dengan Angular >= 2. Seperti yang Anda lihat, kinerja Angular >= 2.x lebih baik daripada Angular 1.x, dan mirip dengan kinerja React.

Ionic 2, sekali lagi, mendapat manfaat dari peningkatan kinerja ini, dan melakukannya "gratis".

API Animasi Web Baru

Ionic 1 dan Ionic 2 masih mengandalkan animasi CSS untuk transisi dan animasi internal, tetapi karena Ionic 2 didasarkan pada Angular >= 2.x, pengembang memiliki akses ke Web Animations (W3C) API melalui sistem animasi Angular.

Web Animations API adalah JavaScript API yang menyediakan akses bagi pengembang ke mesin animasi browser. Ini belum didukung di semua browser, tetapi dengan polyfill Anda dapat menggunakannya sekarang dan menikmati salah satu cara paling berkinerja dan menjanjikan untuk menganimasikan Web.

Sumber

Angular >= 2.x Animation API memungkinkan Anda mendeskripsikan animasi kompleks dengan mudah (masuk dan keluar dari status atau animasi grup yang berbeda) dan memberi Anda akses ke siklus hidup animasi melalui callback.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Pengguliran Asli bawaan

Pengguliran asli memungkinkan Ionic 2 mendengarkan peristiwa pengguliran pada WebView yang didukung. Itu membuat
Pull to Refresh , List Reordering , atau Infinite Scroll mungkin tanpa meniru peristiwa tersebut (pengguliran JavaScript).

Sampai sekarang, pengguliran JavaScript diperlukan, tetapi WebView Chromium (Android) dan WKWebView (iOS) telah berevolusi dan sekarang mendukung pengguliran asli. Ini hanya diaktifkan secara default di Android dengan Ionic 1 (sejak Desember 2015) dan diaktifkan di semua platform dengan Ionic 2.

Dukungan pengguliran asli menghadirkan kinerja yang lebih baik dan meningkatkan pengalaman pengguna dengan membantu memastikan pengguliran yang mulus berkat peristiwa asinkron.

API Komponen yang Ditingkatkan

Ionic 2 memberi Anda akses ke semua komponen yang membuat Ionic 1 terkenal, tetapi sekarang ditingkatkan dan berdasarkan Angular >= 2.x. Berikut adalah daftar komponen yang paling umum:

• Tombol
• Kartu
• ikon
• Daftar
• Tidak bisa
• Modal
• Bilah Alat

Komponen API sedikit berubah antara Ionic 1 dan Ionic 2. Misalnya, komponen ion-spinner Ionic 1 menggunakan atribut icon untuk tipe spinner:

 <ion-spinner icon="bubbles"></ion-spinner>

Sedangkan Ionic 2 menggunakan atribut name :

 <ion-spinner name="bubbles"></ion-spinner>

Seperti yang Anda lihat, jika Anda terbiasa dengan API komponen Ionic 1, Anda juga akan merasa nyaman menggunakan komponen Ionic 2. Anda hanya perlu menyadari perbedaan ini.

Dengan daftar komponen yang mengesankan, semua yang dapat Anda lakukan dengan Ionic 1 dapat dilakukan dengan Ionic 2, dan bahkan lebih.

Pengenalan Pekerja Web

Pekerja Web mengizinkan aplikasi Anda untuk menjalankan skrip di utas JavaScript latar belakang. Pekerja dapat melakukan tugas yang membosankan dan permintaan HTTP di luar konteks aplikasi Anda (yaitu, tanpa mengganggu antarmuka pengguna). Saat ini, Pekerja Web didukung oleh semua browser utama.

Secara tradisional, semua kerangka kerja dibangun di atas, dan diandalkan, window dan objek document . Namun, pada pekerja keduanya tidak tersedia. Dengan arsitektur Angular >=2 baru yang memisahkan renderer , menjalankan aplikasi di dalam Web Workers (atau platform lain dalam hal ini) menjadi lebih mudah.

Ionic 2 mulai bereksperimen dengan penggunaan Web Worker dengan komponen ion-img baru. Untuk saat ini, ion-img hanya dapat digunakan dalam daftar VirtualScroll. Ini mendelegasikan panggilan HTTP gambar ke Pekerja Web, dan juga mendukung pemuatan lambat (yaitu, hanya mengambil dan merender gambar di viewport). Aplikasi web Anda sekarang hanya berfokus pada UI dan membiarkan pekerja melakukan sisanya.

Berikut adalah contoh cara menggunakannya:

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

Ingatlah bahwa ini baru permulaan dan kami berharap untuk melihat lebih banyak penggunaan atau Pekerja Web dalam waktu dekat.

Keuntungan TypeScript

Jika Anda telah menggunakan Ionic 2, Anda sudah tahu bahwa itu menggunakan TypeScript. TypeScript adalah superset dari JavaScript ES2015 yang dikompilasi ke JavaScript biasa. Dengan TypeScript, Anda memiliki akses ke semua fitur uniknya (seperti antarmuka, mixin, dan sebagainya) dan fitur ES2015 (seperti fungsi panah, generator, string multiline, dan sebagainya).

Mari kita lihat contoh komponen Angular >= 2.x yang menampilkan nama presiden Amerika Serikat:

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

Kami menggunakan Interface ( IPresident ) yang menggambarkan bentuk Object presiden. Sangat menarik untuk memiliki antarmuka yang menjelaskan apa yang Anda manipulasi, terutama jika ada beberapa pengembang dalam suatu proyek. Jika Anda membuat kesalahan dan, misalnya, menggunakan boolean untuk nama presiden, IDE Anda akan memberi tahu Anda bahwa ada sesuatu yang salah bahkan sebelum kompilasi terjadi.

Di hampir semua IDE yang Anda gunakan (Visual Studio Code, Atom, WebStorm, atau sejenisnya), Anda akan menemukan plugin untuk mengaktifkan pelengkapan otomatis, pemeriksaan jenis, dan linter.

TypeScript adalah keuntungan nyata untuk Ionic 2, karena membuat kode Anda lebih mudah dipahami, membantu Anda menghindari kesalahan ketik, dan membantu Anda menjadi lebih produktif (melalui fitur seperti pelengkapan otomatis, impor modul otomatis, definisi tooltip saat mengarahkan kursor, dan CTRL + Click untuk pergi ke definisi).

Semua CLI Baru v2

Ionic CLI v2 menambahkan cara untuk menghasilkan Halaman, Komponen, Pipa, dan Arahan, langsung melalui baris perintah.

Misalnya, jika Anda ingin membuat halaman baru bernama MyPage , berikut adalah perintah yang dapat Anda jalankan:

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

Perintah akan mengikuti konvensi dan membuat tiga file untuk Anda:

File HTML untuk template Anda. File SASS untuk gaya komponen Anda. File TypeScript untuk logika komponen Anda.

Berikut adalah tampilan file my-page.ts yang dihasilkan:

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

Menegakkan konvensi melalui penggunaan CLI sangat bagus saat Anda bekerja dalam tim. Angular 2.x dan Ionic 2 melakukan pekerjaan yang baik untuk membantu menumbuhkan pemahaman yang lebih baik tentang arsitektur aplikasi Angular yang seharusnya. Tentu saja, Anda bebas untuk menyimpang dari konvensi, jika Anda mau.

Kemasan yang Ditingkatkan

Ionic 1 mengandalkan ekosistem Gulp untuk menggabungkan aplikasi, sementara Ionic 2 memungkinkan Anda memilih alat favorit Anda. Ionic 2 menyediakan koleksi alatnya sendiri sebagai proyek terpisah: ionic-app-scripts.

ionic-app-scripts didasarkan pada gagasan bahwa pengembang tidak perlu khawatir tentang konfigurasi pengemasan sama sekali. Satu-satunya ketergantungan terkait pengemasan yang akan dimiliki proyek Anda dengan Ionic 2 adalah @ionic/app-scripts . Secara default, ini menggunakan Webpack tetapi Anda juga dapat menggunakan Rollup.

Dengan Ionic 2 dan CLI v2, assets , serta file TypeScript, tinggal di folder src yang sama. www sekarang dihasilkan selama setiap pembuatan dan oleh karena itu harus dihapus dari pelacakan kontrol versi.

Pengenalan Alat Pelaporan Kesalahan

CLI baru juga memperkenalkan alat Pelaporan Kesalahan yang hebat. Untuk mendapatkannya, Anda perlu menginstal versi Ionic >= 2.1:

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

Sekarang setiap kali Anda memiliki kesalahan, modal akan muncul dengan informasi yang berarti tentangnya. Sebagai contoh:

Diberitahu tentang kesalahan runtime sesegera mungkin selama pengembangan sangat berharga dan Ionic 2 telah melakukan pekerjaan yang baik dalam hal ini.

Manfaat Kompilasi Ahead of Time (AoT)

Ahead of Time Compilation (AoT) adalah sebuah revolusi kecil dalam ekosistem Angular. Diperkenalkan dengan Angular 2.x, AoT memungkinkan templat untuk dikompilasi sebelumnya dalam langkah pembuatan, alih-alih dikompilasi dengan cepat oleh browser.

Meskipun ini mungkin tidak tampak seperti perbedaan besar, itu sebenarnya. Dengan AoT, kita tidak perlu mengirimkan kompiler template dengan aplikasi. Ini memiliki dua keuntungan. Pertama, bundel akan lebih kecil, yang berdampak langsung pada jaringan dan oleh karena itu membuat aplikasi Anda lebih cepat untuk diunduh. Kedua, aplikasi akan bootstrap lebih cepat karena kompilasi template on-the-fly tidak lagi diperlukan.

Ionic 2 memanfaatkan sepenuhnya Angular 2.x AoT untuk mengoptimalkan ukuran dan waktu pemuatan aplikasi Anda secara gratis.

Ionic 2 Adalah Langkah Besar ke Depan

Secara keseluruhan, Ionic 2 adalah langkah maju yang besar untuk industri seluler hybrid. Meskipun rangkaian komponen Ionic 2 mirip dengan komponen Ionic 1, Ionic 2 menawarkan banyak alat dan peningkatan kinerja.

Memang, dengan alat seperti TypeScript, ionic-app-scripts dan Ionic CLI, pengembang Ionic 2 bisa lebih produktif, dapat menghasilkan kode yang lebih mudah dipelihara, dan diperingatkan akan kesalahan runtime segera setelah terjadi.

Ionic 2 juga memberikan peningkatan kinerja gratis dibandingkan dengan Ionic 1, khususnya dengan menghilangkan atau mengurangi kemacetannya (terkait dengan deteksi perubahan, animasi, waktu pemuatan, dan sebagainya).

Dengan Ionic 2, aplikasi Anda akan terasa lebih asli dari sebelumnya. Keluarkan untuk berputar. Anda akan senang melakukannya.