Cubicweb - Vos données ont du sens

name: normal
layout: true
---
name: inverse
layout: true
class: center, middle, inverse
---
##[<img height="70px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
###Vos données ont du sens
---
.center[
<img class="huge-bubble" src="polochon_completed.svg">
## Christophe de Vienne

@cmdevienne <img src="Twitter_Bird.svg" height="25px">

Co-fondateur et CTO de [<img height="20px" alt="unlish.com" src="LogoVert.svg">](https://www.unlish.com)

Membre du comité de pilotage de [<img height="25px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
]
???
Qui suis-je

- developpeur python, entre autres.
- aujourd'hui du python côté serveur, html/javascript côté client.
- co-fondateur et CTO de Unlish, le réseau social de rencontres amicales
  sportives (et sponsor de Pyconfr cette année)

Pourquoi je vous parle de CubicWeb ?

- Chez Unlish on utilise CubicWeb pour structurer et stocker nos données
- Depuis juillet 2014, membre du comité de pilotage de CubicWeb.
  - intégration avec le framework pyramid
  - rendre cubicweb plus accessible

- Pour vous donner envie de découvrir CubicWeb
---
layout: true
class: middle, inverse, center
---
## [<img height="40px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
## Concepts

Le web sémantique est un jeu de construction !
???

---
layout: true
class: inverse
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
]
.right-column[.middle.center[

Construire des applications

autour des données liées
]]
???
CubicWeb permet la construction d'applications web autour de données liées.
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
]
.right-column[.middle.center[
### Données liées* ?

Tout est entité

Des relations lient les entités
.footnote[*Linked Data]
]]
???
Que sont les données liées ?

Tout est entité, les objets métier comme les valeurs.
Toute entité a un identifiant unique.

- Les objets métier
  - une personne
  - un film

leur id est généralement une URI

- Les valeurs (entité "finale")
  - une chaine de caractères
  - un entier 
  - une date

leur id est leur valeur

Des relations font le lien entre entités

- Les relation entre entités
  - personne ayant créé une entité
  - payeur d'une facture

- Les attributs des entités (relation vers une entité finale)
  - nom, date de naissance d'une personne
  - numéro d'une facture

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
]
.right-column[.middle.center[
Schéma entité-relation

\+ permissions

\+ hooks

\+ adapteurs

base de données métier
]]
???
Le modèle entité-relation est complété par

- des permissions
  - description très fine des droits en lecture/écriture
  - fonction des groupes
  - fonction de la relation de l'utilisateur à l'entité/relation
  - fonction de n'importe quelle données de la base

- des hooks
  - équivalent des procédures stockées
  - écrits en python + RQL

utilisés pour
    - cohérence des données
    - règles de gestion
    - notifications, envoi de mails

- des adapteurs
  - écrits en python
  - outillent des entités -> leurs ajoutent des méthodes

L'ensemble forme une base de données métier, strictement structurée, dont le
comportement est cohérent.

Elle est une application à elle seule, mais sans interface.

Elle s'interroge en RQL, les adapteurs formant une API python sur les entités
(à la ORM).

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
]
.right-column[.middle.center[
base de données métier

(+ vues personnalisées)

(+ controlleurs)

interface
]]
???
CubicWeb exploite la description des données (leur sens) pour construire une
interface web.

On peut fournir en sus

-   des vues personnalisées pour des entités en particulier, dans
    certaine circonstances.

-   des controlleurs spécialisé

-   des templates généraux pour la structure du site

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
]
.right-column[.middle.center[
  Unité de base
  ## Le Cube
]]
???
Tout les concepts précédents sont réunis dans des unités de base qu'on appelle
"cubes".
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
  ### Cube
]
.right-column[.middle.center[.left-align[
Un cube contient
- un schéma
- du code métier
- des vues
- des controlleurs
]]]
???
Un cube est une sorte de plugin / extension du framework

- schéma - en python
  - des entités
  - des relations
  - des permissions
- du code métier - en python
  - adapteurs
  - hooks
  - du RQL
- des vues - en python
  - css
  - js
  - images

Des cubes peuvent dépendre les uns des autres
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Concepts
  ### Cube
]
.right-column[.middle.center[
Un cube

[ + un cube [ + un cube [...] ] ]

Une application
]]
???
Concevoir une application cubicweb revient à écrire un cube qui repose sur
d'autres cubes

C'est toute la puissance de CubicWeb qui repose dans cette idée.

Les choix de design en découlent:

- vues sélectionnables
- adapteurs pour outiller des entités définies dans d'autres cubes
---
layout: true
class: middle, inverse, center
---
## [<img height="40px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
## du code
(un peu)

