Læring ved kloning: Sådan nedbrydes problemet

At lære af dem, der er gået før

Foto fra Pexels.com

Når man lærer et nyt emne, hvad enten det drejer sig om webudvikling eller kurvning, giver det mening at nye elever starter på atomniveau. I tilfælde af webudvikling begynder læring med sidedefinitionsværktøjer som HTML5 og CSS, før overgangen til indlæring af behandlingssprog som Javascript eller Python.

Indledende trin som disse følger en bottom-up tilgang til læringen. Dette er et naturligt udgangspunkt, da det kun er logisk, at grundlæggende viden skal læres, før det er muligt at komme videre til mere komplicerede emner. For eksempel er det at kende Javascript en forudsætning for at lære React.

De fleste, hvis ikke alle, nye webudviklere finder spranget fra at forstå, hvordan individuelle værktøjer og teknologier fungerer, som CSS og HTML, til at være i stand til at integrere deres anvendelse til at være et vanskeligt spring. Heldigvis er kloning af eksisterende websteder en indlæringsteknologi, der bygger bro mellem den atomiske forståelse af individuelle dele og stykker til en holistisk forståelse.

Kloning introducerer udvikleren til de processer, der bruges til at konstruere applikationer i den virkelige verden. Denne indsats tvinger udvikleren i nogle tilfælde for første gang til at tænke på applikationen som et sæt samarbejdende komponenter (også kaldet en arkitektur) snarere end som en enkelt monolitisk enhed.

Oprettelse af en plan

Foto af Daniel McCullough på Unsplash

Indledning og lukning synes altid at være de sværeste dele af ethvert projekt. Denne vanskelighed kan især gælde for et kloningsprojekt, da det ofte er et nyt webudviklere, der første forsøg på at bygge et "rigtigt" websted. Oprettelse af en plan for at definere, hvilke aktiviteter der er behov, i hvilken rækkefølge de skal udføres, og på hvilket detaljeringsniveau der gør det lettere at komme i gang.

Trin 1 - Hvad skal der opnås?

At bestemme, hvad klonen på et eksisterende websted skal opnå, er mere end at angive et mål på højt niveau. Selve forudsætningen for denne indsats er ønsket om at bruge dine færdigheder til at bruge til at størkne det, du allerede ved, og for at få praktisk erfaring.

Men hvad er det bredere mål, og hvilken værdi vil det medføre? Vil du lære de trin, som andre WebDevs følger, når du bygger et websted for at udfylde din portefølje? Eller vil du bruge en kloning til ny brug som et middel til at identificere faldgruberne i en ny pakke eller ramme, du undersøger?

Ved første øjekast kan dette virke trivielt, men det er et vigtigt skridt i at bestemme, hvor stor indsats du skal lægge på dette projekt, hvor det skal være fokuseret og være i stand til at måle din succes i slutningen.

Trin 2 - Vælg et websted, der skal klones

En vanskelig beslutning i et kloningsprojekt kommer på stedet til at replikere, da der er en tendens til at stille unødig bekymring over kompleksiteten. Kompleksitet er et kritisk problem, men er et, der vil blive dækket på i et senere trin. Den mere betydningsfulde bekymring er at finde et websted, hvis funktioner giver det bedste middel til at nå de mål og værdier, du ønsker af klonearbejdet.

Hvis dit mål er at få erfaring med grundlæggende applikationskonstruktion, vil du måske starte med et websted, der har færre sideelementer. Hvis målet er at få erfaring med komplekst sidelayout, kan kloning af et websted som Unsplash muligvis være i orden. Og hvis dit mål er at omsætte det, du har lært om responsiv webdesign, vil et websted, der kører på mobil og desktops, være et klogt valg.

Trin 3 - Nedbryd de originale websides dele og stykker

Jeg voksede op på en gård, og enhver med lignende baggrund vil forholde sig til det faktum, at du på en gård skal holde maskiner i drift for at kunne plante, høste og tjene penge. Når et stykke maskiner går i stykker, har du ikke altid tid eller penge til at kunne ringe til en mekaniker for at få det repareret. Du skal gøre det selv.

