Last week was marked by an important release: our first Progressive Web App built for publishers with React JS & Semantic UI.
One of our older apps – Mosaic – was rebuilt from the ground up. It uses the WordPress REST API to retrieve content such as categories, posts and pages.
Compared to v1.0, the new Mosaic comes with:
- Better performance. The loading of the content from the API and rendering speed have greatly improved.
- Integration with the latest version of the WordPress REST API.
- Offline mode. This feature will soon be available for pre-order in the PRO version.
The PWA was built using the following tech stack:
- Create-React-App for bootstrapping the project.
- React-Semantic-UI (the official React integration for Semantic UI) for adding UI components such as buttons, grids, forms, etc.
- React-Router for navigating between screens.
- React-Slick for the categories and posts carousels.
- Redux for managing the app state.
- Jest for unit testing.
- Eslint and the Airbnb coding standard.
We have a 85% code coverage rate with unit tests and we’re working on improving this rate. While we do our best to catch any bugs out there, we are aware that some of them might escape us. Please reach out if you happen to come across a nasty one 😊.
If you would like to see the PWA in action, you can find a live demo here: https://demo-mosaic-react.wpmobilepack.com
Currently, the production version of the Mosaic mobile PWA can be used through the free Progressive Web Apps plugin available on wordpress.org.