đź›  ForstĂĄelse af MVC-arkitektur med reaktion

Model-View-Controller (MVC) er et meget ofte brugt softwaredesignmønster til implementering af brugergrænseflader. Da jeg forsøgte at bruge og forstå strukturen i mine sidste projekter, besluttede jeg at undersøge det nærmere. Denne artikel giver et overblik over MVC, og den er brugt i React-miljøet.

Indholdsfortegnelse

  • Hvad er MVC?
  • Hvad er det fordele og ulemper ved kodning?
  • Hvad er reaktion?
  • Anvend MVC med React = Flux?
  • Hvad er Flux, og hvad er anderledes i forhold til MVC?
  • Hvad er Redux, og hvad er anderledes i forhold til Flux?
  • Konklusion
  • Dyk dybere - nogle nyttige links
"Hvis du ikke kan forstå det, kan du ikke ændre det"
- Eric Evans, teknolog

Hvad er MVC?

MVC er en måde at tænke på at strukturere din webapplikation. Det er populært, fordi det bruges af mange rammer, der implementerer denne struktur (skinner, cakephp, django osv.).
Arkitekturen stammer fra den traditionelle strøm af en webapplikation.

  1. Vis - klient

Viser visualisering af dataene til brugeren. Tilsluttet kun regulatoren.

  1. Controller - Server

Behandler server-side-logik og fungerer som en mellemvare mellem Vis og Model, dvs. styring af datastrømmen.

  1. Model - database

Behandler data fra eller til databasen. Tilsluttet kun regulatoren.

Se et praktisk eksempel her

Hvad er det fordele og ulemper ved kodning?

Strukturen tillader fleksibilitet, da ansvaret er tydeligt adskilt. Dette fører til

  • bedre og lettere kodevedligeholdelse og genanvendelighed
  • lettere at koordinere i hold pĂĄ grund af adskillelsen
  • evnen til at give flere visninger
  • support til asynkrone implementeringer

, men ogsĂĄ til

  • en øget kompleks installationsproces
  • afhængigheder, dvs. ændringer i modellen eller controlleren pĂĄvirker hele enheden

Hvad er reaktion?

React er JavaScript-bibliotek fra Facebook, der er designet til at oprette interaktive brugergrænseflader. De vigtigste funktioner er, at det er

  • erklærende: Design forskellige synspunkter for hver stat, som opdateres effektivt og gendannes igen
  • komponentbaseret: Byg komponenter, der styrer deres egen tilstand og strukturerer dem sammen til mere komplekse brugergrænseflader
  • opretholder en intern repræsentation af det gengivne brugergrænseflade ("virtual DOM"), der kun gengiver de ændrede elementer

Anvend MVC med React = Flux?

Mens React ofte omtales som visningen i en MVC-struktur, præsenterede Facebook deres egen arkitektur kaldet Flux . Problemet med en MVC-struktur er det tovejskommunikation, som viste sig at være meget vanskeligt at fejlsøge og forstå, når en ændring i en enhed forårsager kaskadevirkning på tværs af kodebasen. Især når appen skaleres til en meget større en, som f.eks. Facebook. Dataflowet var ikke godt nok eller let nok defineret til store applikationer.

Hvad er Flux, og hvad er anderledes i forhold til MVC?

Flux består af 4 nøgleelementer:

  1. Handlinger

Objekter med ejendom og data.

  1. butikker

Indeholder applikationens tilstand og logik.

  1. Kørselsselskabet

Behandler registrerede handlinger og tilbagekald.

  1. visninger

Lyt til ændringer fra butikkerne og gengiv dem selv igen.

Det er vigtigt at bemærke og forstå den ensrettede strøm her.

Nu er forskellene til en MVC:

  • Strømmen af ​​behandling er ensrettet i stedet for tovej
  • butikker er i stand til at gemme enhver applikationsrelateret tilstand, hvorimod modellen i MVC var designet til at gemme enkeltobjekter
  • startpunktet Dispatcher gør debugging meget lettere

På trods af det faktum, at nogle kalder MVC "død", synes jeg Flux er mere en raffineret og forbedret MVC og dermed sympatiserer med Paul Shan og hans konklusion i hans artikel.

Hvad er Redux, og hvad er anderledes i forhold til Flux?

Redux bygger på Flux og kan beskrives i tre grundlæggende principper:

  1. Kun en enkelt kilde til sandhed

Tilstanden for hele din applikation gemmes i en enkelt butik.

  1. Stat er skrivebeskyttet

Den eneste måde at ændre tilstanden er at udsende en handling (et objekt, der beskriver, hvad der skete).

  1. Ændringer foretages med rene funktioner

Specificer transformationen ved handlinger med reduceringer, som gør det muligt at navigere gennem tilstande.

Forskel til flux?

  • Redux har ikke konceptet med en afsender, fordi den er afhængig af rene funktioner i stedet for begivenhedsemittere.
  • Redux antager, at du aldrig muterer dine data. Du muterer dem ikke i en reducer, men returnerer et nyt objekt

Som dokumentationen allerede antyder, skal du bruge begrebet redux efter at have forstået React først. Og:

Generelt skal du bruge Redux, når du har rimelige mængder data, der ændrer sig over tid, du har brug for en enkelt kilde til sandhed, og du finder ud af, at fremgangsmåder som at holde alt i en reaktionskomponentens tilstand på øverste niveau ikke længere er tilstrækkelige.

Konklusion

Som vi kunne se, udvikler software designmønstre sig med tiden. Brug af visse arkitekturer afhænger meget af dets anvendte rammer og mål for hvert projekt. Når det er sagt, til sidst er MVC, Flux eller Redux bare værktøjer. Sørg for at kende deres kompromis, og brug dem i overensstemmelse hermed.

Efterlad venligst kommentarer, feedback og forslag, da jeg altid prøver at forbedre mig.
Del dine tanker - det har aldrig været lettere 

Dyk dybere - nogle nyttige links

  • MVC
  • ”Model-View-Controller” - Microsoft (pensioneret indhold!)
  • ”Hvad programmerer MVC” - DevMarketer (video)
  • ”MVC Pattern” - Tutorialspoint (praktisk eksempel)
  • ”Fordelene ved at bruge MVC-model” - Soroosh Pardaz (LinkedIn-artikel)
  • ”Er MVC død i forreste ende?” - Alex Moldovan (artikel om 5 minutter)
  • Strøm
  • ”Flux Concepts” - Facebook (Github)
  • ”Flux vs MVC Design Patterns” - Amir Salihefendic (5min artikel)
  • ”MVC skalerer ikke” - Abel Avram (5min artikel)
  • Redux
  • ”Flux vs MVC” - Paul Shan (artikel om 5 minutter)
  • ”Redux Docs” - Redux (komplet dokumentation)

Om

Jeg betragter mig selv som en problemløser. Mine styrker er at navigere i komplekse miljøer, levere løsninger og nedbryde dem. Min viden og interesser udvikles omkring forretningsret og programmering af maskinlæringsapplikationer. Jeg leverer tjenester i opbygning af dataanalyse og evaluering af forretningsrelaterede koncepter.

Opret forbindelse pĂĄ:

  • LinkedIn
  • Github
  • Medium
  • Twitter
  • Patreon

Support og mails