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
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
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