In this guide, we’ll compare two of the most popular mobile frameworks: Framework7 and Ionic. We’ll introduce you to Ionic and Framework7, describe some key features, and compare the pros and cons of using Framework7 vs. Ionic.
We’ll start by reviewing the following:
We’ll then compare Framework7 vs. Ionic, focusing on the following categories:
What is Framework7?
Framework7 is a free and open-source framework for building mobile, work area, and web apps with a native look and feel. With some extra configurations, you can also integrate Capacitor in a Framework7 application.
Created by Russian studio iDangero.us in 2014, Framework7’s codebase suggests that it’s likely
the work of a single developer, perhaps with some minor contributions from other users.
What is Ionic?
Ionic works as an open-source SDK framework designed on top of Apache Cordova and Angular. Ionic can also be integrated with Capacitor, which is a cross-platform app runtime for building web apps that run natively on iOS, Android, Electron, and the web.
Framework7 vs. Ionic: Key features
Before we get into the weeds comparing Framework7 vs. Ionic, here’s an overview of the features associated with each framework.
- Faster development: Using tools such as Bower, a package manager for the web, facilitates faster development when working with Framework7
- Framework7 CLI: Framework7 comes with its own command line interface that can be used to scaffold a new Framework7 project. Basically, the Framework7 CLI helps you build, run, and prepare an application for production
- Ionic CLI: The Ionic framework comes with a fascinating command line interface. Its commands can be used to start, build, run, and emulate an Ionic application
- Angular: Ionic owes much of its popularity to Angular, which is its primary framework for integration. The Ionic Angular package includes all the functionality an Angular developer would expect and integrates with Angular core libraries
- Capacitor support: Ionic uses Capacitor, a cross-platform app runtime for building web apps that run natively on iOS, Android, Electron, and the web
Installation and scaffolding
Install ionic globally on your local machine using npm:
npm install -g @ionic/cli
Once the installation is complete, scaffold a new Ionic project with this command:
ionic start <name of app> blank
After creating your new Ionic application, move into the projects directory and run the application:
cd <name of app> $ ionic serve
Ionic has a cool feature called Ionic Lab that helps you preview your application in both Android and iOS. To install Ionic Lab, run:
npm i --save-dev @ionic/lab
To run your application, add the
ionic serve --lab
There are multiple ways to set up a Framework7 application. One option is to download its source codes from the Framework7 GitHub repository. All you have to do is select a custom version of your choice. You can also use the Framework7 CLI to set up a new project.
First, install Cordova globally. This is Framework7’s runtime.
npm install -g cordova
Next, install the Framework7 CLI globally:
npm install -g framework7-cli
After the installation is complete, start a new application by running this on your terminal:
This command will prompt you for few questions about the framework and template you want to start with as well as some basic information about the app.
Framework7 vs. Ionic: Which is better?
Framework7 and Ionic are among the most popular cross-platform mobile development tools. Both are free and open-source, well-documented, and offer a high level of performance.
Let’s compare Ionic vs. Framework7 in terms of community support, documentation, performance, and native functionality.
You’ll find more support if you use Ionic with Angular as a frontend framework. On the other end, Framework7’s community is not that active as it is obvious that majorly one developer has been working on this project with some other minor contributions from other users.
Both Ionic and Framework7 have clear, well-structured documentation with lots of examples. Both sets of documentation display a list of all the framework’s components and demonstrate how to use them following best practices.
Ionic has an extra feature where you can get the source code of a component demo in GitHub. The Framework7 documentation doesn’t offer this feature.
Performance is about letting users do what they need to do with your app as quickly and efficiently as possible. Both Ionic and Framework7 excel in this area.
Here’s how to lazy-load backgroud images in Framework7:
<div data-background="path/to/image.jpg" class="lazy"> ... </div>
All you have to do is add the class of lazy.
In ionic, using the
ion-img component lazy loads your images once the component is in view:
<ion-thumbnail slot="start"> <ion-img src="path/to/image.jpg"></ion-img> </ion-thumbnail>
Ionic’s primary backbone is Cordova, which enables you to use native mobile functionality and create fully native applications. This includes native functionalities such as accessing the camera device, using the flashlight feature, etc.
The Ionic team also developed an alternative to Cordova called Capacitor, which aims to improve upon the foundations of Cordova. Capacitor introduced the concept of a cross-platform native runtime for the web. It enables developers to take advantage of the latest web APIs and also provides much deeper integration with the native platform SDKs.
Framework7 primarily runs on Cordova. Most of the Cordova plugins come by default, making Framework7 faster to use. Capacitor can also be integrated inside a Framework7 project, but it requires extra configs when building to improve the performance.
As you can see, both Framework7 and Ionic are great tools for mobile development. As long as you follow best practices to increase the performance of your application, you really can’t go wrong with either framework.
That said, if you have to make a choice, Ionic has a slight edge over Framework7 because of its active community and frequent updates.
Get setup with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()must be called client-side, not server-side.
- (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
$ npm i --save logrocket
import LogRocket from 'logrocket';
Add to your HTML:
<script>window.LogRocket && window.LogRocket.init('app/id');</script>