1

Dev

oxx

2019 : croître avec

JavaScript en 2019

2

Mobile Journey Marketing

David Babel@DavidLearnJS

Carles Sistare@CarlesSistare

Pas

sion

nés

by d

esig

n

Qui sommes nous ?

3

Intro

duct

ion

Pourquoi sommes nous là ?

4

Pla

n

Micro services

Plan de la présentation

● Croissance d’Ogury● Notre Approche micro services● Bonne pratiques techniques pour éviter la dette technique

5

Par

tie 1

La croissance d’

6

Consent Manager

...

User Consent

CONSENTED

SIGNALS

Data GenerationEngine

Data Generation

Insights Visualization

Active Insights User Engagement

Intelligent Monetization

Activation Solutions

Cro

issa

nce

Comprendre les contraintes

7

01 02 03 04

Cro

issa

nce

Contraintes

Forte charge- 100k QPS- 2To par Jour

Temps de réponse limité10ms

Archi complexe

- 50 MServ- 60 Jobs BigData

Réactivité300 Releases par mois

8

Cro

issa

nce

De Start-up à Scale-up

9

2014 20 équipes 400+ dépôts

Cro

issa

nce

De Start-up à Scale-up

Intro Ogury at Scale

Née en 2014

Ces valeurs sont fausses, en attentes de la finance ...

600

(objectifs)

11

Source: https://lentreprise.lexpress.fr/creation-entreprise/le-top-100-des-start-up-2017-un-dynamisme-confirme_1942988.html

De

Sta

rt-up

à S

cale

-up

12

Source: https://www.chefdentreprise.com/Thematique/profession-1056/Breves/OGURY-sacre-Scale-annee-2018-329610.htm

De

Sta

rt-up

à S

cale

-up

13

Cloud Agile JavaScript

De

Sta

rt-up

à S

cale

-up

Ogury at Scale

14

Par

tie 2 Devenir une Scale-up

avec les Microservices

15

Ad Exchange

Demandede publicité

Donnée Consentie par l’utilisateur

Outils deTrading

Metriques Calculées

Milliers deCampagnesPublicitaires

Algorithmes deCiblagePublicitaire

Sca

labi

lité

Ad Exchange = Plateforme de Trading Publicitaire

16

01 02 03

Sca

labi

lité

Contraintes du Scaling

Manque de fluidité d’une Architecture Microservices

Manque de scalabilité des tests d’intégration

Manque d' homogénéité d’une archi microservices

17

Flui

dité

Temps de réponse hors contrôle

1. Manque de fluidité d’une architecture Microservices

Difficultés pour automatiser les tests

Interconnections complèxes

18

Ad Exchange

Demandede publicité

Donnée Consentie par l’utilisateur

Outils deTrading

Metriques Calculées

Milliers deCampagnesPublicitaires

Algorithmes deCiblagePublicitaireDataServer

Kafka

Flui

dité

Ne pas reporter à demain ce que nous pouvons faire … avec Kafka

19

Flui

dité

Temps de réponse hors contrôle

1. Manque de fluidité d’une architecture Microservices

Difficultés pour automatiser les tests

Interconnections complèxes

20

Res

ilien

ce

On peut pas automatiser les tests

End To End

2. Manque de scalabilité des tests d’intégration

Tests d’intégration isolés avec une

cohérence assurée

Evangélisation des Best Practices de nos

Services

21

01 02 03 04

R

esili

ence

Chaque service offre ses propres connecteurs

Service de Health Check Intégré

Contrats entre Services (*.proto, *.yml)

Strategie de Recovery

Service de MOCK

22

mock

mock

mock

mock

mock

mockR

esili

ence

23 https://github.com/couchbase/couchnode

Exemple de mock:COUCHBASER

esili

ence

24

Res

ilien

ce

https://github.com/dwyl/aws-sdk-mock

Exemple de mock:AWS

25

Hom

ogén

éité

Incohérence des contrats parmis les

microservices

3. Manque d'homogénéité d’une archi Microservices

Incohérence des protocols de

communication

Perte de temps de définition de synchro

entre services

3. Manque de cohérence d’une archi Microservices

● Temps de réponse élevés en fonction des technos utilisés● Problèmes de typage sur des champs JSON● Complexité des connectivités entre services● Incoherence des contrats entre services

