Cordova Çerçeveleri: Ionic vs. Framework7

Yayınlanan: 2022-03-11

Bu günlerde, web geliştiricileri dünyayı yönetiyor. JavaScript, programlanabilen her yerde kullanılır. Bu alanlar arasında, mobil uygulama geliştirme, dallanmanın ilk yollarından biriydi: Yaklaşık on yıl önce PhoneGap, iOS ve Android için HTML ve JavaScript uygulama kurulumuna izin verdi.

O zamandan beri, teknolojinin iniş ve çıkışları oldu: Geliştirme kolaylığına rağmen, bu uygulamalar açıkça yerel uygulamalardan oldukça farklıydı. Vanilla HTML ve tarayıcı tabanlı JavaScript, tarayıcıları hedef aldı ve bu yeni alana kusursuz bir şekilde geçiş yapmaları mümkün değildi.

Bu güne kadar ana sorunlar hala şunlardır:

  • Yerel tasarım ve animasyona bağlı kalmanın zorlukları
  • Karmaşık ekran geçiş efektleri
  • Dokunmatik olayları işleme
  • Büyük listelerdeki performans
  • Sabit elemanların konumlandırılması
  • Farklı ekran boyutları için uyarlama
  • Yerel kontrol öğelerinin konumları (örneğin, iOS durum çubuğu)
  • Farklı mobil tarayıcılara uyum sağlama

Neden Cordova Uygulamaları İçin Bir Çerçeve Kullanmalısınız?

Cordova teknolojisi, yukarıdaki sorunlara sahip uygulamalar nedeniyle genellikle hafife alınır. Çerçeveler, bunları dengelemeyi ve HTML uygulamalarını hem tasarım hem de performans açısından yerel uygulamalara mümkün olduğunca yakın hale getirmeyi amaçlar.

Birkaç hibrit uygulama örneğine bakalım. Modern dünyada web geliştiricilerinin genişlemesini kolaylaştırmak için ayarlanmış olan Onsen UI'nin yanı sıra şu anda en başarılı iki çerçeve ile yapılmıştır: Framework7 ve Ionic.

İyonik Çerçeve Hakkında

Ionic, 2012 yılında Drifty Co. tarafından geliştirildi ve Angular tabanlı. O zamandan beri aktif bir gelişim içinde, önemli yatırımlar ve güçlü bir geliştirici topluluğu alıyor. Resmi web sitesi, milyonlarca uygulamanın buna dayalı olarak geliştirildiğini iddia ediyor.

Bu makalenin yazıldığı anda, en son sürüm Angular 5 tabanlı Ionic 3'tür. Esnekliği ve Angular'dan bağımsızlığı hedefleyen Ionic 4 erken beta aşamasındadır.

UI motoru, harika bir bileşen kitaplığı ve yerel cihaz işlevlerine erişmek için bir arabirimin yanı sıra, Ionic birden fazla ekstra yetenek, hizmet ve yardımcı program sunar.

İyonik CLI

Ionic'in komut satırı arayüzü, etkileşimli proje başlatma (yani bir sihirbaz), sayfalar ve bileşenler oluşturmak ve hareket halindeyken uygulamalar oluşturmanıza ve bunları Canlı Yeniden Yüklemenize olanak tanıyan bir geliştirme sunucusu çalıştırmak için kullanılır. Ayrıca Ionic bulut hizmetleri ile entegrasyon sağlar.

Laboratuvar ve DevApp

Lab, uygulamanın çalışmasını Ionic geliştiricinin tarayıcısında farklı platformlarda taklit etmenizi sağlayan son derece kullanışlı bir mini hizmettir. DevApp, bir uygulamayı gerçek bir cihaza hızla dağıtmanıza yardımcı olur.

Paketleme, Dağıtım ve İzleme

Ionic, test kullanıcıları ve kullanıcılar için uygulama oluşturmayı, hata ayıklamayı, test etmeyi ve güncellemeyi basitleştiren ve hızlandıran bir web hizmetleri paketi ile birlikte gelir.

Yine de Ionic'in planları sık sık değişiyor. Auth, Push, Analytics ve View gibi önceden var olan bazı hizmetler kapatılarak abonelerin tepkisine neden oldu.

yaratıcı

Bu, işlevsel arayüzler geliştirmek için Ionic'in sürükle ve bırak grafik düzenleyicisidir.

Framework7 Hakkında

Bu çerçeve 2014 yılında Rus stüdyosu iDangero tarafından geliştirilmiştir. Sonuçta, GitHub deposuna birkaç küçük katkıda bulunanlar dahil değil, bir geliştirici proje üzerinde çalışıyor.

Başlangıçta, Framework7, adını aldığı son zamanlarda piyasaya sürülen iOS 7 tarzındaki UI bileşenlerinden oluşuyordu. Daha sonra bir Android teması eklendi ve her iki tema da en son iOS ve Materyal Tasarımı için güncellendi.

Son zamanlarda, projenin gelişimi hız kazandı ve popüler teknolojileri ve araçları entegre ederek bir dizi bileşenden mobil uygulamalar için tam teşekküllü bir çerçeveye genişledi.

Framework7'nin desteği ve Vue.js kullanan örnekler v1'den beri mevcuttur ve v3 ayrıca React'i de destekler. Bu, projenin yalnızca Angular ve TypeScript sunan daha popüler Ionic ile ciddi şekilde rekabet etmesine izin verebilir.

Kurulum ve İlk Başlatma

İyonik

Ionic ile çalışmaya başlamak için NPM ile kurun:

 npm install -g ionic

Ardından, gelecekteki uygulama için şablonu seçin. Resmi Ionic web sitesi birden fazla şablon sunar veya uygulamayı ionic start myApp blank ile sıfırdan oluşturmak için boş bir şablon seçebilirsiniz.

Basit bir tasarım seçelim. Aşağıdaki komutu yürütün:

 ionic start Todo tabs

Yükleyici, "Yerel iOS ve Android'i hedeflemek için yeni uygulamanızı Cordova ile entegre etmek ister misiniz?" diye sorduğunda "Evet" yanıtını verin. Bu, uygulamayı Cordova ile otomatik olarak entegre edecek ve mobil platformlarda dağıtım için hazırlayacaktır.

Bir sonraki adımda, yükleyici bizi Ionic Pro SDK'ya bağlamayı teklif edecek. Örneği basit tutmak için şimdilik “Hayır” yanıtını verin.

iOS, Android ve Windows cihazlarının tarayıcı içi taklitleri olan uygun hata ayıklama kullanıcı arayüzünü elde etmek için ek @ionic/lab paketini yükleyin:

 cd Todo npm i --save-dev @ionic/lab

Artık uygulamayı hata ayıklama modunda başlatabilirsiniz. Bu, uygulamayı web tarayıcısında canlı olarak geliştirmenize ve hatalarını ayıklamanıza olanak tanır:

 ionic lab

Sonuç olarak, birkaç yararlı adres alacaksınız:

"iyonik laboratuvar" işlem çıktısı

Ionic Lab hata ayıklama hizmeti 8200 numaralı bağlantı noktasında başlatılır. Uygulamanın kendisi 8100 numaralı bağlantı noktasında çalışır ve Ionic Lab'den gelen Tam ekranı aç bağlantısı oraya götürür. Ionic Lab'in çalıştığı tarayıcı penceresi otomatik olarak açılır.

iOS ve Android simülasyonlarını gösteren Ionic Lab'in hata ayıklama kullanıcı arayüzü

Ek olarak, Ionic yerel ağdaki uygulama adresini sağlar. Bu, cihaz yerel ağda olduğu sürece (örneğin, Wi-Fi aracılığıyla) uygulamayı mobil cihaz tarayıcısında açmanıza izin verdiği için son derece kullanışlıdır. Ayrıca, uygulamayı tam ekran modunda yeniden açmak için Ana Ekrana Ekle düğmesini kullanabilirsiniz. Bu, uygulamanızı cihazda test etmenin en hızlı yoludur.

