GroceryWorks is a fictional grocery store website for demo purposes. In addition to the reference implementation, here are a number of alternate implementations that explore different aspects of web development.
| Version | Description | Author |
|---|---|---|
| Reference Implementation | This is the reference implementation of GroceryWorks. It is meant to be a "plain vanilla" version of the website, using modern HTML, CSS, and JS. It is notably framework-free, but not 100% dependency-free -- it includes a polyfill for the <dialog> element. | Scott Davis scott.davis@thoughtworks.com |
| Unoptimized | This version of GroceryWorks is purposely unoptimized. It is meant to be a "before" snapshot with massive images (close to 100 mb), no mobile optimization, no a11y, etc. | Scott Davis scott.davis@thoughtworks.com |
| Web Components (Coming Soon!) |
In the vanilla reference implementation, you can see that traditional CSS and JS are pathologically global. Using Web Components and JS Modules, you'll see that encapsulation dramatically cleans up the underlying implementation, leading to better scalability through highly cohesive, loosely coupled components. Fans of frameworks (React, Angular, Vue, et al) will find this codebase familiar. The upside? This codebase is 100% browser-native.
For more information, see Building Components from Google. |
Scott Davis scott.davis@thoughtworks.com |
| PWA (Coming Soon!) |
PWAs (Progressive Web Apps) are native-like mobile apps (iOS, Android) built using browser-native technology. It will provide an "installable experience" without an App Store, including a desktop icon, offline support, push notifications, and continuous updates via Service Workers.
For more information, see Your First Progressive Web App from Google. |
Scott Davis scott.davis@thoughtworks.com |