Accentsconagua
Share
När det gäller att välja rätt JavaScript Framework är det verkligen ett vild och förvirrande landskap där ute. Den här guiden kommer att hjälpa dig - en spirande front-end-utvecklare - navigera i dessa skumma vatten när tiden kommer att välja ett ramverk som passar dig. Varje ram jag har valt att visa upp kommer att beskriva de korta grundprinciperna, språksyntaxen och också inkludera hjälpsamma läromedel.
I vår utvecklingsverksamhet kan en "ram" definieras som ett JavaScript-bibliotek som visar och gör datadriven, interaktiv gränssnitt. De finns för att hjälpa till att göra data till en användare när en interaktion utlöses. Alla dessa bibliotek skiljer sig något från det ena till det andra, men deras syfte är detsamma. visa nya data när en interaktion har ägt rum.
Låt oss undersöka dessa kraftfulla ramar djupare för att hjälpa oss att sätta bättre genom landskapet.
Det finns många alternativ när det gäller att välja en ram - vad följer är en lista över den aktuella terrängen, inklusive Vue, React, Angular and Ember. Var och en har valts utifrån samhällsutveckling och hållbarhet, GitHub-aktivitet, hur länge projektet har varit tillgängligt för utvecklare, och om projektet fortfarande används av en stor grupp utvecklare och utvecklingsföretag.
Första förpliktelsen 27 juli 2013
Filstorlek: 27,5KB minifierad
Vue påstår sig vara en progressiv ram som är tillgänglig, mångsidig och prestanda. Om du har en grundläggande förståelse för den goda ol-webbstacken (HTML, CSS, JS) har du redan en bra position att använda Vue.
"Kärnbiblioteket är endast inriktat på visningsskiktet och är väldigt lätt att hämta och integrera med andra bibliotek eller befintliga projekt. Å andra sidan är Vue också perfekt för att driva sofistikerade enkelsidiga applikationer när de används tillsammans med moderna verktyg och stödjande bibliotek. "- VueJS Introduktion Docs
När det gäller syntaxen är det här vad biblioteket kommer att erbjuda genom att använda sin "Hello World" demo:
message
var app = ny Vue (el: '#app', data: message: 'Hello Vue!')
Biblioteket blir också mer uttrycksfullt med hjälp av "attributvärden" inom din uppställning. Här är en mer inblandad syntax som använder dessa attribut:
Håll musen över mig i några sekunder för att se min dynamiskt bundna titel!
Syntax åt sidan kan Vue.js möjliggöra hantering av användarinmatning, byggkomponentmallar, bindande data till DOMs struktur med villkor och loopar och en "deklarativ rendering" uppnås genom en rakt framåt syntax löst modellerad på webbkomponenterna spec.
Lärande resurser:
Första förpliktelsen 29 maj 2013
Filstorlek: 7,3 kb minifierad w / tillägg: 11,3KB minifierad
Reag definierar sig som ett JavaScript-bibliotek för att bygga gränssnitt som drivs av dynamiska data. Det utvecklades av medarbetarna på Facebook och är också öppen källkod på GitHub. Det kan hända att du känner dig lite grov när jag säger att du kommer att skriva HTML i JavaScript, men det är tyvärr hur React fungerar.
Låt oss titta på ett syntaxexempel rakt ut ur dokumentationen för React intro-handledning. I det här exemplet skapas det som heter React "Component subclasses", även om det även har några olika typer av komponenter. Syntaxen för ett komponentanrop är XML-liknande som du kommer att märka i den här HTML-koden:
klass ShoppingList utökar React.Component render () return ();Shoppinglista för this.props.name
- Oculus
Reakt kommer med ytterligare alternativ som tillägg som anses vara en användbar uppsättning verktygsmoduler. Dessa tillägg innehåller verktyg som hjälper till när det gäller animeringar och övergångar, prestandaprofileringsverktyg, testcasehjälpare och mycket mer. Reaktionsdokumentation rekommenderar även att du använder React with Babel för att tillåta användning av ES6 och JSX i JavaScript-koden. Det finns också en praktisk React Devtools-förlängning för Chrome och Firefox som låter dig inspektera ett React-komponentträd i webbläsarens Dev Tools.
Lärande resurser:
Första förpliktelsen 18 september 2014 (GitHub rapporterade)
Initial Release (Enligt Wikipedia) 20 oktober 2010
Filstorlek: CLI Tool. Inte längre en fristående JS-fil.
Angular är utvecklad av teamet på Google. Eftersom HTML aldrig var tänkt att vara ett dynamiskt språk Angular utökar HTML-ordförrådet genom att tillåta att attribut utökas i din markering. Detta möjliggör slutligen "deklarativa bindningar" till händelser, för att visa dynamiska data och tillstånd baserat på interaktioner. Du kan möta stora datakrav genom att bygga datamodeller på RxJS, Immutable.js eller annan push-modell. Och du kan förlänga mallspråket med dina egna komponenter och Använd ett brett utbud av befintliga komponenter.
"Lär dig ett sätt att bygga applikationer med Angular och återanvända din kod och förmåga att bygga appar för alla implementeringsmål. För webb, mobilweb, inbyggd mobil och inbyggd skrivbord. "
Angular syntaxen är inget nytt när det gäller HTML attribut och Mustache-esque platshållare, med undantag för namespacing med ng- som du kommer att se i följande exempel:
Hej yourName!
Angular består också i första hand av komponenter som är en kombination av HTML-mallar och en komponentklass som styr en del av skärmen.
// src / app / app.component.ts importera Component från '@ vinkel / kärna'; @Component (selector: 'my-app', mall: 'Hej namn
') exportklass AppComponent name =' Angular ';
Laddar AppComponent-innehåll här ...
Filen med förlängningen .ts från exemplet ovan är skrivet i TypeScript. Ett språk som startar från samma syntax och semantik av JavaScript. Det är en superset av JavaScript som kompilerar till JavaScript, eller vad du kanske tänker på som en "språkförstärkare", dvs syntaksocker. Det här är CLI-verktyget som hjälper dig när det är dags att sammanställa din kod.
Lärande resurser:
Första förpliktelsen 30 april 2011
Filstorlek: ?
Ember är ett bibliotek som de andra som vi har diskuterat, som också integreras med handtag. För dem som inte är bekanta med handtag är det ett mall språk för att bygga statiska sidor, precis som du kanske är bekant med för Jekyll. Utvecklare kan använda hanteringsrader för att beskriva markeringen och använda JavaScript för att implementera anpassat beteende för komponenter baserat på interaktionen.
"Ember är ett ramverk för JavaScript-applikationer för att skapa webbsidor för klientsidor på en sida, som använder MVC-mönstret Model-View-Controller (MVC)."
Ember är byggt med Node och använder en rad Node.js moduler för drift. Ember har också ett kommandoradsgränssnittsverktyg (installerat via npm om du vill) vilket ger en standardprojektstruktur och en uppsättning utvecklingsverktyg inklusive ett addonsystem. Den kommer också förpackad med en utvecklingsserver och bygger miljöflaggor som kan skickas via kommandoraden.
Syntax för Ember ser ut att inte vara något ovanligt, med utgångspunkt i objektets bokstavsbeteckningar och punktnotationen vi är mycket bekanta med i JavaScript, plus Handbars för mallsamtal.
Importera Ember från "ember"; exportera standard Ember.Controller.extend (firstName: 'Trek', efternamn: 'Glowacki');
Hej, förnamn Efternamn
Urvalet ovan är en mycket grundläggande smak av syntaxen och filstrukturen. Demokoden kommer att exportera och förlänga en Ember-kontroller och kompilera namnen från objektet bokstavligt till din markering.
Det är också värt att nämna att Embers routerfunktioner gör det möjligt för dig att sluta bryta nätet. Du får standard webbadresser och en fungerande tillbaka-knapp med varje rutt du skapar, och API: n är lätt att använda (och bekant för dem med erfarenhet i webbsidor på serverns sida). Ember.js är gratis, öppen källkod och kommer alltid att vara som de anger på deras webbplats.
Lärande resurser:
Ramverk valger alltid ner till personliga kodningsförmåner och förtroende för projektets långsiktiga utveckling. Om du vill gå djupare in i en X vs Y för att göra valet Vue har en anständig förklaring och jämförelse på deras webbplats som även innehåller information om andra bibliotek som Knockout, Polymer och Riot. Du kanske också gillar att ta vår frågesport, vilket bör hjälpa dig att begränsa dina val!
