Polymer en production : On a osé !
-
Upload
kontest -
Category
Engineering
-
view
11.817 -
download
3
Transcript of Polymer en production : On a osé !
![Page 1: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/1.jpg)
Polymer en productionOn a osé !
Sylvain WeberCEO / Co-fondateur, Kontest@sylvainw
Etienne de DieuleveultWeb developer, Kontest@TinOo512
![Page 2: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/2.jpg)
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
![Page 3: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/3.jpg)
Google IO25 Juin 2014
![Page 4: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/4.jpg)
Découverte de Topeka
Polymer-topeka.appspot.comPolymer-topeka.appspot.com
![Page 5: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/5.jpg)
Material Design
![Page 6: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/6.jpg)
Innovations
![Page 7: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/7.jpg)
Pourquoi Polymer ?
➔ Material Design➔ Web components➔ Culture de l’innovation➔ Être pionnier➔ Faire évoluer l’existant
![Page 8: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/8.jpg)
Structure d’un composant
➔ Custom Elements➔ HTML Templates➔ HTML Imports➔ Shadow DOM
![Page 9: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/9.jpg)
Architecture
![Page 10: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/10.jpg)
Composabilité
![Page 11: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/11.jpg)
<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
![Page 12: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/12.jpg)
Stack existante
![Page 13: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/13.jpg)
Implémentation
➔ Retour AJAX HTML vers JSON
AVANT
APRÈS
![Page 14: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/14.jpg)
Quiz classique
![Page 16: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/16.jpg)
Création de 6 jeux Polymer
![Page 17: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/17.jpg)
16 octobre : Lancement officiel
![Page 18: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/18.jpg)
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
![Page 19: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/19.jpg)
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);
}
![Page 20: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/20.jpg)
Euréka !
➔ Bug CORS : Certaines versions de webkit➔ Pull request sur webcomponentsjs
![Page 21: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/21.jpg)
Code review / Debug
function foo () {
var container = this.parentElement;
if (!container) {
setTimeout(foo, 250);
} else {
… }
}
➔ #stagiaires
![Page 22: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/22.jpg)
Bug IE = Facebook bashing
➔ Peu testé + Disclaimer cassé➔ Canaliser les utilisateurs IE (3%)➔ Fallback de certains jeux
![Page 23: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/23.jpg)
Retombées
![Page 24: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/24.jpg)
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
![Page 25: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/25.jpg)
Défi relevé !
➔ Décembre 2014
40%
Participations Polymer
![Page 26: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/26.jpg)
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
![Page 27: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/27.jpg)
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 !
![Page 28: Polymer en production : On a osé !](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a824911a28abe66f8b45e6/html5/thumbnails/28.jpg)
MERCIPS : On recrute !
Javascript DeveloperCDI, stage, contrat pro
Kontestapp.com/fr/jobs
Ecmascript 6➔ AngularJS ➔ NodeJS