---
layout: true
class: middle, inverse
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
]
.right-column[.middle[
```python
class Blog(EntityType):
    title = String(maxsize=50, required=True)
    description = RichString()
```
]]

???

Plein de choses dans un schéma.

- Les définitions d'entités sont des classes
  - PAS des classes mappées type ORM
  - Uniquement des définitions de schéma
- Les relations finales sont des attributs de ces classes

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
]
.right-column[.middle[
```python
class BlogEntry(WorkflowableEntityType):
    __permissions__ = {
        'read': ('managers', 'users',
                 ERQLExpression(
                    'X in_state S, S name "published"'),),
        'add': ('managers', 'users'),
        'update': ('managers', 'owners'),
        'delete': ('managers', 'owners')
        }
    title = String(required=True, fulltextindexed=True,
                   maxsize=256)
    content = RichString(required=True, fulltextindexed=True)
```
]]

???

Des permissions:

- spécifiques à un type d'entité
- potentiellement relatives à l'utilisateur connecté

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
]
.right-column[.middle[

```python
class entry_of(RelationDefinition):
    subject = "BlogEntry"
    object = "Blog"
    cardinality = '1*'

class has_read(RelationDefinition):
    subject = "CWUser"
    object = "BlogEntry"
```
]]
???

Definition de relations, entre les entités définies dans le cube, mais aussi
avec des entités définies en dehors.

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
]
.right-column[.middle.center[

###Langage de requête

proche de SPARQL

(en plus simple)

]]
???

Le code métier est écrit en python, 
RQL a été créé avant que SPARQL ne soit spécifié

Travaille sur des relations et récupère des entités.

En voici quelques exemples pour aperçu.

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
]
.right-column[.middle[

```python
Any U WHERE U has_read BE, BE title "PyconFR 2014, j'y étais"
```

]]
???

Tous les utilisateurs ayant lu le billet de blog dont le titre est "PyconFR 2014,
j'y étais"
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
]
.right-column[.middle[

```python
Any VERSION ORDERBY PN,N
WHERE VERSION num N, VERSION version_of P, P name PN,
      EXISTS(X in_state S, S name "ready")
      OR EXISTS(T tags VERSION, T name "priority")
```
]]
???

Les versions dans l'état "ready" ou taggées "priority",
classées par nom de projet puis par numéro.

---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
]
.right-column[.middle.center[
###Vue

.left-align[
-   Produit du html, json, txt...
-   Mise à disposition dans un registre
-   Sélectionnable selon
    -   son identifiant
    -   le contexte (les données, l'utilisateur...)
]]]
???

Une vue a un identifiant qu'elle partage avec les autres vues qui font le même
travail. Par exemple, les vues 'primary'.

Une vue est plus ou moins spécialisée pour un contexte particulier (la nature
des données, des prédicats sur l'utilisateur, la requête http etc).

Quand le système a besoin de la vue 'primary' d'un jeu de données, le registre
sélectionne la version la plus adaptée.
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
]
.right-column[.middle[

```python
class BlogPrimaryView(primary.PrimaryView):
    __select__ = is_instance('Blog', 'MicroBlog')

def entity_call(self, entity):
        self.w(u'<div class="blogwrapper">')
        super(BlogPrimaryView, self).entity_call(entity)
        self.w(u'</div>')
```
]]
???
Dans cet exemple, ont wrap le html de la vue 'primary' pour les entités de type
Blog et MicroBlog.

*Expliquer le \_\_select__*
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
  ### Exemple
]
.right-column[.middle.center[
### Assemblage de blog et comment
]]
???
Exemple concret d'assemblage des cubes blog et comment
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
  ### Exemple
]
.right-column[.middle.center[
<img height="300px" src="demo/blogentry.png"><br>
]]
???
Vue primaire d'un billet de blog
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
  ### Exemple
]
.right-column[.middle.center[
.left-align[
`schema.py` de monappli:

```python
class comments(RelationDefinition):
    subject = 'Comment'
    object = 'BlogEntry'
    cardinality = '1*'

```
]]]
???
On ajoute une relation dans notre cube
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
  ### Exemple
]
.right-column[.middle.center[
<img height="300px" src="demo/blogentry_add_comment.png"><br>

]]
???
L'existence d'une potentielle relation 'comments' sur BlogEntry déclenche
l'affichage d'une vue supplémentaire au sein de la vue primaire de BlogEntry
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Schéma
  ### RQL
  ### Vues
  ### Exemple
]
.right-column[.middle.center[
<img height="300px" src="demo/blogentry_w_comment.png"><br>

]]
???
La vue primaire, en affichant les relations de l'entité BlogEntry, trouve des
relations "comments", et fait appel aux vues capables d'afficher ces relations
---
class: middle, center
## [<img height="40px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
## Outils, écosystème
???
---

