If you hang out in dev forums or browse front-end threads, you\u2019ve probably seen people say things like \u201cyou can do that in vanilla JS\u201d or \u201cno framework needed.\u201d The term gets tossed around a lot, sometimes meaning different things to different people.<\/p>\n\n\n\n
What is vanilla JavaScript? Is it just ES6 without frameworks, or does it include browser APIs too? How do I build common features like DOM updates, HTTP requests, modules, and simple routing using only the platform?<\/em><\/p>\n\n\n\n Also, what are the tradeoffs compared to using a framework, and how should I approach performance and images when building a site in plain JS?<\/em><\/p>\n\n\n\n Great question. In practice, \u201cvanilla\u201d JavaScript means using the JavaScript language and standard Web Platform APIs without third-party frameworks or libraries. Think modern JS syntax plus the DOM, Fetch API, URL and History APIs, Web Components or plain HTML, and browser-native modules. It doesn\u2019t exclude ES2015+ features or the module system, and it does not require build tools (unless you choose them).<\/p>\n\n\n\n Tradeoffs include writing more glue code yourself, deciding on patterns and structure, and sometimes adding polyfills for older browsers.<\/p>\n\n\n\n Once you have a plain JS app, you can still optimize media delivery without adding heavy libraries. Cloudinary lets you deliver responsive, transformed images by URL, which works perfectly with native <img>, srcset, and lazy loading.<\/p>\n\n\n The parameters in the URL handle compression and format selection automatically, so you keep your JS light and let the CDN do the heavy lifting.<\/p>\n\n\n\n Start with the platform. If complexity grows, layer in small utilities or adopt a framework selectively.<\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
Why choose vanilla JS<\/h3>\n\n\n\n
\n
Core patterns with vanilla JS<\/h3>\n\n\n\n
1) DOM rendering and events<\/em><\/h4>\n\n\n
\/\/ Create and update elements<\/span>\nconst<\/span> app = document<\/span>.getElementById('app'<\/span>);\n\nfunction<\/span> renderCount<\/span>(count<\/span>) <\/span>{\n\u00a0 app.innerHTML = ''<\/span>;\n\u00a0 const<\/span> btn = document<\/span>.createElement('button'<\/span>);\n\u00a0 btn.textContent = `Clicked ${count}<\/span> times`<\/span>;\n\u00a0 btn.addEventListener('click'<\/span>, () => renderCount(count + 1<\/span>));\n\u00a0 app.appendChild(btn);\n}\n\nrenderCount(0<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n2) HTTP requests with Fetch<\/em><\/h4>\n\n\n
async<\/span> function<\/span> loadPosts<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch('https:\/\/jsonplaceholder.typicode.com\/posts?_limit=3'<\/span>);\n\u00a0 if<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>('Network error'<\/span>);\n\u00a0 const<\/span> posts = await<\/span> res.json();\n\u00a0 document<\/span>.getElementById('posts'<\/span>).innerHTML = posts\n\u00a0 \u00a0 .map(p<\/span> =><\/span> `<article><h3>${p.title}<\/span><\/h3><p>${p.body}<\/span><\/p><\/article>`<\/span>)\n\u00a0 \u00a0 .join(''<\/span>);\n}\nloadPosts().catch(console<\/span>.error);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n3) Browser-native ES modules<\/em><\/h4>\n\n\n
async<\/span> function<\/span> loadPosts<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch('https:\/\/jsonplaceholder.typicode.com\/posts?_limit=3'<\/span>);\n\u00a0 if<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>('Network error'<\/span>);\n\u00a0 const<\/span> posts = await<\/span> res.json();\n\u00a0 document<\/span>.getElementById('posts'<\/span>).innerHTML = posts\n\u00a0 \u00a0 .map(p<\/span> =><\/span> `<article><h3>${p.title}<\/span><\/h3><p>${p.body}<\/span><\/p><\/article>`<\/span>)\n\u00a0 \u00a0 .join(''<\/span>);\n}\nloadPosts().catch(console<\/span>.error);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n4) Tiny router with the Hash API<\/em><\/h4>\n\n\n
const<\/span> routes = {\n\u00a0 ''<\/span>: '<h2>Home<\/h2>'<\/span>,\n\u00a0 '#\/about'<\/span>: '<h2>About<\/h2>'<\/span>,\n\u00a0 '#\/contact'<\/span>: '<h2>Contact<\/h2>'<\/span>\n};\n\nfunction<\/span> renderRoute<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> view = routes[location.hash] ?? '<h2>404<\/h2>'<\/span>;\n\u00a0 document<\/span>.getElementById('view'<\/span>).innerHTML = view;\n}\n\nwindow<\/span>.addEventListener('hashchange'<\/span>, renderRoute);\nrenderRoute();<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nPerformance and images<\/h3>\n\n\n\n
\n
Using Cloudinary with vanilla JS<\/h3>\n\n\n\n
<img<\/span>\n\u00a0 loading<\/span>=\"lazy\"<\/span>\n\u00a0 alt<\/span>=\"Hero\"<\/span>\n\u00a0 src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_800\/sample.jpg\"<\/span>\n\u00a0 srcset<\/span>=\"\n\u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_480\/sample.jpg 480w,\n\u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_800\/sample.jpg 800w,\n\u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_1200\/sample.jpg 1200w\"<\/span>\n\u00a0 sizes<\/span>=\"(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nWhen a framework still helps<\/h3>\n\n\n\n
\n
TL;DR<\/h2>\n\n\n\n
\n
Learn More<\/h2>\n\n\n\n