Diğer bir yol ise bir mobil cihaza yüklenebilen ve yerel ağ üzerinden uygulamaya erişim sağlayan Ionic DevApp uygulamasıdır. Yerel cihaz işlevlerine erişim ve günlükleri görüntülemek için eklenti desteği (Ionic Native) sunar.

çerçeve7

F7'nin geliştirme araçları, Ionic'inkinden daha az gelişmiştir ve otomatik başlatma CLI'si belgelenmemiştir. Ancak, resmi web sitesi, geliştirmeye başlamanıza yardımcı olacak şablon projeleri içeren birkaç GitHub deposu sağlar.

Ionic'teki Sekmeler şablonuna benzer şekilde F7, Sekmeli Görünümler sunar, ancak Framework7'yi React ile entegre eden daha işlevsel bir şablon kullanacağız. React desteği v3'te eklendi. Bunun için şablon deposunu klonlayın:

 git clone https://github.com/framework7io/framework7-template-react.git Todo

Proje klasörüne geçin, bağımlılıkları alın ve işlemi başlatın:

 cd Todo npm install npm start

Yürütme sonuçları Ionic'e benzer: Gerçek bir cihazdan anında erişim için ağınızda bir yerel bağlantı ve bir bağlantı alırsınız:

Framework7 için "npm start" işlem çıktısı

Artık bir tarayıcıda http://localhost:3000/ açabilirsiniz. Framework7, yerleşik cihaz öykünücülerini içermez, bu nedenle benzer bir sonuç elde etmek için Chrome DevTools'un Cihaz Modunu kullanalım:

iOS ve Android için Chrome DevTools'un Cihaz Modunda çalışan bir Framework7 uygulaması

Gördüğünüz gibi Framework7, iki standart teması olarak iOS ve Materyal Tasarımına sahip olması bakımından Ionic'e benzer. Tema, platforma göre seçilir.

Ne yazık ki, resmi React şablonlarındaki Vue.js destekli benzer bir şablonun aksine, Webpack henüz uygulanmadı ve bu, sayfayı yeniden yüklemeden uygulamaları hızlı bir şekilde güncellemek için Sıcak Modül Değiştirme özelliğini kullanmamızı engelliyor. Yine de, kaynak kodunu her değiştirdiğinizde sayfayı yeniden yükleyen varsayılan canlı yeniden yükleme özelliğini kullanabilirsiniz.

Cordova'yı kurmak

Cihazlara ve emülatörlere Cordova ile uygulama yüklemek için iOS ve Android için geliştirme araçlarını ve ayrıca Cordova CLI'yi indirmeniz ve kurmanız gerekir. Bununla ilgili daha fazla bilgiyi önceki makalemizde ve resmi Cordova web sitesinde iOS Platform Kılavuzu ve Android Platform Kılavuzu bölümlerinde okuyabilirsiniz.

İyonik

Deneyimler, Ionic sorunlarının çoğunu başarılı bir şekilde çözmek için, gerçek cihazlarda ara sıra yapılan testlerle tarayıcı tabanlı hata ayıklamanın yeterli olduğunu göstermektedir.

İOS ve Android için entegrasyonu kabul etmenize ve config.xml dosyasındaki gerekli ayarları ve resources klasöründeki kaynakları hazırlamasına rağmen, yine de her iki platformu da Cordova ile uygulamaya bağlamanız gerekiyor:

 cordova platform add ios cordova platform add android

Artık Cordova uygulamasını "gerçek" emülatörlerde başlatabilir, mobil cihaza yükleyebilir ve hatta App Store ve Google Play'e gönderebilirsiniz.

Sonraki komut, uygulamayı USB ile bağlıysa iOS cihazınıza yükler. Aksi takdirde, uygulama iOS Simulator'a yüklenecektir.

 cordova run ios

Büyük olasılıkla, Xcode Komut Satırı Araçları, geliştirici sertifikaları ayarlama ihtiyacı hakkında sizi bilgilendirecektir. Projeyi Xcode'da açmanız ve gerekli işlemleri yapmanız gerekecektir. Bunun yalnızca bir kez yapılması yeterlidir ve ardından uygulamayı Cordova CLI ile çalıştırabilirsiniz.

