compte rendu blend web mix 2015
TRANSCRIPT
![Page 1: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/1.jpg)
Compte rendu sur le
Blend Web Mix
![Page 2: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/2.jpg)
Sommaire
Présentation rapide du Blend Web Mix
Nos coups de coeur
ES6
Flexbox
Nous allons adorer vous parler de :
Drupal 8
Ionic
Comment gérer sa stack
![Page 3: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/3.jpg)
Le Blend Web Mix
![Page 4: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/4.jpg)
Rapide présentation en chiffres
15 000 tweets
3000 tweets de personnes uniques
1 800 participants par jour
70 conférences
100 speakers
1 concours de startups
2 hackathons
1 “startups alley”
1 soirée networking
![Page 5: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/5.jpg)
ES6ECMAScript 2015
Inspiré de la conférence de Christophe Porteneuve et Matthieu Lux
![Page 6: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/6.jpg)
ES6
Spécification de langage JS
Successeur de ES5 (Compatible 96,5% de navigateurs)
ES6 est :
Plus facile
Plus puissant
Plus fiable
Plus performant
![Page 7: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/7.jpg)
Ce que l’on attend de ES6
![Page 8: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/8.jpg)
![Page 9: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/9.jpg)
Heureusement Babel est là
Transpile ES6+1 (ES6, ES7…) en ES5
Du coup, si tu as ES5, tu peux y aller
En pratique : IE9+, tous navigateurs modernes,
Node.js
Intégré avec l’univers1 Quasi tout… mais pas complètement tout
![Page 10: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/10.jpg)
Les nouveautés de ES6
![Page 11: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/11.jpg)
Let
if (true) {
var foo = 1;
let bar = 2;
}
console.log(foo);
// 1
console.log(bar);
// ReferenceError: bar is not defined
![Page 12: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/12.jpg)
Const
var foo = 1;
const bar = 2;
foo = 3;
// foo === 3
bar = 4;
// Line 6: "bar" is read-only
![Page 13: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/13.jpg)
Template string
const foo = "string with double quote";
const bar = 'string with simple quote';
const fooBar = `string with back tick!
multiline!!
with interpolation ${foo} ${bar}`;
![Page 14: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/14.jpg)
Attention les yeux !!
![Page 15: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/15.jpg)
Class
class Foo extends Bar {
constructor() {
console.log('constructor');
super();
}
bar() {
console.log('bar');
}
}
![Page 16: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/16.jpg)
Fonctions fléchées
let foo = (arg1, arg2) => {
console.log('foo called', arg1, arg2);
};
foo(1, 2); // foo called 1 2
foo = onlyOneArg => {
console.log('foo called', onlyOneArg);
}
foo(1); // foo called 1
foo = onlyOneArg => onlyOneArg + 1;
console.log(foo(1)); // 2
![Page 17: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/17.jpg)
Fonctions fléchées
class Foo {
constructor() {
this.values = [1, 2, 3, 4, 5];
this.increment = 42;
this.values.map((value) => {
return value + this.increment;
});
}
}
![Page 18: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/18.jpg)
Mais ES6, c’est aussi...
![Page 19: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/19.jpg)
Modules
// foo.js
export const foo = 42;
export const log = console.log;
// bar.js
import foo from './foo';
foo.log(foo.foo); // => 42
![Page 20: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/20.jpg)
Destructurationlet [a, b] = [1, 2];
console.log(a, b); //=> 1 2
var foo = () => [1, 2, 3];
var [a, , b] = foo();
console.log(a, b);// => 1 3
var {user: x} = {user: 5};
console.log(x); // => 5
var { prop, prop2 } = {prop: 5, prop2: 10};
console.log(prop, prop2); // => 5 10
![Page 21: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/21.jpg)
Modules + destructuration
// foo.js
export const foo = 42;
export const log = console.log;
// bar.js
import { foo, log } from './foo';
log(foo); // => 42
![Page 22: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/22.jpg)
Promesses
// Callback
xhr(options, (response) => {
// do something
});
// Promise
const promise = xhr(option);
promise.then((response) => {
// do something
});
![Page 23: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/23.jpg)
En extra
![Page 24: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/24.jpg)
Valeur par défaut
function todos(state = initialState, action) {
…
}
![Page 25: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/25.jpg)
Valeur par défaut
let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
console.log(i); // => 0 1 2 foo
}
for (let i of arr) {
console.log(i); // => 3 5 7
}
![Page 26: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/26.jpg)
Rest and spread
function foo(...args) {
console.log(args.length);
}
foo(); // => 0
foo(5); // => 1
foo(5, 6, 7); // => 3
foo(...[0, 1, 2]); // => 3
![Page 27: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/27.jpg)
Pour aller plus loin
https://babeljs.io/
https://gist.github.com/tdd
![Page 28: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/28.jpg)
Flexbox
Inspiré de la conférence de Raphaël Goetter
![Page 29: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/29.jpg)
L’alignement vertical
c’est embêtant.
Oui, mais ça c’était avant ...
![Page 30: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/30.jpg)
En résumé :
1. Distribution (flex-direction)
1. Ordonnancement (order)
1. Alignement (justify-content, align-items, align-self)
1. Flexibilité (flex, flex-grow, flex-shrink, flex-basis)
1. Problem solved
![Page 31: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/31.jpg)
Des définitions
Conteneur flex (Flex container)
L'élément parent dans lequel chaque éléments flex sera contenu. Un conteneur flex est défini lorsque la propriété display possède la valeur
flex ou inline-flex.
Élément flex (Flex item)
Chaque enfant d'un conteneur flex devient un élément flex. Le texte directement contenu dans un conteneur flex est englobé dans un
élément flex anonyme.
![Page 32: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/32.jpg)
Distribution : flex-direction
column-reverse column row (default)
La “flex-direction” sert de déclaration pour l’axe principal
row-reverse
![Page 33: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/33.jpg)
Distribution : flex-direction
flex-wrap (ou wrap-reverse)
![Page 34: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/34.jpg)
Ordonnancement : flex-order
order : <integer>
order: -1;
order: 1;
![Page 35: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/35.jpg)
Alignement : justify-content (axe principal)
centerflex-end space-between space-around
![Page 36: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/36.jpg)
Alignement : align-items (axe secondaire)
![Page 37: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/37.jpg)
Alignement : align-self
align-self: flex-end;
align-self: center;
![Page 38: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/38.jpg)
Flex & margin auto
margin-left: auto;
.parent{ display: flex;}
![Page 39: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/39.jpg)
Flexibilité : flex-grow
width: X px; width: X px;
flex-grow: 1;
![Page 40: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/40.jpg)
Flexibilité : flex-shrink
width: X px; width: X px;
flex-shrink: 1;
![Page 41: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/41.jpg)
Flexibilité : flex-basis
flex-basis: X px; flex-basis: X px;
flex-grow: 1;
![Page 42: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/42.jpg)
Flexibilité : flex
![Page 43: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/43.jpg)
Flexibilité : flex
![Page 44: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/44.jpg)
Problem Solved !
Mais il y a quand même quelques limites …
Safari 3.1
IE10
Android 2.1
Chrome 4
Firefox 2
Opera 12.1
![Page 45: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/45.jpg)
Problem Solved !
Mais c’est pas grave ! (source : w3schools)
![Page 46: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/46.jpg)
Best Links Ever
Guide : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Sandbox : http://bennettfeely.com/flexplorer/
Debug : http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
https://github.com/philipwalton/flexbugs/
Prefixer : https://github.com/mastastealth/sass-flex-mixin/blob/master/_flexbox.scss
![Page 47: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/47.jpg)
Drupal 8
Inspiré de la conférence de Léon Cros
![Page 48: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/48.jpg)
Qu’est-ce que Drupal ?
Drupal est un système de gestion de contenu open source
maintenu et développé par une communauté de plus de
35000 développeurs du monde entier qui ont contribué au
projet.
Il est distribué sous les termes de la GNU « General Public
License » ou «GPL», qui signifie que toute personne est libre
de le télécharger et de partager avec d'autres.
![Page 49: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/49.jpg)
Drupal 8 ?
Drupal 8 est la dernière version en date de Drupal, elle est
sensiblement plus puissante que les versions précédentes.
Drupal 8 offre de nouvelles façons d'adapter et de déployer
du contenu sur n'importe quel appareil.
![Page 50: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/50.jpg)
Les nouveautés
![Page 51: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/51.jpg)
Pour les utilisateurs
![Page 52: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/52.jpg)
Amélioration de l’expérience de rédaction
![Page 53: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/53.jpg)
Amélioration de l’expérience de rédaction
Un Wysiwyg (CKEditor)
dans le Core !
![Page 54: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/54.jpg)
Amélioration de l’expérience de rédaction
Nouvelle interface pour la
création de contenus
![Page 55: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/55.jpg)
Mobile first !
![Page 56: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/56.jpg)
Édition inline
![Page 57: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/57.jpg)
Gonflé à block !
Tout est block dans D8 !
![Page 58: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/58.jpg)
Champs de données améliorés
Nouveau type de champs pour vos
contenus personnalisés :
Des nouveaux champs : Date, Link, Phone,
Email, Comments!
![Page 59: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/59.jpg)
Des forms custom Customisez l’apparence des vos formulaires !
![Page 60: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/60.jpg)
Views
● Présent dans le core
● Toutes les pages sont des
views (même la home page
et le back office !)
● Possibilité de personnaliser :
○ contenu des sidebar
○ galleries d’images
○ slideshows
○ REST output
Et tout ça, sans coder une ligne !
![Page 61: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/61.jpg)
Nouvelle interface d’administration
![Page 62: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/62.jpg)
Multilangue
Lui aussi, dans le core !
Possibilité d’assignation
de langues,
![Page 63: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/63.jpg)
Multilangue Traduisez (à peu près) tout !
lol té nul
droupalle
mdr
![Page 64: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/64.jpg)
Pour les designers
![Page 65: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/65.jpg)
HTML5 Tous les templates en HTML5 !
Éléments de
formulaires en
HTML5 aussi !
![Page 66: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/66.jpg)
Nouvelles librairies Front
![Page 67: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/67.jpg)
Pour les développeurs
![Page 68: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/68.jpg)
Les nouveautés
Fichier de configuration en YML
Intégration de Drush pour les automations
Intégration de Web Services
Symfony !
...
![Page 69: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/69.jpg)
Symfony
HttpFoundation
HttpKernel
Dependency
Injection
EventDispatcher
Routing
Yaml
![Page 70: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/70.jpg)
Pour aller plus loin
https://www.drupal.org/drupal-8.0
https://drupal.org/list-changes
Drupal 8: What You Need To Know
Développer son module Drupal
![Page 71: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/71.jpg)
Sortie officielle
19 NOVEMBRE 2015
![Page 72: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/72.jpg)
Ionic
Inspiré de la conférence de Stéphanie Moallic
![Page 73: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/73.jpg)
Qu’est ce que IONIC ?
Création d’applications IOS / Android / Windows Phone
HTML5 / CSS3 / JS
S’appuie sur AngularJS pour la partie application
Accès direct à l’API native avec Cordova
Open source
![Page 74: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/74.jpg)
Créer une application multiplateforme ? Rien de plus simple !
Créer une application Ionic en 2 minutes :
Nécessite le SDK appropié (SDK Java , SDK Android, IOS SDK ...)
Ionic s’appuie sur NodeJS, pour l’installer :
$ npm install -g ionic cordova
Possibilité de partir d’un template :
$ ionic start MySideMenuApp sidemenu
![Page 75: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/75.jpg)
Les templates Ionic Framework
3 templates disponibles :
Tabs (application avec des onglets, template par défaut)
Sidemenu (application avec un menu sur le côté)
blank (application vide)
![Page 76: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/76.jpg)
Et du coup ?
Du coup :
Et du coup on a fini !
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
$ cd myApp
$ ionic platform add
android
$ ionic build android
$ ionic emulate android
$ cd myApp
$ ionic platform add
windows
$ ionic build windows
$ ionic emulate windows
![Page 77: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/77.jpg)
Et dans un navigateur ?
$ ionic serve
![Page 78: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/78.jpg)
Ionic Lab
![Page 79: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/79.jpg)
Composants d’UI
![Page 80: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/80.jpg)
Listes
![Page 81: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/81.jpg)
Listes avec icônes
![Page 82: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/82.jpg)
Checkbox
![Page 83: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/83.jpg)
Grid
![Page 84: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/84.jpg)
Pour aller plus loin :
http://ionicframework.com/
http://ionicframework.com/present-ionic/slides/
http://ionicframework.com/docs/components
http://lab.ionic.io/
![Page 85: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/85.jpg)
JS : Stack overdose ?
Inspiré de la conférence de Nicolas Chambrier
![Page 86: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/86.jpg)
Dependency overflow
De nos jours, beaucoup de projets ont des dépendances à
foison.
Difficile de tout gérer et retenir !
![Page 87: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/87.jpg)
C’était mieux avant ?
C’était plus facile !
• Moins de complexité
• Moins d'étapes avant de coder
• Aujourd'hui, le développeur s'éloigne de son code !
![Page 88: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/88.jpg)
C’était mieux avant ?
Versionning en dossier Maintenant : Git
Déploiement avec Filezilla Maintenant : Git
![Page 89: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/89.jpg)
C’était mieux avant ?
C’est plutôt pas mal maintenant :
• Des outils en plus ?
On a remplacé d'anciens outils
• De la complexité en plus ?
À la mise en place des outils
• Des gains ?
Fiabilité, reproductibilité, rapidité…
![Page 90: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/90.jpg)
OK, mais JavaScript ?
Un nouveau framework tous les 15 jours !
Des librairies par milliers !
Des outils en pagaille !
javascripting.com
![Page 91: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/91.jpg)
OK, mais JavaScript ?
Les Frameworks :
Angular
React
Backbone
Ember
Ionic
Polymer
Rx JS
Riotjs
Knockout
Aurelia
...
![Page 92: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/92.jpg)
OK, mais JavaScript ?Les Outils :
Task runners :
Grunt
Gulp
Make
Cake
Broccoli
npm
Transformateurs:
Babel
Browserify
Coffeescript
JSX
Traceur
Typescript
Uglify
...
Package Manager:
Bower
Component
JSPM
Jam
Duo
npm
![Page 93: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/93.jpg)
On n’en peut plus
Tant d'outils, c'est ingérable, sans compter que de
nouveaux apparaissent chaque jour…
![Page 94: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/94.jpg)
Aide au tri : quelques conseils pour ne pas se perdre
![Page 95: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/95.jpg)
Aide au tri
Pas la peine de perdre du temps à explorer de fond en comble toutes les nouveautés.
Identifier le paradigme (binding, flat-file cms, observable, fonctionnel, etc.) et s’il est déjà
connu, pas la peine de creuser.
Dois-je consacrer du temps à cette brique ?
nouveauté-du-paradigme × documentation
![Page 96: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/96.jpg)
Aide au tri
Lors du choix pour un projet on doit creuser, on va s’orienter sur des spécificités entre
solutions (peut-être proches), le "service rendu" entre en ligne de compte.
Il faut aussi s'assurer qu'elle ne devienne pas un poids mort pour le projet.
Cette brique apporte-t-elle une valeur à mon projet ?
service × documentation / complexité
popularité × reprenabilité
![Page 97: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/97.jpg)
Aide au tri
L'outil que je choisi doit améliorer mon quotidien
Quel coût à mettre en place ? Qu’y a-t-il a apprendre ?
service / complexité
![Page 98: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/98.jpg)
Aide au tri
De manière générale une nouvelle brique doit améliorer mon quotidien de
développeur,
L’équation ultime :
valeur = amélioration-quotidien / complexité
![Page 99: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/99.jpg)
Conclusion
Ralentir
Arrêter de regarder partout
Apprendre à filtrer rapidement
Ne pas culpabiliser de rater des trains
MAIS NE PAS S'ARRÊTER
Noter, mettre de côté "pour plus tard" (peut-être jamais, mais qu’importe)
Ne pas réinventer la roue par flemme
![Page 100: Compte rendu Blend Web Mix 2015](https://reader030.vdocuments.site/reader030/viewer/2022020803/587ffd9b1a28ab3a1e8b6897/html5/thumbnails/100.jpg)
Conclusion
Vous voulez voir ma stack ?
npm
Babel
Lodash ( Manipulation d’objets et collection en JS)
Angular ou React