{"id":8846,"date":"2026-08-23T07:30:00","date_gmt":"2026-08-23T05:30:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=8846"},"modified":"2026-10-24T03:30:21","modified_gmt":"2026-10-24T01:30:21","slug":"vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/","title":{"rendered":"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks"},"content":{"rendered":"<p>Vanilla JavaScript means using JavaScript and browser APIs without an additional UI library. For a small calculator, status display or independent page widget, this can reduce dependencies and downloaded code. For an application with shared state, routing and many coordinated screens, a framework can supply useful structure. The decision depends on the interface and maintenance needs, not a universal performance ranking.<\/p>\n<h2>Rendering costs need measurement<\/h2>\n<p>React calculates the desired interface during rendering and commits the necessary DOM changes. Browser layout and painting remain browser tasks. React, Angular and Vue do not share one identical update mechanism, and hydration is relevant when attaching client behavior to server-rendered HTML; not every application hydrates.<\/p>\n<p>Large scripts and long synchronous tasks can delay interaction in either architecture. Direct DOM access can also trigger expensive layout work, especially when layout reads and writes alternate. Removing a library does not remove the application&#8217;s own work.<\/p>\n<p>LCP describes when the largest eligible visible content element is rendered; server response, images, fonts, CSS and JavaScript can all matter. INP describes interaction responsiveness during the page visit. Smaller bundles can help, but neither dependency count nor use of CSS Grid guarantees good values. Comparison needs equivalent features, representative devices, laboratory diagnostics and field measurements.<\/p>\n<figure class=\"lw-diagram\"><img decoding=\"async\" src=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/diagrams\/dia-8846-dom-20261024.png\" width=\"1120\" height=\"580\" loading=\"lazy\" alt=\"Native DOM or a framework: compare the workload; Architecture; Local widgets or shared application state; Performance; Measure LCP, INP and long tasks; Custom element lifecycle; Connection + attribute updates; Output handling; Allowed states + textContent; No architecture guarantees perfect Web Vitals\"><figcaption>Native DOM or a framework: compare the workload.<\/figcaption><\/figure>\n<h2>Native building blocks<\/h2>\n<ul>\n<li><strong>Semantic HTML:<\/strong> native buttons, form fields and disclosure elements provide a useful starting point before custom scripting.<\/li>\n<li><strong>Custom elements:<\/strong> reusable elements can react to connection and attribute changes. Shadow DOM optionally isolates an internal tree and styles; a custom element does not require Shadow DOM.<\/li>\n<li><strong>Templates:<\/strong> a normal <code>&lt;template&gt;<\/code> stores an inert fragment for cloning. Cloning and inserting a large tree still take time.<\/li>\n<li><strong>Event delegation:<\/strong> a container can handle suitable bubbling events from descendants. Non-bubbling events and shadow boundaries need separate treatment.<\/li>\n<\/ul>\n<p>These features belong to HTML and DOM web standards. ECMAScript defines the JavaScript language, not the whole browser component model.<\/p>\n<h2>A status badge with explicit state handling<\/h2>\n<p>The following light-DOM component owns its child content and accepts only <code>idle<\/code>, <code>ready<\/code> and <code>error<\/code>. Unknown values fall back to <code>idle<\/code>. Status changes update the visible text after insertion, while reconnection keeps the existing nodes.<\/p>\n<pre class=\"wp-block-code-beautifier-block-code\"><code>class CustomStatusBadge extends HTMLElement {\n  static observedAttributes = [&#x27;data-status&#x27;];\n\n  connectedCallback() {\n    if (!this.badge) {\n      this.badge = document.createElement(&#x27;span&#x27;);\n      this.dot = document.createElement(&#x27;span&#x27;);\n      this.dot.className = &#x27;dot&#x27;;\n      this.dot.setAttribute(&#x27;aria-hidden&#x27;, &#x27;true&#x27;);\n      this.label = document.createElement(&#x27;span&#x27;);\n      this.label.className = &#x27;label&#x27;;\n      this.badge.append(this.dot, this.label);\n      this.replaceChildren(this.badge);\n    }\n    this.render();\n  }\n\n  attributeChangedCallback() {\n    if (this.badge) this.render();\n  }\n\n  render() {\n    const raw = this.getAttribute(&#x27;data-status&#x27;);\n    const status = [&#x27;idle&#x27;, &#x27;ready&#x27;, &#x27;error&#x27;].includes(raw) ? raw : &#x27;idle&#x27;;\n    this.badge.className = &#x27;badge badge-&#x27; + status;\n    this.label.textContent = &#x27;Status: &#x27; + status.toUpperCase();\n  }\n}\ncustomElements.define(&#x27;status-badge&#x27;, CustomStatusBadge);\n<\/code><\/pre>\n<p>The class is registered once, preferably from an external module. Example markup is <code>&lt;status-badge data-status=\"ready\"&gt;Status: READY&lt;\/status-badge&gt;<\/code>; the fallback text remains available before the module runs. Styling for <code>.badge<\/code>, <code>.dot<\/code> and the status classes is application-specific. The English example labels require localization in a multilingual interface.<\/p>\n<p>DOM construction avoids an HTML parsing sink, and <code>textContent<\/code> inserts text. The allowlist also prevents arbitrary status values from adding unrelated CSS classes. This is a local component rule, not a complete application security policy: URLs, rich HTML and other output contexts require appropriate handling. The decorative dot is hidden from assistive technology; the text conveys the state without color. Automatic announcement of changes needs a deliberately designed live region and testing.<\/p>\n<div class=\"lw-faq\">\n<h2>Questions and answers<\/h2>\n<h3>When does a framework become worthwhile?<\/h3>\n<p>Shared state across many views, complex navigation, team conventions and established accessible components can justify a library. Maintenance effort and correctness matter alongside loading cost. Independent widgets often need less infrastructure; a large application does not automatically become simpler by removing dependencies.<\/p>\n<h3>Does Shadow DOM submit an internal input with an outer form?<\/h3>\n<p>An input inside a shadow tree is not automatically associated with the outer form. A form-associated custom element can use <code>ElementInternals<\/code> and <code>setFormValue<\/code>. Validation, reset behavior, labels and keyboard operation still require implementation and testing. Native controls remain a valuable option.<\/p>\n<h3>Does framework escaping solve every injection problem?<\/h3>\n<p>No. Ordinary text interpolation and explicit raw-HTML APIs have different behavior. The badge uses text insertion and fixed classes; arbitrary untrusted HTML must not be treated as ordinary text interpolation.<\/p>\n<\/div>\n<div class=\"lw-quellen\">\n<h2>Sources<\/h2>\n<ul>\n<li><a href=\"https:\/\/react.dev\/learn\/render-and-commit\" target=\"_blank\" rel=\"noopener noreferrer\">React: Render and Commit<\/a><\/li>\n<li><a href=\"https:\/\/react.dev\/reference\/react-dom\/client\/hydrateRoot\" target=\"_blank\" rel=\"noopener noreferrer\">React: hydrateRoot \u2013 Hydrating server-rendered HTML<\/a><\/li>\n<li><a href=\"https:\/\/angular.dev\/guide\/components\/lifecycle\" target=\"_blank\" rel=\"noopener noreferrer\">Angular: Component Lifecycle<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/articles\/inp\" target=\"_blank\" rel=\"noopener noreferrer\">Google web.dev: Interaction to Next Paint (INP)<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/articles\/lcp\" target=\"_blank\" rel=\"noopener noreferrer\">Google web.dev: Largest Contentful Paint (LCP)<\/a><\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/custom-elements.html#custom-elements\" target=\"_blank\" rel=\"noopener noreferrer\">WHATWG HTML Standard: Custom elements<\/a><\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/scripting.html#the-template-element\" target=\"_blank\" rel=\"noopener noreferrer\">WHATWG HTML Standard: The template element<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/#dom-node-textcontent\" target=\"_blank\" rel=\"noopener noreferrer\">WHATWG DOM Standard: Node.textContent<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\" target=\"_blank\" rel=\"noopener noreferrer\">MDN Web Docs: Web technology reference<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/articles\/avoid-large-complex-layouts-and-layout-thrashing\" target=\"_blank\" rel=\"noopener noreferrer\">Google web.dev: Avoid large, complex layouts and layout thrashing<\/a><\/li>\n<li><a href=\"https:\/\/react.dev\/reference\/react-dom\/components\/common#dangerously-setting-the-inner-html\" target=\"_blank\" rel=\"noopener noreferrer\">React: Dangerously setting the inner HTML<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pragmatic engineering analysis: achieving optimal Core Web Vitals and full code control using Vanilla JavaScript and native DOM APIs instead of heavy frameworks.<\/p>\n","protected":false},"author":1,"featured_media":15245,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[148],"tags":[91312,91094,91315,91115],"class_list":["post-8846","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-javascript","tag-seo","tag-web-performance","tag-web-security"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks | Lukas Wojcik<\/title>\n<meta name=\"description\" content=\"Vanilla JavaScript as a framework alternative: native DOM APIs, Web Components, bundle size and effects on 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\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks | Lukas Wojcik\" \/>\n<meta property=\"og:description\" content=\"Vanilla JavaScript as a framework alternative: native DOM APIs, Web Components, bundle size and effects on Core Web Vitals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/\" \/>\n<meta property=\"og:site_name\" content=\"Lukas Wojcik - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-23T05:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-24T01:30:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8846-vanilla-javascript-vs-heavy-framewor-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\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/\"},\"author\":{\"name\":\"Lukas Wojcik\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"headline\":\"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks\",\"datePublished\":\"2026-08-23T05:30:00+00:00\",\"dateModified\":\"2026-10-24T01:30:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/\"},\"wordCount\":686,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png\",\"keywords\":[\"JavaScript\",\"SEO\",\"Web Performance\",\"Web Security\"],\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/\",\"name\":\"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks | Lukas Wojcik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png\",\"datePublished\":\"2026-08-23T05:30:00+00:00\",\"dateModified\":\"2026-10-24T01:30:21+00:00\",\"description\":\"Vanilla JavaScript as a framework alternative: native DOM APIs, Web Components, bundle size and effects on Core Web Vitals.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png\",\"width\":1200,\"height\":630,\"caption\":\"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/en\\\/web-development\\\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks\"}]},{\"@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 and Native DOM APIs as an Alternative to React and Other Frameworks | Lukas Wojcik","description":"Vanilla JavaScript as a framework alternative: native DOM APIs, Web Components, bundle size and effects on 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\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/","og_locale":"en_US","og_type":"article","og_title":"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks | Lukas Wojcik","og_description":"Vanilla JavaScript as a framework alternative: native DOM APIs, Web Components, bundle size and effects on Core Web Vitals.","og_url":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/","og_site_name":"Lukas Wojcik - Blog","article_published_time":"2026-08-23T05:30:00+00:00","article_modified_time":"2026-10-24T01:30:21+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8846-vanilla-javascript-vs-heavy-framewor-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\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#article","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/"},"author":{"name":"Lukas Wojcik","@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"headline":"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks","datePublished":"2026-08-23T05:30:00+00:00","dateModified":"2026-10-24T01:30:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/"},"wordCount":686,"commentCount":0,"publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png","keywords":["JavaScript","SEO","Web Performance","Web Security"],"articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/","url":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/","name":"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks | Lukas Wojcik","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#primaryimage"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png","datePublished":"2026-08-23T05:30:00+00:00","dateModified":"2026-10-24T01:30:21+00:00","description":"Vanilla JavaScript as a framework alternative: native DOM APIs, Web Components, bundle size and effects on Core Web Vitals.","breadcrumb":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#primaryimage","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/09\/hero-8846-vanilla-javascript-vs-heavy-framewor-n.png","width":1200,"height":630,"caption":"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/vanilla-javascript-and-native-dom-apis-as-an-alternative-to-react-and-other\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lukaswojcik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript and Native DOM APIs as an Alternative to React and Other Frameworks"}]},{"@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\/8846","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=8846"}],"version-history":[{"count":7,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/8846\/revisions"}],"predecessor-version":[{"id":23394,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/8846\/revisions\/23394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media\/15245"}],"wp:attachment":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media?parent=8846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/categories?post=8846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/tags?post=8846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}