Fondamentaux

Le modèle mental BPM, le cycle de rendu, les refs et le design system.

Le modèle mental BPM

BPM fonctionne comme une déclaration : vous décrivez ce que vous voulez afficher, BPM s'occupe du rendu. Pas de HTML, pas de callbacks manuels.

Le cycle de rendu

• Au lancement — bpm run exécute app.py de haut en bas. Chaque appel (bpm.title, bpm.button, etc.) enregistre un nœud de rendu.
• À chaque interaction — Clic sur un bouton → requête HTTP avec ?clicked=<key> → mise à jour de bpm.session_state → re-run du script. Seuls les composants concernés peuvent être rafraîchis (réactivité granulaire prévue ; aujourd'hui re-run complet comme Streamlit).
• Différence avec Streamlit — BPM vise à terme une mise à jour ciblée sans re-exécuter tout le script (refs réactives, store côté front).

Les refs réactives ($)

Les refs permettent de garder un état réactif : seule la partie de l'interface qui lit la ref se met à jour.

import bpm

counter = bpm.ref("counter", default=0)
bpm.metric("Clics", counter.get())

if bpm.button("Incrémenter"):
    counter.set(counter.get() + 1)

# Seul le bpm.metric se rafraîchit, pas toute la page.

Les décorateurs (@)

BPM prévoit des décorateurs pour structurer l'app : pages, sidebar, cache.

@bpm.page("rapport")
def rapport():
    bpm.title("Rapport mensuel")
    bpm.table(df)

@bpm.sidebar
def navigation():
    bpm.select("Page", ["accueil", "rapport"])

Ces APIs sont en cours d'alignement entre le runtime Python et le frontend.

Le fichier app.config.js

Pour les apps qui utilisent le frontend React BPM, la configuration se fait via app.config.js. Les 4 clés principales : title, theme, sidebar, pages. Voir Config.

Design system bpm.*

Tous les composants partagent les mêmes tokens CSS (couleur primaire, espacements, typo). Personnaliser via bpm.theme(primary_color="#d4af37") ou en surchargeant les variables dans theme.css (ou doc.css).