Devoxx 2017, le salon des développeurs passionnés, s’est déroulé au Palais des Congrès avec plus de 2800 participants. Le thème de cette année était l’Intelligence Artificielle. Devoxx, c’est du contenu de qualité, de la motivation et du fun ! C’est très intense, on ne veut rien louper ! Mais, c’est aussi un moment de partage et d’échange avec les autres genevois qui ont fait le déplacement.

Devoxx 2017

Mon classement dans les différentes catégories : Devoxx 2017

J’ai été émue et complètement bluffée par la présentation de Loan Tricot, un lycéen de 17 ans ! Il est également leader d’un hacker club français. Après Devvoxx4Kids, c’est peut-être ça la prochaine étape, avoir des jeunes qui montent des clubs comme cela se fait beaucoup aux US. Très inspirant, comme démarche.

J’ai aussi beaucoup aimé la conférence 10 méthodes pour rendre heureux les développeurs, la 7e va vous étonner ! de Cyril Lakech et Romain Linsolas. C’est important car selon Laurence Vanhée « Les salariés heureux sont 2x moins malades, 6x moins absents, 9x plus loyaux, 31% plus productifs et 55% plus créatifs. »

Voici mes notes :

10 méthodes pour rendre heureux les développeurs, la 7e va vous étonner !

par Cyril Lakech et Romain Linsolas

Utilisation de Sli.do pour poser des questions en direct pendant la présentation.

Devoxx 2017

➔   Investir dès le recrutement: recrutement adapté aux devs, partage de vision, Salaire, Soft skills :

  • Coding game pour le niveau technique
  • Tableau blanc et le mettre sur une problématique
  • Intégrer le plateau de dev pendant 1/2 journée

➔   Proposer une perspective de carrière

  • Valorisation: leader, conférence, Expert techno, multi-techno, leadership, Architecture, management
  • Expérience qui sort du commun, innovant, …
  • Formation
  • Apprendre est le métier du développeur

➔   L’environnement du développeur

  • L’open space m’a tuer !
  • Casser les codes de l’open space
  • Bureaux Flexibles
  • Espace de détente
  • Un bureau adapté à chacun: un bureau debout
  • Du bon matériel !
  • Et du bon soft
  • Ne pas forcement imposer de logiciel aux développeurs.
  • Les 12 règles pour mieux coder de Joël Spolsky
  • Le télétravail

➔     Organiser son travail

  • Feature teams de bout en bout (pizza team)
  • DevOps: Casser les murs

➔   Software Craftsmanship

  • Revue de l’agile (plus pragmatique)
  • Toujours s’entrainer, code review, …
  • Persévérance

➔     Ouverture technologique

  • Radar techno : on présente devant une communauté: Tech Radar Pitch,  et si c’est OK, on fait un POC

➔   S’organiser en communauté

  • Communautés interne (ex: com par techno, par front-end, par tech leader)
  • Partager des valeurs et des visions mais pour cela, il faut donner du temps
  • Des outils collaboratif: Slack, GitHub, …

➔   Contribuer à l’open source

  • Contribution, Co-construction, Réutilisation

➔   Participer au events:

  • BBL (Brown Bag Lunch)
  • Meetups
  • Hackathon
  • Conférences internes
  • Sponsoring

 Building Cloud Native Progressive Web Apps

par Matt Raible et Josh Long

Mais quel show ! Excellent ! Présentation en Live Coding

  • Spring Eureka, facile à utiliser (utilisé par Netflix). Enregistrement des services.
  • Dépendances : Feign (means to pretend), Web, Lombok, Zuul, Rest repositories, etc..
  • Annotation @LoadBalanced, @FeinClient et @EnableFeignClients, @EnableCircuitBreaker, @HytrixCommand, @CrossOrgin(« * »)
  • Introduce resilience on the servers side.
  • Demo pour faire tourner du linux dans un web browser.
  • PRPL Pattern
  • Utilisation de Angular Mobile toolkit
  • Angular app-shell+Material. Yarn télécharge uniquement ce qui est nécessaire contrairement à npm.
  • Les ServiceWorkers permettent de gérer la partie offline : check internet and then cache. Aller voir dans la partie Cache Storage de Google Dev Tools
  • Voir ng-manifest, voir realicongenerator pour générer des icons pour éviter/remplacer les assets que l’on a pas.
  • Utilisation du site CanIUse pour vérifier la compatibilité des browsers

Devoxx 2017

