the creation of mobile applications through web technologies (i.e., HTML, CSS, JavaScript, etc.).
Ionic 2 supports Ionic Native which does the same thing as ngCordova, but more smoothly. For example, it wraps the plugin callbacks in Promises or an Observable, so a common interface is provided for all plugins, supporting the ease of use of native functionalities.
Text
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController
) {
this.initializeApp();
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage },
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
this.menu.close();
this.nav.setRoot(page.component);
}
}
The Ionic CLI is the primary tool used during the process of developing an Ionic app. The CLI contains a number of commands crucial for Ionic development, such as start, build, serve, and run. It also contains commands like emulate and info, which can be helpful in certain situations.
$npm install -g ionic cordova
$ionic start sampleProject --v2
$ cd sampleProject
$ ionic serveimport React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';
class AwkwardScrollingImageWithText extends Component {
render() {
return (
<ScrollView>
<Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
<Text>
On iOS, a React Native ScrollView uses a native UIScrollView.
On Android, it uses a native ScrollView.
On iOS, a React Native Image uses a native UIImageView.
On Android, it uses a native ImageView.
React Native wraps the fundamental native components, giving you
the performance of a native app, plus the clean design of React.
</Text>
</ScrollView>
);
}
}"With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React"
Virtual DOM for updating the UI
It’s a kind of a wrapper around native code of specific platforms, so around 85% code is similar, and the final 15% is something you may need to change to suit for a specific platform. Unlike Ionic, it is not designed to write once, run everywhere, so you need to change some platform specific code in your program, because the purpose is to create the most native look as possible.
Unlike Ionic 2, both ReactNative and NativeScript uses the native UI components from native OS of specific platforms, so you are writing the components in JavaScript, but they are actually using those native components behind the scene.
npm install -g react-native-cli
$ react-native init sampleApp
$ cd sampleApp
$ react-native start
Unlike ReactNative, NativeScript uses the native UI code (for respective Android and iOS phones) even though you are writing the code in TypeScript/JavaScript. If we consider the performance side, then NativeScript really has the edge over ReactNative, because it is using AngularJS 2 structure for creating components.
With TypeScript and Angular 2, you can very easily create components for mobile apps using a declarative style. Claiming to support “write it once, run it everywhere”, the same Angular 2 code can be utilized for the UI for all the platforms it is targeting. NativeScript is a real cross-platform, which means 100% Native API access and its mission is to allow people to use the same code-base for all the platforms.
by Telerik
More mature than React Native (2.0 vs beta)
tns create HelloWorld --template nativescript-template-ng-tutorial
tns run