A 'Melange' of Tooling

Melange is a new compiler for OCaml targeting JavaScript. Melange codebases integrate with the OCaml Platform: install from OPAM, build with Dune, preprocess with `ppxlib`, format with OCamlformat and publish with `dune-release`. Merlin, OCaml-LSP and `odoc` work out of the box.
In this talk, I will tell you about the Melange success story and give a glimpse of what's coming in the near future.

Transcript

1. @_anmonteiro A Melange of Tooling
2. Bret Victor -- Inventing on Principle
3. What’s my principle?
4. Let’s take a small step back in time… What’s my principle?
12. youtu.be/vSSpbAI_-t0
14. $ opam install melange
15. $ opam install melange $ opam install reason-react $ opam install melange-{json,fetch}
16. $ echo '(using melange 0.1)' >> dune-project $ dune build @melange
22. refmt dune-release
23. Melange is "simple"
24. Simplicity doesn’t exclude power
25. We need tools that do their job, but allow us to do ours Simplicity doesn’t exclude power
26. (melange.emit (target artifact-directory))
27. (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
28. (target artifact-directory) (melange.emit (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
29. (promote (until-clean)) (melange.emit (target artifact-directory) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
30. (alias my-js) ;; dune build @my-js (melange.emit (target artifact-directory) (promote (until-clean)) (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
31. (libraries reason-react) (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
32. (preprocess melange.ppx reason-react-ppx) (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
33. (compile_flags :standard --mel-cross-module-opt) (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
34. (module_systems (es6 .mjs)) (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public)))
35. (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public))) (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs))
36. (melange.emit (target artifact-directory) (promote (until-clean)) (alias my-js) ;; dune build @my-js (libraries reason-react) (preprocess melange.ppx reason-react-ppx) (compile_flags :standard --mel-cross-module-opt) (module_systems (es6 .mjs)) (runtime_deps ./styles.css (glob_files_rec ./resources/*.{png,js}) (source_tree ./public))) Simple, yet powerful
37. modularity composition Simplicity promotes
38. modularity composition robust, reliable software Simplicity promotes
39. “Simplicity is prerequisite for reliability.” Edsger W. Dijkstra
41. Collaboration drives excellence
42. Melange team (Portugal, circa August 2023)
43. New features must be driven by real-world use cases Users make Melange better
45. Share Examples GitHub OPAM Melange 4.0.0-52 OCaml 5.2.0 Reason 3.12.0 ReasonReact 0.15.0 OCaml Reason Format Problems No problems! Live JavaScript output This div has the ID selector preview . Choose "React Greetings" in the Examples menu to see it in action, or override by rendering into the element with ReactDOM.querySelector("#preview") Console 0 Loading...
46. #1164 - Dynamic Import
47. Share Examples GitHub OPAM Melange 4.0.0-52 OCaml 5.2.0 Reason 3.12.0 ReasonReact 0.15.0 OCaml Reason Format Problems No problems! Live JavaScript output Console 0 Loading... Loading...
48. Share Examples GitHub OPAM Melange 4.0.0-52 OCaml 5.2.0 Reason 3.12.0 ReasonReact 0.15.0 OCaml Reason Format Problems No problems! Live JavaScript output Console 0 Loading... Loading...
50. Original code 0: z.ml Generated code Wrap
51. What’s my principle?
52. That I want to use 1. Build simple tools
53. That I want to use 1. Build simple tools 2. Invert from user needs
54. That I want to use 1. Build simple tools 2. Invert from user needs 3. Work with cool, talented people
55. @_anmonteiro