Σύγκριση μεταξύ ιωνικού 4 έναντι ιωνικού 3

ιονικό 3 έναντι ιονικό 4

Σχετικά με το ιωνικό 4

Μετά από περισσότερο από ένα χρόνο εργασίας, η ομάδα Ionic Framework κυκλοφόρησε την έκδοση 4. Η νέα έκδοση μας προσφέρει σημαντικές αλλαγές στις επιδόσεις, τη συμβατότητα με πολλαπλά πλαίσια (όχι μόνο με το Angular ως προηγούμενες εκδόσεις), μια νέα τεκμηρίωση και πολλές άλλες βελτιώσεις που εμείς θα αναλύσει σε αυτό το άρθρο.

Σίγουρα θα έχετε πολλές αμφιβολίες - και ίσως το φόβο - για αυτή την έκδοση αλλάζουν. Αλλά τα καλά νέα είναι ότι παρά τις μεγάλες βελτιώσεις που προσφέρει το Ιωνικό 4, η μετανάστευση από το Ιωνικό 3 στο Ιωνικό 4 είναι εξαιρετικά απλή!

Σε αυτό το άρθρο θέλω να εξηγήσω τη σύγκριση μεταξύ του ιωνικού 4 και του ιωνικού 3, καθώς και τις καινοτομίες και τις νέες έννοιες αυτής της νέας έκδοσης. Ας δούμε πρακτικά παραδείγματα για τον τρόπο χρήσης του νέου ιωνικού CLI και του νέου δρομολογητή. Στη συνέχεια, στο τέλος θα σας καθοδηγήσω για το πώς να μεταφέρετε τις εφαρμογές σας από το Ιωνικό 3 στο Ιόνιο 4.

Στοιχεία ιστού

Το Ιωνικό Πλαίσιο 4 ξαναγράφηκε πλήρως για να χρησιμοποιήσει τα API Web και κάθε στοιχείο είναι συσκευασμένο ως στοιχείο Web. Αυτό επιτρέπει την προβολή του πλαισίου στο μέλλον. Για να βοηθήσει στη δημιουργία του Web Components, η ομάδα δημιούργησε ένα εργαλείο που ονομάζεται Stencil.

Τι είναι τα στοιχεία Web;

Τα συστατικά Web είναι ένα σύνολο API ιστού που σας επιτρέπουν να δημιουργείτε ετικέτες HTML που είναι επαναχρησιμοποιήσιμες και εγκλωβισμένες.

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

Με τα Web Components, μπορείτε να δημιουργήσετε σχεδόν οτιδήποτε μπορεί να γίνει με HTML, CSS και JavaScript. Με αυτό τον τρόπο μπορείτε να δημιουργήσετε ένα φορητό στοιχείο που μπορεί εύκολα να επαναχρησιμοποιηθεί.

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

Τα στοιχεία Web βασίζονται στις ακόλουθες προδιαγραφές:

  • Προσαρμοσμένα στοιχεία: ορίζει τις βάσεις και τις βασικές αρχές για τον σχεδιασμό και τη χρήση νέων τύπων στοιχείων DOM.
  • Shadow DOM: καθορίζει τον τρόπο χρήσης των εγκιβωτισμένων μορφών και του κώδικα μέσα σε ένα στοιχείο web.
  • Εισαγωγές HTML: καθορίζει βασικά τον τρόπο ενσωμάτωσης και επαναχρησιμοποίησης του εγγράφου HTML σε άλλο έγγραφο HTML.
  • Πρότυπο HTML: ορίζει πώς να δηλώσετε αποσπάσματα κώδικα που δεν θα χρησιμοποιηθούν κατά τη φόρτωση της σελίδας αλλά θα μπορούσαν αργότερα να παρουσιαστούν στο χρόνο εκτέλεσης.

Συμβατότητα με άλλα πλαίσια

Από την ίδρυσή του το Ιωνικό Πλαίσιο κατασκευάστηκε χρησιμοποιώντας τη γωνιακή. Αλλά τώρα με τη δημοτικότητα και την υποστήριξη των web components αυτό έχει αλλάξει.

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

