demo/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GroceryWorks Demo Pages</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Scott Davis <scott.davis@thoughtworks.com>">
    <meta name="description" content="Different versions of GroceryWorks for demo">

    <style>
      caption{
        font-style: italic;
        font-weight: bold;
        margin-top: 1em;
        text-align: left;
      }

      table{
        border-collapse: collapse;
        border: 1px solid black;
        text-align: left;
      }

      td{
        padding: 1em;
        vertical-align: top;
      }

      th{
        background-color: #ccc;
        padding: 1em;
      }

      tr{
        border: 1px solid black;
      }

    </style>
  </head>

  <body>
    <h1>GroceryWorks Demo Pages</h1>
    <p>GroceryWorks is a fictional grocery store website for demo purposes. In addition to the <a href="../">reference implementation</a>, here are a number of alternate implementations that explore different aspects of web development.</p>

    <table>
      <caption>Alternate versions of GroceryWorks</caption>
      <tr>
        <th>Version</th>
        <th>Description</th>
        <th>Author</th>
      </tr>

      <tr>
        <td><a href="../">Reference Implementation</a></td>
        <td>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 &lt;dialog&gt; element. </td>
        <td>Scott Davis <a href="mailto: scott.davis@thoughtworks.com">scott.davis@thoughtworks.com</a></td>
      </tr>

      <tr>
        <td><a href="unoptimized">Unoptimized</a></td>
        <td>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.</td>
        <td>Scott Davis <a href="mailto: scott.davis@thoughtworks.com">scott.davis@thoughtworks.com</a></td>
      </tr>

      <tr>
        <td>Web Components<br>(Coming Soon!)</td>
        <td>In the vanilla <a href="../">reference implementation</a>, 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.
         <p>For more information, see <a href="https://developers.google.com/web/fundamentals/web-components/">Building Components</a> from Google.</p>
        </td>
        <td>Scott Davis <a href="mailto: scott.davis@thoughtworks.com">scott.davis@thoughtworks.com</a></td>
      </tr>

      <tr>
        <td>PWA<br>(Coming Soon!)</td>
        <td>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. 
          <p>For more information, see <a href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">
            Your First Progressive Web App</a> from Google.</p>
        </td>
        <td>Scott Davis <a href="mailto: scott.davis@thoughtworks.com">scott.davis@thoughtworks.com</a></td>
      </tr>

    </table>

  </body>
</html>