{"id":30017,"date":"2022-01-05T06:45:00","date_gmt":"2022-01-05T05:45:00","guid":{"rendered":"https:\/\/nearshore-it.eu\/artykuly\/najlepsze-frameworki-frontendowe\/"},"modified":"2024-11-07T15:22:10","modified_gmt":"2024-11-07T14:22:10","slug":"najlepsze-frameworki-frontendowe","status":"publish","type":"post","link":"https:\/\/nearshore-it.eu\/pl\/artykuly\/najlepsze-frameworki-frontendowe\/","title":{"rendered":"Najlepsze frameworki frontendowe"},"content":{"rendered":"\n
\n

<\/p>\n

    \n
  1. 1. Czym s\u0105 frameworki?<\/a><\/li>\n
  2. 2. Angular<\/a><\/li>\n
  3. 3. Vue.js<\/a><\/li>\n
  4. 4. React<\/a><\/li>\n <\/ol>\n<\/div>\n\n\n

    Czym s\u0105 frameworki?<\/h2>\n\n\n\n

    Framework to nic innego jak szkielet aplikacji wraz z pewnymi schematami zachowa\u0144, kt\u00f3re pozwalaj\u0105 na ich budow\u0119. G\u0142\u00f3wnym celem ka\u017cdego frameworka jest poprawa efektywno\u015bci, zapewnienie swoistego rodzaju niezawodno\u015bci oraz utrzymanie jako\u015bci kodu w pewnych narzuconych ryzach. Oczywi\u015bcie opr\u00f3cz wymienionych wy\u017cej zalet istniej\u0105 te\u017c pewne niedogodno\u015bci, takie jak na przyk\u0142ad z\u0142o\u017cono\u015b\u0107 kodu. Przed przyst\u0105pieniem do pracy musimy po prostu nauczy\u0107 si\u0119 regu\u0142, kt\u00f3re panuj\u0105 w danym \u015brodowisku. Cz\u0119sto wyzwaniem mo\u017ce by\u0107 wydajno\u015b\u0107, ale jest to kwestia doboru odpowiednich narz\u0119dzi do rozwi\u0105zania, kt\u00f3re budujemy.<\/p>\n\n\n\n\n\n

    <\/p>\n\n\n<\/p>\n

    \n\n\n

    Angular<\/h2>\n\n\n<\/p>\n

    \n\n

    \n
    \"Angular<\/figure>\n<\/div>\n\n<\/p>\n

    \n\n\n

    <\/p>\n\n\n\n

    Angular to framework stworzony przez firm\u0119 Google. W praktyce jest to kolejna ga\u0142\u0105\u017a frameworka AngularJS<\/strong>, opartego na j\u0119zyku JavaScript. Jednak nie nale\u017cy spodziewa\u0107 si\u0119 tutaj usp\u00f3jnionych koncepcji czy kontynuacji rozwi\u0105za\u0144. J\u0119zykiem, w kt\u00f3rym piszemy w Angularze, jest TypeScript<\/strong>. Framework ten wprowadza pe\u0142n\u0105 gam\u0119 funkcjonalno\u015bci, kt\u00f3re powinien posiada\u0107 ka\u017cdy szkielet aplikacji. Programi\u015bci ceni\u0105 Angulara przede wszystkim za takie funkcjonalno\u015bci jak narzucona architektura aplikacji, routing, rozwi\u0105zanie wspieraj\u0105ce pisanie komponent\u00f3w, modu\u0142owo\u015b\u0107 czy zastosowanie wzorc\u00f3w projektowych.<\/p>\n\n\n\n

    Istniej\u0105 r\u00f3wnie\u017c problemy, kt\u00f3re cz\u0119sto s\u0105 zg\u0142aszane przez u\u017cytkownik\u00f3w, mi\u0119dzy innymi: wysoki pr\u00f3g wej\u015bcia<\/strong> \u2013 zanim zacznie si\u0119 pisa\u0107 kod, trzeba przyswoi\u0107 sporo wiedzy. Zatem wyzwaniem bez w\u0105tpienia jest du\u017ca z\u0142o\u017cono\u015b\u0107 frameworka<\/strong> oraz paradoksalnie zwi\u0105zana z narzucon\u0105 architektur\u0105 ma\u0142a elastyczno\u015b\u0107 tworzonych aplikacji<\/strong>.<\/p>\n\n\n\n

    Vue.js<\/h2>\n\n\n
    \n
    \"Vue.js\"<\/figure>\n<\/div>\n\n\n\n\n

    Jest to\u00a0framework typu open source, zaprojektowany przez\u00a0szerok\u0105 rzesz\u0119 specjalist\u00f3w. Dane autor\u00f3w mo\u017cemy znale\u017a\u0107 na\u00a0stronie:\u00a0https:\/\/vuejs.org\/<\/a>. Vue.js proponuje bardzo podobne funkcjonalno\u015bci co\u00a0Angular, a\u00a0jednocze\u015bnie mo\u017cna odnie\u015b\u0107 wra\u017cenie, \u017ce\u00a0jest znacznie prostszym frameworkiem ni\u017c jego kuzyn od\u00a0Google.\u00a0Pr\u00f3g wej\u015bcia<\/strong>\u00a0jest zdecydowanie ni\u017cszy<\/strong>, a\u00a0cz\u0119sto mo\u017cemy napisa\u0107 prost\u0105 aplikacj\u0119 po\u00a0kilku minutach nauki, znaj\u0105c podstawy\u00a0HTML, CSS<\/strong>\u00a0i\u00a0JavaScript<\/strong>. Z\u00a0drugiej strony jednak powoduje to, \u017ce\u00a0kod mo\u017ce by\u0107 zdecydowanie gorszej jako\u015bci<\/strong>. Kolejn\u0105 rzecz\u0105, kt\u00f3ra\u00a0w\u00a0Vue.js, jak i\u00a0Angularze nie\u00a0jest doskona\u0142ym rozwi\u0105zaniem, jest rozbudowanie HTML o\u00a0dyrektywy, kt\u00f3re pozwalaj\u0105 nam\u00a0programowa\u0107 na\u00a0poziomie szablonu<\/strong>. W\u00a0mojej\u00a0opinii znacznie obni\u017ca to\u00a0czytelno\u015b\u0107 kodu.<\/p>\n\n\n\n\n\n

    React<\/h2>\n\n\n
    \n
    \"React\"<\/figure>\n<\/div>\n\n\n\n\n

    Zaraz, zaraz \u2013 czy\u00a0nale\u017cy o\u00a0nim m\u00f3wi\u0107 jak o\u00a0frameworku? Zdecydowanie nie! Pewnie zastanawiacie si\u0119, dlaczego w\u00a0takim razie w\u00a0og\u00f3le React znalaz\u0142 si\u0119 na\u00a0tej\u00a0li\u015bcie? Przede wszystkim dlatego, \u017ce\u00a0jest to\u00a0biblioteka, kt\u00f3ra\u00a0ma\u00a0ogromn\u0105 cz\u0119\u015b\u0107 funkcjonalno\u015bci frameworka<\/strong>. Wzbogacona o\u00a0konkretne biblioteki, powoduje, \u017ce\u00a0ekosystem aplikacji reactowej staje si\u0119 w\u00a0pe\u0142ni dzia\u0142aj\u0105cym frameworkiem. Takie rozwi\u0105zanie cechuje si\u0119 tym, \u017ce\u00a0mo\u017cemy\u00a0w\u00a0swobodny spos\u00f3b zarz\u0105dza\u0107 kszta\u0142tem naszej aplikacji<\/strong>, nie\u00a0pomijaj\u0105c dobrych praktyk, kt\u00f3re narzucaj\u0105 te\u00a0narz\u0119dzia. U\u017cycie\u00a0JSX<\/strong>\u00a0jako j\u0119zyka szablon\u00f3w jest du\u017co bardziej czytelne ni\u017c typowy kod HTML. Ponadto w\u00a0React mo\u017cemy wszystko uzna\u0107 za\u00a0komponenty, co\u00a0powoduje, \u017ce\u00a0nie\u00a0tworzymy dodatkowych struktur z\u00a0wi\u0119ksz\u0105 z\u0142o\u017cono\u015bci\u0105<\/strong>. W\u00a0tym uj\u0119ciu okazuje si\u0119, \u017ce\u00a0modu\u0142y nie\u00a0s\u0105\u00a0potrzebne, a\u00a0wprowadzaj\u0105 jedynie dodatkow\u0105 warstw\u0119 deklaracji.<\/p>\n\n\n

    Podsumowuj\u0105c\u2026 Kt\u00f3ry framework jest najlepszy?<\/h2>\n\n\n\n\n<\/p>\n

    Z u\u017cyciem Angulara mo\u017cna cz\u0119sto spotka\u0107 si\u0119 w projektach, w kt\u00f3rych wymagany jest du\u017cy poziom zaufania do narz\u0119dzia<\/strong> oraz istnieje konkretna specyfikacja, jak np. w projektach bankowych. W mojej ocenie Vue.js jest najmniej trafnym wyborem<\/strong> spo\u015br\u00f3d wymienionych narz\u0119dzi, poniewa\u017c nie wprowadza \u017cadnej rewolucyjno\u015bci, a sam w sobie miesza mn\u00f3stwo warstw w jednym miejscu.<\/p>\n

    \n\n\n<\/p>\n

    \n\n\n\n<\/p>\n

    \n\n\n<\/p>\n

    Istnieje mn\u00f3stwo rodzaj\u00f3w framework\u00f3w frontendowych. Wymienione wy\u017cej s\u0105 najcz\u0119\u015bciej u\u017cywane w uj\u0119ciu komercyjnym. W mojej opinii<\/strong> najbardziej przyjaznym oraz najszybszym jest React<\/strong>. Pozwala on na szybkie pisanie kodu bez dodatkowych konfiguracji.<\/p>\n

    \n\n\n<\/p>\n

    \n\n\n<\/p>\n

    Pami\u0119tajcie jednak, \u017ce najwa\u017cniejsze w budowaniu aplikacji, a tym samym przy wyborze framework\u00f3w, jest okre\u015blenie tego, czego potrzebujemy. Opinie na temat framework\u00f3w s\u0105 subiektywne i cz\u0119sto zale\u017cne od poziomu wiedzy o nich. Jedno moim zdaniem jest pewne: nie istnieje co\u015b takiego jak \u201enajlepszy framework\u201d<\/a><\/strong>, ale na pewno mo\u017cna wskaza\u0107 \u201enajlepszy framework pod k\u0105tem konkretnego rozwi\u0105zania\u201d<\/strong>. Kt\u00f3ry? Niech zdecyduje o tym zesp\u00f3\u0142 developer\u00f3w, kt\u00f3rzy b\u0119d\u0105 pisali aplikacj\u0119.<\/p>\n

    \u00a0<\/p>\n

    \n\n\n<\/p>\n

    \n\n\n<\/p>\n

    \n\n\n<\/p>\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Narz\u0119dziownik programisty frontend to nie tylko j\u0119zyki programowania takie jak JavaScript, HTML, TypeScript czy CSS. Ka\u017cdy programista, kt\u00f3ry tworzy \u201ena froncie\u201d, powinien zadba\u0107 o stack technologiczny, kt\u00f3rego istotn\u0105 cz\u0119\u015b\u0107 stanowi\u0105 biblioteki i frameworki. W artykule skupi\u0119 si\u0119 na tych drugich\u2026 chocia\u017c nie tylko. Om\u00f3wi\u0119 3 narz\u0119dzia z mojej subiektywnej listy i spr\u00f3buj\u0119 odpowiedzie\u0107 na pytanie, kt\u00f3re wci\u0105\u017c wzbudza wiele emocji: kt\u00f3ry framework frontendowy jest najlepszy?<\/p>\n","protected":false},"author":179,"featured_media":30028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":76,"footnotes":""},"categories":[1,582],"tags":[570],"offering":[522],"class_list":["post-30017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artykuly","category-technologie","tag-javascript-pl","offering-tech-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/30017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/users\/179"}],"replies":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/comments?post=30017"}],"version-history":[{"count":11,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/30017\/revisions"}],"predecessor-version":[{"id":33951,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/30017\/revisions\/33951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media\/30028"}],"wp:attachment":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media?parent=30017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/categories?post=30017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/tags?post=30017"},{"taxonomy":"offering","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/offering?post=30017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}