Polymer in production : we did it!
•
1 like•2,270 views
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.
Report
Share
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
- 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
- 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