dev.js, dataops & devops patterns

## La source INSEE

<small>
								<ul>
									<li>nom, prénom(s)</li>
									<li>date/lieu de naissance/décès</li>
									<li>n° d'acte de décès</li>
									<br/>
									<li>25 millions d'enregistrements</li>
									<li>49 fichiers, 730Mo compressé</li>
									<li>environ 620k décès/an aujourd'hui</li>
									<br/>
									<li><i>fixed width file</i> (champs fixes) </li>
									<li><i>~ascii (sauf quelques lignes...) </li>
								</ul>
							</small>
							<small><pre><code>
DUCRET*MARIE ANTOINETTE/      21922010901004AMBERIEU-EN-BUGEY   19701210014216
GRANGEON*ERIC JEAN REMY/      11969032901004AMBERIEU-EN-BUGEY   19700425693831059
VELLET*PHILIPPE/              11970020101004AMBERIEU-EN-BUGEY   197002030100412
PRESSAVIN*LYDIE/              21970040601004AMBERIEU-EN-BUGEY   197004060100433
DOUAT*MARIE-SYLVIA MARTINE/   21970070801004AMBERIEU-EN-BUGEY   1970070801053457
							</code></pre></small>

🤮 🤮 🤮

<small><small>(merci quand même à l'INSEE : c'est bien moche mais très carré - et précieux !)</small></small>

## [L'API data.gouv](https://doc.data.gouv.fr/api/reference/#/)
								<div class="container">
									<div class="col left">
										<small>
											<p>
												Télécharger 49 fichier à la main, c'est simple mais
												peu réaliste pour des opérations récurrentes.
											</p>
											<p>
												Heureusement, l'API de data.gouv existe, très lisible et documentée
												en Swagger via FlaskRestPlus :<br/>
												<small><a href="https://doc.data.gouv.fr/api/reference/#/"><code>
													https://doc.data.gouv.fr/api/reference/#/</code></a></small>
											</p>
											<p>
												Le endpoint pour notre dataset est : <br>
												<small>
													<a href="https://www.data.gouv.fr/api/1/datasets/fichier-des-personnes-decedees">
													<code "is-small">https://www.data.gouv.fr/api/1/datasets/fichier-des-personnes-decedees</code>
													</a>
												</small>
											</p>
											<p>
													Le schéma du JSON est épais, le chemin qui nous intéresse est <code>resources.url</code>.
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												Pour récupérer les 49 fichiers en shell et les compresser :
											</p>
										<small><code>
												curl -s https://www.data.gouv.fr/api/1/datasets/fichier-des-personnes-decedees/ | jq '.resources[].url' |	sed 's/^/curl -s /;s:/$deces-.*$":/\1" | gzip > \1.gz:' | sh
										</code></small>
										<p>
											N'hésitez pas à décomposer la commande pour les curieux
										</p>
										<p>
											Vous noterez l'utilisation de
											<a href="https://stedolan.github.io/jq/"><code>jq</code></a>. Cet outil est
											devenu incontournable à l'ère des API, pour ceux qui font encore du shell.
										</p>
										<p>
											Pour les habitués de langage plus évolués Python ou JS, la récupération
											ne sort pas des habitudes.
										</p>
									</small>
								</div>

## Stockage objet - S3
							<div class="container higher">
								<div class="col left">
									<small>
										<p>
											Le stockage objet est arrivé avec le monde <b>cloud</b>: S3 AWS, Swift OS, Blob Azure, Cloud storage GCP...
										</p>
										<p/>
											C'est le stockage <b>gros volume</b>, par opposition au stockage bloc (prérequis du compute, intégré aux API type EC2)
										</p>
										<p>
											C'est le <b>partage de fichier</b>, il unifie: le samba/nfs, le sftp, le webdav. On peut même l'utiliser
											en collaboratif (partage Windows ou sur le cloud type NextCloud).
										</p>
										<p> C'est aussi la <b>sauvegardes</b> des nouvelles architectures (base de donnée, ...), l'archivage légal
											restant pour un stockage archive de type Amazon Glacier.
										</p>
									</small>
								</div>
								<div class="col left">
									<small>
										<p> Le bénéfice ? Des <b>SLA et tarifs très clairs</b> pour un achat à l'usage réel, ponctuel ou pas,
											pour des <b>gigas ou des pétas</b>.
										</p>
										<p >Un résilience jusqu'à 99.9999+% selon le nombre de réplicats (3 à 6) le plus souvent configurables,
											et des débits au rendez-vous : 30Mo/s à plus de 150Mo/s.
										</p>
										<p>
											Le <b>standard d'API est maintenant clairement S3</b> même en OpenStack.
										</p>
										<p>
											Dans la French Tech,
											<a href="https://www.scaleway.com/fr/object-storage/">Scaleway</a>,
											<a href="https://docs.ovh.com/gb/en/public-cloud/getting_started_with_the_swift_S3_API/">OVH</a>,
											et <a href="https://fr.outscale.com/solutions-stockage-cloud/stockage-objet/">Outscale</a>
											offrent le stockage objet accessible avec les API S3.
										<p>
										<p>
											Un stockage Cloud donc, mais avec une localisation possible et un choix de fournisseurs large <b>#RGPD</b>
										</p>
									</small>
								</div>
							</div>