.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Outils
]
.right-column[.middle.center[.left-align[

### Le couteau suisse

`cubicweb-ctl`

- `newcube`
- `create` / `start` ( / `pyramid`) / `stop`
- `db-init` / `db-dump` / `db-restore`
- `shell`
- etc

]]]
???
mais aussi, extraction des traductions, synchronisation des sources de données
externes...
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Outils
  ### Cubes
]
.right-column[.middle.center[.left-align[
Environ 200 cubes

-   blog
-   comment
-   rqlcontroller
-   bootstrap
-   postgis
-   wsme
-   ...
]]]
???
-   blog : schéma et vues pour un blog
-   comment : schéma et vues pour commenter n'importe quelle entité
-   rqlcontroller : fourni une api webservice pour discuter en RQL avec le
    serveur
-   bootstrap : remplace les templates et vues de base avec cssbootstrap
-   postgis : permet de stocker et manipuler des données géolocalisées (basé
    sur l'extension postgres 'postgis')
-   wsme : Génère automatiquement une api webservice à partir du modèle
-   des tas d'autres

Logilab a carrément développé son ERP et une forge avec, tous les cubes étant
disponibles en LGPL.
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Outils
  ### Cubes
  ### Evolution
]
.right-column[.middle.center[
## bootstrap

C'est beau
]]
???
Les évolutions en cours qui doivent vous donner envie d'expérimenter.

Le look par défaut est beaucoup plus moderne. Moins de travail pour rendre
l'application plus sexy.
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Outils
  ### Cubes
  ### Evolution
]
.right-column[.middle.center[
## pip / venv

Démarrage plus facile
]]
???
Virtualenv et pip sont devenus des standards, mais cubicweb n'a pas tout à fait
suivi le mouvement.

Un travail de réconciliation est en cours.

Seul le mode "develop" nécessite encore quelques astuces pour fonctionner.
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Outils
  ### Cubes
  ### Evolution
]
.right-column[.middle.center[
## pyramid

CubicWeb devient plus modulaire et accessible

Enrichir mutuellement les écosystèmes

]]
???
Vu de l'extérieur, c'est l'évolution la plus importante, que j'ai initié en mai
dernier.

Le stack "web" de CubicWeb (controlleurs, routage des urls) a peu d'intérêt en
soi.

On simplifie CW en le basant sur pyramid.

On injecte un nouveau périmètre fonctionnel puissant dans pyramid.
---
class: middle, center

## Quelques sites
 
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Sites
  [cubicweb.org](http://www.cubicweb.org/)
]
.right-column[.middle.center[
<img width="600px" src="www.cubicweb.org.png">
]]
???
Développé par la société Logilab

Pas très beau, mais très poussé fonctionnellement:

- intégration continue
- revue de code
- gestion de patches
- gestion de tickets
- gestion de projets
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Sites
  [data.bnf.fr](http://data.bnf.fr/)
]
.right-column[.middle.center[
<img width="600px" src="data.bnf.fr.png">
]]
???
Développé par la société Logilab
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Sites
  [transdev-idf.com](http://www.transdev-idf.com/)
]
.right-column[.middle.center[
<img height="500px" src="www.transdev-idf.com.png">
]]
???
Développé par la société SecondWeb
---
.left-column[
  [<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
  ### Sites
  [unlish.com](http://www.unlish.com/)
]
.right-column[.middle.center[
<img height="500px" src="www.unlish.com.png">
]]
???
C'est nous, et on embauche !
---

name: last-page
template: inverse

[<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
.center[
<img class="small-bubble" src="polochon_completed.svg"><br>@cmdevienne
]

# Le mot de la fin
???
CubicWeb s'ouvre

Venez essayer

Donnez-nous du feedback

Rejoignez la communauté !
---

name: last-page
template: inverse

[<img height="20px" alt="CubicWeb" src="logo-cubicweb.svg">](http://www.cubicweb.org)
.center[
<img class="small-bubble" src="polochon_completed.svg"><br>@cmdevienne
]

# Questions ?

.left-align[
- découvrez http://docs.cubicweb.org/
- discutez
  - http://lists.cubicweb.org/
  - public@conference.jabber.logilab.org
  - @cubicweb
]

.footnote.pull-right[
Slideshow créé avec [remark](http://github.com/gnab/remark), [vim](http://www.vim.org).
]