oCamlCase
2026React + TypeScriptocamlcase.dev ↗code source ↗
Un site interactif pour apprendre OCaml par les modèles mentaux plutôt que par la syntaxe mémorisée.
- concepts
- 27 pages
- exercices
- 33 minis + 6 projets
- labs
- 4 interactifs
- licence
- open source
Ce que c'est
Chacune des 27 pages de concepts est construite autour d'un seul modèle mental, des liaisons et closures à l'inférence de types et à la récursivité terminale. Deux modes de navigation répondent à des besoins différents : une Référence à plat et un Parcours guidé. La progression est enregistrée dans le localStorage ; pas de compte, pas de pistage.
Labs
- Arbre de dérivation de types : un vrai vérificateur de types, écrit en TypeScript, qui dessine son raisonnement sous forme d'arbre.
- Explorateur d'arbres : un rose tree, quatre modes de vue (visite, linéarisation, projection, équilibrage).
- Pipeline d'interpréteur : une expression à faire défiler à travers six étapes, des caractères aux tokens, à un arbre, à une valeur.
- Playground : le vrai toplevel OCaml, compilé en JavaScript, dans le navigateur.
Notes techniques
- L'élaborateur, le parseur et l'évaluateur sont des implémentations TypeScript maison, pas un widget tiers intégré.
- Le code splitting par route a fait passer le bundle de 840 kB à 655 kB.
- Des heads prérendus par route et une sitemap générée couvrent 105 routes.
- Déployé sur GitHub Pages ; la CI lance les tests avant chaque build.
Essayer sur ocamlcase.dev ↗ocamlcase.dev
gratuit · sans compte
Motivation
OCaml est le langage d'introduction à la programmation fonctionnelle à la TUM, et la plupart des tutoriels sont centrés sur la syntaxe. Ce site est la ressource orientée modèles mentaux que j'aurais voulu avoir en apprenant.
Ce que j'ai appris
Implémenter moi-même le vérificateur de types et l'interpréteur a approfondi exactement la compréhension que le site cherche à transmettre. Expliquer des concepts oblige à la précision, et mettre le site en production a été un bon exercice de bundling, de SEO et de CI.