Polymer
in production
We did it!
Sylvain Weber
CEO / Co-founder, Kontest
@sylvainw
Etienne de Dieuleveult
Web developer, K...
Existing project
Build awesome promotion Apps
for Facebook, web and mobile
➔ Born in 2010
➔ 15 team members
➔ 33 Applicati...
Google IO
June 25th, 2014
Inspiration : Topeka
Polymer-topeka.appspot.com
Why Polymer?
➔ Material Design
➔ Web components
➔ Innovation as a core value
➔ “The World won’t wait”
➔ An evolving Stack
Existing Stack
Kontest platform R&D projects
Other
Component structure
➔ Custom Elements
➔ HTML Templates
➔ HTML Imports
➔ Shadow DOM
Imbrication
<polymer-element name="kui-game-knowledge" attributes="answers settings">
<template>
<link rel="stylesheet" hr...
Implementation
➔ AJAX callback from HTML to JSON
BEFORE
AFTER
Composability
Quiz : Classic version
Quiz : Polymer version
Demo : quiz-polymer.xg1.li
Creation of 6 Polymer Apps
Code review / Debug
function foo () {
var container = this.parentElement;
if (!container) {
setTimeout(foo, 250);
} else {...
October 16th : Official Launch
Timeline
June 25th
2014
Material
Design
discovered
Product team
Usability tests
with Polymer
Jul Aug Sept Oct Nov Dec
Inte...
Facebook Mobile Bug
➔ 1st loading : OK
➔ 2nd loading : Blank page
➔ Works elsewhere
➔ Debug tools
◆ JSconsole.com
◆ Chrome...
Euréka !
➔ CORS bug : Some Webkit versions only
➔ Pull request on webcomponentsjs
IE Bug = Facebook bashing
➔ Not properly tested + broken disclaimer
➔ Carelessness towards IE users (3%)
➔ Fallback needs ...
Positive Feedback
Our mistakes
1. Prototype ≠ Product
2. Interns management
3. Late code review
4. Short transition period
5. Minimize IE im...
We did it!
➔ December 2014
40%
Entries from Polymer
Before starting
1. Step back
2. Define your needs
3. Follow project activity
4. Estimate the impact
5. Prepare some altern...
THANKS
PS : We are hiring!
➔ Full Stack JS Developer
➔ CSS Developer
➔ Data Scientist
Kontestapp.com/fr/jobs
of 24

Polymer in production : we did it!

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.
Published on: Mar 4, 2016
Published in: Internet      
Source: www.slideshare.net


Transcripts - Polymer in production : we did it!

  • 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

Related Documents