Ocsigen - IRIF · PHP JSP Servlets ASP Ruby on rails HTML5 Javascript Flash. Qu'est-cequ'Ocsigen?....

Ocsigen

Vincent Balat

Epita — 12 mars 2014

Affilia on

Ocsigen est logiciel libre issu d'un projet de recherche (Univ Paris Diderot,CNRS et Inria).

2 projets ANR

Collabora ons avec UPMC, Inria Sophia An polis et Université Paris Nord.

L'évolu on du Web

1992 1997 2002 2007

Yahoo mail

CaraMail

linuxfr

Amazon

Slashdot

phpBBWikipedia

Twitter

Farmville

Google+

Angry birds

Google documents

Pearltrees

Mindmeister

Pivotal Tracker

Facebook

PHP JSPServlets

ASP Ruby on rails

JavascriptFlash

Qu'est-ce qu'Ocsigen ?

.Un framework Web pour :..

les applica ons HTML5 avec beaucoup d'interac ons client / serveur

les sites Web tradi onnels (signets, bouton back, liens, etc)

Les deux ensemble (le programme client ne s'arrête pas pendant la naviga on)

Ocsigen est distribué sous licence LGPL

Exemple

. h p://ocsigen.org/graffi

Exemple :une applica on de dessin

Exemple :une applica on de dessin collabora ve

Le code de Graffi en en er

{shared{open Eliom_pervasivesopen HTML5.Mlet width = 700let height = 400type messages = (string * int * (int * int) * (int * int)) deriving (Json)

module My_appl = Eliom_output.Eliom_appl (structlet application_name = "graffiti"

let b = Eliom_bus.create ~name:"graff" Json.t<messages>

{client{open Event_arrowslet draw ctx (color, size, (x1, y1), (x2, y2)) =

ctx##strokeStyle <- (Js.string color);ctx##lineWidth <- float size;ctx##beginPath();ctx##moveTo(float x1, float y1); ctx##lineTo(float x2, float y2);ctx##stroke()

let main_service = My_appl.register_service ~path:[""] ~get_params:Eliom_parameters.unit(fun () () -> Eliom_services.onload

{{ let canvas = Dom_html.createCanvas Dom_html.document inlet ctx = canvas##getContext (Dom_html._2d_) incanvas##width <- width; canvas##height <- height;ctx##lineCap <- Js.string "round";Dom.appendChild Dom_html.document##body canvas;

let slider = jsnew Goog.Ui.slider(Js.null) inslider##setMinimum(1.); slider##setMaximum(80.);slider##render(Js.some Dom_html.document##body);

let pSmall = jsnew Goog.Ui.hsvPalette(Js.null, Js.null, Js.some (Js.string "goog-hsv-palette-sm")) in

pSmall##render(Js.some Dom_html.document##body);

let x = ref 0 and y = ref 0 inlet set_coord ev =

let x0, y0 = Dom_html.elementClientPosition canvas inx := ev##clientX - x0; y := ev##clientY - y0 in

let compute_line ev =let oldx = !x and oldy = !y inset_coord ev;let color = Js.to_string (pSmall##getColor()) inlet size = int_of_float (Js.to_float (slider##getValue())) in(color, size, (oldx, oldy), (!x, !y))

inlet (b : messages Eliom_bus.t) = %b inlet line ev =

let v = compute_line ev inlet _ = Eliom_bus.write b v indraw ctx v

inignore (Lwt_stream.iter (draw ctx) (Eliom_bus.stream b));ignore (run (mousedowns canvas

(arr (fun ev -> set_coord ev; line ev)>>> first [mousemoves Dom_html.document (arr line);

mouseup Dom_html.document >>> (arr line)])) ());}};

Lwt.return(html

(head(title (pcdata "Graffiti"))[link ~rel:[ `Stylesheet ] ~href:(uri_of_string"./css/style.css") ();script ~a:[a_src (uri_of_string "./graffiti_oclosure.js")] (pcdata "");])

(body [h1 [pcdata "Graffiti"]])))

� Court

� Un seul code

Lwt.return(html

� côté server

� code partagé

� code client , compilé vers JS

Lwt.return(html

� Court

� Un seul code

Lwt.return(html

� côté server

� code partagé

Lwt.return(html

� Court

� Un seul code

Lwt.return(html

� côté server

� code partagé

Lwt.return(html

� Court

� Un seul code

Lwt.return(html

� côté server

� code partagé

Une applica on Web client/servercomme un seul programmeAvantages :

Même language

Mêmes structures de données — pas besoin de conversions

Code partagé

Générer des por ons de la page soit sur le server (indexa on...) soitle client (mises à jour)

Appels de fonc ons distants

U liser des variables serveur depuis le côté client

Les buts d'Ocsigen.Expressivité..

Expressivité du langage lui-même

Concepts de haut niveau adaptés aux besoins des développeurs Web.

.Securité..

Garan es de sécurité offertes par le langage ou par Ocsigen(pas d'injec on de code possible,...)

.Améliorer la fiabilité, Réduire le temps de débogage..

Grâce à un langage compilé, avec un typage sta que puissant

Le HTML respecte les recommanda ons du W3C (Vérifié à la

compila on !)

URLs générées dynamiquement⇒ pas de liens morts

Applica ons Web client-serveur

Programmer l'interac on Web tradi onelle

Générer du HTML

Conclusion

Générer du HTML

Conclusion

Le langage

Très expressif: fonc onnel, orienté objet, modules paramétrés …

Système de types très riche (typage sta que !)

Langage compilé (rapide)

Syntaxe extensible

Nombreuses bibliothèques et bindings

Communauté d'u lisateurs, u lisateurs industriels

Quelques u lisateurs d'OCaml

Jane Street Capital Transac ons financièresXen -- Citrix 15% des machines virtuelles, dont AmazonAirbusOCaml Labs (Cambridge UK)Ocamlpro (Paris)La plupart des prouveurs de programmesMicroso (F#), Dassault,...Facebook...

Influence du typagesur le temps de développement

Development time

Complexity of the program

js_of_ocaml

Un compilateur d'OCaml vers JS.

js_of_ocaml

Un compilateur de bytecode OCamlvers JS.

js_of_ocaml

Très facile à u liserPossibilité d'u liser des bibliothèques déjà compilées (même non libres)

js_of_ocaml

Rapide !

js_of_ocaml

Concis !

Js_of_ocaml : Appeler des fonc ons JS

Lwt.return(html

let draw ctx (color, size, (x1, y1), (x2, y2)) =ctx##strokeStyle <- color;ctx##lineWidth <- float size;ctx##beginPath();ctx##moveTo(float x1, float y1);ctx##lineTo(float x2, float y2);ctx##stroke()

Dessiner des lignes

Js_of_ocaml : Appeler des fonc ons JS

Lwt.return(html

let draw ctx (color, size, (x1, y1), (x2, y2)) =ctx##strokeStyle <- color;ctx##lineWidth <- float size;ctx##beginPath();ctx##moveTo(float x1, float y1);ctx##lineTo(float x2, float y2);ctx##stroke()

Dessiner des lignes

O'Closure: un bindingpour la bibliothèque de widgets GoogleClosure

Générer du HTML

Conclusion

Structure

Lwt.return(html

open, constantes, type

Ini alisa on de l'appl

fonc on draw

Service

HTML5 page

Code spécifique à la page

Canvas

Slider

Pale e de couleurs

Fonc onde calcul des coordonnéeset envoi au serveur

Réac ons aux évé. serveur

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Structure

Lwt.return(html

fonc on draw

Service

HTML5 page

Canvas

Slider

Pale e de couleurs

Évé. souris

Ex de com. client-serveur : le bus

Lwt.return(html

let b =Eliom_bus.create ~name:"graff" Json.t<messages>

Eliom_bus.write %b v

Lwt_stream.iter (draw ctx) (Eliom_bus.stream %b)

Lwt.return(html

Bus client-server

......

. call write. listen on bus b

Bus client-server

......

. call write. listen on bus b

Bus client-server

......

. call write

. listen on bus b

Bus client-server

......

. call write

. listen on bus b

Bus client-server

......

. call write

. listen on bus b

Générer du HTML

Conclusion

Services

Lwt.return(html

let main_service = register_service~path:[""]~get_params:unit(fun () () -> ... )

Fichier

Redirec on

Applica on

Services

Lwt.return(html

let main_service = register_service~path:[""]~get_params:unit(fun () () -> ... )

Fichier

Redirec on

Applica on

Programmer l'interac on Web tradi onelleavec les services d'Ocsigen

...1 Les services sont des valeurs de première classe

...2 Liens et formulaires sont vérifiés sta quement

...3 Les données générées sont vérifiés sta quement

...4 Créa on dynamique de nouveaux services

...5 Mécanisme puissant d'iden fica on de services, basé sur :L'URL ou un iden fiant de service (comme paramètre)Le méthode HTTP (GET or POST)Le nom des paramètresLa session (navigateur)L'onglet qui fait la requête…

Services

service : (GET and POST parameters) −→ page

Ocsigen vérifie la présence des paramètreset les traduit automa quement vers des types OCaml

(integers, booleans,... et même des ensembles ou listes !)

Liens et formulaires

..Les services sont des valeurs de première classe

<a> ne prend pas l'URL comme paramètre,mais le service !

..⇒ Pas de liens cassés !

Conformité des formulaires par rapport aux servicesvérifiée à la compila on

Mécanisme d'iden fica on de services

..Ocsigen choisit le service automa quement

en fonc on :

De l'URL et/ou d'un paramètre interne

De la méthode HTTP (GET ou POST)

Du nom des paramètres

La session de l'u lisateur

−→ Le programmeur choisit le style d'iden fica on dont il a besoin.

Exemple : connec on d'u lisateur depuis n'importe quelle page

h p ://.../

h p ://.../aaa/bbb

h p ://.../

h p ://.../aaa/bbb

Hello Paul

h p ://.../

h p ://.../aaa/bbb

h p ://.../

h p ://.../aaa/bbb

Hello Paul

L'ac on de « se connecter » est un service caché disponible pour toutes lesURLs.

h p ://.../

h p ://.../aaa/bbb

h p ://.../

h p ://.../aaa/bbb

Hello Paul

L'ac on de « se connecter » est un service caché disponible pour toutes lesURLs.

Deux sortes d'interac on WebExemple : réserver un billet d'avion

Je veux réserver un billetLisbonne -- Moscou

Le site propose plusieurs choix

Dans une autre fenêtre,Je veux réserver un billet

San Francisco -- Antananarivo

Encore une fois, plusieurs choix

Je retourne à la première fenêtre

Je veux con nuer avec le premierbillet !

.Les deux fenêtres évoluent indépendamment.Mais le panier est partagépar les deux fenêtres

.Les deux fenêtres évoluent indépendamment

.Mais le panier est partagépar les deux fenêtres

.Les deux fenêtres évoluent indépendamment

.Mais le panier est partagépar les deux fenêtres

Solu ons

Panier :

Sessions

−→ « État » côté serveur pour un navigateur−→ Ges on automa ques des cookies de session−→ Possibilité de créer des services de session !

Pages dépendant d'interac ons précédentes :

Créa on dynamique de services

−→ L'histoire de l'interac on est gardée automa quement en mémoire(côté serveur)

−→ Vous pouvez retourner dans le passé (bouton ``back'')ou changer de fenêtre de navigateur

Solu ons

Panier :

Sessions

Solu ons

Panier :

Sessions

Sessions revisitéesDonnées de session sauvegardées dans des références avec une portée(scope).

Portée :Site

Session de navigateur (cookie)

Les services ont aussi une portée.

Sessions revisitéesÉtat côté serveur mis en œuvre grâce à des références avec une portée(scope).

Portée :Site

Processus client (onglet)

Exemple : Si vous avez plusieurs instances d'un jeu dans plusieurs onglets,le score est une référence de portée « onglet ».

Portée :Site

Groupes de sessions (u lisateur)

Exemple : partager le panier entre plusieurs terminaux !

Portée :Site

Requête

Garder de l'informa on pendant la généra on d'une page.

Portée :Site

Requête

Web 1.0 + Web 2.0 = ?

Avec Ocsigen, le programme côté client ne s'arrête pas quandvous cliquez sur un lien !

−→ Les applica ons Ocsigen client-server sont 100% compa blesavec l'interac on Web tradi onnelle (signets, bouton back) !

−→ Vous pouvez garder un état côté client.−→ Certaines por ons de la page peuvent rester

après avoirchangé de page.−→ La musique ou les vidéos ne s'arrêtent pas.

Exemple : Site de streaming vidéo(con nuer sa naviga on pour choisir d'autres albums sans arrêter la musique)

Web 1.0 + Web 2.0 = ?

Générer du HTML

Conclusion

Généra on de HTML

Lwt.return(html

(html(head

(title (pcdata "Graffiti"))[link ~rel :[ `Stylesheet ] ~href :(uri_of_string"./css/style.css") () ;script ~a :[a_src (uri_of_string "./graffiti_oclosure.js")] (pcdata "") ;])

Généra on de HTML

Lwt.return(html

(html(head

(title (pcdata "Graffiti"))[link ~rel :[ `Stylesheet ] ~href :(uri_of_string"./css/style.css") () ;script ~a :[a_src (uri_of_string "./graffiti_oclosure.js")] (pcdata "") ;])

Générer du HTML

La validité du HTML est vérifiée à la compila on !

Produire du HTML valide

<html><head><title>Hello</title></head><body><h1>Hello</h1></body>

</html>

</hmtl>

<html><head><title>Hello</title></head><body><title>Hello</title></body>

</html>

_ rejetés à la compila on !

</html>

</hmtl>

</html>

</hmtl>

</html>

</hmtl>

</html>

</hmtl>

</html>

</hmtl>

</html>

</hmtl>

</html>

Les programmes pouvant générer des pages invalides sont rejetés par le compilateur !

f : () → block list

Générer du HTML

Conclusion

Beaucoup de fonc onnalités uniques

Iden fica on de services sophis quée

Typages des liens, formulaires, paramètres

Typage du HTML

Services dynamiques

Services de session

Portée

Programma on client-server unifiée

Persistence du programme client

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Typage du HTML

Services dynamiques

Services de session

Portée

Some companies and open source projects :BeSport, NYU CGSB Genomics Core, Pumgrana, Facebook, Life.tl,

Ashima Arts, Metaweb/Freebase, Hypios, Ocamlcore, Ocamlpro, Baoug,Nleyten...

Quelques-uns de nos projets

Le projet

..ocsigen.org

Logiciel libre --- Version 4.0 ce mois-ci !

Auteurs et contributeurs :Vincent Balat, Jérôme Vouillon, Pierre Chambart, Grégoire Henry, Benedikt Becker, RaphaëlProust, Benjamin Canou, Boris Yakobowski, Jérémie DiminoCharly Chevalier, Gabriel Radanne, Jacques-Pascal Deplaix, Stéphane Glondu, Gabriel Kerneis, ArnaudParant, Christophe Lecointe, Denis Berthod, Gabriel Cardoso, Piero Furiesi, Jaap Boender, ThorstenOhl, Gabriel Scherer, Séverine Maingaud, Simon Castellan, Jean-Henri Granarolo, Archibald Pon er,Nataliya Guts, Cécile Herbelin, Charles Oran, Jérôme Velleine, Pierre Clairambault …

Ocsigen - IRIF · PHP JSP Servlets ASP Ruby on rails HTML5 Javascript Flash. Qu'est-cequ'Ocsigen?....

Documents

Transcript of Ocsigen - IRIF · PHP JSP Servlets ASP Ruby on rails HTML5 Javascript Flash. Qu'est-cequ'Ocsigen?....