Progressive Enhancement for the Web with React
What is progressive enhancement and what does it mean in 2016 for the web? Progressive enhancement is defined as creating a useable web experience for users with different browsers, operating systems and network capabilities. This week we are focusing on articles and code that discuss progressive enhancement and how we as developers can improve our web applications for a wide variety of users -- from users with JavaScript disabled to users with spotty network connections to users with the latest and greatest browsers and 1 Gbps connections.
Happy Coding!
-Sophia Shoemaker
New version of React Docs
The React documentation just recently got a complete overhaul. It features all-new guides written from scratch, ES6 examples, and CodePen snippets. Check them out, especially if you are newer to React -- the explanations and details are great.
Tools
You might not need JavaScript
Lee Byron refers to this as a "CSS wizardry resource". JavaScript is great, but building functional UI components like image sliders, modals and even form validation can be done with just CSS. Check out this site the next time you need to build component you assume needs JavaScript, you might be surprised how far you can get without it!
Tutorials
Progressive Enhancement isn't Dead, but it Smells Funny
In this blog post, Nolan Lawson discusses what progressive enhancement means in 2016.
From the article: "The next billion people who are poised to come online will be using the internet almost exclusively through smartphones. And if Google’s plans with Android One are any indication, then we have a fairly good idea of what kind of devices the “next billion” will be using:
- They’ll mostly be running Android.
- They’ll have decent specs (1GB RAM, quad-core processors).
- They’ll have an evergreen browser and WebView (Android 5+).
What they won’t have, however, is a reliable internet connection. In a world where your lowest common denominator is a very capable browser with a modern JavaScript engine, running on a smartphone that would have been classified as desktop-class ten years ago, but the network is now the bottleneck, what does that mean for progressive enhancement?"
Nolan's article discusses how we can think about progressive enhancement in terms of network reliability versus the technology we are using to build web applications and sites.
Web development has two flavors of graceful degradation
Laurie Voss (the co-founder of npm, inc) wrote a response to Nolan Lawson's article re: progressive enhancement. He breaks down progressive enhancement into two categories: web applications and web sites.
For web applications built on JavaScript, progressive enhancement doesn't really make a whole lot of sense, if the user doesn't have JavaScript enabled, there is not much a web application can do to function without it. On the other hand, if you're building a web site consisting of many different pages (a news site, a business, an entertainment site, etc), building a JavaScript-less experience is a great idea and useful for users who don't have an ideal setup while browsing the web.
Progressive Enhancement Techniques with React
This article gives an explanation of how to create a form with React, Redux, React Router and server side rendering. The form that is rendered in the browser is a regular form, so when JavaScript is disabled, the form will be submitted to the server, and the server can use the data to dispatch an action accordingly. When JavaScript is enabled, we want to dispatch the action directly from the browser. There are two other posts in this blog series that discuss more complicated forms with progressive enhancement and data fetching and the github repo is available as well.
Progressive Web Apps -- Part 3 & 4
Part 3 and 4 by Addy Osmani give tips and tricks on how to create progressive web applications with React.
Part 3: A good progressive web app loads instantly regardless of network state and puts up its own UI on the screen without requiring a network round trip (i.e when it’s offline). We can achieve this by using service workers. A service worker is a background worker that acts as a programmable proxy, allowing us to control what happens on a request-by-request basis. We can use it to make (parts of, or even entire) React apps work offline.
Part 4: Progressive enhancement is not about making the web work for users without JavaScript turned on, nor SEO, but about making it resilient to lie-fi and spotty network connectivity blocking users from getting a meaningful experience. When it comes to progressive enhancement with JavaScript libraries and frameworks, server-side rendering is a useful tool in your arsenal.
Code
An example of a progressive form with React
This a small example of how you might go about building progressively-enhanced forms with ReactJS, which operate through regular form POSTs if Javascript is disabled, but take advantage of React's built-in client-side DOM-diffing if Javascript is enabled.
About

Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker, Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.