Το έργο Ionic κερδίζει γρήγορα δημοτικότητα. Με περισσότερα από 27.000 αστέρια στο GitHub, έχει εξελιχθεί σε ένα από τα 50 δημοφιλέστερα έργα ανοιχτού κώδικα παγκοσμίως.

δωρεάν χακαρισμένες πιστωτικές κάρτες με χρήματα 2017

Και από τη σταθερή έκδοση του Ιωνικό 2 ήταν πρόσφατα ανακοίνωσε , είναι η ιδανική στιγμή για τους μηχανικούς να αναλύσουν και να κατανοήσουν τις διαφορές μεταξύ των Ionic 2 και Ιωνικό 1 .

Σε υψηλό επίπεδο, το Ionic 2 είναι μια πλήρης επανεγγραφή του έργου Ionic 1 με Angular> = 2.x. Από τα 2+ χρόνια εμπειρίας μου με τη χρήση του Ionic 1, εδώ τι σημαίνει αυτό στην πράξη.

Ενισχυμένη απόδοση ανίχνευσης αλλαγών

Το Ionic 1 βασίζεται στο Angular 1.x και το Ionic 2 βασίζεται στο Angular> = 2.x. Η ενίσχυση της απόδοσης που λαμβάνετε μόνο χρησιμοποιώντας Angular> = 2.x μόνο είναι σημαντική.

Με το Angular 1.x, για να αποκτήσετε εκτελεστικές εφαρμογές απαιτούνται πολλές βαθιές γνώσεις πλαισίου (όπως $watch, One-time binding και ούτω καθεξής). Με το Angular> = 2., οι εφαρμογές x είναι αρκετά αποτελεσματικές.

Η νέα έκδοση του Angular έριξε τον περίφημο και αποξηραμένο κύκλο χώνευσης (παρακολούθηση και δοκιμή κάθε μεταβλητής της εφαρμογής σε κάθε αλλαγή). Αντ 'αυτού, βασίζεται το Angular> = 2.x Zone.js για να παρακολουθείτε τις αλλαγές εφαρμογών (τόσο σύγχρονες όσο και ασύγχρονες).

Αλλαγή ανίχνευσης σε γωνιακό> = 2.x αξίζει να εξερευνήσετε για να κατανοήσετε πώς λειτουργούν τα πράγματα κάτω από την κουκούλα. Στο Angular> = 2.x, η ανίχνευση αλλαγών πραγματοποιείται πάντα από πάνω προς τα κάτω. Χρησιμοποιώντας τη σωστή στρατηγική ανίχνευσης αλλαγών (OnPush ή Default) στα δικά σας στοιχεία είναι υψίστης σημασίας εάν θέλετε να ελέγξετε την απόδοση της εφαρμογής σας.

Όλα τα συστατικά Ionic 2 χρησιμοποιούν το OnPush στρατηγική, που σημαίνει ότι η ανίχνευση αλλαγών δεν πραγματοποιείται συνεχώς αλλά, αντίθετα, μόνο όταν αλλάζουν οι είσοδοι. Αυτή η στρατηγική αποφεύγει επίσης την άσκοπη απόδοση των υποδέντρων των στοιχείων. Βασικά έχει ήδη βελτιστοποιηθεί για εσάς.

Αν θέλετε να μάθετε περισσότερα σχετικά με τον τρόπο λήψης μιας εκτελεστικής εφαρμογής Ionic1, προτείνω να το διαβάσετε Ultimate AngularJS και Ionic cheat sheet απόδοσης .

Ταχύτερη απόδοση DOM

Ο χειρισμός του Angular Document Object Model (DOM) έχει εξελιχθεί πολύ. Εάν θέλετε ένα αντιδραστικό περιβάλλον εργασίας χρήστη (UI), χειρισμός DOM και Απόδοση JavaScript είναι σημαντικό.

	Γωνιακό v1.5.8	Γωνιακό v2.2.1	Αντίδραση v15.4.0	VanillaJS
