Accentsconagua
Share
Når det gjelder å velge riktig JavaScript-rammeverk, er det sikkert et vill og forvirrende landskap der ute. Denne veiledningen vil hjelpe deg - en spirende front-end-utvikler - navigere i de mørke vannet når tiden kommer til å velge et rammeverk som passer for deg. Hvert rammeverk jeg har valgt å vise frem, beskriver de korte grunnleggende, språksyntaxen og inkluderer også nyttige læringsressurser.
I vår utviklingsverden kan et "rammeverk" defineres som et JavaScript-bibliotek som viser og gjør data-drevne interaktive grensesnitt. De eksisterer for å bidra til å gjøre data til en bruker når en interaksjon utløses. Alle disse bibliotekene adskiller seg litt fra den ene til den andre, men deres formål er det samme; Vis nye data når et samspill har funnet sted.
La oss undersøke disse kraftige rammebunnene dypere for å hjelpe oss bedre å sile gjennom landskapet.
Det er mange alternativer når det gjelder å velge et rammeverk - det som følger er en liste over det aktuelle terrenget, inkludert Vue, React, Angular and Ember. Hver enkelt er valgt ut fra samfunnsvekst og bærekraft, GitHub-aktivitet, lengden på prosjektet har vært tilgjengelig for utviklere, og om prosjektet fortsatt er i bruk av en stor gruppe utviklere og utviklingsselskaper.
Første forpliktelse 27. juli 2013
Filstørrelse: 27,5KB minifisert
Vue hevder å være et progressivt rammeverk som er tilnærmet, allsidig og performant. Hvis du har en grunnleggende forståelse av den gode ol-webstakken (HTML, CSS, JS), har du allerede en god posisjon til å bruke Vue.
"Kjernebiblioteket er kun fokusert på visningslaget, og er veldig enkelt å hente og integrere med andre biblioteker eller eksisterende prosjekter. På den annen side er Vue også perfekt i stand til å drive sofistikerte enkeltsidige applikasjoner når de brukes i kombinasjon med moderne verktøy og støttende biblioteker. "- VueJS Introduksjonsdokumenter
Når det gjelder syntaks, er dette hva biblioteket vil tilby ved hjelp av deres bare-bein "Hello World" -demo:
budskap
var app = ny Vue (el: '#app', data: melding: 'Hei Vue!')
Biblioteket vil også bli mer uttrykksfulle ved å bruke "attributtverdier" i oppslaget ditt. Her er en mer involvert syntaks som bruker disse attributter:
Hold musen over meg i noen sekunder for å se min dynamisk bundet tittel!
Syntax til side, vil Vue.js tillate håndtering av brukerinngang, byggekomponentmaler, bindende data til DOMs struktur med betingelse og sløyfer, og en "deklarativ gjengivelse" oppnådd ved en rett fremsynt syntaks som er løst modellert på webkomponentene spec.
Læringsressurser:
Første forpliktelse 29. mai 2013
Filstørrelse: 7.3KB minifisert w / add-ons: 11,3KB minifisert
React definerer seg som et JavaScript-bibliotek for å bygge grensesnitt som drives av dynamiske data. Den ble utviklet av de ansatte på Facebook og er også åpen kildekode på GitHub. Du kan føle deg litt grov når jeg sier at du vil forfatter HTML i JavaScript, men dessverre er dette hvordan React fungerer.
La oss se på et syntakseksempel rett ut av dokumentasjonen for React intro-opplæringen. Dette eksempelet oppretter hva React calls "Component subclasses", selv om det også har noen forskjellige typer komponenter. Syntaxen for en komponentanrop er XML-lignende som du vil legge merke til i denne HTML-koden:
klasse ShoppingList strekker React.Component render () return ();Shoppingliste for this.props.name
- Hva skjer
- Oculus
Reakt kommer med flere alternativer, for eksempel add-ons som anses å være et nyttig sett med verktøymoduler. Disse tilleggene inkluderer verktøy som hjelper når det gjelder animasjoner og overganger, ytelsesprofileringsverktøy, testassistenthjelpere og mye mer. Reaksjonsdokumentasjon anbefaler også å bruke React with Babel for å tillate bruk av ES6 og JSX i JavaScript-koden. Det er også en praktisk React Devtools-utvidelse for Chrome og Firefox som lar deg inspisere et React-komponent-tre i nettleserens Dev Tools.
Læringsressurser:
Første forpliktelse 18. september 2014 (GitHub rapportert)
Første utgivelse (Ifølge Wikipedia) 20. oktober 2010
Filstørrelse: CLI Tool. Ikke lenger en frittstående JS-fil.
Angular er utviklet av teamet på Google. Siden HTML aldri var ment å være et dynamisk språk Angular utvider HTML-vokabularet ved å tillate at attributter utvides i oppslaget ditt. Dette gir til slutt "deklarative bindinger" til hendelser, for å vise dynamiske data og stater basert på interaksjoner. Du kan møte store datakrav ved å bygge datamodeller på RxJS, Immutable.js eller en annen push-modell. Og du kan utvide malingsspråket med dine egne komponenter og bruk et bredt spekter av eksisterende komponenter.
"Lær en måte å bygge programmer med Angular og gjenbruk koden din og evner til å bygge programmer for ethvert distribusjonsmål. For web, mobilnett, innfødt mobil og innfødt skrivebord. "
Angular syntaxen er ikke noe nytt når det gjelder HTML-attributter og Mustache-esque plassholdere, med unntak av namespacing ved hjelp av ng- som du vil se i følgende eksempel:
Hei ditt navn!
Angular består også primært av komponenter som er en kombinasjon av HTML-maler og en komponentklasse som styrer en del av skjermen.
// src / app / app.component.ts import komponent fra '@ vinkel / kjerne'; @Component (selector: 'my-app', mal: 'Hei navn
') eksportklasse AppComponent name =' Angular ';
Laster inn AppComponent-innhold her ...
Filen med utvidelsen .ts fra eksemplet ovenfor er skrevet i TypeScript. Et språk som starter fra samme syntaks og semantikk av JavaScript. Det er en superset av JavaScript som samler inn i JavaScript, eller hva du kanskje tenker på som en "språkforbedrer", dvs. syntakssukker. Dette er hvor CLI-verktøyet vil hjelpe når det kommer tid til å kompilere koden din.
Læringsressurser:
Første forpliktelse 30. april 2011
Filstørrelse: ?
Ember er et bibliotek som de andre vi har diskutert som også integreres med håndtak. For de som ikke er kjent med håndtak, er det et malingsspråk for å bygge statiske sider, akkurat som du kanskje er kjent med for Jekyll. Utviklere kan bruke håndteringsbjelker for å beskrive markeringen og bruke JavaScript for å implementere tilpasset oppførsel for komponenter basert på samspillet.
"Ember er et rammeprogram for JavaScript-applikasjoner for å lage websider på en side av klientsiden, som bruker modell-View-Controller (MVC) -mønster."
Ember er bygget med Node og bruker en rekke Node.js moduler for drift. Ember har også et kommandolinjegrensesnittsverktøy (installert via npm hvis ønskelig) som gir en standard prosjektstruktur og et sett med utviklingsverktøy, inkludert et addonsystem. Den kommer også pakket med en utviklingsserver og bygger miljøflagger som kan sendes via kommandolinjen.
Syntaks for Ember ser ut til å være ikke noe uvanlig, avhengig av objektets bokstaver og punktnotasjonen vi er godt kjent med i JavaSript, pluss Håndtak for malen ringer.
importer Ember fra 'ember'; eksporter standard Ember.Controller.extend (firstName: 'Trek', lastName: 'Glowacki');
Hallo, fornavn Etternavn
Eksempelet ovenfor er en veldig grunnleggende smak av syntaks og filstruktur. Demokoden vil eksportere og utvide en Ember-kontroller og kompilere navnene fra objektet bokstavelig talt inn i oppslaget.
Det er også verdt å nevne at Embers routerfunksjoner lar deg slutte å bryte nettet. Du får standard webadresser og en fungerende tilbake-knapp med hver rute du oppretter, og API-en er enkel å bruke (og kjent for de med erfaring i server-side web-rammer). Ember.js er gratis, åpen kildekode og vil alltid være som de oppgir på deres nettsted.
Læringsressurser:
Rammealternativet koker alltid ned til personlig kodingspreferanse og tillit til prosjektet på lang sikt. Hvis du ønsker å gå dypere inn i en X vs Y for å gjøre valget, har Vue en anstendig forklaring og sammenligning på deres nettsted som også inneholder informasjon om andre biblioteker som Knockout, Polymer og Riot. Du kan også gjerne ta vår quiz, som skal hjelpe deg å begrense valgene dine!
