CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><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>Einführung in client-seitige Frameworks - Lernen Sie Webentwicklung | MDN</title><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="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="Einführung in client-seitige Frameworks" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" hrefLang="de"/><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="Wir beginnen unseren Blick auf Frameworks mit einem allgemeinen Überblick über das Thema, betrachten eine kurze Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man beginnt, darüber nachzudenken, ein Framework zu wählen, das man lernen möchte, und welche Alternativen es zu client-seitigen Frameworks gibt."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction"/><meta property="og:title" content="Einführung in client-seitige Frameworks - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Wir beginnen unseren Blick auf Frameworks mit einem allgemeinen Überblick über das Thema, betrachten eine kurze Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man beginnt, darüber nachzudenken, ein Framework zu wählen, das man lernen möchte, und welche Alternativen es zu client-seitigen Frameworks gibt."/><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/de/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.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><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="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#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="/de/" 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="/de/docs/Web" 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="/de/docs/Web" 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="/de/docs/Web/HTML" 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="/de/docs/Web/CSS" 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="/de/docs/Web/JavaScript" 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="/de/docs/Web/HTTP" 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="/de/docs/Web/API" 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="/de/docs/Mozilla/Add-ons/WebExtensions" 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="/de/docs/Web/Accessibility" 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="/de/docs/Web" 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="/de/docs/Learn_web_development" 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="/de/docs/Learn_web_development" 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="/de/docs/Learn_web_development" 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="/de/docs/Learn_web_development/Core/Structuring_content" 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="/de/docs/Learn_web_development/Core/Styling_basics" 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="/de/docs/Learn_web_development/Core/Scripting" 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="/de/docs/Learn_web_development/Core/Accessibility" 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="/de/plus" 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="/de/plus" 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="/de/plus/ai-help" 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="/de/plus/updates" 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="/en-US/plus/docs/features/overview" 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="/en-US/plus/docs/faq" 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="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">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="/de/play" 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="/en-US/observatory" 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="/en-US/plus/ai-help" 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="/de/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="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FIntroduction" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FIntroduction" 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="/de/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Kern-Lernmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript-Frameworks und -Bibliotheken</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Einführung in client-seitige 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>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></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://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="en-US" href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></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 diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#das_aufkommen_von_bibliotheken_und_frameworks">Das Aufkommen von Bibliotheken und Frameworks</a></li><li class="document-toc-item "><a class="document-toc-link" href="#welche_frameworks_gibt_es">Welche Frameworks gibt es?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#warum_existieren_frameworks">Warum existieren Frameworks?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#die_umständlichkeit_von_dom-änderungen">Die Umständlichkeit von DOM-Änderungen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_andere_möglichkeit_uis_zu_erstellen">Eine andere Möglichkeit, UIs zu erstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#weitere_vorteile_von_frameworks">Weitere Vorteile von Frameworks</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind">Dinge, die bei der Verwendung von Frameworks zu beachten sind</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet">Zugänglichkeit auf einem von Frameworks getriebenen Internet</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wie_man_ein_framework_auswählt">Wie man ein Framework auswählt</a></li><li class="document-toc-item "><a class="document-toc-link" href="#alternativen_zu_client-seitigen_frameworks">Alternativen zu client-seitigen Frameworks</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/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="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><em><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction" aria-current="page">Einführung in client-seitige Frameworks</a></em></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/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="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</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 diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#das_aufkommen_von_bibliotheken_und_frameworks">Das Aufkommen von Bibliotheken und Frameworks</a></li><li class="document-toc-item "><a class="document-toc-link" href="#welche_frameworks_gibt_es">Welche Frameworks gibt es?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#warum_existieren_frameworks">Warum existieren Frameworks?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#die_umständlichkeit_von_dom-änderungen">Die Umständlichkeit von DOM-Änderungen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_andere_möglichkeit_uis_zu_erstellen">Eine andere Möglichkeit, UIs zu erstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#weitere_vorteile_von_frameworks">Weitere Vorteile von Frameworks</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind">Dinge, die bei der Verwendung von Frameworks zu beachten sind</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet">Zugänglichkeit auf einem von Frameworks getriebenen Internet</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wie_man_ein_framework_auswählt">Wie man ein Framework auswählt</a></li><li class="document-toc-item "><a class="document-toc-link" href="#alternativen_zu_client-seitigen_frameworks">Alternativen zu client-seitigen Frameworks</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</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="de"><header><h1>Einführung in client-seitige Frameworks</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries"><span class="button-wrap"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features"><span class="button-wrap"> Weiter </span></a></li></ul> <p>Wir beginnen unseren Blick auf Frameworks mit einem allgemeinen Überblick über das Thema, betrachten eine kurze Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man beginnt, darüber nachzudenken, ein Framework zu wählen, das man lernen möchte, und welche Alternativen es zu client-seitigen Frameworks gibt.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Vertrautheit mit den Kernsprachen <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>, <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a> und <a href="/de/docs/Learn_web_development/Core/Scripting">JavaScript</a>. </td> </tr> <tr> <th scope="row">Lernziele:</th> <td> <ul> <li>Was Drittanbieter-Code ist und wie client-seitige JavaScript-Frameworks entstanden sind.</li> <li>Welche Probleme Frameworks lösen, welche Alternativen es gibt und wie man eines auswählt.</li> <li>Der Unterschied zwischen Bibliotheken und Frameworks.</li> <li>Wann Frameworks verwendet werden sollten und wann nicht.</li> </ul> </td> </tr> </tbody> </table></figure></div><section aria-labelledby="das_aufkommen_von_bibliotheken_und_frameworks"><h2 id="das_aufkommen_von_bibliotheken_und_frameworks"><a href="#das_aufkommen_von_bibliotheken_und_frameworks">Das Aufkommen von Bibliotheken und Frameworks</a></h2><div class="section-content"><p>Als JavaScript 1996 debütierte, fügte es dem Internet, das bis dahin aus statischen Dokumenten bestand, gelegentliche Interaktivität und Aufregung hinzu. Das Internet wurde nicht mehr nur ein Ort, um Dinge zu <em>lesen</em>, sondern um Dinge zu <em>tun</em>. Die Popularität von JavaScript nahm kontinuierlich zu. Entwickler, die mit JavaScript arbeiteten, schrieben Werkzeuge, um die Probleme zu lösen, denen sie begegneten, und verpackten sie in wiederverwendbare Pakete, genannt <strong>Bibliotheken</strong>, um ihre Lösungen mit anderen zu teilen. Dieses gemeinsame Ökosystem von Bibliotheken half, das Wachstum des Internets zu prägen und führte schließlich zu Frameworks.</p> <p>Ein <strong>Framework</strong> ist eine Bibliothek, die Vorschläge dazu macht, wie Software erstellt wird. Diese Vorschläge ermöglichen Vorhersehbarkeit und Homogenität in einer Anwendung; Vorhersehbarkeit ermöglicht es der Software, auf eine enorme Größe zu skalieren und dennoch wartbar zu bleiben; Vorhersehbarkeit und Wartbarkeit sind für die Gesundheit und Langlebigkeit von Software unerlässlich. Der Aufstieg moderner JavaScript-Frameworks hat es viel einfacher gemacht, hochgradig dynamische, interaktive Anwendungen zu erstellen.</p> <p>JavaScript-Frameworks treiben einen Großteil der beeindruckenden Software im modernen Internet an – einschließlich vieler der Websites, die Sie wahrscheinlich täglich nutzen.</p></div></section><section aria-labelledby="welche_frameworks_gibt_es"><h2 id="welche_frameworks_gibt_es"><a href="#welche_frameworks_gibt_es">Welche Frameworks gibt es?</a></h2><div class="section-content"><p>Es gibt viele Frameworks, aber derzeit gelten die "großen vier" als die folgenden.</p></div></section><section aria-labelledby="ember"><h3 id="ember"><a href="#ember">Ember</a></h3><div class="section-content"><p><a href="https://emberjs.com/" class="external" target="_blank">Ember</a> wurde erstmals im Dezember 2011 als Fortsetzung der Arbeit im <a href="https://en.wikipedia.org/wiki/SproutCore" class="external" target="_blank">SproutCore</a>-Projekt veröffentlicht. Es ist ein älteres Framework, das weniger Benutzer hat als modernere Alternativen wie React und Vue, aber es genießt immer noch eine beträchtliche Beliebtheit aufgrund seiner Stabilität, Community-Unterstützung und einiger cleverer Programmierprinzipien.</p></div></section><section aria-labelledby="angular"><h3 id="angular"><a href="#angular">Angular</a></h3><div class="section-content"><p><a href="https://angular.dev/" class="external" target="_blank">Angular</a> ist ein Open-Source-Webanwendungsframework, das von dem Angular-Team bei Google und einer Gemeinschaft von Einzelpersonen und Unternehmen geleitet wird. Es ist eine vollständige Neufassung von dem gleichen Team, das <a href="https://angularjs.org/" class="external" target="_blank">AngularJS</a> entwickelt hat. Angular wurde am 14. September 2016 offiziell veröffentlicht.</p> <p>Angular ist ein komponentenbasiertes Framework, das deklarative HTML-Vorlagen verwendet. Zur Build-Zeit, ohne dass die Entwickler dies bemerken, übersetzt der Compiler des Frameworks die Templates in optimierte JavaScript-Anweisungen. Angular verwendet <a href="https://www.typescriptlang.org/" class="external" target="_blank">TypeScript</a>, eine Obermenge von JavaScript, die wir im nächsten Kapitel etwas genauer betrachten werden.</p></div></section><section aria-labelledby="vue"><h3 id="vue"><a href="#vue">Vue</a></h3><div class="section-content"><p>Nachdem er an dem ursprünglichen <a href="https://angularjs.org/" class="external" target="_blank">AngularJS</a> Projekt gearbeitet und daraus gelernt hatte, veröffentlichte Evan You im Jahr 2014 <a href="https://vuejs.org/" class="external" target="_blank">Vue</a>. Vue ist das jüngste der großen vier, erfreut sich jedoch eines kürzlichen Beliebtheitsschubs.</p> <p>Vue erweitert, wie <a href="https://angularjs.org/" class="external" target="_blank">AngularJS</a>, HTML um einige eigene Codes. Abgesehen davon stützt es sich hauptsächlich auf modernes, standardmäßiges JavaScript.</p></div></section><section aria-labelledby="react"><h3 id="react"><a href="#react">React</a></h3><div class="section-content"><p>Facebook veröffentlichte <a href="https://react.dev/" class="external" target="_blank">React</a> im Jahr 2013. Zu diesem Zeitpunkt hatte es bereits intern viele seiner Probleme mit React gelöst. Technisch gesehen ist React selbst <em>kein</em> Framework; es ist eine Bibliothek zum Rendern von UI-Komponenten. React wird in Kombination mit <em>anderen</em> Bibliotheken verwendet, um Anwendungen zu erstellen — React und <a href="https://reactnative.dev/" class="external" target="_blank">React Native</a> ermöglichen es Entwicklern, mobile Anwendungen zu erstellen; React und <a href="https://react.dev/reference/react-dom" class="external" target="_blank">ReactDOM</a> ermöglichen es ihnen, Webanwendungen zu entwickeln, usw.</p> <p>Da React und ReactDOM so oft zusammen verwendet werden, wird React umgangssprachlich als JavaScript-Framework verstanden. Während Sie dieses Modul durchlesen, werden wir mit diesem umgangssprachlichen Verständnis arbeiten.</p> <p>React erweitert JavaScript mit HTML-ähnlicher Syntax, bekannt als <a href="https://react.dev/learn/writing-markup-with-jsx" class="external" target="_blank">JSX</a>.</p></div></section><section aria-labelledby="warum_existieren_frameworks"><h2 id="warum_existieren_frameworks"><a href="#warum_existieren_frameworks">Warum existieren Frameworks?</a></h2><div class="section-content"><p>Wir haben die Umgebung diskutiert, die die Schaffung von Frameworks inspiriert hat, aber nicht wirklich <em>warum</em> Entwickler das Bedürfnis verspürten, sie zu erstellen. Um das warum zu erforschen, muss man zuerst die Herausforderungen der Softwareentwicklung untersuchen.</p> <p>Betrachten Sie eine gängige Art von Anwendung: Ein Aufgabenersteller, den wir in zukünftigen Kapiteln unter Verwendung verschiedener Frameworks umsetzen werden. Diese Anwendung sollte es Benutzern ermöglichen, Dinge wie das Rendern einer Liste von Aufgaben, das Hinzufügen einer neuen Aufgabe und das Löschen einer Aufgabe zu tun; und sie muss dies tun, während sie zuverlässig die Daten, die der Anwendung zugrunde liegen, verfolgt und aktualisiert. In der Softwareentwicklung sind diese zugrunde liegenden Daten als Zustand bekannt.</p> <p>Jedes unserer Ziele ist theoretisch isoliert betrachtet einfach. Wir können über die Daten iterieren, um sie zu rendern; wir können einem Objekt eine neue Aufgabe hinzufügen; wir können einen Bezeichner verwenden, um eine Aufgabe zu finden, zu bearbeiten oder zu löschen. Wenn wir daran denken, dass die Anwendung es dem Benutzer ermöglichen muss, <em>all</em> diese Dinge über den Browser zu tun, beginnen einige Probleme zu erscheinen. <strong>Das eigentliche Problem ist: Jedes Mal, wenn wir den Zustand unserer Anwendung ändern, müssen wir die UI entsprechend aktualisieren.</strong></p> <p>Wir können die Schwierigkeit dieses Problems untersuchen, indem wir uns nur <em>eine</em> Funktion unserer Aufgabenlisten-App ansehen: das Rendern einer Liste von Aufgaben.</p></div></section><section aria-labelledby="die_umständlichkeit_von_dom-änderungen"><h2 id="die_umständlichkeit_von_dom-änderungen"><a href="#die_umständlichkeit_von_dom-änderungen">Die Umständlichkeit von DOM-Änderungen</a></h2><div class="section-content"><p>HTML-Elemente zu erstellen und sie zu gegebener Zeit im Browser zu rendern, erfordert überraschend viel Code. Angenommen, unser Zustand ist ein Array von Objekten, das so strukturiert ist:</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>Wie zeigen wir unseren Benutzern eine dieser Aufgaben? Wir möchten jede Aufgabe als Listenelement – ein HTML <a href="/de/docs/Web/HTML/Element/li"><code><li></code></a>-Element innerhalb eines ungeordneten Listenelements (eines <a href="/de/docs/Web/HTML/Element/ul"><code><ul></code></a>) darstellen. Wie machen wir das? Das könnte ungefähr so aussehen:</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>Hier verwenden wir die Methode <a href="/de/docs/Web/API/Document/createElement"><code>document.createElement()</code></a>, um unser <code><li></code> zu erstellen, und mehrere weitere Codezeilen, um die benötigten Eigenschaften und Kindelemente zu erstellen.</p> <p>Das vorhergehende Snippet verweist auf eine weitere Build-Funktion: <code>buildDeleteButtonEl()</code>. Es folgt einem ähnlichen Muster wie das, das wir verwendet haben, um ein Listenelement zu erstellen:</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>Diese Schaltfläche macht noch nichts, aber sie wird es später, wenn wir entscheiden, unsere Löschfunktion zu implementieren. Der Code, der unsere Elemente auf der Seite rendern wird, könnte ungefähr so aussehen:</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>Wir haben jetzt fast dreißig Codezeilen, die <em>nur</em> der UI gewidmet sind – <em>nur</em>, um etwas im DOM zu rendern – und zu keinem Zeitpunkt fügen wir Klassen hinzu, die wir später verwenden könnten, um unsere Listenelemente zu stylen!</p> <p>Direkt mit dem DOM zu arbeiten, wie in diesem Beispiel, erfordert, viele Dinge über das DOM zu verstehen: wie man Elemente erstellt; wie man ihre Eigenschaften ändert; wie man Elemente ineinander einfügt; wie man sie auf die Seite bringt. Keiner dieser Codes behandelt Benutzerinteraktionen oder bezieht das Hinzufügen oder Löschen einer Aufgabe ein. Wenn wir diese Funktionen hinzufügen, müssen wir daran denken, unsere UI zur richtigen Zeit und auf die richtige Weise zu aktualisieren.</p> <p>JavaScript-Frameworks wurden erstellt, um diese Art von Arbeit viel einfacher zu machen – sie existieren, um eine bessere <em>Entwicklererfahrung</em> zu bieten. Sie bringen keine brandneuen Fähigkeiten zu JavaScript; sie geben Ihnen einfacheren Zugang zu den Fähigkeiten von JavaScript, sodass Sie für das heutige Internet entwickeln können.</p> <p>Wenn Sie die Codebeispiele aus diesem Abschnitt in Aktion sehen möchten, können Sie eine <a href="https://codepen.io/mxmason/pen/XWbPNmw" class="external" target="_blank">funktionierende Version der App auf CodePen</a> ausprobieren, die es Benutzern auch ermöglicht, neue Aufgaben hinzuzufügen und zu löschen.</p> <p>Lesen Sie mehr über die in diesem Abschnitt verwendeten JavaScript-Funktionen:</p> <ul> <li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.forEach()</code></a></li> <li><a href="/de/docs/Web/API/Document/createDocumentFragment"><code>Document.createDocumentFragment()</code></a></li> <li><a href="/de/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a></li> <li><a href="/de/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a></li> <li><a href="/de/docs/Web/API/Node/appendChild"><code>Node.appendChild()</code></a></li> <li><a href="/de/docs/Web/API/Node/removeChild"><code>Node.removeChild()</code></a></li> <li><a href="/de/docs/Web/API/Node/textContent"><code>Node.textContent</code></a></li> </ul></div></section><section aria-labelledby="eine_andere_möglichkeit_uis_zu_erstellen"><h2 id="eine_andere_möglichkeit_uis_zu_erstellen"><a href="#eine_andere_möglichkeit_uis_zu_erstellen">Eine andere Möglichkeit, UIs zu erstellen</a></h2><div class="section-content"><p>Jedes JavaScript-Framework bietet eine Möglichkeit, Benutzeroberflächen deklarativer zu schreiben. Das heißt, sie ermöglichen Ihnen, Code zu schreiben, der beschreibt, wie Ihr UI aussehen soll, und das Framework sorgt im Hintergrund dafür, dass es im DOM geschieht.</p> <p>Der Ansatz, mit einfachem JavaScript neue DOM-Elemente wiederholt zu erstellen, war auf den ersten Blick schwer zu verstehen. Im Gegensatz dazu illustriert der folgende Codeblock, wie man Vue verwenden könnte, um unsere Liste von Aufgaben zu beschreiben:</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>Das war's. Dieses Snippet reduziert fast dreißig Codezeilen auf sechs Zeilen. Wenn die geschweiften Klammern und <code>v-</code> Attribute hier Ihnen unbekannt sind, ist das in Ordnung; Sie lernen später im Modul über Vue-spezifische Syntax. Das Wichtigste hier ist, dass dieser Code wie das UI aussieht, das er darstellt, während der einfache JavaScript-Code das nicht tut.</p> <p>Dank Vue mussten wir unsere eigenen Funktionen zum Erstellen der UI nicht schreiben; das Framework übernimmt das für uns in einer optimierten, effizienten Weise. Unsere einzige Rolle hier war, Vue zu beschreiben, wie jedes Element aussehen sollte. Entwickler, die Vue kennen, können schnell verstehen, was passiert, wenn sie unserem Projekt beitreten. Vue ist dabei nicht allein: Die Verwendung eines Frameworks verbessert die Effizienz sowohl des Teams als auch des Einzelnen.</p> <p>Ähnliches ist auch mit einfachem JavaScript möglich. <a href="/de/docs/Web/JavaScript/Reference/Template_literals">Template Literals</a> machen es einfach, HTML-Strings zu schreiben, die darstellen, wie das endgültige Element aussehen würde. Das könnte für etwas so Einfaches wie unsere Aufgabenlisten-Anwendung nützlich sein, aber es ist nicht wartbar für große Anwendungen, die Tausende von Datensätzen verwalten und ebenso viele einzigartige Elemente in einer Benutzeroberfläche rendern könnten.</p></div></section><section aria-labelledby="weitere_vorteile_von_frameworks"><h2 id="weitere_vorteile_von_frameworks"><a href="#weitere_vorteile_von_frameworks">Weitere Vorteile von Frameworks</a></h2><div class="section-content"><p>Schauen wir uns einige der anderen Vorteile an, die von Frameworks angeboten werden. Wie wir bereits erwähnt haben, sind die Vorteile von Frameworks mit einfachem JavaScript erreichbar, aber die Verwendung eines Frameworks nimmt Ihnen die kognitive Last ab, diese Probleme selbst zu lösen.</p></div></section><section aria-labelledby="tooling"><h3 id="tooling"><a href="#tooling">Tooling</a></h3><div class="section-content"><p>Da jedes der Frameworks in diesem Modul über eine große, aktive Community verfügt, bietet das Ökosystem jedes Frameworks Werkzeuge, die die Entwicklererfahrung verbessern. Diese Werkzeuge machen es einfach, Dinge wie Tests (um sicherzustellen, dass Ihre Anwendung sich so verhält, wie sie sollte) oder Linting (um sicherzustellen, dass Ihr Code fehlerfrei und stilistisch konsistent ist) hinzuzufügen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie mehr Details über Web-Tooling-Konzepte erfahren möchten, schauen Sie sich unsere <a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Übersicht über client-seitige Tools</a> an.</p> </div></div></section><section aria-labelledby="kompartimentierung"><h3 id="kompartimentierung"><a href="#kompartimentierung">Kompartimentierung</a></h3><div class="section-content"><p>Die meisten großen Frameworks ermutigen Entwickler dazu, die verschiedenen Teile ihrer Benutzeroberflächen in <em>Komponenten</em> zu abstrahieren — wartbare, wiederverwendbare Codebausteine, die miteinander kommunizieren können. Der gesamte Code, der mit einer gegebenen Komponente zusammenhängt, kann in einer Datei (oder ein paar spezifischen Dateien) leben, sodass Sie als Entwickler genau wissen, wo Sie Änderungen an dieser Komponente vornehmen können. In einer JavaScript-App mit einfachem Vanilla-JavaScript müssten Sie Ihr eigenes Set von Konventionen erstellen, um dies auf effiziente und skalierbare Weise zu erreichen. Viele JavaScript-Entwickler könnten, sich selbst überlassen, am Ende über den gesamten Code hinweg verstreute Teile erstellen, die zu einem UI-Teil gehören – oder in einer ganz anderen Datei.</p></div></section><section aria-labelledby="routing"><h3 id="routing"><a href="#routing">Routing</a></h3><div class="section-content"><p>Das wesentlichste Merkmal des Internets ist, dass es Benutzern ermöglicht, von einer Seite zur anderen zu navigieren – es ist schließlich ein Netzwerk von verknüpften Dokumenten. Wenn Sie auf dieser Webseite einem Link folgen, kommuniziert Ihr Browser mit einem Server und ruft neuen Inhalt ab, den er Ihnen anzeigt. Währenddessen ändert sich die URL in Ihrer Adressleiste. Sie können diese neue URL speichern und später auf die Seite zurückkehren oder sie mit anderen teilen, damit diese die gleiche Seite leicht finden können. Ihr Browser merkt sich Ihren Navigationsverlauf und ermöglicht es Ihnen, vor- und zurückzublättern. Dies wird als <strong>server-seitiges Routing</strong> bezeichnet.</p> <p>Moderne Webanwendungen laden typischerweise keine neuen HTML-Dateien – sie laden eine einzelne HTML-Hülle und aktualisieren kontinuierlich das DOM darin (bekannt als <strong>Single-Page-Apps</strong> oder <strong>SPA</strong>), ohne die Benutzer zu neuen Adressen im Web zu navigieren. Jedes neue Pseudo-Webseiten wird in der Regel als <em>View</em> bezeichnet, und standardmäßig wird kein Routing durchgeführt.</p> <p>Wenn eine SPA komplex genug ist und viele einzigartige Views rendert, ist es wichtig, die Routing-Funktionalität in Ihre Anwendung zu integrieren. Die Leute sind es gewohnt, zu spezifischen Seiten in einer Anwendung zu verlinken, in ihrem Navigationsverlauf vor- und zurückzublättern, usw., und ihre Erfahrung leidet, wenn diese Standard-Webfunktionen ausgefallen sind. Wenn das Routing auf diese Weise von einer Client-Anwendung gehandhabt wird, wird es treffend als <strong>client-seitiges Routing</strong> bezeichnet.</p> <p>Es ist <em>möglich</em>, einen Router mit den nativen Fähigkeiten von JavaScript und dem Browser zu erstellen, aber beliebte, aktiv entwickelte Frameworks haben Begleitbibliotheken, die das Routing zu einem intuitiveren Teil des Entwicklungsprozesses machen.</p></div></section><section aria-labelledby="dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind"><h2 id="dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind"><a href="#dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind">Dinge, die bei der Verwendung von Frameworks zu beachten sind</a></h2><div class="section-content"><p>Ein effektiver Webentwickler zu sein, bedeutet, die am besten geeigneten Werkzeuge für die Aufgabe zu verwenden. JavaScript-Frameworks machen die Entwicklung von Front-End-Anwendungen einfach, aber sie sind kein Allheilmittel, das alle Probleme löst. Dieser Abschnitt spricht über einige der Dinge, die Sie bei der Verwendung von Frameworks beachten sollten. Beachten Sie, dass Sie möglicherweise überhaupt kein Framework benötigen – achten Sie darauf, dass Sie nicht einfach ein Framework verwenden, nur weil Sie es können.</p></div></section><section aria-labelledby="vertrautheit_mit_dem_werkzeug"><h3 id="vertrautheit_mit_dem_werkzeug"><a href="#vertrautheit_mit_dem_werkzeug">Vertrautheit mit dem Werkzeug</a></h3><div class="section-content"><p>Wie schlichtes JavaScript brauchen Frameworks Zeit, um gelernt zu werden, und haben ihre Eigenheiten. Bevor Sie sich entscheiden, ein Framework für ein Projekt zu verwenden, stellen Sie sicher, dass Sie genug Zeit haben, um genügend seiner Funktionen zu erlernen, damit es Ihnen nützlich ist, anstatt gegen Sie zu arbeiten, und stellen Sie sicher, dass Ihre Teamkollegen sich ebenfalls damit auskennen.</p></div></section><section aria-labelledby="überzug"><h3 id="überzug"><a href="#überzug">Überzug</a></h3><div class="section-content"><p>Wenn Ihr Webentwicklungsprojekt ein persönliches Portfolio mit ein paar Seiten ist und diese Seiten wenig oder keine interaktive Funktionalität aufweisen, ist ein Framework (und all sein JavaScript) möglicherweise überhaupt nicht notwendig. Gesagt sei, dass Frameworks nicht monolithisch sind und einige besser für kleine Projekte geeignet sind als andere. In einem Artikel für Smashing Magazine schreibt Sarah Drasner darüber, wie <a href="https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/" class="external" target="_blank">Vue jQuery ersetzen kann</a> als Werkzeug, um kleine Abschnitte einer Webseite interaktiv zu machen.</p></div></section><section aria-labelledby="größerer_codebasis_und_abstraktion"><h3 id="größerer_codebasis_und_abstraktion"><a href="#größerer_codebasis_und_abstraktion">Größerer Codebasis und Abstraktion</a></h3><div class="section-content"><p>Frameworks ermöglichen es Ihnen, deklarativeren Code zu schreiben – und manchmal insgesamt <em>weniger</em> Code –, indem sie die DOM-Interaktionen für Sie im Hintergrund erledigen. Diese Abstraktion ist großartig für Ihre Erfahrung als Entwickler, aber sie ist nicht kostenlos. Um das, was Sie schreiben, in DOM-Änderungen zu übersetzen, müssen Frameworks ihren eigenen Code ausführen, was wiederum Ihre endgültige Software größer und rechnerisch aufwendiger macht.</p> <p>Einige zusätzliche Codes sind unvermeidlich, und ein Framework, das Tree-Shaking unterstützt (Entfernung von nicht-genutztem Code während des Build-Prozesses), ermöglicht es Ihnen, Ihre Anwendungen klein zu halten, aber dies ist immer noch ein Faktor, den Sie im Hinblick auf die Performance Ihrer App im Hinterkopf behalten sollten, besonders auf Geräten mit eingeschränkter Netzwerk-/Speicherkapazität, wie Mobiltelefonen.</p> <p>Die Abstraktion von Frameworks betrifft nicht nur Ihr JavaScript, sondern auch Ihre Beziehung zur eigentlichen Natur des Internets. Egal, wie Sie für das Internet entwickeln, das Endergebnis, die Ebene, mit der Ihre Benutzer letztendlich interagieren, ist HTML. Ihre gesamte Anwendung in JavaScript zu schreiben, kann dazu führen, dass Sie HTML und den Zweck seiner verschiedenen Tags aus den Augen verlieren und ein HTML-Dokument erzeugen, das un-semantic und un-zugänglich ist. Tatsächlich ist es möglich, eine fragile Anwendung zu schreiben, die vollständig von JavaScript abhängt und ohne dieses nicht funktioniert.</p> <p>Frameworks sind nicht die Ursache unserer Probleme. Mit den falschen Prioritäten kann jede Anwendung fragil, aufgebläht und un-zugänglich sein. Frameworks verstärken jedoch unsere Prioritäten als Entwickler. Wenn Ihre Priorität darin besteht, eine komplexe Web-App zu erstellen, ist das einfach zu tun. Wenn Ihre Prioritäten jedoch nicht sorgfältig Performance und Zugänglichkeit schützen, werden Frameworks Ihre Fragilität, Ihre Aufblähung und Ihre Un-Zugänglichkeit verstärken. Moderne Entwicklerprioritäten, verstärkt durch Frameworks, haben die Struktur des Internets an vielen Stellen umgekehrt. Anstelle eines robusten, inhaltszentrierten Netzwerks von Dokumenten stellt das Internet nun oft JavaScript in den Vordergrund und die Benutzererfahrung in den Hintergrund.</p></div></section><section aria-labelledby="zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet"><h2 id="zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet"><a href="#zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet">Zugänglichkeit auf einem von Frameworks getriebenen Internet</a></h2><div class="section-content"><p>Lassen Sie uns auf dem aufbauen, was wir im vorherigen Abschnitt gesagt haben, und ein bisschen mehr über Zugänglichkeit sprechen. Benutzeroberflächen zugänglich zu machen, erfordert immer einige Gedanken und Anstrengungen, und Frameworks können diesen Prozess erschweren. Sie müssen oft fortgeschrittene Framework-APIs verwenden, um auf native Browserfunktionen wie ARIA <a href="/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">Live-Bereiche</a> oder Fokusverwaltung zuzugreifen.</p> <p>In einigen Fällen schaffen Framework-Anwendungen Zugangsbarrieren, die bei traditionellen Websites nicht existieren. Das größte Beispiel dafür ist das client-seitige Routing, wie bereits erwähnt.</p> <p>Beim traditionellen (server-seitigen) Routing hat das Navigieren im Internet vorhersehbare Ergebnisse. Der Browser weiß, dass er den Fokus auf den Anfang der Seite setzen soll, und unterstützende Technologien werden den Titel der Seite ansagen. Diese Dinge passieren jedes Mal, wenn Sie zu einer neuen Seite navigieren.</p> <p>Mit client-seitigem Routing lädt Ihr Browser keine neuen Webseiten, so dass er nicht weiß, dass er den Fokus automatisch anpassen oder einen neuen Seitentitel ansagen sollte. Framework-Autoren haben immense Zeit und Arbeit darauf verwendet, JavaScript zu schreiben, das diese Funktionen nachbildet, und selbst dann hat kein Framework das perfekt geschafft.</p> <p>Das Fazit ist, dass Sie die Zugänglichkeit von Anfang an bei <em>jedem</em> Webprojekt berücksichtigen sollten, aber bedenken Sie, dass abstrahierte Codebasen, die Frameworks verwenden, eher unter großen Zugänglichkeitsproblemen leiden, wenn Sie dies nicht tun.</p></div></section><section aria-labelledby="wie_man_ein_framework_auswählt"><h2 id="wie_man_ein_framework_auswählt"><a href="#wie_man_ein_framework_auswählt">Wie man ein Framework auswählt</a></h2><div class="section-content"><p>Jedes der in diesem Modul besprochenen Frameworks verfolgt unterschiedliche Ansätze zur Webanwendungsentwicklung. Jedes verbessert oder ändert sich regelmäßig, und jedes hat seine Vor- und Nachteile. Die Wahl des richtigen Frameworks ist ein team- und projektabhängiger Prozess, und Sie sollten Ihre eigene Forschung betreiben, um herauszufinden, was Ihren Bedürfnissen entspricht. Dennoch haben wir einige Fragen identifiziert, die Sie stellen können, um Ihre Optionen effektiver zu recherchieren:</p> <ol> <li>Welche Browser unterstützt das Framework?</li> <li>Welche domänenspezifischen Sprachen verwendet das Framework?</li> <li>Hat das Framework eine starke Community und gute Dokumentation (und andere Unterstützung) zur Verfügung?</li> </ol> <p>Die Tabelle in diesem Abschnitt bietet eine kurze Zusammenfassung der aktuellen <em>Browserunterstützung</em>, die von jedem Framework angeboten wird, sowie der <strong>domänenspezifischen Sprachen</strong>, mit denen es verwendet werden kann.</p> <p>Im Großen und Ganzen sind <a href="/de/docs/Glossary/DSL/Domain_specific_language">domänenspezifische Sprachen (DSLs)</a> Programmiersprachen, die in spezifischen Bereichen der Softwareentwicklung relevant sind. Im Kontext von Frameworks sind DSLs Modifikationen von JavaScript oder HTML, die die Entwicklung mit diesem Framework erleichtern. Entscheidend ist, dass keines der Frameworks <em>erfordert</em>, dass ein Entwickler eine spezielle DSL verwendet, aber sie wurden fast alle mit einer bestimmten DSL im Hinterkopf entworfen. Wenn Sie sich entscheiden, die bevorzugte DSL eines Frameworks nicht zu verwenden, werden Ihnen Features entgehen, die ansonsten Ihre Entwicklererfahrung verbessern würden.</p> <p>Sie sollten ernsthaft die Unterstützungs-Matrix und DSLs eines Frameworks in Betracht ziehen, wenn Sie eine Wahl für ein neues Projekt treffen. Nicht passende Browserunterstützung kann ein Hindernis für Ihre Benutzer sein; nicht passende DSL-Unterstützung kann ein Hindernis für Sie und Ihre Teamkollegen sein.</p> <figure class="table-container"><table> <thead> <tr> <th>Framework</th> <th>Browserunterstützung</th> <th>Bevorzugte DSL</th> <th>Unterstützte DSLs</th> <th>Zitierung</th> </tr> </thead> <tbody> <tr> <td>Angular</td> <td>Modern</td> <td>TypeScript</td> <td>HTML-basiert; TypeScript</td> <td><a href="https://angular.dev/guide/browser-support" class="external" target="_blank">offizielle Dokumentation</a></td> </tr> <tr> <td>React</td> <td>Modern</td> <td>JSX</td> <td>JSX; TypeScript</td> <td><a href="https://react.dev/reference/react-dom/client#browser-support" class="external" target="_blank">offizielle Dokumentation</a></td> </tr> <tr> <td>Vue</td> <td>Modern (IE9+ in Vue 2)</td> <td>HTML-basiert</td> <td>HTML-basiert, JSX, Pug</td> <td><a href="https://cli.vuejs.org/guide/browser-compatibility.html" class="external" target="_blank">offizielle Dokumentation</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://guides.emberjs.com/v3.3.0/templates/handlebars-basics/" class="external" target="_blank">offizielle Dokumentation</a></td> </tr> </tbody> </table></figure> <div class="notecard note"> <p><strong>Hinweis:</strong> Die DSLs, die wir als "HTML-basiert" beschrieben haben, haben keine offiziellen Namen. Sie sind nicht wirklich echte DSLs, aber sie sind nicht-standardisiertes HTML, also glauben wir, dass es sich lohnt, sie hervorzuheben.</p> </div></div></section><section aria-labelledby="hat_das_framework_eine_starke_community"><h3 id="hat_das_framework_eine_starke_community"><a href="#hat_das_framework_eine_starke_community">Hat das Framework eine starke Community?</a></h3><div class="section-content"><p>Dies ist vielleicht die schwierigste Metrik zu messen, da die Größe der Community nicht direkt mit leicht zugänglichen Zahlen korreliert. Sie können sich die Anzahl der Sterne eines Projekts auf GitHub oder die wöchentlichen npm-Downloads ansehen, um eine Vorstellung von dessen Beliebtheit zu bekommen, aber manchmal ist das Beste, was Sie tun können, ein paar Foren zu durchsuchen oder mit anderen Entwicklern zu sprechen. Es geht nicht nur um die Größe der Community, sondern auch darum, wie einladend und inklusiv sie ist und wie gut die verfügbare Dokumentation ist.</p></div></section><section aria-labelledby="meinungen_im_internet"><h3 id="meinungen_im_internet"><a href="#meinungen_im_internet">Meinungen im Internet</a></h3><div class="section-content"><p>Vertrauen Sie nicht nur auf unser Wort zu diesem Thema – es gibt Diskussionen auf der ganzen Welt. Die Wikimedia Foundation hat kürzlich beschlossen, Vue für ihr Front-End zu verwenden, und eine <a href="https://phabricator.wikimedia.org/T241180" class="external" target="_blank">Anfrage zur Kommentierung (RFC) zur Einführung eines Frameworks</a> veröffentlicht. Eric Gardner, der Autor des RFC, nahm sich die Zeit, die Bedürfnisse des Wikimedia-Projekts darzulegen und warum bestimmte Frameworks gute Wahlmöglichkeiten für das Team waren. Dieses RFC dient als großartiges Beispiel für die Art von Forschung, die Sie für sich selbst leisten sollten, wenn Sie planen, ein Front-End-Framework zu verwenden.</p> <p>Die <a href="https://stateofjs.com/" class="external" target="_blank">Umfrage "State of JavaScript"</a> ist eine hilfreiche Sammlung von Feedback von JavaScript-Entwicklern. Sie umfasst viele Themen im Zusammenhang mit JavaScript, einschließlich Daten über sowohl die Verwendung von Frameworks als auch Entwicklermeinungen dazu. Derzeit gibt es mehrere Jahre an Daten, die es Ihnen ermöglichen, ein Gefühl für die Beliebtheit eines Frameworks zu bekommen.</p> <p>Das Vue-Team hat <a href="https://v2.vuejs.org/v2/guide/comparison.html" class="external" target="_blank">Vue erschöpfend mit anderen beliebten Frameworks verglichen</a>. Es könnte einige Voreingenommenheiten in diesem Vergleich geben (die sie anmerken), aber es ist dennoch eine wertvolle Ressource.</p></div></section><section aria-labelledby="alternativen_zu_client-seitigen_frameworks"><h2 id="alternativen_zu_client-seitigen_frameworks"><a href="#alternativen_zu_client-seitigen_frameworks">Alternativen zu client-seitigen Frameworks</a></h2><div class="section-content"><p>Wenn Sie nach Werkzeugen suchen, um den Webentwicklungsprozess zu beschleunigen, und Sie wissen, dass Ihr Projekt keine intensive client-seitige JavaScript-Anwendung erfordert, könnten Sie auf einige andere Lösungen für den Aufbau des Internets zurückgreifen:</p> <ul> <li>Ein Content-Management-System</li> <li>Server-seitiges Rendering</li> <li>Einen statischen Seitengenerator</li> </ul></div></section><section aria-labelledby="content-management-systeme"><h3 id="content-management-systeme"><a href="#content-management-systeme">Content-Management-Systeme</a></h3><div class="section-content"><p><strong>Content-Management-Systeme</strong> (<strong>CMSes</strong>) sind alle Werkzeuge, die einem Benutzer erlauben, Inhalte für das Web zu erstellen, ohne selbst direkt Code zu schreiben. Sie sind eine gute Lösung für große Projekte, insbesondere Projekte, die Beiträge von Inhaltserstellern erfordern, die nur begrenzte Codierfähigkeiten haben, oder für Programmierer, die Zeit sparen möchten. Sie erfordern jedoch eine erhebliche Zeit zum Einrichten, und die Nutzung eines CMS bedeutet, dass Sie zumindest einen Teil der Kontrolle über das endgültige Ergebnis Ihrer Webseite abtreten. Wenn Ihr gewähltes CMS beispielsweise nicht standardmäßig zugänglich ist, ist es oft schwierig, dies zu verbessern.</p> <p>Einige beliebte CMS-Systeme sind <a href="https://wordpress.com/" class="external" target="_blank">WordPress</a>, <a href="https://www.joomla.org/" class="external" target="_blank">Joomla</a> und <a href="https://www.drupal.org/" class="external" target="_blank">Drupal</a>.</p></div></section><section aria-labelledby="server-seitiges_rendering"><h3 id="server-seitiges_rendering"><a href="#server-seitiges_rendering">Server-seitiges Rendering</a></h3><div class="section-content"><p><strong>Server-seitiges Rendering</strong> (<strong>SSR</strong>) ist eine Anwendungsarchitektur, bei der es Aufgabe des <em>Servers</em> ist, eine einseitige Anwendung zu rendern. Dies ist das Gegenteil des <em>client-seitigen Renderings</em>, das die gebräuchlichste und direkteste Möglichkeit ist, eine JavaScript-Anwendung zu erstellen. Das server-seitige Rendering ist auf dem Gerät des Clienten einfacher, da Sie ihnen nur eine gerenderte HTML-Datei senden, aber es kann schwierig einzurichten sein, verglichen mit einer client-seitig gerenderten Anwendung.</p> <p>Alle in diesem Modul besprochenen Frameworks unterstützen sowohl das server-seitige als auch das client-seitige Rendering. Schauen Sie sich <a href="https://nextjs.org/" class="external" target="_blank">Next.js</a> für React an, <a href="https://nuxt.com/" class="external" target="_blank">Nuxt</a> für Vue (ja, es ist verwirrend, und nein, diese Projekte sind nicht verwandt!), <a href="https://github.com/ember-fastboot/ember-cli-fastboot" class="external" target="_blank">FastBoot</a> für Ember und <a href="https://angular.dev/guide/universal" class="external" target="_blank">Angular Universal</a> für Angular.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Einige SSR-Lösungen werden von der Community geschrieben und gepflegt, während andere "offizielle" Lösungen sind, die vom Maintainer des Frameworks bereitgestellt werden.</p> </div></div></section><section aria-labelledby="statische_seitengeneratoren"><h3 id="statische_seitengeneratoren"><a href="#statische_seitengeneratoren">Statische Seitengeneratoren</a></h3><div class="section-content"><p><a href="/de/docs/Glossary/SSG">Statische Seitengeneratoren</a> sind Programme, die alle Webseiten einer mehrseitigen Website dynamisch erzeugen – einschließlich aller relevanten CSS- oder JavaScript-Dateien – sodass sie an beliebigen Orten veröffentlicht werden können. Der veröffentlichende Host könnte ein GitHub Pages Branch, eine Netlify-Instanz oder jeder private Server Ihrer Wahl sein, zum Beispiel. Diese Vorgehensweise bietet einige Vorteile, insbesondere in Bezug auf die Leistung (das Gerät Ihres Benutzers erstellt die Seite nicht mit JavaScript; sie ist bereits komplett) und Sicherheit (statische Seiten haben weniger Angriffsflächen). Diese Seiten können JavaScript dort verwenden, wo es nötig ist, sind aber nicht <em>darauf</em> angewiesen. Statische Seitengeneratoren benötigen Zeit, um gelernt zu werden, wie jedes andere Werkzeug auch, was ein Hindernis für Ihren Entwicklungsprozess sein kann.</p> <p>Statische Seiten können so wenige oder so viele einzigartige Seiten haben, wie Sie möchten. Genauso wie Frameworks Ihnen ermöglichen, schnell client-seitige JavaScript-Anwendungen zu schreiben, ermöglichen statische Seitengeneratoren eine Möglichkeit, schnell HTML-Dateien zu erstellen, die Sie sonst einzeln geschrieben hätten. Wie Frameworks ermöglichen statische Seitengeneratoren Entwicklern, Komponenten zu schreiben, die gemeinsame Teile Ihrer Webseiten definieren, und diese Komponenten zusammenzufügen, um eine endgültige Seite zu erstellen. Im Kontext von statischen Seitengeneratoren werden diese Komponenten <strong>Templates</strong> genannt. Von statische Seitengeneratoren erstellte Webseiten können sogar Zuhause für Framework-Anwendungen sein: Wenn Sie beispielsweise möchten, dass eine spezifische Seite Ihrer zunächst statisch generierten Website eine React-Anwendung startet, wenn Ihr Benutzer sie besucht, können Sie das tun.</p> <p>Statische Seitengeneratoren gibt es schon seit langem, und sie werden ständig optimiert und weiterentwickelt. Es gibt eine Vielzahl von Auswahlmöglichkeiten, einschließlich <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> und <a href="https://www.gatsbyjs.com/" class="external" target="_blank">Gatsby</a>, welche auf verschiedenen Technologiestacks aufbauen und unterschiedliche Funktionen bieten. Andere Optionen, wie <a href="https://docusaurus.io/" class="external" target="_blank">Docusaurus</a> und <a href="https://vitepress.dev/" class="external" target="_blank">VitePress</a>, verwenden client-seitige Frameworks anstelle von Templates, generieren aber ähnlich optimierte statische Dateien.</p> <p>Wenn Sie mehr über statische Seitengeneratoren im Allgemeinen erfahren möchten, schauen Sie sich Tatiana Macs <a href="https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti/" class="external" target="_blank">Einstiegs-Leitfaden für Eleventy</a> an. Im ersten Artikel der Serie erklären sie, was ein statischer Seitengenerator ist und wie er sich zu anderen Mitteln der Veröffentlichung von Webinhalten verhält.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Damit kommen wir zum Ende unserer Einführung in Frameworks — wir haben Ihnen bisher keinen Code beigebracht, aber hoffentlich haben wir Ihnen einen nützlichen Hintergrund darüber gegeben, warum Sie Frameworks überhaupt verwenden würden und wie Sie eines auswählen, und Sie davon begeistert gemacht, mehr zu lernen und sich damit zu beschäftigen!</p> <p>Unser nächster Artikel geht auf eine tiefere Ebene ein und betrachtet die spezifischen Arten von Funktionen, die Frameworks tendenziell bieten, und warum sie so funktionieren, wie sie es tun.</p> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries"><span class="button-wrap"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features"><span class="button-wrap"> Weiter </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>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</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>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/frameworks_libraries/introduction/index.md?plain=1" title="Folder: de/learn_web_development/core/frameworks_libraries/introduction (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FIntroduction&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn_web_development%2Fcore%2Fframeworks_libraries%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fcore%2Fframeworks_libraries%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</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="/" 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://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://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://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="/en-US/blog/rss.xml" 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="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">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://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">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="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="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="/discord" 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="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="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://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://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="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://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://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://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/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=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\"><span class=\"button-wrap\"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>\n<p>Wir beginnen unseren Blick auf Frameworks mit einem allgemeinen Überblick über das Thema, betrachten eine kurze Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man beginnt, darüber nachzudenken, ein Framework zu wählen, das man lernen möchte, und welche Alternativen es zu client-seitigen Frameworks gibt.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Vertrautheit mit den Kernsprachen <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">HTML</a>,\n <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">CSS</a> und\n <a href=\"/de/docs/Learn_web_development/Core/Scripting\">JavaScript</a>.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Lernziele:</th>\n <td>\n <ul>\n <li>Was Drittanbieter-Code ist und wie client-seitige JavaScript-Frameworks entstanden sind.</li>\n <li>Welche Probleme Frameworks lösen, welche Alternativen es gibt und wie man eines auswählt.</li>\n <li>Der Unterschied zwischen Bibliotheken und Frameworks.</li>\n <li>Wann Frameworks verwendet werden sollten und wann nicht.</li>\n </ul>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"das_aufkommen_von_bibliotheken_und_frameworks","title":"Das Aufkommen von Bibliotheken und Frameworks","isH3":false,"content":"<p>Als JavaScript 1996 debütierte, fügte es dem Internet, das bis dahin aus statischen Dokumenten bestand, gelegentliche Interaktivität und Aufregung hinzu. Das Internet wurde nicht mehr nur ein Ort, um Dinge zu <em>lesen</em>, sondern um Dinge zu <em>tun</em>. Die Popularität von JavaScript nahm kontinuierlich zu. Entwickler, die mit JavaScript arbeiteten, schrieben Werkzeuge, um die Probleme zu lösen, denen sie begegneten, und verpackten sie in wiederverwendbare Pakete, genannt <strong>Bibliotheken</strong>, um ihre Lösungen mit anderen zu teilen. Dieses gemeinsame Ökosystem von Bibliotheken half, das Wachstum des Internets zu prägen und führte schließlich zu Frameworks.</p>\n<p>Ein <strong>Framework</strong> ist eine Bibliothek, die Vorschläge dazu macht, wie Software erstellt wird. Diese Vorschläge ermöglichen Vorhersehbarkeit und Homogenität in einer Anwendung; Vorhersehbarkeit ermöglicht es der Software, auf eine enorme Größe zu skalieren und dennoch wartbar zu bleiben; Vorhersehbarkeit und Wartbarkeit sind für die Gesundheit und Langlebigkeit von Software unerlässlich. Der Aufstieg moderner JavaScript-Frameworks hat es viel einfacher gemacht, hochgradig dynamische, interaktive Anwendungen zu erstellen.</p>\n<p>JavaScript-Frameworks treiben einen Großteil der beeindruckenden Software im modernen Internet an – einschließlich vieler der Websites, die Sie wahrscheinlich täglich nutzen.</p>"}},{"type":"prose","value":{"id":"welche_frameworks_gibt_es","title":"Welche Frameworks gibt es?","isH3":false,"content":"<p>Es gibt viele Frameworks, aber derzeit gelten die \"großen vier\" als die folgenden.</p>"}},{"type":"prose","value":{"id":"ember","title":"Ember","isH3":true,"content":"<p><a href=\"https://emberjs.com/\" class=\"external\" target=\"_blank\">Ember</a> wurde erstmals im Dezember 2011 als Fortsetzung der Arbeit im <a href=\"https://en.wikipedia.org/wiki/SproutCore\" class=\"external\" target=\"_blank\">SproutCore</a>-Projekt veröffentlicht. Es ist ein älteres Framework, das weniger Benutzer hat als modernere Alternativen wie React und Vue, aber es genießt immer noch eine beträchtliche Beliebtheit aufgrund seiner Stabilität, Community-Unterstützung und einiger cleverer Programmierprinzipien.</p>"}},{"type":"prose","value":{"id":"angular","title":"Angular","isH3":true,"content":"<p><a href=\"https://angular.dev/\" class=\"external\" target=\"_blank\">Angular</a> ist ein Open-Source-Webanwendungsframework, das von dem Angular-Team bei Google und einer Gemeinschaft von Einzelpersonen und Unternehmen geleitet wird. Es ist eine vollständige Neufassung von dem gleichen Team, das <a href=\"https://angularjs.org/\" class=\"external\" target=\"_blank\">AngularJS</a> entwickelt hat. Angular wurde am 14. September 2016 offiziell veröffentlicht.</p>\n<p>Angular ist ein komponentenbasiertes Framework, das deklarative HTML-Vorlagen verwendet. Zur Build-Zeit, ohne dass die Entwickler dies bemerken, übersetzt der Compiler des Frameworks die Templates in optimierte JavaScript-Anweisungen. Angular verwendet <a href=\"https://www.typescriptlang.org/\" class=\"external\" target=\"_blank\">TypeScript</a>, eine Obermenge von JavaScript, die wir im nächsten Kapitel etwas genauer betrachten werden.</p>"}},{"type":"prose","value":{"id":"vue","title":"Vue","isH3":true,"content":"<p>Nachdem er an dem ursprünglichen <a href=\"https://angularjs.org/\" class=\"external\" target=\"_blank\">AngularJS</a> Projekt gearbeitet und daraus gelernt hatte, veröffentlichte Evan You im Jahr 2014 <a href=\"https://vuejs.org/\" class=\"external\" target=\"_blank\">Vue</a>. Vue ist das jüngste der großen vier, erfreut sich jedoch eines kürzlichen Beliebtheitsschubs.</p>\n<p>Vue erweitert, wie <a href=\"https://angularjs.org/\" class=\"external\" target=\"_blank\">AngularJS</a>, HTML um einige eigene Codes. Abgesehen davon stützt es sich hauptsächlich auf modernes, standardmäßiges JavaScript.</p>"}},{"type":"prose","value":{"id":"react","title":"React","isH3":true,"content":"<p>Facebook veröffentlichte <a href=\"https://react.dev/\" class=\"external\" target=\"_blank\">React</a> im Jahr 2013. Zu diesem Zeitpunkt hatte es bereits intern viele seiner Probleme mit React gelöst. Technisch gesehen ist React selbst <em>kein</em> Framework; es ist eine Bibliothek zum Rendern von UI-Komponenten. React wird in Kombination mit <em>anderen</em> Bibliotheken verwendet, um Anwendungen zu erstellen — React und <a href=\"https://reactnative.dev/\" class=\"external\" target=\"_blank\">React Native</a> ermöglichen es Entwicklern, mobile Anwendungen zu erstellen; React und <a href=\"https://react.dev/reference/react-dom\" class=\"external\" target=\"_blank\">ReactDOM</a> ermöglichen es ihnen, Webanwendungen zu entwickeln, usw.</p>\n<p>Da React und ReactDOM so oft zusammen verwendet werden, wird React umgangssprachlich als JavaScript-Framework verstanden. Während Sie dieses Modul durchlesen, werden wir mit diesem umgangssprachlichen Verständnis arbeiten.</p>\n<p>React erweitert JavaScript mit HTML-ähnlicher Syntax, bekannt als <a href=\"https://react.dev/learn/writing-markup-with-jsx\" class=\"external\" target=\"_blank\">JSX</a>.</p>"}},{"type":"prose","value":{"id":"warum_existieren_frameworks","title":"Warum existieren Frameworks?","isH3":false,"content":"<p>Wir haben die Umgebung diskutiert, die die Schaffung von Frameworks inspiriert hat, aber nicht wirklich <em>warum</em> Entwickler das Bedürfnis verspürten, sie zu erstellen. Um das warum zu erforschen, muss man zuerst die Herausforderungen der Softwareentwicklung untersuchen.</p>\n<p>Betrachten Sie eine gängige Art von Anwendung: Ein Aufgabenersteller, den wir in zukünftigen Kapiteln unter Verwendung verschiedener Frameworks umsetzen werden. Diese Anwendung sollte es Benutzern ermöglichen, Dinge wie das Rendern einer Liste von Aufgaben, das Hinzufügen einer neuen Aufgabe und das Löschen einer Aufgabe zu tun; und sie muss dies tun, während sie zuverlässig die Daten, die der Anwendung zugrunde liegen, verfolgt und aktualisiert. In der Softwareentwicklung sind diese zugrunde liegenden Daten als Zustand bekannt.</p>\n<p>Jedes unserer Ziele ist theoretisch isoliert betrachtet einfach. Wir können über die Daten iterieren, um sie zu rendern; wir können einem Objekt eine neue Aufgabe hinzufügen; wir können einen Bezeichner verwenden, um eine Aufgabe zu finden, zu bearbeiten oder zu löschen. Wenn wir daran denken, dass die Anwendung es dem Benutzer ermöglichen muss, <em>all</em> diese Dinge über den Browser zu tun, beginnen einige Probleme zu erscheinen. <strong>Das eigentliche Problem ist: Jedes Mal, wenn wir den Zustand unserer Anwendung ändern, müssen wir die UI entsprechend aktualisieren.</strong></p>\n<p>Wir können die Schwierigkeit dieses Problems untersuchen, indem wir uns nur <em>eine</em> Funktion unserer Aufgabenlisten-App ansehen: das Rendern einer Liste von Aufgaben.</p>"}},{"type":"prose","value":{"id":"die_umständlichkeit_von_dom-änderungen","title":"Die Umständlichkeit von DOM-Änderungen","isH3":false,"content":"<p>HTML-Elemente zu erstellen und sie zu gegebener Zeit im Browser zu rendern, erfordert überraschend viel Code. Angenommen, unser Zustand ist ein Array von Objekten, das so strukturiert ist:</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>Wie zeigen wir unseren Benutzern eine dieser Aufgaben? Wir möchten jede Aufgabe als Listenelement – ein HTML <a href=\"/de/docs/Web/HTML/Element/li\"><code><li></code></a>-Element innerhalb eines ungeordneten Listenelements (eines <a href=\"/de/docs/Web/HTML/Element/ul\"><code><ul></code></a>) darstellen. Wie machen wir das? Das könnte ungefähr so aussehen:</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>Hier verwenden wir die Methode <a href=\"/de/docs/Web/API/Document/createElement\"><code>document.createElement()</code></a>, um unser <code><li></code> zu erstellen, und mehrere weitere Codezeilen, um die benötigten Eigenschaften und Kindelemente zu erstellen.</p>\n<p>Das vorhergehende Snippet verweist auf eine weitere Build-Funktion: <code>buildDeleteButtonEl()</code>. Es folgt einem ähnlichen Muster wie das, das wir verwendet haben, um ein Listenelement zu erstellen:</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>Diese Schaltfläche macht noch nichts, aber sie wird es später, wenn wir entscheiden, unsere Löschfunktion zu implementieren. Der Code, der unsere Elemente auf der Seite rendern wird, könnte ungefähr so aussehen:</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>Wir haben jetzt fast dreißig Codezeilen, die <em>nur</em> der UI gewidmet sind – <em>nur</em>, um etwas im DOM zu rendern – und zu keinem Zeitpunkt fügen wir Klassen hinzu, die wir später verwenden könnten, um unsere Listenelemente zu stylen!</p>\n<p>Direkt mit dem DOM zu arbeiten, wie in diesem Beispiel, erfordert, viele Dinge über das DOM zu verstehen: wie man Elemente erstellt; wie man ihre Eigenschaften ändert; wie man Elemente ineinander einfügt; wie man sie auf die Seite bringt. Keiner dieser Codes behandelt Benutzerinteraktionen oder bezieht das Hinzufügen oder Löschen einer Aufgabe ein. Wenn wir diese Funktionen hinzufügen, müssen wir daran denken, unsere UI zur richtigen Zeit und auf die richtige Weise zu aktualisieren.</p>\n<p>JavaScript-Frameworks wurden erstellt, um diese Art von Arbeit viel einfacher zu machen – sie existieren, um eine bessere <em>Entwicklererfahrung</em> zu bieten. Sie bringen keine brandneuen Fähigkeiten zu JavaScript; sie geben Ihnen einfacheren Zugang zu den Fähigkeiten von JavaScript, sodass Sie für das heutige Internet entwickeln können.</p>\n<p>Wenn Sie die Codebeispiele aus diesem Abschnitt in Aktion sehen möchten, können Sie eine <a href=\"https://codepen.io/mxmason/pen/XWbPNmw\" class=\"external\" target=\"_blank\">funktionierende Version der App auf CodePen</a> ausprobieren, die es Benutzern auch ermöglicht, neue Aufgaben hinzuzufügen und zu löschen.</p>\n<p>Lesen Sie mehr über die in diesem Abschnitt verwendeten JavaScript-Funktionen:</p>\n<ul>\n<li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\"><code>Array.forEach()</code></a></li>\n<li><a href=\"/de/docs/Web/API/Document/createDocumentFragment\"><code>Document.createDocumentFragment()</code></a></li>\n<li><a href=\"/de/docs/Web/API/Document/createElement\"><code>Document.createElement()</code></a></li>\n<li><a href=\"/de/docs/Web/API/Element/setAttribute\"><code>Element.setAttribute()</code></a></li>\n<li><a href=\"/de/docs/Web/API/Node/appendChild\"><code>Node.appendChild()</code></a></li>\n<li><a href=\"/de/docs/Web/API/Node/removeChild\"><code>Node.removeChild()</code></a></li>\n<li><a href=\"/de/docs/Web/API/Node/textContent\"><code>Node.textContent</code></a></li>\n</ul>"}},{"type":"prose","value":{"id":"eine_andere_möglichkeit_uis_zu_erstellen","title":"Eine andere Möglichkeit, UIs zu erstellen","isH3":false,"content":"<p>Jedes JavaScript-Framework bietet eine Möglichkeit, Benutzeroberflächen deklarativer zu schreiben. Das heißt, sie ermöglichen Ihnen, Code zu schreiben, der beschreibt, wie Ihr UI aussehen soll, und das Framework sorgt im Hintergrund dafür, dass es im DOM geschieht.</p>\n<p>Der Ansatz, mit einfachem JavaScript neue DOM-Elemente wiederholt zu erstellen, war auf den ersten Blick schwer zu verstehen. Im Gegensatz dazu illustriert der folgende Codeblock, wie man Vue verwenden könnte, um unsere Liste von Aufgaben zu beschreiben:</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>Das war's. Dieses Snippet reduziert fast dreißig Codezeilen auf sechs Zeilen. Wenn die geschweiften Klammern und <code>v-</code> Attribute hier Ihnen unbekannt sind, ist das in Ordnung; Sie lernen später im Modul über Vue-spezifische Syntax. Das Wichtigste hier ist, dass dieser Code wie das UI aussieht, das er darstellt, während der einfache JavaScript-Code das nicht tut.</p>\n<p>Dank Vue mussten wir unsere eigenen Funktionen zum Erstellen der UI nicht schreiben; das Framework übernimmt das für uns in einer optimierten, effizienten Weise. Unsere einzige Rolle hier war, Vue zu beschreiben, wie jedes Element aussehen sollte. Entwickler, die Vue kennen, können schnell verstehen, was passiert, wenn sie unserem Projekt beitreten. Vue ist dabei nicht allein: Die Verwendung eines Frameworks verbessert die Effizienz sowohl des Teams als auch des Einzelnen.</p>\n<p>Ähnliches ist auch mit einfachem JavaScript möglich. <a href=\"/de/docs/Web/JavaScript/Reference/Template_literals\">Template Literals</a> machen es einfach, HTML-Strings zu schreiben, die darstellen, wie das endgültige Element aussehen würde. Das könnte für etwas so Einfaches wie unsere Aufgabenlisten-Anwendung nützlich sein, aber es ist nicht wartbar für große Anwendungen, die Tausende von Datensätzen verwalten und ebenso viele einzigartige Elemente in einer Benutzeroberfläche rendern könnten.</p>"}},{"type":"prose","value":{"id":"weitere_vorteile_von_frameworks","title":"Weitere Vorteile von Frameworks","isH3":false,"content":"<p>Schauen wir uns einige der anderen Vorteile an, die von Frameworks angeboten werden. Wie wir bereits erwähnt haben, sind die Vorteile von Frameworks mit einfachem JavaScript erreichbar, aber die Verwendung eines Frameworks nimmt Ihnen die kognitive Last ab, diese Probleme selbst zu lösen.</p>"}},{"type":"prose","value":{"id":"tooling","title":"Tooling","isH3":true,"content":"<p>Da jedes der Frameworks in diesem Modul über eine große, aktive Community verfügt, bietet das Ökosystem jedes Frameworks Werkzeuge, die die Entwicklererfahrung verbessern. Diese Werkzeuge machen es einfach, Dinge wie Tests (um sicherzustellen, dass Ihre Anwendung sich so verhält, wie sie sollte) oder Linting (um sicherzustellen, dass Ihr Code fehlerfrei und stilistisch konsistent ist) hinzuzufügen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie mehr Details über Web-Tooling-Konzepte erfahren möchten, schauen Sie sich unsere <a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Übersicht über client-seitige Tools</a> an.</p>\n</div>"}},{"type":"prose","value":{"id":"kompartimentierung","title":"Kompartimentierung","isH3":true,"content":"<p>Die meisten großen Frameworks ermutigen Entwickler dazu, die verschiedenen Teile ihrer Benutzeroberflächen in <em>Komponenten</em> zu abstrahieren — wartbare, wiederverwendbare Codebausteine, die miteinander kommunizieren können. Der gesamte Code, der mit einer gegebenen Komponente zusammenhängt, kann in einer Datei (oder ein paar spezifischen Dateien) leben, sodass Sie als Entwickler genau wissen, wo Sie Änderungen an dieser Komponente vornehmen können. In einer JavaScript-App mit einfachem Vanilla-JavaScript müssten Sie Ihr eigenes Set von Konventionen erstellen, um dies auf effiziente und skalierbare Weise zu erreichen. Viele JavaScript-Entwickler könnten, sich selbst überlassen, am Ende über den gesamten Code hinweg verstreute Teile erstellen, die zu einem UI-Teil gehören – oder in einer ganz anderen Datei.</p>"}},{"type":"prose","value":{"id":"routing","title":"Routing","isH3":true,"content":"<p>Das wesentlichste Merkmal des Internets ist, dass es Benutzern ermöglicht, von einer Seite zur anderen zu navigieren – es ist schließlich ein Netzwerk von verknüpften Dokumenten. Wenn Sie auf dieser Webseite einem Link folgen, kommuniziert Ihr Browser mit einem Server und ruft neuen Inhalt ab, den er Ihnen anzeigt. Währenddessen ändert sich die URL in Ihrer Adressleiste. Sie können diese neue URL speichern und später auf die Seite zurückkehren oder sie mit anderen teilen, damit diese die gleiche Seite leicht finden können. Ihr Browser merkt sich Ihren Navigationsverlauf und ermöglicht es Ihnen, vor- und zurückzublättern. Dies wird als <strong>server-seitiges Routing</strong> bezeichnet.</p>\n<p>Moderne Webanwendungen laden typischerweise keine neuen HTML-Dateien – sie laden eine einzelne HTML-Hülle und aktualisieren kontinuierlich das DOM darin (bekannt als <strong>Single-Page-Apps</strong> oder <strong>SPA</strong>), ohne die Benutzer zu neuen Adressen im Web zu navigieren. Jedes neue Pseudo-Webseiten wird in der Regel als <em>View</em> bezeichnet, und standardmäßig wird kein Routing durchgeführt.</p>\n<p>Wenn eine SPA komplex genug ist und viele einzigartige Views rendert, ist es wichtig, die Routing-Funktionalität in Ihre Anwendung zu integrieren. Die Leute sind es gewohnt, zu spezifischen Seiten in einer Anwendung zu verlinken, in ihrem Navigationsverlauf vor- und zurückzublättern, usw., und ihre Erfahrung leidet, wenn diese Standard-Webfunktionen ausgefallen sind. Wenn das Routing auf diese Weise von einer Client-Anwendung gehandhabt wird, wird es treffend als <strong>client-seitiges Routing</strong> bezeichnet.</p>\n<p>Es ist <em>möglich</em>, einen Router mit den nativen Fähigkeiten von JavaScript und dem Browser zu erstellen, aber beliebte, aktiv entwickelte Frameworks haben Begleitbibliotheken, die das Routing zu einem intuitiveren Teil des Entwicklungsprozesses machen.</p>"}},{"type":"prose","value":{"id":"dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind","title":"Dinge, die bei der Verwendung von Frameworks zu beachten sind","isH3":false,"content":"<p>Ein effektiver Webentwickler zu sein, bedeutet, die am besten geeigneten Werkzeuge für die Aufgabe zu verwenden. JavaScript-Frameworks machen die Entwicklung von Front-End-Anwendungen einfach, aber sie sind kein Allheilmittel, das alle Probleme löst. Dieser Abschnitt spricht über einige der Dinge, die Sie bei der Verwendung von Frameworks beachten sollten. Beachten Sie, dass Sie möglicherweise überhaupt kein Framework benötigen – achten Sie darauf, dass Sie nicht einfach ein Framework verwenden, nur weil Sie es können.</p>"}},{"type":"prose","value":{"id":"vertrautheit_mit_dem_werkzeug","title":"Vertrautheit mit dem Werkzeug","isH3":true,"content":"<p>Wie schlichtes JavaScript brauchen Frameworks Zeit, um gelernt zu werden, und haben ihre Eigenheiten. Bevor Sie sich entscheiden, ein Framework für ein Projekt zu verwenden, stellen Sie sicher, dass Sie genug Zeit haben, um genügend seiner Funktionen zu erlernen, damit es Ihnen nützlich ist, anstatt gegen Sie zu arbeiten, und stellen Sie sicher, dass Ihre Teamkollegen sich ebenfalls damit auskennen.</p>"}},{"type":"prose","value":{"id":"überzug","title":"Überzug","isH3":true,"content":"<p>Wenn Ihr Webentwicklungsprojekt ein persönliches Portfolio mit ein paar Seiten ist und diese Seiten wenig oder keine interaktive Funktionalität aufweisen, ist ein Framework (und all sein JavaScript) möglicherweise überhaupt nicht notwendig. Gesagt sei, dass Frameworks nicht monolithisch sind und einige besser für kleine Projekte geeignet sind als andere. In einem Artikel für Smashing Magazine schreibt Sarah Drasner darüber, wie <a href=\"https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/\" class=\"external\" target=\"_blank\">Vue jQuery ersetzen kann</a> als Werkzeug, um kleine Abschnitte einer Webseite interaktiv zu machen.</p>"}},{"type":"prose","value":{"id":"größerer_codebasis_und_abstraktion","title":"Größerer Codebasis und Abstraktion","isH3":true,"content":"<p>Frameworks ermöglichen es Ihnen, deklarativeren Code zu schreiben – und manchmal insgesamt <em>weniger</em> Code –, indem sie die DOM-Interaktionen für Sie im Hintergrund erledigen. Diese Abstraktion ist großartig für Ihre Erfahrung als Entwickler, aber sie ist nicht kostenlos. Um das, was Sie schreiben, in DOM-Änderungen zu übersetzen, müssen Frameworks ihren eigenen Code ausführen, was wiederum Ihre endgültige Software größer und rechnerisch aufwendiger macht.</p>\n<p>Einige zusätzliche Codes sind unvermeidlich, und ein Framework, das Tree-Shaking unterstützt (Entfernung von nicht-genutztem Code während des Build-Prozesses), ermöglicht es Ihnen, Ihre Anwendungen klein zu halten, aber dies ist immer noch ein Faktor, den Sie im Hinblick auf die Performance Ihrer App im Hinterkopf behalten sollten, besonders auf Geräten mit eingeschränkter Netzwerk-/Speicherkapazität, wie Mobiltelefonen.</p>\n<p>Die Abstraktion von Frameworks betrifft nicht nur Ihr JavaScript, sondern auch Ihre Beziehung zur eigentlichen Natur des Internets. Egal, wie Sie für das Internet entwickeln, das Endergebnis, die Ebene, mit der Ihre Benutzer letztendlich interagieren, ist HTML. Ihre gesamte Anwendung in JavaScript zu schreiben, kann dazu führen, dass Sie HTML und den Zweck seiner verschiedenen Tags aus den Augen verlieren und ein HTML-Dokument erzeugen, das un-semantic und un-zugänglich ist. Tatsächlich ist es möglich, eine fragile Anwendung zu schreiben, die vollständig von JavaScript abhängt und ohne dieses nicht funktioniert.</p>\n<p>Frameworks sind nicht die Ursache unserer Probleme. Mit den falschen Prioritäten kann jede Anwendung fragil, aufgebläht und un-zugänglich sein. Frameworks verstärken jedoch unsere Prioritäten als Entwickler. Wenn Ihre Priorität darin besteht, eine komplexe Web-App zu erstellen, ist das einfach zu tun. Wenn Ihre Prioritäten jedoch nicht sorgfältig Performance und Zugänglichkeit schützen, werden Frameworks Ihre Fragilität, Ihre Aufblähung und Ihre Un-Zugänglichkeit verstärken. Moderne Entwicklerprioritäten, verstärkt durch Frameworks, haben die Struktur des Internets an vielen Stellen umgekehrt. Anstelle eines robusten, inhaltszentrierten Netzwerks von Dokumenten stellt das Internet nun oft JavaScript in den Vordergrund und die Benutzererfahrung in den Hintergrund.</p>"}},{"type":"prose","value":{"id":"zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet","title":"Zugänglichkeit auf einem von Frameworks getriebenen Internet","isH3":false,"content":"<p>Lassen Sie uns auf dem aufbauen, was wir im vorherigen Abschnitt gesagt haben, und ein bisschen mehr über Zugänglichkeit sprechen. Benutzeroberflächen zugänglich zu machen, erfordert immer einige Gedanken und Anstrengungen, und Frameworks können diesen Prozess erschweren. Sie müssen oft fortgeschrittene Framework-APIs verwenden, um auf native Browserfunktionen wie ARIA <a href=\"/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\">Live-Bereiche</a> oder Fokusverwaltung zuzugreifen.</p>\n<p>In einigen Fällen schaffen Framework-Anwendungen Zugangsbarrieren, die bei traditionellen Websites nicht existieren. Das größte Beispiel dafür ist das client-seitige Routing, wie bereits erwähnt.</p>\n<p>Beim traditionellen (server-seitigen) Routing hat das Navigieren im Internet vorhersehbare Ergebnisse. Der Browser weiß, dass er den Fokus auf den Anfang der Seite setzen soll, und unterstützende Technologien werden den Titel der Seite ansagen. Diese Dinge passieren jedes Mal, wenn Sie zu einer neuen Seite navigieren.</p>\n<p>Mit client-seitigem Routing lädt Ihr Browser keine neuen Webseiten, so dass er nicht weiß, dass er den Fokus automatisch anpassen oder einen neuen Seitentitel ansagen sollte. Framework-Autoren haben immense Zeit und Arbeit darauf verwendet, JavaScript zu schreiben, das diese Funktionen nachbildet, und selbst dann hat kein Framework das perfekt geschafft.</p>\n<p>Das Fazit ist, dass Sie die Zugänglichkeit von Anfang an bei <em>jedem</em> Webprojekt berücksichtigen sollten, aber bedenken Sie, dass abstrahierte Codebasen, die Frameworks verwenden, eher unter großen Zugänglichkeitsproblemen leiden, wenn Sie dies nicht tun.</p>"}},{"type":"prose","value":{"id":"wie_man_ein_framework_auswählt","title":"Wie man ein Framework auswählt","isH3":false,"content":"<p>Jedes der in diesem Modul besprochenen Frameworks verfolgt unterschiedliche Ansätze zur Webanwendungsentwicklung. Jedes verbessert oder ändert sich regelmäßig, und jedes hat seine Vor- und Nachteile. Die Wahl des richtigen Frameworks ist ein team- und projektabhängiger Prozess, und Sie sollten Ihre eigene Forschung betreiben, um herauszufinden, was Ihren Bedürfnissen entspricht. Dennoch haben wir einige Fragen identifiziert, die Sie stellen können, um Ihre Optionen effektiver zu recherchieren:</p>\n<ol>\n<li>Welche Browser unterstützt das Framework?</li>\n<li>Welche domänenspezifischen Sprachen verwendet das Framework?</li>\n<li>Hat das Framework eine starke Community und gute Dokumentation (und andere Unterstützung) zur Verfügung?</li>\n</ol>\n<p>Die Tabelle in diesem Abschnitt bietet eine kurze Zusammenfassung der aktuellen <em>Browserunterstützung</em>, die von jedem Framework angeboten wird, sowie der <strong>domänenspezifischen Sprachen</strong>, mit denen es verwendet werden kann.</p>\n<p>Im Großen und Ganzen sind <a href=\"/de/docs/Glossary/DSL/Domain_specific_language\">domänenspezifische Sprachen (DSLs)</a> Programmiersprachen, die in spezifischen Bereichen der Softwareentwicklung relevant sind. Im Kontext von Frameworks sind DSLs Modifikationen von JavaScript oder HTML, die die Entwicklung mit diesem Framework erleichtern. Entscheidend ist, dass keines der Frameworks <em>erfordert</em>, dass ein Entwickler eine spezielle DSL verwendet, aber sie wurden fast alle mit einer bestimmten DSL im Hinterkopf entworfen. Wenn Sie sich entscheiden, die bevorzugte DSL eines Frameworks nicht zu verwenden, werden Ihnen Features entgehen, die ansonsten Ihre Entwicklererfahrung verbessern würden.</p>\n<p>Sie sollten ernsthaft die Unterstützungs-Matrix und DSLs eines Frameworks in Betracht ziehen, wenn Sie eine Wahl für ein neues Projekt treffen. Nicht passende Browserunterstützung kann ein Hindernis für Ihre Benutzer sein; nicht passende DSL-Unterstützung kann ein Hindernis für Sie und Ihre Teamkollegen sein.</p>\n<figure class=\"table-container\"><table>\n<thead>\n<tr>\n<th>Framework</th>\n<th>Browserunterstützung</th>\n<th>Bevorzugte DSL</th>\n<th>Unterstützte DSLs</th>\n<th>Zitierung</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Angular</td>\n<td>Modern</td>\n<td>TypeScript</td>\n<td>HTML-basiert; TypeScript</td>\n<td><a href=\"https://angular.dev/guide/browser-support\" class=\"external\" target=\"_blank\">offizielle Dokumentation</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\">offizielle Dokumentation</a></td>\n</tr>\n<tr>\n<td>Vue</td>\n<td>Modern (IE9+ in Vue 2)</td>\n<td>HTML-basiert</td>\n<td>HTML-basiert, JSX, Pug</td>\n<td><a href=\"https://cli.vuejs.org/guide/browser-compatibility.html\" class=\"external\" target=\"_blank\">offizielle Dokumentation</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\">offizielle Dokumentation</a></td>\n</tr>\n</tbody>\n</table></figure>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDie DSLs, die wir als \"HTML-basiert\" beschrieben haben, haben keine offiziellen Namen. Sie sind nicht wirklich echte DSLs, aber sie sind nicht-standardisiertes HTML, also glauben wir, dass es sich lohnt, sie hervorzuheben.</p>\n</div>"}},{"type":"prose","value":{"id":"hat_das_framework_eine_starke_community","title":"Hat das Framework eine starke Community?","isH3":true,"content":"<p>Dies ist vielleicht die schwierigste Metrik zu messen, da die Größe der Community nicht direkt mit leicht zugänglichen Zahlen korreliert. Sie können sich die Anzahl der Sterne eines Projekts auf GitHub oder die wöchentlichen npm-Downloads ansehen, um eine Vorstellung von dessen Beliebtheit zu bekommen, aber manchmal ist das Beste, was Sie tun können, ein paar Foren zu durchsuchen oder mit anderen Entwicklern zu sprechen. Es geht nicht nur um die Größe der Community, sondern auch darum, wie einladend und inklusiv sie ist und wie gut die verfügbare Dokumentation ist.</p>"}},{"type":"prose","value":{"id":"meinungen_im_internet","title":"Meinungen im Internet","isH3":true,"content":"<p>Vertrauen Sie nicht nur auf unser Wort zu diesem Thema – es gibt Diskussionen auf der ganzen Welt. Die Wikimedia Foundation hat kürzlich beschlossen, Vue für ihr Front-End zu verwenden, und eine <a href=\"https://phabricator.wikimedia.org/T241180\" class=\"external\" target=\"_blank\">Anfrage zur Kommentierung (RFC) zur Einführung eines Frameworks</a> veröffentlicht. Eric Gardner, der Autor des RFC, nahm sich die Zeit, die Bedürfnisse des Wikimedia-Projekts darzulegen und warum bestimmte Frameworks gute Wahlmöglichkeiten für das Team waren. Dieses RFC dient als großartiges Beispiel für die Art von Forschung, die Sie für sich selbst leisten sollten, wenn Sie planen, ein Front-End-Framework zu verwenden.</p>\n<p>Die <a href=\"https://stateofjs.com/\" class=\"external\" target=\"_blank\">Umfrage \"State of JavaScript\"</a> ist eine hilfreiche Sammlung von Feedback von JavaScript-Entwicklern. Sie umfasst viele Themen im Zusammenhang mit JavaScript, einschließlich Daten über sowohl die Verwendung von Frameworks als auch Entwicklermeinungen dazu. Derzeit gibt es mehrere Jahre an Daten, die es Ihnen ermöglichen, ein Gefühl für die Beliebtheit eines Frameworks zu bekommen.</p>\n<p>Das Vue-Team hat <a href=\"https://v2.vuejs.org/v2/guide/comparison.html\" class=\"external\" target=\"_blank\">Vue erschöpfend mit anderen beliebten Frameworks verglichen</a>. Es könnte einige Voreingenommenheiten in diesem Vergleich geben (die sie anmerken), aber es ist dennoch eine wertvolle Ressource.</p>"}},{"type":"prose","value":{"id":"alternativen_zu_client-seitigen_frameworks","title":"Alternativen zu client-seitigen Frameworks","isH3":false,"content":"<p>Wenn Sie nach Werkzeugen suchen, um den Webentwicklungsprozess zu beschleunigen, und Sie wissen, dass Ihr Projekt keine intensive client-seitige JavaScript-Anwendung erfordert, könnten Sie auf einige andere Lösungen für den Aufbau des Internets zurückgreifen:</p>\n<ul>\n<li>Ein Content-Management-System</li>\n<li>Server-seitiges Rendering</li>\n<li>Einen statischen Seitengenerator</li>\n</ul>"}},{"type":"prose","value":{"id":"content-management-systeme","title":"Content-Management-Systeme","isH3":true,"content":"<p><strong>Content-Management-Systeme</strong> (<strong>CMSes</strong>) sind alle Werkzeuge, die einem Benutzer erlauben, Inhalte für das Web zu erstellen, ohne selbst direkt Code zu schreiben. Sie sind eine gute Lösung für große Projekte, insbesondere Projekte, die Beiträge von Inhaltserstellern erfordern, die nur begrenzte Codierfähigkeiten haben, oder für Programmierer, die Zeit sparen möchten. Sie erfordern jedoch eine erhebliche Zeit zum Einrichten, und die Nutzung eines CMS bedeutet, dass Sie zumindest einen Teil der Kontrolle über das endgültige Ergebnis Ihrer Webseite abtreten. Wenn Ihr gewähltes CMS beispielsweise nicht standardmäßig zugänglich ist, ist es oft schwierig, dies zu verbessern.</p>\n<p>Einige beliebte CMS-Systeme sind <a href=\"https://wordpress.com/\" class=\"external\" target=\"_blank\">WordPress</a>, <a href=\"https://www.joomla.org/\" class=\"external\" target=\"_blank\">Joomla</a> und <a href=\"https://www.drupal.org/\" class=\"external\" target=\"_blank\">Drupal</a>.</p>"}},{"type":"prose","value":{"id":"server-seitiges_rendering","title":"Server-seitiges Rendering","isH3":true,"content":"<p><strong>Server-seitiges Rendering</strong> (<strong>SSR</strong>) ist eine Anwendungsarchitektur, bei der es Aufgabe des <em>Servers</em> ist, eine einseitige Anwendung zu rendern. Dies ist das Gegenteil des <em>client-seitigen Renderings</em>, das die gebräuchlichste und direkteste Möglichkeit ist, eine JavaScript-Anwendung zu erstellen. Das server-seitige Rendering ist auf dem Gerät des Clienten einfacher, da Sie ihnen nur eine gerenderte HTML-Datei senden, aber es kann schwierig einzurichten sein, verglichen mit einer client-seitig gerenderten Anwendung.</p>\n<p>Alle in diesem Modul besprochenen Frameworks unterstützen sowohl das server-seitige als auch das client-seitige Rendering. Schauen Sie sich <a href=\"https://nextjs.org/\" class=\"external\" target=\"_blank\">Next.js</a> für React an, <a href=\"https://nuxt.com/\" class=\"external\" target=\"_blank\">Nuxt</a> für Vue (ja, es ist verwirrend, und nein, diese Projekte sind nicht verwandt!), <a href=\"https://github.com/ember-fastboot/ember-cli-fastboot\" class=\"external\" target=\"_blank\">FastBoot</a> für Ember und <a href=\"https://angular.dev/guide/universal\" class=\"external\" target=\"_blank\">Angular Universal</a> für Angular.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEinige SSR-Lösungen werden von der Community geschrieben und gepflegt, während andere \"offizielle\" Lösungen sind, die vom Maintainer des Frameworks bereitgestellt werden.</p>\n</div>"}},{"type":"prose","value":{"id":"statische_seitengeneratoren","title":"Statische Seitengeneratoren","isH3":true,"content":"<p><a href=\"/de/docs/Glossary/SSG\">Statische Seitengeneratoren</a> sind Programme, die alle Webseiten einer mehrseitigen Website dynamisch erzeugen – einschließlich aller relevanten CSS- oder JavaScript-Dateien – sodass sie an beliebigen Orten veröffentlicht werden können. Der veröffentlichende Host könnte ein GitHub Pages Branch, eine Netlify-Instanz oder jeder private Server Ihrer Wahl sein, zum Beispiel. Diese Vorgehensweise bietet einige Vorteile, insbesondere in Bezug auf die Leistung (das Gerät Ihres Benutzers erstellt die Seite nicht mit JavaScript; sie ist bereits komplett) und Sicherheit (statische Seiten haben weniger Angriffsflächen). Diese Seiten können JavaScript dort verwenden, wo es nötig ist, sind aber nicht <em>darauf</em> angewiesen. Statische Seitengeneratoren benötigen Zeit, um gelernt zu werden, wie jedes andere Werkzeug auch, was ein Hindernis für Ihren Entwicklungsprozess sein kann.</p>\n<p>Statische Seiten können so wenige oder so viele einzigartige Seiten haben, wie Sie möchten. Genauso wie Frameworks Ihnen ermöglichen, schnell client-seitige JavaScript-Anwendungen zu schreiben, ermöglichen statische Seitengeneratoren eine Möglichkeit, schnell HTML-Dateien zu erstellen, die Sie sonst einzeln geschrieben hätten. Wie Frameworks ermöglichen statische Seitengeneratoren Entwicklern, Komponenten zu schreiben, die gemeinsame Teile Ihrer Webseiten definieren, und diese Komponenten zusammenzufügen, um eine endgültige Seite zu erstellen. Im Kontext von statischen Seitengeneratoren werden diese Komponenten <strong>Templates</strong> genannt. Von statische Seitengeneratoren erstellte Webseiten können sogar Zuhause für Framework-Anwendungen sein: Wenn Sie beispielsweise möchten, dass eine spezifische Seite Ihrer zunächst statisch generierten Website eine React-Anwendung startet, wenn Ihr Benutzer sie besucht, können Sie das tun.</p>\n<p>Statische Seitengeneratoren gibt es schon seit langem, und sie werden ständig optimiert und weiterentwickelt. Es gibt eine Vielzahl von Auswahlmöglichkeiten, einschließlich <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> und <a href=\"https://www.gatsbyjs.com/\" class=\"external\" target=\"_blank\">Gatsby</a>, welche auf verschiedenen Technologiestacks aufbauen und unterschiedliche Funktionen bieten. Andere Optionen, wie <a href=\"https://docusaurus.io/\" class=\"external\" target=\"_blank\">Docusaurus</a> und <a href=\"https://vitepress.dev/\" class=\"external\" target=\"_blank\">VitePress</a>, verwenden client-seitige Frameworks anstelle von Templates, generieren aber ähnlich optimierte statische Dateien.</p>\n<p>Wenn Sie mehr über statische Seitengeneratoren im Allgemeinen erfahren möchten, schauen Sie sich Tatiana Macs <a href=\"https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti/\" class=\"external\" target=\"_blank\">Einstiegs-Leitfaden für Eleventy</a> an. Im ersten Artikel der Serie erklären sie, was ein statischer Seitengenerator ist und wie er sich zu anderen Mitteln der Veröffentlichung von Webinhalten verhält.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Damit kommen wir zum Ende unserer Einführung in Frameworks — wir haben Ihnen bisher keinen Code beigebracht, aber hoffentlich haben wir Ihnen einen nützlichen Hintergrund darüber gegeben, warum Sie Frameworks überhaupt verwenden würden und wie Sie eines auswählen, und Sie davon begeistert gemacht, mehr zu lernen und sich damit zu beschäftigen!</p>\n<p>Unser nächster Artikel geht auf eine tiefere Ebene ein und betrachtet die spezifischen Arten von Funktionen, die Frameworks tendenziell bieten, und warum sie so funktionieren, wie sie es tun.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\"><span class=\"button-wrap\"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Introduction to client-side frameworks","native":"English (US)"},{"locale":"ja","title":"クライアントサイドフレームワークの概要","native":"日本語"},{"locale":"ko","title":"클라이언트 측 프레임워크 소개","native":"한국어"},{"locale":"zh-CN","title":"客户端框架介绍","native":"中文 (简体)"},{"locale":"zh-TW","title":"前端框架簡介","native":"正體中文 (繁體)"}],"pageTitle":"Einführung in client-seitige Frameworks - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Core","title":"Kern-Lernmodule"},{"uri":"/de/docs/Learn_web_development/Core/Frameworks_libraries","title":"JavaScript-Frameworks und -Bibliotheken"},{"uri":"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction","title":"Einführung in client-seitige Frameworks"}],"popularity":null,"short_title":"Einführung in client-seitige Frameworks","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/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=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><em><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\" aria-current=\"page\">Einführung in client-seitige Frameworks</a></em></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/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=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/core/frameworks_libraries/introduction","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/frameworks_libraries/introduction/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Wir beginnen unseren Blick auf Frameworks mit einem allgemeinen Überblick über das Thema, betrachten eine kurze Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man beginnt, darüber nachzudenken, ein Framework zu wählen, das man lernen möchte, und welche Alternativen es zu client-seitigen Frameworks gibt.","title":"Einführung in client-seitige Frameworks","toc":[{"text":"Das Aufkommen von Bibliotheken und Frameworks","id":"das_aufkommen_von_bibliotheken_und_frameworks"},{"text":"Welche Frameworks gibt es?","id":"welche_frameworks_gibt_es"},{"text":"Warum existieren Frameworks?","id":"warum_existieren_frameworks"},{"text":"Die Umständlichkeit von DOM-Änderungen","id":"die_umständlichkeit_von_dom-änderungen"},{"text":"Eine andere Möglichkeit, UIs zu erstellen","id":"eine_andere_möglichkeit_uis_zu_erstellen"},{"text":"Weitere Vorteile von Frameworks","id":"weitere_vorteile_von_frameworks"},{"text":"Dinge, die bei der Verwendung von Frameworks zu beachten sind","id":"dinge_die_bei_der_verwendung_von_frameworks_zu_beachten_sind"},{"text":"Zugänglichkeit auf einem von Frameworks getriebenen Internet","id":"zugänglichkeit_auf_einem_von_frameworks_getriebenen_internet"},{"text":"Wie man ein Framework auswählt","id":"wie_man_ein_framework_auswählt"},{"text":"Alternativen zu client-seitigen Frameworks","id":"alternativen_zu_client-seitigen_frameworks"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>