Quand j'ai commencé le développement de
WaterOnMars, le truc à la mode pour la GUI-web c'était
Twitter Bootstrap version 2[en] Mais le temps que j'arrive à
une application qui tourne convenablement la version 3 de bootstrap était sortie. Encore un bel exemple de l'obsolescence permanente à laquelle les informaticiens doivent faire face depuis des temps immémoriaux (enfin les années 70 quoi).
La version 3 ayant comme priorité de marcher à la perfection sur les appareils mobiles[en] et mon utilisation de WaterOnMars étant essentiellement via une tablette, cette migration était tentante, mais je n'avais aucune idée de l'ampleur des changements à apporter au code pour l'accomplir.
La chose fût faite malgré tout et bonne surprise: ça a été infiniment plus simple que ce que je craignais.
Grâce à
la page de "migration" j'ai pu constituer les expressions régulières suivantes qui m'ont permis de trouver parmi les templates django, les fichiers CSS et les fichiers Javascript les divers éléments à modifier.
# Changed/Renamed
.(row-fluid|span|offset|brand|nav-collapse|nav-toggle|btn-navbar|hero-unit|icon-|btn|btn-mini|btn-small|btn-large|alert-error|visible-phone|visible-tablet|visible-desktop|hidden-phone|hidden-tablet|hidden-desktop|input-block-level|control-group|control-group|checkbox inline|radio inline|input-prepend|input-append|add-on|img-polaroid|unstyled|inline|muted|label|label-important|text-error|table error|bar|bar-|accordion|accordion-group|accordion-heading|accordion-body|accordion-inner)
# New and updated
.(panel|panel-default|panel-body|panel-title|panel-heading|panel-footer|panel-collapse|list-group|list-group-item|list-group-item-text|list-group-item-heading|glyphicon|jumbotron|col-xs-|col-sm-|col-md-|col-lg-|visible-lg|hidden-lg|col-sm-offset-|col-md-offset-|col-lg-offset-|col-sm-push-|col-md-push-|col-lg-push-|col-sm-pull-|col-md-pull-|col-lg-pull-|input-sm|input-lg|input-group|input-group-addon|input-group-btn|form-control|form-group|btn-group-xs|btn-group-sm|btn-group-lg|navbar-text|navbar-header|nav-justified|img-responsive|success|danger|warning|active|info|panel-success|panel-danger|panel-warning|panel-info|modal-dialog|modal-content|img-thumbnail|well-sm|well-lg|alert-link)
# Removed
.(form-actions|form-search|control-group info|input-mini|input-small|input-medium|input-large|input-xlarge|input-xxlarge|input-block-level|btn-inverse|row-fluid|controls|controls-row|navbar-inner|navbar divider-vertical|dropdown-submenu|tabs-left|tabs-right|tabs-below|pill-content|pill-pane|nav-list|nav-header|help-inline)
Les seules choses qui ne sont pas allées de sources sont la migration de la vue "sieve" que j'avais bricolé en partant des composants "carrousel" et "collapse" de Bootstrap. Mais même là les modifications à faire étaient minimes (et essentiellement liées aux nouveaux noms des événements javascript qui sont parfaitement documentés dans la doc de Bootstrap).
Merci aux devs de bootstrap de m'avoir autant simplifier la vie encore une fois, d'autant que cette migration a permis de résoudre un bug étrange sur mon téléphone (un dialogue modal qui disparaissait en 1/2 seconde sans qu'on puisse cliquer dessus).
Au passage j'ai pu en profiter pour revoir un peu la définition de la barre de navigation pour qu'elle soit un peu plus concise et élégante:
