Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Progressive Web Apps with React

You're reading from   Progressive Web Apps with React Create lightning fast web apps with native power using React and Firebase

Arrow left icon
Product type Paperback
Published in Oct 2017
Publisher Packt
ISBN-13 9781788297554
Length 302 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Scott Domes Scott Domes
Author Profile Icon Scott Domes
Scott Domes
Arrow right icon
View More author details
Toc

Table of Contents (15) Chapters Close

Preface 1. Creating Our App Structure FREE CHAPTER 2. Getting Started with Webpack 3. Our App's Login Page 4. Easy Backend Setup With Firebase 5. Routing with React 6. Completing Our App 7. Adding a Service Worker 8. Using a Service Worker to Send Push Notifications 9. Making Our App Installable with a Manifest 10. The App Shell 11. Chunking JavaScript to Optimize Performance with Webpack 12. Ready to Cache 13. Auditing Our App 14. Conclusion and Next Steps

Beginning work

Welcome to the world of Progressive Web Applications.

In the preceding scenario, the problems your friend was describing are exactly the problems PWAs (Progressive Web Applications) are crafted to solve.

The first problem is that many users will be visiting your web page under poor network conditions. They may be a Silicon Valley technocrat on their iPhone in a coffee shop with bad WiFi, or they may be a Bangladeshi villager in a remote location. Either way, they will not stick around if your site isn't optimized for them, for everyone.

How fast your application loads--its performance--thus becomes an accessibility concern. PWAs solve this by loading quickly the first time, and even more quickly every time after that. We'll talk more about how they do so as the book progresses.

Second, the installation process for mobile apps is an obstacle for users. It means that your users need to be extra committed to engaging with your application--enough to give up storage space and time, and expose themselves to the possibility of malicious and intrusive code, and that's before they even get the chance to try the app!

What if we can provide the native app experience without the initial investment? PWAs are an attempt to bridge that gap. Again, we'll talk in subsequent chapters about how they do so, and how successful they actually are. However, these are both worthy challenges, and solving both will be a huge user experience win for our application.

Why Progressive Web Apps?

Many static web pages do a fantastic job of performance. However, when all you need to do is render some HTML, CSS, and a smattering of JavaScript, it's less of a struggle to work well under all network conditions.

When we start talking about web applications--large, complex, JavaScript-based workhorses--performance becomes a significant challenge. Our frontend will have a lot of code. Our user needs to download all that code if they want to use our app to its fullest potential. How do we ensure that they're not staring at a blank loading screen for ten seconds, as 500 KB of JavaScript initializes?

Therefore, most of our performance enhancements will center around managing the JavaScript problem. This is especially true with React.

Why React?

React is quickly becoming the go-to solution for frontend web applications. Why? This is because it's fast, elegant, and makes managing large applications easy.

In other words, it makes complexity simple. There's no reason a PWA has to use React, though. PWAs can be any web app or site.

React does have one major benefit--its component pattern, where UIs are split into distinct pieces. As we'll see, the component pattern lets us break our interface into small chunks of code to alleviate the preceding JavaScript downloading issue. However, other than that, any frontend framework will work just as well for a PWA.

The advantage of React is that it is a beautiful and fun way to build frontend applications. It's also an in-demand skill. If you pair knowledge of React with experience with PWAs, you'll be about as future-ready as one can be in the fast-moving web development world.

A rose by any other name

You tell your friend about your learnings on PWAs and React, but before you finish, he waves his hand and interrupts.

"Yeah, yeah. Hey, what do you think the name should be?"

Once again, you're struck with the unnerving feeling that all of this was a mistake, that you never should have jumped on board this questionable venture, this potential catastrophe.

"Chatastrophe," you blurt out.

Your friend smiles and claps you on the back. "Brilliant. Okay, get Reacting or whatever!"

You have been reading a chapter from
Progressive Web Apps with React
Published in: Oct 2017
Publisher: Packt
ISBN-13: 9781788297554
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime