Accentsconagua
Share
Lorsqu'il s'agit de choisir le bon framework JavaScript, il s'agit certainement d'un paysage sauvage et déroutant. Ce guide vous aidera - un développeur débutant en herbe - à naviguer dans ces eaux troubles lorsque viendra le temps de choisir un cadre adapté à vos besoins. Chaque cadre que j'ai choisi de présenter décrira les principes de base, la syntaxe de la langue et comprendra également des ressources d'apprentissage utiles..
Dans notre monde de développement, un «framework» peut être défini comme une bibliothèque JavaScript qui affiche et rend des interfaces interactives basées sur les données. Ils existent pour aider à rendre les données à un utilisateur lorsqu'une interaction est déclenchée. Toutes ces bibliothèques diffèrent légèrement les unes des autres, mais leur objectif est le même. montrer de nouvelles données quand une interaction a eu lieu.
Examinons ces puissants cadres plus en profondeur pour nous aider à mieux parcourir le paysage.
Il existe de nombreuses options pour choisir un cadre. Vous trouverez ci-dessous une liste du terrain actuel, y compris Vue, React, Angular et Ember. Chacun a été sélectionné en fonction de la croissance et de la durabilité de la communauté, de l'activité GitHub, de la durée de disponibilité du projet pour les développeurs et du fait que le projet soit toujours utilisé par un grand nombre de développeurs et de sociétés de développement..
Premier engagement 27 juillet 2013
Taille du fichier: 27,5 Ko minifiée
Vue prétend être un cadre évolutif, accessible, polyvalent et performant. Si vous avez une compréhension fondamentale de la bonne pile web (HTML, CSS, JS), vous êtes déjà bien placé pour utiliser Vue..
«La bibliothèque principale se concentre uniquement sur la couche de visualisation et est très facile à récupérer et à intégrer à d'autres bibliothèques ou à des projets existants. D'autre part, Vue est également parfaitement capable d'alimenter des applications sophistiquées à page unique lorsqu'il est utilisé en combinaison avec des outils modernes et des bibliothèques de support. ”- VueJS Introduction Docs
En ce qui concerne la syntaxe, voici ce que la bibliothèque proposera en utilisant sa démo «Hello World»:
message
var app = new Vue (el: '#app', données: message: 'Hello Vue!')
La bibliothèque deviendra également plus expressive en utilisant des «valeurs d'attribut» dans votre balise. Voici une syntaxe plus complexe utilisant ces attributs:
Passez votre souris sur moi pendant quelques secondes pour voir mon titre lié dynamiquement!
Syntaxe à part, Vue.js permettra le traitement des entrées utilisateur, la construction de modèles de composants, la liaison des données à la structure du DOM avec des conditions et des boucles, ainsi qu’un «rendu déclaratif» obtenu à l’aide d’une syntaxe simple, modélisée de manière vague sur les composants Web. Spec.
Ressources d'apprentissage:
Premier engagement 29 mai 2013
Taille du fichier: 7,3 Ko minifiée w / Add-ons: 11,3 Ko minifiée
React se définit comme une bibliothèque JavaScript permettant de créer des interfaces pilotées par des données dynamiques. Il a été développé par les employés de Facebook et est également Open Source sur GitHub. Vous vous sentirez peut-être un peu dégoûté quand je vous dirai que vous allez créer du code HTML en JavaScript, mais malheureusement, voici comment React fonctionne.
Regardons un exemple de syntaxe tout droit sorti de la documentation du didacticiel React intro. Cet exemple crée ce que React appelle des «sous-classes de composants», même s'il comporte également différents types de composants. La syntaxe d'un appel de composant est similaire à XML, comme vous le remarquerez dans ce code HTML:
class ShoppingList étend React.Component render () return ()Liste d'achats pour this.props.name
- Oculus
React est livré avec des options supplémentaires telles que des add-ons qui sont considérés comme un ensemble utile de modules utilitaires. Ces modules complémentaires incluent des utilitaires permettant de gérer les animations et les transitions, des outils de profilage des performances, des aides à la réalisation de tests, etc. La documentation de React recommande également d’utiliser React avec Babel pour permettre l’utilisation de ES6 et JSX dans votre code JavaScript. Il existe également une extension pratique React Devtools pour Chrome et Firefox qui vous permet d'inspecter une arborescence de composants React dans les outils de développement de votre navigateur..
Ressources d'apprentissage:
Premier engagement 18 septembre 2014 (rapport GitHub)
Première version (Selon Wikipedia) 20 octobre 2010
Taille du fichier: Outil CLI. Plus un fichier JS autonome.
Angular est développé par l'équipe de Google. Puisque HTML n'a jamais été conçu pour être un langage dynamique, Angular étend le vocabulaire HTML en permettant l'extension des attributs dans votre balisage. Cela permet en fin de compte des «liaisons déclaratives» avec des événements, afin d'afficher des données dynamiques et des états basés sur des interactions. Vous pouvez répondre à des exigences de données importantes en construisant des modèles de données sur RxJS, Immutable.js ou un autre modèle poussé. Et vous pouvez étendre le langage de template avec vos propres composants et utiliser un large éventail de composants existants.
«Découvrez un moyen de créer des applications avec Angular et de réutiliser votre code et vos capacités pour créer des applications pour toute cible de déploiement. Pour le Web, le Web mobile, le mobile natif et le bureau natif. ”
La syntaxe angulaire n’a rien de nouveau en termes d’attributs HTML et d’espaces réservés Moustache, à l’exception de l’espacement de noms utilisant ng- comme vous le verrez dans l'exemple suivant:
Bonjour yourName!
Angular est également principalement constitué de composants associant des modèles HTML et une classe de composants contrôlant une partie de l'écran..
// src / app / app.component.ts import Component from '@ angular / core'; @Component (selector: 'my-app', template: 'Bonjour name
') export class AppComponent name =' Angular ';
Chargement du contenu AppComponent ici…
Le fichier avec l'extension .ts de l'exemple ci-dessus est écrit en TypeScript. Un langage qui part de la même syntaxe et de la même sémantique que JavaScript. C'est un sur-ensemble de JavaScript qui compile en JavaScript, ou ce que vous pourriez considérer comme un «amplificateur de langue», c'est-à-dire un sucre de syntaxe. C’est là que l’outil CLI vous aidera au moment de compiler votre code..
Ressources d'apprentissage:
Premier engagement 30 avril 2011
Taille du fichier: ?
Ember est une bibliothèque très semblable aux autres dont nous avons discuté et qui s’intègre également au guidon. Pour ceux qui ne connaissent pas le guidon, c'est un langage de gabarit pour la création de pages statiques, comme vous le savez peut-être pour Jekyll. Les développeurs peuvent utiliser le guidon pour décrire le balisage et utiliser JavaScript pour implémenter un comportement personnalisé pour les composants en fonction de l'interaction..
"Ember est un framework d'application JavaScript permettant de créer des applications Web côté page, utilisant le modèle MVC (Model-View-Controller)."
Ember est construit avec Node et utilise divers modules Node.js pour son fonctionnement. Ember dispose également d’un outil d’interface de ligne de commande (installé via npm si vous le souhaitez) qui fournit une structure de projet standard et un ensemble d’outils de développement, notamment un système d’addon. Il est également fourni avec un serveur de développement et des indicateurs d'environnement de construction pouvant être transmis via la ligne de commande..
La syntaxe pour Ember n’a rien d’inhabituel, elle s’appuie sur les littéraux d’objet et sur la notation de points que nous connaissons très bien dans JavaSript, ainsi que sur le guidon des appels de modèles..
importer Ember de 'ember'; export par défaut Ember.Controller.extend (firstName: 'Trek', lastName: 'Glowacki');
Bonjour, Prénom nom de famille
L'exemple ci-dessus est un avant-goût très basique de la syntaxe et de la structure de fichier. Le code de démonstration exportera et étendra un contrôleur Ember et compilera les noms du littéral d'objet dans votre balise..
Il est également intéressant de noter que les capacités de routeur d'Ember vous permettent de cesser de casser le Web. Vous obtenez des URL et un bouton Précédent par défaut pour chaque route que vous créez. L’API est facile à utiliser (et familière à ceux qui ont une expérience des infrastructures Web côté serveur). Ember.js est gratuit, open source et restera comme ils le disent sur leur site.
Ressources d'apprentissage:
Le choix du cadre se résume toujours à une préférence de codage personnel et à la confiance à long terme dans le projet. Si vous souhaitez approfondir un X vs. Y pour vous aider à faire votre choix, Vue a une explication et une comparaison décentes sur son site, qui inclut également des informations sur d'autres bibliothèques telles que Knockout, Polymer et Riot. Vous voudrez peut-être aussi répondre à notre questionnaire, qui devrait vous aider à préciser vos choix!
