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