Cordova Frameworks: Ionic vs. Framework7

Hybrid mobile apps may have their limitations, but often it's well worth the boost in cross-platform consistency and development speed. Apps made with Apache Cordova in particular can further leverage existing web developer skills through the use of Cordova frameworks. This tutorial compares Ionic with Framework7.

These days, web developers rule the world. JavaScript is used everywhere one can program. Among these areas, mobile app development was one of the first ways to branch out: About ten years ago, PhoneGap allowed HTML and JavaScript app installation for iOS and Android.

Since then, the technology has had its ups and downs: Despite the ease of development, these apps were obviously quite different from native apps. Vanilla HTML and browser-based JavaScript were targeted at browsers, and there was no way for them to flawlessly migrate to this new field.

To this day the main issues still are:

• Difficulties in adhering to native design and animation
• Complex screen transition effects
• Touch events handling
• Performance on big lists
• Positioning fixed elements
• Adapting for different screen sizes
• Locations of native control elements (for example, the iOS status bar)
• Adapting to different mobile browsers

Why Use a Framework for Cordova Apps?

Cordova technology is often underestimated because of apps that have the above issues. Frameworks aim to offset them and take HTML apps as close to native apps as possible, both in design and performance.

Let’s look at a couple of hybrid app examples. They’re made with the two currently most successful frameworks—besides Onsen UI—which are set to facilitate the expansion of web developers in the modern world: Framework7 and Ionic.

About the Ionic Framework

Ionic was developed by Drifty Co. in 2012 and is based on Angular. Since then, it has been in active development, receiving significant investments and a strong developer community. The official website claims that millions of apps have been developed based on it.

At the moment of writing of this article, the most recent version is Ionic 3 based on Angular 5. Ionic 4, aiming for flexibility and independence from Angular, is in early beta.

Apart from the UI engine, a wonderful component library, and an interface for accessing native device functions, Ionic offers multiple extra capabilities, services, and utilities.

The Ionic CLI

Ionic’s command-line interface is used for interactive project initialization (i.e., a wizard), generating pages and components, and running a development server that allows you to build apps on the go and Live Reload them. It also provides integration with Ionic cloud services.

Lab and DevApp

Lab is the extremely useful mini-service that allows you to imitate the work of the application on different platforms in the Ionic developer’s browser. DevApp helps you quickly deploy an app to a real device.

Packaging, Deploying, and Monitoring

Ionic comes with a bundle of web services that simplify and speed up building, debugging, testing, and updating applications for testers and users.

Ionic’s plans change often, though. Some previously existing services—such as Auth, Push, Analytics, and View—were closed, causing an outcry from the subscribers.

Creator

This is Ionic’s drag-and-drop graphic editor for developing functional interfaces.

About Framework7

This framework was developed in 2014 by Russian studio iDangero. Ultimately, one developer has been working on the project, not including several minor contributors to the GitHub repository.

Originally, Framework7 consisted of the set of UI components in the style of then-recently-released iOS 7, from which it gets its name. Later, an Android theme was added, and both themes were updated for the most recent iOS and Material Design.

Recently, the project’s development picked up pace, and it expanded from a set of components to a full-fledged framework for mobile applications, integrating popular technologies and tools.

Framework7’s support and examples using Vue.js have existed since v1, and v3 also supports React. This is what may allow the project to seriously compete with the more popular Ionic, which only offers Angular and TypeScript.

Component Diversity

Both frameworks have a full set of wonderfully crafted standard components in two themes: iOS and Material Design. Ionic additionally provides these components in Windows theme and a gigantic user themes marketplace.

In addition to fully mimicking native design and animations, a lot of attention is paid to performance optimization, providing fantastic results: Often, it’s almost impossible to discern applications on either framework from native ones.

Framework7 provides an additional list of more complex and useful components, such as Smart Select, Autocomplete, Calendar, Contacts List, Login Screen, Messages, and Photo Browser. On the other hand, Ionic provides a huge selection of user-created components.

Ecosystem and Community

Ionic obviously wins on these parameters thanks to its longer lifespan, strong financial backing, and active community. Ionic infrastructure is constantly evolving: Supporting services and cloud solutions give way to new ones and the number of plugins keeps growing.

Framework7 is better than ever, but sorely lacks community support.

Third-party Dependencies

Framework7 is more flexible in regards to third-party solutions. Its biggest strength is probably the ability to choose if you use Vue or React in the project, as well as Webpack or Browserify. Ionic is based on Angular and requires knowledge in it (and therefore TypeScript, too.)

However, recently, Ionic developers announced a new Ionic 4 beta, claiming to be completely UI-framework-agnostic—no more Angular dependencies if you don’t want them.

Cordova Frameworks: Still a Powerful Way to Develop Cross-platform Mobile Apps

Whether to use Cordova depends on the specific project. Indeed, the speed of hybrid mobile app development and its support of multiple platforms are its main advantages. But it’s always a trade-off, and sometimes you may face some flaws that would not exist with a native approach. These wonderful frameworks and their communities do a great job to reduce those flaws and make our lives easier. So, why not give them a try?