Bazen iOS Simülatörü otomatik olarak başlamaz. Bu durumda, örneğin Spotlight aracılığıyla manuel olarak başlatın.

Android öykünücüsü benzer şekilde başlatılabilir:

 cordova run android 

Ionic yüklü Cordova uygulamasına sahip iOS ve Android emülatörleri

cordova run komutunun, ionic serve sunucu / ionic lab sunucusunu kullanmayan önceden derlenmiş uygulamayı başlattığını ve yüklediğini, dolayısıyla Canlı Yeniden Yüklemenin çalışmayacağını unutmayın. Uygulamayı canlı olarak geliştirmek ve hatalarını ayıklamak için yerel ağdaki tarayıcıyı kullanın veya Ionic DevApp uygulamasını yükleyin.

Deneyimler, Ionic sorunlarının çoğunu başarılı bir şekilde çözmek için, gerçek cihazlarda ara sıra yapılan testlerle tarayıcı tabanlı hata ayıklamanın yeterli olduğunu göstermektedir.

çerçeve7

Daha önce seçilen “React” Framework7 şablonu, Cordova için kurulum otomasyonu sağlamaz, bu nedenle platformları manuel olarak eklemeniz gerekecektir. Proje klasörünüzün cordova alt klasöründe bir Cordova projesi oluşturun:

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

Şablon, Create React Uygulamasını temel alır, bu nedenle derlenmiş projeyi bir Cordova ortamında çalıştırmak için "homepage": "." ./package.json dosyasına ayarlayın. Bu dosya projenin kök seviyesinde bulunabilir:

Cordova'yı düzgün bir şekilde derlemek için gereken ayar

Framework7 projesini derleyin ve sonucu Cordova projesine kopyalayın:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

Artık uygulamayı bir cihazda veya bir öykünücüde başlatabilirsiniz:

 cd cordova/ cordova run ios 

Framework7 tabanlı Cordova uygulamasının yüklü olduğu iOS ve Android öykünücüleri


Bitirdiniz! Umarız Framework7, Ionic'in geliştirme standardını ve ilk kurulum rahatlığını yakalar.

Görev Listeleri Oluşturma

İyonik

Sonunda uygulamayı oluşturmaya başlayalım! Bu bir Yapılacaklar uygulaması olduğundan, ana sayfa ( src/pages/home/home.html dosyası), "tamamlandı olarak işaretleme" ve "yeni ekleme" özelliğine sahip görevlerin listesini içerecektir.

Ionic, listeler için <ion-list> ve <ion-item> bileşenlerini sunar. İlk olarak, listeyi ekran genelinde yapmak için <ion-content> öğesinden padding özelliğini kaldırın. Listede, bir <ion-label> öğesi kullanarak metni yerleştirin ve tamamlanan görevleri işaretlemek için bir <ion-toggle> öğesi ekleyin.

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

Ionic Lab hizmeti çalışırken tarayıcı sekmesine geri dönün. Uygulama otomatik olarak güncellendi:

Android ve iOS modlarında Ionic Lab aracılığıyla simüle edilen statik Yapılacaklar Listesi düzeni testimiz

Harika! Şimdi görev verilerini JS nesnesine taşıyın ve HTML sunumunu Angular ile ayarlayın. src/pages/home/home.ts dosyasına gidin ve HomePage sınıfı örneğinin görevleri özelliğini oluşturun:

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

Artık HTML kodundaki tasks dizisine başvurabilirsiniz. Her dizi öğesi için yinelemeli olarak liste öğeleri oluşturmak için *ngFor Angular yapısını kullanın. Kod küçülür:

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

Geriye kalan tek şey, sayfa başlığına yeni görevler oluşturmak için düğmeyi eklemek. Bunu yapmak için <ion-navbar> , <ion-buttons> , <button> ve <ion-icon> bileşenlerini kullanın:

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