## S3 et data
								<div class="container higher">
									<div class="col left">
										<small>
											<p>
													On y accède bien sûr via une IHM facile en drag'n drop chez ls fournisseurs, mais on se rabat sur
													un NextCloud si c'est l'objecitif n'est pas de soulever le capôt. Tous les langages orienté
													offrent un support avancé aux API S3.
											</p>
											<p>
													Et bien sur, toutes solutions de data le supportent: Kafka, Airflow, Talend, Dataiku, Hadoop (HDFS over S3)
													... et maintenant 🤩 matchID 🤩.
											</p>
											<p>		Donc, aujourd'hui, <b>la donnée à froid</b>, c'est en S3 !</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												L'accès par API stockage objet vient avec ses méthode d'authentification. E.g chez Scaleway:
												<small><code><a href="https://www.scaleway.com/en/docs/s3-object-storage-api/">
													https://www.scaleway.com/en/docs/s3-object-storage-api/</a></code></small>
											</p>
											<p>
												Pour poser (après <a href="https://www.scaleway.com/en/docs/object-storage-with-aws-cli/">configuration</a>) les data de l'INSEE sur le stockage S3, il faut la cli <code>aws</code>:
												<pre class="higher-24"><code>
	foreach file in (deces-*);do\
			aws s3 cp $file s3://your-bucket/$file;
	done
												</code></pre>
											</p>
											<p class="higher-24"> Simple non ?
											</p>
										</small>
									</div>
								</div>

## S3 récupérer les données
								<small>
									<p>
										Du coup, les données de data.gouv sont dupliquées
										<a href=https://fichier-des-personnes-decedees.s3.fr-par.scw.cloud/">ici en accès public S3</a>
									</p>
									<p>
										On les récupère ainsi sans compte Scaleway:
										<pre class="center"><code>
						bucket=https://fichier-des-personnes-decedees.s3.fr-par.scw.cloud/;\
						files=$(curl -s ${bucket}\
							| xq -r '.ListBucketResult.Contents[].Key | select(contains("deces"))');\
						for file in $files; do\
							[ ! -f $file ] && (curl -s ${bucket}/$file > $file ) && \
							echo $file downloaded;\
						done
										</code></pre>
									</p>
									<p>
										Ce qui me permet de poursuivre la pub de <code>jq</code> avec son dérivatif xml
										<a href="https://github.com/jeffbr13/xq"><code>xq</code></a>, pour parser les chemins xml en cli.
											Il y a le même en yaml (<a href="https://github.com/kislyuk/yq"><code>yq</code></a>), et même en html
											(<code><a href="https://github.com/rbwinslow/hq">hq</a></code>)
									</p>
							</small>

## S3 - dark sides ?
								<div class="container center">
								<div class="col left">
									<small>
										<p>
											Il y a S3 et S3... Ainsi chez Scaleway toutes les méthodes de la cli <code>aws</code> ne
											sont pas implémentées, il y a même une <a href="https://www.scaleway.com/en/docs/s3-object-storage-api/">roadmap</a>.
										</p>
										<p>
											A noter notamment :
											<ul>
												<li>Les options de chiffrement, nombreuses chez AWS (arrive Q1 2020 chez Scaleway)</li>
												<li>La réplication de bucket</li>
												<li>La gestion de tokens temporaires, scopés qui peut sécuriser l'automatisation (possible
													dans Swift d'OpenStack ou AWS
												</li>
											</ul>
										</p>
									</small>
								</div>
								<div class="col left">
									<small>
										<p>
											La tarification est importante à analyser, les points d'attention:
											<ul>
												<li>un quota gratuit (75Go chez Scaleway)</li>
												<li>le tarif initial Go est attractif (~ 0.01€ mensuel)</li>
												<li>on paye le tarif sortant (hors du fournisseur)s</li>
												<li>réplicats: plus de résilience = plus de réplicats = plus cher</li>
											</ul>
										</p>
									</small>
								</div>
							</div>
							<small>
								La modalité de facturation à l'usage est vertueuse: elle pousse à essayer, et à optimiser<br/>
								Pour le projet présenté,ma facture est toujours à <b>0 €</b> chez Scaleway:<br/>
								1Go pour les données sources, 8.8Go pour la sauvegarde de l'index
							</small>

