Antonin, Jean-Loup, Quentin, Oscar, Bruno et Julien ont assisté à 2 journées de conférences et ont choisi de nous partager quelques-uns de ces sujets :  - Choregraphy vs Orchestration in Serverless microservices  - What about logs : comment les présenter ?  - L'ergonomie des formulaires Web : bonnes pratiques et erreurs à éviter  - Playwright : Tester ses webapps  - Temporal.io : Mes workflows sont cloud ready  - Dates et heures : Fuyez ou venez découvrir les pièges  - JS et le bon HTML : (re)découvrir les éléments natifs  - DockerFile : si les meilleurs étaient ce que l'on écrit pas

1. DEVFEST
NANTES – 02 Décembre 2022

2. PROGRAMME
Choreography vs Orchestration in Serverless Microservices
What about logs ?
UX Formulaires web
Playwright – web apps testing
Temporal.io
Dates et heures
JS et le bon HTML
BuildPack

3. CHOREOGRAPHY VS
ORCHESTRATION IN
SERVERLESS MICROSERVICES
Guillaume Laforge,
Google

4. Avantages :
Facile à implémenter
DIRECT SERVICE-TO-SERVICE CALLS
Inconvénients :
Fortement couplé
Chaque service est un point de défaillance unique
Chaque service a sa logique de Retry/Error/Timeout
Qui assure la transaction ?

5. Avantages :
Faiblement couplé
Modification et scalling facile
Pas de point de défaillance unique
Facile à étendre avec les Evènement
CHORÉGRAPHIE
Inconvénients :
Difficile à debugger / monitorer
La logique de Retry/Error/Timeout est difficile
Le workflow n’est pas explicite
Qui assure la transaction ?

6. Avantages :
Le workflow est explicite et versionné
Monitoring facile de chaque étape
Retry/Error/Timeout centralisé
Services sont indépendants
ORCHESTRATEUR
Inconvénients :
Nouvelle techno à apprendre
Orchestrateur est le point de défaillance unique
Qui assure la transaction ?

7. Quelle est la meilleure solution ?
Direct Calls :
• Une architecture simple avec peu de service qui change
peu
Event-Driven architecture :
• Services faiblement liés
• Pas de parallèle ou d’ordre
Central Orchestrator :
• Services fortement liés
• Exécution ordonnée
CHORÉGRAPHIE OU ORCHESTRATION ?

8. WHAT ABOUT LOGS ?
Daniel MAHER,
Scaleway

9. WHAT ABOUT LOGS ?

10. WHAT ABOUT LOGS ?

11. WHAT ABOUT LOGS ?

12. WHAT ABOUT LOGS ?
Au minimum : une date/heure et le sujet du log
Une structuration du log et éviter les problèmes d'interprétation
Les logs et les évènements sont des choses séparées
Les métadonnées ne sont pas le message, elles sont là pour aider !
La présentation est primordiale !

13. UX FORM WEB
Geoffrey Crofte,
Foyer Group

14. UX FORMULAIRES WEB
Se poser les bonnes questions
Utilisateurs différents profils
Clients, experts, admin
Client : Cherche l’adhésion
Clarté, simplicité
Experts : Connait son métier
Complétude, formulaires plus complexes (besoin de voir beaucoup de choses sur un seul écran)
Admin : Actions rapides
Gestion simplifiée, workflows

15. UX FORMULAIRES WEB
Autour du formulaire
Existant ?
Allez vous changer profondément les habitudes ?
Pouvez-vous éviter de les changer ?
Comment accompagner ce changement ?
Métier
Est-ce que la logique métier permet de faire cela ?
Est-ce que les données existent et peuvent être stockées ?
Ai-je suffisamment la connaissance métier ?

16. UX FORMULAIRES WEB
Univers très normé, habitudes anciennes
Ne pas inventer des nouveaux comportements
Innovations basées sur des études : comportements utilisateurs
« Si l’originalité de votre proposition graphique vient
en altérer sa compréhension, changez là »

17. UX FORMULAIRES WEB
Radios vs Checkbox

18. UX FORMULAIRES WEB
Read-only

19. UX FORMULAIRES WEB
Evolution de Material Design

20. UX FORMULAIRES WEB
Formulaire multi-étapes
Doit servir l’utilisateur
Pas du design

21. UX FORMULAIRES WEB
Types de champs : select

22. TESTING WEB APPLICATIONS
WITH PLAYWRIGHT
Debbie O'Brien
Microsoft

23. QUI AIME FAIRE DES TESTS ?

24. Support des browser modernes
Fonctionne sur Windows, Linux,
macOS, en local ou en CI
Multi Language : TypeScript,
JavaScript, Python, .NET, Java.
Codegen
Inspector
Trace Viewer – screenshot, etc.
VsCode extension
GitHub Actions
Backer par Microsoft 🤫
KÉSAKO ET CE QU’ON NOUS PROMET