27

RPC

http://bit.ly/practical-grpc

Hom

ogén

éité

28

Par

tie 3

.1 Introduction auxBonnes pratiques

29

Startup Nation

Bon

nes

prat

ique

s Ja

vaS

crip

t

30

Startup Nation

Bon

nes

prat

ique

s Ja

vaS

crip

t

31

Bon

nes

prat

ique

s Ja

vaS

crip

t

JavaScript: un allié puissant

32

Bon

nes

prat

ique

s Ja

vaS

crip

t

JavaScript: un allié puissant

BackEnd Téléphone

FrontEnd Ordinateur

33

Source: https://tc39.github.io/ecma262/

Bon

nes

prat

ique

s Ja

vaS

crip

t

JavaScript: un allié puissant, mais ...

34

Bon

nes

prat

ique

s Ja

vaS

crip

t

JavaScript fatigue etDette technique

35

Saul:Me:

Saul:Me:

Source: https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4

Eric Clemmons @ericclemmons Creator of React Resolver

“How’s it going?”“Fatigued.”“Family?”“No, Javascript.”

Java

Scr

ipt f

atig

ue e

tD

ette

tech

niqu

e

La JavaScript Fatigue

36

Source: https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4

Trop de débutants sont submergés par la courbe d’apprentissage de react. Pourquoi?

Traduit de l’anglais

Ca me tue que la mise en place d'un projet JS soit si difficile. Ca m'a pris une soirée entière la dernière fois

Traduit de l’anglais

Java

Scr

ipt f

atig

ue e

tD

ette

tech

niqu

e

La JavaScript Fatigue

37

Source: Gabriela Motroc : 4 tips to resist JavaScript fatigue (see)

Toute connaissance à de la valeur

Répète après moi : Les choses vont continuer à changer

Suis-je bon pour apprendre et solutionner des problèmes ?

Connaître ce que je ne connais pas

Java

Scr

ipt f

atig

ue e

tD

ette

tech

niqu

e

L’ennemi: la dette technique

38

Java

Scr

ipt f

atig

ue e

tD

ette

tech

niqu

e

La dette technique

39

Bon

nes

prat

ique

s et

cro

issa

nce

Au fait, c’est quoi unebonne pratique ?

40

Source: Henrik Kniberg “What is Agile”

Agile

Waterfall:

:

Au

fait,

c’e

st q

uoi u

nebo

nne

prat

ique

?

Bonnes pratiques ?

41

Source: Henrik Kniberg “What is Agile”

?Au

fait,

c’e

st q

uoi u

nebo

nne

prat

ique

?

Bonnes pratiques ?

42

Au

fait,

c’e

st q

uoi u

nebo

nne

prat

ique

?

Bonnes pratiques ?

Transpileur ? Bundler ?

43

Au

fait,

c’e

st q

uoi u

nebo

nne

prat

ique

?

Bonnes pratiques ?

Transpileur ? Bundler ?

44

Source: https://en.wikipedia.org/wiki/Best_coding_practices

Au

fait,

c’e

st q

uoi u

nebo

nne

prat

ique

?

Bonnes pratiques ?

45

Au

fait,

c’e

st q

uoi u

nebo

nne

prat

ique

?

Définition d’une bonne pratique

● Créer un minimum de dette technique● Reposer sur des outils stables et répandus● Etre simple pour être facile à s’approprier

46

Par

tie 3

.2

Nos bonnes pratiques

47

Source: Kent C. Dodds : https://testingjavascript.com/

Nos

bon

nes

prat

ique

s

Les tests automatisés

48

Nos

bon

nes

prat

ique

s

Les “tests” statics

49

react-testing-libraryJest

Nos

bon

nes

prat

ique

s

Les tests unitaires et d’intégration

50

react-testing-libraryJest

SuperTestsno logo

Nos

bon

nes

prat

ique

s

Les tests fonctionnels

51

Les tests fonctionnels

SuperTestsno logo

BlackBox

tests

validation

BackEnd

Nos

bon

nes

prat

ique

s

52

BlackBox

validation

testsFrontEnd

Nos

bon

nes

prat

ique

s

Les tests fonctionnels

53

Les

4 pi

liers

Les 4 piliersd’un bon projet

