Modern Mobile Web Development

Course Description

This course is aimed at web developers who would like to write applications targeting mobile devices without having to go the route of developing native applications for those devices. Any web developer has the background knowledge to create a mobile application using one of two techniques. The first technique is creating a Progressive Web Application(PWA). PWAs are web applications that load like regular web pages or websites but can offer the user functionality such as full screen mode, install on desktop, working offline, push notifications and device hardware access traditionally available only to native applications. The second technique is to use a library like React Native or Native Script. Both of these libraries are capable of taking an application developed using component techniques from React and Angular and compiling those applications to native applications. The beauty of using these technologies is that with some limitations you can have a single code base to create both Android and iPhone apps. This course will take experienced web developers and give them experience developing for mobile devices using both of these techniques.
5 Days
Contact us for pricing
 

Prerequisites

The course is aimed at web developers with at least some experience of Angular or React. To get maximum benefit from this course candidates wwill have:
● Experience with Web Application Development using HTML, CSS and JavaScript
● Thorough understanding of Node.js and the Node.js ecosystem
● Experience with component development using either Angular or React

Progressive Web Application Development

Introduction to PWA
What is a PWA?
PWAs vs Native Mobile Apps
The Characteristics of a PWA

• Progressive
• Responsive
• Connectivity independent
• App-like
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable

A First PWA

App Manifest
Serving pages using https
Chrome developer tools
Testing on an emulated device
Testing on a real device

Service Workers

What is a service worker?
Service worker events
Service worker lifecycle
Testing your PWA offline

Asynchronous Communication

Ajax
Promises
Fetch
Understanding CORS

Caching

What is caching?
Introduction to the Cache API
Serving files from the cache
Caching modes - cache only, network only, network falling back to cache, cache then network
Dynamic caching
Advanced offline operations

IndexedDB and Dynamic Data

Caching dynamic content
What is IndexedDB?
When to use caching and when to use IndexedDB?

Using Native Device Features

Installing - add to homescreen
Push Notifications
Accessing device location
Accessing the camera

Auditing your PWA

Chrome developer tools
Lighthouse
PWA checklist

Introduction To React Native Development

Getting Started with React Native
Native Mobile Development v's Hybrid Mobile Development
Understanding the node.js eco system
Installing ReactNative
Setting up development environment
Expo
Installing Android Emulator
React Native Hello World

Displaying Content

JSX
Creating a Custom Component
JSX Rules

Working With Lists

Building Lists
FlatList Element
Rendering a FlatList
FlatList props

Adding Navigation

Button Types
Adding Pages
Navigating using React Navigation

Building Reusable Components

Understanding Props
Parent-Child Relationships
Parent-Child Communication
Adding Images
Passing an Image as a Prop

State Management

What is "State"
Changing State
Validating State changes
What is a Reducer
Creating a Reducer
Applying State with a Reducer

Understanding Screen Layout

React Native Layout
Box Object Model
Aligning Items
FlexBox
Using Flex in Layout

Working With an API

Ajax
Introduction to Axios
Getting Data From an API
Crud Example

Component Lifecycle

What is the Component Lifecycle
ReactNative Hooks
useState
useEffect

Working With Native Device Features

React Native Directory
Requesting Permission
Using the Camera
Working with the Image Gallery
Uploading Images to a Web Application
Working With Location
Full stack web developmentProgressive Web ApplicationPWAJavaScriptTypeScriptAngularReactModern Web DevelopmentNode.jsReact NativeNativeScript