Lisez sur nos vingt ans !

Bootstrap 4: 6 questions pour guider sa migration

Cet article voit le jour 1 an après le dévoilement de la première version Alpha de Bootstrap 4. Ce qui signifie qu’au moment de sa rédaction, nous sommes toujours sur Alpha 3. Beaucoup a changé depuis, à travers cette progression de l'état Alpha. Pourtant, rien ne semble se passer dans le monde réel. Personne ne semble l'utiliser pour l'instant. Comme d'habitude, c’est comme remplir un ballon d'eau; ça n’éclatera pas… jusqu’à ce que ça éclate!

Pourtant, lisez bien ceci: Bootstrap 3 (BS3) est encore en évolution. En juillet dernier (2016), la version 3.3.7 a été libérée, soit une mise à jour de la version 3.3.6 publiée en novembre 2015!

Afin de saisir davantage ce qui nous attend en ce qui concerne Bootstrap 4 (BS4), je vais utiliser la fameuse approche  QQOQCP, rassemblant  des faits intéressants autour des questions clés qui, quand, quoi, où, pourquoi et comment.

POURQUOI c'est important?

On ne change pas les chevaux au milieu du gué -Proverbe

Le changement est particulièrement important comme Bootstrap est la plateforme la plus utilisée pour à peu près toute application ou CMS sur cette planète (Terre). Les changements sémantiques présents dans la nouvelle version et le fait qu'une version stable continue d'évoluer avec une sémantique différente de code ouvrent la porte à de nombreuses questions concernant la durabilité, la compatibilité et la synchronisation. Est-il utile de maintenir notre implémentation de BS3 actuelle, comme BS4 repose sur une phraséologie différente? Et bien sûr, si nous voulons changer de chevaux, avons-nous dépassé le milieu du gué?

Bootstrap 4

OÙ ça s’applique?

Le battement d'ailes d'un papillon au Brésil peut-il provoquer une tornade au Texas ? – La Théorie du Chaos

Systèmes de gestion de contenu (CMS), applications web et mobiles (APP), logiciel de gestion de la relation client (CRM), commerce électronique et autres: bref, partout!

Peu importe si vous êtes fan des CMS et fou de WordPress-Drupal-Joomla et plugins e-commerce connexes (ou même de solutions autonomes comme Magento), ou préférez les APP à la mode, courtisant Angular-React-Meteor, ou même les solutions de source privée basées sur Salesforce ou Microsoft ... vous trouverez un thème, plugin, add-on, ou extension conçue pour le cadre front-end le plus populaire. C’est inévitable.

QU'est ce qui a changé?

Le diable est dans les détails. - Hyman G. Rickover

Comme indiqué précédemment, il y a quelques changements dans la sémantique des classes CSS concernant les groupes de listes, navigations, paginations, fils d’Ariane, tags, utilitaires, images responsives et blocs de citation, pour ne citer que les plus pertinents. Mais même si ces changements sont bien réalisés, plusieurs effets secondaires inattendus sont à prévoir dans le comportement d'un site web, des ajustements sérieux au niveau du site lors de la migration d'un site Web de BS3 à BS4.

Si nous commençons un site Web à partir de zéro avec BS4 alors il n’y a probablement pas un gros risque par rapport à une migration, mais il y a encore bien des choses à couvrir et garder à l'esprit pendant le processus de développement.

Quoi qu'il en soit, il est bon d'avoir cette liste des détails pratiques à porter de main.

TABLEAU DES PRINCIPAUX CHANGEMENTS PERTINENTS

Pour la liste officielle des changements, vous pouvez consulter cette page (anglais).