(click)="addTask()" Açısal yapıya dikkat edin. Tahmin edebileceğiniz gibi, düğmeye dokunma işleyicisini ekler ve bileşenimiz için addTask() yöntemini çağırır. Düğmeye dokunulduğunda görev adı iletişim penceresini açmak için bu yöntemi uygulayalım.

Bunun için AlertController Ionic bileşenine ihtiyacınız var. Bu bileşeni kullanmak için türünü içe aktarın:

 import { AlertController } from 'ionic-angular';

Ve bunu sayfanın yapıcı parametreleri listesinde belirtin:

 constructor(public alertCtrl: AlertController) { }

Artık onu addTask() yöntemiyle çağırabilirsiniz. Kontrolörden sonra ayarlayın. Aşağıdaki çağrılarla iletişim penceresini oluşturabilir ve görüntüleyebilirsiniz:

 this.alertCtrl .create(/* options */) .present();

options nesnesinde mesaj başlığını, alan açıklamasını ve iki düğmeyi belirtin. "Tamam" düğmesi, tasks dizisine yeni bir görev ekleyecektir:

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

this.tasks dizisine ekledikten sonra, bileşen reaktif olarak yeniden oluşturulacak ve listede yeni bir görev görüntülenecektir.

Tam sayfa kodu şimdi şöyle görünür:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { 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(); } } 

Android ve iOS modlarında Ionic Lab aracılığıyla simüle edilen To Do uygulamamız

Uygulamayı cihaza yeniden yükleyin:

 cordova run ios

Bu kadar! O kadar zor değil, değil mi? Şimdi aynısını Framework7 ile yapmaya çalışalım.

çerçeve7

Framework7 şablonları tüm bileşen özelliklerini gösterecek şekilde yapılmıştır, bu nedenle src/components/App.jsx ve src/routes.js dosyalarında yalnızca src/components/pages/HomePage.jsx sayfasını bırakmanız, içeriğini temizlemeniz gerekir. ve ekstra kod yorumlarını kaldırın.

Şimdi görev listesini oluşturun. Framework7 bunun için <List simple-list> ve <ListItem> bileşenleri sağlar. İçine bir görev tamamlama anahtarı yerleştirmek için <Toggle slot="after"/> bileşenini ekleyin. Tüm bu bileşenleri framework7-react modülünden almayı unutmayın. Şimdi sayfa kodu şöyle görünür:

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

Ve uygulamanın kendisi şöyle görünür:

Android ve iOS modlarında Chrome DevTools tarafından simüle edilen, Framework7'de çalışan statik Yapılacaklar Listesi düzeni testimiz

Oldukça iyi bir başlangıç. Statik verileri tekrar HTML kodundan taşımayı deneyelim. Bunun için elimizdeki durumsuz bileşen yerine akıllı bir bileşen kullanın. Component soyut sınıfını React'ten içe aktarın:

 import React, { Component } from 'react';

Ve görevler dizisini state değişkeni örneğine yazın:

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

Gerçek uygulamanın daha soyut bir veri akışı kullanması muhtemeldir - örneğin Redux veya MobX ile - ancak küçük bir örnek için dahili bileşen durumuna devam edeceğiz.

Artık dizideki her görev için yinelemeli olarak liste öğeleri oluşturmak için JSX sözdizimini kullanabilirsiniz:

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

Geriye kalan tek şey, yeniden yeni bir görev oluşturmak için düğmeyi içeren başlığı eklemektir. <Navbar> öğesi zaten var, bu nedenle <NavRight> öğesine <Link iconOnly> ekleyin:

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

React'te, onClick özelliğini kullanarak ve içindeki geri arama işaretçisini ayarlayarak dokunma işleyicileri eklersiniz. Görev adı iletişim kutusunu göstermek için işleyiciyi uygulayın.

Framework7'deki her öğe, this.$f7 özelliği aracılığıyla uygulama örneğine erişebilir. dialog.prompt() yöntemini bu şekilde kullanabilirsiniz. İletişim kutusunu kapatmadan önce, React bileşeninin setState() yöntemini çağırın ve ona yeni bir öğeyle önceki dizinin kopyasını iletin. Bu, listeyi reaktif olarak güncelleyecektir.

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

