Mobile App Development
An introduction to
with
Welcome!
I'm Tom: a software developer with 12 years experience building web and mobile apps.
My professional career includes:
Co-founded startup, built web-based touch-screen apps.
Head of mobile web at award-winning mobile app development agency.
Web-based consultancy, specialising in JavaScript development and training.
Welcome!
Tools of the trade:
Find me everywhere as @fiznool
Welcome!
Course overview:
Mobile app development: what, why and how
Introduction to React Native
Build an app: Components & Navigation
App testing, distribution and updates
Types of mobile app
Mobile App Development
What, Why and How
Mobile Apps: What?
A mobile app is a software application developed specifically for use on small, wireless computing devices, such as smartphones and tablets, rather than desktop or laptop computers.
What is a mobile app?
Mobile Apps: Why?
Why build a mobile app?
Over 1.8 billion smartphones will be shipped in 2019.
The trend is increasing.
Mobile Apps: Why?
Why build a mobile app?
More people are spending more time on their smartphone.
The trend will continue.
Mobile Apps: Why?
Why build a mobile app?
App revenue hit the $100B mark worldwide in 2018.
Mobile Apps: How?
A mobile app works differently to a traditional website.
Mobile Apps: How?
Traditional Website
Request
Client requests website via URL.
Server responds with HTML document. This includes CSS and JavaScript links.
HTML, CSS, JS
Mobile Apps: How?
Mobile App
Request
Mobile app already includes app files,
requests data from server.
Server responds with data (JSON). Mobile app populates local layout with returned data.
JS
Mobile Apps: How?
Traditional Website
Asks server for all content: structure, styles and data
Server returns all content, browser renders it.
Mobile App
Already contains structure and styles locally, only asks for data
Server returns data, app renders with local structure/styles.
Mobile Apps: How?
Smartphone architecture
Hardware (iPhone, Samsung Galaxy)
Operating System (iOS, Android)
APIs (Cocoa Touch, Android SDK)
App
App
App
App
Mobile Apps: How?
App Discovery and Delivery: App Stores
Types of Mobile App
Types of Mobile App
Mobile apps can be broadly split into three types:
Native
Web
Hybrid
Native Apps
Traditionally, to build a native app,
you used the platform-specific language:
Swift (iOS), Java (Android), C# (Windows Phone)
Will always be the most performant: closest 'to the metal'
Native apps are installed via the platform's app store
There are now cross-platform options, allowing you to write an app using a single language: Xamarin (C#), React Native (JavaScript)
Web Apps
Regular web pages, designed for small screens
Write once, run anywhere: accessed through web browser on any device
Access to some hardware sensors (geolocation, accelerometer)
Will never be as performant as native apps
No App Store presence
Hybrid Apps
A mixture of native and web technologies
Write app using HTML, CSS and JavaScript
App is wrapped in a full-screen WebView
'Feels' like a native app, but code can be reused across platforms
Which type to use?
Prototypes, form-heavy apps: a hybrid option works well here.
Simple web presence, runs on a broad range of devices, don't care about app stores: mobile web.
Otherwise: native apps will always provide a better experience.
Why React Native?
The emergence of cross platform native frameworks such as React Native means it is much easier and quicker to write a native app.
React Native in particular takes advantage of the large React ecosystem.
It's an excellent choice!
A note on platform support
React Native supports iOS and Android only. But that's ok:
What is React Native?
React Native is a platform for building native mobile apps with JavaScript.
It builds on top of the popular React JavaScript library.
Instead of rendering to the browser, React Native renders native UI components on iOS and Android.
What is React Native?
The result is a mobile app which looks and feels like a 100% native app.
The view layer is compiled to native code: Swift/Objective-C on iOS, Java on Android.
The remaining code is run as JavaScript, and communicates with the native UI layer via a native-JS bridge.
What does React Native code look like?
Very similar to React code!
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class WhyReactNativeIsSoGreat extends Component {
render() {
return (
<View>
<Text>
If you like React on the web, you'll like React Native.
</Text>
<Text>
You just use native components like 'View' and 'Text',
instead of web components like 'div' and 'span'.
</Text>
</View>
);
}
}Developing an App with React Native
React Native comes with a set of tools to make app development quicker and easier.
Apps can be written with your favourite text editor or IDE.
Use the Expo client app on your device to access your app during development.
The Expo CLI and SDK makes it easy to create a new React Native app.
Developing an App with React Native
The Expo client connects to your local development machine. Changes to your files cause the app to automatically reload.
During development, you can debug your React Native code remotely using the
Google Chrome Developer Tools.
You can use many existing JavaScript modules directly in your app.
Let's Get Started!
React Navigation
React Navigation
Most apps contain more than one screen.
To navigate between screens, native apps provide APIs to transition between screens, and pass data.
React Navigation is a popular library which provides this functionality for a React Native app.
React Navigation: iOS
Navigation to a child screen happens with a right-to-left transition - the child screen covers the parent.
A back button appears in the header to return to the parent screen.
The user can also swipe from the left-hand edge of the child screen to return to the parent screen.
React Navigation: Android
Navigation to a child screen happens with a bottom-to-top transition.
A back button appears in the header to return to the parent screen.
The user can also press the hardware back button to return to the parent screen.
Publishing your App
Standalone Build
We've been using the Expo mobile client to view our app during development.
This isn't how our end users will access the app, however - we need to build a standalone version of the app for distribution.
Expo gives us the tools to make this as painless as possible.
App configuration
Your app is configured via the app.json file
Amongst other things, you can set:
Name
Description
Version number
App Icon
Splashscreen
App icons and splashscreen
The app icon is shown in your device's list of apps.
For both the icon and splashscreen, produce a png image in the correct size, and Expo will generate the necessary asset files.
The splashscreen is shown while your app loads.
Publishing with Expo
When you are ready to produce a standalone version of your app, you'll need to install the exp command line tool, and use it to build the app:
npm install -g exp exp build:ios exp build:android
Full Instructions are at
https://docs.expo.io/versions/latest/distribution/introduction/
Publishing to App Stores
Now that you have a standalone version of your app, you can upload it to the Apple App Store and the Google Play Store.
You need to pay Apple ($99/year) and Google ($25 one time) for the privilege of doing so.
This allows you to distribute a regular app, so users don't need to use the Expo mobile client.
Ejecting
Ejecting
Sometimes you need to write some native code,
or use a library that isn't supported by the Expo SDK.
To do this, you need to eject.
This provides you with ios and android folders, where you can write native code.
Ejecting
After ejecting, you'll need to build your code manually using Xcode and Android Studio.
Ejecting makes life much more complicated.
Only do it if absolutely necessary.
Use with caution: once you eject, you can't go back!
An introduction to React Native development
By Tom Spencer
An introduction to React Native development
An introduction to mobile app development with React Native.
