Opa, un nouveau langage Web client-serveur

J’ai découvert Opa totalement par hasard, c’est un langage de programmation d’applications et services web dont la première release est parue en 2011. Il a été « influencé » par OCaml et Erlang.

Il a la particularité d’être à la fois client et serveur (+ base de données). Aspect important également, c’est un langage compilé par OCaml et donc, non interprété.

Autres aspects :

  • Support de HTML5 (Canvas 2D, WebGL 3D, SVG, File) et CSS3
  • Support de MongoDB en base de données
  • Typage fort
  • Syntaxe proche de Javascript
  • Le code client est compilé en jQuery !
  • Il intègre le Bootstrap Twitter pour faire facilement vos UI

Dans quel cas utiliser Opa ?

Opa est conçu pour les applications Web en temps réel (chats, jeux, tout ce qu’on peut trouver en multi-utilisateurs).

A quoi ressemble le code d’Opa ?

Un Hello world vaut toujours mieux qu’un long discours…

Server.start(
	Server.http, {
		page: function() {
			<h1>Hello, world</h1>
		},
		title: "Hello, world"
	}
)

Ce code démarre un serveur HTTP, avec une page HTML dont le titre est « Hello, world » et en contenu, ce qu’on trouve dans la fonction anonyme de page.

Comment l’installer et l’essayer ?

Opa est depuis le 11 avril 2012 en version 0.9.2 et est utilisable dorénavant sur Windows.

Les OS compatibles pour installation :

  • Mac OS X – x64
  • Windows – x64
  • Ubuntu – x64
  • Linux – x64

Pour les plateformes x86 ce n’est pas encore disponible mais il est possible de compiler sa propre build.
Idem pour FreeBSD.

J’ai personnellement essayé uniquement sur Windows, donc il suffit de lancer l’installeur et d’attendre la fin de l’installation.

Pour faire fonctionner notre « Hello world », créer un fichier hello.opa de préférence dans le répertoire d’installation et y coller le contenu du code vu précédemment.

Il faut compiler ce fichier pour en faire un exécutable (*.exe). Pour ce faire, ouvrir une Invite de commandes et pointer vers le répertoire où se trouve le fichier hello.opa et lancer cette commande :

opa hello.opa --

La compilation va prendre plusieurs secondes, une fois terminée, le serveur HTTP va démarrer automatiquement et le restera à moins que vous fermiez la fenêtre ou que vous fassiez CTRL + C.
Vous pouvez voir le résultat sur http://localhost:8080.

Peut-on voir un exemple d’application écrite en Opa ?

Oui, l’équipe d’Opa a mis au point un chat (le plus simple qu’il soit) en… 20 lignes de code, mise en forme non comprise.

Voici leur code commenté :

/**
 * {1 Import standard classes of bootstrap css}
 *
 * see http://twitter.github.com/bootstrap/
 */
import stdlib.themes.bootstrap
/**
 * {1 Network infrastructure}
 */
/**
 * The type of messages sent by a client to the chatroom
 */
type message = { string author /**The name of the author (arbitrary string)*/
               , string text  /**Content entered by the user*/
               }
/**
 * The chatroom.
 */
exposed Network.network(message) room = Network.cloud("room")
/**
 * {1 User interface}
 */
/**
 * Update the user interface in reaction to reception of a message.
 *
 * This function is meant to be registered with [room] as a callback.
 * Its sole role is to display the new message in [#conversation].
 *
 * @param x The message received from the chatroom
 */
function user_update(message x) {
    line = <div class="row line">
              <div class="span1 columns userpic" />
              <div class="span2 columns user">{x.author}:</div>
              <div class="span13 columns message">{x.text}</div>
            </div>;
    #conversation =+ line;
    Dom.scroll_to_bottom(#conversation);
}
/**
 * Broadcast text to the [room].
 *
 * Read the contents of [#entry], clear these contents and send the message to [room].
 *
 * @param author The name of the author. Will be included in the message broadcasted.
 */
function broadcast(author) {
    text = Dom.get_value(#entry);
    message = ~{author, text};
    Network.broadcast(message, room);
    Dom.clear_value(#entry);
}
/**
 * Build the user interface for a client.
 *
 * Pick a random author name which will be used throughout the chat.
 *
 * @return The user interface, ready to be sent by the server to the client on connection.
 */
function start() {
    author = Random.string(8);
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <div id=#logo />
        </>
      </>
    </>
    <div id=#conversation class="container"
      onready={function(_) { Network.add_callback(user_update, room) }}></>
    <div id=#footer>
      <div class="container">
        <input id=#entry class="xlarge" onnewline={function(_) { broadcast(author) }} />
        <div class="btn primary" onclick={function(_) { broadcast(author) }}>Post</>
      </>
    </>
}
/**
 * {1 Application}
 */
/**
 * Main entry point.
 *
 * Construct an application called "Chat" (users will see the name in the title bar),
 * embedding statically the contents of directory "resources", using the global stylesheet
 * "resources/chat.css" and the user interface defined in [start].
 */
Server.start(
    Server.http,
    [ {resources: @static_resource_directory("resources")}
      , {register: ["resources/css.css"]}
      , {title: "Chat", page:start }
    ]
);

Autres exemples sur le site officiel

Conclusion

Personnellement je suis très content de cette découverte, ça fait du bien un peu de nouveauté dans ce monde qu’est le Web. Forcément, la communauté autour d’Opa est très faible car le projet est jeune mais très sérieux.

Je vous propose de vous rendre sur leur wiki GitHub si vous êtes intéressés.

Tous les liens pointent vers le site officiel, et en anglais.

Si vous souhaitez vous y mettre et que vous avez besoin d’aide, vous pouvez toujours poster sur StackOverflow avec le tag Opa.

Vous aimerez aussi...