Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Wird geladen in …3
×
1 von 24

Polymer in production : we did it!

1

Teilen

Herunterladen, um offline zu lesen

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.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Polymer in production : we did it!

  1. 1. Polymer in production We did it! Sylvain Weber CEO / Co-founder, Kontest @sylvainw Etienne de Dieuleveult Web developer, Kontest @TinOo512
  2. 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. 3. Google IO June 25th, 2014
  4. 4. Inspiration : Topeka Polymer-topeka.appspot.com
  5. 5. Why Polymer? ➔ Material Design ➔ Web components ➔ Innovation as a core value ➔ “The World won’t wait” ➔ An evolving Stack
  6. 6. Existing Stack Kontest platform R&D projects Other
  7. 7. Component structure ➔ Custom Elements ➔ HTML Templates ➔ HTML Imports ➔ Shadow DOM
  8. 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. 9. Implementation ➔ AJAX callback from HTML to JSON BEFORE AFTER
  10. 10. Composability
  11. 11. Quiz : Classic version
  12. 12. Quiz : Polymer version Demo : quiz-polymer.xg1.li
  13. 13. Creation of 6 Polymer Apps
  14. 14. Code review / Debug function foo () { var container = this.parentElement; if (!container) { setTimeout(foo, 250); } else { … } } ➔ #internship
  15. 15. October 16th : Official Launch
  16. 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. 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. 18. Euréka ! ➔ CORS bug : Some Webkit versions only ➔ Pull request on webcomponentsjs
  19. 19. IE Bug = Facebook bashing ➔ Not properly tested + broken disclaimer ➔ Carelessness towards IE users (3%) ➔ Fallback needs for some Apps
  20. 20. Positive Feedback
  21. 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. 22. We did it! ➔ December 2014 40% Entries from Polymer
  23. 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. 24. THANKS PS : We are hiring! ➔ Full Stack JS Developer ➔ CSS Developer ➔ Data Scientist Kontestapp.com/fr/jobs

×