54

readme.md

GO PROD

Les

4 pi

liers

Les 4 piliers d’un bon projet

55

GO PROD

Les

4 pi

liers

L’intégration continue

56

Les

4 pi

liers

Micro Services et Micro Front-end

57

Source: https://micro-frontends.org/

BackEnd

FrontEnd

Les

4 pi

liers

Micro Services et Micro Front-end

Source: https://micro-frontends.org/

FrontEnd

59

Qua

lité

de c

ode

Qualité de code

60

Qualitéde code

Source: Ryan McDermott : Clean Code Javascript (see)

Qua

lité

de c

ode

61

Source: Brandon Wozniewicz : JavaScript naming conventions: do’s and don’ts (see)

Qua

lité

de c

ode

Qualité de code

62

Niv

eau

1

63

Niv

eau

2

64

Niv

eau

3

65

Niv

eau

4

66

Execution :

Niv

eau

4

67

Qua

lité

de c

ode

68

Cory House @housecor React evangelist

Qua

lité

de c

ode

69

Com

pren

dre

Java

Scr

ipt

Comprendre JavaScript

70

Source: https://fr.wikipedia.org/wiki/JavaScript

Com

pren

dre

Java

Scr

ipt

Comprendre JavaScript

71

Com

pren

dre

Java

Scr

ipt

Les classes

72

Sophie Alpert @sophiebits Facebook React team

Source: Sophie Alpert: React Today and Tomorrow and 90% Cleaner React With Hooks (see at 10:00)

Classes are ...

Com

pren

dre

Java

Scr

ipt

Les classes

73 La même chose en 20 lignes de moins

Com

pren

dre

Java

Scr

ipt

Les Modules

74

?Package

Source: Naren Yellavula : Everything I know about writing modular JavaScript applications (see)

Com

pren

dre

Java

Scr

ipt

Il y avait quelques indices ...

75

Com

pren

dre

Java

Scr

ipt

advertiser

76

Com

pren

dre

Java

Scr

ipt

77

Ou créer des alias :

On peut importer depuis le chemin de notre fichier

Com

pren

dre

Java

Scr

ipt

Les modules

78

Typa

ge e

n Ja

vaS

crip

t

Typage en JavaScript

79

Typa

ge e

n Ja

vaS

crip

t

TypeScript : un langage

80

Source: developpez.com : les langages les plus demandés et les mieux payés (see)

JavaScript

17.8%

1.6%

* dont potentiellements quelques annonces TypeScript cachéesTy

page

en

Java

Scr

ipt

TypeScript : popularité

81

Typa

ge e

n Ja

vaS

crip

t

● Types ( vous avez atteint le niveau 4 ! )

● Contrat entre front et back● Transpileur● Auto-linter efficace● Tueur de la “JavaScript fatigue”

TypeScript : la promesse

200Mo500Mo

83

Tool

ing

Java

Scr

ipt

Tooling JavaScript efficace

84 .

Tool

ing

Java

Scr

ipt

Style de code et syntaxe

Exemple de formatage à la sauvegarde :

+ lint-staged+ husky (git hooks)

85 .

Tool

ing

Java

Scr

ipt

Gestion des dépendances

Vous voulez vous autoriser à forker un projet pour en commencer un nouveau ? Execution de la commande

86

Vous voulez vous débarrasser de vos dépendances inutiles ?

Tool

ing

Java

Scr

ipt

depcheck

Gestion des dépendances

.

Execution de la commande

87 .

Tool

ing

Java

Scr

ipt

madge

Protection contre lesdépendances circulaires :

Dépendances circulaires

Source: Dan Kelch : Eliminate Circular Dependencies from Your JavaScript Project (see)

Execution de la commande

88 .

.js

Tool

ing

Java

Scr

ipt

CI et code review

Automatisation de code review :Aperçu dans github

89 .

https://risingstars.js.org

Tool

ing

Java

Scr

ipt

Une veille technique facile des librairies ?

90

Con

clus

ion

Conclusion

That’s all folks

Développeurs:

● Choisissez les bons outils pour tuer la dette technique

● Faites confiance à votre tooling

Startuppers :

● Faites confiance à vos développeurs

Merci de votre attention

David Babel@DavidLearnJS

Carles Sistare@CarlesSistare