Native - Hybrid - Web Mobile Architectures

© 2016 Rainmaker Labs Pte. Ltd. All rights reserved. Proprietary and confidential.
Native, Hybrid, and Web
Mobile Architectures
Phong Le

Agenda
• What is Hybrid Mobile?
• What are the different Mobile architectures?
• What are frameworks used for Hybrid Mobile Application?
• Overview of the user interface for Native and Hybrid Mobile
• Understanding Hybrid Mobile Architectures
• Building Hybrid Mobile Application

What is Hybrid Mobile?

What are the different mobile architectures?

What are the different mobile architectures?
How they’re structured
When it comes to building
your mobile application
How they run
It all comes down to how an
application’s code is written,
structured, and run on a
device

What are frameworks used for Hybrid Mobile
• React Native
• Facebook’s popular ReactJS JavaScript library is running under the hood of this mobile
framework, built specifically to design natively rendered UIs for iOS and Android. Any
developer who knows JavaScript can work with React Native, and it’s fast, streamlined, and
feels more native—without requiring a WebView. Instead, native components are built with
web technology
• IONIC Framework
• This HTML5 hybrid mobile framework has the added bonus of AngularJS components, a
robust JavaScript framework and support Cordova or trigger.io that allows Ionic to power
some really complex, scalable apps. Ionic is free, open-source, and all of its components—
HTML, CSS, JavaScript and support for SAAS—have been optimized for mobile
• KENDO UI
• Kendo UI is an impressive platform for building both hybrid and native mobile apps, with a
unique capability: developers can use client-side technology like HTML and JavaScript, or they
can build an app with server-side technology like Java, PHP, and ASP.NET to use their existing
skills, tools and languages to write code from which the wrappers automatically generate the
necessary HTML5 code and spit out the related Kendo UI JavaScript.

• Framework 7
• Framework 7 is that it is completely framework agnostic (doesn’t have external
dependencies like Angular or React) and still manages to make apps look and feel
native, with properly styled components and animations. Anyone who understands
HTML, CSS and JavaScript can create an app without making the code convoluted.
Framework 7 doesn’t include any tools for emulation or app packaging so you will
need to combine it with Cordova or PhoneGap.
• Famous
• Famous has a unique approach to web and mobile development. It combines the
DOM tree (your HTML) with WebGL, displaying everything in a canvas, similar to what
HTML game engines
What are frameworks used for Hybrid Mobile

Overview of the user interface for iOS Mobile

Overview of the user interface for Android Mobile

Overview of the user interface for iOS Mobile
Navigation Bar – Use Storyboard in Xcode

Overview of the user interface for Android Mobile
Navigation Drawer – Use .xml File In Android Studio
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent”>
<LinearLayout
android:layout_height="match_parent"
android:orientation="vertical”>
<LinearLayout
android:id="@+id/container_toolbar"
android:layout_height="wrap_content"
android:orientation="vertical”>
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="@+id/fragment_navigation_drawer"
android:name="info.androidhive.materialdesign.activity.FragmentDrawer"
android:layout_width="@dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="@layout/fragment_navigation_drawer"
tools:layout="@layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

<ion-navbar *navbar>
<ion-title>
Hello World
</ion-title>
</ion-navbar>
<ion-content class="home">
<ion-card>
<ion-card-content>
Hello Andrew
</ion-card-content>
</ion-card>
</ion-content>
Overview of the user interface for Hybrid Mobile
Navigation Bar– Ionic Framework

class Navigation extends React.Component{
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'first',
component: First
}} />
);
}
}
iOS
class Navigation extends React.Component{
render() {
return (
<Navigator
style={styles.container}
initialRoute={{id: 'first'}}
renderScene={this.navigatorRenderScene}/>
);
}
navigatorRenderScene(route, navigator) {
_navigator = navigator;
switch (route.id) {
case 'first':
return (<First navigator={navigator} title="first"/>);
case 'second':
return (<Second navigator={navigator} title="second" />);
}
}
}
Android
Overview of the user interface for Hybrid Mobile
Navigation Bar– React Native

