Compte rendu sur le

Blend Web Mix

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

Le Blend Web Mix

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

ES6ECMAScript 2015

Inspiré de la conférence de Christophe Porteneuve et Matthieu Lux

ES6

Spécification de langage JS

Successeur de ES5 (Compatible 96,5% de navigateurs)

ES6 est :

Plus facile

Plus puissant

Plus fiable

Plus performant

Ce que l’on attend de ES6

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

Les nouveautés de ES6

Let

if (true) {

var foo = 1;

let bar = 2;

}

console.log(foo);

// 1

console.log(bar);

// ReferenceError: bar is not defined

Const

var foo = 1;

const bar = 2;

foo = 3;

// foo === 3

bar = 4;

// Line 6: "bar" is read-only

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

Attention les yeux !!

Class

class Foo extends Bar {

constructor() {

console.log('constructor');

super();

}

bar() {

console.log('bar');

}

}

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

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;

});

}

}

Mais ES6, c’est aussi...

Modules

// foo.js

export const foo = 42;

export const log = console.log;

// bar.js

import foo from './foo';

foo.log(foo.foo); // => 42

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

Modules + destructuration

// foo.js

export const foo = 42;

export const log = console.log;

// bar.js

import { foo, log } from './foo';

log(foo); // => 42

Promesses

// Callback

xhr(options, (response) => {

// do something

});

// Promise

const promise = xhr(option);

promise.then((response) => {

// do something

});

En extra

Valeur par défaut

function todos(state = initialState, action) {

…

}

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

}

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

Pour aller plus loin

https://babeljs.io/

https://gist.github.com/tdd

Flexbox

Inspiré de la conférence de Raphaël Goetter

L’alignement vertical

c’est embêtant.

Oui, mais ça c’était avant ...

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

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.

Distribution : flex-direction

column-reverse column row (default)

La “flex-direction” sert de déclaration pour l’axe principal

row-reverse

Distribution : flex-direction

flex-wrap (ou wrap-reverse)

Ordonnancement : flex-order

order : <integer>

order: -1;

order: 1;

Alignement : justify-content (axe principal)

centerflex-end space-between space-around

Alignement : align-items (axe secondaire)

Alignement : align-self

align-self: flex-end;

align-self: center;

Flex & margin auto

margin-left: auto;

.parent{ display: flex;}

Flexibilité : flex-grow

width: X px; width: X px;

flex-grow: 1;

Flexibilité : flex-shrink

width: X px; width: X px;

flex-shrink: 1;

Flexibilité : flex-basis

flex-basis: X px; flex-basis: X px;

flex-grow: 1;

Flexibilité : flex

Flexibilité : flex

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

Problem Solved !

Mais c’est pas grave ! (source : w3schools)

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

Drupal 8

Inspiré de la conférence de Léon Cros

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.

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.

Les nouveautés

Pour les utilisateurs

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

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

Un Wysiwyg (CKEditor)

dans le Core !

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

Nouvelle interface pour la

création de contenus

Mobile first !

Édition inline

Gonflé à block !

Tout est block dans D8 !

Champs de données améliorés

Nouveau type de champs pour vos

contenus personnalisés :

Des nouveaux champs : Date, Link, Phone,

Email, Comments!

Des forms custom Customisez l’apparence des vos formulaires !

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 !

Nouvelle interface d’administration

Multilangue

Lui aussi, dans le core !

Possibilité d’assignation

de langues,

Multilangue Traduisez (à peu près) tout !

lol té nul

droupalle

mdr

Pour les designers

HTML5 Tous les templates en HTML5 !

Éléments de

formulaires en

HTML5 aussi !

Nouvelles librairies Front

Pour les développeurs

Les nouveautés

Fichier de configuration en YML

Intégration de Drush pour les automations

Intégration de Web Services

Symfony !

...

Symfony

HttpFoundation

HttpKernel

Dependency

Injection

EventDispatcher

Routing

Yaml

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

Sortie officielle

19 NOVEMBRE 2015

Ionic

Inspiré de la conférence de Stéphanie Moallic

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

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

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)

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

Et dans un navigateur ?

$ ionic serve

Ionic Lab

Composants d’UI

Listes

Listes avec icônes

Checkbox

Grid

Pour aller plus loin :

http://ionicframework.com/

http://ionicframework.com/present-ionic/slides/

http://ionicframework.com/docs/components

http://lab.ionic.io/

JS : Stack overdose ?

Inspiré de la conférence de Nicolas Chambrier

Dependency overflow

De nos jours, beaucoup de projets ont des dépendances à

foison.

Difficile de tout gérer et retenir !

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 !

C’était mieux avant ?

Versionning en dossier Maintenant : Git

Déploiement avec Filezilla Maintenant : Git

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

OK, mais JavaScript ?

Un nouveau framework tous les 15 jours !

Des librairies par milliers !

Des outils en pagaille !

javascripting.com

OK, mais JavaScript ?

Les Frameworks :

Angular

React

Backbone

Ember

Ionic

Polymer

Rx JS

Riotjs

Knockout

Aurelia

...

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

On n’en peut plus

Tant d'outils, c'est ingérable, sans compter que de

nouveaux apparaissent chaque jour…

Aide au tri : quelques conseils pour ne pas se perdre

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

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é

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é

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é

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

Conclusion

Vous voulez voir ma stack ?

npm

Babel

Lodash ( Manipulation d’objets et collection en JS)

Angular ou React