## Pourquoi matchID
								<small class="left">
									<p>
										<a href="https://www.matchid.io/" target="_blank">matchID</a> a été créé initialement pour ouvrir
										à d'autres administration les travaux de <i>data matching</i> réalisés initialement
										en POC avec Dataiku 🦄
									</p>
									<p>
										Nous avons approfondi la notion de <b>recettes simplifiées et interactives</b>,
										qui accélèrent le travail de dataprep, en ajoutant les appels imbriqués
										et favorisant gestion de version via Gitlab ou un Github. Pour une meilleure
										<b>collaboration entre dev et data</b>.
									</p>
									<p>
										La data du projet est donc réalisée avec matchID, et le code est sur
										<a href="https://github.com/matchID-project/deces-dataprep" target="_blank">Github</a>.
									</p>
									<p>
										Pour visualiser les recettes du projet:
									</p>
								</small>
								<pre><code>
git clone https://github.com/matchID-project/deces-dataprep
cd deces-dataprep
make dev FILES_TO_PROCESS=deces-1970.txt.gz
								</code></pre>
								<small>
									<p>
										matchID se lance, un peu de patience, rendez-vous
										<a target="blank" href="http://localhost:8081/matchID/projects/deces-dataprep/datasets/deces_src">ici sur votre navigateur</a>.
									</p>
								</small>

## Dataprep pour indexation
									<small class="left">
											Les traitements sont pensés faciliter la recherche par indexation:
											<ul>
												<li>les données sont normalisées en ascii (il y a quelques erreurs d'encodage dans les fichiers INSEE</li>
												<li>le libellé de commune de décès (ou pays) est récupéré via le référentiel INSEE</li>
												<li>idem pour le pays de naissance et de décès</li>
												<li>l'historique de commune est utilisée pour les variantes de libellés de communes</li>
											</ul>
										</small>
									<a class="higher-24" target="_blank" href="http://localhost:8081/matchID/projects/deces-dataprep/recipes/deces_dataprep">
									<img width="100%" style="border:0;box-shadow: none;" data-src="img/matchID-dataprep.png" alt="matchid datapre"></a>

<small class="left">
										Cliquez sur l'image ci-dessus pour vous rendre sur la recette, et appuyez sur le bouton "Lancer"
										pour indexer l'année 1970 (45 secondes environ).
									</small>

## Indexation Elasticsearch
									<a target="_blank" href="http://localhost:8081/matchID/projects/deces-dataprep/datasets/deces_index">
									<img width="100%" style="border:0;box-shadow: none;" data-src="img/matchID-index.png" alt="matchid index"></a>
									<small class="higher-24"><small>Cliquez sur l'image pour visualiser les données</small></small>

<small class="left higher">
										L'indexation Elasticsearch est une opération peu intuitive:
										<ul>
											<li>matchID facilite l'indexation avec l'automatisation de la création du mapping</li>
											<li>plusieurs colonnes avec des indexations différenciées sont créées</li>
											<li>le edge ngram est utilisé pour tokenizer à l'indexation mais pas à la recherche (pour l'autocomplete)</li>
											<li>l'indexation floue "auto" est utilisée (distance de Levensthein à 2 pour les noms longs, 1 pour les noms courts, 0 pour les très courts</li>
											<li>la date de naissance et de décès sont également accessibles en recherche floue</li>
										</ul>
									</small>

