Cross-Platform Mobile Development Frameworks
These libraries enable developers to build mobile applications for iOS and Android using web technologies or JavaScript. They fall into two main categories: WebView-based tools that render HTML/CSS inside a native container, and Native Rendering tools that compile JavaScript to actual native UI widgets. Choosing the right one depends on your team's existing skills, performance requirements, and need for direct native API access.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Cross-Platform Mobile Frameworks: Native vs WebView Architecture
Building mobile apps with JavaScript means choosing between two distinct rendering paths. Some tools draw interfaces using native widgets like UILabel or TextView, while others render HTML and CSS inside a native WebView container. This decision impacts performance, access to device features, and the daily developer experience. Let's compare how these seven packages handle core tasks.
🎨 Rendering UI Components: Native Widgets vs Web DOM
The most visible difference is how a button or text label appears on the screen. Native rendering tools translate JavaScript components into actual iOS and Android views. WebView tools inject HTML into a browser engine running inside an app shell.
react-native uses JSX to define native views. You do not write HTML tags.
// react-native
import { View, Text } from 'react-native';
export default function App() {
return (
<View>
<Text>Hello World</Text>
</View>
);
}
expo uses the same React Native components but manages the build environment for you.
// expo
import { View, Text } from 'react-native';
export default function App() {
return (
<View>
<Text>Hello World</Text>
</View>
);
}
@nativescript/core uses XML templates or Vue/Angular syntax to map to native widgets.
<!-- @nativescript/core -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout>
<Label text="Hello World" />
</StackLayout>
</Page>
ionic uses standard HTML tags with custom web components that look native.
<!-- ionic -->
<ion-content>
<ion-button>Hello World</ion-button>
</ion-content>
quasar relies on Vue components that wrap web technologies for a native feel.
<!-- quasar -->
<q-page>
<q-btn label="Hello World" />
</q-page>
framework7 offers DOM-based markup or framework-specific components for Vue/React.
<!-- framework7 -->
<div class="page">
<div class="block">
<button class="button">Hello World</button>
</div>
</div>
cordova relies on pure HTML and CSS rendered in a WebView.
<!-- cordova -->
<div class="app">
<button>Hello World</button>
</div>
📱 Accessing Native Device Features
To use the camera, GPS, or file system, you need a bridge between JavaScript and the operating system. Native rendering tools often bind directly to APIs, while WebView tools rely on plugins to inject JavaScript interfaces.
react-native requires linking native modules or using community libraries like react-native-camera.
// react-native
import { Camera } from 'react-native-vision-camera';
<Camera device={device} isActive={true} />
expo provides unified APIs for common hardware features without native configuration.
// expo
import { Camera } from 'expo-camera';
<Camera style={{ flex: 1 }} type={CameraType.back} />
@nativescript/core allows direct access to native iOS and Android classes from JavaScript.
// @nativescript/core
const camera = android.hardware.Camera.open();
// Or use a plugin like @nativescript/camera
ionic uses Capacitor plugins to access hardware via a promise-based API.
// ionic
import { Camera, CameraResultType } from '@capacitor/camera';
const photo = await Camera.getPhoto({ resultType: CameraResultType.Uri });
quasar accesses features through Capacitor or Cordova plugins depending on configuration.
// quasar
import { openURL } from 'quasar';
// For camera, use @capacitor/camera similarly to Ionic
framework7 integrates with Capacitor or Cordova plugins for hardware access.
// framework7
// Using Capacitor plugin
import { Camera } from '@capacitor/camera';
const photo = await Camera.getPhoto({ quality: 90 });
cordova relies on the Cordova Plugin ecosystem to expose native functions.
// cordova
navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
🛠️ Build Workflow and Configuration
How you start, build, and deploy the app varies significantly. Some tools hide the native build process, while others require you to manage Xcode and Android Studio projects directly.
react-native uses the CLI to initialize a project with native folders exposed.
# react-native
npx react-native init MyApp
cd MyApp && npx react-native run-ios
expo uses a managed workflow that abstracts native code until you need it.
# expo
npx create-expo-app MyApp
cd MyApp && npx expo start
@nativescript/core uses a CLI to scaffold projects with platform-specific folders.
// @nativescript/core
ns create MyApp --vue
cd MyApp && ns run android
ionic uses the CLI to create apps and sync with Capacitor for native builds.
# ionic
ionic start MyApp blank
cd MyApp && ionic capacitor add android
quasar uses the Quasar CLI to handle builds for multiple modes including mobile.
# quasar
quasar create MyApp
cd MyApp && quasar mode add capacitor
framework7 uses a CLI to generate apps with optional Cordova or Capacitor integration.
// framework7
npx create-framework7-app MyApp
cd MyApp && npm run cordova-build-ios
cordova uses the CLI to manage the WebView container and plugins.
// cordova
cordova create MyApp
cd MyApp && cordova platform add android
⚡ Performance and Limitations
Native rendering generally offers better performance for complex animations and heavy data lists because it avoids the overhead of a browser engine. WebView tools have improved significantly but can struggle with 60fps scrolling on older devices if the DOM is too heavy.
react-native runs logic on a separate thread from the UI, enabling smooth interactions.
expo inherits React Native performance but adds a layer for managed services.
@nativescript/core executes JavaScript on a dedicated thread with direct native binding.
ionic runs inside a WebView, relying on hardware acceleration for CSS animations.
quasar similar to Ionic, depends on WebView performance and DOM complexity.
framework7 optimized for mobile WebViews with virtual lists for large data sets.
cordova depends entirely on the system WebView version installed on the device.
🤝 Shared Capabilities
Despite architectural differences, all these tools share common goals and features.
1. 📦 Cross-Platform Code Sharing
All seven allow you to write one codebase for iOS and Android. This reduces development time and maintenance effort compared to writing Swift and Kotlin separately.
// Shared logic example (Business Logic)
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
2. 🔌 Plugin Ecosystems
Each framework has a way to extend functionality beyond the core SDK. Whether it is npm packages or specific plugin repositories, you can add features like maps or payments.
// Plugin usage pattern
import { Plugin } from 'package-name';
Plugin.initialize({ key: 'secret' });
3. 🎨 Theming and Styling
All options provide ways to customize the look and feel. Native tools use style sheets or props, while WebView tools use CSS or preprocessors like Sass.
/* Shared CSS concept (WebView tools) */
.button {
background-color: blue;
color: white;
}
4. 🔄 Hot Module Replacement
Most modern tools in this list support live reloading during development. This lets you see changes instantly without rebuilding the entire app.
# Common dev command
npm start
# Or
ns run android --hmr
5. 🌐 Web Standards Support
WebView-based tools support standard web APIs directly. Native tools often require wrappers but aim to follow similar patterns for fetch, storage, and navigation.
// Fetch API works in all
fetch('/api/data').then(res => res.json());
📊 Summary: Key Differences
| Feature | Native Rendering | WebView Rendering |
|---|---|---|
| Packages | react-native, expo, @nativescript/core | ionic, quasar, framework7, cordova |
| UI Components | Native Widgets (UILabel, etc.) | HTML/CSS DOM Elements |
| Performance | Higher for complex UI | Good for standard forms/content |
| Learning Curve | Requires learning specific APIs | Uses standard web skills |
| Bundle Size | Typically larger | Typically smaller |
💡 The Big Picture
react-native and expo are the leaders for teams wanting native performance with React. Expo simplifies the start, while React Native CLI offers full control.
@nativescript/core is the choice for direct native API access without writing Java or Swift, suitable for Angular or Vue teams.
ionic, quasar, and framework7 are best for web developers who want to reuse HTML and CSS skills to build mobile apps quickly.
cordova remains an option for legacy support but is no longer the primary recommendation for new builds — consider Capacitor instead.
Final Thought: Your choice depends on whether you prioritize raw performance and native feel or development speed and web skill reuse. Both paths can produce successful production applications.
How to Choose: @nativescript/core vs cordova vs expo vs framework7 vs ionic vs quasar vs react-native
- @nativescript/core:
Choose
@nativescript/coreif you need direct access to native iOS and Android APIs without writing Java or Objective-C. It is ideal for teams comfortable with Angular or Vue who want true native performance and UI components rather than a WebView. This tool works best when you require deep hardware integration while sharing business logic across platforms. - cordova:
Choose
cordovaonly for maintaining legacy applications or very simple projects where performance is not critical. It is currently in maintenance mode, and the community has largely moved to Capacitor for modern WebView-based development. Avoid starting new projects with this package unless you have specific constraints requiring its plugin ecosystem. - expo:
Choose
expoif you want the fastest setup for React Native development with managed native modules. It is perfect for teams that want to avoid configuring Xcode or Android Studio manually during the early stages. Select this when you need a robust ecosystem of pre-built libraries and over-the-air updates without handling native code immediately. - framework7:
Choose
framework7if you want a highly customizable UI library that can run as a standard website or wrap into a native app. It suits developers who prefer a DOM-based approach or need tight integration with Vue, React, or Svelte components. This option is strong for apps that need to look native but behave like web pages. - ionic:
Choose
ionicif you prefer building mobile apps using standard web technologies like HTML, CSS, and JavaScript with a rich set of pre-built components. It pairs best with Capacitor for native access and works well with Angular, React, or Vue. This is the top choice for web developers who want to deploy to mobile stores with minimal learning curve. - quasar:
Choose
quasarif your team is already invested in the Vue.js ecosystem and wants a single codebase for web, mobile, and desktop. It provides a comprehensive set of Material Design components and build tools that handle deployment to multiple platforms. This framework excels when you need a unified development experience across all device types. - react-native:
Choose
react-nativeif you need maximum performance and full control over the native build process without a managed layer. It is suitable for large-scale applications where custom native modules are required and Expo's constraints might be limiting. Select this when your team has React expertise and resources to manage native iOS and Android configurations.
Popular Comparisons
README for @nativescript/core
NativeScript
Build truly native apps with JavaScript.
Getting Started · Environment Setup · Showcase · Contribute · Community
A JavaScript library providing an easy-to-use API for interacting with native platform APIs.
- Truly Native: Access 100% of native platform APIs with JavaScript or TypeScript
- High Performance: No bridges — direct native bindings
- Cross-Platform: Share code across platforms while maintaining native look and feel
📦 Installation
npm install @nativescript/core
📖 Documentation
The full documentation for NativeScript can be found on our website.
📄 License
NativeScript is MIT licensed.