Retour sur dotCSS et dotJS 2016

Cet article co-rédigé par moi-même et Anthony a pour but de résumer, avec notre point de vue, les différentes présentations auxquelles nous avons assisté durant les deux jours des conférences dotCSS et dotJS (les 2 et 5 décembre 2016).

Les informations, slides et vidéos des sessions sont ou seront diffusées par l’équipe dotconference sur thedotpost. Les photos sont elles sur les albums flickers : dotCSS et dotJS.

dotCSS

dotCSS est la petite soeur de dotJS. Elle avait lieu cette année dans le magnifique Théâtre des Variétés.

  • Varya Stepanova @varya_en : Pattern libraries through trial and error

Varya nous fait un retour d’expériences sur les différents choix qu’elle a réalisé ces dernières années au sein de Yandex ou de son entreprise actuelle SC5. Ses missions abordaient la conception de chartes UI unifiée (plusieurs centaines d’applications web chez Yandex par exemple). Elle nous présente ses solutions (librairies de composants, …) et leurs limites (impacts des mises à jour des librairies sur les applications).

Ce qu’on a retenu : Le living styleguide est le meilleur choix pour mettre en place, maintenir et partager une charte UI entre plusieurs applications / équipes.

Le talk de Wenting démarre par une session live coding inspirée par deux passions : le dessin et… les moustaches ! Le défi est de réaliser une moustache en CSS à partir d’un seul élément HTML et une seule classe CSS. Passage en revue des pseudo éléments :before et :after ainsi que de la propriété box-shadow. La cerise sur le gâteau : l’animation de la moustache !
Au delà de la performance, le message était de s’amuser dans ce qu’on fait, de le partager aux autres (le mettre à disposition pour qu’ils se l’approprient), comme elle le fait dans ses projets personnels comme CSS ICON.

Le plus : la passion

  • Philip Walton @philwalton : The Dark Side of Polyfilling CSS

Suite à la publication de son article sur Smashing Magazine sur le projet Houdini (réflexions sur les possibilités d’extension du CSS), Phil veut nous sensibiliser à la complexité de créer des polyfills CSS. Et pour cela, quoi de mieux que d’en créer un devant nous !
L’exemple qu’il a choisi est d’implémenter une fonction “random”, keyword CSS qui n’existe pas (encore). Pour cela, il nous montre toutes les astuces Javascript du “polyfiller” (accès au css via l’objet document, parser css, recherche / remplacement, …).

En parvenant parfois (et volontairement) à nous perdre et en appuyant sur les points sensibles (performances), il a sans difficulté réussi à nous convaincre. Démonstration très efficace ! 
Le plus : l’humour.

Après un état des lieux des différents clients mail du marché et de leurs différences (absence de normes), Kevin nous parle de ses activités quotidiennes : La création d’emails riches, et compatibles avec la majorité des clients.
Les exemples cités vont de l’adaptation de layouts à l’ajout de dynamisme avec CSS (utilisation des checkbox et de leur propriété css checked, …).
Les dernières évolutions des clients mail sont prometteuses et nous devrions rapidement voir débarquer de véritables applications web dans des emails, comme l’exemple de la boutique + shopping cart déjà expérimenté.
Le plus : Dynamisme

Chris est directeur technique au W3C. Il passe en revue les derniers sujets en cours et les nouveautés de CSS 4. En plus des avancées autour de la structuration, nous retiendrons des sujets autour des fonts et de l’encodage.

Le plus : Charismatique

Dans ce talk, Lea fait un focus sur les variables CSS et nous présente différents cas d’utilisation. Des possibilités intéressantes et qui ne viennent pas en remplacement des variables déjà existantes des “préprocesseurs”… elles sont bien complémentaires !

Val est une experte des animations. En plus de ses publications (Designing Interface Animation chez Rosenfeld), elle propose des workshops sur ce sujet.

Durant son talk, elle nous démontre plusieurs patterns d’animation (rebond, accélération, …), en évoquant les modèles mathématiques sous-jacents (courbes de bezier, …).

C’est le créateur du CSS lui-même qui a clos cette édition 2016 de dotCSS. Après être revenu sur les origines du CSS et sur les motivations qui l’ont amené à créer ce langage avec ses collaborateur de l’époque, il a exposé plusieurs sujets d’actualités en mettant en valeur la communauté actuelle.

Enfin, il nous fait part de sa vision pour le futur du CSS en s’appuyant sur ce qui a motivé sa création : le CSS n’est pas uniquement destiné aux écrans ou au web ! A travers le projet Gutenberg, il partage ses réflexions sur l’utilisation du CSS pour la mise en forme dans l’édition de livres.

Finalement, il n’y a aucune limite à l’utilisation du CSS pour décrire le monde réel. A quand des design automobiles ou de bâtiments décrits en CSS ?

  • Lightning talks :

