Re: [polymer-dev] First website using Polymer - Real time activity dashboard

217 views
Skip to first unread message

Taylor Savage

unread,
Feb 9, 2015, 4:48:12 PM2/9/15
to David Bismut, polym...@googlegroups.com
Really neat work. Looks great, and incredibly well executed. Thanks for sending this along!

Taylor

On Mon, Feb 9, 2015 at 5:34 AM, David Bismut <david....@gmail.com> wrote:
Hey!

Just wanted to share our first internal project using Polymer.

It's a dashboard showing real-time activity at our creative agency Sid Lee in Paris. Completely useless but fun to watch. All sensors are Arduinos sending real-time data to the distant server, which is connected to the front end through web sockets.

I have to say that using Polymer was a blast, the hardest part (on the front end) was adapting the yeoman generator and grunt-vulcanize to build the app the way we wanted. The rest went really smoothly, most widgets were initially developed on codepen and copy-pasted into individual polymer elements.

The whole project is available on Github https://github.com/SidLeeParis/sidLeeAgenceConnectee, the code on the front-end might not be very professional, I'm no developer :)

Thanks for reading!

David

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/db3432b1-a964-4c03-9877-fa107d9b260a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

David Bismut

unread,
Feb 10, 2015, 6:39:09 AM2/10/15
to polym...@googlegroups.com, david....@gmail.com
Thanks a lot for the kind words! I had to remove the post yesterday as we shouldn't have communicated on it earlier than today, but now we're good ;)

Rob Dodson

unread,
Feb 12, 2015, 11:38:28 PM2/12/15
to David Bismut, polymer-dev
As the maintainer of the Yeoman generator, I'd be interested to know what issues you ran into.

David Bismut

unread,
Feb 13, 2015, 5:54:31 AM2/13/15
to polym...@googlegroups.com, david....@gmail.com
Hi Rob,

Well first of all, thanks for building the generator, it really helped getting on board with Polymer. Secondly, let me say that I'm no pro developer (not my job and I started modern javascript as a side hobby two years ago with Meteor which makes building and deployment completely seemless), so my issues might just be related to my beginner level with Grunt.

Anyway, my problem dealt with building the app. Here are the issues I encountered with the standard setup, and here is the link to the Gruntfile we ended up with.
  1. /styles/fonts were not copied. No big deal, easy fix.
  2. Some SVG files were corrupted by imagemin, so I had *.svg files directly copied instead of being processed by imagemin. Again, easy fix.
  3. The main issue was related to grunt-vulcanize. Using the initial settings, the build was depending on bower_components/polymer/polymer.html, which had side effects such as forcing us to keep a reference to the bower_components directory and not minifying polymer.js within our vendor.min.js file. Also, the whole bower_components directory with all dependencies was copied within the build directory, and all polymer-elements html + css files were also copied, even if the built index.html only referenced the elements.vulcanized.html file. Eventually, we found out that using the csp, inline, strip options set to true would break the dependency on polymer.html in the bower_components directory, and directly include it within the elements.vulcanized.js file. We therefore implemented a cleaning task that would get rid of the bower_components directory + all polymer-elements in the elements folder that were not vulcanized.
  4. I also experienced some issues with minifying shim-shadowdom css files. cssmin doesn't seem to recognize the shim-shadowdom attribute and skips it when building. Therefore we had to add a dirty trick to detect the attribute and add it back in the build file.
That's about it really. Also for some reason, modifying css in polymer-elements css files (not included within the index.html) doesn't livereload with grunt serve which is a little frustrating (but I could live with that ;).
But again, we made it and thanks for your great work, and happy to know if there was an easier way to fix our problems!

Cheers,

David

Rob Dodson

unread,
Feb 13, 2015, 1:55:52 PM2/13/15
to David Bismut, polymer-dev
Thanks David, this is all great feedback! I'm just about to do a new release to add Gulp support but after that I'll create tickets for these and get them fixed in the next release.

Reply all
Reply to author
Forward
0 new messages