Si vous êtes un développeur front-end, alors HTML, CSS et JavaScript sont trois compétences de base essentielles que vous devez maîtriser. Bien entendu, nous devons également être très compétents dans son utilisation. La meilleure façon d’apprendre est de comprendre les projets open source actuels. Cet article fait le point sur les projets open source de technologie frontale les mieux notés et plus de 100 collections en Chine, dans l'espoir d'aider davantage de développeurs à élargir leur apprentissage.
1. Framework d'interface utilisateur frontale modulaire minimaliste Layui
Note : 9,3 ; Nombre de collections : 873
Contrat de licence : MIT
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : multiplateforme
Adresse du code source : https://gitee.com/sentsin/layui
Layui est écrit en utilisant le sien spécifications du module Le cadre d'interface utilisateur frontale émotionnelle suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. Le seuil est extrêmement bas et peut être utilisé dès la sortie de la boîte. Il est minimaliste à l'extérieur mais plein à l'intérieur. Il est léger et riche en composants, chaque détail, du code principal à l'API, a été soigneusement conçu, ce qui le rend très approprié pour le développement rapide d'interfaces. La première version de Layui a été publiée à l'automne doré 2016. Elle est différente de ces frameworks d'interface utilisateur basés sur la couche inférieure de MVVM, mais elle ne va pas à contre-courant, mais croit au retour à la nature. Pour être précis, il est plus adapté aux programmeurs côté serveur. Vous n'avez pas besoin de vous impliquer dans la configuration complexe de divers outils frontaux, il vous suffit de faire face au navigateur lui-même, et tous les éléments et interactions dont vous avez besoin peuvent. être trouvé à portée de main.
2. Bibliothèque de graphiques JavaScript ECharts
Note : 8,9 ; Nombre de collections : 2448
Contrat de licence : BSD
Langage de développement : JavaScript
Système d'exploitation : Multiplateforme
Adresse du code source : https://gitee.com/echarts/echarts
ECharts est un front- technologie finale développée par Baidu Une bibliothèque de graphiques de visualisation de données basée sur Javascript développée par le ministère de la Science et de la Technologie, qui fournit des graphiques de visualisation de données intuitifs, vivants, interactifs et personnalisables. Fournit un grand nombre de graphiques de visualisation de données couramment utilisés. La couche inférieure est basée sur ZRender (une nouvelle bibliothèque de classes de canevas légère), créant des systèmes de coordonnées, des légendes, des invites, des boîtes à outils et d'autres composants de base, et créant des graphiques linéaires (graphiques en aires). en haut d'eux, un histogramme (graphique à barres), un diagramme à nuages de points (graphique à bulles), un diagramme circulaire (graphique en anneau), un diagramme à lignes K, une carte, un diagramme de mise en page dirigé par la force et un diagramme d'accords. Il prend également en charge l'empilement dans n'importe quelle dimension et mixte. affichage de plusieurs graphiques.
3. Puzzle de cadre frontal réactif multi-écran domestique Pintuer
Note : 8,7 ; Collection : 220
Contrat de licence : Apache
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : multiplateforme
Adresse du code source : https://gitee.com/pintuer/pintuer
Pintuer.com : excellent framework front-end open source réactif multi-écran HTML, CSS, JS, utilisant la dernière technologie de navigateur pour fournir un système de texte, d'icônes, de médias, de tableaux, de formulaires, de boutons et de menus pour développement frontal rapide, système de grille et autres boîtes à outils de style, qui consomment peu de ressources. Vous pouvez utiliser Jigsaw pour créer rapidement une interface frontale simple et élégante qui s'adapte automatiquement aux téléphones mobiles, tablettes, ordinateurs de bureau et autres appareils, créant ainsi un développement front-end aussi amusant et simple que de jouer à des jeux.
Basé sur le framework CSS traditionnel, le framework frontal de puzzle ajoute HTML5, CSS3, JS et d'autres applications de combinaison technique, et est appliqué à la dernière technologie de navigateur. Il est également compatible avec les navigateurs antérieurs, combinant les. l'ancien et le nouveau, et hériter du passé et du futur. Les développeurs n'ont qu'à introduire le fichier cadre dans le projet, et un développement conjoint rapide peut commencer. Cela change la situation précédente de la création d'un site Web pour PC, puis de la création d'un site Web mobile. en même temps, obtenir une réponse unique à tous les appareils, ce qui améliore considérablement l'efficacité du développement.
4. Cadre frontal de conception de matériaux légers MDUI
Note : 8,6 ; Collection : 215
Contrat de licence : MIT
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : multiplateforme
Adresse du code source : https://github.com/zdhxiong/mdui
MDUI est un framework frontal léger de Material Design. Il est développé selon les documents Material Design et s'efforce d'implémenter les composants de Material Design 1:1.
Prise en charge de plusieurs thèmes : MDUI a 19 couleurs primaires, 16 couleurs d'accent et un thème nocturne. Ajoutez simplement une classe CSS pour changer de thème.
Léger : les fichiers CSS incluant tous les thèmes ne font que 26,4 Ko minifiés + gzip, les fichiers JavaScript ne font que 12 Ko minifiés + gzip et n'ont aucune dépendance.
Responsive : mobile first, adaptable sur tous les écrans.
5. Cadre d'interface utilisateur réactif frontal de style Win10 Win10-UI
Note : 8,5 ; Collection : 170
Accord d'autorisation : SATA
Développé Langage : JavaScript, HTML/CSS
Système d'exploitation : Multiplateforme
Adresse du code source : https://github.com/yuri2peter/win10-ui
Win10- L'interface utilisateur est un cadre d'interface utilisateur d'arrière-plan de style Win10. Il utilise une multitude d'éléments de bureau Win10, notamment des icônes de bureau, la gestion des sous-pages fenêtrées, le menu Démarrer, des vignettes dynamiques et d'autres composants. Il est compatible avec les navigateurs modernes grand public et les tailles d'écran mobiles, et convient au développement rapide d'interfaces frontales pour. systèmes de gestion back-end.
Win10-UI adopte la conception de rendu du framework d'interface utilisateur traditionnel et mémorise le code js compliqué dans le désordre. Il vous suffit d'appliquer la structure HTML pour restituer facilement les éléments du bureau. Dans le même temps, l'API activement appelée est également conservée, permettant aux développeurs avancés de définir les détails de l'interface utilisateur. Il ne définit pas trop de "règles". Vous pouvez étendre complètement ses fonctions avec CSS et JS et en faire une interface utilisateur backend unique pour vous.
6.Bibliothèque d'interface de terminal Node blessed-contrib
Note : 8,5 ; Collection : 125
Contrat de licence : MIT
Langage de développement : JavaScript
Système d'exploitation : multiplateforme
Adresse du code source : https://github.com/yaronn/blessed-contrib
blessed- contrib C'est une bibliothèque qui utilise Node.js pour créer des interfaces d'application de terminal.
7. ORY Editor, un éditeur de contenu moderne basé sur React et Redux
Note : 8,3 ; 109
Contrat de licence : AGPL
Langage de développement : JavaScript
Système d'exploitation : Multiplateforme
Adresse du code source : https://github.com/ory/editor
ORY est une société qui crée et maintient des outils de développement, ORY Editor est un éditeur intelligent, évolutif et moderne pour le Web (« WYSIWYG »), écrit en React. Ce serait un bon choix si vous en avez assez des limitations du contenu modifiable.
ORY Editor peut être utilisé pour créer des sites Web, similaires à Squarespace, mais il fonctionne hors ligne, les sites créés avec celui-ci sont stockés sur l'appareil et vous pouvez créer vos propres conceptions et plugins.
8. Cadre d'effet d'animation d'application mobile Lottie
Note : 8,3 ; Collection : 317
Contrat de licence : Apache
Langage de développement : Java, Objective-C, JavaScript
Système d'exploitation : Android
Adresse du code source :
Android : https://github.com/airbnb/ lottie-android
iOS : https://github.com/airbnb/lottie-ios
React Native : https://github.com/airbnb/lottie-react-native
Lottie est un outil open source développé par Airbnb qui peut ajouter des effets d'animation aux applications natives. Lottie propose actuellement des versions iOS, Android et React Native, capables de restituer des effets spéciaux animés After Effects en temps réel.
Actuellement, Lottie prend en charge le découpage de chemin, le masquage, le recouvrement et d'autres opérations. Il existe également un mécanisme de mise en cache en option pour un chargement plus rapide des éléments fréquemment utilisés. L'objectif de cette application est d'aider les développeurs et les animateurs à créer plus facilement des animations pour leurs applications, améliorant ainsi le facteur d'interactivité global.
9. Package d'optimisation de thème JQuery EasyUI 1.5.x du thème Insdep
Note : 8,3 ; Nombre de collections : 101
Licence Accord：GPL
Langage de développement : JavaScript
Système d'exploitation : Multiplateforme
Adresse du code source : https://gitee.com/weavors/JQuery-EasyUI-1.5 .x- Of-Insdep-Theme
Le thème Insdep est un package de thème d'embellissement gratuit basé sur EasyUI 1.5.x. Il intègre l'éditeur Baidu, cropper, Highcharts, justgage, plupload et d'autres plug-ins tiers adaptés. à ce thème. Et divers plug-ins Jquery couramment utilisés sont embellis. D'autres thèmes, composants et plug-ins tiers seront fournis pour embellir le style à l'avenir.
10. Neditor, un éditeur de texte riche moderne basé sur Ueditor
Note : 8,3 ; Collections : 503
Contrat de licence : MIT
Langage de développement : JavaScript
Système d'exploitation : multiplateforme
Adresse du code source : https://gitee.com/notadd/neditor
Baidu équipe front-end Après de nombreux efforts, Ueditor est désormais reconnu comme l'éditeur de texte enrichi chinois le plus utile. Mais avec le temps, tout le monde a l'impression que Baidu Editor n'est pas si beau. Nous avons donc modifié Ueditor et obtenu le Neditor actuel.
11. Bibliothèque de composants d'interface utilisateur iView basée sur Vue.js
Note : 8,3 ; Collections : 475
Contrat de licence : MIT
Langage de développement : HTML/CSS
Système d'exploitation : multiplateforme
Adresse du code source : https://gitee.com/icarusion/iview
iView Il s'agit d'un ensemble de bibliothèques de composants d'interface utilisateur basées sur Vue.js, qui sert principalement les produits middle et backend de l'interface PC.
Fonctionnalités
Haute qualité, riche en fonctionnalités
API conviviale, utilisation gratuite et flexible de l'espace
Utilisation single Le modèle de développement de composants Vue du fichier
est développé sur la base de npm + webpack + babel et prend en charge ES2015
12 Basé sur la bibliothèque de composants Vue 2.0 Element
Rating. : 8.2; nombre de collections ：609
Contrat de licence : MIT
Langage de développement : JavaScript
Système d'exploitation : Multiplateforme
Adresse du code source : https://github.com/ ElemeFE/element
Element est une bibliothèque de composants basée sur Vue 2.0 préparée pour les développeurs, les concepteurs et les chefs de produit. Elle fournit des ressources de conception de support pour aider votre site Web à prendre rapidement forme. Il est open source par l'équipe front-end d'Ele.me.
13.Cadre frontal multi-écran HTML5 Amaze UI
Note : 8.1 ; Collection : 1213
Contrat de licence : MIT
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : multiplateforme
Adresse du code source : https://gitee.com/amazeui/amazeui
Amaze UI adopte les concepts internationaux de « développement basé sur les composants » et de conception « mobile first » les plus avancés. Sur la base de ses composants riches, les développeurs peuvent rapidement créer des applications Web HTML5 grâce à un assemblage simple. En six mois, Amaze UI est devenu le framework front-end le plus populaire en Chine. Il compte actuellement près de 10 000 étoiles sur Github et sert 500 000 développeurs dans le monde.
14. WeUI, une bibliothèque d'interface utilisateur spécialement conçue pour WeChat
Note : 7,7 ; Collection : 2002
Contrat de licence : MIT
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : Multiplateforme
WeUI est une bibliothèque d'interface utilisateur conçue par l'équipe de conception officielle de WeChat spécifiquement pour les applications Web mobiles WeChat.
WeUI est une bibliothèque de styles de base cohérente avec l'expérience visuelle native de WeChat. Elle est conçue sur mesure pour le développement Web WeChat et peut rendre la perception de l'utilisation des utilisateurs plus unifiée. Contient divers éléments tels qu'un bouton, une cellule, une boîte de dialogue, un toast, un article, une icône, etc.
15. Administrateur du modèle d'application Web de tableau de bord
Note : 7,6 ; Nombre de collections : 136
Contrat de licence : MIT
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : multiplateforme
Adresse du code source : https://github.com/almasaeed2010/AdminLTE/
AdminLTE Oui Modèle d'application Web open source populaire pour les tableaux de bord d'administration et les panneaux de contrôle. Il s'agit d'un framework CSS basé sur Bootstrap 3, un modèle HTML réactif. Tirez parti de tous les composants Bootstrap pour concevoir et styliser la plupart des plugins utilisés, créant ainsi une conception d'interface utilisateur cohérente qui peut être utilisée comme application backend. AdminLTE est basé sur une conception modulaire et peut être facilement personnalisé et refait par-dessus.
16. Outil du système de déploiement Web en ligne Walle
Note : 7,4 ; Nombre de collections : 359
Contrat de licence : MIT
Langage de développement : PHP, HTML/CSS
Système d'exploitation : multiplateforme
Walle est un outil de système de déploiement Web avec une configuration simple, des fonctions complètes, une interface fluide et prêt à -à utiliser hors de la boîte ! Prend en charge la gestion des versions git et svn, prend en charge diverses versions de code Web, versions et restaurations de PHP, Python, JAVA et autres codes, qui peuvent être complétées en un seul clic via le Web.
17. Modèle d'arrière-plan de gestion de site Web Charisma
Note : 7,4 ; Nombre de collections : 1055
Contrat de licence : Apache
Langage de développement : HTML/CSS
Système d'exploitation : multiplateforme
Charisma est un modèle d'arrière-plan de gestion de site Web réactif basé sur Twitter Bootstrap, comprenant 9 ensembles de magnifiques thèmes.
18. Système de gestion Kanban open source LibreBoard
Note : 7,4 ; Collection : 380
Contrat de licence : MIT
Langage de développement : JavaScript, HTML/CSS
Système d'exploitation : multiplateforme
LibreBoard est une implémentation open source de Kanban, une organisation basée sur des cartes. Il peut être utilisé pour réaliser une communication collaborative au sein d'une équipe. Vous pouvez considérer LibreBoard comme une version open source de Trello. LibreBoard fournit une installation en un clic et une image Docker vérifiée pour la plateforme Sandstorm.
Le contenu ci-dessus est une brève introduction à 18 projets open source nationaux populaires sur le développement front-end. J'espère qu'il pourra aider tout le monde.
Recommandations associées :
Présentation d'un site Web de projet open source Microsoft - CodePlex
Une collection d'excellents projets open source PHP
Résumé des projets open source PHP
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
