Js_of_ocaml (entre autres)

Xavier Van de Woestyne

• nukifw
• xvw

Dégommer la concurrence

• Netscape VS Internet Explorer
• Course à la feature
• Un langage pour ajouter des effets aux pages
• Brendan Eich, en 1995

Un langage conçu en 10 jours

• Initialement nommé Livescript
• Renommé Javascript, pour attirer les médias (que de convictions!)
• Inspiré par Scheme et Self

Ce qui explique sa forme "orientée prototype" et fonctionnelle

DOM 0, welcome DHTML

<a href="#" onclick='alert("Hello World!")'>
  Say hello !
</a>

C'est à partir de ce moment que Javascript à
commencé à traîner sa mauvaise réputation...

AJAX, Bibliothèques et ECMAScript

• XML/HttpRequest, Rechargement de fragments de pages
  (déjà dans Rails en 2005!)
• Selecteurs dans les bibliothèques, faisant évoluer
  Javascript (mais aussi le CSS)
• La diversité d'implémentation implique une normalisation:
  ECMAScript

Applications web

Le monde s'est ouvert aux applications web et Javascript est
devenu un outil "convaincant" pour décrire les interactions clients
à tel point qu'il est devenu l'Assembleur du web.

Javascript côté serveur

• Node.js
• Meteor (isomorphique ... aha)
• Js_of_ocaml dans Eliom (isomorphique aussi... aha2)
• ...

Pourquoi?

Plaire à beaucoup de développeurs...

Compilation vers Javascript

Pour les mêmes raisons que ceux qui se servent de Javascript
côté client, pourquoi apprendre un autre langage ?

• Coffescript (Surement le plus populaire)
• Dart (Proposant une VM)
• Haxe (Compile vers... tout :D)
• OPA (...)
• Js_of_ocaml
• ...

Profit

Sucrage syntaxique, analyse statique

• Typescript (Typage optionnel)
• Funscript (Typage statique)
• Purescript (Typage statique)
• Flow (Analyse statique de code)
• ...
• Js_of_ocaml (of course ;))

Avantage du typage statique

• Aider l'ordinateur à prévenir les erreurs courantes
• Greffer des informations sémantiques
• Polymorphisme paramétrique (types généralisés fixables)
• Diriger son code par les types

On arrête de se prendre pour un compilateur en écrivant des
milliers de jeux de tests (même s'il en faut toujours, parfois !)

OCaml

• Un langage très expressif
• Multi-paradigme
• Très performant
• Statiquement et fortemment typé

Js_of_ocaml s'inscrit dans la suite de logiciel Ocsigen

OCaml en dehors de la fac

• Microsoft
• Dassault
• Janestreet
• Citrix
• Facebook
• Besport
• ...

Ocsigen

OCaml SIte GENerator

Ocsigen

• Eliom : Cadriciel de développement serveur
• Lwt : Bibliothèque pour la concurrence
• TyXML : Production de XML (et par extension de HTML5) statiquement typé
• Macaque : Production de requêtes statiquement typé
• Js_of_ocaml : Compilation et typage du Javascript
• O'Browser : VM OCaml embarquée dans un navigateur
• ...

Js_of_ocaml?

Compilateur du byte-code OCaml vers Javascript

• Résolution de soucis de portées
• Typage statique du Javascript
• Extensions de syntaxes
• Support très complet du OCaml

Performances

• Isolation du code mort
• Optimisations simples (inline)
• Optimisations bas niveau (à la ASM.js)

Concurrence

Lwt est un système de multithreading collaboratif

• Exécution simultanée de thread
• Grande bibliothèque (entrées/sorties, réseau)
• Style monadique
• Adapté au cadre d'exécution mono-threadé de Javascript

Distinction syntaxique au sein du code

ocaml_obj # message

js_obj ## message

new ocaml_class(args)

jsnew javascript_class(args)

"OCaml string"

Js.string "Javascript string"

[|1;2;3|]

Js.array [|1;2;3|]

Apports de OCaml

• Type option pour éviter les undefined
• Vérification statique
• Erreurs explicites (à la compilation)
• Expressivité du langage
  • Déclaration de types
  • Objets (transformables en Json)
  • Modules et foncteurs

Le workflow de programmation est réduit

Monades

type 'a t

val return :'a -> 'a t

val bind :'a t -> ('a -> 'b t) -> 'b t

Généralisation sur les types paramétrés
pour permettre la composition

Promises (ou Futures, "no idea")

• when.resolve : return
• when : bind

Composition forte !

Lwt pour la concurrence

let _ =
  let open Lwt_js_events in
    async_loop click Dom_html.document
      (fun event () -> Dom_html.window ## alert (Js.string "Hello"))

Binding de bibliothèques

• Accès à du code non vérifié
• Wrapping de callback OCaml
• Construction de prototypes Javascript

Jquery statiquement typé

• Constantes en types sommes
• Typage du gestionnaire d'évènement
• Syntaxe de sélection uniforme

Exemple de client-server

Séparation des couches

• {server{ ... }}
• {client{ ... }}
• {shared{ ... }}

Communication forte

• Le serveur peut appeler des fonctions clients
• le client peut appeler des fonctions serveurs

• Difficile à prendre en main
• Communication avec le monde extérieur parfois
  douloureuse
• Déboguage en aval complexe
• Documentation... :'(

• Performance
• Déboguage en ammont simple
• Diminution du workflow
• Modèles de programmation convaincants (et multiples)
• Communication entre les couches aisée
• Beaucoup moins de tests unitaires
• C'est du OCaml :P