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.

Duration: 5 days


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


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 development Progressive Web Application PWA JavaScript TypeScript Angular React Modern Web Development Node.js React Native NativeScript