polymer en production : on a osé !
TRANSCRIPT
Polymer en productionOn a osé !
Sylvain WeberCEO / Co-fondateur, Kontest@sylvainw
Etienne de DieuleveultWeb developer, Kontest@TinOo512
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
Google IO25 Juin 2014
Découverte de Topeka
Polymer-topeka.appspot.comPolymer-topeka.appspot.com
Material Design
Innovations
Pourquoi Polymer ?
➔ Material Design➔ Web components➔ Culture de l’innovation➔ Être pionnier➔ Faire évoluer l’existant
Structure d’un composant
➔ Custom Elements➔ HTML Templates➔ HTML Imports➔ Shadow DOM
Architecture
Composabilité
<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
Stack existante
Implémentation
➔ Retour AJAX HTML vers JSON
AVANT
APRÈS
Quiz classique
Création de 6 jeux Polymer
16 octobre : Lancement officiel
Timeline
25 Juin 2014Découverte du Material Design
ProduitTests de faisabilitéavec Polymer
Jui Août Sept Oct Nov Déc
StagiairesCréationd’un prototypede Quiz
StagiairesCréation des 6 jeux
TechAppropriationDebug
ProduitTests en PreprodDebug
16 Oct 2014Lancement
1er Déc 2014Explosion del’audience
BUGFB Mobile
BUGInternet Explorer
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);
}
Euréka !
➔ Bug CORS : Certaines versions de webkit➔ Pull request sur webcomponentsjs
Code review / Debug
function foo () {
var container = this.parentElement;
if (!container) {
setTimeout(foo, 250);
} else {
… }
}
➔ #stagiaires
Bug IE = Facebook bashing
➔ Peu testé + Disclaimer cassé➔ Canaliser les utilisateurs IE (3%)➔ Fallback de certains jeux
Retombées
Erreurs commises
1. Prototype ≠ Produit2. Encadrement des Stagiaires 3. Code review tardive4. Phase de transfert trop courte5. Minimiser l’impact d’IE6. Ne pas briefer l’équipe Sales
Défi relevé !
➔ Décembre 2014
40%
Participations Polymer
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
Avant de vous lancer
1. Prenez du recul2. Définissez votre besoin3. Suivez l’activité du projet4. Estimez l’impact5. Préparez des alternatives6. Testez tout !
MERCIPS : On recrute !
Javascript DeveloperCDI, stage, contrat pro
Kontestapp.com/fr/jobs
Ecmascript 6➔ AngularJS ➔ NodeJS