CINXE.COM

<!doctype html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <base href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"> <link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"> <meta name="theme-color" content="#ffffff"> <link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"> <title>Introduction to client-side frameworks - Learn web development | MDN</title> <link rel="alternate" title="Einführung in client-seitige Frameworks" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hreflang="de"> <link rel="alternate" title="クライアントサイドフレームワークの概要" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hreflang="ja"> <link rel="alternate" title="클라이언트 측 프레임워크 소개" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hreflang="ko"> <link rel="alternate" title="客户端框架介绍" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hreflang="zh"> <link rel="alternate" title="前端框架簡介" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hreflang="zh-Hant"> <link rel="alternate" title="Introduction to client-side frameworks" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hreflang="en"> <link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""> <link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hreflang="en"> <meta name="description" content="We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks."> <meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction"> <meta property="og:title" content="Introduction to client-side frameworks - Learn web development | MDN"> <meta property="og:type" content="website"> <meta property="og:locale" content="en_US"> <meta property="og:description" content="We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks."> <meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:height" content="1080"> <meta property="og:image:width" content="1920"> <meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."> <meta property="og:site_name" content="MDN Web Docs"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:creator" content="MozDevNet"> <link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction"> <style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style> <script src="/static/js/gtag.js" defer></script> <script defer src="/static/js/main.c6d1d6c1.js"></script> <link href="/static/css/main.bb0aeb15.css" rel="stylesheet"> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="fr"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=corsproxy" data-sourceurl="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/exm=corsproxy/ed=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=navigationui" data-environment="prod" data-proxy-url="https://developer-mozilla-org.translate.goog" data-proxy-full-url="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" data-source-language="pl" data-target-language="fr" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction&anno=2" data-client="tr"></script> <script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script> <div id="root"> <ul id="nav-access" class="a11y-nav"> <li><a id="skip-main" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#content">Skip to main content</a></li> <li><a id="skip-search" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#top-nav-search-input">Skip to search</a></li> <li><a id="skip-select-language" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#languages-switcher-button">Skip to select language</a></li> </ul> <div class="page-wrapper category-javascript document-page"> <div class="top-banner loading"> <section class="place top container"></section> </div> <div class="sticky-header-container"> <header class="top-navigation "> <div class="container "> <div class="top-navigation-wrap"> <a href="https://developer-mozilla-org.translate.goog/en-US/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="logo" aria-label="MDN homepage"> <svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewbox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"> <title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path> </svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button> </div> <div class="top-navigation-main"> <nav class="main-nav" aria-label="Main menu"> <ul class="main-menu nojs"> <li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">References</a> <ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"> <li class="apis-link-container mobile-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview / Web Technology </div> <p class="submenu-item-description">Web technology reference for developers</p> </div></a></li> <li class="html-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon html"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTML </div> <p class="submenu-item-description">Structure of content on the web</p> </div></a></li> <li class="css-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon css"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> CSS </div> <p class="submenu-item-description">Code used to describe document style</p> </div></a></li> <li class="javascript-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon javascript"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> JavaScript </div> <p class="submenu-item-description">General-purpose scripting language</p> </div></a></li> <li class="http-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTTP?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon http"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTTP </div> <p class="submenu-item-description">Protocol for transmitting web resources</p> </div></a></li> <li class="apis-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon apis"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web APIs </div> <p class="submenu-item-description">Interfaces for building web applications</p> </div></a></li> <li class="apis-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Mozilla/Add-ons/WebExtensions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web Extensions </div> <p class="submenu-item-description">Developing extensions for web browsers</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Accessibility </div> <p class="submenu-item-description">Build web projects usable for all</p> </div></a></li> <li class="apis-link-container desktop-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web Technology </div> <p class="submenu-item-description">Web technology reference for developers</p> </div></a></li> </ul></li> <li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">Learn</a> <ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"> <li class="apis-link-container mobile-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon learn"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview / MDN Learning Area </div> <p class="submenu-item-description">Learn web development</p> </div></a></li> <li class="apis-link-container desktop-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon learn"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> MDN Learning Area </div> <p class="submenu-item-description">Learn web development</p> </div></a></li> <li class="html-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon html"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTML </div> <p class="submenu-item-description">Learn to structure web content with HTML</p> </div></a></li> <li class="css-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon css"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> CSS </div> <p class="submenu-item-description">Learn to style content using CSS</p> </div></a></li> <li class="javascript-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon javascript"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> JavaScript </div> <p class="submenu-item-description">Learn to run scripts in the browser</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Accessibility </div> <p class="submenu-item-description">Learn to make the web accessible to all</p> </div></a></li> </ul></li> <li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">Plus</a> <ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview </div> <p class="submenu-item-description">A customized MDN experience</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/ai-help?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> AI Help </div> <p class="submenu-item-description">Get real-time assistance and support</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/updates?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Updates </div> <p class="submenu-item-description">All browser compatibility updates at a glance</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/docs/features/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Documentation </div> <p class="submenu-item-description">Learn how to use MDN Plus</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/docs/faq?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> FAQ </div> <p class="submenu-item-description">Frequently asked questions about MDN Plus</p> </div></a></li> </ul></li> <li class="top-level-entry-container "><a class="top-level-entry menu-link" href="https://developer-mozilla-org.translate.goog/en-US/curriculum/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Curriculum <sup class="new">New</sup></a></li> <li class="top-level-entry-container "><a class="top-level-entry menu-link" href="https://developer-mozilla-org.translate.goog/en-US/blog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Blog</a></li> <li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button> <ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/play?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Playground </div> <p class="submenu-item-description">Write, test and share your code</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/observatory?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTTP Observatory </div> <p class="submenu-item-description">Scan a website for free</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/ai-help?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> AI Help </div> <p class="submenu-item-description">Get real-time assistance and support</p> </div></a></li> </ul></li> </ul> </nav> <div class="header-search"> <form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"> <label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autocomplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required value=""><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button> <div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div> </form> </div> <div class="theme-switcher-menu"> <button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button> </div> <ul class="auth-container"> <li><a href="https://developer-mozilla-org.translate.goog/users/fxa/login/authenticate/?next=/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction&_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="login-link" rel="nofollow">Log in</a></li> <li><a href="https://developer-mozilla-org.translate.goog/users/fxa/login/authenticate/?next=/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction&_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li> </ul> </div> </div> </header> <div class="article-actions-container"> <div class="container"> <button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button> <nav class="breadcrumbs-container" aria-label="Breadcrumb"> <ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Learn</span></a> <meta property="position" content="1"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a> <meta property="position" content="2"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript frameworks and libraries</span></a> <meta property="position" content="3"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Introduction to client-side frameworks</span></a> <meta property="position" content="4"></li> </ol> </nav> <div class="article-actions"> <button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button> <ul class="article-actions-entries"> <li class="article-actions-entry"> <div class="languages-switcher-menu open-on-focus-within"> <button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button> <div class="hidden"> <ul class="submenu language-menu " aria-labelledby="language-menu-button"> <li class=" "> <form class="submenu-item locale-redirect-setting"> <div class="group"> <label class="switch"><input type="checkbox" name="locale-redirect"><span class="slider"></span><span class="label">Remember language</span></label><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a> </div> </form></li> <li class=" "><a data-locale="de" href="https://developer-mozilla-org.translate.goog/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li> <li class=" "><a data-locale="ja" href="https://developer-mozilla-org.translate.goog/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>日本語</span></a></li> <li class=" "><a data-locale="ko" href="https://developer-mozilla-org.translate.goog/ko/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>한국어</span></a></li> <li class=" "><a data-locale="zh-CN" href="https://developer-mozilla-org.translate.goog/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>中文 (简体)</span></a></li> <li class=" "><a data-locale="zh-TW" href="https://developer-mozilla-org.translate.goog/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>正體中文 (繁體)</span></a></li> </ul> </div> </div></li> </ul> </div> </div> </div> </div> <div class="main-wrapper"> <div class="sidebar-container"> <aside id="sidebar-quicklinks" class="sidebar"> <button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button> <nav aria-label="Related Topics" class="sidebar-inner"> <header class="sidebar-actions"> <section class="sidebar-filter-container"> <div class="sidebar-filter "> <label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autocomplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button> </div> </section> </header> <div class="sidebar-inner-nav"> <div class="in-nav-toc"> <div class="document-toc-container"> <section class="document-toc"> <header> <h2 class="document-toc-heading">In this article</h2> </header> <ul class="document-toc-list"> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_emergence_of_libraries_and_frameworks">The emergence of libraries and frameworks</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#what_frameworks_are_out_there">What frameworks are out there?</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#why_do_frameworks_exist">Why do frameworks exist?</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_verbosity_of_dom_changes">The verbosity of DOM changes</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#another_way_to_build_uis">Another way to build UIs</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#other_things_frameworks_give_us">Other things frameworks give us</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#things_to_consider_when_using_frameworks">Things to consider when using frameworks</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#accessibility_on_a_framework-driven_web">Accessibility on a framework-driven web</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#how_to_choose_a_framework">How to choose a framework</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#alternatives_to_client-side_frameworks">Alternatives to client-side frameworks</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></li> </ul> </section> </div> </div> <div class="sidebar-body"> <ol> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started modules</a></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Environment setup</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Installing basic software</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Browsing the web</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Code editors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Dealing with files</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Command line crash course</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Your first website</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What will your website look like?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML: Creating the content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS: Styling the content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript: Adding interactivity</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Publishing your website</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web standards</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How the web works</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The web standards model</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How browsers load websites</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Soft skills</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Research and learning</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Collaboration and teamwork</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Workflows and processes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Succeeding in job interviews</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Core modules</a></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Structuring content with HTML</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic HTML syntax</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What's in the head? Webpage metadata</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Headings and paragraphs in HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Emphasis and importance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Lists?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Lists</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Structuring documents</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced text features</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating links</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Marking up a letter</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Structuring a page of content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML images</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML video and audio</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Mozilla splash page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Structuring a planet data table</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Forms and buttons in HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging HTML</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS styling basics</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is CSS?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Styling a biography page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic CSS selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Attribute selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Pseudo-classes and pseudo-elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Combinators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The box model</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling conflicts</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS values and units</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sizing items in CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Backgrounds and borders</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Overflowing content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Images, media, and form elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling tables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Fundamental CSS comprehension</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Creating fancy letterheaded paper</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: A cool-looking box</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS text styling</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Fundamental text and font styling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling lists</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling links</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web fonts</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Typesetting a community school homepage</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS layout</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to CSS layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Floats?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Floats</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Positioning</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Flexbox</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Grids?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS grid layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Responsive design</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Media query fundamentals</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Fundamental layout comprehension</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Dynamic scripting with JavaScript</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is JavaScript?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">A first splash into JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What went wrong? Troubleshooting JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Variables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Storing the information you need — Variables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Math?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic math in JavaScript — numbers and operators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Strings?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling text — strings in JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Useful string methods</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Arrays?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Arrays</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Silly story generator</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Conditionals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Making decisions in your code — conditionals</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Loops?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Looping code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Functions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Functions — reusable blocks of code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Build your own function</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Return_values?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Function return values</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Events?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to events</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Event bubbling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Image gallery</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Object_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript object basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">DOM scripting introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Network_requests?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Making network requests with JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/JSON?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Working with JSON</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging JavaScript and handling errors</a></li> </ol> </details></li> <li class="toggle"> <details open> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript frameworks and libraries</a></summary> <ol> <li><em><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" aria-current="page">Introduction to client-side frameworks</a></em></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Framework main features</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with React</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Beginning our React todo list</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Componentizing our React app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React interactivity: Events and state</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React interactivity: Editing, filtering, conditional rendering</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility in React</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React resources</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is accessibility?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Tooling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility tooling and assistive technology</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML: A good basis for accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS and JavaScript accessibility best practices</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">WAI-ARIA basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessible multimedia</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Mobile accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Accessibility troubleshooting</a></li> </ol> </details></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Design_for_developers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Design for developers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Version_control?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Version control</a></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Extension modules</a></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced JavaScript objects</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object prototypes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object-oriented programming</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Classes in JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object building practice</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Adding features to our bouncing balls demo</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side web APIs</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to web APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Video and Audio APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Drawing graphics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side storage</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Third-party APIs</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Asynchronous JavaScript</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing asynchronous JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to use promises</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to implement a promise-based API</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing workers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Sequencing animations</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web forms</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Your first form</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to structure a web form</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic native form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The HTML5 input types</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Other form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling web forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced form styling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">UI pseudo-classes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side form validation</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sending form data</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Understanding client-side tools</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side tooling overview</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Package management basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing a complete toolchain</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Deploying our app</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side websites</a></summary> <ol> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side first steps</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to the server side</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-Server Overview</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side web frameworks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Website security</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django web framework (Python)</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up a Django development environment</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial: The Local Library website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 2: Creating a skeleton website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 3: Using models</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 4: Django admin site</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 5: Creating our home page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 6: Generic list and detail views</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 7: Sessions framework</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 8: User authentication and permissions</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 9: Working with forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 10: Testing a Django web application</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 11: Deploying Django to production</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django web application security</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Assessment: DIY Django mini blog</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express web framework (Node.js)</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express/Node introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up a Node development environment</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial: The Local Library website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 2: Creating a skeleton website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 4: Routes and controllers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 5: Displaying library data</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 6: Working with forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 7: Deploying to production</a></li> </ol> </details></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web performance</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The "why" of web performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is web performance?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Perceived performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Measuring performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia: Images</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/video?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia: video</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The business case for web performance</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Testing</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to cross-browser testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Strategies for carrying out testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling common HTML and CSS problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Implementing feature detection</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to automated testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up your own test automation environment</a></li> </ol> </details></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Transform_animate?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Transform and animate CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Security_privacy?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Security and privacy</a></li> <li class="section">Further resources</li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to solve common problems</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common HTML problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common CSS problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common JavaScript problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Web_mechanics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web mechanics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Tools_and_setup?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Tools and setup</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Design_and_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Design and accessibility</a></li> </ol> </details></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/About?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">About</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Educators?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Resources for educators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Changelog?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Changelog</a></li> </ol> </div> </div> <section class="place side"></section> </nav> </aside> <div class="toc-container"> <aside class="toc"> <nav> <div class="document-toc-container"> <section class="document-toc"> <header> <h2 class="document-toc-heading">In this article</h2> </header> <ul class="document-toc-list"> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_emergence_of_libraries_and_frameworks">The emergence of libraries and frameworks</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#what_frameworks_are_out_there">What frameworks are out there?</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#why_do_frameworks_exist">Why do frameworks exist?</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_verbosity_of_dom_changes">The verbosity of DOM changes</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#another_way_to_build_uis">Another way to build UIs</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#other_things_frameworks_give_us">Other things frameworks give us</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#things_to_consider_when_using_frameworks">Things to consider when using frameworks</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#accessibility_on_a_framework-driven_web">Accessibility on a framework-driven web</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#how_to_choose_a_framework">How to choose a framework</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#alternatives_to_client-side_frameworks">Alternatives to client-side frameworks</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></li> </ul> </section> </div> </nav> </aside> <section class="place side"></section> </div> </div> <main id="content" class="main-content "> <article class="main-page-content" lang="en-US"> <header> <h1>Introduction to client-side frameworks</h1> </header> <div class="section-content"> <ul class="prev-next"> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Overview: JavaScript frameworks and libraries</span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Next </span></a></li> </ul> <p>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</p> <figure class="table-container"> <table> <tbody> <tr> <th scope="row">Prerequisites:</th> <td>Familiarity with the core <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML</a>, <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS</a>, and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript</a> languages.</td> </tr> <tr> <th scope="row">Learning outcomes:</th> <td> <ul> <li>What third-party code is and how client-side JavaScript frameworks came to exist.</li> <li>What problems frameworks solve, what alternatives there are, and how to go about choosing one.</li> <li>The difference between libraries and frameworks.</li> <li>When frameworks should and shouldn't be used.</li> </ul></td> </tr> </tbody> </table> </figure> </div> <section aria-labelledby="the_emergence_of_libraries_and_frameworks"> <h2 id="the_emergence_of_libraries_and_frameworks"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_emergence_of_libraries_and_frameworks">The emergence of libraries and frameworks</a></h2> <div class="section-content"> <p>When JavaScript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. The web became not just a place to <em>read things</em>, but to <em>do things</em>. JavaScript's popularity steadily increased. Developers who worked with JavaScript wrote tools to solve the problems they faced, and packaged them into reusable packages called <strong>libraries</strong>, so they could share their solutions with others. This shared ecosystem of libraries helped shape the growth of the web, and eventually gave way to frameworks.</p> <p>A <strong>framework</strong> is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows the software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications.</p> <p>JavaScript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day.</p> </div> </section> <section aria-labelledby="what_frameworks_are_out_there"> <h2 id="what_frameworks_are_out_there"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#what_frameworks_are_out_there">What frameworks are out there?</a></h2> <div class="section-content"> <p>There are many frameworks out there, but currently the "big four" are considered to be the following.</p> </div> </section> <section aria-labelledby="ember"> <h3 id="ember"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#ember">Ember</a></h3> <div class="section-content"> <p><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://emberjs.com/" class="external" target="_blank">Ember</a> was initially released in December 2011 as a continuation of work that started in the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://en.wikipedia.org/wiki/SproutCore" class="external" target="_blank">SproutCore</a> project. It is an older framework that has fewer users than more modern alternatives such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.</p> </div> </section> <section aria-labelledby="angular"> <h3 id="angular"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#angular">Angular</a></h3> <div class="section-content"> <p><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://angular.dev/" class="external" target="_blank">Angular</a> is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://angularjs.org/" class="external" target="_blank">AngularJS</a>. Angular was officially released on the 14th of September 2016.</p> <p>Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.typescriptlang.org/" class="external" target="_blank">TypeScript</a>, a superset of JavaScript that we'll look at in a little more detail in the next chapter.</p> </div> </section> <section aria-labelledby="vue"> <h3 id="vue"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#vue">Vue</a></h3> <div class="section-content"> <p>After working on and learning from the original <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://angularjs.org/" class="external" target="_blank">AngularJS</a> project, Evan You released <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://vuejs.org/" class="external" target="_blank">Vue</a> in 2014. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.</p> <p>Vue, like <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://angularjs.org/" class="external" target="_blank">AngularJS</a>, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.</p> </div> </section> <section aria-labelledby="react"> <h3 id="react"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#react">React</a></h3> <div class="section-content"> <p>Facebook released <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://react.dev/" class="external" target="_blank">React</a> in 2013. By this point, it had already been using React to solve many of its problems internally. Technically, React itself is <em>not</em> a framework; it's a library for rendering UI components. React is used in combination with <em>other</em> libraries to make applications — React and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://reactnative.dev/" class="external" target="_blank">React Native</a> enable developers to make mobile applications; React and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://react.dev/reference/react-dom" class="external" target="_blank">ReactDOM</a> enable them to make web applications, etc.</p> <p>Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.</p> <p>React extends JavaScript with HTML-like syntax, known as <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://react.dev/learn/writing-markup-with-jsx" class="external" target="_blank">JSX</a>.</p> </div> </section> <section aria-labelledby="why_do_frameworks_exist"> <h2 id="why_do_frameworks_exist"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#why_do_frameworks_exist">Why do frameworks exist?</a></h2> <div class="section-content"> <p>We've discussed the environment that inspired the creation of frameworks, but not really <em>why</em> developers felt the need to make them. Exploring the why requires first examining the challenges of software development.</p> <p>Consider a common kind of application: A to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. This application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. In software development, this underlying data is known as state.</p> <p>Each of our goals is theoretically simple in isolation. We can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. When we remember that the application has to let the user do <em>all</em> of these things through the browser, some cracks start to show. <strong>The real problem is this: every time we change our application's state, we need to update the UI to match.</strong></p> <p>We can examine the difficulty of this problem by looking at just <em>one</em> feature of our to-do list app: rendering a list of tasks.</p> </div> </section> <section aria-labelledby="the_verbosity_of_dom_changes"> <h2 id="the_verbosity_of_dom_changes"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_verbosity_of_dom_changes">The verbosity of DOM changes</a></h2> <div class="section-content"> <p>Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>const state = [ { id: "todo-0", name: "Learn some frameworks!", }, ]; </code></pre> </div> <p>How do we show one of those tasks to our users? We want to represent each task as a list item – an HTML <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/li?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><li></code></a> element inside of an unordered list element (a <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/ul?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><ul></code></a>). How do we make it? That could look something like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>function buildTodoItemEl(id, name) { const item = document.createElement("li"); const span = document.createElement("span"); span.textContent = name; item.id = id; item.appendChild(span); item.appendChild(buildDeleteButtonEl(id)); return item; } </code></pre> </div> <p>Here, we use the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/createElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>document.createElement()</code></a> method to make our <code><li></code>, and several more lines of code to create the properties and child elements it needs.</p> <p>The previous snippet references another build function: <code>buildDeleteButtonEl()</code>. It follows a similar pattern to the one we used to build a list item element:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>function buildDeleteButtonEl(id) { const button = document.createElement("button"); button.setAttribute("type", "button"); button.textContent = "Delete"; return button; } </code></pre> </div> <p>This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>function renderTodoList() { const frag = document.createDocumentFragment(); state.tasks.forEach((task) => { const item = buildTodoItemEl(task.id, task.name); frag.appendChild(item); }); while (todoListEl.firstChild) { todoListEl.removeChild(todoListEl.firstChild); } todoListEl.appendChild(frag); } </code></pre> </div> <p>We've now got almost thirty lines of code dedicated <em>just</em> to the UI – <em>just</em> to render something in the DOM – and at no point do we add classes that we could use later to style our list-items!</p> <p>Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI at the right time and in the right way.</p> <p>JavaScript frameworks were created to make this kind of work a lot easier — they exist to provide a better <em>developer experience</em>. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.</p> <p>If you want to see code samples from this section in action, you can check out a <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://codepen.io/mxmason/pen/XWbPNmw" class="external" target="_blank">working version of the app on CodePen</a>, which also allows users to add and delete new tasks.</p> <p>Read more about the JavaScript features used in this section:</p> <ul> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Array.forEach()</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/createDocumentFragment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.createDocumentFragment()</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/createElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.createElement()</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Element/setAttribute?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Element.setAttribute()</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/appendChild?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.appendChild()</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/removeChild?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.removeChild()</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/textContent?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.textContent</code></a></li> </ul> </div> </section> <section aria-labelledby="another_way_to_build_uis"> <h2 id="another_way_to_build_uis"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#another_way_to_build_uis">Another way to build UIs</a></h2> <div class="section-content"> <p>Every JavaScript framework offers a way to write user interfaces more <em>declaratively</em>. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.</p> <p>The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance. By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>{{task.name}}</span> <button type="button">Delete</button> </li> </ul> </code></pre> </div> <p>That's it. This snippet reduces almost thirty lines of code down to six lines. If the curly braces and <code>v-</code> attributes here are unfamiliar to you, that's okay; you'll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.</p> <p>Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can quickly work out what is going on when they join our project. Vue is not alone in this: using a framework improves team as well as individual efficiency.</p> <p>It's possible to do things <em>similar</em> to this in vanilla JavaScript. <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript/Reference/Template_literals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Template literal strings</a> make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.</p> </div> </section> <section aria-labelledby="other_things_frameworks_give_us"> <h2 id="other_things_frameworks_give_us"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#other_things_frameworks_give_us">Other things frameworks give us</a></h2> <div class="section-content"> <p>Let's look at some of the other advantages offered by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.</p> </div> </section> <section aria-labelledby="tooling"> <h3 id="tooling"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#tooling">Tooling</a></h3> <div class="section-content"> <p>Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).</p> <div class="notecard note"> <p><strong>Note:</strong> If you want to find out more details about web tooling concepts, check out our <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side tooling overview</a>.</p> </div> </div> </section> <section aria-labelledby="compartmentalization"> <h3 id="compartmentalization"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#compartmentalization">Compartmentalization</a></h3> <div class="section-content"> <p>Most major frameworks encourage developers to abstract the different parts of their user interfaces into <em>components</em> — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files) so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.</p> </div> </section> <section aria-labelledby="routing"> <h3 id="routing"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#routing">Routing</a></h3> <div class="section-content"> <p>The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called <strong>server-side routing</strong>.</p> <p>Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as <strong>single page apps</strong>, or <strong>SPAs</strong>) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a <em>view</em>, and by default, no routing is done.</p> <p>When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called <strong>client-side routing</strong>.</p> <p>It's <em>possible</em> to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.</p> </div> </section> <section aria-labelledby="things_to_consider_when_using_frameworks"> <h2 id="things_to_consider_when_using_frameworks"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#things_to_consider_when_using_frameworks">Things to consider when using frameworks</a></h2> <div class="section-content"> <p>Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.</p> </div> </section> <section aria-labelledby="familiarity_with_the_tool"> <h3 id="familiarity_with_the_tool"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#familiarity_with_the_tool">Familiarity with the tool</a></h3> <div class="section-content"> <p>Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.</p> </div> </section> <section aria-labelledby="overengineering"> <h3 id="overengineering"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#overengineering">Overengineering</a></h3> <div class="section-content"> <p>If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not monolithic, and some of them are better suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/" class="external" target="_blank">Vue can replace jQuery</a> as a tool for making small portions of a webpage interactive.</p> </div> </section> <section aria-labelledby="larger_code_base_and_abstraction"> <h3 id="larger_code_base_and_abstraction"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#larger_code_base_and_abstraction">Larger code base and abstraction</a></h3> <div class="section-content"> <p>Frameworks allow you to write more declarative code – and sometimes <em>less</em> code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.</p> <p>Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.</p> <p>The abstraction of frameworks affects not only your JavaScript, but also your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.</p> <p>Frameworks are not the source of our problems. With the wrong priorities, any application can be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.</p> </div> </section> <section aria-labelledby="accessibility_on_a_framework-driven_web"> <h2 id="accessibility_on_a_framework-driven_web"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#accessibility_on_a_framework-driven_web">Accessibility on a framework-driven web</a></h2> <div class="section-content"> <p>Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">live regions</a> or focus management.</p> <p>In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.</p> <p>With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.</p> <p>With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.</p> <p>The upshot is that you should consider accessibility from the very start of <em>every</em> web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.</p> </div> </section> <section aria-labelledby="how_to_choose_a_framework"> <h2 id="how_to_choose_a_framework"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#how_to_choose_a_framework">How to choose a framework</a></h2> <div class="section-content"> <p>Each of the frameworks discussed in this module takes different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:</p> <ol> <li>What browsers does the framework support?</li> <li>What domain-specific languages does the framework utilize?</li> <li>Does the framework have a strong community and good docs (and other support) available?</li> </ol> <p>The table in this section provides a glanceable summary of the current <em>browser support</em> offered by each framework, as well as the <strong>domain-specific languages</strong> with which it can be used.</p> <p>Broadly, <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Glossary/DSL/Domain_specific_language?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">domain-specific languages (DSLs)</a> are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks <em>require</em> a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework's preferred DSL will mean you miss out on features that would otherwise improve your developer experience.</p> <p>You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.</p> <figure class="table-container"> <table> <thead> <tr> <th>Framework</th> <th>Browser support</th> <th>Preferred DSL</th> <th>Supported DSLs</th> <th>Citation</th> </tr> </thead> <tbody> <tr> <td>Angular</td> <td>Modern</td> <td>TypeScript</td> <td>HTML-based; TypeScript</td> <td><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://angular.dev/guide/browser-support" class="external" target="_blank">official docs</a></td> </tr> <tr> <td>React</td> <td>Modern</td> <td>JSX</td> <td>JSX; TypeScript</td> <td><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://react.dev/reference/react-dom/client%23browser-support" class="external" target="_blank">official docs</a></td> </tr> <tr> <td>Vue</td> <td>Modern (IE9+ in Vue 2)</td> <td>HTML-based</td> <td>HTML-based, JSX, Pug</td> <td><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://cli.vuejs.org/guide/browser-compatibility.html" class="external" target="_blank">official docs</a></td> </tr> <tr> <td>Ember</td> <td>Modern (IE9+ in Ember version 2.18)</td> <td>Handlebars</td> <td>Handlebars, TypeScript</td> <td><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/" class="external" target="_blank">official docs</a></td> </tr> </tbody> </table> </figure> <div class="notecard note"> <p><strong>Note:</strong> DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.</p> </div> </div> </section> <section aria-labelledby="does_the_framework_have_a_strong_community"> <h3 id="does_the_framework_have_a_strong_community"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#does_the_framework_have_a_strong_community">Does the framework have a strong community?</a></h3> <div class="section-content"> <p>This is perhaps the hardest metric to measure because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good the available documentation is.</p> </div> </section> <section aria-labelledby="opinions_on_the_web"> <h3 id="opinions_on_the_web"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#opinions_on_the_web">Opinions on the web</a></h3> <div class="section-content"> <p>Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://phabricator.wikimedia.org/T241180" class="external" target="_blank">request for comments (RFC) on framework adoption</a>. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.</p> <p>The <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://stateofjs.com/" class="external" target="_blank">State of JavaScript survey</a> is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.</p> <p>The Vue team has <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://v2.vuejs.org/v2/guide/comparison.html" class="external" target="_blank">exhaustively compared Vue to other popular frameworks</a>. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.</p> </div> </section> <section aria-labelledby="alternatives_to_client-side_frameworks"> <h2 id="alternatives_to_client-side_frameworks"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#alternatives_to_client-side_frameworks">Alternatives to client-side frameworks</a></h2> <div class="section-content"> <p>If you're looking for tools to expedite the web development process, and you know your project isn't going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:</p> <ul> <li>A content management system</li> <li>Server-side rendering</li> <li>A static site generator</li> </ul> </div> </section> <section aria-labelledby="content_management_systems"> <h3 id="content_management_systems"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#content_management_systems">Content management systems</a></h3> <div class="section-content"> <p><strong>Content-management systems</strong> (<strong>CMSes</strong>) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.</p> <p>A few popular CMS systems include <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://wordpress.com/" class="external" target="_blank">WordPress</a>, <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.joomla.org/" class="external" target="_blank">Joomla</a>, and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.drupal.org/" class="external" target="_blank">Drupal</a>.</p> </div> </section> <section aria-labelledby="server-side_rendering"> <h3 id="server-side_rendering"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#server-side_rendering">Server-side rendering</a></h3> <div class="section-content"> <p><strong>Server-side rendering</strong> (<strong>SSR</strong>) is an application architecture in which it is the <em>server</em>'s job to render a single-page application. This is the opposite of <em>client-side rendering</em>, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.</p> <p>All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://nextjs.org/" class="external" target="_blank">Next.js</a> for React, <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://nuxt.com/" class="external" target="_blank">Nuxt</a> for Vue (yes, it is confusing, and no, these projects are not related!), <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/ember-fastboot/ember-cli-fastboot" class="external" target="_blank">FastBoot</a> for Ember, and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://angular.dev/guide/universal" class="external" target="_blank">Angular Universal</a> for Angular.</p> <div class="notecard note"> <p><strong>Note:</strong> Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.</p> </div> </div> </section> <section aria-labelledby="static_site_generators"> <h3 id="static_site_generators"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#static_site_generators">Static site generators</a></h3> <div class="section-content"> <p><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Glossary/SSG?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Static site generators</a> are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn't building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not <em>dependent</em> upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.</p> <p>Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called <strong>templates</strong>. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.</p> <p>Static site generators have been around for quite a long time, and they are under constant optimization and innovation. A range of choices exist, including <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://astro.build/" class="external" target="_blank">Astro</a>, <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.11ty.dev/" class="external" target="_blank">Eleventy</a>, <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://gohugo.io/" class="external" target="_blank">Hugo</a>, <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://jekyllrb.com/" class="external" target="_blank">Jekyll</a>, and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.gatsbyjs.com/" class="external" target="_blank">Gatsby</a>, which build on various technology stacks and provide distinctive features. Other options, such as <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://docusaurus.io/" class="external" target="_blank">Docusaurus</a> and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://vitepress.dev/" class="external" target="_blank">VitePress</a>, use client-side frameworks instead of templates, but generate similarly optimized static files.</p> <p>If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti/" class="external" target="_blank">Beginner's guide to Eleventy</a>. In the first article of the series, they explain what a static site generator is, and how it relates to other means of publishing web content.</p> </div> </section> <section aria-labelledby="summary"> <h2 id="summary"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></h2> <div class="section-content"> <p>And that brings us to the end of our introduction to frameworks — we've not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!</p> <p>Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work as they do.</p> <ul class="prev-next"> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Overview: JavaScript frameworks and libraries</span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Next </span></a></li> </ul> </div> </section> </article> <aside class="article-footer"> <div class="article-footer-inner"> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewbox="0 0 162 162" fill="none" role="none"> <mask id="b" fill="#fff"> <path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path> </mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"> <path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path> </g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"> <path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path> </g><defs> <clippath id="c"> <path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path> </clippath> <clippath id="d"> <path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path> </clippath> <lineargradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientunits="userSpaceOnUse"> <stop stop-color="#086DFC"></stop> <stop offset="0.246" stop-color="#2C81FA"></stop> <stop offset="0.516" stop-color="#5497F8"></stop> <stop offset="0.821" stop-color="#80B0F6"></stop> <stop offset="1" stop-color="#9ABFF5"></stop> </lineargradient> </defs> </svg> </div> <h2>Help improve MDN</h2> <fieldset class="feedback"> <label>Was this page helpful to you?</label> <div class="button-container"> <button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button> </div> </fieldset><a class="contribute" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>. <p class="last-modified-date">This page was last modified on <time datetime="2025-03-06T10:57:29.000Z">Mar 6, 2025</time> by <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction/contributors.txt?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" rel="nofollow">MDN contributors</a>.</p> <div id="on-github" class="on-github"> <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md?plain%3D1" title="Folder: en-us/learn_web_development/core/frameworks_libraries/introduction (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/issues/new?template%3Dpage-report.yml%26mdn-url%3Dhttps%253A%252F%252Fdeveloper.mozilla.org%252Fen-US%252Fdocs%252FLearn_web_development%252FCore%252FFrameworks_libraries%252FIntroduction%26metadata%3D%253C%2521--%2BDo%2Bnot%2Bmake%2Bchanges%2Bbelow%2Bthis%2Bline%2B--%253E%250A%253Cdetails%253E%250A%253Csummary%253EPage%2Breport%2Bdetails%253C%252Fsummary%253E%250A%250A*%2BFolder%253A%2B%2560en-us%252Flearn_web_development%252Fcore%252Fframeworks_libraries%252Fintroduction%2560%250A*%2BMDN%2BURL%253A%2Bhttps%253A%252F%252Fdeveloper.mozilla.org%252Fen-US%252Fdocs%252FLearn_web_development%252FCore%252FFrameworks_libraries%252FIntroduction%250A*%2BGitHub%2BURL%253A%2Bhttps%253A%252F%252Fgithub.com%252Fmdn%252Fcontent%252Fblob%252Fmain%252Ffiles%252Fen-us%252Flearn_web_development%252Fcore%252Fframeworks_libraries%252Fintroduction%252Findex.md%250A*%2BLast%2Bcommit%253A%2Bhttps%253A%252F%252Fgithub.com%252Fmdn%252Fcontent%252Fcommit%252Ff65f7f6e4fda2cb1bd0e7db17777e2cb20be7d27%250A*%2BDocument%2Blast%2Bmodified%253A%2B2025-03-06T10%253A57%253A29.000Z%250A%250A%253C%252Fdetails%253E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a> </div> </div> </aside> </main> </div> </div> <footer id="nav-footer" class="page-footer"> <div class="page-footer-grid"> <div class="page-footer-logo-col"> <a href="https://developer-mozilla-org.translate.goog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="mdn-footer-logo" aria-label="MDN homepage"> <svg width="48" height="17" viewbox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path> </svg></a> <p>Your blueprint for a better internet.</p> <ul class="social-icons"> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://bsky.app/profile/developer.mozilla.org" target="_blank" rel="me noopener noreferrer"><span class="icon icon-bluesky"></span><span class="visually-hidden">MDN on Bluesky</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/blog/rss.xml?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li> </ul> </div> <div class="page-footer-nav-col-1"> <h2 class="footer-nav-heading">MDN</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/about?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">About</a></li> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/blog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Blog</a></li> <li class="footer-nav-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/en-US/careers/listings/?team%3DProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/advertising?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advertise with us</a></li> </ul> </div> <div class="page-footer-nav-col-2"> <h2 class="footer-nav-heading">Support</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://support.mozilla.org/products/mdn-plus">Product help</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/MDN/Community/Issues?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Report an issue</a></li> </ul> </div> <div class="page-footer-nav-col-3"> <h2 class="footer-nav-heading">Our communities</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/community?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MDN Community</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/discord?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank" rel="noopener noreferrer">MDN Chat</a></li> </ul> </div> <div class="page-footer-nav-col-4"> <h2 class="footer-nav-heading">Developers</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web Technologies</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Learn Web Development</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MDN Plus</a></li> <li class="footer-nav-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li> </ul> </div> <div class="page-footer-moz"> <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewbox="0 0 267.431 62.607"> <path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path> </svg></a> <ul class="footer-moz-list"> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/privacy/websites/%23cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li> </ul> </div> <div class="page-footer-legal"> <p id="license" class="page-footer-legal-text">Visit <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://foundation.mozilla.org/">Mozilla Foundation</a>.<br> Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="https://developer-mozilla-org.translate.goog/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">a Creative Commons license</a>.</p> </div> </div> </footer> </div> <script type="application/json" id="hydration">{"url":"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries\"><span class=\"button-wrap\"> Overview: JavaScript frameworks and libraries</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\"><span class=\"button-wrap\"> Next </span></a></li></ul>\n<p>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Prerequisites:</th>\n <td>\n Familiarity with the core <a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">HTML</a>,\n <a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">CSS</a>, and\n <a href=\"/en-US/docs/Learn_web_development/Core/Scripting\">JavaScript</a> languages.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Learning outcomes:</th>\n <td>\n <ul>\n <li>What third-party code is and how client-side JavaScript frameworks came to exist.</li>\n <li>What problems frameworks solve, what alternatives there are, and how to go about choosing one.</li>\n <li>The difference between libraries and frameworks.</li>\n <li>When frameworks should and shouldn't be used.</li>\n </ul>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"the_emergence_of_libraries_and_frameworks","title":"The emergence of libraries and frameworks","isH3":false,"content":"<p>When JavaScript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. The web became not just a place to <em>read things</em>, but to <em>do things</em>. JavaScript's popularity steadily increased. Developers who worked with JavaScript wrote tools to solve the problems they faced, and packaged them into reusable packages called <strong>libraries</strong>, so they could share their solutions with others. This shared ecosystem of libraries helped shape the growth of the web, and eventually gave way to frameworks.</p>\n<p>A <strong>framework</strong> is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows the software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications.</p>\n<p>JavaScript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day.</p>"}},{"type":"prose","value":{"id":"what_frameworks_are_out_there","title":"What frameworks are out there?","isH3":false,"content":"<p>There are many frameworks out there, but currently the \"big four\" are considered to be the following.</p>"}},{"type":"prose","value":{"id":"ember","title":"Ember","isH3":true,"content":"<p><a href=\"https://emberjs.com/\" class=\"external\" target=\"_blank\">Ember</a> was initially released in December 2011 as a continuation of work that started in the <a href=\"https://en.wikipedia.org/wiki/SproutCore\" class=\"external\" target=\"_blank\">SproutCore</a> project. It is an older framework that has fewer users than more modern alternatives such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.</p>"}},{"type":"prose","value":{"id":"angular","title":"Angular","isH3":true,"content":"<p><a href=\"https://angular.dev/\" class=\"external\" target=\"_blank\">Angular</a> is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built <a href=\"https://angularjs.org/\" class=\"external\" target=\"_blank\">AngularJS</a>. Angular was officially released on the 14th of September 2016.</p>\n<p>Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses <a href=\"https://www.typescriptlang.org/\" class=\"external\" target=\"_blank\">TypeScript</a>, a superset of JavaScript that we'll look at in a little more detail in the next chapter.</p>"}},{"type":"prose","value":{"id":"vue","title":"Vue","isH3":true,"content":"<p>After working on and learning from the original <a href=\"https://angularjs.org/\" class=\"external\" target=\"_blank\">AngularJS</a> project, Evan You released <a href=\"https://vuejs.org/\" class=\"external\" target=\"_blank\">Vue</a> in 2014. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.</p>\n<p>Vue, like <a href=\"https://angularjs.org/\" class=\"external\" target=\"_blank\">AngularJS</a>, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.</p>"}},{"type":"prose","value":{"id":"react","title":"React","isH3":true,"content":"<p>Facebook released <a href=\"https://react.dev/\" class=\"external\" target=\"_blank\">React</a> in 2013. By this point, it had already been using React to solve many of its problems internally. Technically, React itself is <em>not</em> a framework; it's a library for rendering UI components. React is used in combination with <em>other</em> libraries to make applications — React and <a href=\"https://reactnative.dev/\" class=\"external\" target=\"_blank\">React Native</a> enable developers to make mobile applications; React and <a href=\"https://react.dev/reference/react-dom\" class=\"external\" target=\"_blank\">ReactDOM</a> enable them to make web applications, etc.</p>\n<p>Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.</p>\n<p>React extends JavaScript with HTML-like syntax, known as <a href=\"https://react.dev/learn/writing-markup-with-jsx\" class=\"external\" target=\"_blank\">JSX</a>.</p>"}},{"type":"prose","value":{"id":"why_do_frameworks_exist","title":"Why do frameworks exist?","isH3":false,"content":"<p>We've discussed the environment that inspired the creation of frameworks, but not really <em>why</em> developers felt the need to make them. Exploring the why requires first examining the challenges of software development.</p>\n<p>Consider a common kind of application: A to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. This application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. In software development, this underlying data is known as state.</p>\n<p>Each of our goals is theoretically simple in isolation. We can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. When we remember that the application has to let the user do <em>all</em> of these things through the browser, some cracks start to show. <strong>The real problem is this: every time we change our application's state, we need to update the UI to match.</strong></p>\n<p>We can examine the difficulty of this problem by looking at just <em>one</em> feature of our to-do list app: rendering a list of tasks.</p>"}},{"type":"prose","value":{"id":"the_verbosity_of_dom_changes","title":"The verbosity of DOM changes","isH3":false,"content":"<p>Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const state = [\n {\n id: \"todo-0\",\n name: \"Learn some frameworks!\",\n },\n];\n</code></pre></div>\n<p>How do we show one of those tasks to our users? We want to represent each task as a list item – an HTML <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> element inside of an unordered list element (a <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>). How do we make it? That could look something like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function buildTodoItemEl(id, name) {\n const item = document.createElement(\"li\");\n const span = document.createElement(\"span\");\n\n span.textContent = name;\n\n item.id = id;\n item.appendChild(span);\n item.appendChild(buildDeleteButtonEl(id));\n\n return item;\n}\n</code></pre></div>\n<p>Here, we use the <a href=\"/en-US/docs/Web/API/Document/createElement\"><code>document.createElement()</code></a> method to make our <code><li></code>, and several more lines of code to create the properties and child elements it needs.</p>\n<p>The previous snippet references another build function: <code>buildDeleteButtonEl()</code>. It follows a similar pattern to the one we used to build a list item element:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function buildDeleteButtonEl(id) {\n const button = document.createElement(\"button\");\n button.setAttribute(\"type\", \"button\");\n button.textContent = \"Delete\";\n\n return button;\n}\n</code></pre></div>\n<p>This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function renderTodoList() {\n const frag = document.createDocumentFragment();\n state.tasks.forEach((task) => {\n const item = buildTodoItemEl(task.id, task.name);\n frag.appendChild(item);\n });\n\n while (todoListEl.firstChild) {\n todoListEl.removeChild(todoListEl.firstChild);\n }\n todoListEl.appendChild(frag);\n}\n</code></pre></div>\n<p>We've now got almost thirty lines of code dedicated <em>just</em> to the UI – <em>just</em> to render something in the DOM – and at no point do we add classes that we could use later to style our list-items!</p>\n<p>Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI at the right time and in the right way.</p>\n<p>JavaScript frameworks were created to make this kind of work a lot easier — they exist to provide a better <em>developer experience</em>. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.</p>\n<p>If you want to see code samples from this section in action, you can check out a <a href=\"https://codepen.io/mxmason/pen/XWbPNmw\" class=\"external\" target=\"_blank\">working version of the app on CodePen</a>, which also allows users to add and delete new tasks.</p>\n<p>Read more about the JavaScript features used in this section:</p>\n<ul>\n<li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\"><code>Array.forEach()</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Document/createDocumentFragment\"><code>Document.createDocumentFragment()</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Document/createElement\"><code>Document.createElement()</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Element/setAttribute\"><code>Element.setAttribute()</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Node/appendChild\"><code>Node.appendChild()</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Node/removeChild\"><code>Node.removeChild()</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Node/textContent\"><code>Node.textContent</code></a></li>\n</ul>"}},{"type":"prose","value":{"id":"another_way_to_build_uis","title":"Another way to build UIs","isH3":false,"content":"<p>Every JavaScript framework offers a way to write user interfaces more <em>declaratively</em>. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.</p>\n<p>The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance. By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><ul>\n <li v-for=\"task in tasks\" v-bind:key=\"task.id\">\n <span>{{task.name}}</span>\n <button type=\"button\">Delete</button>\n </li>\n</ul>\n</code></pre></div>\n<p>That's it. This snippet reduces almost thirty lines of code down to six lines. If the curly braces and <code>v-</code> attributes here are unfamiliar to you, that's okay; you'll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.</p>\n<p>Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can quickly work out what is going on when they join our project. Vue is not alone in this: using a framework improves team as well as individual efficiency.</p>\n<p>It's possible to do things <em>similar</em> to this in vanilla JavaScript. <a href=\"/en-US/docs/Web/JavaScript/Reference/Template_literals\">Template literal strings</a> make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.</p>"}},{"type":"prose","value":{"id":"other_things_frameworks_give_us","title":"Other things frameworks give us","isH3":false,"content":"<p>Let's look at some of the other advantages offered by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.</p>"}},{"type":"prose","value":{"id":"tooling","title":"Tooling","isH3":true,"content":"<p>Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nIf you want to find out more details about web tooling concepts, check out our <a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Client-side tooling overview</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"compartmentalization","title":"Compartmentalization","isH3":true,"content":"<p>Most major frameworks encourage developers to abstract the different parts of their user interfaces into <em>components</em> — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files) so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.</p>"}},{"type":"prose","value":{"id":"routing","title":"Routing","isH3":true,"content":"<p>The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called <strong>server-side routing</strong>.</p>\n<p>Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as <strong>single page apps</strong>, or <strong>SPAs</strong>) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a <em>view</em>, and by default, no routing is done.</p>\n<p>When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called <strong>client-side routing</strong>.</p>\n<p>It's <em>possible</em> to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.</p>"}},{"type":"prose","value":{"id":"things_to_consider_when_using_frameworks","title":"Things to consider when using frameworks","isH3":false,"content":"<p>Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.</p>"}},{"type":"prose","value":{"id":"familiarity_with_the_tool","title":"Familiarity with the tool","isH3":true,"content":"<p>Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.</p>"}},{"type":"prose","value":{"id":"overengineering","title":"Overengineering","isH3":true,"content":"<p>If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not monolithic, and some of them are better suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how <a href=\"https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/\" class=\"external\" target=\"_blank\">Vue can replace jQuery</a> as a tool for making small portions of a webpage interactive.</p>"}},{"type":"prose","value":{"id":"larger_code_base_and_abstraction","title":"Larger code base and abstraction","isH3":true,"content":"<p>Frameworks allow you to write more declarative code – and sometimes <em>less</em> code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.</p>\n<p>Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.</p>\n<p>The abstraction of frameworks affects not only your JavaScript, but also your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.</p>\n<p>Frameworks are not the source of our problems. With the wrong priorities, any application can be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.</p>"}},{"type":"prose","value":{"id":"accessibility_on_a_framework-driven_web","title":"Accessibility on a framework-driven web","isH3":false,"content":"<p>Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA <a href=\"/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions\">live regions</a> or focus management.</p>\n<p>In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.</p>\n<p>With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.</p>\n<p>With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.</p>\n<p>The upshot is that you should consider accessibility from the very start of <em>every</em> web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.</p>"}},{"type":"prose","value":{"id":"how_to_choose_a_framework","title":"How to choose a framework","isH3":false,"content":"<p>Each of the frameworks discussed in this module takes different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:</p>\n<ol>\n<li>What browsers does the framework support?</li>\n<li>What domain-specific languages does the framework utilize?</li>\n<li>Does the framework have a strong community and good docs (and other support) available?</li>\n</ol>\n<p>The table in this section provides a glanceable summary of the current <em>browser support</em> offered by each framework, as well as the <strong>domain-specific languages</strong> with which it can be used.</p>\n<p>Broadly, <a href=\"/en-US/docs/Glossary/DSL/Domain_specific_language\">domain-specific languages (DSLs)</a> are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks <em>require</em> a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework's preferred DSL will mean you miss out on features that would otherwise improve your developer experience.</p>\n<p>You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.</p>\n<figure class=\"table-container\"><table>\n<thead>\n<tr>\n<th>Framework</th>\n<th>Browser support</th>\n<th>Preferred DSL</th>\n<th>Supported DSLs</th>\n<th>Citation</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Angular</td>\n<td>Modern</td>\n<td>TypeScript</td>\n<td>HTML-based; TypeScript</td>\n<td><a href=\"https://angular.dev/guide/browser-support\" class=\"external\" target=\"_blank\">official docs</a></td>\n</tr>\n<tr>\n<td>React</td>\n<td>Modern</td>\n<td>JSX</td>\n<td>JSX; TypeScript</td>\n<td><a href=\"https://react.dev/reference/react-dom/client#browser-support\" class=\"external\" target=\"_blank\">official docs</a></td>\n</tr>\n<tr>\n<td>Vue</td>\n<td>Modern (IE9+ in Vue 2)</td>\n<td>HTML-based</td>\n<td>HTML-based, JSX, Pug</td>\n<td><a href=\"https://cli.vuejs.org/guide/browser-compatibility.html\" class=\"external\" target=\"_blank\">official docs</a></td>\n</tr>\n<tr>\n<td>Ember</td>\n<td>Modern (IE9+ in Ember version 2.18)</td>\n<td>Handlebars</td>\n<td>Handlebars, TypeScript</td>\n<td><a href=\"https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/\" class=\"external\" target=\"_blank\">official docs</a></td>\n</tr>\n</tbody>\n</table></figure>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nDSLs we've described as \"HTML-based\" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.</p>\n</div>"}},{"type":"prose","value":{"id":"does_the_framework_have_a_strong_community","title":"Does the framework have a strong community?","isH3":true,"content":"<p>This is perhaps the hardest metric to measure because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good the available documentation is.</p>"}},{"type":"prose","value":{"id":"opinions_on_the_web","title":"Opinions on the web","isH3":true,"content":"<p>Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a <a href=\"https://phabricator.wikimedia.org/T241180\" class=\"external\" target=\"_blank\">request for comments (RFC) on framework adoption</a>. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.</p>\n<p>The <a href=\"https://stateofjs.com/\" class=\"external\" target=\"_blank\">State of JavaScript survey</a> is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.</p>\n<p>The Vue team has <a href=\"https://v2.vuejs.org/v2/guide/comparison.html\" class=\"external\" target=\"_blank\">exhaustively compared Vue to other popular frameworks</a>. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.</p>"}},{"type":"prose","value":{"id":"alternatives_to_client-side_frameworks","title":"Alternatives to client-side frameworks","isH3":false,"content":"<p>If you're looking for tools to expedite the web development process, and you know your project isn't going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:</p>\n<ul>\n<li>A content management system</li>\n<li>Server-side rendering</li>\n<li>A static site generator</li>\n</ul>"}},{"type":"prose","value":{"id":"content_management_systems","title":"Content management systems","isH3":true,"content":"<p><strong>Content-management systems</strong> (<strong>CMSes</strong>) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.</p>\n<p>A few popular CMS systems include <a href=\"https://wordpress.com/\" class=\"external\" target=\"_blank\">WordPress</a>, <a href=\"https://www.joomla.org/\" class=\"external\" target=\"_blank\">Joomla</a>, and <a href=\"https://www.drupal.org/\" class=\"external\" target=\"_blank\">Drupal</a>.</p>"}},{"type":"prose","value":{"id":"server-side_rendering","title":"Server-side rendering","isH3":true,"content":"<p><strong>Server-side rendering</strong> (<strong>SSR</strong>) is an application architecture in which it is the <em>server</em>'s job to render a single-page application. This is the opposite of <em>client-side rendering</em>, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.</p>\n<p>All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out <a href=\"https://nextjs.org/\" class=\"external\" target=\"_blank\">Next.js</a> for React, <a href=\"https://nuxt.com/\" class=\"external\" target=\"_blank\">Nuxt</a> for Vue (yes, it is confusing, and no, these projects are not related!), <a href=\"https://github.com/ember-fastboot/ember-cli-fastboot\" class=\"external\" target=\"_blank\">FastBoot</a> for Ember, and <a href=\"https://angular.dev/guide/universal\" class=\"external\" target=\"_blank\">Angular Universal</a> for Angular.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nSome SSR solutions are written and maintained by the community, whereas some are \"official\" solutions provided by the framework's maintainer.</p>\n</div>"}},{"type":"prose","value":{"id":"static_site_generators","title":"Static site generators","isH3":true,"content":"<p><a href=\"/en-US/docs/Glossary/SSG\">Static site generators</a> are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn't building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not <em>dependent</em> upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.</p>\n<p>Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called <strong>templates</strong>. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.</p>\n<p>Static site generators have been around for quite a long time, and they are under constant optimization and innovation. A range of choices exist, including <a href=\"https://astro.build/\" class=\"external\" target=\"_blank\">Astro</a>, <a href=\"https://www.11ty.dev/\" class=\"external\" target=\"_blank\">Eleventy</a>, <a href=\"https://gohugo.io/\" class=\"external\" target=\"_blank\">Hugo</a>, <a href=\"https://jekyllrb.com/\" class=\"external\" target=\"_blank\">Jekyll</a>, and <a href=\"https://www.gatsbyjs.com/\" class=\"external\" target=\"_blank\">Gatsby</a>, which build on various technology stacks and provide distinctive features. Other options, such as <a href=\"https://docusaurus.io/\" class=\"external\" target=\"_blank\">Docusaurus</a> and <a href=\"https://vitepress.dev/\" class=\"external\" target=\"_blank\">VitePress</a>, use client-side frameworks instead of templates, but generate similarly optimized static files.</p>\n<p>If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's <a href=\"https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti/\" class=\"external\" target=\"_blank\">Beginner's guide to Eleventy</a>. In the first article of the series, they explain what a static site generator is, and how it relates to other means of publishing web content.</p>"}},{"type":"prose","value":{"id":"summary","title":"Summary","isH3":false,"content":"<p>And that brings us to the end of our introduction to frameworks — we've not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!</p>\n<p>Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work as they do.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries\"><span class=\"button-wrap\"> Overview: JavaScript frameworks and libraries</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\"><span class=\"button-wrap\"> Next </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction","modified":"2025-03-06T10:57:29.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"Einführung in client-seitige Frameworks","native":"Deutsch"},{"locale":"ja","title":"クライアントサイドフレームワークの概要","native":"日本語"},{"locale":"ko","title":"클라이언트 측 프레임워크 소개","native":"한국어"},{"locale":"zh-CN","title":"客户端框架介绍","native":"中文 (简体)"},{"locale":"zh-TW","title":"前端框架簡介","native":"正體中文 (繁體)"}],"pageTitle":"Introduction to client-side frameworks - Learn web development | MDN","parents":[{"uri":"/en-US/docs/Learn_web_development","title":"Learn"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/en-US/docs/Learn_web_development/Core/Frameworks_libraries","title":"JavaScript frameworks and libraries"},{"uri":"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction","title":"Introduction to client-side frameworks"}],"popularity":null,"short_title":"Introduction to client-side frameworks","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installing basic software</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Browsing the web</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code editors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Dealing with files</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Command line crash course</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">What will your website look like?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Creating the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Styling the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Adding interactivity</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Publishing your website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">The web standards model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Basic HTML syntax</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">What's in the head? Webpage metadata</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Headings and paragraphs in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Emphasis and importance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\">Lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Structuring documents</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Advanced text features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Creating links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Challenge: Marking up a letter</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Challenge: Structuring a page of content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video and audio</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Challenge: Mozilla splash page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML table basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML table accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Challenge: Structuring a planet data table</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Forms and buttons in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">What is CSS?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Getting started with CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Challenge: Styling a biography page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Basic CSS selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudo-classes and pseudo-elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators\">Combinators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model\">The box model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Handling conflicts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing\">Sizing items in CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Backgrounds and borders</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow\">Overflowing content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Images, media, and form elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Tables\">Styling tables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Challenge: Fundamental CSS comprehension</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Challenge: Creating fancy letterheaded paper</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Challenge: A cool-looking box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Fundamental text and font styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Styling lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links\">Styling links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web fonts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout\">CSS layout</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction\">Introduction to CSS layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS grid layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsive design</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Media query fundamentals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">What is JavaScript?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash\">A first splash into JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong\">What went wrong? Troubleshooting JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Variables\">Storing the information you need — Variables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Math\">Basic math in JavaScript — numbers and operators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Strings\">Handling text — strings in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Useful string methods</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Challenge: Silly story generator</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals\">Making decisions in your code — conditionals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops\">Looping code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\">Functions — reusable blocks of code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Build your own function</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Return_values\">Function return values</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Events\">Introduction to events</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Event bubbling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery\">Challenge: Image gallery</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript object basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM scripting introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\">Making network requests with JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/JSON\">Working with JSON</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><em><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\" aria-current=\"page\">Introduction to client-side frameworks</a></em></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Framework main features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Getting started with React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginning our React todo list</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Componentizing our React app</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">What is accessibility?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Tooling\">Accessibility tooling and assistive technology</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: A good basis for accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript accessibility best practices</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia\">Accessible multimedia</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Challenge: Accessibility troubleshooting</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Object prototypes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Object-oriented programming</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Classes in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Object building practice</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Challenge: Adding features to our bouncing balls demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-side web APIs</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Introduction to web APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video and Audio APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Drawing graphics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-side storage</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS\">Asynchronous JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Introducing asynchronous JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises\">How to use promises</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">How to implement a promise-based API</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Introducing workers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Challenge: Sequencing animations</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms\">Web forms</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Your first form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">How to structure a web form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Basic native form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">The HTML5 input types</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Other form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling web forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Advanced form styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI pseudo-classes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-side form validation</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Sending form data</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Client-side tooling overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Package management basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Introducing a complete toolchain</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Deploying our app</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Introduction to the server side</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Client-Server Overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-side web frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website security</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django\">Django web framework (Python)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Setting up a Django development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Setting up a Node development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Part 5: Displaying library data</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance\">The \"why\" of web performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">What is web performance?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Perceived performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Measuring performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/HTML\">HTML performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/CSS\">CSS performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">The business case for web performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Introduction\">Introduction to cross-browser testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategies for carrying out testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Handling common HTML and CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementing feature detection</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Introduction to automated testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Setting up your own test automation environment</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">Further resources</li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems\">Solve common HTML problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems\">Solve common CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Solve common JavaScript problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Web_mechanics\">Web mechanics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Tools_and_setup\">Tools and setup</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Design_and_accessibility\">Design and accessibility</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\">About</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"en-us/learn_web_development/core/frameworks_libraries/introduction","github_url":"https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md","last_commit_url":"https://github.com/mdn/content/commit/f65f7f6e4fda2cb1bd0e7db17777e2cb20be7d27","filename":"index.md"},"summary":"We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.","title":"Introduction to client-side frameworks","toc":[{"text":"The emergence of libraries and frameworks","id":"the_emergence_of_libraries_and_frameworks"},{"text":"What frameworks are out there?","id":"what_frameworks_are_out_there"},{"text":"Why do frameworks exist?","id":"why_do_frameworks_exist"},{"text":"The verbosity of DOM changes","id":"the_verbosity_of_dom_changes"},{"text":"Another way to build UIs","id":"another_way_to_build_uis"},{"text":"Other things frameworks give us","id":"other_things_frameworks_give_us"},{"text":"Things to consider when using frameworks","id":"things_to_consider_when_using_frameworks"},{"text":"Accessibility on a framework-driven web","id":"accessibility_on_a_framework-driven_web"},{"text":"How to choose a framework","id":"how_to_choose_a_framework"},{"text":"Alternatives to client-side frameworks","id":"alternatives_to_client-side_frameworks"},{"text":"Summary","id":"summary"}],"pageType":"learn-module-chapter"}}</script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>