Accentsconagua
Share
In dit artikel gaan we kijken naar Ionic 2, de nieuwste versie van het Ionic platform voor cross-platform mobiele apps. Om te beginnen geven we een samenvatting van wat Ionic is en waarvoor het is gebruikt. Dan duiken we Ionic 2 in. Ik zal je vertellen wat er nieuw is en hoe het verschilt van Ionic 1, en ik zal je helpen beslissen of je het moet gebruiken in je volgende project of niet..
Ionic is een raamwerk voor het bouwen van hybride apps met behulp van HTML, CSS en JavaScript. Het wordt geleverd met een reeks UI-componenten en functies die u kunt gebruiken om volledig functionele en aantrekkelijke mobiele apps te maken.
Ionic is gebouwd op de Cordova-stapel. U kunt geen mobiele apps maken met Ionic alleen omdat deze alleen de UI-part behandelt. Het moet werken met Angular, dat de applicatielogica behandelt, en Cordova, het platformonafhankelijke app-framework waarmee u uw app kunt compileren in een installeerbaar bestand en deze binnen de webweergave van het mobiele apparaat kunt uitvoeren.
Apps die met Cordova en Ionic zijn gebouwd, kunnen op Android- en iOS-apparaten worden uitgevoerd. U kunt ook Cordova-plug-ins installeren om native-functionaliteit te bieden, zoals toegang tot de camera en het werken met Bluetooth Low Energy-apparaten.
Kijk voor meer informatie over Cordova op enkele van onze cursussen en zelfstudies op Envato Tuts+.
Ionic is meer dan alleen een UI-framework. Het Ionic-bedrijf biedt ook diensten die het Ionic UI Framework ondersteunen, inclusief de Ionic Creator, Ionic View en Ionic Cloud.
In dit gedeelte zullen enkele belangrijke wijzigingen in Ionic in versie 2 worden besproken, evenals de nieuwe functies en hulpmiddelen die in Ionic 2 zijn geïntroduceerd..
Ionic 1 is gebouwd met alleen hybride mobiele apps in gedachten. Maar Ionic 2 is ook gebouwd om progressieve web-apps en Electron-apps te ondersteunen. Dit betekent dat u nu niet alleen Ionische apps kunt bouwen die in de Cordova-omgeving worden uitgevoerd, maar ook progressieve web-apps, die moderne webfuncties gebruiken om gebruikers een appachtige ervaring te bieden.
U kunt zich ook richten op Electron, een platform voor het bouwen van platformonafhankelijke desktop-apps met behulp van HTML, CSS en JavaScript. Electron lijkt veel op Cordova, maar op desktopbesturingssystemen zoals Windows, Ubuntu of macOS.
Ionic 2 gebruikt nu Angular 2 voor sjabloneer- en toepassingslogica. Dit betekent dat ontwikkelaars de nieuwe Angular 2-syntaxis moeten leren voordat ze productief kunnen worden bij het maken van Ionic 2-apps. Maakt u zich geen zorgen, omdat de concepten nog steeds dezelfde zijn als in Angular 1. Er zijn ook bronnen zoals ngMigrate die u zullen helpen om uw Angular 1-vaardigheden om te zetten in Angular 2.
Naast Angular 2 gebruikt Ionic 2 ook TypeScript. Voor degenen die er niet mee vertrouwd zijn, is TypeScript een superset van JavaScript. Dit betekent dat u nog steeds de JavaScript-syntaxis van vanilla kunt gebruiken om uw apps te schrijven. Als u de functies wilt gebruiken die bij TypeScript worden geleverd, zoals ES6- en ES7-syntaxis, statische typering en het voltooien van intelligente code, dan kunt u de TypeScript-specifieke syntaxis gebruiken. Er zijn plug-ins die u kunt installeren op uw favoriete teksteditor of IDE om de voordelen te plukken van de geavanceerde code-aanvullenmerken van TypeScript.
Zoals ik al zei, is de sjabloonsyntaxis in Ionic 2 aanzienlijk veranderd, grotendeels vanwege de overgang naar het gebruik van Angular 2. Je zult zelfs tot de ontdekking komen dat de nieuwe syntaxis eenvoudiger en beknopter is. Hier zijn een paar voorbeelden van Ionic 1 en Ionic 2 syntaxis naast elkaar:
Luisteren naar evenementen:
Een model gebruiken:
Een reeks doorlopen en elk item weergeven:
Als je de mapstructuur van een Ionic 1-project en een Ionic 2-project vergelijkt, zul je merken dat de meeste mappen die je gewend bent te zien in een Ionic 1-project nog steeds aanwezig zijn in Ionic 2. Dit komt omdat de onderliggende platform is niet echt veranderd - Ionic 2 gebruikt nog steeds Cordova. De enige dingen die zijn veranderd, zijn de onderdelen die te maken hebben met uw bronbestanden. Hier is een screenshot van de mappenstructuur van een Ionic 1-app:
En hier is een app gebouwd met Ionic 2:
Als je dichterbij kijkt, zul je merken dat er nu een is src map. Dat is waar alle bronbestanden van uw project zijn, en elke keer dat u wijzigingen aanbrengt in een bestand in die map, wordt het gewijzigde bestand gecompileerd en gekopieerd naar de www / build directory. Eerder waren de bronbestanden allemaal in de wwwmap en u had geen extra compilatiestap nodig.
De mappenstructuur is ook overzichtelijker. Als u de src / pages map, kunt u zien dat elke pagina zijn eigen map heeft en in elke map staan de HTML-, CSS- en JavaScript-bestanden voor die specifieke pagina.
Eerder, in Ionic 1, kreeg je net een lege map en had je de vrijheid om je project te structureren zoals je wilde. Maar dit kwam met het nadeel dat ik je niet dwong dingen op de beste manier te doen. Je zou lui kunnen worden en vasthouden aan een structuur die alle bestanden bij elkaar bracht, waardoor het moeilijk kon worden voor grotere teams die aan complexe apps werkten.
In tegenstelling tot de vorige versie van Ionic, die maar één look en feel had voor alle platforms, ondersteunt Ionic 2 nu drie modi: Material Design, iOS en Windows. Nu komt Ionic overeen met het uiterlijk en het gevoel van het platform waarop het is geïmplementeerd. Dus als uw app bijvoorbeeld op Android is geïnstalleerd, zal deze een stijl en gedrag gebruiken dat vergelijkbaar is met dat van native Android-apps.
Er is ondersteuning voor thema's in Ionic, maar op het moment van schrijven van dit artikel wordt alleen het standaard Light-thema meegeleverd. Als u het thema wilt aanpassen, kunt u het bewerken src / theme / variables.scss het dossier.
Ionic 2 komt ook met nieuwe tools die het een plezier zullen maken om mobiele apps te maken. Ik zal je een paar laten zien in dit gedeelte.
Ionic 2 biedt nu een generator waarmee u pagina's en services voor uw app kunt maken:
ionische g pagina contactpagina
Hiermee maak je de volgende bestanden in je app / pages map:
contact-pagina / contact-pagina.html contact-pagina / contact-pagina.ts contact-pagina / contact-pagina.scss
Elk bestand bevat ook een aantal boilerplate-codes:
contactpagina
Dit dient ook als leidraad voor nieuwe ontwikkelaars, zodat zij weten wat de beste manier is om hun code te structureren. Hier is de gegenereerde TypeScript-code die de logica voor de bovenstaande pagina verwerkt:
//contact-page.js import Component uit '@ angular / core'; importeer NavController, NavParams van 'ionic-angular'; / * Gegenereerde klasse voor de pagina ContactPage. Zie http://ionicframework.com/docs/v2/components/#navigation voor meer informatie over Ionische pagina's en navigatie. * / @Component (selector: 'page-contact-page', templateUrl: 'contact-page.html') exportklasse ContactPagePage constructor (public navCtrl: NavController, public navParams: NavParams) ionViewDidLoad () console .log ('ionViewDidLoad ContactPagePage'); Ionic 2 wordt nu geleverd met een foutrapportagetool voor de front-end. Dit betekent dat elke keer als er een fout is met uw code, Ionic een modaal venster opent in de app-preview zelf. Dit maakt het heel gemakkelijk voor ontwikkelaars om meer te weten te komen over fouten als ze binnen de app plaatsvinden.
Ionic App Scripts zijn een verzameling build-scripts voor Ionische projecten. Eerder gebruikte Ionic Gulp voor het afhandelen van het bouwproces.
Ionic 2 wordt geleverd met een paar van deze scripts om het eenvoudiger te maken om algemene ontwikkeltaken uit te voeren. Dit omvat zaken als het transponeren van de TypeScript-code naar ES5, het bedienen van de app voor testen in de browser of het uitvoeren ervan op een specifiek apparaat.
U kunt de standaardscripts in de projecten vinden package.json het dossier:
"scripts": "clean": "ionic-app-scripts opschonen", "build": "ionic-app-scripts build", "ionic: build": "ionic-app-scripts build", "ionic: serve ":" ionische app-scripts dienen ",
Componenten zijn de UI-bouwstenen in Ionic. Voorbeelden zijn knoppen, kaarten, lijsten en invoervelden. Veel nieuwe componenten zijn toegevoegd aan Ionic 2 en in deze sectie zullen we een aantal daarvan bekijken.
Als u wilt dat uw app door gebruikers wordt voorgeladen, maakt het onderdeel Dia's het gemakkelijk om er een te maken. Met dit onderdeel kunt u op pagina's gebaseerde lay-outs maken waarop de gebruiker kan vegen om alles over uw app te lezen.
Actievellen zijn menu's die omhoog schuiven vanaf de onderkant van het scherm. Een actiekaart wordt getoond op de bovenste laag van het scherm, dus u moet het verwijderen door op witruimte te tikken of een optie uit het menu te selecteren. Dit wordt meestal gebruikt voor bevestigingen, zoals wanneer u een bestand op uw iOS-apparaat verwijdert.
Segmenten zijn als tabbladen. Ze worden gebruikt voor het groeperen van gerelateerde inhoud op een zodanige manier dat de gebruiker alleen de inhoud van het momenteel geselecteerde segment kan zien. Segmenten worden meestal gebruikt in lijsten om te filteren voor gerelateerde items.
Toasts zijn de subtiele versie van waarschuwingen. Ze worden vaak gebruikt om de gebruiker te informeren dat er iets is gebeurd waarvoor geen actie van een gebruiker vereist is. Ze worden vaak boven- of onderaan de pagina weergegeven om de inhoud die momenteel wordt getoond niet te hinderen. Ze verdwijnen ook na een bepaald aantal seconden.
Een werkbalk wordt gebruikt als een container voor informatie en acties die zich in de kop- of voettekst van de app bevinden. De titel van het huidige scherm, knoppen, zoekvelden en segmenten bevinden zich bijvoorbeeld vaak in een werkbalk.
Het DateTime-onderdeel wordt gebruikt om een gebruikersinterface weer te geven voor het kiezen van datums en tijden. De gebruikersinterface is vergelijkbaar met degene die is gegenereerd tijdens het gebruik van de datetime-local element, het enige verschil is dat dit onderdeel wordt geleverd met een eenvoudig te gebruiken JavaScript-API. Eerder had Ionic geen component voor het werken met datums en tijden. U moest de native datumkiezer van de browser gebruiken of een plug-in installeren.
Floating Action Buttons (FAB's) zijn knoppen die in een specifiek gedeelte van het scherm zijn vastgelegd. Als je de Gmail-app ooit hebt gebruikt, is de knop voor het opstellen van een nieuw bericht een zwevende actieknop. Ze zijn niet beperkt tot één actie, omdat ze kunnen worden uitgebreid om andere zwevende knoppen weer te geven wanneer ze worden aangeraakt.
Raadpleeg de documentatie over componenten voor meer informatie over de nieuwe componenten.
Ionic 2 zit ook boordevol nieuwe functies en verbeteringen. Deze zijn meestal te wijten aan de overgang naar Angular 2 en TypeScript.
Een voordeel van overschakelen naar Angular 2 is het nieuwe animatiesysteem van Angular, gebouwd bovenop de Web Animations API. Houd er rekening mee dat de Web Animations API niet in alle browsers wordt ondersteund. Daarom moet u Crosswalk gebruiken om een ondersteunde browser samen met uw app te installeren. Het enige nadeel hiervan is dat de installatiegrootte groter wordt. Een andere optie is om een polyfill te gebruiken.
Apps gemaakt met Ionic 2 zijn overzichtelijker dan die gemaakt met Ionic 1. Dit is waarom:
ion-img component. Gebruik dit onderdeel in plaats van de standaard img element stelt u in staat de HTTP-verzoeken voor het ophalen van de afbeeldingen aan een webmedewerker te delegeren. Hierdoor wordt het laden van afbeeldingen lastiger, vooral binnen grote lijsten. De ion-img component behandelt ook lui laden, die de afbeelding alleen vraagt en rendert wanneer deze zichtbaar wordt in het kijkvenster van de gebruiker.Ionic Native is het equivalent van ngCordova voor Ionic 2. Ze fungeren beide als wrappers voor de Cordova-plug-ins om native functionaliteit te implementeren (bijvoorbeeld Camera, GeoLocation). Je kunt zelfs Ionic Native gebruiken in je Ionic 1-app als je wilt. Het belangrijkste verschil is dat Ionic Native u toestaat uw code te schrijven met ES6-functies en TypeScript-syntaxis. Dit maakt het gemakkelijker om mee te werken in Ionic 2 omdat het standaard al TypeScript gebruikt. Hier is een voorbeeld van het implementeren van de Cordova Camera-plug-in in ngCordova:
$ cordovaCamera.getPicture (kwaliteit: 50). then (function (imageData) var image = "data: image / jpeg; base64," + imageData;, function (err) );
En hier is hoe het gedaan is met Ionic Native:
importeer Camera van 'ionic-native'; Camera.getPicture (opties) .then ((imageData) => let base64Image = 'data: image / jpeg; base64,' + imageData;, (err) => );
De documentatie is veel verbeterd. Ik vind vooral het feit dat er nu verschillende voorbeelden zijn voor elk onderdeel op elk platform. Dit geeft ontwikkelaars een heel goed idee van hoe hun app eruit zou zien. Dit alles zonder dat de ontwikkelaar een enkele regel code schrijft!
Vanaf het moment van schrijven van dit artikel is Ionic 2 vrijgegeven. Dit betekent dat het klaar is om te worden gebruikt voor productie-apps. Gezien alle nieuwe functies, tools en voordelen die horen bij Angular 2 en TypeScript, is het enige dat u ervan weerhoudt om Ionic 2 te gebruiken de status van uw project.
Als u nog maar net met een nieuw project begint, kunt u Ionic 1 nog steeds gebruiken als u en uw teamgenoten alleen bekend zijn met Angular 1 en uw project zo snel mogelijk moet worden voltooid. Maar als je ruimschoots de tijd hebt gekregen voor het project, zou je moeten overwegen om Ionic 2 te gebruiken. Er zal een beetje een leercurve zijn, en je zult ook een aantal problemen tegenkomen omdat het niet zo beproefd is als Ionic 1, maar het is allemaal de moeite waard vanwege de coole nieuwe functies en verbeteringen van Ionic 2.
Als u uw huidige project al met Ionic 1 bent begonnen, wilt u waarschijnlijk bij Ionic 1 blijven en een grootschalige herschrijving vermijden. Maak je niet al te veel zorgen over ondersteuning, verbeteringen en bugfixes voor Ionic 1-Ionic-ontwikkelaars hebben toegezegd Ionic 1 al geruime tijd te ondersteunen. Hoe lang precies is niet duidelijk. Op zijn minst zal het een aantal jaar worden ondersteund nadat de Ionic 2-stabiele versie is uitgebracht. Maar we moeten ook in gedachten houden dat Ionic een open-sourceproject is met meer dan 200 bijdragers. Dus zolang mensen het blijven gebruiken, kunnen we altijd enige vorm van ondersteuning van de gemeenschap verwachten.
Dat is het! In dit artikel hebt u alles over Ionic 2 geleerd. Specifiek heeft u geleerd over de aanzienlijke verschillen tussen Ionic 2 en zijn voorganger. We hebben ook een kijkje genomen naar de nieuwe functies die zijn toegevoegd aan Ionic 2 en of u deze moet gebruiken voor uw toekomstige projecten of niet. In een toekomstige zelfstudie gaan we deze kennis in de praktijk brengen door een Ionic 2-app te maken. Blijf kijken!
Als u meer wilt weten over Ionic 2, moet u de volgende bronnen raadplegen:
En natuurlijk hebben we een diepgaande Ionische 2-cursus die je kunt volgen, precies hier op Envato Tuts+!
