Scribd
Upload
114 views17 pages

Building Hybrid Mobile App Using Javascript Frameworks: Thet Khine

This document compares native mobile apps, hybrid mobile apps, and different frameworks for building hybrid apps. Hybrid apps are built with web technologies like HTML, CSS, and JavaScript but can access native device features. Frameworks like Ionic, React Native, Cordova, and PhoneGap allow building hybrid apps from a single codebase that works on both Android and iOS without writing platform-specific code. Ionic is based on Cordova and uses Angular for its UI and routing. React Native renders UI elements natively and uses a native bridge to communicate between JavaScript and native platforms. Both have pros like code reuse and cons like potential performance issues.

Uploaded by

Pyae Sone Kyaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
114 views17 pages

Building Hybrid Mobile App Using Javascript Frameworks: Thet Khine

This document compares native mobile apps, hybrid mobile apps, and different frameworks for building hybrid apps. Hybrid apps are built with web technologies like HTML, CSS, and JavaScript but can access native device features. Frameworks like Ionic, React Native, Cordova, and PhoneGap allow building hybrid apps from a single codebase that works on both Android and iOS without writing platform-specific code. Ionic is based on Cordova and uses Angular for its UI and routing. React Native renders UI elements natively and uses a native bridge to communicate between JavaScript and native platforms. Both have pros like code reuse and cons like potential performance issues.

Uploaded by

Pyae Sone Kyaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Building hybrid mobile app

using JavaScript Frameworks 


Thet Khine
Native App vs Hybrid App

 Native App
 Native app use platform specific programming language (Objective-C or Swift for iOS), Java or
Kotlin for Android.
 Used Platform specific development tools.
 Need to write separate app for each platform.

 Hybrid App
 They utilize web technologies such as JavaScript, HTML5, and CSS but also provide access to
native platform features.
 No need to write separate app for each platform.
 App for each platform can be generate from a single codebase.
Hybrid vs Native

Source:Internet
Why Hybrid

 No need to write code for each platform.


 Can reuse existing knowledge about frontend.
 A good fit for frontend web developer.
 Time, Cost can be reduced to market an app.
Hybrid Mobile Development Framework

 Ionic
 React Native
 Cordova
 PhoneGap
 NativeScript
 Framework7
How Hybrid App Work (Cordova Based
App)
 Ionic , PhoneGap, Framework7 are base on Cordova.
 Cordova used the WebView for user interface.
 So, Cordova based application are essentially HTML5 application
with access to native platform API.
 When Cordova based application need access to platform API,
JavaScript Interface is used.
 Everything in UI is rendered as HTML based view in Cordova
based application.
 Business code are written in JS.
React Native Approach

 Each View in React Native is rendered as native UI element.


 So, UI element written in JSX will ended as native element in each
platform.
 There are three main thread used by React Native.
 UI Thread, used to render UI element
 JS Thread, used to process business logic written in java.
 Native Module Thread is used to access native module.
 When business logic(JS) need to update UI (eg Java), NativeBridge is
used.
 NativeBridge work as Asynchronous, Batched, Serializable.
Ionic Framework

 Used Cordova for the hardware access.


 For UI and framework, routing used Angular.
 Offer a complete mobile application framework.
 HTML5+SASS for UI layout.
 Ionic also offer their own plugins for mobile application such as
contact list, sharing.
 Can also used plugin from Cordova.
How Ionic Work

Source:Internet
What you need to know for Ionic

 TypeScript
 Angular 2+
 RxJS
 HTML5 +SASS
 Flexbox
 Build tool for android and iOS
Pro/Con of Ionic

 Pro
 Easy to learn
 Rapid Development with hot reload
 UI markup is easy to build due to the use of HTML5+SASS
 Most of the UI component are already included in the Ionic, no extra library needed.
 Can share code based for both platform

 Con
 Performance
 UI is not attractive as native UI.
React Native

 Used React as framework


 Actually a library because it does not offer all functionality for
mobile app development out of the box.
 Render UI elements are native view.
 Used Native Bridge to communicate between JS and native
language.
 Can offer 60 FPS.
What you need to know for React Native

 React
 JSX(React native style element are not the same as CSS)
 Flexbox
 Redux
 React Native Router
 Knowledge about build tool on both platform
How React Native Works

Source:Internet
Pro/Con of React Native

 Pro
 Better performance
 True Native UI view
 Ease of development & Hot reloading
 Can share code base for both platform

 Con
 Need to integrate third party UI framework such NativeBase.
 Need for an expertise from a native developer for some platform-specific modules
Ionic vs React Native

Source:Internet
Thanks you all.

You might also like