Cadre d'interface utilisateur CloudFlare gratuit pour les développeurs frontend

CloudFlare a récemment annoncé une refonte majeure de son système de Backbone à React.js. Ceci est venu avec un cadre d'interface utilisateur frontal mis à jour et l'équipe a décidé d'ouvrir la source pour tout le monde.

le Cadre d'interface utilisateur CloudFlare, abrégé CF-UI, est une bibliothèque open source gratuite de codes frontaux pouvant se lier à un flux de travail de React.

L'équipe a été très ouverte sur leur déménagement y compris d'autres technologies comme Lerna.js pour gestion du code sur plusieurs dépôts. Cette refonte va plus loin que les composants superficiels, mais ces composants libres peuvent faire une énorme différence dans votre flux de travail..

CloudFlare ajouté composants personnalisés dans une bibliothèque avec tests unitaires pour vérifier la qualité du code. Vous pouvez voir un démo en direct pour tous les composants sur cette page, y compris Documentation et extraits de code.

Tout le code est construit avec React, alors ça étend les cours conçu pour différents composants tels que la pagination, les menus déroulants, les champs de saisie et même la copie automatique de zones de texte.

Vous pouvez parcourir tous les packages sur GitHub et ils peuvent tous être installé via npm. Notez que ce n'est pas un simple framework frontal comme Bootstrap (bien qu'il ressemble à leur style). Au lieu de cela, c'est un approche complète React + Redux aux composants frontaux.

Notez que vous devriez déjà être à l'aise avec les composants React, l'installation de bibliothèques via npm et l'ajout de liaisons via React Redux..

Tous ces projets sont open source et faciles à ajouter à votre site. Composants individuels ont leurs propres fichiers JS que vous pouvez ajouter dans l'en-tête de votre site. Et tu peux parcourir tous les composants sur la page GitHub si vous voulez en savoir plus.

Exemples vivants et extraits de code source peut être trouvé ici si vous voulez vous plonger directement. Et, bien sûr, si vous avez des questions ou des idées concernant les caractéristiques techniques, vous devez parcourir le annuaire des discussions pour plus d'informations. Vous pouvez également essayer de messagerie CloudFlare devs ou leur envoyer un tweet @Cloudflare.