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
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