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

Quiz Polymer

Demo : quiz-polymer.xg1.li

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