Giter Club home page Giter Club logo

polymer-gmail's Introduction

PolyMail

PolyMail is an offline, mobile-first, web version of the new Gmail native app UI. It's built using Polymer 1.0 and Service Worker and...is a WIP.

Demo: https://poly-mail.appspot.com/ ย  (mock data: https://poly-mail.appspot.com/?debug)

PolyMail

Note: the app is read only despite what the permissions popup says. Also, most of the buttons don't do anything. There's a lot of missing functionality.

Performance

TLDR: paint is ~393ms and the app loads ~1s on Chrome desktop. Motorola G - Chrome - 3G Fast connection first paint is 1.66s The full performance improvements over the Polymer 0.5 version are documented here.

Full results

===

Setup

In your local checkout, install the deps and Polymer elements

npm install

This will also run bower install for you.

Development & Building

Compile the ES6

While ES6 Classes run natively in Chrome, FF Nightly, Safari 9, and Edge, some of JS in PolyMail still requires compilation using Babel. In particular, scripts/googleapis.js uses ES6 => functions and modules (import statement) in addition to classes.

Compile the JS:

gulp jsbundle

This produces a single built and concatenated scripts/bundle.js. You're ready to run the app!

Run the app

Use any webserver you'd like. I use npm serve:

serve -p 8080

Run from /dist

This serves the app from the root folder. To run the production version, first run gulp then hit http://localhost:8080/dist/.

Watching files

For easier development, there's a task for rebuilding the vulcanized elements.html bundle and compiling the ES6 as you make changes:

gulp watch

Using test data

Hitting http://localhost:8080?debug will bypass Google Sign-in and use mock data for threads. Under this testing mode, you will no see custom labels in the left nav or user profile images show up on threads.

Deploying

npm run deploy

Future improvements

  • Push notifications
  • Reading emails in a thread
  • Creating emails
  • Clicking Label actually does filtering
  • Pagination (currently only the first few emails are visible)
  • a11y (keyboard access, tab support)
  • i18n
  • http2 push
  • Service Worker offline support & caching
  • Caching API requests
  • Auto-refresh inbox
  • Use Google Sign-in 2.0
  • Use GMail API push notifications (docs)
  • Use GMail API history feature (docs)
  • Searching emails. Full gmail search (e.g. to:me from:[email protected] is supported`).

polymer-gmail's People

Contributors

ebidel avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.