Polymer 1.x about polymer-gmail

[ebidel]

Yea. Theres a WIP branch.

On Sun, Jul 5, 2015, 12:46 PM Matthias H. Risse [email protected]
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
#6.

[mhrisse]

Thanks!

[devAtPolydeals]

@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]

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]

@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]

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]

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:

• Chrome with 3G connection - Polymer 1.0 version with lazy loading reduced first paint by ~4.14s to 1.66s (71% saving) and dropped Speed Index by 47% on mobile. A repeat view is even better thanks to Service Worker (Load time: 3.3s, First paint: 589 ms, Speed index: 2627).
• Chrome desktop - first paint is 393ms and loads in 1s.

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

• Tabular results are for "first view"
• The 1.0 version has offline caching via localStorage and Service worker, however this should not play into the first view metrics listed above.
• The 1.0 version uses lazy loading to load the webcomponents.js polyfills and async html imports.
• Unfortunately Web Page Tester doesn't have an iOS 6 to test against. It would be interesting to see how these numbers change for a polyfill'd browser.

[ragingwind]

🎉 Great job!

[devAtPolydeals]

@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]

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.

[ebidel]

@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]

@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]

@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]

@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]

Merged the code into master. Closing this.