Mobile Dev For Web Devs

http://digitaldrummerj.me
Justin James
DevOps Evangelist
Web Developer
Microsoft MVP

Faster than the PC boom10X
Faster than the Internet boom2X
Faster than the social networking explosion3X
2

I wanted to build a mobile app too!
3

Traditional Development Strategy
Native platform technologies
Objective-C / Swift Java / Kotlin
5

So What’s The Issue?
6

Same App Different Tools
IOS
Obj-C/Swift
XCODE
$$$
Android
Java/Kotlin
A-Studio
$$$
Web
JavaScript
ANY
$
OSX
Swift
XCODE
$$$$
Windows Universal
.NET
Visual Studio
$$$
7

Hybrid Development Strategy
Web platform technologies
HTML 5 CSS 3 JavaScript
12
Mobile
Traditional Web Apps
Desktop Apps
IOT
Server Side
TV Apps
Proprietary Devices
(Console Games,
Airline Entertainment)

Can You Spot The Web App?
Untapped
UBER Sworkit
SLACK
VS Code
13

All Those Apps Where Built
With Web Technologies
14

Same App Different Experience
15

Typical Use Case
Mobile
 IOS
 Android
Web
 Desktop Web
 Mobile Web
 PWA
Desktop
 Windows
 OSX
 Linux
16

Lets Solve Mobile
17

Things We Want To Achieve
Code once with web technologies
Code runs same way across mobile platforms
Access to hardware feature like bluetooth, GPS, accelerometer, etc
Access hardware features same way with the same code
18

Every Modern Device
Can Run Web Technologies
19

Web Developers
Are Everywhere
20

How to Do
Cross Platform Development?
21

Introducing
22

Middleware to Bundle Web Code into Mobile Application
with Access to Native Device
Apache Cordova
23

Cordova Stack
24

http://digitaldrummerj.me 25
Cordova Installation
• http://nodejs.org
Node LTS
• npm install –g cordova
Global NPM Packages

Android Setup
Windows, Linux, and OSX
Java SDK 8
Android SDK
Gradle
Google Chrome
Google Android Emulator
Google Developers Account

iOS Setup
OSX Only (thanks Apple)
Xcode
Xcode Command Line Tools
iOS Simulator
Safari
Apple Developers Accounts

Mobile Problem Solved?
28

Mobile Problem Solved?
Well Not Really
29

Mobile Platforms Have Different Behaviours
They Have Different UI SDK Libraries
User Experience Is Different Across Mobile Devices
Some Devices Have Back Buttons
Don’t Forget The Tablets
How To Reuse At This Level?
30

Cordova AppNative App
The Issue Visualised
Cordova
WebView
HTML CODE
Animations
Tabs
Buttons
WebView
Gestures
31

Can We Achieve A Uniform
Mobile Experience?
32

Introducing

What Is Ionic?
Missing Cordova UI Framework (i.e. Mobile Web SDK)
Supports Android, IOS & Windows Universal
Open Source
Built With Web Technologies
Performance Obsessed
Zero Code Redundancy
34

Ionic Stack
35

Features Of Ionic
36

Adjust According To Platform
Icon Library
Customizable and Configurable
Awesome Cross Platform Components
37

 Popups
 Modals
 Spinners
 Slidebox
 Menus
 Lists
 Footers
 Buttons
 Tabs
 Cards
 Headers
 Forms
Ionic Components
38

Scaffolds And Serves App
SASS Pre Processing
Typescript Transpiling
Error Reporting
Code Bundling and AOT/Tree Shaking
Great CLI Tool
39

Other Features
Right To Left Support
Internationalization
Ionic Native
40

Who Is Using Ionic?
41

Over 4 Million Apps Generated
110+ Countries with Communities
13,000 Slack Members
30,000 Start On Github
Companies Include Microsoft, Airbus,
Diesel, Dow Jones, ETC
Apps Include Untapped, Sworkit &
Microsoft Flow.
Ionic Usage

Ionic Installation
• http://nodejs.org
Node LTS
• npm install –g ionic
Global NPM Packages

Ionic App Creation
• ionic start [App Name] [blank/tabs/sideMenu]
Create New Project
• ionic serve or ionic lab
Test In Web Browser
• ionic platform add [android/ios]
Add Mobile Platform
• ionic [run/emulate] [android/ios]
Test On Device / Emulator

Demo
45

Mobile Problem Solved Now
Mobile
 IOS
 Android
Web
 Desktop Web
 Mobile Web
 PWA
Desktop
 Windows
 OSX
 Linux
46

Let's Solve Web
47

Consider Different Screen Sizes
Consider Different Input Devices
Don’t Forget About Accessibility
Its All About Adapting To Screen Size

Demo
49

Web Problem Solved?

Web Problem Solved?
Not Really What About PWA?

What Is A PWA?
PWA = Progressive Web App
A Web Application That Works Offline
Can Be Installed On A Mobile Phone
Runs Full Screen With Icon & Splash Screen
Works Thanks To Manifest.JSON & Service Worker

We Have Ludicrous Mode in a Car
We Have Invented AI
We Have Reusable Rockets
Yet Dinosaur Game,
Is Best Offline Experience
State Of Offline In 2017

Proxy Network Requests
Cache Unlimited Data On Device
Solves The LiFi Problem
More About Service Worker

Demo
55

Web Problem Solved Now
Mobile
 IOS
 Android
Web
 Desktop Web
 Mobile Web
 PWA
Desktop
 Windows
 OSX
 Linux
56

Lets Solve Desktop Now
57

About Desktop Apps
Lot In Common With Web Apps In Terms Of User Experience
Some Few Noticeable Differences From Web Apps
Offline Is A Must
OSX, Windows & Linux All Have Different UI Skins
How Do You Ensure Reuse Between Each Desktop Platform

About Electron
Cordova For Desktop
Open Source
Use Web Technologies To Code Apps
OSX, Linux & Windows Support

Some Electron Apps You Use Today

Demo
62

Web Problem Solved Now
Mobile
 IOS
 Android
Web
 Desktop Web
 Mobile Web
 PWA
Desktop
 Windows
 OSX
 Linux
63

Other Things To Be Aware Of
64

Compiler For Generating Native Web
Components
Will Power Ionic 4.0
No More Framework Needed
Available For Play Today
 https://github.com/ionic-team/stencil
Stencil JS
65

 Deploy – Update Apps Without AppStore
 Package - Cloud Builds
 Error Reporting
 Drag & Drop Prototyping
 https://ionicframework.com/products
Ionic Pro - Tools By Ionic For Ionic
66

ionicframework.com/docs
ionicworldwide.herokuapp.com/
RESOURCES
67

mcgivery.com/15-ionic-framework-2-resources
joshmorony.com/category/ionic-tutorials
devdactic.com
BLOGS
68

joshmorony.com/building-mobile-apps-with-ionic-2/
devdactic.com/zero-to-app-2/
shop.oreilly.com/product/0636920044710.do
BOOK
S
69

If you can make a great web page
you can make a great app!
70

Time to Create
Your
Mobile App
71

slideshare.net/digitaldrummerj
digitaldrummerj.me
digitaldrummerj

Mobile Dev For Web Devs

More Related Content

What's hot

Similar to Mobile Dev For Web Devs

More from Justin James

Recently uploaded

Mobile Dev For Web Devs

Editor's Notes