Les Progressive Webapps en pratique

par Emmanuel Demey et Angela Ricci

Très bon Hands OLab. Outil très intéressant pour tester façon audit:  Extension Chrome LightHouse

  • Immersive comme si c’était natif. Pas besoin d’un AppStore.
  • https nécessaire notamment pour les serviceWorker
  • L’audit rappelle ce que l’on a besoin de savoir pour avoir une progressive webapps de qualité.
  • Complètement supporté par Chrome et Opera.
  • Visite Récurrente -> Proposition d’installation.
  • Vous pouvez essayer LightHouse avec le site du palais des congres qui est une Progressive webapps

Mettre en place sa sécurité et sa gestion d’identité en 2017

par Sebastien Blanc de Red Hat

– Identité réelle Vs l’identité numérique

– Services public (France-connect) permet d’accéder à tous les services

– L’authentification doit être solide mais la user expérience doit être simple. Bon équilibre à trouver

– L’utilisateur veut du SSO mais pas facile à faire pour le dev !

– DIY must DIE !

  • Pollution du code
  • MAJ== Je pleure
  • « Bad practices are Bad »
  • 0 économie d’échelle

→ Déléguer sa sécurité !

➢   SAML2:

  • Spec defined in 2005
  • Really big big XMLs
  • Soap !
  • Si vous avez le choix alors ne l’utilisez pas !

➢   OAUTH2

  • c’est un framework
  • ne fait pas d’authentification ou d’autorisation
  • il décrit un protocole de délégation d’accès

➢   OpenID connect

  • surcoupe d’Oauth2
  • défini l’authentification
  • Session management for SSO
  • ID token
  • User info endpoint
  • Discovery and client self registration
  • il fabrique un JWT: JSon Web Token: beaucoup plus compact que du XML

➢  JWT

  • JWS: c’est un JWT signé
  • JWE: c’est un JWS qui peut être encrypté
  • Transport: via le header http Authorization classique

➢   Autres solutions:

  • Auth0
  • AuthRocket
  • StromPath
  • ForgeRock

➢     KeyCloack:   Le speaker fait partie de l’équipe.

  • Out-of the box solution
  • Open source
  • Support SAML2, OpenID et Kerberos
  • Social Login
  • User Federation
  • SSO
  • Gestion des profils utilisateurs
  • Adaptateur Java: Wildfly/Jboss/EAP, Tomcat, Jetty, Spring Boot, Generic Servlet Filter
  • Adapteur JS (compatible cordoba)
  • Adapteur NodeJS
  • Key rotation: le client n’a plus besoin de passer sa clé public (il l’a demande à keycloak et il peut renouveler sa clé )
  • Brute force détection
  • One Time Password (google authenticator, …)

HdrHistogram: l’outil indispensable pour mesurer la latence

par Alexandre Victoor de la Société Générale

  • Librairie Java. Ne fait pas grand chose mais elle le fait bien, adapté au monde de la finance.
  • Le speaker en a fait une version en javascript.
  • Mesurer les performances sur quelque chose qui est très utilisé, ce n’est pas facile.
  • Quand on parle de latence, on parle du temps moyen. Les centiles permettent de voir plus facilement.
  • N’utilise pratiquement de ressource mémoire.
  • Il faut être rapide lorsque l’on enregistre, on peut l’être moins quand on consulte
  • Ne pas prendre pour argent comptant la démo, il faut faire des benchmarks.
  • Simple à mettre en oeuvre.
  • Possibilité de zoomer sur les parties intéressantes.
  • Utilisable sur benchmark ou en prod
  • A voir aussi jHiccup: petit agent java.

Visualisez l’exécution de votre code avec Flow

Par Yoann Buch et Yiquan Zhou. Ce sont les créateurs de Flow.

  • Parti de l’expérience de l’arrivée sur un projet legacy où il y avait très peu de doc et plus de développeurs originaux en place.
  • Donc apprentissage par lecture de code et debug. Analyse dynamique et un peu de statique. Projet vieux de 2 ans.
  • Enregistrement de l’exécution avec Flow. En fait, il y a un agent java attaché à l’exécution. Permet de visualiser ensuite toutes les données.
  • Par défaut, il instrumente les packages de ton projet mais c’est configurable.
  • Visualisation de la call stack, représentation graphique des appels. Quand on clique sur le graphe, permet de voir l’appel au niveau de la call stack.
  • Donc on a toute l’exécution. On peut se focaliser dans des parties précises. (bien mieux qu’un System.out)
  • Flow permet de lire moins de code car du coup on ne regarde que le code pertinent.
  • Evite de se perdre. permet en fait de mettre des points d’intérêt à certains endroits. Sert de documentation.
  • Demo avec le site de Spring. Appli SpringBoot.  On clique sur une documentation
  • « Bouton magique » de Flow.
  • On navigue sur les classes qui ont été appelées.
  • Flow permet de comprendre la structure et les fonctionnalités.
  • Flow agit au niveau de l’IDE. Cela ne marche pas sur Android.
  • Ils ne récupèrent pas encore les variables d’entrées et sorties. Ne remplace pas un debugger ou les logs, c’est un outil complémentaire.

