Šiais laikais interneto kūrėjai valdo pasaulį. „JavaScript“ yra naudojamas visur, kur galima programuoti. Tarp šių sričių mobiliųjų programų kūrimas buvo vienas iš pirmųjų būdų išsišakoti: maždaug prieš dešimt metų „PhoneGap“ leido įdiegti HTML ir „JavaScript“ programas „iOS“ ir „Android“.
Nuo to laiko ši technologija turėjo savo pakilimų ir nuosmukių: nepaisant paprasto kūrimo, šios programos akivaizdžiai skyrėsi nuo vietinių. „Vanilla HTML“ ir naršyklės „JavaScript“ buvo nukreipti į naršykles, ir jiems nebuvo jokios galimybės nepriekaištingai pereiti į šį naują lauką.
Iki šiol pagrindiniai klausimai vis dar yra:
Cordova technologijos dažnai neįvertinamos dėl anksčiau minėtų problemų turinčių programų. „Frameworks“ siekia jas kompensuoti ir priartinti HTML programas kuo artimesnėms vietinėms programoms tiek dizaino, tiek našumo požiūriu.
Pažvelkime į keletą hibridinių programų pavyzdžių. Jie sukurti naudojant dvi šiuo metu sėkmingiausias sistemas, be „Onsen“ vartotojo sąsajos, kurios palengvins žiniatinklio kūrėjų plėtrą šiuolaikiniame pasaulyje: „Framework7“ ir „Ionic“.
„Ionic“ sukūrė „Drifty Co.“ 2012 m. Ir yra pagrįstas „Angular“. Nuo tada ji buvo aktyviai kuriama, sulaukė didelių investicijų ir stiprios kūrėjų bendruomenės. Oficiali svetainė teigia, kad ja remiantis buvo sukurta milijonai programų.
Šio straipsnio rašymo metu naujausia versija yra „Ionic 3“, pagrįsta „Angular 5“. „Ionic 4“, kuria siekiama lankstumo ir nepriklausomybės nuo „Angular“, yra ankstyvosios beta versijos.
Be UI variklio, nuostabu komponentų biblioteka ir sąsaja, leidžianti pasiekti vietinio įrenginio funkcijas, „Ionic“ siūlo keletą papildomų galimybių, paslaugų ir komunalinių paslaugų.
„Ionic“ komandinės eilutės sąsaja naudojama interaktyviam projekto inicijavimui (t. Y. Vedliui), puslapių ir komponentų generavimui bei kūrimo serverio paleidimui, leidžiančiam kurti programas kelyje ir tiesiogiai jas perkrauti. Tai taip pat teikia integraciją su „Ionic cloud“ paslaugomis.
„Lab“ yra nepaprastai naudinga mini paslauga, leidžianti „Ionic“ kūrėjo naršyklėje imituoti programos darbą skirtingose platformose. „DevApp“ padeda greitai įdiegti programą realiame įrenginyje.
„Ionic“ tiekia daugybę interneto paslaugų, kurios supaprastina ir pagreitina bandytojų ir vartotojų programų kūrimą, derinimą, testavimą ir atnaujinimą.
Vis dėlto Joniko planai dažnai keičiasi. Kai kurios anksčiau egzistavusios paslaugos, tokios kaip „Auth“, „Push“, „Analytics“ ir „View“, buvo uždarytos, todėl abonentai sukėlė pasipiktinimą.
Tai yra „Ionic“ grafinis redaktorius, skirtas kurti funkcines sąsajas.
Šią sistemą 2014 m. Sukūrė Rusijos studija „iDangero“. Galų gale vienas kūrėjas dirbo prie projekto, neįtraukdamas kelių nedidelių bendradarbių į „GitHub“ saugyklą.
Iš pradžių „Framework7“ sudarė vartotojo sąsajos komponentų rinkinys, sukurtas tada neseniai išleisto „iOS 7“ stiliaus, nuo kurio jis gavo savo pavadinimą. Vėliau buvo pridėta „Android“ tema ir abi temos buvo atnaujintos naujausiems „iOS“ ir „Material Design“.
Neseniai projekto plėtra įsibėgėjo ir jis išplito iš komponentų rinkinio į visavertę mobiliųjų programų sistemą, integruodamas populiarias technologijas ir įrankius.
„Framework7“ palaikymas ir pavyzdžiai naudojant „Vue.js“ egzistuoja nuo v1, o „v3“ taip pat palaiko „React“. Tai gali leisti projektui rimtai konkuruoti su populiaresniu „Ionic“, kuris siūlo tik „Angular“ ir „TypeScript“.
Norėdami pradėti dirbti su „Ionic“, įdiekite jį naudodami „NPM“:
npm install -g ionic
Tada pasirinkite būsimos programos šabloną. Oficiali „Ionic“ svetainė siūlo kelis šablonus arba galite pasirinkti tuščią šabloną, kad sukurtumėte programą nuo pat pradžių naudodami ionic start myApp blank
Pasirinkime paprastą dizainą. Vykdykite šią komandą:
ionic start Todo tabs
Atsakymas „Taip“ kai montuotojas paklaus „Ar norėtumėte integruoti savo naują programą su„ Cordova “, kad taikytumėte į„ iOS “ir„ Android “?“ Tai automatiškai integruos programą su „Cordova“ ir paruoš ją diegti mobiliose platformose.
Kitame etape diegimo programa pasiūlys mus prijungti prie „Ionic Pro SDK“. Atsakymas „Ne“ kol kas, kad pavyzdys būtų paprastas.
Įdiekite papildomą @ionic/lab
paketą, kad gautumėte patogų derinimo NS - naršyklės „iOS“, „Android“ ir „Windows“ įrenginių imitacijos:
cd Todo npm i --save-dev @ionic/lab
Dabar galite paleisti programą derinimo režimu. Tai leidžia jums kurti ir derinti programą tiesiogiai žiniatinklio naršyklėje:
ionic lab
Todėl gausite keletą naudingų adresų:
c / c ++
„Ionic Lab“ derinimo paslauga yra paleista 8200 prievade. Pati programa veikia 8100 prievade ir Atidaryti viso ekrano režimą nuoroda iš „Ionic Lab“ veda ten. Naršyklės langas su veikiančia „Ionic Lab“ atidaromas automatiškai.
Be to, „Ionic“ programoje nurodo programos adresą vietinis tinklas . Tai nepaprastai naudinga, nes leidžia atidaryti programą mobiliojo įrenginio naršyklėje, jei tik įrenginys yra vietiniame tinkle (pavyzdžiui, per „Wi-Fi“). Be to, galite naudoti Pridėti prie pagrindinio ekrano mygtuką, kad vėl atidarytumėte programą viso ekrano režimu. Tai greičiausias būdas išbandyti programą įrenginyje.
Kitas būdas yra „Ionic DevApp“ programa , kurią galima įdiegti mobiliajame įrenginyje ir kuri suteikia prieigą prie programos per vietinį tinklą. Jis siūlo papildinių palaikymą („Ionic Native“), kad būtų galima pasiekti vietinio įrenginio funkcijas ir rodyti žurnalus.
F7 kūrimo įrankiai yra mažiau pažengę nei „Ionic“, o automatinio inicijavimo CLI nėra dokumentuota. Tačiau oficiali svetainė numato kelios „GitHub“ saugyklos su šabloniniais projektais tai padės pradėti kurti.
Panašus į Skirtukai šablonas „Ionic“, F7 pasiūlymuose Vaizdai su skirtukais , bet naudosime funkcionalesnį šabloną, kuris integruos „Framework7“ su „React“. Parama „React“ buvo pridėta 3 versijoje. Tam klonuokite šablonų saugyklą:
git clone https://github.com/framework7io/framework7-template-react.git Todo
Perjunkite į projekto aplanką, gaukite priklausomybes ir pradėkite procesą:
cd Todo npm install npm start
Vykdymo rezultatai yra panašūs į „Ionic“: Jūs gaunate vietinę nuorodą ir nuorodą savo tinkle, kad galėtumėte tiesiogiai pasiekti iš realaus įrenginio:
Dabar galite atidaryti http://localhost:3000/
naršyklėje. „Framework7“ neapima įmontuotų įrenginių emuliatorių, todėl naudokime „Chrome DevTools“ įrenginio režimas gauti panašų rezultatą:
Kaip matote, „Framework7“ yra panašus į „Ionic“, nes jame yra dvi „iOS“ ir „Material Design“ temos. Tema parenkama pagal platformą.
Deja, skirtingai nei panašus šabloną su „Vue.js“ palaikymu oficialiuose „React“ šablonuose „Webpack“ dar neįdiegta, ir tai draudžia naudoti „Hot Module Replacement“, kad greitai atnaujintume programas neperkraunant puslapio. Vis tiek galite naudoti numatytąją tiesioginio perkrovimo funkciją, kuri iš naujo įkelia puslapį, kai keičiate šaltinio kodą.
Norėdami įdiegti programas įrenginiuose ir emuliatoriuose naudodami „Cordova“, turite atsisiųsti ir nustatyti „iOS“ ir „Android“ kūrimo įrankius, taip pat „Cordova“ CLI. Daugiau apie tai galite perskaityti mūsų puslapyje ankstesnis straipsnis ir oficialioje „Cordova“ svetainėje „iOS“ platformos vadovas ir „Android“ platformos vadovas skyriai.
Patirtis rodo, kad norint sėkmingai išspręsti daugumą „Ionic“ problemų, pakanka derinti su naršykle, retkarčiais tikrinant tikrus įrenginius.
Nepaisant to, kad sutinkate su „iOS“ ir „Android“ integravimu, o „Ionic“ paruošia reikiamus parametrus config.xml
failas ir šaltiniai resources
aplanką, vis tiek turite prijungti abi platformas prie programos naudodami „Cordova“:
cordova platform add ios cordova platform add android
Dabar galite paleisti „Cordova“ programą „tikruose“ emuliatoriuose, įdiegti ją į mobilųjį įrenginį ir net nusiųsti į „App Store“ ir „Google Play“.
Kita komanda įdiegia programą į „iOS“ įrenginį, jei ji prijungta per USB. Priešingu atveju programa bus įdiegta „iOS Simulator“.
cordova run ios
Labiausiai tikėtina, kad „Xcode“ komandų eilutės įrankiai informuos jus apie būtinybę nustatyti kūrėjo sertifikatus. Turėsite atidaryti projektą „Xcode“ ir atlikti reikiamus veiksmus. Tai reikia padaryti tik vieną kartą, o vėliau galėsite paleisti programą naudodami „Cordova“ CLI.
Kartais „iOS Simulator“ nepaleidžiama automatiškai. Tokiu atveju paleiskite jį rankiniu būdu, pavyzdžiui, per „Spotlight“.
„Android“ emuliatorių galima paleisti panašiai:
cordova run android
Atkreipkite dėmesį, kad cordova run
komanda paleidžia ir įdiegia jau surinkta programa, kuri nenaudoja ionic serve
/ ionic lab
serverio, todėl „Live Reload“ neveiks. Norėdami kurti ir derinti programą tiesiogiai, naudokite naršyklę vietiniame tinkle arba įdiekite „Ionic DevApp“ programą.
Patirtis rodo, kad norint sėkmingai išspręsti daugumą „Ionic“ problemų, pakanka derinti su naršykle, retkarčiais tikrinant tikrus įrenginius.
Anksčiau pasirinktas „React“ Framework7 šablonas nesuteikia „Cordova“ sąrankos automatizavimo, todėl platformas turėsite pridėti rankiniu būdu. Sukurkite „Cordova“ projektą aplanke cordova
projekto aplanko poaplankis:
cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../
Šablonas pagrįstas Sukurkite „React“ programą , todėl norėdami paleisti kompiliuotą projektą „Cordova“ aplinkoje, turite pridėti 'homepage': '.'
nustatymas į ./package.json
failą. Šį failą galima rasti projekto šakniniame lygyje:
Sudarykite „Framework7“ projektą ir nukopijuokite rezultatą į „Cordova“ projektą:
npm run build rm -rf cordova/www/* cp -r build/* cordova/www/
Dabar galite paleisti programą įrenginyje ar emuliatoriuje:
cd cordova/ cordova run ios
Su tavimi baigta! Tikėkimės, kad „Framework7“ atitiks „Ionic“ kūrimo standartą ir pradinį sąrankos patogumą.
Pagaliau pradėkime kurti programą! Kadangi tai yra „To Do“ programa, pagrindiniame puslapyje (src/pages/home/home.html
faile) bus pateikiamas užduočių sąrašas su galimybe „pažymėti kaip baigtą“ ir „pridėti naują“.
„Ionic“ siūlo komponentus ir sąrašus. Pirmiausia pašalinkite padding
nuosavybę nuo elemento, kad sąrašas būtų rodomas visame ekrane. Sąraše įdėkite tekstą naudodami elementą ir pridėkite priedą, kad pažymėtumėte atliktas užduotis.
Hello ApeeScape Blog
Grįžkite į naršyklės skirtuką, kai veikia „Ionic Lab“ paslauga. Programa buvo atnaujinta automatiškai:
Puiku! Dabar perkelkite užduoties duomenis į JS objektą ir nustatykite jo HTML pateiktį naudodami kampinį. Eikite į src/pages/home/home.ts
failą ir sukurkite HomePage
ypatybių užduotis klasės egzempliorius:
export class HomePage { tasks = [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }]; constructor() { } }
Dabar galite kreiptis į tasks
masyvas HTML kode. Naudokite *ngFor
Kampinis konstravimas iteratyviai sukuria sąrašo elementus kiekvienam masyvo elementui. Kodas tampa mažesnis:
{{task.name}}
Liko tik pridėti mygtuką, kad sukurtumėte naujas užduotis į puslapio antraštę. Norėdami tai padaryti, naudokite ,,, andcomponents:
To Do List
Atkreipkite dėmesį į (click)='addTask()'
Kampinė konstrukcija. Kaip jūs galite atspėti, jis prideda čiaupo tvarkytuvą prie mygtuko ir iškviečia addTask()
mūsų komponento metodas. Įdiegime šį metodą, kad atidarytume užduoties pavadinimo dialogo langą, kai paliečiamas mygtukas.
Tam jums reikia AlertController
Joninis komponentas. Norėdami naudoti šį komponentą, importuokite jo tipą:
import { AlertController } from 'ionic-angular';
Ir nurodykite jį konstruktoriaus parametrų sąraše puslapyje:
constructor(public alertCtrl: AlertController) { }
Dabar galite tai paskambinti addTask()
metodas. Nustatykite jį po valdiklio. Galite sukurti ir rodyti dialogo langą su šiais skambučiais:
this.alertCtrl .create(/* options */) .present();
Nurodykite pranešimo antraštę, lauko aprašymą ir du mygtukus options
objektas. Mygtukas „Gerai“ pridės naują užduotį prie tasks
masyvas:
handler: (inputs) => { this.tasks.push({ name: inputs.name }); }
Pridėjus elementą prie masyvo this.tasks
, komponentas bus reaktyviai atstatytas ir sąraše bus rodoma nauja užduotis.
vieneto testavimas c # pavyzdys
Visas puslapio kodas dabar atrodo taip:
import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } }
Iš naujo įdiekite programą įrenginyje:
cordova run ios
Viskas! Ne taip sunku, ar ne? Dabar pabandykime padaryti tą patį su „Framework7“.
„Framework7“ šablonai sukurti norint parodyti visas komponentų galimybes, todėl jums reikia palikti tik src/components/pages/HomePage.jsx
puslapis src/components/App.jsx
ir src/routes.js
failus, išvalykite jo turinį ir pašalinkite papildomus kodo komentarus.
Dabar sukurkite užduočių sąrašą. „Framework7“ teikia ir komponentai už tai. Norėdami įdėti užduoties užbaigimo jungiklį į jį, pridėkite komponentą. Nepamirškite importuoti visų šių komponentų iš framework7-react
modulis. Dabar puslapio kodas atrodo taip:
import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( To Do List );
Pati programa atrodo taip:
Gana gera pradžia. Pabandykime dar kartą perkelti statinius duomenis iš HTML kodo. Tam naudokite išmanųjį komponentą, o ne tą, kurį turėjome be pilietybės. Importuoti Component
abstrakti „React“ klasė:
import React, { Component } from 'react';
Užrašykite užduočių masyvą į state
kintamasis egzempliorius:
export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }] }; /* ... */ }
Tikroji programa greičiausiai naudos abstraktesnį duomenų srautą, pvz., Su „Redux“ ar „MobX“, tačiau nedidelį pavyzdį išlaikysime vidinio komponento būseną.
Dabar galite naudoti JSX sintaksę, kad pakartotinai sukurtumėte sąrašo elementus kiekvienai masyvo užduočiai:
{this.state.tasks.map((task, i) => ( ))}
Liko tik pridėti antraštę su mygtuku ir vėl sukurti naują užduotį. Elementas jau yra, todėl pridėkite jį:
To Do List
„React“ galite pridėti čiaupų tvarkytuvus naudodami onClick
ypatybė ir joje nustatomas atgalinio žymeklio rodiklis. Įdiekite tvarkyklę, kad būtų rodomas užduoties pavadinimo dialogo langas.
Kiekvienas „Framework7“ elementas turi prieigą prie programos egzemplioriaus per this.$f7
nuosavybė. Galite naudoti dialog.prompt()
tokiu būdu. Prieš uždarydami dialogo langą, paskambinkite setState()
„React“ komponento metodą ir perduoti jam ankstesnio masyvo kopiją su nauju elementu. Tai reaktyviai atnaujins sąrašą.
addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };
Čia yra visas komponento kodas:
import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( To Do List {this.state.tasks.map((task, i) => ( ))} ); }
Patikrinkite rezultatą:
Liko tik atstatyti ir įdiegti įrenginį:
kintamieji klasės pitone
npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios
Padaryta!
Galutinį abiejų šių projektų kodą galite rasti „GitHub“:
Dabar jūs pamatėte visą mokymo programą su kiekviena „Cordova“ sistema. Kaip „Framework7“ susiduria su joninėmis?
„Ionic“ yra daug lengviau įdiegti dėl savo CLI, o „F7“ reikia daugiau laiko, norint pasirinkti ir nustatyti šabloną arba įdiegti žingsnis po žingsnio.
Abiejose sistemose yra visas nuostabiai sukurtų standartinių komponentų rinkinys dviem temomis: „iOS“ ir „Material Design“. „Ionic“ papildomai pateikia šiuos komponentus „Windows“ temoje ir gigantišką vartotojo temos turgavietėje.
Be to, kad visiškai imituojamas vietinis dizainas ir animacijos, didelis dėmesys skiriamas našumo optimizavimui, suteikiant fantastiškų rezultatų: dažnai beveik neįmanoma atskirti bet kurios sistemos programų nuo vietinių.
„Framework7“ pateikia papildomą sudėtingesnių ir naudingesnių komponentų, tokių kaip „Smart Select“ , Automatinis užbaigimas , Kalendorius , Kontaktų sąrašas , Prisijungimo ekranas , Žinutės ir Nuotraukų naršyklė . Kita vertus, „Ionic“ teikia didžiulį pasirinkimą vartotojo sukurti komponentai .
Ionicas akivaizdžiai laimi šiuos parametrus dėl ilgesnio gyvenimo trukmės, tvirto finansinio palaikymo ir aktyvios bendruomenės. Joninė infrastruktūra nuolat tobulėja: palaikančios paslaugos ir debesų sprendimai užleidžia vietą naujoms, o papildinių skaičius vis auga.
„Framework7“ yra geresnis nei bet kada, tačiau labai trūksta bendruomenės palaikymo.
„Framework7“ yra lankstesnė sprendžiant trečiųjų šalių sprendimus. Didžiausia jo stiprybė yra galimybė pasirinkti, jei projekte naudojate „Vue“ ar „React“, taip pat „Webpack“ ar „Browserify“. Joninis yra pagrįstas kampiniu ir reikalauja žinių apie jį (taigi ir „TypeScript“).
Tačiau neseniai „Ionic“ kūrėjai paskelbė apie naują „Ionic 4“ beta versiją , teigdamas, kad yra visiškai vartotojo sąsajos-agnostikas - nebereikia kampinių priklausomybių, jei jų nenorite.
Ar naudoti „Cordova“, priklauso nuo konkretaus projekto. Iš tiesų, hibridinių mobiliųjų programų kūrimo greitis ir kelių platformų palaikymas yra pagrindiniai jo pranašumai. Bet tai visada yra kompromisas, ir kartais galite susidurti su kai kuriais trūkumais, kurių nebūtų, jei būtų įprastas požiūris. Šios nuostabios struktūros ir jų bendruomenės puikiai dirba, kad sumažintų tuos trūkumus ir palengvintų mūsų gyvenimą. Taigi, kodėl neišbandžius jų?
Susijęs: Dvikova: „React Native vs. Cordova“„Cordova“ supakuoja žiniatinklio programas į vietinius konteinerius, kad galėtų jas paleisti įvairiose mobiliose platformose. Programa įkeliama „žiniatinklio rodinyje“ - tam tikroje viso ekrano naršyklėje mobiliesiems. Tai taip pat suteikia sąsają tarp JS ir vietinio kodo, kad būtų galima pasiekti vietinį API: tokios įrenginio funkcijos kaip „push“ pranešimai ir prieiga prie kameros.
„PhoneGap“ yra originalus technologijos pavadinimas, vėliau prisidedantis prie atvirojo kodo bendruomenės ir pavadintas Apache Cordova. Šiais laikais pats „PhoneGap“ yra „Adobe“ priklausantis projektas, kuris yra CLI, GUI ir debesų įrankių rinkinys, teikiantis naudingas paslaugas „Cordova“ mobiliųjų programų kūrėjams.
„Onsen“ vartotojo sąsaja yra HTML ir „JavaScript“ sistema, teikianti vartotojo sąsajos komponentų rinkinį, imituojantį natūralią „iOS“ ir „Android“ platformų išvaizdą. Jis derinamas su „Monaca“ - įrankių rinkiniu, padedančiu kurti hibridinių mobiliųjų programėlių ciklą.
„Ionic“ yra vartotojo sąsajos sistema, pagrįsta „Angular“, teikianti įvairių temų mobiliųjų sąsajų komponentų rinkinį, įskaitant „iOS“, „Material Design“ ir „Windows Platform“. Panašiai kaip „PhoneGap“, jame taip pat pateikiamos įvairios papildomos funkcijos ir paslaugos, padedančios kurti hibridines mobilias programas, jas išbandyti ir pristatyti.
„Framework7“ naudojama hibridinėms programoms mobiliesiems kurti. Tai vartotojo sąsajos komponentų rinkinys, vaizduojantis „iOS“ ir „Material Design“ stiliaus vadovus. Jis turi keletą įdiegimų, pagrįstų populiariausių „front-end“ sistemų, tokių kaip „React“ ir „Vue“, viršuje.
Savoji programa yra sukurta konkrečiai mobiliajai platformai, naudojant savąjį SDK ir kūrimo kaminą. Pvz., Vietinė „iOS“ programa būtų sukurta naudojant „Swift“ arba „Objective-C“, o „Android“ - „Kotlin“ ar „Java“.
Hibridinė mobilioji programa sukurta naudojant vietinio mobiliojo SDK ir kai kurių kitų technologijų paketų, pvz., HTML ir „JavaScript“, derinį. Hibridines programas kuriančios technologijos yra „Cordova“, „Xamarin“, „React Native“ ir „Native Script“, be daugelio kitų.