Plusieurs lightning talks (4min) sont venus ponctuer la journée. Des sujets variés comme la réalisation du logo de la conférence en pur CSS (@pixelastic), ou une réflexion sur le manque de diversité dans le design web actuel (@cssence).

dotJS

dotJs, une des plus importante conférence Javascript en Europe s’est déroulé le 5 décembre dernier à Paris. De nombreux partenaires étaient présents tels que Github, Mozilla ou PhoneGap.

  • Nolan Lawson @nolanlawson : Service Worker and the Appification of the Web

Présentation et points de vue de Nolan Lawson (team Microsoft Edge) sur les concepts des progressive web apps. Ce dernier nous présente le fonctionnement et la puissance des Service Workers ainsi que les nouvelles fonctionnalités supportées par le navigateur Edge. Ce sont aujourd’hui de réels éléments sur lesquels s’appuyer pour concevoir des applications web.

Ada Rose de chez Samsung présente les dernières évolutions en termes de réalité virtuelle comme le nouveau standard WebVR. Comment et pourquoi les utiliser sont les différents thèmes abordés durant cette présentation. Elle lance aussi un appel aux contributeurs, qu’ils soient expérimentés ou débutants, pour aider à conserver des standards simples et adaptés au web.

Le plus : Le thème VR

Christophe fait un tour d’horizon des transpilers Javascript : Typescript, Babel, Flow, … Il nous présente leurs nouveautés et leurs limites. Ces outils doivent servir d’accélérateurs à l’adoption des normes Ecmascript (6, 7) (par les navigateurs).

Le talk de Guy expose les techniques utilisées par les “modules loaders” et leurs optimisations. En tant que créateur de SystemJS, il nous parle de l’universalité de ce composant et de sa compatibilité avec les Web Assembly.

  • Zeke Sikelianos @zeke: Navigating JavaScript Userland

Zeke retrace l’évolution des outils de l’écosystème Javascript. Des packages managers aux générateurs de projets, Zeke nous parle des outils les plus populaires du moment : npm et yarn. Une réflexion très intéressante concerne les raisons de l’éclosion d’un outil comme yarn face au leader npm, qui possède des similitudes avec celles qui ont motivé la création d’io.js, face à node.js (intégration d’améliorations par la communauté et accélération des releases). Est-ce npm va suivre le mouvement et condamnera yarn à un futur à la io.js ?

  • Evan You @youyuxi: Reactivity in Frontend JavaScript Frameworks

Evan, ex-googler et créateur de Vue.js, nous présente les différentes approches de ce framework. Il nous montre comment son framework (et les frameworks similaires comme Meteor par exemple) détectent les changements et propagent les événements au reste du système. Vue.js avec son approche “reactive” se rapproche très fortement de React.js, lui aussi très en “vue” en ce moment.

  • Fedot Indutny @indutny : Memory Layout of V8’s heap

Ingénieur chez Paypal, il est aussi membre très actif de la core team nodejs. Durant la présentation, il nous montre comment inspecter le moteur V8 (moteur Javascript de Chrome) afin d’améliorer les performances (fuites mémoire, memory swap). Sans aucun doute le talk le plus technique de la journée !

Deux fans de musiques électro et développeurs Javascript se rencontrant sur un projet de développement d’outil Web audio et vidéo : @LiveJS_network. Exploitation de composants MIDI, visualisation en temps réel et contrôles de lumières ont été exploités durant un live très rythmé.

Le plus : Fun

  • Guillermo rauch @rauchg : Universal Javascript

Guillermo est le fondateur de Zeit.co et créateur de nombreuses librairies js comme socket.io ou mongoose par exemple. Il nous parle d’une des créations de Zeit : Next.js. C’est un framework permettant le “rendu-serveur” d’applications React.

En tant que lead Angular, Igor fait une rétrospective du framework, de sa création à aujourd’hui. Il évoque les principaux jalons de l’histoire d’Angular et les inspirations récentes.

Igor prône la communication, l’échange avec les contributeurs des autres frameworks. Il s’appuie pour cela sur l’expérience d’Angular qui collabore régulièrement avec l’équipe Typescript (Microsoft) ou même React (Facebook), ou plus ponctuellement comme avec l’équipe Ember pour la création d’Angular-cli.

L’important est de garder l’esprit ouvert tout en gardant une ligne directrice et des convictions. Il y a plein de frameworks, tant mieux utilisez les !

Le plus : #itsjustangular

  • Lightning talks :

Plusieurs lightning talks ont aussi ponctué la journée. Nous avons par exemple retenu les passages très intéressants de Vladimir de Turkheim sur les injections nosql avec nodejs et mongodb, et de Thomas Belin sur cycle.js et le functional reactive programming.

Article co-rédigé par Jerome et Anthony, tech leads à Sopra Steria

Like what you read? Give Jerome Gauthier a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.