{"id":3216,"date":"2023-05-15T10:13:58","date_gmt":"2023-05-15T10:13:58","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/exploring-microservice-based-frontend-architecture\/"},"modified":"2026-03-05T10:48:02","modified_gmt":"2026-03-05T10:48:02","slug":"kannad-arkitektur-fronthauka-byggdur-a-orthjonustum","status":"publish","type":"post","link":"https:\/\/thecodest.co\/is\/blog\/exploring-microservice-based-frontend-architecture\/","title":{"rendered":"K\u00f6nnun \u00e1 framendaarkitekt\u00far bygg\u00f0um \u00e1 \u00f6r\u00fej\u00f3nustum"},"content":{"rendered":"

\u00c1 undanf\u00f6rnum \u00e1rum h\u00f6fum vi\u00f0 s\u00e9\u00f0 g\u00edfurlegan v\u00f6xt \u00ed heimi h\u00e1\u00fer\u00f3a\u00f0ra vef\u00fer\u00f3un<\/a>. Me\u00f0al \u00feessara fj\u00f6lm\u00f6rgu n\u00fdjunga er heillandi hugmynd sem kallast \u00f6r\u00fej\u00f3nustubundin framendaarkitekt\u00far, oft nefnd \u00f6rframendur. \u00deegar t\u00e6kni heldur \u00e1fram a\u00f0 \u00fer\u00f3ast og st\u00e6kka vex eftirspurnin eftir skilvirkari og \u00e1rangursr\u00edkari kerfum g\u00edfurlega. \u00deessi grein mun lei\u00f0a \u00feig \u00ed inns\u00e6isr\u00edka fer\u00f0 til a\u00f0 kanna \u00feetta n\u00fat\u00edmalega arkitekt\u00farmynstur. Vi\u00f0 munum kafa ofan \u00ed hvernig \u00fea\u00f0 virkar, kosti \u00feess og hvernig \u00fea\u00f0 m\u00f3tar n\u00e1lgun okkar \u00e1 \u00fer\u00f3un traustra vefur<\/a> forrit<\/strong>.<\/p>\n

Inngangur a\u00f0 \u00f6rforritum<\/h2>\n

A\u00f0 greina hugtaki\u00f0 \u201cmicrofrontend\u201d kynnir okkur<\/a> me\u00f0 s\u00e9rsni\u00f0in atri\u00f0i<\/strong> me\u00f0 \u00e1hugaver\u00f0u sj\u00f3narhorni; \u2018micro\u2019, sem v\u00edsar til sm\u00e1rra a\u00f0skiljanlegra eininga, og \u2018frontend\u2019, sem v\u00edsar til \u00feess hluta hugb\u00fana\u00f0arforrits sem notendur sj\u00e1 \u2013 notendavi\u00f0m\u00f3tsins (UI). A\u00f0 sameina \u00feessi tv\u00f6 atri\u00f0i gefur okkur \u00f6flugt t\u00e6ki sem b\u00fdr yfir m\u00f6guleikum til a\u00f0 gj\u00f6rbylta frontend-forritun.<\/p>\n

\u00deegar \u00fe\u00fa kafar d\u00fdpra \u00ed skilning \u00e1 \u00f6rforritaforritum skaltu l\u00edta \u00e1 \u00feau sem minnka\u00f0ar \u00fatg\u00e1fur af heildarfors\u00ed\u00f0uums\u00f3knum. Sm\u00ed\u00f0u\u00f0 me\u00f0 \u00fev\u00ed a\u00f0 brj\u00f3ta ni\u00f0ur annars fl\u00f3ki\u00f0 og einnota framenda <\/strong> Innlei\u00f0a bakenda uppbyggingu \u00ed st\u00fdranlega sj\u00e1lfst\u00e6\u00f0a \u00fe\u00e6tti e\u00f0a \u00fej\u00f3nustur \u2013 hver \u00feeirra ber \u00e1byrg\u00f0 \u00e1 s\u00e9rst\u00f6kum virkni innan forritsins. \u00deeir l\u00fd\u00f0r\u00e6\u00f0isv\u00e6\u00f0a k\u00f3\u00f0i<\/a> eignarhald me\u00f0al margir teams<\/strong> vinna a\u00f0 \u00fdmsum hli\u00f0um eins verkefni<\/a> \u2013 stu\u00f0la a\u00f0 sveigjanleika og samhli\u00f0a vinnu.<\/p>\n

\u00cd meginatri\u00f0um felst \u00fea\u00f0 \u00ed a\u00f0 nota sm\u00e1forntendlar<\/strong> Arkitekt\u00farinn veitir teams sm\u00e1einingar sem au\u00f0velt er a\u00f0 takast \u00e1 vi\u00f0 \u00ed einbeitri vinnu, \u00e1n \u00feess a\u00f0 hafa \u00e1hyggjur af umfangsmiklum h\u00e1\u00f0unum e\u00f0a truflunum \u00ed \u00f6\u00f0rum \u00fe\u00e1ttum notendavi\u00f0m\u00f3tsins. Hann t\u00e1knar a\u00f0 taka aftur stj\u00f3rn \u00e1 front-end umhverfi \u00fe\u00ednu \u00e1 sama t\u00edma og hann b\u00fd\u00f0ur upp \u00e1 verulega \u00e1vinning \u00ed afhendingu fl\u00f3kinna kerfa. vefforrit<\/strong> og vi\u00f0m\u00f3t \u00ed h\u00e1g\u00e6\u00f0a umhverfi. Vi\u00f0 h\u00f6fum varla byrja\u00f0 a\u00f0 skrapa yfirbor\u00f0i\u00f0 \u00e1 \u00fev\u00ed sem gerir upp mfe e\u00f0a \u2018hva\u00f0 er \u00f6rframhli\u00f0\u2019. Enn b\u00ed\u00f0ur margt fleira upp \u00e1 sig til a\u00f0 uppg\u00f6tva! Vertu me\u00f0 okkur \u00e1 me\u00f0an vi\u00f0 s\u00f6kkvum okkur enn d\u00fdpra \u00ed \u00feetta heillandi r\u00edki \u00ed n\u00e6stu k\u00f6flum.<\/p>\n

Sm\u00e1\u00fej\u00f3nustur<\/a> hafa byltingarkennt bakendann \u00fer\u00f3unarferli<\/a>, En hva\u00f0 \u00fe\u00fd\u00f0a \u00feau fyrir fronendinn? Svari\u00f0 er \u00f6rfronendar, sem \u00ed raun beita \u00f6r\u00fej\u00f3nustuatri\u00f0um \u00ed fronendaarkitekt\u00far. A\u00f0 innlei\u00f0a \u00f6r-UI getur b\u00e6tt forritin \u00fe\u00edn \u00e1 margv\u00edslegan h\u00e1tt.<\/p>\n

Til a\u00f0 hj\u00e1lpa til vi\u00f0 a\u00f0 skilja \u00feetta hugtak skulum vi\u00f0 sko\u00f0a hva\u00f0 \u00f6rforfrontend er. A sm\u00e1forntend<\/strong> Tekur hugmyndina um a\u00f0 sundra einstefnuhn\u00fatum \u00ed sm\u00e1a, me\u00f0h\u00f6ndlanlega eininga og beitir henni einnig \u00e1 framenda k\u00f3\u00f0ann. \u00deetta \u00fe\u00fd\u00f0ir a\u00f0 skipta vefs\u00ed\u00f0unni \u00ed sj\u00e1lfst\u00e6\u00f0ar einingar sem eru stj\u00f3rna\u00f0ar af \u00f3l\u00edkir teams<\/strong>, auka skilvirkni hva\u00f0 var\u00f0ar hra\u00f0a og framlei\u00f0ni.<\/p>\n

\u00c1vinningurinn af a sm\u00e1forntend<\/strong> A\u00f0fer\u00f0ir til alhli\u00f0a framsetningar eru fj\u00f6lmargar.<\/p>\n

    \n
  1. Sj\u00e1lfst\u00e6\u00f0 \u00fer\u00f3un: Me\u00f0 innkapsela\u00f0ri e\u00f0li milli \u00fe\u00e1tta, hver li\u00f0<\/a> geta unni\u00f0 sj\u00e1lfst\u00e6tt a\u00f0 s\u00ednum hlutum \u00e1n \u00feess a\u00f0 hafa veruleg \u00e1hrif \u00e1 a\u00f0ra.<\/li>\n
  2. Stigst\u00e6r\u00f0<\/a>Hver hluti forritsins m\u00e1 st\u00e6kka e\u00f0a minnka sj\u00e1lfst\u00e6tt eftir \u00fe\u00f6rfum, sem kemur \u00ed veg fyrir \u00f3\u00fearfa st\u00e6kkunar- og minnkunarferli og tryggir skilvirka n\u00fdtingu au\u00f0linda.<\/li>\n
  3. Sveigjanleiki: Sm\u00e1forntends bj\u00f3\u00f0a upp \u00e1 sveigjanleika hva\u00f0 var\u00f0ar t\u00e6knihauginn. Hver team hefur fulla sj\u00e1lfstj\u00f3rn yfir \u00fev\u00ed hvernig hann byggir sinn hluta af notendavi\u00f0m\u00f3tinu, og notar hva\u00f0a t\u00e6knihaug sem hentar \u00feeim best.<\/li>\n
  4. Au\u00f0veldari uppf\u00e6rslur: \u00dear sem hver eining starfar sj\u00e1lfst\u00e6tt er h\u00e6gt a\u00f0 uppf\u00e6ra e\u00f0a skipta \u00feeim \u00fat stykki fyrir stykki \u00ed sta\u00f0 \u00feess a\u00f0 \u00feurfa a\u00f0 endurn\u00fdja allt kerfi\u00f0 \u00ed einu.<\/li>\n
  5. Samhli\u00f0a vinnsla: \u00deetta gerir kleift margir teams<\/strong> Vinna samhli\u00f0a sem lei\u00f0ir til hra\u00f0ari afhendingar virkni me\u00f0 traustum g\u00e6\u00f0apr\u00f3fum.<\/li>\n<\/ol>\n

    Allt \u00feetta samanlagt gerir \u00fea\u00f0 auglj\u00f3st hvers vegna vaxandi \u00e1hugi v\u00e6ri \u00e1 a\u00f0 taka upp Framhli\u00f0arm\u00edkr\u00f3\u00fej\u00f3nustuar\u00f0ger\u00f0<\/strong>. Hins vegar skaltu hafa \u00ed huga a\u00f0 ekkert er algerlega fullkomi\u00f0; me\u00f0 \u00e1kve\u00f0num kostum fylgja einnig nokkrir \u00f3kostir \u2013 met\u00f0u \u00fearfir verkefnisins vandlega \u00e1\u00f0ur en \u00fe\u00fa skuldbindur \u00feig!<\/p>\n

    Hvernig virka \u00f6rforst\u00f6\u00f0var?<\/h2>\n

    Hugtaki\u00f0 um framenda \u00f6r\u00fej\u00f3nustuarkitekt\u00far, e\u00f0a \u201csm\u00e1forntendlar<\/strong>\u201dsem oft er kalla\u00f0, byggir \u00e1 traustum grundvelli sem bakenda-jafningjar \u00feeirra, \u00f6r\u00fej\u00f3nustur, hafa komi\u00f0 \u00e1 f\u00f3t. \u00deessi n\u00e1lgun \u00ed hugb\u00fana\u00f0arh\u00f6nnun br\u00fdtur ni\u00f0ur vefs\u00ed\u00f0u e\u00f0a vefforrit<\/strong> \u00ed me\u00f0h\u00f6ndlanlegar einingar, hver me\u00f0 sinn fyrirfram \u00e1kve\u00f0na \u00e1byrg\u00f0 og virkni.<\/p>\n

    Kafa d\u00fdpra \u00ed hvernig \u00feessir sm\u00e1forntendlar<\/strong> Vinnan g\u00e6ti leitt okkur ni\u00f0ur nokku\u00f0 t\u00e6knilegan kan\u00ednuholuveg. Hins vegar getur stutt og hnitmi\u00f0u\u00f0 \u00fatsk\u00fdring gefi\u00f0 grunnskilning \u00e1n \u00feess a\u00f0 yfirgn\u00e6fa \u00feig me\u00f0 fl\u00f3knum sm\u00e1atri\u00f0um. Skulum brj\u00f3ta \u00feetta ni\u00f0ur
    \nferli\u00f0 ni\u00f0ur \u00ed \u00ferj\u00e1 einfaldlega \u00fe\u00e6tti:<\/p>\n

      \n
    1. Skipting virkni<\/li>\n
    2. \u00der\u00f3un sj\u00e1lfst\u00e6tt<\/li>\n
    3. Sameining \u00ed eitt notendavi\u00f0m\u00f3t<\/li>\n<\/ol>\n

      Skipting virkni<\/h2>\n

      \u00cd kjarna s\u00ednum felst hugmyndin \u00e1 bak vi\u00f0 sm\u00e1forntendlar<\/strong> Er tilt\u00f6lulega einfalt \u2013 skiptu frams\u00ed\u00f0u virkni \u00feinni upp eftir eiginleikum, l\u00e9num e\u00f0a vi\u00f0skiptaeiningum. Hver team s\u00e9r um sinn hluta af vi\u00f0m\u00f3tinu fr\u00e1 upphafi til enda, \u00fe.e. fr\u00e1 gagnagrunninum til notendavi\u00f0skipta.<\/p>\n

      \u00der\u00f3un sj\u00e1lfst\u00e6tt<\/h2>\n

      Eftir a\u00f0 hafa skipt verkefninu af f\u00e6rni munu litlir team-ar vinna sj\u00e1lfst\u00e6tt a\u00f0 s\u00ednum hluta me\u00f0 t\u00e6knist\u00f6kkum sem \u00feeim henta best e\u00f0a sem best samr\u00e6mast verkefninu. Hvort sem \u00feeir kj\u00f3sa React<\/a> Sm\u00e1forritaforendi<\/strong> a\u00f0fer\u00f0ir e\u00f0a kj\u00f3sa NextJS Sm\u00e1forritaforendi<\/strong> T\u00e6kni til a\u00f0 uppfylla tilteknar kr\u00f6fur verkefnisins mun alfari\u00f0 r\u00e1\u00f0ast af h\u00e6fni hvers og eins teams.
      \n\u00deessi eiginleiki gerir kleift \u00f3l\u00edkir teams<\/strong> a\u00f0 tileinka s\u00e9r mismunandi a\u00f0fer\u00f0ir fyrir einstaka einingar, svo sem pr\u00f3funara\u00f0fer\u00f0ir og \u00fatf\u00e6rslutakt\u00edk o.s.frv., sem sj\u00e1lfgefi\u00f0 ver\u00f0a sj\u00e1lfst\u00e6\u00f0ir team-einingar, \u00e1 me\u00f0an \u00fe\u00e6r vinna \u00ed takt vi\u00f0 a\u00f0ger\u00f0ir annarra team-eininga \u00feegar \u00fe\u00e6r eru settar saman.<\/p>\n

      \"\"<\/a><\/p>\n

      Sameining \u00ed eitt notendavi\u00f0m\u00f3t<\/h2>\n

      Ma\u00f0ur g\u00e6ti velt \u00fev\u00ed fyrir s\u00e9r hvernig svo \u00f3l\u00edkir hlutar sameinast hn\u00f6kralaust og mynda eitt samr\u00e6mt \u00fattak. \u00ddmsar sam\u00fe\u00e6ttingartegundir, svo sem \u00fej\u00f3nustuhli\u00f0ar samsetning og sam\u00fe\u00e6tting vi\u00f0 byggingu, hj\u00e1lpa til vi\u00f0 a\u00f0 setja saman alla \u00feessa notendavi\u00f0m\u00f3tsb\u00fatana aftur \u00ed einn samr\u00e6mdan vettvang (frontend).<\/p>\n

      Me\u00f0 \u00feessu f\u00e1 notendur forrit sem vir\u00f0ist vera eitt heildst\u00e6tt forrit, \u00fer\u00e1tt fyrir a\u00f0 \u00fea\u00f0 s\u00e9 byggt upp \u00far \u00f3tengdum verkefnum sem vinna samhli\u00f0a undir einst\u00f6kum, s\u00e9rsvi\u00f0smi\u00f0u\u00f0um teams sem leggja upp \u2018Micro UI\u2019. \u00deess vegna er forriti\u00f0 allt flj\u00f3tandi og vi\u00f0brag\u00f0sflj\u00f3tt og gefur engan v\u00edsbendingu um brotinn \u00fer\u00f3unarhring sem hefur gefi\u00f0 \u00fev\u00ed verulegt forskot \u00e1 hef\u00f0bundnar einheildarlausnir hva\u00f0 var\u00f0ar skilvirkni og f\u00ednleika.<\/p>\n

      N\u00fat\u00edmaleg vefforrit<\/h2>\n

      \u00deegar vi\u00f0 f\u00f6rum d\u00fdpra inn \u00ed stafr\u00e6na t\u00edmabili\u00f0, n\u00fat\u00edmalegt vefums\u00f3knir<\/strong> hafa or\u00f0i\u00f0 s\u00edfellt fl\u00f3knari \u2013 fl\u00e6kjustig sem endurspeglast \u00ed vaxandi hlutverki \u00feeirra \u00ed n\u00fat\u00edmafyrirt\u00e6kjum. \u00cd \u00feessu fl\u00f3kna vefi vaxandi t\u00e6kni r\u00eds hugtak fram \u00far undirlendi \u2013 sm\u00e1forntendlar<\/strong> arkitekt\u00far.<\/p>\n

      Birting n\u00fdst\u00e1rlegrar snillig\u00e1fu, frams\u00ed\u00f0u \u00f6r\u00fej\u00f3nustur bj\u00f3\u00f0a upp \u00e1 n\u00fdja n\u00e1lgun vi\u00f0 h\u00f6nnun og innlei\u00f0ingu n\u00fat\u00edmans vefums\u00f3knir<\/strong>. \u00deau fela \u00ed s\u00e9r b\u00e6\u00f0i virkni- og sj\u00f3nr\u00e6na \u00fe\u00e6tti forrits \u00ed hnitmi\u00f0u\u00f0um einingum sem kallast \u201c\u00f6r\u00fej\u00f3nustur\u201d. \u00deetta gerir forriturum kleift a\u00f0 \u00fatf\u00e6ra, uppf\u00e6ra og stj\u00f3rna \u00fdmsum \u00fe\u00e1ttum forritsins \u00e1 stefnum\u00f3tandi h\u00e1tt, hverjum fyrir sig.<\/p>\n

      \u00cd framkv\u00e6md geta forritarar \u00fathluta\u00f0 tilteknum teams fyrir einstakar \u00f6r\u00fej\u00f3nustur. Hver team hefur eignarhald \u00e1 sinni vi\u00f0eigandi \u00f6r\u00fej\u00f3nustu \u2013 fr\u00e1 h\u00f6nnun til \u00fer\u00f3unar og innlei\u00f0ingar \u2013 sem stu\u00f0lar a\u00f0 markvissari s\u00e9rh\u00e6fingu innan sj\u00e1lfst\u00e6\u00f0ur teams<\/strong> \u00ed ferlinu.<\/p>\n

      Enn einn einstakur \u00fe\u00e1ttur var\u00f0andi \u00feessa svok\u00f6llu\u00f0u \u2018n\u00fat\u00edmalegu\u2019 vefums\u00f3knir<\/strong> er h\u00e6fileiki \u00feeirra til a\u00f0 nota fj\u00f6lmargar t\u00e6knilausnir samt\u00edmis. Hvort sem \u00fe\u00fa notar React fyrir einn hluta e\u00f0a Nextjs fyrir annan; sveigjanleg t\u00e6knisafl eru \u00fe\u00e9r til taks innan eins verkefnis, a\u00f0 \u00fev\u00ed gefnu a\u00f0 hver hluti tilheyri mismunandi Framenda \u00f6r\u00fej\u00f3nustur<\/strong>.<\/p>\n

      \u00cd raun, me\u00f0 st\u00f6\u00f0ugri fram\u00fer\u00f3un sem setur takt t\u00e6knilegrar \u00fer\u00f3unar, eykst fl\u00e6kjustig sem fyrirt\u00e6ki sem krefjast stafr\u00e6nna lausna ver\u00f0a a\u00f0 stj\u00f3rna af f\u00e6rni. Athyglisvert n\u00f3g \u00fdtir \u00feessi \u00fe\u00f6rf \u00e1 a\u00f0 tileinka s\u00e9r f\u00ednstilltari fyrirmyndir eins og \u2018sm\u00e1forntend<\/strong> react\u2019 e\u00f0a \u2018nextjs micro frontend\u2019. Hversu mikilv\u00e6gt sem \u00fea\u00f0 er a\u00f0 vanr\u00e6kja ekki a\u00f0 skilja d\u00fdptina vi\u00f0 innlei\u00f0ingu sl\u00edkra a\u00f0fer\u00f0a \u00e1\u00f0ur en fari\u00f0 er beint \u00fat \u00ed \u00fea\u00f0 \u2013 sem ver\u00f0ur n\u00e1nar fjalla\u00f0 um \u00ed n\u00e6stu k\u00f6flum.<\/p>\n

      Ger\u00f0ir \u00f6rfornenda<\/h2>\n

      \u00deegar skilningur okkar \u00e1 Framb\u00fa\u00f0ar \u00f6r\u00fej\u00f3nustuarkitekt\u00far<\/strong> \u00deegar \u00fea\u00f0 d\u00fdpkar ver\u00f0ur mikilv\u00e6gt a\u00f0 greina hin \u00fdmsu ger\u00f0ir \u00f6rfornenda sem til eru. Flokkunin m\u00e1 a\u00f0allega einkenna \u00ed \u00ferj\u00e1 meginflokka.
      \n\u00cd fyrsta lagi eru \u201cEinangra\u00f0ir\u201d sm\u00e1forrit<\/strong> e\u00f0a framenda, einnig nefndir \u201cl\u00f3\u00f0r\u00e9tt skipt\u201d e\u00f0a \u201cl\u00f3\u00f0r\u00e9tt aftengdir\u201d. \u00deessir einkenna kjarnahugmyndir a sm\u00e1forntend<\/strong> react-forrit. \u00deau bj\u00f3\u00f0a upp \u00e1 heildst\u00e6\u00f0a virkni fr\u00e1 upphafi til enda og innihalda s\u00e9rh\u00e6f\u00f0a k\u00f3\u00f0agrunna, sem gerir team-forritum kleift a\u00f0 vinna sj\u00e1lfst\u00e6tt \u00ed s\u00ednum \u00fej\u00f3nustum \u00e1n \u00feess a\u00f0 sker\u00f0a framlei\u00f0ni e\u00f0a valda samruna\u00e1t\u00f6kum.
      \n\u00cd \u00f6\u00f0ru lagi finnum vi\u00f0 \u00feann sk\u00fdrt skipulag\u00f0a ger\u00f0 sem kallast \u201cComposite\u201d.\u201d sm\u00e1forntendlar<\/strong>. Samsettar lausnir brotna upp vefums\u00f3knir<\/strong> \u00ed a\u00f0skilda eininga\u00fe\u00e6tti \u00e1 me\u00f0an samr\u00e6mi notendavi\u00f0m\u00f3tsins er vi\u00f0haldi\u00f0. \u00cd \u00feessu tilviki \u00e1 hver frontend-\u00fej\u00f3nusta hluta af notendavi\u00f0m\u00f3tinu \u00ed einbladsforriti sem venjulega er stj\u00f3rna\u00f0 me\u00f0 t\u00f3lum eins og Next.js sm\u00e1forntend<\/strong> Samsetning. \u00deannig er n\u00e1\u00f0 fram vi\u00f0b\u00f3tarsamband milli h\u00f6nnunarheildar og virknisbrotnunar.<\/p>\n

      A\u00f0 lokum eru framhli\u00f0arnar sem byggja \u00e1 lei\u00f0s\u00f6gn og bj\u00f3\u00f0a upp \u00e1 sam\u00fe\u00e6ttan upplifun \u00ed gegnum \u00fdmsa inngangsa\u00f0ila, svo sem \u00edl\u00e1tami\u00f0u\u00f0 vi\u00f0m\u00f3t (Green Widget Ideas), grei\u00f0slu\u00fej\u00f3nustu e\u00f0a gagnleg vef\u00fej\u00f3nustur (micro ui). H\u00e9r beina \u00edhlutir innkomandi bei\u00f0nir \u00e1 vi\u00f0eigandi s\u00ed\u00f0ur og n\u00fdta til fulls fj\u00f6lbreytt t\u00e6knihaugsm\u00f6guleika. \u00deessi a\u00f0fer\u00f0 veitir meiri frelsi \u00e1 sama t\u00edma og tryggir hn\u00f6kralausar yfirf\u00e6rslur milli mismunandi sv\u00e6\u00f0a \u00e1 vefs\u00ed\u00f0unni.<\/p>\n

      Hver tegund endurspeglar einstaka eiginleika me\u00f0 s\u00ednum eigin styrkleikum og \u00e1skorunum vi\u00f0 a\u00f0 m\u00e6ta fj\u00f6lbreyttum \u00fe\u00f6rfum \u00e1 mismunandi svi\u00f0um hugb\u00fana\u00f0arverkefni<\/a>. \u00deess vegna au\u00f0veldar \u00fea\u00f0 oft a\u00f0 f\u00e1 sk\u00fdra hugmynd um \u00feessar flokka og stu\u00f0lar a\u00f0 \u00fev\u00ed a\u00f0 taka vel \u00edgrundu\u00f0 \u00e1kvar\u00f0anir \u00feegar \u00e1kve\u00f0i\u00f0 er hva\u00f0a tegund hentar best \u00fe\u00f6rfum verkefnisins.<\/p>\n

      Arkitekt\u00far \u00f6rforvera<\/h2>\n

      Miki\u00f0 hefur veri\u00f0 skrifa\u00f0 um hugmyndina um \u00f6rfornenda, en \u00e1\u00f0ur en vi\u00f0 s\u00f6kkvum okkur \u00ed kjarna hennar skulum vi\u00f0 st\u00edga til baka og rifja upp forvera hennar \u2013 Einnleikar frams\u00ed\u00f0ur <\/strong>.<\/p>\n

      Einnleikar frams\u00ed\u00f0ur<\/h2>\n

      \u00cd fornum t\u00edma (j\u00e6ja, ekki svo l\u00f6ngu s\u00ed\u00f0an) var frams\u00ed\u00f0uarkitekt\u00far venjulega skipulag\u00f0ur sem einn mon\u00f3l\u00edt. Margir mismunandi hlutar voru fl\u00e9ttir saman og hver breyting kraf\u00f0ist mikillar fyrirhafnar, sem ger\u00f0i stigst\u00e6rni a\u00f0 st\u00f3rum \u00e1skorun fyrir forritara. \u00deetta dr\u00f3 \u00far skilvirkni og hra\u00f0a vi\u00f0 a\u00f0 birta n\u00fdja eiginleika og breg\u00f0ast hratt vi\u00f0 breytingum.
      \nHins vegar, me\u00f0 tilkomu framenda \u00f6r\u00fej\u00f3nusta e\u00f0a \u2018microfrontends\u2019, h\u00f3fust sl\u00edk vandam\u00e1l a\u00f0 hverfa. N\u00fa skulum vi\u00f0 r\u00edfa \u00feetta t\u00edskuor\u00f0 \u00ed sundur og setja \u00fea\u00f0 \u00ed raunverulega framkv\u00e6md.<\/p>\n

      L\u00f3\u00f0r\u00e9tt skipulag<\/h2>\n

      Microfrontends nota \u00fea\u00f0 sem kalla\u00f0 er l\u00f3\u00f0r\u00e9tt skipulag e\u00f0a \u2018l\u00f3\u00f0r\u00e9tt skur\u00f0skipun\u2019. \u00deau brj\u00f3ta ni\u00f0ur m\u00f6gulega risavaxi\u00f0 vi\u00f0m\u00f3t vefs\u00ed\u00f0unnar \u00ed minni, me\u00f0h\u00f6ndlanlega einingar. Hver eining er \u00fer\u00f3u\u00f0 sj\u00e1lfst\u00e6tt en starfar samt \u00ed samvinnu \u2013 l\u00edkt og frumur \u00ed l\u00edfveru. A\u00f0dr\u00e1ttarafli\u00f0 er auglj\u00f3st: \u00fe\u00fa f\u00e6r\u00f0 m\u00f3duleg k\u00f3\u00f0agrunn sem er au\u00f0veldara a\u00f0 vi\u00f0halda, sem eykur sveigjanleika og stu\u00f0lar a\u00f0 \u00feverfaglegur <\/strong> sj\u00e1lfst\u00e6\u00f0i.<\/p>\n

      Helstu \u00fe\u00e6ttir \u00ed l\u00f3\u00f0r\u00e9ttri skur\u00f0skiptingu fela \u00ed s\u00e9r \u00edl\u00e1tav\u00e6\u00f0ingu \u00fear sem hver hluti n\u00e6r yfir einangra\u00f0a g\u00f6gn<\/a> R\u00f6kfr\u00e6\u00f0i og notendavi\u00f0m\u00f3tsframsetning; \u00e1standsa\u00f0skilna\u00f0ur sem tryggir a\u00f0 a\u00f0ger\u00f0ir \u00ed einum hluta trufli ekki a\u00f0ra, og fullkomin innhyljun sem skilgreinir hvern \u00fe\u00e1tt sem sj\u00e1lfst\u00e6\u00f0a, sj\u00e1lfb\u00e6ra einingu.<\/p>\n

      Kjarnahugt\u00f6k \u00f6rforvera<\/h2>\n

      Megin\u00feemu sem umlykja arkitekt\u00far framenda \u00f6r\u00fej\u00f3nusta spanna fr\u00e1 au\u00f0veldri uppsetningu til b\u00e6ttra pr\u00f3fanam\u00f6guleika.<\/p>\n

      \u00cd fyrsta lagi losar \u00fea\u00f0 forsko\u00f0unarkerfi \u00feitt \u00far \u00ferengri h\u00e1\u00f0 vi\u00f0 a\u00f0 brj\u00f3ta \u00fea\u00f0 ni\u00f0ur \u00ed \u00f6rvefshluta; n\u00fa hver vef\u00fe\u00e1ttur<\/strong> geta veri\u00f0 \u00fer\u00f3u\u00f0 a\u00f0skilin en virka fullkomlega saman. \u00deannig hvetur \u00fea\u00f0 til dreif\u00f0rar \u00fer\u00f3unar um \u00f3l\u00edkir teams<\/strong> \u00e1n \u00f3tta vi\u00f0 m\u00f3tsagnakenndar aflei\u00f0ingar.<\/p>\n

      \u00cd \u00f6\u00f0ru lagi kemur sj\u00e1lfst\u00e6\u00f0 uppsetning. Sveigjanlegur<\/a> Umbreyting ver\u00f0ur au\u00f0veldari \u00feegar uppsetning getur \u00e1tt s\u00e9r sta\u00f0 hven\u00e6r sem er og hvar sem er \u2013 jafnvel \u00fe\u00f3 a\u00f0 a\u00f0rir hlutar s\u00e9u \u00ed sm\u00ed\u00f0um e\u00f0a \u00ed uppsetningu samt\u00edmis.<\/p>\n

      \u00cd \u00feri\u00f0ja lagi aukinn framlei\u00f0sluhra\u00f0i \u2013 \u00fer\u00f3unarlotur ver\u00f0a styttri me\u00f0 \u00fev\u00ed a\u00f0 pr\u00f3fa hvern hluta \u00edtarlega fyrir sig \u00ed sta\u00f0 \u00feess a\u00f0 b\u00ed\u00f0a eftir a\u00f0 allir \u00edhlutir s\u00e9u fullger\u00f0ir \u00e1\u00f0ur en pr\u00f3fun hefst.<\/p>\n

      A\u00f0 lokum betra vi\u00f0hald ums\u00f3knar<\/a> einfaldlega vegna \u00feess a\u00f0 f\u00e6rri k\u00f3\u00f0ar valda minni \u00f3rei\u00f0u og gera \u00fev\u00ed kleift a\u00f0 framkv\u00e6ma skilvirkari uppf\u00e6rslur e\u00f0a skiptingar hratt \u00ed sta\u00f0 \u00feess a\u00f0 r\u00e1\u00f0ast \u00ed umfangsmikla endurn\u00fdjun.<\/p>\n

      \u00deannig b\u00fd\u00f0ur \u00fea\u00f0 upp \u00e1 betri afk\u00f6st en hef\u00f0bundin traustr kerfi sem g\u00e6tu teki\u00f0 langan t\u00edma vi\u00f0 a\u00f0 vinna \u00far gr\u00ed\u00f0arlegu magni uppl\u00fdsinga \u00ed einu.<\/p>\n

      Kostir \u00f6rforendaarkitekt\u00fars<\/p>\n

      Innlei\u00f0ing \u00f6rforendaarkitekt\u00fars \u00ed \u00fer\u00f3un vefums\u00f3kna<\/a><\/strong> b\u00fd\u00f0ur upp \u00e1 fj\u00f6lmarga kosti. Fr\u00e1 \u00fev\u00ed a\u00f0 efla menningu sj\u00e1lfst\u00e6\u00f0is, auka skilvirkni \u00ed hugb\u00fana\u00f0ar\u00fer\u00f3un<\/a> hj\u00f3la, til a\u00f0 stu\u00f0la a\u00f0 n\u00fdsk\u00f6pun \u2014 \u00e1vinningurinn er sannarlega fj\u00f6l\u00fe\u00e6ttur. Eins og ThoughtWorks hefur r\u00e9ttilega sagt: \u201cA sm\u00e1forntendlar<\/strong> N\u00e1lgun getur skila\u00f0 \u00e1vinningi sem vegur \u00feyngra en innri fl\u00e6kjustigi\u00f0 vi\u00f0 a\u00f0 stj\u00f3rna dreif\u00f0um kerfum.<\/p>\n

      \u00c1vinningur \u00f6rfornenda<\/h2>\n
        \n
      1. Sj\u00e1lfst\u00e6\u00f0i: \u00dea\u00f0 veitir teams meiri stj\u00f3rn \u00e1 vinnufl\u00e6\u00f0i s\u00ednu. Frelsi\u00f0 til a\u00f0 \u00e1kve\u00f0a t\u00e6knistakk stu\u00f0lar a\u00f0 fj\u00f6lbreytni og eykur heildarframlei\u00f0ni.<\/li>\n
      2. \u00deolandi breytingar: Vegna me\u00f0f\u00e6ddrar einingager\u00f0ar er frams\u00ed\u00f0uarkitekt\u00far sem bygg\u00f0ur er \u00e1 \u00feessu l\u00edkani e\u00f0lilega a\u00f0l\u00f6gunarh\u00e6fur vi\u00f0 eiginleikaupf\u00e6rslur \u00e1n \u00feess a\u00f0 raska \u00f6\u00f0rum \u00edhlutum.<\/li>\n
      3. Markviss \u00fer\u00f3unarhringr\u00e1s: Frontend \u00f6r\u00fej\u00f3nustur styrkja markvissar a\u00f0ger\u00f0ir og gera kleift a\u00f0 forrita me\u00f0 einbeitingu fremur en a\u00f0 starfa undir v\u00ed\u00f0t\u00e6kum h\u00e1\u00f0skap.<\/li>\n
      4. Hvati til n\u00fdsk\u00f6punar: Sm\u00e1forritseiningar hvetja til t\u00e6knilegrar n\u00fdsk\u00f6punar me\u00f0 \u00fev\u00ed a\u00f0 bj\u00f3\u00f0a upp \u00e1 \u00f6ruggan vettvang \u00fear sem forritarar geta pr\u00f3fa\u00f0 n\u00fdjar hugmyndir \u00e1n \u00feess a\u00f0 \u00f3gna kerfinu \u00f6llu.<\/li>\n<\/ol>\n

        Ennfremur, me\u00f0 i\u00f0na\u00f0arrisum eins og Spotify og IKEA sem taka upp \u00f6r-UI-arkitekt\u00far, er lj\u00f3st a\u00f0 \u00feessi a\u00f0fer\u00f0afr\u00e6\u00f0i er a\u00f0 \u00f6\u00f0last aukinn sess sem raunh\u00e6f lausn \u00e1 fl\u00f3knum frams\u00ed\u00f0uverkefnum.<\/p>\n

        En skulum kafa d\u00fdpra \u00ed \u00feessa kosti og greina n\u00e1kv\u00e6mlega hversu umbreytandi \u00feeir raunverulega eru.<\/p>\n

        \u00deegar vi\u00f0 t\u00f6lum um sj\u00e1lfst\u00e6\u00f0i \u00ed samhengi sm\u00e1forenda-arkitekt\u00fars, erum vi\u00f0 \u00ed raun a\u00f0 r\u00e6\u00f0a um a\u00f0 brj\u00f3ta ni\u00f0ur hef\u00f0bundin einangrunarsv\u00e6\u00f0i innan team-r\u00fdmanna \u00feinna. \u00cd sta\u00f0 \u00feess a\u00f0 skipta team-unum eftir verkefnahlutverki (t.d. UX\/UI-h\u00f6nnu\u00f0ir e\u00f0a fronthaun\u00fer\u00f3unara\u00f0ilar) getur\u00f0u n\u00fa skipulagt \u00feau \u00ed kringum einst\u00f6k t\u00e6knielement\u2014hvert og eitt tilheyrir s\u00e9rstaklega Einangra k\u00f3\u00f0ann team<\/strong> fyrir mismunandi eiginleika e\u00f0a \u00fe\u00e6tti \u00ed \u00fe\u00ednum vefforrit<\/a>. \u00cd meginatri\u00f0um sinnir hver team s\u00ednum hluta eins og sm\u00e1start-up sem \u00fej\u00f3nar einu a\u00f0almarkmi\u00f0i: skilvirkri verkefnaframkv\u00e6md.<\/p>\n

        Ennfremur gerir a\u00f0l\u00f6gunarh\u00e6fni \u00feessarar arkitekt\u00fars kleift a\u00f0 framkv\u00e6ma breytingar \u2013 hvort sem um er a\u00f0 r\u00e6\u00f0a \u00f6rl\u00edti\u00f0 h\u00f6nnunarbreytingar e\u00f0a umfangsmiklar kerfisendurb\u00e6tur \u2013 hn\u00f6kralaust, sem hj\u00e1lpar fyrirt\u00e6kjum a\u00f0 vera sveigjanleg og vera skrefi \u00e1 undan s\u00edbreytilegum eftirspurn neytenda.
        \nN\u00e6st er \u00f3bilandi einbeiting sem fylgir notkun \u00f6rforenda; teams mega s\u00e9rh\u00e6fa sig \u00ed einst\u00f6kum \u00fe\u00e1ttum og skila \u00feannig h\u00e1g\u00e6\u00f0aafur\u00f0 \u00e1 sama t\u00edma og for\u00f0ast \u00f3\u00fearfa rugling sem stafar af a\u00f0 vinna me\u00f0 \u00fdmis \u00f3skyld undirkerfi samt\u00edmis.<\/p>\n

        A\u00f0 lokum, en hva\u00f0 mest forvitnilegt er \u2013 \u00f6rforritaeiningar virka sem r\u00e6ktunarmi\u00f0st\u00f6\u00f0var fyrir ferskar hugmyndir; tilraunir me\u00f0 n\u00fdjustu t\u00e6kni ver\u00f0a mun \u00f6ruggari \u00fear sem pr\u00f3fanir fara fram \u00e1 einangru\u00f0um hlutum forritsins og draga \u00far \u00e1h\u00e6ttu sem tengist v\u00ed\u00f0t\u00e6kum innlei\u00f0ingarvillum.<\/p>\n

        A\u00f0 tileinka s\u00e9r \u00f6rfornendaarkitekt\u00far setur teams a\u00f0 lokum framar hva\u00f0 var\u00f0ar ferla og vara<\/a> \u00fer\u00f3un \u2013 sem auglj\u00f3slega s\u00fdnir hvers vegna h\u00fan er fr\u00e1b\u00e6r kostur fyrir n\u00fat\u00edmann, framhli\u00f0\u00fer\u00f3un<\/a><\/strong> fyrirt\u00e6ki.
        \nHven\u00e6r \u00e1 a\u00f0 nota \u00f6rfornenda?<\/p>\n

        Ef \u00fe\u00fa ert a\u00f0 \u00edhuga \u00f6r\u00fej\u00f3nustuarkitekt\u00far fyrir frams\u00ed\u00f0u er nau\u00f0synlegt a\u00f0 skilja hven\u00e6r og hvernig \u00feessi \u00f6flugu kerfi geta best \u00fej\u00f3na\u00f0 verkefninu \u00fe\u00ednu. En mundu, eins og me\u00f0 allar arkitekt\u00fars\u00e1kvar\u00f0anir, \u00fea\u00f0 sem virkar vel \u00ed einu samhengi g\u00e6ti ekki reynst jafn \u00e1rangursr\u00edkt \u00ed \u00f6\u00f0ru. \u00dea\u00f0 fer miki\u00f0 eftir s\u00e9rt\u00e6kum kr\u00f6fum e\u00f0a takm\u00f6rkunum verkefnisins \u00fe\u00edns. vefforrit<\/strong>.<\/p>\n

        Sm\u00e1forntendur og React<\/h2>\n

        React hefur sta\u00f0sett sig sem \u00f3missandi a\u00f0ila innan v\u00ed\u00f0ara svi\u00f0s sm\u00e1forntend<\/strong> forritaforenda \u00f6r\u00fej\u00f3nustur \u00e1 undanf\u00f6rnum \u00e1rum. \u00deekkt fyrir sveigjanleika sinn og endurn\u00fdtanlega \u00fe\u00e6tti hefur React or\u00f0i\u00f0 \u00f3missandi vi\u00f0 innlei\u00f0ingu sm\u00e1forntend<\/strong> arkitekt\u00far \u00feannig a\u00f0 \u00f3l\u00edkir teams<\/strong> getur unni\u00f0 sj\u00e1lfst\u00e6tt \u00e1 a\u00f0skildum hlutum \u00e1n \u00feess a\u00f0 trufla allt kerfi\u00f0. \u00deessi fj\u00f6lh\u00e6fni \u00fe\u00fd\u00f0ir a\u00f0 \u00e9g hef tilhneigingu til a\u00f0 m\u00e6la me\u00f0 React-bundnum \u00f6rsm\u00e1um notendavi\u00f0m\u00f3tum ef \u00fe\u00fa ert a\u00f0 skipuleggja fl\u00f3kna vefforrit<\/strong> \u00fear sem stigst\u00e6r\u00f0 og seigla eru h\u00e1ar forgangsr\u00f6\u00f0un.<\/p>\n

        Sm\u00e1forntendur og Angular<\/h2>\n

        Sem heildst\u00e6tt rammaskipulag sem \u00fevingar \u00feig \u00ed \u00e1kve\u00f0nar mynstur, svo sem ger\u00f0\u00f6ryggi og forritun me\u00f0 react\u00edfum, Einn tveggja p\u00f3sts 60 tonn<\/a> er s\u00e9rlega vel hentugur fyrir sm\u00e1forntend<\/strong> react-uppsetning \u00fear sem stj\u00f3rn \u00e1 framfylgd sta\u00f0la yfir team-um er \u00e6skileg. Me\u00f0 l\u00fdsandi sni\u00f0m\u00e1tum studdum af h\u00e1\u00f0uinngj\u00f6f, verkf\u00e6rum fr\u00e1 upphafi til enda og innbygg\u00f0um bestu starfsh\u00e1ttum sem eru tilb\u00fain beint \u00far kassanum til a\u00f0 einfalda \u00fer\u00f3unarferli\u00f0, hentar Angular mj\u00f6g vel fl\u00f3knum forritum sem leitast vi\u00f0 samr\u00e6mdan vinnufl\u00e6\u00f0i \u00fer\u00e1tt fyrir a\u00f0 vera \u00ed h\u00f6ndum margra forritara.<\/p>\n

        Sm\u00e1forntendur og Nextjs<\/h2>\n

        Nextjs b\u00fd\u00f0ur upp \u00e1 nokkrar lofandi m\u00f6guleika fyrir \u00fe\u00e1 sem hafa \u00e1huga \u00e1 a\u00f0 n\u00fdta kosti framenda \u00f6r\u00fej\u00f3nustulausnar. Samsetning \u00fej\u00f3nustuhli\u00f0ar\u00fatg\u00e1fu (SSR) sem Nextjs b\u00fd\u00f0ur upp \u00e1 \u00e1samt einangrunareiginleikum sem eru eindregi\u00f0 studdir af sm\u00e1forntendlar<\/strong> getur mynda\u00f0 gl\u00e6silegt tv\u00edeyki \u2013 sem tryggir b\u00e6\u00f0i fram\u00farskarandi notendaupplifun me\u00f0 hra\u00f0ari hle\u00f0slut\u00edma s\u00ed\u00f0a og sj\u00e1lfst\u00e6\u00f0a uppsetningu me\u00f0 k\u00f3\u00f0askilgreiningu eftir vi\u00f0skiptalegri virkni.<\/p>\n

        Val \u00e1 milli React, Angular e\u00f0a Nextjs hefur ekki endanlega lausn \u2013 \u00fea\u00f0 r\u00e6\u00f0st a\u00f0 miklu leyti af \u00fev\u00ed a\u00f0 \u00feekkja kr\u00f6fur v\u00f6runnar \u00feinnar n\u00e1kv\u00e6mlega. \u00de\u00fa \u00e6ttir a\u00f0 \u00edhuga \u00fe\u00e6tti eins og hversu \u00feroska\u00f0ur hugb\u00fana\u00f0ar\u00fer\u00f3unarferillinn \u00feinn er, hva\u00f0a frelsi \u00fe\u00fa vilt veita forriturum vi\u00f0 h\u00f6nnun \u00fej\u00f3nustna \u00feeirra og kannski mikilv\u00e6gast \u2013 mun \u00feessi t\u00e6kni falla fullkomlega a\u00f0 n\u00faverandi t\u00e6knistafla \u00fe\u00ednum?<\/p>\n

        Mundu a\u00f0 \u00ed valr\u00fdminu milli ramma og forritunarm\u00e1la til a\u00f0 innlei\u00f0a framenda \u00f6r\u00fej\u00f3nustur eru kostir og gallar \u00e1 hverju skrefi sem krefjast gaumg\u00e6filegrar mats \u00e1\u00f0ur en teki\u00f0 er upp \u00ed \u00fe\u00ednu s\u00e9rstaka umhverfi \u2013 a\u00f0 lokum er \u00fea\u00f0 h\u00e9r sem mikil n\u00fdsk\u00f6pun fer fram hj\u00e1 fyrirt\u00e6kjum um allan heim \u00ed dag!<\/p>\n

        Bestu vinnubr\u00f6g\u00f0 me\u00f0 \u00f6rforst\u00f6\u00f0uforritum<\/h2>\n

        N\u00fdtningin \u00e1 \u00fev\u00ed sem mest framhli\u00f0ark\u00f3\u00f0i<\/strong> og enda \u00f6r\u00fej\u00f3nustur eins og Sm\u00e1forrit frams\u00ed\u00f0u<\/strong> React e\u00f0a Nextjs sm\u00e1forntend<\/strong> \u00cd vef\u00fer\u00f3unarstefnu \u00feinni \u00fearf a\u00f0 gera \u00edgrundu\u00f0 \u00e1\u00e6tlun og fylgja tilteknum meginreglum. \u00deessar bestu vinnubr\u00f6g\u00f0 lei\u00f0a verkefni\u00f0 \u00feitt ekki a\u00f0eins til fars\u00e6lls \u00e1rangurs, heldur tryggja \u00feau einnig skilvirka og st\u00e6kkanlega lausn.<\/p>\n

        Halda teymis sj\u00e1lfst\u00e6\u00f0i<\/h2>\n

        Grunnlegur \u00e1bati af notkun sm\u00e1forntendlar<\/strong> Arkitekt\u00far felur \u00ed s\u00e9r a\u00f0 r\u00e6kta sj\u00e1lfst\u00e6\u00f0i. Hver h\u00f3pur sem ber \u00e1byrg\u00f0 \u00e1 tilteknum \u00fej\u00f3nustu \u00e6tti a\u00f0 geta unni\u00f0 sj\u00e1lfst\u00e6tt, en jafnframt samr\u00e6mt sig heildarkenndu markmi\u00f0i kerfisins.<\/p>\n

        \u2022 teams \u00feurfa a\u00f0 hafa fulla stj\u00f3rn \u00e1 s\u00ednum vi\u00f0komandi svi\u00f0um: fr\u00e1 k\u00f3\u00f0askrift, pr\u00f3fun virkni \u00feeirra, uppsetningu og vi\u00f0haldi eftir uppsetningu.<\/p>\n

        \u00deessi n\u00e1lgun dregur \u00far fl\u00f3knum h\u00e1\u00f0skap milli teams og eykur framlei\u00f0ni \u00fear sem enginn einstakur team b\u00ed\u00f0ur eftir \u00fattaki annars\u2014og n\u00fdtir \u00feannig \u00e1 skilvirkan h\u00e1tt kosti sem fylgja \u00f6r\u00fej\u00f3nustum eins og react \u00f6rforriti.<\/p>\n

        Innlei\u00f0ing pr\u00f3funara\u00f0fer\u00f0a<\/h2>\n

        Pr\u00f3fun er \u00f3missandi hluti af \u00f6llu hugb\u00fana\u00f0ar\u00fer\u00f3unarferli, og \u00feegar unni\u00f0 er me\u00f0 sm\u00e1forntendlar<\/strong>, \u00fea\u00f0 er mikilv\u00e6gara en nokkru sinni fyrr. H\u00f6nni\u00f0 mismunandi pr\u00f3funara\u00f0fer\u00f0ir fyrir \u00fdmsar k\u00f3\u00f0astig. \u00dea\u00f0 eru fj\u00f6lm\u00f6rg pr\u00f3f sem \u00fe\u00fa getur b\u00e6tt vi\u00f0 \u00ed pipeline:<\/p>\n

          \n
        1. Einingapr\u00f3fanir<\/li>\n
        2. Sam\u00fe\u00e6ttingapr\u00f3fun<\/li>\n
        3. Heildarpr\u00f3fun fr\u00e1 upphafi til enda (E2E)<\/li>\n<\/ol>\n

          Me\u00f0 \u00fev\u00ed a\u00f0 tryggja a\u00f0 allar \u00feessar pr\u00f3fanir s\u00e9u innleiddar \u00ed vinnufl\u00e6\u00f0i \u00fe\u00ednu me\u00f0 verkf\u00e6rum sem sty\u00f0ja vali\u00f0 UI-b\u00f3kasafn (React, Angular), tryggir \u00fe\u00fa st\u00f6\u00f0ugleika og \u00e1rei\u00f0anleika \u00ed \u00f6llum \u00fatf\u00e6r\u00f0um einingum.<\/p>\n

          H\u00f6nnun fyrir bilunars\u00feol<\/h2>\n

          Annar \u00fe\u00e1ttur vi\u00f0 a\u00f0 beita bestu starfsh\u00e1ttum felst \u00ed \u00fev\u00ed a\u00f0 vi\u00f0urkenna af og til misheppnanir \u2013 \u00feessi vi\u00f0urkenning mun lei\u00f0a \u00feig a\u00f0 \u00fev\u00ed a\u00f0 koma \u00e1 f\u00f3t varab\u00fana\u00f0i \u00feegar villur koma upp; \u00feannig b\u00e6tist notendaupplifun \u00fer\u00e1tt fyrir sm\u00e1v\u00e6gileg hn\u00f6krar.<\/p>\n

          Byrja\u00f0u \u00e1 \u00fev\u00ed a\u00f0 rannsaka hvernig hver \u00fej\u00f3nusta samspilar vi\u00f0 a\u00f0rar undir venjulegum rekstrarskilyr\u00f0um; s\u00ed\u00f0an \u00e1lyktar\u00f0u stefnur til a\u00f0 takast \u00e1 vi\u00f0 tilvik \u00fear sem ein e\u00f0a fleiri \u00fej\u00f3nustur breg\u00f0ast.<\/p>\n

          Tryggi\u00f0 samkv\u00e6mni \u00ed notendavi\u00f0m\u00f3ti og notendaupplifun.<\/h2>\n

          \u00de\u00f3 a\u00f0 hvetja til sj\u00e1lfst\u00e6\u00f0ra uppsetninga geti hugsanlega valdi\u00f0 fr\u00e1vikum \u00ed \u00fev\u00ed hvernig hvert undirkerfi heg\u00f0ar s\u00e9r e\u00f0a birtist sj\u00f3nr\u00e6nt \u2013 sem lei\u00f0ir til \u00f3samr\u00e6mis \u00ed UX\/UI-h\u00f6nnun sem g\u00e6ti rugla\u00f0 notendur \u2013 ver\u00f0ur nau\u00f0synlegt a\u00f0 koma \u00ed veg fyrir \u00feessa sveigju vi\u00f0 innlei\u00f0ingu. Sm\u00e1forritaforendlar<\/strong> Arkitekt\u00far.<\/p>\n

          Tryggi\u00f0 a\u00f0 sameiginlegir h\u00f6nnunar\u00fe\u00e6ttir, svo sem leturger\u00f0ir, litir og sameiginlegir \u00edhlutir, v\u00edki ekki fr\u00e1 vi\u00f0urkenndum vi\u00f0mi\u00f0um. St\u00edlhandb\u00f3k \u00e1samt mynstrasafni er fram\u00farskarandi \u00farr\u00e6\u00f0i til a\u00f0 koma \u00ed veg fyrir fr\u00e1vik \u00ed \u00fatg\u00e1fum teams vi\u00f0 \u00fer\u00f3un, \u00e1 sama t\u00edma og h\u00fan tryggir fagurfr\u00e6\u00f0ilega samr\u00e6mi \u00ed m\u00f6rgum forritum e\u00f0a vefs\u00ed\u00f0um sem jafnt innlei\u00f0a react. sm\u00e1forntend<\/strong> rammasetning e\u00f0a nextjs sm\u00e1forntend<\/strong> ef \u00fea\u00f0 er miki\u00f0 nota\u00f0 \u00ed verkefnum \u00fe\u00ednum.<\/p>\n

          A\u00f0 lokum stu\u00f0lar \u00fea\u00f0 verulega a\u00f0 \u00fev\u00ed a\u00f0 n\u00e1 sem bestum \u00e1rangri \u00ed verkefni \u00fe\u00ednu \u00ed heimi Arkitekt\u00far \u00f6rforenda<\/strong> \u00e1 me\u00f0an a\u00f0sto\u00f0a\u00f0 er vi\u00f0 a\u00f0 byggja upp \u00e1rei\u00f0anlegar lausnir sem eru st\u00e6kka\u00f0ar \u00e1 hagkv\u00e6man h\u00e1tt fyrir mikla notkun forrita og jafnframt a\u00f0sto\u00f0a\u00f0 Vefums\u00f3kn<\/strong> vi\u00f0haldanleiki til framt\u00ed\u00f0ar.<\/p>\n

          Sm\u00e1forntendur og Aplyca<\/h2>\n

          \u00dear sem m\u00f6rg t\u00e6knifyrirt\u00e6ki hafa s\u00e9\u00f0 m\u00f6guleika framenda \u00f6r\u00fej\u00f3nustulausna, hafa m\u00f6rg \u00feeirra innleitt \u00feessa n\u00e1lgun \u00ed starfsemi s\u00edna. Me\u00f0al \u00feeirra er hi\u00f0 \u00feekkta t\u00e6knilausnafyrirt\u00e6ki Aplyca.<\/p>\n

          Aplyca skilur a\u00f0 fl\u00e6kjustig n\u00fat\u00edma vefums\u00f3knir<\/strong> oft fer \u00fat fyrir hi\u00f0 hef\u00f0bundna Einnleikar frams\u00ed\u00f0ur <\/strong>, sem \u00fer\u00f3ast \u00ed fl\u00f3kin landslag \u00fear sem hver hluti krefst n\u00e1kv\u00e6mrar athygli. Af \u00feeim s\u00f6kum hafa \u00feeir tileinka\u00f0 s\u00e9r \u00f6rforritaforritun (microfrontend) vi\u00f0 uppbyggingu kerfa sinna til a\u00f0 tryggja aukna einingaskiptanleika og stigst\u00e6r\u00f0.
          \nSm\u00e1forritaforendlar<\/strong> Bj\u00f3\u00f0a upp \u00e1 marga kosti fyrir stofnanir eins og Aplyca.<\/p>\n

          \u00deau draga \u00far fl\u00e6kjustigi vi\u00f0 stj\u00f3rnun front-end verkefna me\u00f0 \u00fev\u00ed a\u00f0 skipta st\u00f3rum kerfum upp \u00ed minni, au\u00f0veldari einingar. \u00deetta lei\u00f0ir til aukinnar team sj\u00e1lfst\u00e6\u00f0is \u00fear sem einst\u00f6k team geta unni\u00f0 a\u00f0 s\u00e9rt\u00e6kum einingum \u00e1n \u00feess a\u00f0 hafa neikv\u00e6\u00f0 \u00e1hrif \u00e1 a\u00f0ra hluta kerfisins.<\/p>\n

          Auk \u00feess sem Aplyca hefur teki\u00f0 upp \u2018micro UI\u2019-a\u00f0fer\u00f0ina \u2013 lykilkenni sm\u00e1forntend<\/strong> Innvi\u00f0irnir hafa gert \u00feeim kleift a\u00f0 b\u00faa til s\u00e9rsni\u00f0na v\u00edgildi fyrir \u00fdmsar \u00fearfir me\u00f0 \u00fev\u00ed a\u00f0 n\u00fdta t\u00e6kni eins og React e\u00f0a Angular. Sveigjanleikinn sem \u00feessar gr\u00e6nu v\u00edgildahugmyndir bj\u00f3\u00f0a upp \u00e1 eykur \u00e1n\u00e6gju vi\u00f0skiptavina \u00fe\u00f6kk s\u00e9 hra\u00f0ari vi\u00f0brag\u00f0st\u00edma og h\u00e1g\u00e6\u00f0a \u00fattaki.<\/p>\n

          \u00dea\u00f0 sem a\u00f0greinir Aplyca fr\u00e1 \u00f6\u00f0rum notendum framenda \u00f6r\u00fej\u00f3nusta er h\u00e6fileiki \u00feeirra til a\u00f0 n\u00fdta \u00feessar kosti \u00e1 sama t\u00edma og draga \u00far hugsanlegum \u00e1skorunum sem tengjast samr\u00e6mi og frammist\u00f6\u00f0u.<\/p>\n

          Til d\u00e6mis, \u00fe\u00f3tt innlei\u00f0ing mismunandi ramma geti leitt til \u00f3samr\u00e6mis \u00ed h\u00f6nnunar\u00fe\u00e1ttum e\u00f0a notendaupplifun, tekur Aplyca \u00e1 \u00feessari \u00e1skorun me\u00f0 traustum stj\u00f3rnunaruppbyggingu \u00ed kringum UX\/UI-sta\u00f0la sem samt leyfir n\u00fdsk\u00f6pun innan marka sem \u00feessar sta\u00f0al\u00edmar skilgreina.<\/p>\n

          Frams\u00e6ki\u00f0 stj\u00f3rnarfar \u00feeirra tryggir h\u00e1marksframmist\u00f6\u00f0u jafnvel \u00fer\u00e1tt fyrir aukinn netseinkun sem getur stafa\u00f0 af \u00fev\u00ed a\u00f0 hla\u00f0a sm\u00e1atri\u00f0um fr\u00e1 mismunandi net\u00fej\u00f3num vegna dreif\u00f0rar e\u00f0lis sm\u00e1forenda. Kerfi \u00feeirra fyrir framhli\u00f0arskipulag sameinar snjallt allt sem \u00fearf \u00e1 r\u00e9ttum t\u00edma.<\/p>\n

          Almennt s\u00e9\u00f0 mun \u00fea\u00f0 sem h\u00e6gt er a\u00f0 l\u00e6ra af \u00fev\u00ed a\u00f0 fylgjast me\u00f0 hvernig fyrirt\u00e6ki eins og Aplyca nota \u201cmfe\u201d (skammst\u00f6fun fyrir microfrontends) a\u00f0fer\u00f0ir veita d\u00fdrm\u00e6tar inns\u00fdn fyrir alla sem reyna a\u00f0 takast \u00e1 vi\u00f0 nextjs sm\u00e1forntend<\/strong> verkf\u00e6ri e\u00f0a \u00f6nnur aukab\u00fana\u00f0arvandam\u00e1l sem tengjast sl\u00edkum uppsetningum.<\/p>\n

          St\u00e6r\u00f0arstilling frontsins me\u00f0 arkitekt\u00farnum<\/h2>\n

          St\u00e6r\u00f0arv\u00f6xtur frams\u00ed\u00f0uarkitekt\u00fara, s\u00e9rstaklega frams\u00ed\u00f0um\u00edkr\u00f3\u00fej\u00f3nusta, sn\u00fdst um a\u00f0 vega og meta \u00fe\u00e6tti fl\u00e6kju, \u00fej\u00f3nustueinangrunar, afkasta og \u00f6ryggis. \u00deessir \u00fe\u00e6ttir hafa beina tengingu og dj\u00fapst\u00e6\u00f0 \u00e1hrif \u00e1 lykilatri\u00f0i eins og \u00dej\u00f3nuhli\u00f0 <\/strong> Samsetning, sam\u00fe\u00e6tting byggingart\u00edma og keyrslut\u00edmar.<\/p>\n

          \u00dej\u00f3nahli\u00f0ar samsetning<\/h2>\n

          \u00dej\u00f3nustuhli\u00f0ar samsetning er einn af grunnsto\u00f0um vi\u00f0 a\u00f0 st\u00e6kka framhli\u00f0arkerfisarkitekt\u00far, s\u00e9rstaklega \u00feegar unni\u00f0 er me\u00f0 fl\u00f3knar \u00f6rvefsbyggingar. \u00deetta er n\u00e1lgun sem gerir kleift a\u00f0 setja saman einstakar \u00f6r\u00fej\u00f3nustur \u00e1 \u00fej\u00f3nahli\u00f0<\/strong> \u00e1\u00f0ur en \u00fea\u00f0 er sent til vi\u00f0skiptavinarins. \u00deetta skapar samr\u00e6mda s\u00fdn sem felur t\u00e6knilega fl\u00e6kju fyrir notendum \u00e1 sama t\u00edma og tryggir hn\u00f6kralausa starfsemi \u00ed bakgrunni.<\/p>\n

            \n
          1. Minni yfirbur\u00f0ar\u00e1lag hj\u00e1 vi\u00f0skiptavinum: \u00dear sem samsetning fer fram \u00e1 \u00fej\u00f3nustustigi, minnkar \u00fea\u00f0 aukna \u00e1lag \u00e1 vi\u00f0skiptavinum, s\u00e9rstaklega \u00feegar \u00f3ska\u00f0 er eftir m\u00f6rgum au\u00f0lindum.<\/li>\n
          2. Skilgreind samans\u00f6fnun: H\u00fan veitir sveigjanleika til a\u00f0 samansafna sv\u00f6rum fr\u00e1 mismunandi \u00f6r- Notendavi\u00f0m\u00f3ts\u00fe\u00e6ttir <\/strong>.<\/li>\n
          3. Frammista\u00f0abestun: H\u00fan b\u00e6tir verulega upphaflega hle\u00f0sluhra\u00f0a vegna f\u00e6rri bei\u00f0na milli vi\u00f0skiptavinar og net\u00fej\u00f3na (heimild).<\/li>\n<\/ol>\n

            T\u00edmabygging sam\u00fe\u00e6ttingar<\/h2>\n

            N\u00e6st kemur sam\u00fe\u00e6tting \u00ed byggingart\u00edma, \u00f6nnur nau\u00f0synleg stefna sem gagnast fyrir react sm\u00e1forntend<\/strong> e\u00f0a hva\u00f0a annarra svipa\u00f0ra arkitekt\u00fara sem er. \u00cd grundvallaratri\u00f0um \u00fe\u00fd\u00f0ir \u00feessi t\u00e6kni hverja \u00fej\u00f3nustu fyrirfram vi\u00f0 byggingu \u00ed einingu sem inniheldur allt sem \u00fearf til a\u00f0 keyra hana r\u00e9tt.
            \n1. Mikil samkv\u00e6mni: Tryggir afar samkv\u00e6ma notendaupplifun \u00fear sem forritarar geta stj\u00f3rna\u00f0 \u00f6llum \u00fe\u00e1ttum \u00fattaks forritsins s\u00edns.
            \n2. Aukningar eru pr\u00f3fanlegar: Sm\u00e1ar aukningar eru fullkomlega pr\u00f3fanlegar, sem lei\u00f0a til takmarka\u00f0s umfangs bilana.<\/p>\n

            Hins vegar krefst sam\u00fe\u00e6tting \u00fej\u00f3nustu vi\u00f0 byggingu str\u00f6ngrar samh\u00e6fingar milli \u00fer\u00f3unara\u00f0ili<\/a> teams for\u00f0ast fr\u00e1vik milli v\u00e6ntrar heg\u00f0unar og raunverulegrar notendaupplifunar sem g\u00e6tu skapast vegna sj\u00e1lfst\u00e6\u00f0ra innlei\u00f0ingarsenarya.<\/p>\n

            Keyrslut\u00edmi \u00ed gegnum JavaScript<\/h2>\n

            Var\u00f0andi keyrslut\u00edma\u00advalkosti sem eru \u00ed bo\u00f0i fyrir framendaarkitekt\u00far, \u00fear \u00e1 me\u00f0al Next.js sm\u00e1forntend<\/strong> ums\u00f3knir, sem ganga \u00ed gegnum JavaScript<\/a> Vir\u00f0ist vera hva\u00f0 \u00e1hugaver\u00f0ast mi\u00f0a\u00f0 vi\u00f0 v\u00ed\u00f0t\u00e6ka vi\u00f0t\u00f6ku og alhli\u00f0a stu\u00f0ning \u00ed v\u00f6frum.
            \nA\u00f0 keyra \u00ed gegnum JavaScript \u2013 sem oft felur \u00ed s\u00e9r a\u00f0 b\u00e6ta vi\u00f0 vi\u00f0eigandi skriptum \u00ed \u00fdmsum hlutum k\u00f3\u00f0agrunnsins \u2013 b\u00fd\u00f0ur upp \u00e1 \u00e1hrifamikla kosti en krefst einnig einstaks \u00fatsj\u00f3nar, svo sem m\u00f6gulegra nafnar\u00fdmis\u00e1rekstra e\u00f0a mismunandi \u00fatg\u00e1fume\u00f0fer\u00f0ar \u00ed vafra.<\/p>\n

            \u00der\u00e1tt fyrir \u00feessi takm\u00f6rk hefur JavaScript samt sem \u00e1\u00f0ur yfirh\u00f6ndina vegna a\u00f0gengis og hn\u00f6kralausra samskiptam\u00f6guleika milli mismunandi hluta forrits sem b\u00fd\u00f0st me\u00f0 d\u00fdnam\u00edsku forritunarm\u00e1linu.<\/p>\n

            Keyrslut\u00edmi me\u00f0 vefhlutum<\/h2>\n

            Fyrir \u00fe\u00e1 sem kj\u00f3sa skalanleika \u00e1samt m\u00f3duleiningager\u00f0 og endurn\u00fdtanleika \u2013 keyrslut\u00edmi \u00ed gegnum Vefhlutar<\/strong> \u00fej\u00f3nar fullkomlega og fellur vel a\u00f0 hugmyndum um gr\u00e6nar vi\u00f0m\u00f3tslausnir fyrir umhverfislega skilvirkni sem er afhent me\u00f0 t\u00e6kniframf\u00f6rum.
            \nVef\u00fe\u00e6ttir<\/strong> vinna a\u00f0 sama ramma um b\u00e6tta HTML-virkni sem lei\u00f0ir til s\u00e9rsni\u00f0inna, endurn\u00fdtanlegra HTML-merkja sem eru a\u00f0l\u00f6g\u00f0 \u00ed gegnum \u00f6ll forrit \u00e1n \u00e1hyggja af \u00e1rekstrum, sem gerir \u00feau a\u00f0 kj\u00f6ri vali fyrir st\u00f3r verkefni sem vi\u00f0halda sj\u00e1lfst\u00e6\u00f0um undireiningum undir einni yfirbyggingu (uppruni).<\/p>\n

            Keyrslut\u00edmi me\u00f0 iframes<\/h2>\n

            Einn enn raunh\u00e6fur kostur til a\u00f0 innlei\u00f0a stigst\u00e6kan framenda-grunn innan innvi\u00f0a hans, s\u00e9rstaklega hva\u00f0 einangrun var\u00f0ar, myndast \u00ed keyrslut\u00edma me\u00f0 iframes.<\/p>\n

            \u00der\u00e1tt fyrir a\u00f0 hafa n\u00fdlega dotti\u00f0 \u00far a\u00f0al\u00e1herslu vegna frammist\u00f6\u00f0utaps og \u00e1hrifa \u00e1 SEO-s\u00fdnileika, er innlei\u00f0ing iframes \u00e1fram fr\u00e1b\u00e6r kostur sem b\u00fd\u00f0ur upp \u00e1 stranga sandkassalausn og veitir hverjum hluta s\u00e9rstakt svigr\u00fam \u00e1n \u00feess a\u00f0 trufla a\u00f0ra.<\/p>\n

            \u00deegar kafa\u00f0 er \u00ed m\u00f6gulega fl\u00f3kna heim framenda \u00f6r\u00fej\u00f3nustuarkitekt\u00fars er ekki h\u00e6gt a\u00f0 neita \u00fev\u00ed a\u00f0 \u00f6rframendah\u00f3lar reynast s\u00edfellt ver\u00f0m\u00e6tara \u00farr\u00e6\u00f0i \u00ed n\u00fat\u00edma vef\u00fer\u00f3un. \u00deessi n\u00fdst\u00e1rlega n\u00e1lgun gerir forriturum kleift ekki a\u00f0eins a\u00f0 einfalda vinnu\u00e1lagi\u00f0 sitt heldur einnig a\u00f0 skila traustum og st\u00e6kkanlegum forritum \u00e1 \u00e1kaflega skilvirkan h\u00e1tt.<\/p>\n

            Hvort sem vi\u00f0 erum a\u00f0 tala um Microfrontends me\u00f0 React, Angular e\u00f0a Next.js \u2013 \u00fe\u00e1 eru \u00feau \u00f6ll mikilv\u00e6gar einingar \u00ed a\u00f0 m\u00f3ta \u00feessa n\u00fdju braut fram \u00e1 vi\u00f0 \u00ed h\u00f6nnun notendavi\u00f0m\u00f3ts, hvert \u00feeirra b\u00fd\u00f0ur upp \u00e1 einstaka kosti og verkf\u00e6ri til innlei\u00f0ingar. Hins vegar er mikilv\u00e6gt a\u00f0 muna a\u00f0, eins og me\u00f0 hva\u00f0a arkitekt\u00farst\u00edl sem er, felst notkun Microfrontends \u00ed \u00fev\u00ed a\u00f0 m\u00e6ta s\u00e9rt\u00e6kum \u00fe\u00f6rfum og markmi\u00f0um verkefnisins.<\/p>\n

            \u00dea\u00f0 er \u00e1n efa spennandi a\u00f0 sj\u00e1 hvernig \u00feetta svi\u00f0 hugb\u00fana\u00f0arverkfr\u00e6\u00f0i<\/a> er a\u00f0 halda \u00e1fram a\u00f0 \u00fer\u00f3ast. Samkv\u00e6mt ranns\u00f3knum virttra t\u00e6knigreiningara\u00f0ila eins og Gartner og Forrester Research vir\u00f0ist lj\u00f3st a\u00f0 \u00f6rforrit (microfrontends) muni ekki vera einungis t\u00edskub\u00f3la \u2013 \u00feau munu \u00e1fram gegna lykilhlutverki \u00ed a\u00f0 m\u00f3ta framt\u00ed\u00f0arlandslagi\u00f0 Vefforrit<\/strong> \u00fer\u00f3un \u00e1 \u00feverfaglegum svi\u00f0um. \u00deetta felur \u00ed s\u00e9r a\u00f0 au\u00f0velda vinnu \u00fevert \u00e1 margir teams<\/strong> a\u00f0 nota sama ramma<\/strong>, sem felur \u00ed s\u00e9r \u00fatg\u00e1fa \u00e1 \u00fej\u00f3nahli\u00f0<\/strong> til a\u00f0 auka frammist\u00f6\u00f0u, gera kleift sj\u00e1lfst\u00e6\u00f0ur teams<\/strong> a\u00f0 vinna a\u00f0 mismunandi \u00fe\u00e1ttum af vefforrit<\/strong>, n\u00fdta vef\u00fe\u00e6ttir<\/strong> fyrir m\u00f3duleiningu, me\u00f0 \u00fev\u00ed a\u00f0 nota almenn framsetning<\/strong> a\u00f0fer\u00f0ir til sam\u00fe\u00e6ttrar sam\u00fe\u00e6ttingar vi\u00f0skiptavinar og net\u00fej\u00f3ns, me\u00f0 \u00fev\u00ed a\u00f0 n\u00fdta Vafraatbur\u00f0ir<\/strong> fyrir kraftmikla notendaupplifanir, me\u00f0 \u00fev\u00ed a\u00f0 fylgja S\u00e9rtakm\u00f6rkun vef\u00fe\u00e1tta<\/strong> fyrir sta\u00f0al\u00edmyndun, sem tryggir a\u00f0 \u00edhlutir geti veri\u00f0 Settu upp sj\u00e1lfst\u00e6tt<\/strong>, me\u00f0 \u00e1herslu \u00e1 hle\u00f0slu a\u00f0eins nau\u00f0synlegir \u00fe\u00e6ttir<\/strong> til a\u00f0 auka skilvirkni, me\u00f0 \u00fev\u00ed a\u00f0 nota Innlei\u00f0ing \u00f6r-framhli\u00f0ar<\/strong> stefna fyrir sveigjanleika, me\u00f0 \u00fev\u00ed a\u00f0 nota vef\u00fej\u00f3nn<\/strong> eins og Sk\u00fdr \u00fej\u00f3nn<\/strong> fyrir bakendaa\u00f0ger\u00f0ir, n\u00e1nari \u00fatsk\u00fdring Innlei\u00f0slus\u00e9rstakur<\/strong> sk\u00fdrt fyrir vi\u00f0hald, a\u00f0 koma \u00e1 f\u00f3t cross team forritaskil<\/a><\/strong> fyrir samskipti og sk\u00f6pun s\u00e9rsni\u00f0in API-t\u00e6ki<\/strong> fyrir s\u00e9rstaka virkni.<\/p>","protected":false},"excerpt":{"rendered":"

            Uppg\u00f6tva\u00f0u hina v\u00ed\u00f0fe\u00f0mu m\u00f6guleika framendaarkitekt\u00fars bygg\u00f0s \u00e1 \u00f6r\u00fej\u00f3nustum! L\u00e6r\u00f0u hvernig \u00e1 a\u00f0 n\u00fdta einstaka kosti hans og opna n\u00fdjar m\u00f6guleika.<\/p>","protected":false},"author":2,"featured_media":3217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"\nExploring Microservice-Based Frontend Architecture - The Codest<\/title>\n<meta name=\"description\" content=\"Discover the vast potential of a microservice-based frontend architecture! Learn how to leverage its unique benefits.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/is\/blogg\/kannad-arkitektur-fronthauka-byggdur-a-orthjonustum\/\" \/>\n<meta property=\"og:locale\" content=\"is_IS\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exploring Microservice-Based Frontend Architecture\" \/>\n<meta property=\"og:description\" content=\"Discover the vast potential of a microservice-based frontend architecture! Learn how to leverage its unique benefits.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/is\/blogg\/kannad-arkitektur-fronthauka-byggdur-a-orthjonustum\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-15T10:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T10:48:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/understanding_frontend__microservices_architecture___a_simple_guide.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Exploring Microservice-Based Frontend Architecture\",\"datePublished\":\"2023-05-15T10:13:58+00:00\",\"dateModified\":\"2026-03-05T10:48:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/\"},\"wordCount\":4117,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/understanding_frontend__microservices_architecture___a_simple_guide.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"is\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/\",\"name\":\"Exploring Microservice-Based Frontend Architecture - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/understanding_frontend__microservices_architecture___a_simple_guide.png\",\"datePublished\":\"2023-05-15T10:13:58+00:00\",\"dateModified\":\"2026-03-05T10:48:02+00:00\",\"description\":\"Discover the vast potential of a microservice-based frontend architecture! Learn how to leverage its unique benefits.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#breadcrumb\"},\"inLanguage\":\"is\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/understanding_frontend__microservices_architecture___a_simple_guide.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/understanding_frontend__microservices_architecture___a_simple_guide.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/exploring-microservice-based-frontend-architecture\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Exploring Microservice-Based Frontend Architecture\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"is\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/is\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"K\u00f6nnun \u00e1 \u00f6r\u00fej\u00f3nustubundinni frams\u00ed\u00f0uarkitekt\u00far - The Codest","description":"Uppg\u00f6tva\u00f0u hina v\u00ed\u00f0fe\u00f0mu m\u00f6guleika framendaarkitekt\u00fars bygg\u00f0s \u00e1 \u00f6r\u00fej\u00f3nustum! L\u00e6r\u00f0u hvernig \u00e1 a\u00f0 n\u00fdta einstaka kosti \u00feess.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/is\/blogg\/kannad-arkitektur-fronthauka-byggdur-a-orthjonustum\/","og_locale":"is_IS","og_type":"article","og_title":"Exploring Microservice-Based Frontend Architecture","og_description":"Discover the vast potential of a microservice-based frontend architecture! Learn how to leverage its unique benefits.","og_url":"https:\/\/thecodest.co\/is\/blogg\/kannad-arkitektur-fronthauka-byggdur-a-orthjonustum\/","og_site_name":"The Codest","article_published_time":"2023-05-15T10:13:58+00:00","article_modified_time":"2026-03-05T10:48:02+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/understanding_frontend__microservices_architecture___a_simple_guide.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Exploring Microservice-Based Frontend Architecture","datePublished":"2023-05-15T10:13:58+00:00","dateModified":"2026-03-05T10:48:02+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/"},"wordCount":4117,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/understanding_frontend__microservices_architecture___a_simple_guide.png","articleSection":["Software Development"],"inLanguage":"is","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/","url":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/","name":"K\u00f6nnun \u00e1 \u00f6r\u00fej\u00f3nustubundinni frams\u00ed\u00f0uarkitekt\u00far - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/understanding_frontend__microservices_architecture___a_simple_guide.png","datePublished":"2023-05-15T10:13:58+00:00","dateModified":"2026-03-05T10:48:02+00:00","description":"Uppg\u00f6tva\u00f0u hina v\u00ed\u00f0fe\u00f0mu m\u00f6guleika framendaarkitekt\u00fars bygg\u00f0s \u00e1 \u00f6r\u00fej\u00f3nustum! L\u00e6r\u00f0u hvernig \u00e1 a\u00f0 n\u00fdta einstaka kosti \u00feess.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#breadcrumb"},"inLanguage":"is","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/"]}]},{"@type":"ImageObject","inLanguage":"is","@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/understanding_frontend__microservices_architecture___a_simple_guide.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/understanding_frontend__microservices_architecture___a_simple_guide.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/exploring-microservice-based-frontend-architecture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Exploring Microservice-Based Frontend Architecture"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"is"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"is","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"is","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/is\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/comments?post=3216"}],"version-history":[{"count":5,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3216\/revisions"}],"predecessor-version":[{"id":8502,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3216\/revisions\/8502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/media\/3217"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/media?parent=3216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/categories?post=3216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/tags?post=3216"}],"curies":[{"name":"vp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}