Af samme grund er muligheden for at deltage i en klasse på mærket og modellen af ​​hvert udstyr ikke som regel en mulighed. Så du er nødt til at lære dig selv ved at adskille den fra hinanden, undersøge, hvad hver del gør, hvordan elementer fungerer sammen, og hvordan de samles til en arbejdsenhed.

Det samme gælder for websteder, der er det primære mål med kloning. Du tager en applikation fra hinanden for at lære, hvordan det fungerer, og derefter sætter du det sammen igen.

Processen med at nedbryde eller adskille et websted består af:

3.1 Undersøg hver side og identificer komponenterne på højt niveau på hver enkelt.

Nedbrydning gøres bedst ved at markere og kommentere hver side for at vise de forskellige komponenter og deres elementer.

Komponent-kommentar

En komponent er en gruppering af elementer, der sammen leverer et specifikt stykke funktionalitet til en bruger. For eksempel indeholder Right Nav-komponenten (omgivet af den blå stiplede linje) supplerende oplysninger. Det inkluderer også yderligere komponenter, som dem, der er mærket som nr. 8, og som giver brugeren de nuværende og forventede vejrforhold.

Resultatet af at kommentere og undersøge vigtige sidekomponenter er et kort over, hvordan de er organiseret til at danne applikationen.

3.2 Identificering af de elementer, der udgør hver komponent.

Vejrkomponenten i den højre navigationskomponent viser vejrforholdene på brugerens sted. Ud over statisk tekst er der også knapper, der giver brugeren mulighed for at ændre temperaturskalaen (se A) og et link til at åbne et nyt vindue for at give flere vejrdata (se B).

Vejrkomponent
3.3 Bestem, hvilke handlinger der er tilgængelige for brugeren, og hvad deres resultater er.

En registrering af handlingen, der skal udføres, og det forventede resultat skal oprettes for hver brugerhandling. Denne fortegnelse over knapper, links, svævehandlinger, inputfelter osv. Vil blive brugt til at implementere webstedets funktionalitet, men det fungerer også som en type kontrol og balance for at sikre, at klonen trofast gentager det originale websted.

For eksempel kan dette være så simpelt som at bemærke, at det at klikke på linket 'Mere på weather.com' for at åbne en ny fane. Omvendt kan dette være mere kompliceret, som det er tilfældet, hvis fanen weather.com skal skræddersys til brugerens lokalitet, hvilket kræver en mere detaljeret URL og kode på klientsiden.

Både papirnotater og regneark er enkle og ukomplicerede metoder til at opretholde beholdningen af ​​handlinger og resultater.

3.4 Undersøg, hvordan data flyder mellem komponenter, og bestem, hvilke variabler der kan være behov for, og hvor de vil blive brugt.

Applikationstilstand er de vedvarende data, som applikationen bruger til at implementere den funktionalitet, den var designet til at give. Tilstandsdata kan spænde over applikationen, eller de kan kun bruges på tværs af få komponenter, og afhængigt af programmets omfang kan der være mange tilstandsvariabler eller ingen.

Egenskaber eller 'rekvisitter' er kortvarige data, der bruges på et tidspunkt af en komponent, som ikke bevares. Et mønster, der opstår i webapplikationer, er et, hvor data, der vedligeholdes som en tilstand af en overordnet komponent, sendes som en rekvisita til dets børn.

For at brugerens avatar skal vises på tværs af applikationen, skal den f.eks. Gøres tilgængelig som en egenskab på hver side. At forstå, hvad og hvor data er påkrævet, er nødvendigt for at forstå dataflyt og kortlægningstilstand og rekvisitter til forskellige dele af appen. For eksempel,

Trin 4 - Identificer anvendelsesområdet

Funktionerne, du inkluderer i klonen, vil blive begrænset af den tid, du har til rådighed til udvikling og det mål, du har fastlagt i starten af ​​projektet.