Δεδομένου ότι τα συστατικά του Ιονικού Πλαισίου, όπως το , είναι τώρα εγκλωβισμένα ως Web Components, δεν είναι πλέον απαραίτητο να δεσμευθεί σε ένα βασικό πλαίσιο. Τα συστατικά του Web λειτουργούν με οποιοδήποτε πλαίσιο, στην πραγματικότητα αν προτιμάτε να μην μπορείτε να χρησιμοποιήσετε οποιοδήποτε Πλαίσιο.

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

Ionic CLI on Ionic 4 Το CLI 4.0 έχει βελτιωθεί πλήρως τόσο στα χαρακτηριστικά που προσφέρει όσο και στην ταχύτητα και την ευκολία χρήσης του.

Για να το χρησιμοποιήσουμε, πρέπει να έχουμε την τελευταία έκδοση του CLI στο αναπτυξιακό μας περιβάλλον. Μπορούμε να το εγκαταστήσουμε τρέχοντας την ακόλουθη εντολή:

npm install -g ionic latest
Για να χρησιμοποιήσετε την τελευταία έκδοση του CLI, πρέπει να έχετε εγκαταστήσει τον κόμβο 8.9 ή νεότερο.Βλέπε https://nodejs.org/ για να βρείτε οδηγίες σχετικά με τον τρόπο ενημέρωσης του Node.js.

Μόλις εγκατασταθεί ο νέος CLI, μπορούμε τώρα να δημιουργήσουμε την πρώτη μας εφαρμογή με το ionic 4. Με την ακόλουθη εντολή, ο CLI θα δημιουργήσει μια νέα εφαρμογή με τη βασική δομή του Ionic 4:

ιονική εκκίνηση appName κενό - τύπος = γωνιακό

appName είναι το όνομα του έργου σας

κενό είναι το πρότυπο που επιλέγουμε να δημιουργήσουμε τον σκελετό της εφαρμογής

type = γωνιακή είναι ο τύπος του έργου

Στη συνέχεια, για να ελέγξετε την εφαρμογή σας στο πρόγραμμα περιήγησης, μπορείτε να εκτελέσετε την ίδια εντολή που χρησιμοποιήσαμε προηγουμένως στο Ionic 3.

ιονική εξυπηρέτηση

Αυτή είναι η δομή της νέας εφαρμογής Ionic 4 που παράγεται με το CLI:

Με αυτό το νέο CLI, έχουμε τη δυνατότητα να χρησιμοποιήσουμε εντολές κονσόλας για τη δημιουργία νέων σελίδων, συστατικών, οδηγιών και υπηρεσιών. Ας δούμε μερικά παραδείγματα:

Δημιουργία σελίδας :

ιονικός χρήστης γ σελίδας

Δημιουργία νέας υπηρεσίας:

ιονικό στοιχείο υπηρεσίας g

Αυτές είναι μόνο μερικές από τις νέες λειτουργίες που ο νέος CLI, εξερευνήστε τις νέες Ιωνικές τεκμηρίωση & χαρακτηριστικά για λεπτομέρειες.

Πλοήγηση στο ιωνικό 4

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

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

Οι παραδοσιακοί ιστοτόποι χρησιμοποιούν ένα γραμμικό ιστορικό, που σημαίνει ότι ο χρήστης πλοηγείται σε μια σελίδα και μπορεί να πατήσει το κουμπί Πίσω για να πλοηγηθεί. Στο Ιωνικό Πλαίσιο, οι εφαρμογές μπορούν να κάνουν αυτό το βήμα παραπέρα επιτρέποντας την παράλληλη πλοήγηση. Αυτό σημαίνει ότι είναι δυνατό να έχετε πολλαπλές μπαταρίες πλοήγησης και να τις ανταλλάξετε ανά πάσα στιγμή. Ένα παράδειγμα αυτού θα ήταν η πλοήγηση με καρτέλες σε μία σελίδα και μια άλλη με πλευρικό μενού.

Κάτι που είναι σημαντικό να αναφέρουμε είναι ότι το NavController και το ιόν-νωτός στην Ιωνική 4 έχουν καταστεί άνευ αντικειμένου. Μπορείτε να τα χρησιμοποιήσετε, αλλά μόνο εάν η εφαρμογή σας δεν χρησιμοποιεί τη φόρτωση Lazy.