Understanding Hybrid Mobile Architecture
Ionic Framework – React Native
• HTML / CSS + JS - UIs
• Small learning curve
• Performance limit
• Shared code with web
• Use Webview
• Javascript – libraries
• Large learning curve
• As Native
• Less shared code with web
• Not HTML / CSS
• Duplicate Coding

Ionic Framework

Ionic Framework – Plugins in Cordova
• Battery Status
• Camera
• Barcode
Scanner
• Contacts
• Device
Orientation
• Dialogs
• File Transfer
• Background
Geoloc
• HealthKit
• iBeacon
• Media Capture
• Network Information
• Statusbar
• Vibration
• 3D Touch
• TouchID
• Google Analytics

Ionic Framework – Project Structure
• WWW– what will be copied over to your app
• Use ionic lib update to update ionic version
• Index.html – all style sheet and script
references

• JS bridge class is the role of the developer's
call to join the Native React module call
queue, while generating a callback ID.
• Native bridging role is a queue of calling
behavior taken out according to the module
to find function corresponds to the native
UI or local capacity to perform, and the
implementation of the results by the ID of
the callback gradually transferred to the
developers of JS callback function
React Native

React Native – UI Components

React Native – Project Structure
• Android - Open your project in Android
Studio and build.
• iOS - Open your project in Xcode and build
• The node modules needed for your React
Native project to run.
• Flow - Adds static typechecking for
JavaScript, use this file to configure your
project's flow settings.
• Watchman - the file watcher used by the
React Native packager.
• Package.json - Describes this project and
lists its npm dependencies.

Building Hybrid Mobile Application
Ionic Framework - Technologies
• gulp - Javascript code build tool
• bower - Responsible to fetch the dependencies ( AngualarJS )
• sass - CSS look and feel.
• travis CI - For test and deploy the code.
• Node JS
• Cordova
• Chrome Debugger
• Xcode, Android Studio
• Ionic

• Installation
1. $ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - sudo apt-get
install -y nodejs
2. $ npm install -g ionic
3. $ ionic start demo --v2
4. $ cd demo
5. $ ionic serve
• Building to a device
1. $ npm install -g cordova
2. $ ionic platform add ios
3. $ ionic emulate ios - you’ll need to install xcode
4. $ ionic platform add android
5. $ ionic run android - you’ll need to install android SDK and Genymotion
Ionic Framework

• JSX - JavaScript syntax extension that looks similar to HTML and XML.
• Flow - typechecker (errors inline, autocomplete)
• Node JS
• NPM
• Chrome Debugger
• Xcode, Android Studio
• React JS
• React Native
React Native - Technologies

• Installation
1. You will need Xcode, Android Studio, node.js, the React Native command line tools,
and Watchman
2. $ brew install node
3. $ brew install watchman
4. $ brew install flow - Flow is a static type checker that will help make your JavaScript
more stable.
5. $ npm install -g react-native-cli
• Building to a device
1. $ react-native init AwesomeProject
2. $ cd AwesomeProject
3. $ react-native run-ios
4. $ react-native run-android
React Native

References
• https://www.apptentive.com/blog/2016/05/19/6-hybrid-mobile-app-
frameworks-for-uiux-designers/
• http://jsfiddle.net/prud/dnebx02p/
• http://caniuse.com/#feat=geolocation
• http://ngcordova.com/docs/plugins/launchNavigator/
• https://rnplay.org/
• http://www.tamas.io/getting-started-with-ionic/
• http://www.objectivetruth.ca/projects/2015/08/30/ionic-post-review.html
• http://ionicframework.com/docs/v2/getting-started/installation/
• https://facebook.github.io/react-native/docs/getting-started.html#content
• http://ngcordova.com/docs/plugins

Thank You!
Questions & Answers
WEB DEVELOPERS ARE NOW
MOBILE APP DEVELOPERS

Native - Hybrid - Web Mobile Architectures

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Native - Hybrid - Web Mobile Architectures

Similar to Native - Hybrid - Web Mobile Architectures (20)

Native - Hybrid - Web Mobile Architectures