compte rendu blend web mix 2015
TRANSCRIPT
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