-> Bilan: Très intéressant et gratuit.

Démocratiser le machine learning avec TensorFlow

Par Loan Tricot (le lycéen!!!)

  •  Plus besoin d’un doctorat pour faire du machine learning!
  • TensorFlow permet de représenter une fonction f(x) sous forme de graphe.
  • Il faut trouver les bons paramètres… »
  • Bon Allez, j’avoue, je n’ai pas pris beaucoup de note…
  • C’était la dernière conférence de la journée.
  • Et, j’étais tellement emerveillée la prestance de ce lycéen sur ce sujet assez matheux !

Devoxx 2017

Etre productif avec JHipster

Par Julien Dubois – Créateur de JHipster et directeur de l’innovation chez Ippon Technologies

  • Utiliser de préférence Yarn.
  • Jhipster Devbox -> tourne sur Vangrant
  • plugin oh-my-zsh -> plugin autocomplétion
  • Arbre de questions, avec de la validation
  • génération d’une config docker, elastic search, etc… Vision Dev
  • Devient rare d’avoir des gens qui installent à la main une base de données sur un poste de dev.
  • HikariCP pool de connexion performante
  • liquidbase permet de gérer les différentes version de base de données. Permet de bosser ensemble sans se gêner.
  • Profil dev et prod.
  • EhCache pour les monoliths, HazelCast, plus pour les microservices, ou pas de Cache
  • Monitoring plutôt faible par défaut. Possibilité de reconfigurer en fonction de la RAM.
  • MongoDB et Spring Data MongoDB, possibilité de configurer pour avoir des données par défaut.
  • Intéret image docker, sympa d’avoir la même cohérence sur différents projets. Plus facile pour switcher de projet. JHipster: assemblage de techno. ex pas de changement dans les composants.
  • Securité: Amélioration dans la gestion du « remember me ». De plus en plus de JWT.
  • I18n :  Même fichier front&back -> A vérifier

-> Swagger

  • Spring Web Socket -> Difficulté à monter en charge.
  • Les maj automatique ou manuelle. Automatique -> branches Git
  • Market de modules. Possibilité de faire ses propres modules —> Possibilité de faire sa propres sécurité dans un module? et de les héberger au sein de l’entreprise.
  • Monitorer, changer la conf à chaud, dump tout est prêt pour la prod. Prêt pour git.
  • Les tests d’intégration restent rapides. Possibilité de faire un faux utilisateur pour tester @WithMockUser. Gatlin:  testeur pour les perfs, codé en Scala. Il y a toute la structure.donc juste à modifier donc pas compliqué.
  • Par défaut, pas de pagination. ex: on voit le gain tout de suite avec Gatlin qu’il faut paginer. Cucumber très simple. Protractor: pour les test de bouts en bouts. Test les applications avec des clicks. Récupère le gros des pbs. S’il y a des problèmes, pratique d’avoir la même stack technique que les autres utilisateurs que JHipster car résolution plus rapide.
  • Utilisation d’une image docker pour sonar
  • Nouveau sous générateur pour CI (donc pas par défaut): yo jhipster:ci-cd
  • Les entités JPA peuvent avoir des méthodes fluent.
  • Liquidbase. Si on modifie à la main, pas terrible, il faut utiliser une tache maven liquibase:diff
  • Un des buts de jhipster : Deploiement à chaud (ça été plus compliqué avec Angular4)
  • Angular+Yarn plus sécurisé et plus reproductible. Pagination par composant bootstrap. Encore qq pb avec librairie tierce. build de prod doit être encore améliorer. Support de sass pour avoir des variables
  • Génération des entités. Tip: utilisez Git pour sauver avant.
  • L’entity user peut être étendu. JHipster utilise MapStruct pour générer le mapping entre les entités et des DTO. Décorélation possible entre DTO et services.
  • 3 options de type de pagination pour angularjs. un peu diff pour angular 2. lien de pagination et scroll infini. Regénération possible des entités. Les utilisateurs avancés modifient directement les fichiers json mais si on utilise l’outils avec générateur, il y a un validateur.
  • JDL-studio (design entity), existe en plugin pour version ide.
  • Un monitoring unifié sera dispo dans jHipster registry et JHipster console.
  • On peut créer une image docker avec notre application. Fonctionne avec les monolithes et micro services. Donc on peut avoir un cluster docker swarm. Support de Rancher, cloud foundery, heroku (gratuit donc super pour les demo, ou sinon $9/mois)
  • Peut être déployé sur un serveur jee car possibilité de générer un war.
  • MicroServices: Génération Front déporté et pleins de back – Architecture complexe en quelques clics basé sur Netflix Zuul – JHipster permet un gain supérieur sur les microservices (encore plus pour que pour le monolithe) car compliqué à la main – Documentation swagger aggrégée, possibilité d’avoir plusieurs gatewaya spéialisé en fonction du service – Limitation -> impossibilité d’utiliser les Websockets (possibilité de passer par Kafka)
  • Possibilité de déployer sur swam, kubernetes, fonctionne sur Google cloud platform.

