Progressive Web Apps With React: Chapter 1, Creating Our App Structure

This chapter opens up with the argument for Progressive Web apps (PWA).  Building an app in React does not necessarily make it a PWA, and building a PWA does not have to be done in React exclusively. 
There are several sections upcoming, that while they sound exciting, really have almost nothing to do with the programming in any form or fashion.  The author uses a story of a friend who wants you to build an app, and will pay you lots of money for it.  I would skip the following sections:
  • Setting the Scene
  • The Problem
  • The Other Problem

Beginning Work

A PWA consists of several parts.  Building an app that will work reliably from poor internet connections, to incredibly fast ones.  And secondly, they need to install fast, and be small.

Why Progressive Web Apps?

We need PWA's because JavasScript based apps, bcan be become very large and complex.  This leads to performance challenges.  We want the app to load as fast as possible, over the worst connections around.

Why React?

React is fast, elegant and makes managine a large app easy.  It takes complex ideas and helps to make them simple.  Also, there is a huge market for React based programmers.  So why not learn something useful, and that will make you money?

User Stories

The author quickly goes over the concept of user stories, and how we are going to use them in our new app.  A user story is one of many ways to break down a project into multiple steps, so you can turn it into some kind of code. 
For instance:  Users should be able to log in and out of the application.  This is a simple idea, that can be turned into a log in page we will need for our app.

Application Challenges

Instant Loading

PWA's strive to be more like native apps rather than typical web apps.  One way to do this is to cache all the relevant files needed to run the web app on the device. 

Push notifications

For the app we are going to build in this book, we want to emulate push notifications to the user, but how do we do that with a web app?  We will use third-party services to send notifications to the devices, and a piece of code that is always running to listen for these notifications. 

Offline access

We also want to allow offline access to app.  We will again need to cache that data.

Mobile-first design

We will build a simple UI that is engineered for both looks and performance.

Progressive enhancement

Progressive enhancement means that the app will get better as the various assets needed to run it are downloaded and run.  Part of this means, that our basic app will have no JavaScript whatsoever.  It will be a simple html page.

Let's get going

Our App skeleton

This is where we start getting to the meat of the chapter.  How to set up and build your first React app.  These first set of instructions are well written, and just worked as I worked my way through the examples.  Create a directory, add some files, and add text to those files.

CSS and assets

In this section, you can either clone the git repo, or download a zip of the assets that were already created for you.  I personally, like this, this is not a book on CSS, it's a book on React.  Having the files already available saves you valuable learning time.

Meta tags and favicons

I would rather have seen a listing of all the code in this section, but it is pretty easy and straight forward to follow along with.  I did get a little lost, but it wasn't that bad to follow along, and everything just worked as the author describes.

What is npm?

React applications are primarily JavaScript, but JavaScript is no longer confined to the browser.  Many people are now using JavaScript as the back end for their web apps.  Let us introduce Node.js.  Node let us run JavaScript outside the browser.  While we aren't using Node in this project, many projects take advantage of npm (Node Package Manager), React being one of them.

Node setup

This section shows how to download and install Node.js on you computer.  Pretty straightforward, not really much to talk about.

The dark side of npm

npm has a few downsides.  It requires an Internet connection, and the installation process is not uniform amongst installs.  To combat some of these problems, Facebook has come out with Yarn.  Yarn is essentially a wrapper for npm, hoping to combat the aforementioned problems.  There are no instructions for installing Yarn given in the book, but the instructions on the web site, just worked.

Project initiation

The instructions for starting a new project are given, and they are very easy to follow.  For my own learning purposes, I'm going to extract them here and make them more generic
  1.  Create a project folder
  2. yarn init
  3. Voila done

Installing React

Installing React is as simple as running the yarn add react@version_number.  This book will use 15.6.1, there are newer versions.

Using React

We will start modifying our static html page we created earlier to include React. These instructions are well written.  You should have no problems following along.

Welcome to ReactDom

I glanced over the first paragraphs, and got right to the code.  I was a little frustrated when the instructions didn't work.  That is what I get for glossing over 3 paragraphs.  If at first you get an error, make sure you run the command yarn add react-dom@15.6.1 (with no period at the end).  Once I did that, the code worked flawlessly.

Comments

Post a Comment

Popular posts from this blog

Go Programming Blueprints, Chapter 2, Adding User Accounts

A universal truth in programming is that there are relatively few unique unsolved problems.  What tasked with a new problem, always see what other solutions exist and how we can solve our new one.  In this instance, we are going to use open source solutions to auth against existing services. Handlers all the way down Everything we write will be http handlers.  This allows us to encapsulate objects as far down the chain as needed.  Making pretty social sign in page We get a quick lesson on bootstrap, and why and how to use it.  There are two methods to showing our bootst rap.  We can leave it hosted on a CDN or add it to our assets folder.  Endpoints with Dynamic Paths Go doesn't support the most robust path selections (/path/options), such as ruby on rails or Django python.  As with everything Go, there are open source packages we can use to help with this functionality.  We will use string.split to break our argument paths in the re...
Read more

Successful Big Game Hunting Chapter 10

Chapter 10: Short Course on Bear Hunting As with all the short course chapters, this is a quick chapter on hunting different types of bears.  Mr. Gilchrist has several tips on the different types of bears, and tips on how to distinguish between them.  In at least one western state, there is a test on how to visually tell the difference between a grizzly bear and a black bear. Of course he as tips on how to prepare a bear hide for for taxidermy, and how to score a bear as a trophy.  He also has several tips on how to tell if a bear is a trophy. Favorite Quote: "Bears often react violently to a superficial hit.  He may fall as though mortally wounded, when only hit in the paw"
Read more