Progressive Web Apps and React

Progressive Web Apps
and React
Mike Melusky – Philly.NET August 16, 2017

Motivation for the Talk
• Keeping up with the Javascript ecosystem and front end web can be
intimidating
 E.g. Ember, Angular, Erlang, Elixir, Yarn, Reason, Typescript, Flow, Redux …
• Geared more for traditional ASP.NET MVC developers who haven’t had the
chance to work with
• Presence of Javascript in development of native “apps” (e.g. Ionic)

Prerequisites
• HTML
• Javascript
• nodejs
• Basic CLI knowledge (very simple)
• IDE of your choice (Atom, Webstorm, Visual Studio Code, et al.)

About the Speaker
• Mike Melusky (@mrjavascript)
 Software Developer at Audacious Inquiry in Baltimore
 Instructor at Penn State and Franklin and Marshall College

Topics
• Introduction to Progressive Web Apps
• RESTful APIs
• AJAX
• CSS Frameworks
• Javascript Libraries (React in particular)
 React Components
 React Navigation between Views
 Infinite Scrolling
• Web App Manifest
• Service Workers
• Final Steps

Progressive Web Apps
• A Progressive Web App (PWA) is a web app that uses
modern web capabilities to deliver an app-like experience to users
• You can deploy your app as a PWA as well as Native app and take advantage
of both channels

RESTful APIs
• REST (REpresentational State Transfer) APIs and web services provide an
easy way to communicate with a backend architecture without the need to
understand or mess with the architecture itself
• To put it more simply, as a frontend developer, you are going to be
interacting with one or more endpoints (i.e. URIs) that are part of an API
that resides on a server, cluster or similar backend, that someone else has
created for you
• If the API is well-designed, you will be given clear and concise
documentation on how to go about requesting, creating and editing resources
on the backend (provided that you are properly authorized), without ever
having to write backend code
• This effectively allows frontend developers to deal with just
the View and Controller parts of the MVC

AJAX
• AJAX (Asyncronous JavaScript And XML) has been around for years and
every web developer has used it in one way or another (most of us through
jQuery)
• Using AJAX, we can request resources from one or more places online (or
locally, if your page resides on the same server as your requested URI),
anytime we want, without our web applications slowing down or needing to
get all the data to start rendering
• Used to get content from a RESTful API, using AJAX calls

Placeholder Content Resources
• JSON Placeholder—Placeholder text outputted in JSON format, covering
many common use-cases. Very easy to get started with, perfect to populate a
mockup web application such as the one we will be making.
• Unsplash It—Placeholder content is not complete without images and this is
the definitive place to get them. The documentation is really clear and easy-
to-follow, so you can get started in no-time.
• Random User Generator—Another high-quality resource, providing you
with generated user profiles that can be custom-tailored to your needs. It
allows for a plethora of options, but we will only need a select few in the
course of this post.

Presentation w/ CSS frameworks
• Most developers use Bootstrap, which is well-documented, has a nice, large
community and is feature-rich
• We’re going to use mini.css
• Before we can render anything on the screen, we should create an
application shell
• ** DEMO **

What is React?
• Javascript framework for creating user interfaces
 Full single page web applications
 Just certain parts of a website (like a search form)
• Component-Based
• Very fast (Virtual DOM)
• Created By Facebook

Javascript Components
• Search component
• Directory component  HTML / DOM
• Signup component

Creating React Project in Webstorm
• ** DEMO **

Create React App
•npm install -g create-react-app

React Native CLI
• npm install -g react-native-cli

Running the React App
• npm start

Running the Unit Tests
• npm test

Building for Production
• npm run build

JSX / ES6 / BABEL
• We write React Apps in… Browsers Understand…
 JSX -Vanilla JS
 ES6  BABEL

React Components
• Components let you split the UI into independent, reusable pieces, and think
about each piece in isolation.
• Conceptually, components are like JavaScript functions. They accept
arbitrary inputs (called "props") and return React elements describing what
should appear on the screen.

Rendering the React Component
• Let's recap what happens in this example:
1. We call ReactDOM.render() with the <Welcome name="Sara" /> element.
2. React calls the Welcome component with {name: 'Sara'} as the props.
3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the
result.
4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

React Components
• Most of our React code consists of components
 Search Bar component
 Sign-up component
 To-do list component
 List item component
 Add new item (form) component
 Interact with components using “props” and “state”
 ** DEMO **

React CLI
• npm install -g react-create
• react-create component <component name> --jsx

Converting existing
app to React
Components

Converting to React Components
• ** DEMO **

Babel and React.createElement()

Converting to React Components
• Other features to add:
 Additional view and navigation
 Infinite Scrolling

Service Workers
• Service Worker is a recent web platform specification that allows you to
cache resources locally in order to make sure that your app still works, even
if the user is not connected to the internet
• Service workers handle three core events:
 install is fired on the first load and is used to perform the initial setup of the Service
Worker, such as setting up offline caches.
 activate is fired after the Service Worker is registered and has been successfully
installed.
 fetch is fired whenever an AJAX request is sent over the network and can be used to
serve cached resources (especially useful when offline).

Web App Manifest
• A requirement for a PWA is updating the manifest.json file.
• This file consists of your application’s name, short name, icons, et al.

Final Steps and
Production Build

Final Steps
• Evaluate your Web App
 Google Lighthouse
 https://developers.google.com/web/tools/lighthouse/
 Google Mobile Speed Test
 https://testmysite.thinkwithgoogle.com/intl/en-us

Thank you
• “A Beginner’s Guide to Progressive Web Apps and the Front End Web” by
Angelos Chalaris
 https://hackernoon.com/a-beginners-guide-to-progressive-web-apps-the-frontend-
web-424b6d697e35
• “React Tutorials” by The Net Ninja:
 https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR

Additional Resources
• React Dev Tools (Chrome Extension):
 https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
• Swagger UI (API documentation):
 https://swagger.io/swagger-ui/
• Web App Manifest Generator:
 https://tomitm.github.io/appmanifest/
• UI Icons:
 http://fontawesome.io/
 https://feathericons.com/
• Icon Generator
 http://www.favicon-generator.org/

Even More Resources
• Preact – slimmed down alternative to React:
 https://preactjs.com/
• “The Service Worker Lifecycle”:
 https://developers.google.com/web/fundamentals/instant-and-offline/service-
worker/lifecycle
• React Documentation (via Facebook)
 https://facebook.github.io/react/docs/hello-world.html

Progressive Web Apps and React

Recommended

More Related Content

What's hot (20)

Similar to Progressive Web Apps and React (20)

More from Mike Melusky (20)

Recently uploaded (20)

Progressive Web Apps and React