## Dataops avec matchID
								<div class="container higher">
									<div class="col left">
										<small>
											<p>
												Le traitement via l'interface web matchID est pratique pour développer.
											</p>
											<p>
												Mais le traitement complet est long, et pour améliorer l'UI, la phase de dev
												demande au dataops une nouvelle mouture. A forces de cycles, on automatise.
											</p>
											<p>
												Pour automatiser, il y a un mode cli (qui utilise l'API Rest de matchID).
												Ainsi, pour "cliquer" sur le bouton "Lancer":
											</p>
												<small><code>
												make recipe-run FILES_TO_PROCEED=deces-1970.txt.gz
												</code></small>
											<p>
												Pour configurer la machine, installer le minimum (sans IHM) lance matchID,
												sauvegarde l'index Elasticsearch sur S3 :
											</p>
											<small><code style="margin-top:32px!important">
												make all FILES_TO_PROCEED=deces-1970.txt.gz
											</code></small><br/>
											<p>
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												Pour commander une machine sur une machine sur Scaleway, y déploie matchID,
												lance le traitement complet (4h30 à 8h selon l'instance), sauvegarde
												sur S3, et décommissionne la machine.
											</p>
											<small><code>
												make remote-all CLOUD=SCW
											</code></small><br/>
											<p>
												Nous avons testé ce process avec l'OpenStack d'OVH (<code>CLOUD=OS</code>) et l'EC2
												TinaOS d'Outscale (<code>CLOUD=EC2</code>), en utilisant la cli <code>aws</code>.
											</p>
											<p>
												Nous détaillerons plus tard le retour sur les 3 clouders, mais tous
												sont très satisfaisant avec des niveaux de sécurité différents. Mon
												portefeuille étant l'arbitre et le sujet traité full open, je suis
												resté chez Scaleway.
											</p>
										</small>
									</div>
								</div>

## LES OPTIONS
								<div class="container higher-24">
									<div class="col left">
										<small>
											<p>
												<a href="https://twitter.com/tainmar?lang=fr" target="_blank">Martin</a> avait fait en 2 jours en 2017 une première démo super fluide
												en infinite scroll et requête instantanée.
											</p>
											<img height="200px" style="padding-left: 32px; border:0;box-shadow: none;" data-src="img/hades.png" alt="angular search ui">
											<p>
												Le screenshot ne fait pas honneur: c'était vraiment sexy. Mais,
												parti du ministère, pas de trace du proto,
												malgré le nombre d'ouvertures de sources réalisées au sein du <a href="https://github.com/matchid-project/" target="_blank">projet matchID</a>.
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												<img height="36px" style="margin-top: 0px;border:0;box-shadow: none;" src="img/angular-icon.svg"> Le code était en Angular 1 et JQuery, c'était un proto. Parfait prétexte pour voir autre chose en 2020.
											</p>
											<p>
												<img height="36px" style="margin-top: 0px;border:0;box-shadow: none;" src="img/Vue.js_Logo_2.svg">L'UI matchID est en Vue.js, depuis j'avais approfondi le scaffolding et le CI
												avec <a href="https://histovec.interieur.gouv.fr" target="_blank">HistoVec</a>
												- valeur refuge en cas d'égarrement
											</p>
												<img height="36px" style="margin-top: 0px;border:0;box-shadow: none;" src="img/Svelte_Logo.svg"><a href="https://cristianpb.github.io/blog" target="_blank">
												Cristian</a> m'avait parlé de Svelte, comme framework js qui monte.
											</p>
											<img height="36px" style="margin-left: -16px;margin-top: 0px;border:0;box-shadow: none;" src="img/React-icon.svg">A côté, <a href="https://swiftype.com/search-ui" target="_blank">Swiftype</a>
												publie son code pour des UI pour Elastic - en React.
											</p>
										</small>
									</div>
								</div>

## <a href="https://swiftype.com/search-ui" target="_blank">Swiftype</a> Search-UI
								<div class="container higher-24">
									<div class="col left">
										<small>
											<p>
												La lib sépare bien un moteur js et l'UI React. La <a href="https://github.com/elastic/search-ui/blob/master/ADVANCED.md" target="_blank">documentation</a> est très
												fournie. Il y a même un reuse avec Vue, mais le contexte React est plus riche.
											</p>
												<a href="https://swiftype.com/search-ui" target="_blank"><img height="200px" style="padding-left: 40px;border:0;box-shadow: none;" data-src="img/swiftype-search-ui.png" alt="swiftype search-ui"></a>
											<p>
												Enthousiaste de découvrir React, je lance la première version le 1er janvier 2020 avec cette lib.
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												<b>Résultats</b>
											</p>
											<p>
												Première version ergonomique développée en quelques jours.
											</p>
											<p>
												L'application publiée remporte beaucoup de succès (plus de 1000 utilisateurs/jour).
											</p>
											<p>
												Je découvre le public des généalogistes, très positifs sur le site.
											</p>
											<p>
												Le plus long in fine pour la première version du site était :
												<ul style="margin-top:-16px">
													<li>l'harmonisation CSS Bulma avec le site matchID</li>
													<li>l'optimisation des requêtes elaticsearch</li>
													<li>les itérations dataprep pour des données bien indexées</li>
												</ul>
											</p>
										</small>
									</div>
								</div>

## + <a href="https://swiftype.com/search-ui" target="_blank">Swiftype</a> Search-UI -

<div class="container">
										<div class="col">
											😊😊😊😊<br/>
											<small>
												<ul>
													<li>autocomplete, pagination</li>
													<li>facettes de navigation</li>
													<li>premiers résultats rapides</li>
													<li>industriel (doc, scaffolding, gestion des erreurs)</li>
												</ul>
											</small>
											<br/><br/>
										</div>
										<div class="col">
											😔😔<br/>
											<small>
												<ul>
													<li>tweaking complexe</li>
													<li>recherche multi champs impossible</li>
												</ul>
											</small>
										</div>
								</div>
								<small style="width:75%" class="left higher">
									<p>
										Malheureusement, la première demande des utilisateurs était une recherche multichamps.
										La complexité des interactions entre l'Autocomplete et la Searchbox rend plus aisé
										une reconception ab initio pour ce cas d'usage.
									</p>
									<p>
										A vrai dire, l'expérience lourde de React et JSX m'a aussi semblé particulièrement indigeste
										après Vue.js
									</p>
								</small>

Démo
sur le REPL Svelte.dev
le rendu ➡️➡️➡️
testez le formulaire
⬅️⬅️⬅️ le code
la variable 'query' est liée au formulaire input
la forme réactive '$' déclenche la requête api à chaque changement de la variable 'query'

enjoy to learn !

### Svelte sur [deces.matchid.io](deces.matchid.io)
							<img height="100px" style="border:0;box-shadow: none;" data-src="img/Svelte_Logo.svg" alt="svelte logo">

<div class="container">
								<div class="col">
									😊😊😊😊
									<small>
										<ul>
											<li>sans beaucoup d'efforts 98% au score <a href="https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=https%3A%2F%2Fdeces.matchid.io" target="_blank">Google PSI</a></li>
											<li>taille après build et zip: React: 896ko , Svelte: 30ko</li>
											<li>syntaxe allégée et puissamment simplificatrice</li>
											<li>rollup remplace agréablement webpack</li>
										</ul>
									</small>
								</div>
								<div class="col">
									😔😔<br/>
									<small>
										<ul>
											<li>bulma: svelma pas assez mûr (modal, burger)</li>
											<li>routeur svelte-spa-routeur pas assez configurable</li>
											<li>pas de packet google analytics (mais quelques lignes suffisent)</li>
										</ul>
									</small>
								</div>
							</div><br/>
							<small>
								grâce à Svelte, le mode recherche avancée est maintenant <a href="https://deces.matchid.io/?advanced=true" target="_blank">disponible sur deces.matchid.io</a>
							</small>

Svelte est écolo

### + Svelte.js en résumé -
							<img height="100px" style="border:0;box-shadow: none;" data-src="img/Svelte_Logo.svg" alt="svelte logo">

<div class="container">
								<div class="col">
									😊😊😊😊
									<small>
										<ul>
											<li>moins de code : réactivité, store, composants</li>
											<li>légèreté et optimisation</li>
											<li>réactivité accrue grâce au compilateur</li>
											<li><b>😍 Tutoriel interactif 😍</b></li>
										</ul>
									</small>
									<br/><br/>
									à choisir :
									<small>
										<ul>
											<li>si vous aimez la liberté du DIY</li>
											<li>les syntaxes rapides</li>
										</ul>
									</small>
								</div>
								<div class="col">
									😔😔<br/>
									<small>
										<ul>
											<li>écosystème npm pauvre</li>
											<li>idem côté stackoverflow</li>
											<li>scaffolding</li>
										</ul>
									</small><br/><br/><br/>
									à éviter :
									<small>
										<ul>
											<li>si vous aimez le préfabriqué</li>
											<li>si craignez le hors piste</li>
										</ul>
									</small>
								</div>
							</div>

## Numérique
								connaître l'usage
									<div class="container higher-24">
										<div class="col left">
											<small>
												<p>
													En 2013 Syntec introduisait le terme ESN (<a href="https://fr.wikipedia.org/wiki/Entreprise_de_services_du_num%C3%A9rique" target="_blank">Entreprises de
													service numérique)</a>, pour succéder aux "SSII".
												</p>
												<p>
													En 2020 l'ensemble des "DSI" de l'État sont des <a href="https://www.numerique.gouv.fr/dinum/" target="_blank">DNUM</a>.
												</p>
												<p>
													Le digital a apporté son lot de termes:
													<a target="_blank" href="https://fr.wikipedia.org/wiki/Interface_utilisateur">UI</a>,
													<a target="_blank" href="https://fr.wikipedia.org/wiki/Exp%C3%A9rience_utilisateur">UX</a>,
													<a target="_blank" href="https://fr.wikipedia.org/wiki/Scrum_(d%C3%A9veloppement)">PO</a>,
													<a target="_blank" href="https://en.wikipedia.org/wiki/Business_intelligence">BI & big data</a>,
												</p>
												<p>
													Les grandes structures héritant des DSI ont tendance à appliquer la méthode d'inclusion des buzzword
													en les vidant de leur philosophie.
												</p>
											</small>
										</div>
										<div class="col left">
											<small>
													<p>
														Le seul véritable pattern différenciant c'est de <a href="https://f14e.fr/2020/01/23/who-are-the-maddest/" target="_blank">tester avec
														sincérité le client pour le comprendre</a>, le cibler, se remettre en question.
													</p>
													<p>
														Le <a target="_blank" href="https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche">SEO</a> a tendance
														est une des facettes orienté compérhension client (marketing) qui aide à faire converge un produit vers
														son public, qualifié.
													</p>
													<p>
														L'éthique RGPD est heureusement bien ancrée dans l'administration. Mais elle freine l'usage d'outils facilitant l'amélioration de la
														qualité du service.
													</p>
											</small>
										</div>
									</div>

## analyse SEO

<div class="container center higher">
								<div class="col left">
									<small>
										<p>
											Le monde SEO est très commercial. Plein d'outils se partagent
											le marché, avec des audits automatisés gratuits et des services de conseil.
										</p>
										<p>
											Les axes d'analyse d'un site sont plus ou moins:
											<ul>
												<li>La description pour les moteurs de recherche (balises meta)</li>
												<li>Le contenu textuel</li>
												<li>La vélocité et l'accessibilité mobile</li>
												<li>Le social</li>
											</ul>
										</p>
										<p>
											Je ne fais pas de pub pour ça, il y en a plein en cherchant "analyse SEO" sur le web.
										</p>
									</small>
								</div>
								<div class="col center">
									<small>
										Ça donne ça :<br/>
										<img width="100%" style="border:0;box-shadow: none;" data-src="img/SEO-2.png" alt="SEO">
										ou ça:<br/>
										<img height="300px" style="border:0;box-shadow: none;" data-src="img/SEO-1.png" alt="SEO">
									</small>
								</div>
							</div>

### Google Search Console

<div class="container center higher">
								<div class="col left">
									<small>
										<p>
											Pour les balises meta,
											<a target="_blank" href="https://www.webrankinfo.com/dossiers/techniques/guide-balises-meta">c'est simple (cf ici)</a>.
										</p>
										<p>
											Pour être sûr de son référencement, le mieux est d'utiliser
											<a target="_blank" href="https://search.google.com">Google Search Console</a>
										</p>
										<p>
											Il faut bien patienter de 24 à 48h:
										</p>
										<img height="250px" style="margin-top:-16px; margin-bottom:-16px;border:0;box-shadow: none;" data-src="img/search-console-clics.png" alt="search console">
										<p>
											Pour le site, l'une des optimisations SEO a consisté à basculer le sous-nom de domaine
											de "personnes-decedees" à "deces" (une url courte est un critère SEO).
										</p>
									</small>
								</div>
								<div class="col left">
									<small>
										<p>
											La search console permet aussi de voir ce que les gens cherchent pour venir:
										</p>
										<img height="200px" style="margin-bottom:16px;border:0;box-shadow: none;" data-src="img/search-console-keywords.png" alt="search console">
										<p>
											En l'espèce c'est <a target="_blank" href=https://www.data.gouv.fr/fr/reuses/moteur-de-recherche-des-personnes-decedees-matchid/">data.gouv.fr</a>
											qui a vraiment servi à la publicité du site, et cela aura permis au site de matchid d'être au moins premier
											sur son propre mot clé.
										</p>
										<p>
											Le terme "décès", lui est beaucoup trop concurrentiel.
										</p>
									</small>
								</div>
							</div>

### Page speed insights

<div class="container center higher">
									<div class="col left">
										<small>
											<p>
												Vous connaissez certainement l'audit F12 Chrome :
											</p>
											<img width="100%" style="margin-top:-16px; margin-bottom:-16px;border:0;box-shadow: none;" data-src="img/chrome-audits.png" alt="chrome audits">
											<p>
												Cette console donne énormément de conseils pour l'optimisation, notamment du temps de chargement, l'optimisation
												des images, les redirections, etc.
											</p>
											<p>
													Un test via <a target="_blank" href="https://deces.matchid.io/">PageSpeed Insight</a> (toujours Google) permet de s'abstraire de votre
													réseau (3G ou fibre) et sera plus universel pour vos tests notamment des clients mobiles:
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<img width="100%" style="margin-top:-16px; margin-bottom:-16px;border:0;box-shadow: none;" data-src="img/pagespeed-insights.png" alt="chrome audits">
											<p>
												Le test peut être également automatisé via le package <a target="_blank" href="https://www.npmjs.com/package/psi">npm psi</a> (thx <a href="https://cristianpb.github.io/blog" target="_blank">
												Cristian</a>)
											</p>
										</small>
									</div>
								</div>
								<small class"higher">Note: le score de 99 est facilité par la simplicité voulue pour l'appli
									- en mobilité les scores de 80% sont déjà très bons</small>

### Optimisations 1/2
								<small>
									<b>Premature optimization is the root of all evil (Donald Knuth, 1974)</b><br/>
									Ou avant de prendre des médocs, vérifiez que vous êtes malade (cf outils supra)
								</small>
								<div class="container">
									<div class="col left">
										<small>
											<p>
												Deux stats (à googliser pour les sources):
												<ul>
													<li>
														57% des utilisateurs abandonnent la consultation d'un site mettant
															plus de 3 secondes à charger
													</li>
													<li>
														80% ne reviennent pas sur le site
													</li>
												</ul>
											</p>
											<p>
												La vitesse est donc primordiale
											</p>
											<p>Mais c'est un jeu d'effets visuels !
												<ul>
													<li>On n'optimise que le premier visuel de téléchargement</li>
													<li>Le reste du site non visuel est reporté de façon asynchrone</li>
												</ul>
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												Images, icones et fontes:
												<ul>
													<li>privilégier vectoriel pour les logos</li>
													<li>photos: recompressez le jpg (e.g convert sous linux)</li>
													<li>on reporte le chargement de ce qui ne tient pas sur le premier écran (lazy load)</li>
													<li>évitez la démultiplication des fontes</li>
													<li>une pas charger tout Font Awesome, mais icone par icone</li>
												</ul>
											</p>
											<p> Attention aux "nouveaux formats" (jpeg2000 & co).
												Chrome/Safari/Firefox = 3 formats.
												L'absence de standard nécessite une lib js lourde qui runine l'optimisation.
												</ul>
											</p>
										</small>
									</div>
								</div>

### Optimisations 2/2
								<div class="container higher-24">
									<div class="col left">
										<small>
											<p>												<p>
												CSS:
												<ul class="higher-24">
													<li>
														ne chargez pas tout Bootstrap ou Bulma (la version minifiée de Bulma fait 300k,
														29k sont utiles pour deces.matchid.io.
													</li>
													<li>
														Il existes des outils et sites en ligne pour nettoyer les css, eg. <a target="_blank" href="https://purifycss.online/">PurifyCSS</a>
														aussi intégrable à la compilation. Ils sont imparfaits (n'analysent pas votre js).
													</li>
													<li>
														L'artisanat CSS est votre ami. Lisez des <a target="_blanck" href="https://www.sitepoint.com/optimizing-css-performance/">préco</a>.
													</li>
												</ul>
											</p>
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												JS:
												<ul class="higher-24">
													<li>ne pas charger de grosse lib complète (type $loadash), appeler les sous-modules</li>
													<li>bien configurer son webpack ou rollup pour la segmentation en chunks.js</li>
													<li>polyfills: n'utilisez que le minimum, abandonnez la forte rétrocompatibilité (exit IE11 en 2020)</li>
													<li>utilisez Svelte 😊</li>
													<li>Avec Vue.js la cli 3 permet des analyses des libs js lourdes</li>
											</ul>
										</p>
									</small>
								</div>
							</div>
							<small>
								Réseau:
								<ul>
									<li>évitez les multiples redirections</li>
									<li>réduisez la latence avec un CDN type Cloudflare</li>
									<li>utilisez une politique de cache > 4h sur les contenus statiques</li>
								</ul>
							</small>

## Fantasmes
							<div class="container higher">
								<div class="col left">
									<small>
										<p>
											Il y a beaucoup de modèles possibles aujourd'hui grâce
											aux 🖖-aaS.
										</p>
										<p>
											La standardisation des configurations de conteneurs de la plupart
											des logiciels autour de Docker m'ont persuadé que c'était
											la brique incontournable pour un <a target="_blank" href="https://github.com/PaaS-datascience/">PaaS</a>
										</p>
										<p>
											Le caractère verbeux de Terraform, et même de de Kubernetes me semblaient exagérés par rapport à feu Swarm
										</p>
										<p>
											J'ai commencé le projet en imaginant aller jusqu'à un usage multi-cloud OVH, Scaleway et Outscale
											en poussant a minima le CI/CD complet et le IaaS de ces fournisseurs, si possible Kubernetes
										</p>
									</small>
								</div>
								<div class="col left">
									<small>
										<p>
											Au passage, j'aimerais expérimenter :
										</p>
										<p>
											<a target="_blank" href="https://rancher.com">
												<img height="24px" style="margin-top:4px;border:0;box-shadow: none;" data-src="img/rancher-logo-cow-blue.svg" alt="rancher logo">Rancher
											</a>
											dont la réputation est croissante cette année, et semble correspondre à une cible générique hybride intéressante,
											conforté par cet <a href="https://medium.com/@abenahmed1/mise-en-oeuvre-dun-cluster-kubernetes-dans-une-instance-amd-epyc-de-scaleway-via-rancher-et-7372a3fc22a6" target="_blank">excellent article</a>.
										</p>
										<p>
											Je voulais regarder d'autres PaaS,
											à la <a target="_blank" href="https://scalingo.com">Scalingo</a>, <a target="_blank" href="https://www.clever-cloud.com/en/">Clever Cloud</a>
											ou <a target="_blank" href="https://www.cycloid.io/">Cycloid</a>. On me parlait également de <a target="_blank" href="https://bonsai.io">Bonsai.io</a>
											pour Elasticsearch, et plus récemment de <a target="_blank" href="https://cloudron.io/">Cloudron</a>.
										</p>
										<p>
											Cependant les modèles aussi bien de déploiement, que de facturation
											sont plus que variés, et l'effet de lock-in reste une crainte.
										</p>
									</small>
								</div>
							</div>

## Réalité

<div class="container higher">
								<div class="col left">
									<small>
										<p>
											Le contexte :
											<ul>
												<li>je suis seul, c'est un side project</li>
												<li>priorité à un service "public" gratuit</li>
												<li>livrer vite pour voir le public</li>
												<li>limiter les coûts récurrents et dépendances</li>
											</ul>
										</p>
										<p>
											Dans l'esprit, pour les suites, soit je peux assumer les coûts,
											soit le service me dépasse, et je fais en
											sorte qu'il soit incubable par l'Administration
										</p>
										<p>
											La première verision est donc déployée à la mano sur un hôte, que ce soit
											pour du dev, du build ou du run, avec une simple automation make et docker.
										</p>
									</small>
								</div>
								<div class="col left">
									<small>
										<p>
											Je réutilise alors un hôte existant (tutoriel de <a target="_blank" href="https://www.matchid.io">matchID</a> et hôte historique
											de tests <a target="_blank" href="https://histovec.interieur.gouv.fr">Histovec</a>
												et <a target="_blank" href="www.previsecours.fr">Previsecours</a> pour le lancement.
											Coût 0, mais j'avais un récurrent de 24€/mois pour ces projets historique, que j'ai fermé depuis.
										</p>
										<p>
											Autour j'avais déjà mes petits éléments de séparation de flux (bastion, proxy,
											load balancer), petits serveurs à 3€/mois.
										</p>
										<p>
											Pour être secure, je préfère mettre en place un CDN, n'ayant
											aucune idée du volume d'audience (et les service anti-DDoS associés aux CDN
											ont tendance à me rassurer).
										</p>
									</small>
								</div>
							</div>

### CDN: Cloudflare
								<div class="container higher">
									<div class="col">
										<small>
										<p class="left"><a target="_blank" href="www.cloudflare.com">Cloudflare</a> (découvert grâce à <a target="_" href="https://guillim.github.io/">@Guillim</a>)
											est un CDN qui accélère le chargement de votre site, gratuit pour un usage simple.
										</p>
										<img class="higher-24" height="500px" style="border:0;box-shadow: none;" data-src="img/deces-ui-CDN.png" alt="CDN schema">
										</small>
									</div>
									<div class="col left">
										<small>
											<p>
												Les bénéfices, des services très flexibles:
												<ul class="higher-24">
													<li>DNS</li>
													<li>Certificats/Sécurité/Firewall/DDoS</li>
													<li>Cache et répartition mondiale (SEO++)</li>
													<li>Graphiques des consultations</li>
												</ul>
											</p>
											<p>
												Les points d'attention:
												<ul class="higher-24">
													<li>bascule initial DNS de >24h</li>
													<li>vider le cache lors des déploiements</li>
												</ul>
											</p>
											<p> Un bon moniteur  pour la fréquentation :
											<img width="100%" style="border:0;box-shadow: none;" data-src="img/stats-users-janvier.png" alt="deces.matchid.io">
											</p>
										</small>
									</div>
								</div>

## Première prod
							<div class="container higher">
								<div class="col left">
									<small>
										<p>
											Début janvier:
											<ul>
												<li>découverture du public: les généalogistes</li>
												<li>concurrence: marché payant (type Filae) avec des services complémentaires (sources d'archives, ...)</li>
												<li><b>1200</b> utilisateurs/jours</li>
											</ul>
										</p>
										<p>
											Un peu de jonglage ssh pour quelques fixes nécessaires: changement de version
											(rédemarrage docker/nginx: 15s d'indispo), et bascules elasticsearch (plusieurs
											dataprep nécessaires).
										</p>
									</small>
								</div>
								<div class="col left">
									<small>
										<p>
											Le public n'est pas celui envisagé, les généalogistes on besoin de faire des enquêtes,
											certaines sont impossibles avec la recherche simple (les Jean Martin, ...).
										</p>
										<p>
											Je suis dans l'impasse pour des recherches avancées avec Search-UI, je n'ai plus assez
											de temps pour découvrir Rancher...
										</p>
										<p>
											Je fais ce qu'il faut pour un service régulier
											à coût minimisé et sans temps à consacrer à la prod: CI, CD en blue/green, et plusieurs
											IaaS pour la réversibilité.
										</p>
									</small>
								</div>
							</div>