Going Hybrid
developing native apps using JS
Seiji Villafranca
Seiji Villafranca
github.com/SeijiV13
Senior Developer, Wypoon Technologies Netherlands
Microsoft MVP
Auth0 Ambassador
Community Lead, AngularPH,
Author
seijivillafranca.com
Talks
What will i learn today?
What are the Hybrid frameworks for mobile development
What to choose between the frameworks
How to start developing your native mobile using web knowledge
Features of each Hybrid Frameworks
Hybrid
What the heck is an hybrid app???
Hybrid Apps
blend of both native and web solutions
developing mobile apps using "Web Technologies"
The heart of the development is HTML CSS and JavaScript
Why, When and How?
questions on the start of hybrid apps
"Common mobile dilemma"
Creating an app for all platforms
(Android, IOS, and Desktop)
No underlying common structure between the platforms
Maintainability is complex (maintaining three different codebase is a headache!)
Why?
- required to learn languages and framework for each platforms (Swift, Kotlin etc.)
Why, When and How?
questions on the start of hybrid apps
Factors that made hybrid apps popular
Learning Curve
Development Time Reduction
Less to Maintain, Less Bug
Why?
Cost
Smart Phone Users
Companies are critical when platforms are only on web
Global Downloads
Companies are critical when platforms are only on web
7% increase of app downloads
Most users are accessing platforms using mobile phones
Why, When and How?
questions on the start of hybrid apps
when and how did hybrid apps emerged?
When and How?
HTML5 is very powerful
-offered several ui features for the web
web apps was born!
<html>
Why, When and How?
questions on the start of hybrid apps
DOM Manipulation is Poor!
Still have limited capabilities
JQuery - to aid DOM manipulation
Text
2006 by John Resig
Why, When and How?
questions on the start of hybrid apps
JQuery had Issues!
Text
Library is too big!
Unmanageable code leading companies go back to zero!
Why, When and How?
questions on the start of hybrid apps
Google came into the scene!
Text
2010: AngularJS Framework was born!
2013: lead to Ionic (A hybrid framework for mobile apps)
2016: Angular v2 a component based framework
2017: Ionic V2 which supports Angular2
NativeScript
Peromance wise Hybrid App
React Native
Hybrid App using React
2015
2016
How does Hybrid apps do it?
Popular Hybrid Frameworks
architecture and concepts in a nutshell
Open source UI toolkit for building native and web apps using HTML CSS and JavaScript
Can be integrated with Angular, React and Vue
Uses Cordova or Capacitor to expose native functionality in Web Views
Ionic doesn’t use native components at all and renders everything in HTML and CSS
has Ionic CLI to create and build apps
npm install -g @ionic/cli
ionic capacitor build
ionic cordova build
Simple Hello World App
open source framework to build truly native mobile app
directly communicates with the Native APIs, injects IOS and Android APIs into Javascript Virtual Machines
NativeScript UI is stored in XML files with CSS styling, logic stays on Typescript/JavScript files
has NativeScript CLI to create and builld apps on the fly
npm install -g nativescript
ns create
ns run android
ns run ios
Java accessing native API
JavaScript counterpart
uses native components to build applications
React concepts, like JSX, components, state, and props
React Native same with NativeScript uses native component for building pages
Hooks and Redux can be utilized with React native
Has the Expo framework for build and deployment
Simple Hello World App
develop, build, deploy React Native apps with android adn IOS on the fly
a simple cli for executing actions
installing expo
npm install -g expo cli
expo start
expo build:android
expo build:ios
Factors in choosing
Performance
Community
Reusability
Learning Curve
Documentation
Comparing frameworks side to side
Performance wise - NativeScript and React Native
Lower Learning Curve - Ionic
Community - React Native
Reusability - Ionic and NativeScript
Reference:
Evaluate the Framework that best suits your app!
Hybrid apps are powerful
with great power comes from great responsibility
"whatever technology, always think of the
Mobile Development Standards"
Developing your mobile app
The Mobile App architecture
Users
Presentation
Business
Data
Database
Services
Services
UI Components
Workflows, entities and Logic
data utilities that access data
Developing your mobile app
The Mobile App architecture
Consider the Device
Screen resolution
Screen size
CPU Features
Memory
1
Developing your mobile app
The Mobile App architecture
Choose the right UI
Stacked navigation bar
Single view
Scroll view
Gesture-based navigation
2
Make it simple, remember that
mobile devices have small screens
Choose the navigation
Developing your mobile app
The Mobile App architecture
Maintain the process flow
3
The architecture is important
Other technologies
for mobile
website with all the benefits of an app
web application that can be “installed” on your system. It works offline when you don't have an internet connection
Service Workers!
Build you PWA app for Microsoft store and play store!
https://www.pwabuilder.com/
https://www.pwabuilder.com/
https://www.pwabuilder.com/
Were almost at the end!
we summarize!
Hybrid Apps
Uses WebView, or Native UI for displaying web components in mobile
Cross-platform compatible (one codebase for different OS android and IOS)
Popular Hybrid frameworks support the latest JS Frameworks (Angular React, Vue etc)
Last piece of advice
"Learn things one at a time"
Roadmaps to start your dev journey
Good reads for Hybrid apps
Awesome Documentation
More Practice
Hey I'm a Mentor and Speaker!
github.com/SeijiV13
seijivillafranca.com
fb.com/seiji.villafranca
Thank you
and happy coding!
Going Hybrid
By Seiji Ralph Villafranca