Αντί του ion-nav και του NavController, το Ionic 4 χρησιμοποιεί τώρα @ γωνιακό / δρομολογητή.

Όπως έχουμε ήδη πει, κατά τη δημιουργία μιας εφαρμογής γωνιακού τύπου, το Ionic 4 χρησιμοποιεί την πλοήγηση του Angular 6. Αυτός είναι ο λόγος για τον οποίο κατά τη δημιουργία της ιονικής εφαρμογής 4 γωνιακού τύπου δημιουργείται αυτόματα ένα αρχείο app-routing.module.ts που βρίσκεται στο src / app.

Ας δούμε τι έχει αυτό το αρχείο και ποιες είναι οι διαφορές με μια εφαρμογή στο Ionic 3.

Στο Ιωνικό 4:

εισαγωγή {NgModule} από '@ γωνιακό / πυρήνα'.
εισαγωγή {Routes, RouterModule} από το '@ γωνιακό / δρομολογητή'.
const: Διαδρομές = [
  {path: '', redirectTo: 'σπίτι', pathMatch: 'full'},
  {διαδρομή: 'σπίτι', loadChildren: './pages/home/home.module#HomePageModule'},
] ·
@NgModule ({
εισαγωγές: [RouterModule.forRoot (διαδρομές)],
εξαγωγές: [RouterModule]
})
κλάση εξαγωγής AppRoutingModule {}

Για να μεταβείτε στην Αρχική σελίδα, πρέπει να κάνετε τα εξής:

εισαγωγή {Router} από το '@ γωνιακό / δρομολογητή'.
κατασκευαστής (ιδιωτικός δρομολογητής: δρομολογητής) {}
navigateToHome () {
  this.router.navigate (['/ home']).
}}

Στο ιωνικό 3:

εισαγωγή {NavController} από το "ιονικό-γωνιακό".
εισαγωγή {HomePage} από './pages/home/home'
κατασκευαστής (public navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (Αρχική σελίδα);
}}

Είναι σημαντικό να καταλάβουμε ότι στο Ionic 4, το navController δεν χρησιμοποιείται πλέον για πλοήγηση στην εφαρμογή.

Παράδειγμα πλοήγησης στο Ionic 4

Ας κάνουμε ένα βήμα παραπέρα και βλέπουμε πώς να περάσουμε τις πληροφορίες μεταξύ δύο σελίδων στο Ιωνικό 4.

// Το αντικείμενο είναι ένα αντικείμενο του στυλ: {τίτλος: "Κάποιος τίτλος", περιγραφή: "Κάποια περιγραφή"}
itemSelected (στοιχείο) {
  this.router.navigate (["/ home", στοιχείο]).
}}

Στη συνέχεια, για να αποκτήσουμε το αντικείμενο αντικειμένου στην Αρχική σελίδα μας, χρησιμοποιούμε το ActivatedRoute.

εισαγωγή {ActivatedRoute} από '@ γωνιακό / δρομολογητή'.
εξαγωγή class HomePage υλοποιεί OnInit {
στοιχείο: οποιοδήποτε?
κατασκευαστής (ιδιωτική διαδρομή: ActivatedRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (δεδομένα => {
     this.item = δεδομένα.
   })
}}
}}

Κύκλοι ζωής της πλοήγησης (LifeCycles)

Οι κύκλοι ζωής (γνωστοί ως κύκλοι ζωής στα αγγλικά) που χρησιμοποιήθηκαν στο ιωνικό 3 όπως για παράδειγμα το ionWillLoad δεν θα χρησιμοποιούνται πλέον στο Ιωνικό 4. Τώρα θα χρησιμοποιήσουμε τους Γωνιακούς κύκλους ζωής όπως ngOnInit και ngAfterViewInit.

Εάν έχετε ήδη προγραμματίσει σε Angular, αυτό θα σας εξοικειωθεί. Εάν θέλετε να μάθετε περισσότερα σχετικά με το Angular, προτείνω να διαβάσετε αυτήν την ανάρτηση.

routerLink

