Slides from the 08/16/2017 Philly.NET user group presentation.

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

2. 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)

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

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

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

6. Progressive Web Apps

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

8. Progressive Web Apps

9. RESTful APIs and
AJAX

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

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

12. AJAX

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

14. 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 **

15. What is React?

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

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

18. Creating React Project in Webstorm
• ** DEMO **

19. React App in Webstorm

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

21. React Native in Webstorm

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

23. Running the React App
• npm start

24. Running the Unit Tests
• npm test

25. Building for Production
• npm run build

26. React and the Virtual
DOM

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

28. React Virtual DOM

29. React Components

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

31. React Components

32. React Components (ES6)

33. Rendering the React Component

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

35. 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 **

36. Component State and Props

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

38. Converting existing
app to React
Components

39. Converting to React Components
• ** DEMO **

40. Babel and React.createElement()

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

42. Infinite Scrolling

43. Service Workers

44. 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).

45. Service Worker - Install

46. Service Worker – Activate

47. Service Worker - Fetch

48. Web App Manifest

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

50. Web App Manifest

51. Final Steps and
Production Build

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

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

54. 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/

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