URL:     https://linuxfr.org/news/les-travaux-de-marijn-haverbeke
Title:   Les travaux de Marijn Haverbeke
Authors: Bruno Michel
         Xavier Teyssier
Date:    2020-05-03T21:48:02+02:00
License: CC by-sa
Tags:    
Score:   4


Marijn Haverbeke est un développeur que j'apprécie beaucoup. Ses projets sont pour la plupart écrits en JavaScript, langage que j'apprécie habituellement que moyennement, mais la qualité de son code le rend plaisant à lire. Et c'est toujours très bien documenté ! Comme ses travaux n'ont pas encore eu beaucoup d'échos sur LinuxFr.org, je me propose de vous les présenter.

----

[La page personnelle de Marijn Haverbeke](https://marijnhaverbeke.nl/)
[Eloquent JavaScript](https://eloquentjavascript.net/)
[ProseMirror](https://prosemirror.net/)
[CodeMirror](https://codemirror.net/)
[Lezer](https://lezer.codemirror.net/)
[Financer ses travaux](https://marijnhaverbeke.nl/fund/)

----

Commençons par [Eloquent JavaScript](https://eloquentjavascript.net/). C'est un ouvrage, dont la version en ligne est gratuite, qui enseigne le JavaScript. Il est régulièrement cité comme étant ce qui se fait de mieux pour les débutants qui veulent apprendre le JS.

![Logo de ProseMirror](https://avatars0.githubusercontent.com/u/13659461?s=100&v=4)


ProseMirror est une boîte à outils pour construire des éditeurs web de texte riche. En particulier, il inclut les fondations permettant de faire de l'édition collaborative. J'ai découvert ce projet lors du développement de cozy-notes (cf la dépêche [des nouvelles de Cozy](https://linuxfr.org/news/des-nouvelles-de-cozy#toc-vos-id%C3%A9es-sont-pr%C3%A9cieuses-notezles)) et j'ai été impressionné par la qualité : [les concepts de base](https://prosemirror.net/docs/guide/) sont bien expliqués, le code est modulaire et bien organisé, on sent une grande maîtrise du sujet, aussi bien sur les manipulations du DOM dans le navigateur que sur les aspects algorithmique pour l'intégration automatique des changements lors de l'édition collaborative.

![Logo de CodeMirror](https://codemirror.net/doc/logo.png)


CodeMirror est le pendant de ProseMirror pour le code : c'est un éditeur de code en ligne, avec coloration syntaxique, thèmes, auto-complétion, recherche, intégration d'outils de lint, etc. Il est utilisé par les devtools de votre navigateur et [par beaucoup d'autres projets](https://codemirror.net/doc/realworld.html).

![Logo de Lezer](https://lezer.codemirror.net/css/logo.png)


En parlant de CodeMirror, la version actuelle est la 5 et la version 6, en cours de développement, sera une réécriture complète. Parmi les nouveautés, il y aura une meilleure accessibilité, une prise en charge améliorée des touchscreens et une meilleure analyse du contenu. Pour cela, le projet Lezer a été développé. C'est un outil pour écrire des parsers.

Vous vous souvenez peut-être de Lex et Yacc. Là, c'est la même chose mais avec des objectifs liés à CodeMirror : déjà, le parser va être en JavaScript. Ensuite, on charge à minimiser le poids à télécharger pour le parser. Le parser doit également être rapide et pouvoir travailler de manière incrémentale. Enfin, il doit être tolérant aux erreurs : si une personne est en train de taper du code dans CodeMirror, ce serait dommage qu'elle ne puisse pas profiter de la coloration syntaxique tant qu'elle n'a pas fini l'instruction ou le bloc en cours.

Lezer permet d'écrire un fichier `.grammar` qui représente la grammaire à parser, avec des points d'entrées pour brancher du code JavaScript. Tout cela est ensuite transformé en parser JS qui pourra être utilisé dans CodeMirror ou ailleurs. À titre d'exemple, voici à quoi ressemble le fichier `.grammar` pour décrire la syntaxe JSON :


```ragel
@top JsonText { value }

value { True | False | Null | Number | String | Object | Array }

String { string }
Object { "{" list<Property>? "}" }
Array  { "[" list<value>? "]" }

Property { PropertyName ":" value }
PropertyName { string }


@tokens {
  True  { "true" }
  False { "false" }
  Null  { "null" }

  Number { '-'? int frac? exp?  }
  int  { '0' | $[1-9] std.digit* }
  frac { '.' std.digit+ }
  exp  { $[eE] $[+\-]? std.digit+ }

  string { '"' char* '"' }
  char { $[\u{20}\u{21}\u{23}-\u{5b}\u{5d}-\u{10ffff}] | "\" esc }
  esc  { $["\/bfnrt] | "u" hex hex hex hex }
  hex  { $[0-9a-fA-F] }

  whitespace { $[ \n\r\t] }
}

@skip { whitespace }
list<item> { item ("," item)* }

@detectDelim
```

Pour finir, si vous appréciez comme moi les travaux de Marijn Haverbeke, vous pouvez financer leur maintenance via un don sur https://marijnhaverbeke.nl/fund/.