Δημιουργία 1k σειρών	264.96	177.07	177.58	126.05
Ενημέρωση 10k σειρών	251.32	178.76	187.73	54.23
Αφαίρεση σειράς	54.13	50.59	50.57	36.93
Δημιουργία 10k σειρών	2247.40	1776.01	1839.46	1217.30
Προσθήκη 1k σειρών σε έναν πίνακα 10k-σειρών	388.07	278.94	311.43	233.57
Εκκαθάριση πίνακα 10k-σειρών	650.28	320.76	383.62	199.67

Για παράδειγμα, η δημιουργία 1.000 σειρών σε έναν πίνακα διαρκεί 126 χιλιοστά του δευτερολέπτου με JavaScript βανίλιας, 110% περισσότερο (264ms) με το Angular. 1.x και μόνο 40% περισσότερο (177ms) με γωνιακό> = 2. Όπως μπορείτε να δείτε, η απόδοση του Angular> = 2.x είναι καλύτερη από το Angular 1.x και είναι παρόμοια με την απόδοση του React.

Το Ionic 2, για άλλη μια φορά, επωφελείται από αυτήν την αναβάθμιση απόδοσης και το κάνει «δωρεάν».

Το API Νέων Web Animations

Τα Ionic 1 και Ionic 2 εξακολουθούν να βασίζονται σε κινούμενες εικόνες CSS για εσωτερικές μεταβάσεις και κινούμενα σχέδια, αλλά καθώς το Ionic 2 βασίζεται στο Angular> = 2.x, οι προγραμματιστές έχουν πρόσβαση στο νέο API κινούμενων σχεδίων Ιστού (W3C) μέσω του Γωνιακό σύστημα κίνησης .

Το Web Animations API είναι ένα API JavaScript που παρέχει στους προγραμματιστές πρόσβαση στη μηχανή κινούμενων σχεδίων του προγράμματος περιήγησης. είναι δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης ακόμα, αλλά με ένα polyfill μπορείτε να το χρησιμοποιήσετε τώρα και να απολαύσετε έναν από τους πιο αποδοτικούς και πολλά υποσχόμενους τρόπους για την κίνηση του Ιστού.

Πηγή

Το Angular> = 2.x API animation σάς επιτρέπει να περιγράφετε εύκολα πολύπλοκες κινούμενες εικόνες (είσοδο και έξοδο από διαφορετικές καταστάσεις ή ομαδικές κινούμενες εικόνες) και σας δίνει πρόσβαση στον κύκλο ζωής κινούμενων σχεδίων μέσω επιστροφών κλήσεων.

