Accentsconagua
Share
Als het gaat om het kiezen van het juiste JavaScript-framework, is het zeker een wild en verwarrend landschap. Deze gids zal je helpen - een ontluikende front-end ontwikkelaar - door die troebele wateren navigeren wanneer de tijd rijp is om een kader te kiezen dat bij jou past. Elk kader dat ik heb gekozen om te laten zien, beschrijft de korte grondbeginselen, de taalsyntaxis en bevat ook nuttige leermiddelen.
In onze ontwikkelingswereld kan een "raamwerk" worden gedefinieerd als een JavaScript-bibliotheek die gegevensgestuurde, interactieve interfaces weergeeft en weergeeft. Ze bestaan om te helpen bij het weergeven van gegevens aan een gebruiker wanneer een interactie wordt geactiveerd. Al deze bibliotheken verschillen enigszins van de ene naar de andere, maar hun doel is hetzelfde; toon nieuwe gegevens wanneer een interactie heeft plaatsgevonden.
Laten we deze krachtige kaders dieper bekijken om ons te helpen beter door het landschap te ziften.
Er zijn veel opties als het gaat om het kiezen van een raamwerk-wat volgt is een lijst van het huidige terrein, inclusief Vue, React, Angular en Ember. Elk is geselecteerd op basis van community-groei en duurzaamheid, GitHub-activiteit, de tijd dat het project beschikbaar is voor ontwikkelaars en of het project nog steeds in gebruik is bij een grote groep ontwikkelaars en ontwikkelingsbedrijven..
First Commit 27 juli 2013
Bestandsgrootte: 27.5KB verkleind
Vue claimt een progressief raamwerk te zijn dat benaderbaar, veelzijdig en performant is. Als u een fundamenteel begrip hebt van de goede oude webstack (HTML, CSS, JS), bent u al in een uitstekende positie om Vue te gebruiken.
"De kernbibliotheek is alleen gericht op de weergavelaag en is heel gemakkelijk op te halen en te integreren met andere bibliotheken of bestaande projecten. Aan de andere kant is Vue ook perfect in staat geavanceerde Single-Page Applications aan te sturen wanneer gebruikt in combinatie met moderne tooling en ondersteunende bibliotheken. "- VueJS Introductie Docs
Als het gaat om syntaxis, dan is dit wat de bibliotheek te bieden heeft met behulp van hun "Hello World" demo:
message
var app = new Vue (el: '#app', data: message: 'Hello Vue!')
De bibliotheek wordt ook expressiever met behulp van 'kenmerkwaarden' binnen uw markup. Hier is een meer betrokken syntaxis met behulp van deze kenmerken:
Beweeg je muis een paar seconden over me heen om mijn dynamisch gebonden titel te zien!
Naast syntaxis, staat Vue.js ook de afhandeling van gebruikersinvoer toe, het bouwen van componentsjablonen, het binden van gegevens aan de structuur van de DOM met conditionals en loops en een "declaratieve rendering" die wordt bereikt door een ongecompliceerde syntaxis die losjes is gemodelleerd op de webcomponenten. spec.
Leermiddelen:
First Commit 29 mei 2013
Bestandsgrootte: 7.3KB verkleind w / add-ons: 11.3 KB verkleind
React definieert zichzelf als een JavaScript-bibliotheek voor het bouwen van interfaces die worden aangestuurd door dynamische gegevens. Het is ontwikkeld door de medewerkers van Facebook en is ook Open Source op GitHub. Je voelt je misschien een beetje grof als ik zeg dat je HTML in JavaScript schrijft, maar helaas werkt React zo.
Laten we een voorbeeld van een syntaxis bekijken, rechtstreeks uit de documentatie van de React-intro zelfstudie. Dit voorbeeld maakt wat React "Component-subklassen" noemt, hoewel het ook een paar verschillende soorten componenten heeft. De syntaxis voor een componentaanroep is XML-achtig zoals u zult opmerken in deze HTML-code:
class ShoppingList breidt React.Component uit render () retourneren ();Shopping-lijst voor this.props.name
- Oculus
React wordt geleverd met extra opties, zoals add-ons die als een nuttige set hulpprogramma's worden beschouwd. Deze add-ons bevatten hulpprogramma's die helpen bij het omgaan met animaties en overgangen, hulpprogramma's voor het profileren van profielen, helpdeskhulpmiddelen en nog veel meer. Reactiedocumentatie beveelt ook aan om React with Babel te gebruiken om ES6 en JSX in uw JavaScript-code te gebruiken. Er is ook een handige React Devtools-extensie voor Chrome en Firefox waarmee je een componentboom van React in de Dev Tools van je browser kunt bekijken.
Leermiddelen:
First Commit 18 september 2014 (GitHub gemeld)
Eerste uitgave (Volgens Wikipedia) 20 oktober 2010
Bestandsgrootte: CLI Tool. Niet langer een zelfstandig JS-bestand.
Angular is ontwikkeld door het team van Google. Omdat HTML nooit een dynamische taal moest zijn, breidt Angular de HTML-woordenschat uit door toe te staan dat attributen worden uitgebreid in uw markup. Dit maakt uiteindelijk "declaratieve bindingen" mogelijk voor gebeurtenissen, om dynamische gegevens en toestanden weer te geven op basis van interacties. U kunt aan grote gegevensvereisten voldoen door gegevensmodellen te bouwen op RxJS, Immutable.js of een ander push-model. En u kunt de sjabloontaal uitbreiden met uw eigen componenten en gebruik een breed scala aan bestaande componenten.
"Leer één manier om applicaties te bouwen met Angular en hergebruik uw code en mogelijkheden om apps te bouwen voor elk implementatiedoel. Voor internet, mobiel internet, native mobile en native desktop. "
De Angular-syntaxis is niets nieuws in termen van HTML-kenmerken en Moustache-achtige plaatsaanduidingen, met uitzondering van de naamgeving ng- zoals je in het volgende voorbeeld zult zien:
Hallo yourName!
Angular bestaat ook voornamelijk uit componenten die een combinatie zijn van HTML-sjablonen en een componentklasse die een deel van het scherm bestuurt.
// src / app / app.component.ts import Component uit '@ angular / core'; @Component (selector: 'mijn-app', sjabloon: 'Hallo name
') exportklasse AppComponent name =' Angular ';
AppComponent-inhoud hier laden ...
Het bestand met de extensie .ts uit het bovenstaande voorbeeld is geschreven in TypeScript. Een taal die begint met dezelfde syntaxis en semantiek van JavaScript. Het is een superset van JavaScript dat wordt gecompileerd in JavaScript, of wat u zou kunnen zien als een "taalversterker", d.w.z. syntaxisuiker. Dit is waar de CLI-tool zal helpen als het tijd is om uw code te compileren.
Leermiddelen:
First Commit 30 april 2011
Bestandsgrootte: ?
Ember is een bibliotheek die lijkt op de andere die we hebben besproken en die ook integreert met Handlebars. Voor degenen die niet vertrouwd zijn met Handlebars, is het een sjablooneigenschap om statische pagina's te maken, net zoals u bekend bent met Jekyll. Ontwikkelaars kunnen Handlebars gebruiken om de markup te beschrijven en JavaScript te gebruiken om aangepast gedrag voor componenten te implementeren op basis van de interactie.
"Ember is een JavaScript-toepassingsraamwerk voor het maken van webtoepassingen met clientcomputers aan één pagina, waarbij gebruik wordt gemaakt van het Model-View-Controller (MVC) -patroon."
Ember is gebouwd met Node en gebruikt een verscheidenheid aan Node.js-modules voor gebruik. Ember heeft ook een opdrachtregelinterfacetool (geïnstalleerd via npm indien u dit wenst) met een standaard projectstructuur en een reeks ontwikkeltools, waaronder een addon-systeem. Het wordt ook geleverd met een ontwikkelserver en bouwomgevingsvlaggen die via de opdrachtregel kunnen worden doorgegeven.
Syntaxis voor Sintel lijkt niets bijzonders te zijn, te vertrouwen op object-letterwoorden en de puntnotatie die we zeer goed kennen in JavaSript, plus Sturen voor de sjabloon-aanroepen.
import van Ember uit 'sintel'; export standaard Ember.Controller.extend (firstName: 'Trek', lastName: 'Glowacki');
Hallo, voornaam Achternaam
Het bovenstaande voorbeeld is een zeer basissmaak van de syntaxis en bestandsstructuur. De democode zal een Ember-controller exporteren en uitbreiden en de namen van het object letterlijk in uw markeringen compileren.
Het is ook vermeldenswaard dat de routermogelijkheden van Ember u in staat stellen om te stoppen met het breken van het web. U krijgt standaard URL's en een terugwerkknop bij elke route die u maakt en de API is eenvoudig te gebruiken (en vertrouwd voor mensen met ervaring in webkaders op de server). Ember.js is gratis, open source en zal altijd zijn zoals ze op hun site vermelden.
Leermiddelen:
Kaderkeuze komt altijd neer op persoonlijke coderingsvoorkeur en vertrouwen in het project op de lange termijn. Als je dieper in een X versus Y wilt gaan om de keuze te maken, heeft Vue een behoorlijke verklaring en vergelijking op hun site die ook informatie bevat over andere bibliotheken zoals Knockout, Polymer en Riot. Misschien wilt u ook onze quiz doen, die u moet helpen uw keuzes te beperken!