Det er vigtigt at huske, at du ikke skal føle dig tvunget til at implementere enhver kapacitet på det websted, du kloner. I modsætning til et kommercielt eller offentligt websted, da du er den primære bruger, er den eneste person, du behøver at behage, dig selv.

Det anbefales også at starte småt og derefter itereere over successive projekter for at tilføje nye funktioner. Dette giver mulighed for mere fokus og giver dig mulighed for at indbygge små succeser. Det er også det mønster, som mange professionelle udviklere følger.

Trin 5 - Definer den tekniske stak

Den tekniske stak består af de pakker og biblioteker, der er nødvendige for at opbygge og køre webstedet. For eksempel,

Biblioteksafhængigheder til Meteorite Explorer-applikationen

At have mål hjælper også med valg af den tekniske stak, der bruges til at oprette og køre webstedet. En ny WebDev er oprindeligt fokuseret på specifikke pakker, der skal læres, mens en erfaren WebDev fokuserer på forskellige funktioner, funktionalitet, interaktioner og algoritmer. Nye WebDev'er bygger også helt fra bunden for at forbedre deres portefølje, mens WebDevs erfaring er afhængig af eksisterende applikationer og skabeloner.

Projektomfang er også en vigtig faktor, der skal overvejes, når du vælger en teknisk stak. Det anbefales, at antallet af pakker, der ikke er kendt for teamet, er begrænset til at kontrollere den deraf følgende frustration, forvirring og problemer, der opstår ved at bruge for meget “nyt” på samme tid.

Trin 6 - Klon webstedet

I et projekt af denne type duplikerer funktionaliteten, der findes på det websted, du har valgt, hvor du vil tilbringe størstedelen af ​​din tid. Hvordan du udfører dette trin og den faktiske længde, der kræves, afhænger af, hvad du har valgt at klone, projektomfang, den tekniske stak, du bruger, og den viden og erfaring, du starter med.

Fokus for denne diskussion er at præsentere processen for at gøre din kloningsindsats vellykket, ikke på mekanikerne i, hvordan du opretter en applikationskloon. Det faktum, at du er nødt til at bygge websteder for at være en WebDev, minder om komikeren Steve Martins rutine fra en 1978-episode af Saturday Night Live.

”Du kan være millionær .. og aldrig betale skat! Du siger .. ”Steve .. hvordan kan jeg være millionær .. og aldrig betale skat?” Først .. få en million dollars. ”

Implementeringen af ​​applikationen overlades til dig, og der er mange ressourcer til rådighed til at hjælpe dig gennem processen med at oprette en applikation ved hjælp af den tekniske stak, du har valgt.

Trin 7 - Overvej hvad du har lært

Før du går videre til et andet projekt, er det altid lærerigt at overveje, hvad der gik rigtigt, hvad gik galt, hvad ville du gøre anderledes, og hvad var de mest værdifulde erfaringer.

Så vigtige som de er, handler ikke kun om de tekniske aspekter af det websted, du har opbygget. Det handler også om planlægning, dokumentation, UI / UX og teamprocesserne, du fulgte for at komme fra starten til et afsluttet projekt.

Reflektion er den teknik, der transformerer et individ ved at udvide fundamentet fra den vundne viden og erfaringerne fra hvert projekt.

Indpakning af det

Foto af Matthias på Unsplash

Det første trin i at lære håndværket af Webudvikling er at forstå detaljerne i de værktøjer og teknologier, der bruges til at oprette websteder. Det andet trin involverer at gå over fra at vide om individuelle værktøjer til at forstå, hvordan man effektivt kombinerer dem til at producere noget af værdi.

Fokus for at lære funktionerne og kapaciteterne i webudviklingsværktøjssættet er primært en indsamling af information. At lære at bruge værktøjer i samråd med hinanden omdanner information til viden. At lære øvelser som kloning af websteder kan hjælpe med at lette denne transformation, samtidig med at den gør det sjovere og produktivt.

Gå nu og bygg noget!