@Component({ template: `

• {{hero.name}}

`, 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%)' })) ]) ]) ] })

Ενσωματωμένη εγγενής κύλιση

Η εγγενής κύλιση επιτρέπει στο Ionic 2 να ακούει συμβάντα κύλισης σε υποστηριζόμενες προβολές Web. Κάνει
Pull to Refresh, List Reordering, ή Infinite Scroll δυνατή χωρίς να μιμηθείτε αυτά τα συμβάντα (κύλιση JavaScript).

Εγγενής κύλιση
Ιωνικό 1	Ιωνικό 2
️ Android	️ Android
iOS	️ iOS
Windows Phone	️ Windows Phone

Μέχρι τώρα, ήταν απαραίτητη η κύλιση JavaScript, αλλά Chromium (Android) και WKWebView (iOS) Οι προβολές Web έχουν εξελιχθεί και υποστηρίζουν πλέον την εγγενή κύλιση. Ενεργοποιείται μόνο από προεπιλογή σε Android με Ionic 1 (από τον Δεκέμβριο του 2015) και ενεργοποιείται σε όλες τις πλατφόρμες με το Ionic 2.

Η υποστήριξη εγγενούς κύλισης προσφέρει καλύτερη απόδοση και βελτιώνει την εμπειρία χρήστη βοηθώντας στην εξασφάλιση ομαλής κύλισης χάρη στα ασύγχρονα συμβάντα.

Βελτιωμένο API στοιχείων

Το Ionic 2 σας δίνει πρόσβαση σε όλα συστατικά που έκανε το Ionic 1 διάσημο, αλλά τώρα βελτιώνονται και βασίζονται στο Angular> = 2.x. Εδώ είναι η λίστα των πιο κοινών στοιχείων:

• Κουμπί
• Κάρτα
• Εικόνισμα
• Λίστα
• Μενού
• Κεφάλαιο
• Γραμμή εργαλείων

Το API συστατικών άλλαξε λίγο μεταξύ Ionic 1 και Ionic 2. Για παράδειγμα, Ionic 1 ion-spinner χρήση εξαρτημάτων icon χαρακτηριστικό για τον τύπο κλώστης:

name

Ενώ το Ionic 2 χρησιμοποιεί το window Χαρακτηριστικό:

document

Όπως μπορείτε να δείτε, εάν είστε εξοικειωμένοι με το Ionic 1 συστατικό API, θα νιώσετε άνετα να χρησιμοποιήσετε και τα συστατικά Ionic 2. Απλώς θα πρέπει να γνωρίζετε αυτές τις διαφορές.

Με μια εντυπωσιακή λίστα στοιχείων, όλα όσα μπορείτε να κάνετε με το Ionic 1 είναι εφικτό με το Ionic 2, και ακόμη περισσότερα.

Εισαγωγή εργαζομένων στο Διαδίκτυο

Εργαζόμενοι στο Διαδίκτυο επιτρέψτε στην εφαρμογή σας να εκτελεί σενάρια σε νήματα JavaScript στο παρασκήνιο. Οι εργαζόμενοι μπορούν να εκτελέσουν κουραστικές εργασίες και αιτήματα HTTP εκτός του περιβάλλοντος της εφαρμογής σας (δηλαδή, χωρίς να παρεμβαίνουν στη διεπαφή χρήστη). Σήμερα, οι Εργάτες Ιστού είναι υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης .

Παραδοσιακά, όλα τα πλαίσια χτίστηκαν πάνω από και βασίστηκαν στο renderer και ion-img αντικείμενα. Ωστόσο, στους εργαζομένους δεν είναι διαθέσιμα. Με τη νέα αρχιτεκτονική Angular> = 2 που αποσύνδεσε το ion-img, διευκολύνεται η εκτέλεση της εφαρμογής στο Web Workers (ή σε οποιαδήποτε άλλη πλατφόρμα).

Το Ionic 2 αρχίζει να πειραματίζεται με τη χρήση του Web Workers με το νέο import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{president.name}}

` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; } συστατικό. Προς το παρόν, IPresident μπορεί να χρησιμοποιηθεί μόνο σε ένα VirtualScroll λίστα. Μεταβιβάζει την κλήση HTTP εικόνας στους Εργαζόμενους στο Web και υποστηρίζει επίσης την καθυστερημένη φόρτωση (δηλαδή, μόνο ανάκτηση και απόδοση εικόνων στη θύρα προβολής). Η εφαρμογή ιστού σας τώρα εστιάζει μόνο στη διεπαφή χρήστη και επιτρέπει στους εργαζόμενους να κάνουν τα υπόλοιπα.

Ακολουθεί ένα παράδειγμα για το πώς να το χρησιμοποιήσετε:

boolean

Λάβετε υπόψη ότι αυτή είναι μόνο η αρχή και περιμένουμε να δούμε περισσότερη χρήση ή Web Workers στο εγγύς μέλλον.

Πλεονεκτήματα TypeScript

Εάν χρησιμοποιείτε το Ionic 2, γνωρίζετε ήδη ότι το χρησιμοποιεί Τύπος γραφής . Το TypeScript είναι ένα υπερσύνολο του JavaScript ES2015 που μεταγλωττίζεται σε απλή JavaScript. Με το TypeScript, έχετε πρόσβαση σε όλες τις μοναδικές δυνατότητές του (όπως διεπαφές, mixins και ούτω καθεξής) και τις λειτουργίες ES2015 (όπως λειτουργίες βέλους, γεννήτρια, συμβολοσειρές πολλαπλών γραμμών και ούτω καθεξής).

Ας δούμε ένα παράδειγμα ενός στοιχείου Angular> = 2.x που εμφανίζει το όνομα ενός προέδρου των Ηνωμένων Πολιτειών:

CTRL + Click

Χρησιμοποιούμε μια διεπαφή (MyPage) που περιγράφει το σχήμα αντικειμένου του προέδρου. Είναι ενδιαφέρον να έχουμε διεπαφές που περιγράφουν τι χειρίζεστε, ειδικά αν υπάρχουν αρκετοί προγραμματιστές σε ένα έργο. Εάν κάνετε κάποιο λάθος και, για παράδειγμα, χρησιμοποιήστε ένα $ 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 για το όνομα του προέδρου, το IDE σας θα σας πει ότι κάτι δεν πάει καλά πριν από τη συλλογή.

Σε σχεδόν οποιοδήποτε IDE χρησιμοποιείτε (Visual Studio Code, Atom, WebStorm ή παρόμοια), θα βρείτε προσθήκες για την ενεργοποίηση της αυτόματης συμπλήρωσης, τον έλεγχο τύπου και ένα linter.

Το TypeScript είναι ένα πραγματικό πλεονέκτημα για το Ionic 2, καθώς κάνει τον κώδικα πιο κατανοητό, σας βοηθά να αποφύγετε λάθη τύπου και σας βοηθά να είστε πιο παραγωγικοί (μέσω λειτουργιών όπως αυτόματη συμπλήρωση, αυτόματη εισαγωγή ενοτήτων, ορισμοί συμβουλών εργαλείων στο hover και my-page.ts για να μεταβείτε στους ορισμούς).

Όλα τα νέα CLI v2

Το Ionic CLI v2 προσθέτει έναν τρόπο δημιουργίας σελίδων, στοιχείων, σωλήνων και οδηγιών, απευθείας μέσω της γραμμής εντολών.

Για παράδειγμα, εάν θέλετε να δημιουργήσετε μια νέα σελίδα με το όνομα 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'); } } , ακολουθεί η εντολή που μπορείτε να εκτελέσετε:

πόσες ιστοσελίδες γνωριμιών υπάρχουν

ionic-app-scripts

Η εντολή θα ακολουθήσει τις συμβάσεις και θα δημιουργήσει τρία αρχεία για εσάς:

Ένα αρχείο HTML για το πρότυπό σας. Ένα αρχείο SASS για το στυλ των στοιχείων σας. Ένα αρχείο TypeScript για τη λογική των στοιχείων σας.

Εδώ είναι αυτό που δημιουργήθηκε @ionic/app-scripts το αρχείο μοιάζει με:

assets

Η επιβολή συμβάσεων μέσω της χρήσης του CLI είναι εξαιρετική όταν εργάζεστε σε μια ομάδα. Το Angular 2.x και το Ionic 2 κάνουν εξαιρετική δουλειά για να βοηθήσουν στην καλύτερη κατανόηση του τι πρέπει να είναι η αρχιτεκτονική της εφαρμογής Angular. Φυσικά, είστε ελεύθεροι να αποκλίνετε από τις συμβάσεις, αν θέλετε.

Βελτιωμένη συσκευασία

Το Ionic 1 βασίζεται στο οικοσύστημα Gulp για τη δέσμευση εφαρμογών, ενώ το Ionic 2 σας επιτρέπει να επιλέξετε τα αγαπημένα σας εργαλεία. Το Ionic 2 παρέχει τη δική του συλλογή εργαλείων ως ξεχωριστό έργο: ιονικά-app-scripts .

Το src βασίζεται στην ιδέα ότι οι προγραμματιστές δεν πρέπει να ανησυχούν καθόλου για τη διαμόρφωση των συσκευασιών. Η μόνη εξάρτηση που σχετίζεται με τη συσκευασία που θα έχει το έργο σας με το Ionic 2 είναι www. Από προεπιλογή, χρησιμοποιεί Webpack αλλά μπορείτε να χρησιμοποιήσετε Συγκέντρωση επισης.

Με το Ionic 2 και το CLI v2, το $ npm install -g ionic $ ionic -v # should return at least 2.1.12 , καθώς και τα αρχεία TypeScript, ζουν στο ίδιο ionic-app-scripts ντοσιέ. Το

|_+_|

δημιουργείται τώρα σε κάθε έκδοση και επομένως πρέπει να αφαιρεθεί από την παρακολούθηση ελέγχου έκδοσης.

Εισαγωγή του εργαλείου αναφοράς σφαλμάτων

Το νέο CLI παρουσίασε επίσης ένα εξαιρετικό εργαλείο αναφοράς σφαλμάτων. Για να το αποκτήσετε, πρέπει να εγκαταστήσετε την έκδοση Ionic> = 2.1:

Τώρα κάθε φορά που έχετε λάθη, θα εμφανιστεί ένα modal με σημαντικές πληροφορίες σχετικά με αυτό. Για παράδειγμα:

Η ειδοποίηση για σφάλματα χρόνου εκτέλεσης το συντομότερο δυνατό κατά τη διάρκεια της ανάπτυξης είναι απίστευτα πολύτιμη και το Ionic 2 έχει κάνει εξαιρετική δουλειά από αυτή την άποψη.

Πλεονεκτήματα της σύνθεσης πριν από το χρόνο (AoT)

Το Ahead of Time Compilation (AoT) είναι μια μικρή επανάσταση στο γωνιακό οικοσύστημα. Παρουσιάζεται με το Angular 2.x, το AoT επιτρέπει την προ-μεταγλώττιση προτύπων σε ένα βήμα κατασκευής, αντί να μεταγλωττίζονται on-the-fly από το πρόγραμμα περιήγησης.

Αν και αυτό μπορεί να μην φαίνεται μεγάλη διαφορά, στην πραγματικότητα είναι. Με το AoT, δεν χρειάζεται να στείλουμε τον μεταγλωττιστή προτύπων με την εφαρμογή. Αυτό έχει δύο πλεονεκτήματα. Πρώτον, το πακέτο θα είναι μικρότερο, το οποίο επηρεάζει άμεσα το δίκτυο και επομένως κάνει την εφαρμογή σας πιο γρήγορη για λήψη. Δεύτερον, η εφαρμογή θα εκκινήσει γρηγορότερα, επειδή η συλλογή προτύπων εν κινήσει δεν είναι πλέον απαραίτητη.

Το Ionic 2 εκμεταλλεύεται πλήρως το Angular 2.x AoT για τη βελτιστοποίηση του μεγέθους και του χρόνου φόρτωσης της εφαρμογής σας δωρεάν.

Το Ionic 2 είναι ένα τεράστιο βήμα προς τα εμπρός

Συνολικά, το Ionic 2 είναι ένα τεράστιο βήμα μπροστά για την υβριδική κινητή βιομηχανία. Αν και το σύνολο των συστατικών Ionic 2 είναι παρόμοιο με τα συστατικά Ionic 1, το Ionic 2 προσφέρει πολλά εργαλεία και βελτίωση της απόδοσης.

Πράγματι, με εργαλεία όπως το TypeScript,

και Ionic CLI, Προγραμματιστές Ionic 2 μπορεί να είναι πιο παραγωγικό, μπορεί να παράγει περισσότερο διατηρήσιμο κώδικα και ειδοποιείται για σφάλματα χρόνου εκτέλεσης μόλις συμβούν.

Το Ionic 2 παρέχει επίσης μια δωρεάν ενίσχυση απόδοσης σε σχέση με το Ionic 1, ιδίως με την εξάλειψη ή τη μείωση των σημείων συμφόρησης (που σχετίζονται με την ανίχνευση αλλαγών, τα κινούμενα σχέδια, το χρόνο φόρτωσης κ.ο.κ.).

Με το Ionic 2, οι εφαρμογές σας θα νιώσουν πιο εγγενείς από ποτέ. Βγάλτε το για ένα γύρισμα. Θα χαρούμε να το κάνατε.

Σχετίζεται με: Τα 9 πιο συνηθισμένα λάθη που κάνουν οι Ιονικοί προγραμματιστές