search

ebidel / polymer-gmail

Polymer 1.0 version of New Gmail app
https://poly-mail.appspot.com/
Other
528 stars 120 forks source link

Polymer 1.x #6

Closed mhrisse closed 9 years ago

mhrisse commented 9 years ago

@ebidel Excellent example. Any plans to upgrade this to use v1.x?

ebidel commented 9 years ago

Yea. Theres a WIP branch.

On Sun, Jul 5, 2015, 12:46 PM Matthias H. Risse notifications@github.com wrote:

@ebidel https://github.com/ebidel Excellent example. Any plans to upgrade this to use v1.0?

— Reply to this email directly or view it on GitHub https://github.com/ebidel/polymer-gmail/issues/6.

mhrisse commented 9 years ago

Thanks!

devAtPolydeals commented 9 years ago

@ebidel I downloaded the V1.X build and get Uncaught SyntaxError: Unexpected reserved word at https://github.com/ebidel/polymer-gmail/blob/1.0/scripts/app.js#L17' Any idea on how to fix this?

ebidel commented 9 years ago

You'll need to npm install and run babel to compile the es6 code. Namely, the import is the thing causing the problem. When I move the 1.0 branch to default, I'll publish some instructions on how to get up and running. I would have liked to keep the app free from compilation, but ES6 classes were just so nice :)

devAtPolydeals commented 9 years ago

@ebidel Ok Thanks. I figured there was some kinda new age sorcery going on in there which i didn't know about :~) BTW it works well in the 'dist' directory after gulp however there is one small bug. In dist\index.html the script tag still looks for <script src="scripts/app.js"></script> however in bundlejs gulp task it ends up creating bundle.js in the dist\script folder. You may have to change either gulp or index.

ebidel commented 9 years ago

Hmm, it shouldn't: https://github.com/ebidel/polymer-gmail/blob/1.0/index.html#L199. I would kill and unregister any service worker in chrome://serviceworker-internals/ and try re-running. You may also have to do that for dev'ing vs. serving out of dist/

ebidel commented 9 years ago

https://poly-mail.appspot.com/ now serves the Polymer 1.0 version! I did a quick comparison on WPT to see the difference from the Polymer 0.5 version of the app.

TL;DR:

Results

Smaller numbers are better in all cases.

Chrome desktop - cable connection

0.5 app (result) 1.0 app (results) 1.0 app w/ lazy loading (results)
Speed index 2652 1854 1144
First paint 1.532s 1.718 s 589 ms
First byte 331ms 245 ms 394 ms
Load time 2.715s 2.618 s 1.1 s

Analysis: 1.0 w/ lazy loading reduced FP by 943 ms and SI by 56.94%.

FF desktop - cable connection

0.5 app (results) 1.0 app (results) 1.0 app w/ lazy loading (results)
Speed index 3689 1208 2250
First paint 1.285 s 795 ms 1.0 s
First byte 314 ms 247 ms 310 ms
Load time 2.416 s 2.416 s 1.018 s

Analysis: interestingly, on a desktop polyfill'd browser like FF, both SI and FP increased when switching to the lazy loading technique. However, both 1.0 versions beat the Polymer 0.5 app.

Motorola G - Chrome - 3G Fast connection

0.5 app (results) 1.0 app (results) 1.0 app w/ lazy loading (results)
Speed index 9154 6502 5614
First paint 5.80 s 5.71 s 1.66 s
First byte 1.29 s 1.16 s 1.09 s
Load time 11.78 s 7.71 s 7.26 s

Repeat view - Load time: 3.30s, First paint: 589 ms, Speed index: 2627

Analysis: FP got better (negligible 1.55%). SI reduced by ~29%. However, when introducing lazy loading to the 1.0 app, FP reduced by ~4.14s (71% saving) and SI by 39%\ compared to the 0.5 app. Repeat view is even more impressive (FP ~590ms and SI of 2627) thanks to offline caching and Service worker.

Conclusions

In all cases, Polymer 1.0 is faster than 0.5. Also, lazy loading the polyfills and HTML imports on the page is a big win, esp. on slower mobile connections.

I purposefully neglected to discuss page load time. For this app, the slower bits that push the waterfall out are due to non-Polymer related things: Google Fonts API, Google JS Client library loads and rpc iframes, Google Analytics.

Notes

ragingwind commented 9 years ago

:tada: Great job!

devAtPolydeals commented 9 years ago

@ebidel sorry its the other way round, index.html points to bundle.js at https://github.com/ebidel/polymer-gmail/blob/1.0/index.html#L199 but the scripts folder has app.js https://github.com/ebidel/polymer-gmail/tree/1.0/scripts; ofcourse this issue does not occur in dist folder because of browserify. However i mostly use app folder for studying the code & run from app folder in chrome dev tools.

devAtPolydeals commented 9 years ago

Tried running the new https://poly-mail.appspot.com/ , sign in went through fine but emails did not load; got the below error in console.

image

ebidel commented 9 years ago

@devAtPolydeals I don't have a good solution for running it under dev without compiling atm. app.js will need to be compiled to bundle.js and the app run from dist/. I need to setup watch tasks to get things working in dev.

That error is probably around https://github.com/ebidel/polymer-gmail/blob/1.0/scripts/googleapis.js#L124-L127. Something is different about some of your email threads. Would love to know more.

devAtPolydeals commented 9 years ago

@ebidel I would love to help but don't know how? It is tough to debug it with minified js and I cannot run uniminified on localhost because of googleapi does not allow access from localhost.

BTW ?debug switch gives 404 because users.json is not available.

Failed to load resource: the server responded with a status of 404 (Not Found) https://poly-mail.appspot.com/data/users.json

strycore commented 9 years ago

@devAtPolydeals try replacing the Google client ID with your own (which must have GMail read access and optionally G+ read access). I also was encountering an error (not sure it was the same as you) until I replaced the client ID with my own, the app ran fine after that.

ebidel commented 9 years ago

@devAtPolydeals, ack on users.json. It's a known issue. I need to upload a list of folks...that aren't my actual contacts :p

ebidel commented 9 years ago

Merged the code into master. Closing this.