Panorama des tendances, nouvelles normes, conseils précieux aux développeurs… Entre front, back et design, le Blend Web Mix offre chaque année un cocktail très prisé de technologies et de savoir-faire.

1. Compte rendu sur le
Blend Web Mix

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

3. Le Blend Web Mix

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

5. ES6
ECMAScript 2015
Inspiré de la conférence de Christophe Porteneuve et Matthieu Lux

6. ES6
Spécification de langage JS
Successeur de ES5 (Compatible 96,5% de navigateurs)
ES6 est :
Plus facile
Plus puissant
Plus fiable
Plus performant

7. Ce que l’on attend de ES6

9. 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’univers
1 Quasi tout… mais pas complètement tout

10. Les nouveautés de ES6

11. Let
if (true) {
var foo = 1;
let bar = 2;
}
console.log(foo);
// 1
console.log(bar);
// ReferenceError: bar is not defined

12. Const
var foo = 1;
const bar = 2;
foo = 3;
// foo === 3
bar = 4;
// Line 6: "bar" is read-only

13. 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}`;

14. Attention les yeux !!

15. Class
class Foo extends Bar {
constructor() {
console.log('constructor');
super();
}
bar() {
console.log('bar');
}
}

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

17. 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;
});
}
}

18. Mais ES6, c’est aussi...

19. Modules
// foo.js
export const foo = 42;
export const log = console.log;
// bar.js
import foo from './foo';
foo.log(foo.foo); // => 42

20. Destructuration
let [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

21. Modules + destructuration
// foo.js
export const foo = 42;
export const log = console.log;
// bar.js
import { foo, log } from './foo';
log(foo); // => 42

22. Promesses
// Callback
xhr(options, (response) => {
// do something
});
// Promise
const promise = xhr(option);
promise.then((response) => {
// do something
});

23. En extra

24. Valeur par défaut
function todos(state = initialState, action) {
…
}

25. 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
}

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

27. Pour aller plus loin
https://babeljs.io/
https://gist.github.com/tdd

28. Flexbox
Inspiré de la conférence de Raphaël Goetter

29. L’alignement vertical
c’est embêtant.
Oui, mais ça c’était avant ...

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

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

32. Distribution : flex-direction
column-reverse column row (default)
La “flex-direction” sert de déclaration pour l’axe principal
row-reverse

33. Distribution : flex-direction
flex-wrap (ou wrap-reverse)

34. Ordonnancement : flex-order
order : <integer>
order: -1;
order: 1;

35. Alignement : justify-content (axe principal)
centerflex-end space-between space-around

36. Alignement : align-items (axe secondaire)

37. Alignement : align-self
align-self: flex-end;
align-self: center;

38. Flex & margin auto
margin-left: auto;
.parent{ display: flex;}

39. Flexibilité : flex-grow
width: X px; width: X px;
flex-grow: 1;

40. Flexibilité : flex-shrink
width: X px; width: X px;
flex-shrink: 1;

41. Flexibilité : flex-basis
flex-basis: X px; flex-basis: X px;
flex-grow: 1;

42. Flexibilité : flex

43. Flexibilité : flex

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

45. Problem Solved !
Mais c’est pas grave ! (source : w3schools)

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

47. Drupal 8
Inspiré de la conférence de Léon Cros

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

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

50. Les nouveautés

51. Pour les utilisateurs

52. Amélioration de l’expérience de rédaction

53. Amélioration de l’expérience de rédaction
Un Wysiwyg (CKEditor)
dans le Core !

54. Amélioration de l’expérience de rédaction
Nouvelle interface pour la
création de contenus

55. Mobile first !

56. Édition inline

57. Gonflé à block !
Tout est block dans D8 !

58. Champs de données améliorés
Nouveau type de champs pour vos
contenus personnalisés :
Des nouveaux champs : Date, Link, Phone,
Email, Comments!

59. Des forms custom
Customisez l’apparence des vos formulaires !

60. 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 !

61. Nouvelle interface d’administration

62. Multilangue
Lui aussi, dans le core !
Possibilité d’assignation
de langues,

63. Multilangue Traduisez (à peu près) tout !
lol té nul
droupalle
mdr

64. Pour les designers

65. HTML5 Tous les templates en HTML5 !
Éléments de
formulaires en
HTML5 aussi !

66. Nouvelles librairies Front

67. Pour les développeurs

68. Les nouveautés
Fichier de configuration en YML
Intégration de Drush pour les automations
Intégration de Web Services
Symfony !
...

69. Symfony
HttpFoundation
HttpKernel
Dependency
Injection
EventDispatcher
Routing
Yaml

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

71. Sortie officielle
19 NOVEMBRE
2015

72. Ionic
Inspiré de la conférence de Stéphanie Moallic

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

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

75. 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)

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

77. Et dans un navigateur ?
$ ionic serve

78. Ionic Lab

79. Composants d’UI

80. Listes

81. Listes avec icônes

82. Checkbox

83. Grid

84. Pour aller plus loin :
http://ionicframework.com/
http://ionicframework.com/present-ionic/slides/
http://ionicframework.com/docs/components
http://lab.ionic.io/

85. JS : Stack overdose ?
Inspiré de la conférence de Nicolas Chambrier

86. Dependency overflow
De nos jours, beaucoup de projets ont des dépendances à
foison.
Difficile de tout gérer et retenir !

87. 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 !

88. C’était mieux avant ?
Versionning en dossier  Maintenant : Git
Déploiement avec Filezilla  Maintenant : Git

89. 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é…

90. OK, mais JavaScript ?
Un nouveau framework tous les 15 jours !
Des librairies par milliers !
Des outils en pagaille !
javascripting.com

91. OK, mais JavaScript ?
Les Frameworks :
Angular
React
Backbone
Ember
Ionic
Polymer
Rx JS
Riotjs
Knockout
Aurelia
...

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

93. On n’en peut plus
Tant d'outils, c'est ingérable, sans compter que de
nouveaux apparaissent chaque jour…

94. Aide au tri : quelques conseils
pour ne pas se perdre

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

96. 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é

97. 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é

98. 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é

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

100. Conclusion
Vous voulez voir ma stack ?
npm
Babel
Lodash ( Manipulation d’objets et collection en JS)
Angular ou React