Στο Ionic 3 το συμβάν (κλικ) χρησιμοποιείται για την περιήγηση μεταξύ σελίδων από το html. Στο Ionic 4 θα χρησιμοποιήσουμε το routerLink, όπως χρησιμοποιείται στις γωνιακές εφαρμογές.

Ένα παράδειγμα θα ήταν:

 [ Μεταβείτε στο προϊόν 123 

Ενότητες

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

Για κάθε σελίδα θα υπάρχει μια ενότητα αυτής της σελίδας. Για παράδειγμα, αν θέλουμε να χρησιμοποιήσουμε το Reactive Forms σε οποιαδήποτε σελίδα, εισάγουμε μόνο ReactiveFormsModule στη σελίδα ή τις σελίδες που θα την χρησιμοποιήσουν.

Ο παρακάτω κώδικας είναι από το src / app / pages / new-item / new-item.module.ts της εφαρμογής μας παράδειγμα στο Ionic 4 που μπορείτε να κατεβάσετε δωρεάν.

εισαγωγή {NgModule} από '@ γωνιακό / πυρήνα'.
εισαγωγή {CommonModule} από '@ γωνιακό / κοινό'.
εισαγωγή {FormsModule, ReactiveFormsModule} από '@ γωνιακές / μορφές'.
εισαγωγή {Routes, RouterModule} από το '@ γωνιακό / δρομολογητή'.
εισαγωγή {IonicModule} από '@ ionic / γωνιακό';
εισαγωγή {NewItemPage} από το αρχείο ./new-item.page ';
const: Διαδρομές = [
  {
    διαδρομή: '',
    συστατικό στοιχείο: NewItemPage
  }}
] ·
@NgModule ({
  εισαγωγές: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild (διαδρομές)
  ],
  δηλώσεις: [NewItemPage]
})
κλάση εξαγωγής NewItemPageModule {}

Πώς να μεταφέρετε την αίτησή σας από το Ionic 3 στο Ionic 4;

Αναρωτιέστε πιθανώς πώς να μεταναστεύσετε μια υπάρχουσα εφαρμογή από την Ιωνική 3 σε μια από την Ιωνική 4. Η ομάδα Ιωνικού Πλαισίου έχει γράψει μια πολύ λεπτομερή τεκμηρίωση με τα βήματα για τη μετάβαση.

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

Μπορείτε επίσης να χρησιμοποιήσετε το linter migration, ένα εργαλείο που ελέγχει αυτόματα τον κωδικό σας και σας ενημερώνει για τις αλλαγές που πρέπει να κάνετε.

Συμπέρασμα σχετικά με το ιόν 3 έναντι του ιόντος 4

Σε αυτό το άρθρο μιλάμε για τις κυριότερες διαφορές μεταξύ του Ιονικού 4 και του Ιονικού 3 καθώς και των νέων εννοιών που προτείνονται από το Ιωνικό Πλαίσιο 4.0. Έχει ενσωματωμένες ενισχυτικές επιδόσεις, είναι ευκολότερο να συνεργαστεί και το πιο σημαντικό είναι "μελλοντική απόδειξη". Με την ανοικοδόμηση όλων των στοιχείων του UI σε στοιχεία web και το codebase σας θα είναι πιο σταθερά δεδομένου ότι είναι κατασκευασμένα με ανοιχτή τεχνολογία ιστού.

Τώρα, εάν η εφαρμογή Ionic 3 είναι σχεδόν πλήρης ή / και κατασκευάζεται για μια επιχείρηση / επιχείρηση, τότε ίσως δεν είναι η καλύτερη στιγμή για να ενημερώσετε.

Ελπίζω ότι σας βοήθησε να καταλάβετε περισσότερα για τη νέα έκδοση του Ιωνικού Πλαισίου και πάνω απ 'όλα να χαλαρώσετε τους φόβους για τη μετανάστευση. Όπως προαναφέρθηκε, η μετάβαση από το ιωνικό 3 στο ιωνικό 4 δεν σημαίνει επανεγγραφή της αίτησής σας (όπως συνέβη στη μετανάστευση από το ιωνικό 1 στο ιωνικό 2).

Αρχικά μεταφορτώθηκε εδώ