Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polymer 1.x #6

Closed
mhrisse opened this issue Jul 5, 2015 · 15 comments
Closed

Polymer 1.x #6

mhrisse opened this issue Jul 5, 2015 · 15 comments

Comments

@mhrisse
Copy link

mhrisse commented Jul 5, 2015

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

@mhrisse mhrisse changed the title Polyer 1.0 Polymer 1.x Jul 5, 2015
@ebidel
Copy link
Owner

ebidel commented Jul 5, 2015

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
#6.

@mhrisse
Copy link
Author

mhrisse commented Jul 6, 2015

Thanks!

@devAtPolydeals
Copy link

@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
Copy link
Owner

ebidel commented Jul 22, 2015

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
Copy link

@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
Copy link
Owner

ebidel commented Jul 22, 2015

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
Copy link
Owner

ebidel commented Jul 22, 2015

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
Copy link

🎉 Great job!

@devAtPolydeals
Copy link

@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
Copy link

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
Copy link
Owner

ebidel commented Jul 22, 2015

@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
Copy link

@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
Copy link

@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
Copy link
Owner

ebidel commented Jul 23, 2015

@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
Copy link
Owner

ebidel commented Jul 29, 2015

Merged the code into master. Closing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants