Polymer is a new framework developed by Google for quickly creating web applications using web components. At Kontest, we face the challenge to push this technology in production to a mainstream audience for the 1st time ever. The presentation starts with the fundamentals and some examples. Then, we share our feedbacks from the field with all the details on the implementation.

1. Polymer
in production
We did it!
Sylvain Weber
CEO / Co-founder, Kontest
@sylvainw
Etienne de Dieuleveult
Web developer, Kontest
@TinOo512

2. Existing project
Build awesome promotion Apps
for Facebook, web and mobile
➔ Born in 2010
➔ 15 team members
➔ 33 Applications available
➔ Clients : Big agencies / Fortune 500
Website : Kontestapp.com

3. Google IO
June 25th, 2014

4. Inspiration : Topeka
Polymer-topeka.appspot.com

5. Why Polymer?
➔ Material Design
➔ Web components
➔ Innovation as a core value
➔ “The World won’t wait”
➔ An evolving Stack

6. Existing Stack
Kontest platform R&D projects
Other

7. Component structure
➔ Custom Elements
➔ HTML Templates
➔ HTML Imports
➔ Shadow DOM

8. Imbrication
<polymer-element name="kui-game-knowledge" attributes="answers settings">
<template>
<link rel="stylesheet" href="kui-game-knowledge.css" shim-shadowdom>
<kui-game-quiz class="game" answers="{{answers}}" settings="{{settings}}">
</kui-game-quiz>
</template>
<script type="text/javascript" src="kui-game-knowledge.js"></script>
</polymer-element>

9. Implementation
➔ AJAX callback from HTML to JSON
BEFORE
AFTER

10. Composability

11. Quiz : Classic version

12. Quiz : Polymer version
Demo : quiz-polymer.xg1.li

13. Creation of 6 Polymer Apps

14. Code review / Debug
function foo () {
var container = this.parentElement;
if (!container) {
setTimeout(foo, 250);
} else {
…
}
}
➔ #internship

15. October 16th : Official Launch

16. Timeline
June 25th
2014
Material
Design
discovered
Product team
Usability tests
with Polymer
Jul Aug Sept Oct Nov Dec
Interns
Quiz prototype
creation
Interns
6 Apps creation
Tech team
Appropriation
Debug
Product team
Preprod testing
Debug
Oct 16th, 2014
Launch
Dec 1st, 2014
Audience
record
BUG
FB Mobile
BUG
Internet Explorer

17. Facebook Mobile Bug
➔ 1st loading : OK
➔ 2nd loading : Blank page
➔ Works elsewhere
➔ Debug tools
◆ JSconsole.com
◆ Chrome DevTools
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.
KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

18. Euréka !
➔ CORS bug : Some Webkit versions only
➔ Pull request on webcomponentsjs

19. IE Bug = Facebook bashing
➔ Not properly tested + broken disclaimer
➔ Carelessness towards IE users (3%)
➔ Fallback needs for some Apps

20. Positive Feedback

21. Our mistakes
1. Prototype ≠ Product
2. Interns management
3. Late code review
4. Short transition period
5. Minimize IE impact
6. Lack of Sales briefing

22. We did it!
➔ December 2014
40%
Entries from Polymer

23. Before starting
1. Step back
2. Define your needs
3. Follow project activity
4. Estimate the impact
5. Prepare some alternatives
6. Test everything!

24. THANKS
PS : We are hiring!
➔ Full Stack JS Developer
➔ CSS Developer
➔ Data Scientist
Kontestapp.com/fr/jobs