Basé sur les web components, Polymer est un nouveau framework développé par Google permettant de créer rapidement des applications web à l'aide de composants préexistants. Chez Kontest, nous avons à notre connaissance été parmi les 1ers à avoir osé poussé cette technologie en production à destination du grand public : http://korben.info/initiation-polymer-le-nouveau-framework-web-de-google.html Nous démarrerons par les fondamentaux avec quelques exemples, puis nous rentrerons dans le vif du sujet avec un retour d'expérience complet sur l'implémentation de la solution. Nous partagerons ensuite nos plus belles anecdotes sur sa mise en production ! Conférenciers : # Sylvain Weber, CEO et Co-fondateur,Kontest Former HTML5 Advocate at Google, Web developer at Dailymotion. Today, I'm the co-founder and CEO at Kontest, a multichannel platform for creating and running social marketing campaigns on Facebook, the Web and mobile. # Etienne de Dieuleveult, Full-stack web developer, Kontest Développeur "Full Stack" Javascript chez Kontest depuis presque un an. J'aime le web, les nouvelles technologies et les poneys.

1. Polymer
en production
On a osé !
Sylvain Weber
CEO / Co-fondateur, Kontest
@sylvainw
Etienne de Dieuleveult
Web developer, Kontest
@TinOo512

2. Contexte
Plate-forme de création
de jeux-concours multicanaux
➔ Créé en 2010
➔ 15 collaborateurs
➔ 33 Applications disponibles
➔ Clients : Agences / Grands comptes
Site web : Kontestapp.com

3. Google IO
25 Juin 2014

4. Découverte de Topeka
Polymer-topeka.appspot.comPolymer-topeka.appspot.com

5. Material Design

6. Innovations

7. Pourquoi Polymer ?
➔ Material Design
➔ Web components
➔ Culture de l’innovation
➔ Être pionnier
➔ Faire évoluer l’existant

8. Structure d’un composant
➔ Custom Elements
➔ HTML Templates
➔ HTML Imports
➔ Shadow DOM

9. Architecture

10. Composabilité

11. <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>
Héritage
➔ Nom (spinal-case)
➔ Attributs publiés
➔ Template obligatoire
(Shadow Dom)
➔ Custom element
➔ Data binding
➔ Script : définir
l'élément, ses
fonctions et ses
attributs

12. Stack existante

13. Implémentation
➔ Retour AJAX HTML vers JSON
AVANT
APRÈS

14. Quiz classique

15. Quiz Polymer
Demo : quiz-polymer.xg1.li

16. Création de 6 jeux Polymer

17. 16 octobre : Lancement officiel

18. Timeline
25 Juin 2014
Découverte
du Material
Design
Produit
Tests de faisabilité
avec Polymer
Jui Août Sept Oct Nov Déc
Stagiaires
Création
d’un prototype
de Quiz
Stagiaires
Création des 6 jeux
Tech
Appropriation
Debug
Produit
Tests en Preprod
Debug
16 Oct 2014
Lancement
1er Déc 2014
Explosion de
l’audience
BUG
FB Mobile
BUG
Internet Explorer

19. Bug Facebook Mobile
➔ 1er loading : OK
➔ 2nd loading : Page blanche
➔ Fonctionne ailleurs
➔ Outils de debug
◆ JSconsole.com
◆ DevTools chrome
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.
KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

20. Euréka !
➔ Bug CORS : Certaines versions de webkit
➔ Pull request sur webcomponentsjs

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

22. Bug IE = Facebook bashing
➔ Peu testé + Disclaimer cassé
➔ Canaliser les utilisateurs IE (3%)
➔ Fallback de certains jeux

23. Retombées

24. Erreurs commises
1. Prototype ≠ Produit
2. Encadrement des Stagiaires
3. Code review tardive
4. Phase de transfert trop courte
5. Minimiser l’impact d’IE
6. Ne pas briefer l’équipe Sales

25. Défi relevé !
➔ Décembre 2014
40%
Participations Polymer

26. Polymer 0.8 :
"En route vers la production"
➔ 3 Versions
◆ polymer-micro
◆ polymer-mini
◆ polymer
I'm not going to lie, if you're building stuff with Polymer,
the transition to 0.8 is going to hurt, bad.
Michael Bleigh

27. Avant de vous lancer
1. Prenez du recul
2. Définissez votre besoin
3. Suivez l’activité du projet
4. Estimez l’impact
5. Préparez des alternatives
6. Testez tout !

28. MERCI
PS : On recrute !
Javascript Developer
CDI, stage, contrat pro
Kontestapp.com/fr/jobs
Ecmascript 6
➔ AngularJS
➔ NodeJS