Globox, nouveau starter front-end

Plus léger, plus rapide, plus flexible !


Globox est le nom de l’environnement de développement front-end que nous avons mis en place chez GLOBALIS. Il fait suite à nos recherches sur le sujet expliquées dans l’article Mise en place d’un starter front-end. Pour rappel, le starter front-end répondait à une problématique d’unification des outils de build, offrant ainsi plus de performance et plus d’agilité lors de la prise en main des projets par de nouveaux développeurs.

Nous avions mis en place une compilation via NPM Scripts, afin de supprimer tout intermédiaire comme Gulp qui consomme beaucoup de ressources souvent inutilement au vu du besoin réel. Mais malgré nos efforts, la compilation restait lente, et pour cause : Bootstrap, qui est la librairie d’éléments d’interface la plus répandue, et permet d’offrir un socle graphique homogène et configurable aux applications web. La problématique soulevée est devenue alors : avons-nous vraiment besoin de Bootstrap ?

Bootstrap prévoit un style assez exhaustif sur les éléments qui composent une application web : boutons, formulaires, grille de mise en page, cards, listes, navigation… Mais le gros de notre activité front-end reste le site web d’information, où, contrairement aux applications web, la plupart de ces fonctionnalités sont absentes ou utilisées très partiellement.

globox-bootstrapExemple d’éléments par défaut Bootstrap.

Avec Globox, nous avons donc pris parti de supprimer Bootstrap par défaut, et jQuery avec. Cela permet au compilateur SCSS d’économiser l’interprétation d’une grosse quantité de fichiers, et à l’utilisateur de préserver des centaines de kilo-octets de données, un atout non négligeable pour les clients mobiles. Les sites réalisés ont peu de besoins en JavaScript, qui peut alors se contenter d’une implémentation native. En cas de besoin justifié comme le développement d’une web application, ces dépendances peuvent êtres ajoutées à Globox.

L’outil constant parmi nos réalisations web reste la grille CSS. Globox propose alors sa propre implémentation, aux côtés d’une architecture très modulaire qui permet d’isoler le développement de composants (SCSS et/ou JavaScript), et ainsi de les réutiliser entre plusieurs projets basés sur Globox. La grille SCSS développée chez GLOBALIS se distingue de celle de Bootstrap par une approche plus flexible et fera l’objet d’un nouvel article.

globox-gnu

Enfin, une compilation revue avec un fichier GNU Make rend les choses plus flexibles que NPM Scripts, notamment l’utilisation d’arguments et d’une fonction de watch native du système UNIX.

Nos intégrations sont donc désormais beaucoup plus saines, en prenant soin de charger le minimum de ressources par défaut. Le premier site en production développé avec Globox n’est autre ce celui de l’agence Unicorp : www.unicorp.fr (10ko gzippé de CSS seulement !).

Bien évidemment disponible sur Github : github.com/globalis-ms/globox.

Publié le par Nicolas Torres

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Paramètres de cookies

Notre site utilise différents cookies pour son fonctionnement. Certains de ces cookies sont déposés par des services tiers à des fins d'analyse statistique pour nous permettre de vous fournir une meilleure expérience.

Si vous souhaitez configurer les cookies que vous souhaitez autoriser, vous pouvez cliquer sur "Paramétrer les cookies", ou bien accepter tous les cookies en cliquant sur "Tout accepter et continuer".

Ces paramètres pourront être retrouvés à tout moment, ainsi que plus d'information sur les cookies utilisés par le site, sur la page de Mentions légales.

Vos préférences

Différents types de cookies sont utilisés par le site. Seul les cookies de fonctionnement sont obligatoire, et ce afin de fournir une expérience de navigation adaptée. Tous les cookies que nous déposons respectent les réglementations de durée et de vie privée.

Ces cookies sont nécessaires au fonctionnement du site, et ne peuvent donc pas être désactivés. Ils permettent de sécuriser le site internet ainsi que vos préférences d'affichage.

Ces cookies nous servent à mesurer, étudier et analyser les comportements des visiteurs, afin d'améliorer l'expérience de visite pour nos utilisateurs. Accepter ces cookies nous aide à vous fournir de meilleurs services.

Ces paramètres pourront être retrouvés à tout moment, ainsi que plus d'information sur les cookies utilisés par le site, sur la page de Mentions légales.