MAD

Mobile

Apps

Development

Ionic

Ionic is open-source SDK for hybrid mobile apps development built on top of the Angular and Apache Cordova

Apache Cordova

What is Ionic App?

Is basically a web app with Angular UI native-like components that include Apache Cordova wrappers to native plugins

What's in?

- CLI tool

- Rich UI components set

- Native plugins wrappers (camera, location, touch ID, etc.)

- Custom Icons library

Dev Process

Code Example

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs';

import { PostService } from '../../shared';
import { PostDetailsPage } from '../post-details/post-details';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  posts: Observable<any>;

  constructor(
    public navCtrl: NavController,
    private postService: PostService
  ) {}

  ionViewDidLoad() {
    this.posts = this.postService
      .getPosts()
      .map(data => data.posts);
  }

  goToPost(postId: number) {
    this.navCtrl.push(PostDetailsPage, { postId });
  }
}

home.ts

Code Example

// all imports here

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    SharedModule,
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.module.ts

React Native

Javascript framework that allows you to build native apps with React ecosystem

React Native Architecture

What is React Native App?

Is a Javascript app with React components that uses the API of native components.

Components wrapper

What's in?

- CLI tool

- native UI components set wrapped to React components

- Polyfills (XMLHttpRequest & Fetch, Flexbox styling)

Dev Process

Code Example

import React from 'react'
import { AppRegistry } from 'react-native'

import store from './Redux2/store/configureStore'
import AppContainer from './Redux2/containers/mainContainer'


import { Provider } from 'react-redux'

const App = () => (
    <Provider store={store}>
        <AppContainer />
    </Provider>
);

AppRegistry.registerComponent('MyApp', () => App)

index.js

Code Example

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Container, Content, Text } from 'native-base';
import ListItem from '../listItem';

export default class Newsboard extends Component {
    _onListItemPress (id) {
        this.props.onLoadPost(id);
    }

    _renderPostsList(posts, categories) {
        if (posts) {
            return posts.map(post => (
                <ListItem key={post.id} categories={categories} post={post}
                    label={false} type="short" onPress={() => {this._onListItemPress(post.id)}}/>
            ))
        }
    }

    render() {
        let postsList = this.props.posts;
        let categories = this.props.categories;
        
        return (
            <Container>
                <View>
                    {this._renderPostsList(postsList, categories)}
                </View>
            </Container>
        );
    }
}

newsboard.js

Comparison

Ionic

- Web development experience

- Easy debug

- Rich UI components set

- Cross-platform

- Not native

- Single threaded

- App is only UI-View instance

Comparison

React Native

- Native application

- Hot reloading on dev

- Multi-threaded (JS code executes in separate thread)

- Can work with native and JS libraries

- Styling component are not that easy sometimes

- Not good documentation yet

- Extendable