Questions publics:

  • Pas de génération RAML.
  • Possibilité d’avoir de l’API interne non exposé. -> 2 gateways ou filtres
  • Partir d’un modèle rest plutôt que modèle entité.
  • Désir de générer un crud plus simple
  • Génère aussi un fichier angular-cli, front angular simple, manque l’intermédiaire
  • Des personnes aimerait pouvoir avoir du React. Pas assez de resources. Mais peut changer si des personnes sont intéressées. peut être s’il y a du CRUD plus simple
  • Grafana ? style graphite. Pour l’instant, non. Toujours question de resources et/ou besoin.
  • Admin des users. Filtre et tri ? tri -> oui mais pas filtre.
  • JHipster se base sur yeoman
  • Il y a beaucoup de société qui aident, comme pour les caches.
  • Support Openshift pour qu’il soit repris. Mais en fait Redhat à arrêter OpenShift V2. Mais cela pourrait reprendre mais il faudrait que des gens aident. Ils sont aussi très dirigé vers Redhat pas seulement Spring (Comme MapStruct).

Organisez la logique de votre application Web avec Redux

Par Matthieu Lux

  • Web applications: Pb, on a beaucoup de composants. C’est difficile à démêler. La solution angular, c’est faire des services pour tout, et nos composants surveillent nos services. « Des singletons stateful ne constituent pas une pérennisation sur le long terme » React: pattern compliqué.
  • Envie que cela soit équivalent quel que soit les frameworks. Philosophie pour être minimaliste. En fonction du state, on a une vue. Redux, c’est un reducer. (previous state, action) = new state
  • Le reducer doit être une fonction pure et ne faire que du synchrone. Le code du framework est très court. Redux crée un store qui contient un objet qui a un état. Redux doit gérer un state.
  • Elm s’est inspiré de Redux. Proche de CQRS, le language est différent mais proche fonctionnellement. Redux apporte aujourd’hui un bon pattern pour que cela soit tractable et fonctionnel.
  • Industrialisation: combineReducer, applyMiddleware, Connect. Gestion de l’asynchrone Thunk&Promise. Isomorphisme. compatible avec Redux. Contrainte: Nécessite de la sérialisation. Pas gratuit à mettre place mais cela vaut le coup. Il y a un devtool Extension Chrome Time travel et « ca, c’est vraiment génial », on peut revenir dans l’étape précédente. Hot reload des composants. Hot reload du reducer.
  • Autre alternative pour Angular: NGRX. RxJs power State management, et fonctionne avec la devtool de redux.

Building Secure Angular Applications

Par Philippe De Ryck

  • Les slides sont .
  • Outil: BeEF is short for The Browser Exploitation Framework. It is a penetration testing tool that focuses on the web browser.
  • Sanitization activé par défaut quand on bond HTML au DOM. Angular est bon contre les attaques XSS.
  • Connaitre ce que l’on embarque : SRI  qui permet de tester/Vérifier les librairies tierces.
  • Host based whitelisting is a bad idea (Content Security Policy). Nonces (for script tag) to the rescue, nonces should be fresh and random.