O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Progressive Web Apps with Preact

Book Description

This book is a step-by-step guide that will teach you how to build progressive web apps from scratch with Preact. More importantly, this book shows you how to create modern and robust applications that work well under network and computing constraints in the mobile era. You will learn how to build a PWA from scratch, synchronize your data to work offline, test, annotate the types on your data structures to improve quality, and learn how to measure the performance and resilience of the app in adversarial situations. The example web app that you will build is a client for Hacker News, a popular social news site focused on technology and entrepreneurship. By the end of this book, you will learn how to: -Build a progressive web app -Migrate an existing app from React to Preact -Test and debug Preact apps -Use Preact effectively with TypeScript -And more

Table of Contents

  1. Preface
    1. Who is this book for?
  2. 1. Introduction
    1. What is Preact?
    2. What is a Progressive Web App and why you should care?
    3. Why Preact instead of React and Vue.js
      1. Differences with other frameworks
    4. Preact basics
      1. The ‘V’ in ‘MVC’
      2. Virtual DOM
      3. JSX
      4. Components
      5. Props
      6. State
      7. Props Down, Events Up
      8. Context
      9. Component Lifecycle
      10. Linked state
    5. Summary
  3. 2. Useful patterns
    1. Base components
    2. Compound components
    3. Render props
    4. Higher order components
    5. Summary
  4. 3. Backbone of a PWA
    1. HTTPS connection
    2. Web App Manifest file
    3. Service workers and offline caching
      1. Cache interface
      2. App life cycle
      3. Data management
    4. Universal rendering
    5. Summary
  5. 4. Migrating from React to Preact
    1. Alias method - preact-compat
    2. Manual migration
    3. Automatic migration
    4. Summary
  6. 5. Testing
    1. Why we test our code
    2. Unit testing
    3. Component testing
    4. End-to-end testing
    5. Summary
  7. 6. Developer Tools
    1. Debugging from your code editor
      1. Debugging with Visual Studio code
      2. Debugging with React Developer Tools
    2. Auditing with Lighthouse
    3. Summary
  8. 7. Adding static typing with TypeScript (or Flow!)
    1. Static typing in JavaScript
    2. TypeScript basics
    3. Generic types
    4. Compound types
    5. Optional properties and union types
    6. TypeScript and Preact
    7. Typing your components
    8. Replacing React.PropTypes
    9. Adding safety to the rest of your app
    10. Typechecking external data
    11. Summary
  9. 8. Preact CLI
    1. Automatic code splitting
    2. Async component code splitting
    3. Offline caching with service workers
    4. PRPL Pattern
    5. Testing
    6. Debugging
    7. Summary
  10. 9. Let’s Build a PWA
    1. Installing Preact CLI
    2. Bootstrapping
    3. Navigating the Project
    4. A Hacker News Client
    5. The Hacker News API
    6. Defining the Routes
    7. Building the Interface
    8. Wrapping Up
    9. Deploying with Firebase
    10. Extending Our Hacker News Client
  11. 10. Internationalization (i18n)
    1. Internationalizing the HackerNews example
    2. Summary
  12. 11. Creating embeddable widgets with Preact
    1. Preact for embeddable Widgets
    2. How embedding works
      1. iframe embed
      2. script embed
    3. Using Preact CLI with the widget template
    4. Anatomy of a Widget project
    5. preact-habitat
    6. The Hello World widget
    7. Summary