NOUVEAU DÉLAISSÉ
Support Flexbox (optionel) Usage non-adaptatif
Sass Less
Android v5.0 IE8, iOS 6
Rem comme unité CSS primaire Px
Media queries maintenant en Em Px
5 media queries  (. col-xl-) media queries
Composantes de carte Panneaux, vignettes et boîtes
Format de police augmenté à 16px. Format de police de 14px.
Octicons/Font Awesome (comme options suggérées) Glyphicons (police d'icônes)
Position: librairies Sticky Polyfill et ScrollPos-Styler (comme options suggérées) Librairie jQuery Affix
Fichier personnalisé de réinitialisation Fichier standard de réinitialisation

COMMENT bien effectuer sa migration à Bootstrap 4?

Le génie, c’est  1% d'inspiration et 99% de transpiration. -Thomas A. Edison

Le défi le plus important viendra lors du changement de version sur un site web existant.

Il existe déjà quelques tutoriels sur la meilleure façon de migrer de BS3 à BS4. La plupart d'entre eux reflètent les tracas inévitables d'avoir à remplacer manuellement ou traiter des morceaux de code HTML séparément. Dans le meilleur des cas, on parle d’un processus semi-automatisé de « Rechercher / Remplacer » les vieilles classes par les neuves. Cette tâche, simple à première vue, peut se révéler assez ardue avec des termes génériques comme "item", surtout si nous les avons combinés avec nos propres classes personnalisées.

Pour les petits sites ou blogs, ça ne semble pas être la fin du monde, à peine une petite roche dans une chaussure, agaçant. Pour les grands sites (pensez aux sites d'entreprises avec de nombreuses sections et un contenu personnalisé par région) où une partie du contenu a été intégrée dans des éditeurs WYSIWYG et où son contenu pourrait aussi avoir des classes de BS dans le code HTML, ce scénario très probable et commun peut rapidement virer au cauchemar.

Comment allons-nous faire tous les changements nécessaires à la migration? Il n'y a pas de réponse facile à celle-là. Je recommanderais de procéder prudemment, lentement et de tester à fond chaque étape.

Recommencer à zéro ne semble plus une si mauvaise idée? Eh bien, ça vaut la peine de tester la migration et de faire une estimation plus éclairée à mi-chemin. Les sites se façonneront à travers la procédure de  remplacement, afin que nous puissions ensuite faire des ajustements applicables à la nouvelle réalité du custom.css. À noter que si nous avons mélangé trop de classes personnalisées avec des classes de BS, cela pourrait être un long processus.

QUI est touché?

La recherche est la création de nouvelles connaissances. - Neil Armstrong

Jetons un œil à quelques-unes des conséquences que la nouvelle version apportera à tous ceux qui sont impliqués dans un processus de développement de BS4.

DÉVELOPPEURS  FRONT-END

  • Sauf migration, pas besoin de connaître la version sémantique précédente
  • Connaissance de SASS est un atout
  • Compréhension des unités CSS « em » et « rem »
  • Compréhension des Flexbox CSS

DESIGNERS WEB

  • Nouvelle grille à apprendre
  • Compréhension des unités CSS « em » au moins pour l’équivalence au pixel.
  • Compréhension des CSS Flexbox

SERVICE CLIENT ET CLIENT

  • Peser les avantages et inconvénients si un projet doit démarrer à partir de zéro ou être migré.
  • Comprendre les implications de la conversion d'un site web existant fait avec BS3 à la sémantique de BS4.
  • Comprendre qu’en ajustant les mesures en unités « em », des corrections peuvent être nécessaires. Cela pourrait changer le look & feel d'un site Web au premier coup d'œil.
  • Comprendre les implications d’un changement de sémantique du code HTML intégré près du contenu (potentiellement à changer directement dans la base de données).

Bootstrap 4

C’est QUAND le bon moment de passer à Bootstrap 4?

Chaque nouveau départ vient de la fin de quelque autre début. - Seneca

Alors, comment savoir quand le cycle de développement de BS3 prendra fin s’il est toujours en cours d'amélioration à ce jour, et quand une version plus stable de BS4 sera-t-elle prête? C’est une question difficile et même l'équipe de développement aurait probablement de la difficulté à y répondre. Si nous sommes vraiment curieux, nous pouvons toujours garder un œil sur les questions en suspens et analyser si elles affectent ou non nos projets potentiels.

Il est important de renforcer le fait que, à cette date, le guide de migration de BS4 est toujours affiché comme «incomplet». Donc, si nous arrivons au point d'avoir à prendre une décision sur la migration ou le développement d’un site Web à partir de zéro avec BS4, les aspects suivants peut guider votre réponse:

  1. Établir les raisons pour lesquelles nous avons besoin de faire le changement (caractéristiques, modernité, R & D, caprice ou toutes ces réponses).
  2. Vérifier le repo Github et analyser si les questions ouvertes affectent notre projet (et si nous sommes en mesure de les corriger).
  3. Peser le pour et le contre de ce changement (généralement du temps et de l'argent).

Alors, ça vaut la peine?

Si OUI, le temps de changer peut très bien être maintenant, parce que BS4 sera adopté et continuera d'évoluer de toute façon.

Si NON, restez avec BS3. C’est un bon cadre encore utile pour 3-4 ans. Hey, je suis pas mal sûr qu'il y a de nombreux sites Web toujours sur BS2 qui fonctionnent bien sur la plupart des appareils.

 

En cas de doute, laissez ça de côté et revisitez ces étapes dans 3 ou 6 mois. La nuit porte conseil, il paraît (et nous aussi).

Inbound marketing, les secrets

Recherche

27 novembre 2017

L’inbound marketing est né d’un constat on ne peut plus véridique : les internautes sont lassés d’être dérangés par une publicité numérique toujours plus intrusive... Lire l'article

Par : Joséphine Marty, Coordonnatrice aux communications

Comment créer une stratégie de contenu web efficace ?

Recherche

11 novembre 2016

En ligne, comme ailleurs, votre marque est une entité à part entière. Si on poursuit l’analogie un peu, votre contenu représente sa voix, d’où l’importance d’une... Lire l'article

Par : Cassandra Sawodny, Conseillère aux communications

La vente en ligne pour entreprise 101

Recherche

17 novembre 2016

Pensez-vous que la vente en ligne vous est inaccessible ? Voici une introduction au concept et aux outils disponibles pour vous y lancer ! Qu’est-ce que le commerce... Lire l'article