25. EXEMPLE

26. Génération du code en
fonction des actions
enregistrées par Playwright
Pas besoin d’aller inspecter le
code pour trouver les balises /
id (picking selectors)
CODEGEN

27. Rapport
Screen shot
Inspection des snapshots
DOM SNAPSHOT

28. Cross browser
Cross device
RAPPORT DE FIN DE TESTS

29. ET LES AUTRES ?
https://medium.com/tech-p7s1/why-favor-playwright-over-selenium-or-cypress-e96df84c08e1

30. VERS UNE NOUVELLE NORME ?

31. TEMPORAL.IO
MES WORKFLOWS SONT
CLOUD READY
Alexandre Vilain,
OVHCloud

32. LE PROBLÈME

33. LE PROBLÈME

34. LE PROBLÈME

35. LA SOLUTION – TEMPORAL.IO

36. LA SOLUTION – TEMPORAL.IO

37. DATES ET HEURES À L'HORIZON ?
FUYEZ… OU VENEZ DÉCOUVRIR LES
PIÈGES TENDUS
Arnaud Pichery,
Dataiku

38. DATES ET HEURES

39. DATES ET HEURES
Il existe un 30 février en 1712 pour la Suède (à cause du passage calendrier julien vers
calendrier grégorien, la Suède a rencontré des décalages)
Le 11 mars 1917 à Paris, une annonce informe que l'horloge sera retardée de 9 minutes
Nouvel an au mois de mars en Angleterre (24 mars 1708 -> 25 mars 1709)
En Russie de 1937 jusqu'à la guerre passage en semaine de 6 jours

40. DATES ET HEURES

41. DATES ET HEURES

42. DATES ET HEURES
Récapitulatif:
Utilisation d'une librairie avec les bons types pour stocker et manipuler les dates/heures
Utilisation de la norme ISO 8601
Méfiance avec les dates <2000 et danger si <1970
Bugs qui vont arriver:
En 2028 les CD encodés avec la norme Joliet (extension de l'ISO 9660 pour le stockage de
fichiers) la data ne pourra plus être encodée et difficilement lue (stockage de la date 1900 +
128)
En 2038 gros souci sur le Unix Timestamp stocké sur des entiers sur une architecture 32bits, les
systèmes sous Unix 32 bits ne fonctionneront plus correctement (caméra, four, TV, ...).

43. JS ET LE « BON »
HTML
Gaël Poupard,
OnePoint

44. JS ET LE « BON » HTML
Univers Standardisé
Axiome du Web
Principe du moindre pouvoir
HTML > CSS > JS > …
Design modulaire
Tolérance à l’erreur
HTML, SVG : pas JS
Suivre les spécifications
Ça bouge de temps en temps

45. JS ET LE « BON » HTML
Javascript pousse HTML et CSS
Pas mal de fonction JS deviennent du CSS, HTML
Hover
Smooth scroll
Positionnement
Support navigateur de plus en plus large

46. JS ET LE « BON » HTML
Élément « datalist »
Autocomplete natif

47. JS ET LE « BON » HTML
Autoremplissage
Email, password, newpassword
OneTimeCode

48. JS ET LE « BON » HTML
Formater la saisie
pattern
Validation
Pseudo-classe => :valid , :invalid , :out-of-range
Spellcheck = false

49. JS ET LE « BON » HTML
Spellcheck = false
Vérification orthographique Google
Exfiltration de données
“The company then went on to make clear that it is aware that
the data may sometimes be sensitive, so text isn’t attached
to any user identity and only stored and processed on Google’s
servers temporarily. The company further vowed to improve its
own processes to exclude passwords from being processed
proactively.”

50. JS ET LE « BON » HTML
Formulaires, nombreux attributs utiles

51. JS ET LE « BON » HTML
Modales natives

52. JS ET LE « BON » HTML
Output : accessibilité

53. JS ET LE « BON » HTML
Tableau
Pseud-classe : target

54. JS ET LE « BON » HTML
Des « nouveautés »

55. JS ET LE « BON » HTML
Et les perfs

56. ET SI LES MEILLEURS
DOCKERFILE ÉTAIENT CEUX
QUE L'ON N'ÉCRIT PAS
Fabien Martin,
VMware

57. LE PROBLÈME AVEC LES IMAGES DOCKER

58. LA SOLUTION – LES BUILDPACK

59. Kanye West, Maths and Signals ! How to
clone Shazam
Conception de langage : communiquer
avec la machine
D’AUTRES PRÉSENTATIONS INTÉRESSANTES

60. Rennes
35 Boulevard Solférino
35000 Rennes
Paris
350 rue de Vaugirard
75015 Paris
Nantes
Whoorks Nantes Gare
17 Boulevard de Berlin
44000 Nantes
+ 33 2 30 96 21 60
www.spikeelabs.fr

61. Straight to
the point
www.spikeelabs.fr