İşte tam bileşen kodu:

 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: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

Sonucu kontrol edin:

Android ve iOS modlarında Chrome DevTools tarafından simüle edilen Framework7 üzerinden çalışan To Do uygulamamız

Geriye kalan tek şey cihazı yeniden oluşturmak ve dağıtmak:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

Tamamlandı!


Bu projelerin her ikisinin de son kodu GitHub'da mevcuttur:

  • iyonik yapılacaklar uygulaması
  • framework7-react-todo-app

Sonuçlar

Artık her Cordova çerçevesiyle ilgili tam öğreticiyi gördünüz. Framework7, Ionic'e karşı nasıl yığılır?

İlk kurulum

Ionic'in CLI'si sayesinde kurulumu çok daha kolaydır, F7 ise bir şablon seçmek ve ayarlamak veya sıfırdan adım adım kurulum için daha fazla zaman gerektirir.

Bileşen Çeşitliliği

Her iki çerçeve de iki temada harika hazırlanmış standart bileşenlerden oluşan eksiksiz bir sete sahiptir: iOS ve Materyal Tasarımı. Ionic ayrıca bu bileşenleri Windows temasında ve devasa bir kullanıcı temaları pazarında sağlar.

Yerel tasarım ve animasyonları tamamen taklit etmenin yanı sıra, harika sonuçlar sağlayan performans optimizasyonuna çok dikkat edilir: Çoğu zaman, her iki çerçevedeki uygulamaları yerel olanlardan ayırt etmek neredeyse imkansızdır.

Framework7, Akıllı Seçim , Otomatik Tamamlama , Takvim , Kişiler Listesi , Oturum Açma Ekranı , Mesajlar ve Fotoğraf Tarayıcı gibi daha karmaşık ve kullanışlı bileşenlerin ek bir listesini sağlar. Öte yandan, Ionic, kullanıcı tarafından oluşturulan çok çeşitli bileşenler sunar.

Ekosistem ve Topluluk

Ionic, daha uzun ömrü, güçlü finansal desteği ve aktif topluluğu sayesinde bu parametrelerde açıkça kazanıyor. İyonik altyapı sürekli gelişiyor: Destekleyici hizmetler ve bulut çözümleri, yerini yenilerine bırakıyor ve eklentilerin sayısı artmaya devam ediyor.

Framework7 her zamankinden daha iyi, ancak topluluk desteğinden fena halde yoksun.

Üçüncü Taraf Bağımlılıkları

Framework7, üçüncü taraf çözümler açısından daha esnektir. En büyük gücü, muhtemelen projede Vue veya React'in yanı sıra Webpack veya Browserify kullanıp kullanmayacağınızı seçme yeteneğidir. Ionic, Angular'a dayanır ve içinde bilgi gerektirir (ve dolayısıyla TypeScript de.)

Bununla birlikte, son zamanlarda, Ionic geliştiricileri, tamamen UI-framework-agnostik olduğunu iddia eden yeni bir Ionic 4 beta duyurdu - istemiyorsanız artık Angular bağımlılıkları yok.

Cordova Çerçeveleri: Platformlar Arası Mobil Uygulamalar Geliştirmenin Hala Güçlü Bir Yolu

Cordova'nın kullanılıp kullanılmaması projeye bağlıdır. Gerçekten de, hibrit mobil uygulama geliştirmenin hızı ve çoklu platformları desteklemesi ana avantajlarıdır. Ancak bu her zaman bir takastır ve bazen yerel bir yaklaşımla var olmayacak bazı kusurlarla karşılaşabilirsiniz. Bu harika çerçeveler ve toplulukları, bu kusurları azaltmak ve hayatımızı kolaylaştırmak için harika bir iş çıkarıyor. Öyleyse neden onları denemiyorsunuz?

İlgili: Düello: React Native vs. Cordova