{"id":8848,"date":"2026-08-23T16:00:00","date_gmt":"2026-08-23T14:00:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=8848"},"modified":"2026-10-09T22:41:18","modified_gmt":"2026-10-09T20:41:18","slug":"vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/","title":{"rendered":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w"},"content":{"rendered":"\r\n<h2 class=\"wp-block-heading\">Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Wsp\u00f3\u0142czesna architektura frontendowa cz\u0119sto automatycznie opiera si\u0119 na z\u0142o\u017conych frameworkach Single-Page Application (SPA), takich jak React, Angular czy Vue, nawet w przypadku prostych interfejs\u00f3w i modu\u0142owych narz\u0119dzi SaaS. Jednak obci\u0105\u017cenie generowane przez wielokilobajtowe paczki kodu, algorytmy porz\u0105dkuj\u0105ce wirtualny DOM oraz zasobocho\u0142onn\u0105 hydratacj\u0119 JavaScriptu bezpo\u015brednio obni\u017ca wska\u017aniki Core Web Vitals \u2013 w szczeg\u00f3lno\u015bci Interaction to Next Paint (INP) oraz Largest Contentful Paint (LCP). Nowoczesne przegl\u0105darki oferuj\u0105 natywne interfejsy DOM oraz Web Components, kt\u00f3re sprawiaj\u0105, \u017ce ci\u0119\u017ckie frameworki staj\u0105 si\u0119 technicznie zb\u0119dne w pragmatycznej, wydajnej in\u017cynierii internetowej.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">1. Koszt wydajno\u015bciowy wirtualnego DOM i nadmiaru kodu JavaScript<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Frameworki wykorzystuj\u0105 warstw\u0119 abstrakcji zwan\u0105 wirtualnym DOM (Virtual DOM) do grupowania i obliczania zmian w uk\u0142adzie przed na\u0142o\u017ceniem ich na rzeczywisty Document Object Model. O ile w przesz\u0142o\u015bci rozwi\u0105zanie to niwelowa\u0142o powoln\u0105 prac\u0105 silnik\u00f3w renderuj\u0105cych, o tyle wsp\u00f3\u0142czesne potoki przegl\u0105darek przetwarzaj\u0105 bezpo\u015brednie manipulacje DOM z wyj\u0105tkow\u0105 pr\u0119dko\u015bci\u0105. Wprowadzenie wirtualnego po\u015brednika niesie ze sob\u0105 wymierne wady:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Narzut na pami\u0119\u0107 i procesor:<\/strong> Utrzymywanie zduplikowanych drzew struktur w pami\u0119ci operacyjnej zmusza silnik JavaScript do wykonywania obci\u0105\u017caj\u0105cych p\u0119tli weryfikacyjnych przy ka\u017cdej zmianie stanu.<\/li>\r\n\r\n\r\n\r\n<li><strong>Blokowanie g\u0142\u00f3wnego w\u0105tku:<\/strong> Parsowanie rozbudowanych skrypt\u00f3w oraz hydratacja po stronie klienta blokuj\u0105 g\u0142\u00f3wny w\u0105tek przegl\u0105darki, co op\u00f3\u017ania interaktywno\u015b\u0107 stron i pogarsza wyniki INP na urz\u0105dzeniach mobilnych.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<figure class=\"lw-diagram\">\n<img decoding=\"async\" src=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/diagrams\/dia-8846-vanilla-js-pl.png?v=20261005\" width=\"1120\" height=\"580\" loading=\"lazy\" alt=\"Po lewej \u0142a\u0144cuch frameworka: pakiet skrypt\u00f3w, hydratacja i Virtual DOM z gorszym INP i p\u00f3\u017aniejszym LCP; po prawej natywne elementy jak Custom Elements, Shadow DOM, template, delegacja zdarze\u0144 i querySelector. Na dole regu\u0142a z CustomStatusBadge: sta\u0142e znaczniki w innerHTML, className dla wariantu, textContent dla tekstu.\">\n<figcaption>Ile kosztuje warstwa frameworka, jakie natywne API przegl\u0105darki j\u0105 zast\u0119puj\u0105 i regu\u0142a z przyk\u0142adu CustomStatusBadge, by nie wstawia\u0107 warto\u015bci do innerHTML.<\/figcaption>\n<\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">2. Natywne interfejsy DOM oraz Web Components<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Specyfikacja ECMAScript oraz wsp\u00f3\u0142czesne silniki przegl\u0105darek natywnie udost\u0119pniaj\u0105 funkcjonalno\u015bci, kt\u00f3re w przesz\u0142o\u015bci wymaga\u0142y instalacji zewn\u0119trznych bibliotek. Projektowanie interfejs\u00f3w w czystym Vanilla JavaScript pozwala na bezpo\u015brednie wykorzystanie stabilnych standard\u00f3w internetowych:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Custom Elements i Shadow DOM:<\/strong> Natywne Web Components pozwalaj\u0105 zamkn\u0105\u0107 HTML, CSS i logik\u0119 interaktywn\u0105 w znacznikach wielokrotnego u\u017cytku, bez zewn\u0119trznych zale\u017cno\u015bci i etap\u00f3w kompilacji.<\/li>\r\n\r\n\r\n\r\n<li><strong>Znaczniki HTML <code>&lt;template&gt;<\/code>:<\/strong> Natywne dla przegl\u0105darki klonowanie fragment\u00f3w DOM wykonuje si\u0119 natychmiastowo, eliminuj\u0105c potrzeb\u0119 transpilacji JSX lub stosowania silnik\u00f3w szablon\u00f3w po stronie klienta.<\/li>\r\n\r\n\r\n\r\n<li><strong>Delegacja zdarze\u0144 (Event Delegation):<\/strong> Nas\u0142uchiwacze zdarze\u0144 przypi\u0119te do kontener\u00f3w nadrz\u0119dnych zmniejszaj\u0105 liczb\u0119 potrzebnych nas\u0142uchiwaczy. Nie trzeba ich wtedy osobno dodawa\u0107 ani usuwa\u0107, gdy zmieniaj\u0105 si\u0119 elementy potomne.<\/li>\r\n<\/ul>\r\n\r\n\r\n<figure style=\"--cbb-digits:2\" class=\"cbb cbb--wrap cbb--numbers wp-block-code-beautifier-block-code\" data-lang=\"javascript\"><figcaption class=\"cbb-head\"><span class=\"cbb-lang\">JavaScript<\/span><span class=\"cbb-actions\"><button type=\"button\" class=\"cbb-button cbb-button--wrap\" data-cbb-action=\"wrap\" aria-pressed=\"true\" title=\"Wrap long lines\"><svg aria-hidden=\"true\" focusable=\"false\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M2 4h12M2 8h9.5a2.5 2.5 0 0 1 0 5H8m0 0 1.5-1.5M8 13l1.5 1.5M2 12h3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span class=\"cbb-sr\">Wrap long lines<\/span><\/button><button type=\"button\" class=\"cbb-button cbb-button--copy\" data-cbb-action=\"copy\" data-cbb-done=\"Copied\" data-cbb-failed=\"Press Ctrl+C to copy\"><svg aria-hidden=\"true\" focusable=\"false\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8.5\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v6.5A1.5 1.5 0 0 0 4 11h.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><span class=\"cbb-button-label\" aria-live=\"polite\">Copy<\/span><\/button><\/span><\/figcaption><pre class=\"cbb-pre\" tabindex=\"0\"><code class=\"cbb-code language-javascript\" style=\"counter-reset:cbb-line 0;\"><span class=\"cbb-line\"><span class=\"cbb-comment\">\/\/ Przyk\u0142ad: Pragmatyczny komponent UI ze sta\u0142ymi znacznikami w innerHTML i textContent (light DOM, bez Shadow DOM)<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">class<\/span> <span class=\"cbb-type\">CustomStatusBadge<\/span> <span class=\"cbb-keyword\">extends<\/span> HTMLElement {\n<\/span><span class=\"cbb-line\">  <span class=\"cbb-function\">connectedCallback<\/span>() {\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">const<\/span> status = <span class=\"cbb-constant\">this<\/span>.<span class=\"cbb-function\">getAttribute<\/span>(<span class=\"cbb-string\">'data-status'<\/span>) || <span class=\"cbb-string\">'idle'<\/span>;\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-constant\">this<\/span>.innerHTML = <span class=\"cbb-string\">`<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-string\">      &lt;span class=\"badge\"&gt;<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-string\">        &lt;span class=\"dot\"&gt;&lt;\/span&gt; Status: &lt;span class=\"label\"&gt;&lt;\/span&gt;<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-string\">      &lt;\/span&gt;<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-string\">    `<\/span>;\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-constant\">this<\/span>.firstElementChild.className = <span class=\"cbb-string\">`badge badge-${status}`<\/span>;\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-constant\">this<\/span>.<span class=\"cbb-function\">querySelector<\/span>(<span class=\"cbb-string\">'.label'<\/span>).textContent = status.<span class=\"cbb-function\">toUpperCase<\/span>();\n<\/span><span class=\"cbb-line\">  }\n<\/span><span class=\"cbb-line\">}\n<\/span><span class=\"cbb-line\">customElements.<span class=\"cbb-function\">define<\/span>(<span class=\"cbb-string\">'status-badge'<\/span>, <span class=\"cbb-type\">CustomStatusBadge<\/span>);<\/span><\/code><\/pre><\/figure>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">3. Maksymalizacja wska\u017anik\u00f3w Core Web Vitals dzi\u0119ki architekturze Zero-Dependency<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Pragmatyczna in\u017cynieria stawia szybko\u015b\u0107 dostarczania tre\u015bci oraz deterministyczne wykonywanie kodu ponad warstwy abstrakcji framework\u00f3w. Ca\u0142kowity brak wielokilobajtowych bibliotek obcych producent\u00f3w sprawia, \u017ce strona jest parsowana i gotowa do interakcji natychmiast po pobraniu dokumentu HTML. Po\u0142\u0105czenie natywnych selektor\u00f3w DOM (<code>querySelector<\/code>), siatek CSS Grid oraz kontroler\u00f3w w czystym Vanilla JavaScript pozwala tworzy\u0107 responsywne, \u0142atwe w utrzymaniu interfejsy SaaS osi\u0105gaj\u0105ce doskona\u0142e wyniki Core Web Vitals bez komplikowania architektury.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Podsumowanie<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Nowoczesne silniki przegl\u0105darek nie wymagaj\u0105 ju\u017c ci\u0119\u017ckich framework\u00f3w JavaScript do budowy responsywnych i \u0142atwych w utrzymaniu interfejs\u00f3w u\u017cytkownika. Oparcie architektury na czystym Vanilla JavaScript, natywnych Web Components oraz bezpo\u015brednich manipulacjach DOM eliminuje nadmiar kodu, zapobiega blokowaniu g\u0142\u00f3wnego w\u0105tku i gwarantuje najwy\u017csze wska\u017aniki Core Web Vitals na wszystkich urz\u0105dzeniach.<\/p>\r\n\n\n<div class=\"lw-faq\">\n<h2>Pytania i odpowiedzi<\/h2>\n\n<h3>Czy pole formularza umieszczone w Shadow DOM bierze udzia\u0142 w wysy\u0142ce formularza, w kt\u00f3rym stoi element?<\/h3>\n<p>Nie. Pole wewn\u0105trz Shadow DOM samo nie zostaje wys\u0142ane z zewn\u0119trznym formularzem. Granica Shadow DOM oddziela nie tylko style, lecz tak\u017ce powi\u0105zanie pola z tym formularzem.<\/p>\n<p>Rozwi\u0105zaniem jest element powi\u0105zany z formularzem: <code>static formAssociated = true<\/code>, <code>ElementInternals<\/code> i jawne ustawianie warto\u015bci przez <code>setFormValue<\/code>. Wiele poradnik\u00f3w o Web Components pomija ten krok. Bez niego komponent wygl\u0105da poprawnie, ale przy wysy\u0142ce formularza jego dane przepadaj\u0105 bez ostrze\u017cenia.<\/p>\n<p>Z dost\u0119pno\u015bci\u0105 jest podobnie: role, etykiety i powi\u0105zania trzeba ustawi\u0107 samodzielnie, bo domy\u015blnej semantyki nie ma. Oba te koszty przemawiaj\u0105 za podej\u015bciem z przyk\u0142adu w artykule, kt\u00f3ry renderuje zawarto\u015b\u0107 w zwyk\u0142ym DOM: dla prostego komponentu to rozwi\u0105zanie rozs\u0105dniejsze, a Shadow DOM zwraca si\u0119 dopiero tam, gdzie ten sam komponent ma dzia\u0142a\u0107 w wielu miejscach o nieprzewidywalnych stylach.<\/p>\n<\/div>\n\n<div class=\"lw-quellen\">\n<h2>\u0179r\u00f3d\u0142a<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\" target=\"_blank\" rel=\"noopener noreferrer\">MDN Web Docs<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Analiza pragmatycznej in\u017cynierii: maksymalizacja Core Web Vitals i pe\u0142na kontrola nad kodem z u\u017cyciem Vanilla JS oraz natywnych API DOM zamiast framework\u00f3w.<\/p>\n","protected":false},"author":1,"featured_media":15247,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[152],"tags":[92271,92295,92283,92077],"class_list":["post-8848","post","type-post","status-publish","format-standard","hentry","category-tworzenie-stron-internetowych","tag-javascript-pl","tag-seo-pl","tag-web-performance-pl","tag-web-security-pl"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w | Lukas Wojcik<\/title>\n<meta name=\"description\" content=\"Vanilla JavaScript jako alternatywa dla framework\u00f3w: natywne API DOM, Web Components, rozmiar pakiet\u00f3w i Core Web Vitals.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w | Lukas Wojcik\" \/>\n<meta property=\"og:description\" content=\"Vanilla JavaScript jako alternatywa dla framework\u00f3w: natywne API DOM, Web Components, rozmiar pakiet\u00f3w i Core Web Vitals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/\" \/>\n<meta property=\"og:site_name\" content=\"Lukas Wojcik - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-09T20:41:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lukas Wojcik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lukas Wojcik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/\"},\"author\":{\"name\":\"Lukas Wojcik\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"headline\":\"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w\",\"datePublished\":\"2026-08-23T14:00:00+00:00\",\"dateModified\":\"2026-10-09T20:41:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/\"},\"wordCount\":750,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png\",\"keywords\":[\"JavaScript\",\"SEO\",\"Web Performance\",\"Web Security\"],\"articleSection\":[\"Tworzenie stron internetowych\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/\",\"name\":\"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w | Lukas Wojcik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png\",\"datePublished\":\"2026-08-23T14:00:00+00:00\",\"dateModified\":\"2026-10-09T20:41:18+00:00\",\"description\":\"Vanilla JavaScript jako alternatywa dla framework\u00f3w: natywne API DOM, Web Components, rozmiar pakiet\u00f3w i Core Web Vitals.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png\",\"width\":1200,\"height\":630,\"caption\":\"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\",\"name\":\"Lukas Wojcik - Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\",\"name\":\"Lukas Wojcik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"width\":424,\"height\":636,\"caption\":\"Lukas Wojcik\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\"},\"sameAs\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w | Lukas Wojcik","description":"Vanilla JavaScript jako alternatywa dla framework\u00f3w: natywne API DOM, Web Components, rozmiar pakiet\u00f3w i Core Web Vitals.","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:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/","og_locale":"en_US","og_type":"article","og_title":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w | Lukas Wojcik","og_description":"Vanilla JavaScript jako alternatywa dla framework\u00f3w: natywne API DOM, Web Components, rozmiar pakiet\u00f3w i Core Web Vitals.","og_url":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/","og_site_name":"Lukas Wojcik - Blog","article_published_time":"2026-08-23T14:00:00+00:00","article_modified_time":"2026-10-09T20:41:18+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png","type":"image\/png"}],"author":"Lukas Wojcik","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lukas Wojcik","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#article","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/"},"author":{"name":"Lukas Wojcik","@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"headline":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w","datePublished":"2026-08-23T14:00:00+00:00","dateModified":"2026-10-09T20:41:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/"},"wordCount":750,"commentCount":0,"publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png","keywords":["JavaScript","SEO","Web Performance","Web Security"],"articleSection":["Tworzenie stron internetowych"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/","url":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/","name":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w | Lukas Wojcik","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#primaryimage"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png","datePublished":"2026-08-23T14:00:00+00:00","dateModified":"2026-10-09T20:41:18+00:00","description":"Vanilla JavaScript jako alternatywa dla framework\u00f3w: natywne API DOM, Web Components, rozmiar pakiet\u00f3w i Core Web Vitals.","breadcrumb":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#primaryimage","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8848-czysty-vanilla-js-vs-ciezkie-framewo-n.png","width":1200,"height":630,"caption":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/vanilla-javascript-i-natywne-api-dom-jako-alternatywa-dla-reacta-i-innych\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lukaswojcik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript i natywne API DOM jako alternatywa dla Reacta i innych framework\u00f3w"}]},{"@type":"WebSite","@id":"https:\/\/www.lukaswojcik.com\/blog\/#website","url":"https:\/\/www.lukaswojcik.com\/blog\/","name":"Lukas Wojcik - Blog","description":"","publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lukaswojcik.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9","name":"Lukas Wojcik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","width":424,"height":636,"caption":"Lukas Wojcik"},"logo":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg"},"sameAs":["https:\/\/www.lukaswojcik.com\/blog"]}]}},"_links":{"self":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/8848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/comments?post=8848"}],"version-history":[{"count":6,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/8848\/revisions"}],"predecessor-version":[{"id":21787,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/8848\/revisions\/21787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media\/15247"}],"wp:attachment":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media?parent=8848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/categories?post=8848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/tags?post=8848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}