CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>framework - IndieWeb</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )wikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"f24d7174731201d4ba26d735","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"framework","wgTitle":"framework","wgCurRevisionId":96623,"wgRevisionId":96623,"wgArticleId":5124,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["jargon"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"framework","wgRelevantArticleId":5124,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[]};RLSTATE={"skins.vector.user.styles":"ready","site.styles":"ready","user.styles":"ready","skins.vector.user":"ready","user":"ready","user.options":"loading","codex-search-styles":"ready","skins.vector.styles":"ready", "skins.vector.icons":"ready"};RLPAGEMODULES=["site","mediawiki.page.ready","mediawiki.toc","skins.vector.js"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/wiki/load.php?lang=en&modules=codex-search-styles%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022"> <script async="" src="/wiki/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/wiki/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.41.0"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="A framework (in this context software framework or web framework in particular) is a software library and ways of using it that provides an alternative (often simplified) way of writing software, typically explicitly instead of how you would normally write that software."> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"> <link rel="icon" href="/favicon.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="IndieWeb (en)"> <link rel="EditURI" type="application/rsd+xml" href="https://indieweb.org/wiki/api.php?action=rsd"> <link rel="license" href="/IndieWebCamp:Copyrights"> <link rel="alternate" type="application/atom+xml" title="IndieWeb Atom feed" href="/wiki/index.php?title=Special:RecentChanges&feed=atom"> <meta property="og:type" content="article"> <meta property="og:site_name" content="IndieWeb"> <meta property="og:title" content="framework"> <meta property="og:description" content="A framework (in this context software framework or web framework in particular) is a software library and ways of using it that provides an alternative (often simplified) way of writing software, typically explicitly instead of how you would normally write that software."> <meta property="og:url" content="https://indieweb.org/framework"> <link rel="webmention" href="https://webmention.io/indiewebcamp/webmention"> <script src="https://cdn.usefathom.com/script.js" site="ZPHFRYAA" defer></script> </head> <body class="skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-framework rootpage-framework skin-vector-2022 action-view skin--responsive"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-" class="vector-menu mw-portlet mw-portlet- emptyPortlet" > <div class="vector-menu-heading"> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-Explore_the_IndieWeb" class="vector-menu mw-portlet mw-portlet-Explore_the_IndieWeb" > <div class="vector-menu-heading"> Explore the IndieWeb </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🗽-Principles" class="mw-list-item"><a href="/principles"><span>🗽 Principles</span></a></li><li id="n-📜-Community-posts" class="mw-list-item"><a href="https://stream.indieweb.org/"><span>📜 Community posts</span></a></li><li id="n-🌐-Visit-a-random-site" class="mw-list-item"><a href="https://xn--sr8hvo.ws/random"><span>🌐 Visit a random site</span></a></li><li id="n-🎉-Get-a-personal-site" class="mw-list-item"><a href="/Getting_Started"><span>🎉 Get a personal site</span></a></li><li id="n-ℹ️-FAQ" class="mw-list-item"><a href="/FAQ"><span>ℹ️ FAQ</span></a></li><li id="n-🎁-2024-Gift-Calendar!" class="mw-list-item"><a href="/IndieWeb_Gift_Calendar"><span>🎁 2024 Gift Calendar!</span></a></li> </ul> </div> </div> <div id="p-Join_the_community!" class="vector-menu mw-portlet mw-portlet-Join_the_community" > <div class="vector-menu-heading"> Join the community! </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🌈-Code-of-conduct" class="mw-list-item"><a href="/code-of-conduct"><span>🌈 Code of conduct</span></a></li><li id="n-📅-Events:-IndieWebCamps,-Homebrew-Website-Clubs-(HWC),-and-more!" class="mw-list-item"><a href="https://events.indieweb.org/"><span>📅 Events: IndieWebCamps, Homebrew Website Clubs (HWC), and more!</span></a></li><li id="n-👥--Meetups:-2025-01-08" class="mw-list-item"><a href="https://events.indieweb.org/tag/hwc"><span>👥 Meetups: 2025-01-08</span></a></li><li id="n-🎪-IWC-San-Diego-12/7…8" class="mw-list-item"><a href="/next-iwc"><span>🎪 IWC San Diego 12/7…8</span></a></li><li id="n-💬-Join-#indieweb-chat" class="mw-list-item"><a href="/discuss"><span>💬 Join #indieweb chat</span></a></li><li id="n-📜-Chat-log" class="mw-list-item"><a href="https://chat.indieweb.org/"><span>📜 Chat log</span></a></li><li id="n-📩-Subscribe-to-newsletter" class="mw-list-item"><a href="/this-week-in-the-indieweb"><span>📩 Subscribe to newsletter</span></a></li><li id="n-❤️-Sponsor" class="mw-list-item"><a href="/how-to-sponsor"><span>❤️ Sponsor</span></a></li> </ul> </div> </div> <div id="p-Developers" class="vector-menu mw-portlet mw-portlet-Developers" > <div class="vector-menu-heading"> Developers </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🔩-Building-Blocks" class="mw-list-item"><a href="/Category:building-blocks"><span>🔩 Building Blocks</span></a></li><li id="n-📑-Projects" class="mw-list-item"><a href="/Projects"><span>📑 Projects</span></a></li><li id="n-🧰-Standards" class="mw-list-item"><a href="https://spec.indieweb.org/"><span>🧰 Standards</span></a></li><li id="n-💬-Join-developer-chat" class="mw-list-item"><a href="/discuss#dev"><span>💬 Join developer chat</span></a></li> </ul> </div> </div> <div id="p-Wiki_resources" class="vector-menu mw-portlet mw-portlet-Wiki_resources" > <div class="vector-menu-heading"> Wiki resources </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-👤-Login" class="mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2F"><span>👤 Login</span></a></li><li id="n-✳️-Recent-changes" class="mw-list-item"><a href="/Special:RecentChanges"><span>✳️ Recent changes</span></a></li><li id="n-🖼-Recent-uploads" class="mw-list-item"><a href="/Special:ListFiles"><span>🖼 Recent uploads</span></a></li><li id="n-🎲-Random-page" class="mw-list-item"><a href="/Special:Random"><span>🎲 Random page</span></a></li><li id="n-📑-5,550-articles" class="mw-list-item"><a href="/Special:Statistics"><span>📑 5,550 articles</span></a></li><li id="n-©-Wiki-content-is-CC0" class="mw-list-item"><a href="/IndieWebCamp:Copyrights"><span>© Wiki content is CC0</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/Main_Page" class="mw-logo"> <span class="mw-logo-container"> <img class="mw-logo-wordmark" alt="IndieWeb" src="/img/indiewebcamp-logo-lockup-color@1x.png" style="width: 10.125em; height: 4.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" id="" title="Search IndieWeb [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/wiki/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search IndieWeb" aria-label="Search IndieWeb" autocapitalize="none" title="Search IndieWeb [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links" aria-label="Personal tools" role="navigation" > <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet mw-portlet-vector-user-menu-overflow" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2Fframework" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span>Log in</span></a></li> </ul> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2Fframework" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox"> <nav id="mw-panel-toc" role="navigation" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Examples" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span>Examples</div> </a> <button aria-controls="toc-Examples-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Examples subsection</span> </button> <ul id="toc-Examples-sublist" class="vector-toc-list"> <li id="toc-JS" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#JS"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span>JS</div> </a> <ul id="toc-JS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Python" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Python"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span>Python</div> </a> <ul id="toc-Python-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Criticism" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Criticism"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span>Criticism</div> </a> <ul id="toc-Criticism-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_Also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_Also"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span>See Also</div> </a> <ul id="toc-See_Also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> <div class="mw-content-container"> <main id="content" class="mw-body h-entry" role="main"> <header class="mw-body-header vector-page-titlebar"> <label id="vector-toc-collapsed-button" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only" for="vector-toc-collapsed-checkbox" role="button" aria-controls="vector-toc" tabindex="0" title="Table of Contents"> <span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span> <span>Toggle the table of contents</span> </label> <nav role="navigation" aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">framework</span></h1> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/framework" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="new vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=Talk:framework&action=edit&redlink=1" rel="discussion" title="Discussion about the content page (page does not exist) [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="p-variants" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="p-variants-label" for="p-variants-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/framework"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=framework&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=framework&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/framework"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=framework&action=edit"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=framework&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/Special:WhatLinksHere/framework" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/Special:RecentChangesLinked/framework" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-print" class="mw-list-item"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/wiki/index.php?title=framework&oldid=96623" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/wiki/index.php?title=framework&action=info" title="More information about this page"><span>Page information</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <nav class="vector-page-tools-landmark vector-sticky-pinned-container" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From IndieWeb</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-parser-output"> <p class="plainlinks template_stub" style="text-indent: 2em; font-style: italic;"> <b>This article is a <a href="/stub" title="stub">stub</a>.</b> You can help the IndieWeb wiki by <a class="external text" href="https://indieweb.org/wiki/index.php?title=framework&action=edit">expanding it</a>. </p> <p><br /> <span class="p-summary">A <b><dfn>framework</dfn></b> (in this context <dfn>software framework</dfn> or <dfn>web framework</dfn> in particular) is a software <a href="/library" title="library">library</a> and ways of using it that provides an alternative (often simplified) way of writing software, typically explicitly instead of how you would normally write that software.</span> </p><p>If a <a href="/library" title="library">library</a> provides different (even simplified) ways of writing software, but explicitly adjacent to, complementary with, or even dependent on how you would normally write that software, then it is not typically considered a framework. </p> <meta property="mw:PageProp/toc" /> <h2><span class="mw-headline" id="Examples">Examples</span></h2> <h3><span class="mw-headline" id="JS">JS</span></h3> <p><a href="/Javascript" class="mw-redirect" title="Javascript">Javascript</a> frameworks </p> <ul><li><a href="/Angular" title="Angular">Angular</a></li> <li><a href="/Ember" class="mw-redirect" title="Ember">Ember</a></li> <li><a href="/React" title="React">React</a></li> <li><a href="/Svelte" title="Svelte">Svelte</a> and <a href="/Svelte#Kit" title="Svelte">Svelte Kit</a></li> <li>...</li></ul> <h3><span class="mw-headline" id="Python">Python</span></h3> <ul><li><a href="/Flask" title="Flask">Flask</a></li> <li><a href="/Django" title="Django">Django</a></li></ul> <h2><span class="mw-headline" id="Criticism">Criticism</span></h2> <ul><li>2017-02-10 Adrian Holovaty: <cite><a class="external text" href="http://www.holovaty.com/writing/ppk-talk/">About the PPK talk and tweet</a></cite> about PPK's talk “What are the things you do wrong as a Web Developer?”, see also <a class="external text" href="https://twitter.com/adrianholovaty/status/829777292633194497"><img style="max-width:100%" src="https://pbs.twimg.com/media/C4P2BpPXAAA9qO0.jpg" alt="PPK giving a talk with a slide about tools and web developers" /></a></li></ul> <h2><span class="mw-headline" id="See_Also">See Also</span></h2> <ul><li><a href="/library" title="library">library</a></li> <li><a class="external text" href="https://medium.com/@tomdale/javascript-frameworks-distribution-channels-for-good-ideas-9f3b95c0e293">JavaScript Frameworks: Distribution Channels for Good Ideas</a></li> <li><a class="external free" href="https://twitter.com/baseLogiK/status/1001976304399519749">https://twitter.com/baseLogiK/status/1001976304399519749</a> <ul><li>"Switching to a new framework won't make you better at writing maintainable code." <a class="external text" href="https://twitter.com/baseLogiK">@baseLogiK</a> May 30, 2018</li></ul></li> <li><a class="external free" href="https://twitter.com/zeldman/status/1002198029674385408">https://twitter.com/zeldman/status/1002198029674385408</a> <ul><li>"“Web making has lately become something of a dick measuring competition.” <br /><br />Our addiction to complicated toolchains and overbuilt frameworks is out of control. Read “The Cult of the Complex” by Jeffrey @Zeldman (that’s me!) in today’s @alistapart.<br /><br /><a class="external free" href="https://alistapart.com/article/cult-of-the-complex">https://alistapart.com/article/cult-of-the-complex</a>" <a class="external text" href="https://twitter.com/zeldman">@zeldman</a> May 31, 2018</li></ul></li> <li>2018-05-31 A List Apart: Zeldman: <a class="external text" href="https://alistapart.com/article/cult-of-the-complex">The Cult of the Complex</a> <blockquote><p>In some strange way, stepping back from a meaningless rejection of divs opened the door to gaseous frameworks that abuse them. </p></blockquote></li> <li>Use-cases for server-side frameworks (e.g. for PHP) : <a href="/templating" class="mw-redirect" title="templating">templating</a>, <a href="/routing" title="routing">routing</a></li> <li class="mw-empty-elt"></li> <li><a class="external free" href="https://twitter.com/mikeriethmuller/status/1147042962997563393">https://twitter.com/mikeriethmuller/status/1147042962997563393</a> <ul><li>"2005 - Prototype<br />2007 - MooTools<br />2006 - jQuery<br />2006 - Sass (no scss)<br />2006 - YUI<br />2009 - OOCSS<br />2006 - SCSS<br />2011 - SMACSS<br />2011 - Bootstrap<br />2011 - Grunt<br />2012 - BEM<br />2012 - Webpack<br />2013 - React<br />2013 - Gulp<br />2015 - Babel<br />2015 - CSS Modules<br />2016 - Styled Components<br />2016 - Create React App" <a class="external text" href="http://madebymike.com.au">@MikeRiethmuller</a> July 5, 2019</li></ul></li> <li>Criticism: <a class="external free" href="https://twitter.com/soapdog/status/1377718014410391553">https://twitter.com/soapdog/status/1377718014410391553</a> <ul><li>"this kind of shit is why the #web is fucked. I simply wanted a ref to the Twitter text input box, and what I found was the div megadungeon. Fuck modern web frameworks and modern web developers, you've broken something wonderful." <a class="external text" href="https://bit.ly/3dvG1ob">@soapdog</a> April 1, 2021</li></ul></li> <li>^^ <img src="https://pbs.twimg.com/media/Ex6jB0xWUAIh-as.jpg" alt="Ex6jB0xWUAIh-as.jpg" /></li> <li>Criticism: 2023-02-22 <a class="external text" href="https://www.spicyweb.dev/the-great-gaslighting-of-the-js-age/">The Great Gaslighting of the JavaScript Era</a> <blockquote><p>The Burden of Proof is On You, Frontend Framework Stans, Not the Vanilla Web!</p></blockquote></li> <li>Issue: adoption tends to be exaggerated due to a minority of loud voices on <a href="/social_media" title="social media">social media</a>: 2023-02-14 <a class="external text" href="https://andy-bell.co.uk/the-extremely-loud-minority/">The (extremely) loud minority</a> <blockquote><p>Even if you add together React and Vue, it’s still less than 5% of all websites.</p></blockquote></li> <li>Criticism of JS frameworks in particular: 2024-08-28 <a class="external text" href="https://thenewstack.io/developers-rail-against-javascript-merchants-of-complexity/">Developers Rail Against JavaScript ‘Merchants of Complexity’</a> <blockquote><p>“People are getting sick of frameworks. All the JavaScript frameworks are so… what do you call it, like [un]wieldy. It takes so much work to just maintain this code, and then it updates to a new version, you need to change everything.”</p></blockquote></li></ul>    </div> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://indieweb.org/wiki/index.php?title=framework&oldid=96623">https://indieweb.org/wiki/index.php?title=framework&oldid=96623</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/Category:jargon" title="Category:jargon">jargon</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" role="contentinfo" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 28 August 2024, at 22:12.</li> <li id="footer-info-copyright">Content is available under <a href="/IndieWebCamp:Copyrights" class="mw-redirect" title="IndieWebCamp:Copyrights">a CC0 public domain dedication</a> unless otherwise noted.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="/IndieWeb:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/IndieWeb:About">About IndieWeb</a></li> <li id="footer-places-disclaimers"><a href="/IndieWeb:General_disclaimer">Code of Conduct</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="https://i.creativecommons.org/p/zero/1.0/88x31.png" alt="a CC0 public domain dedication" width="88" height="31" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/wiki/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/wiki/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /wiki/resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul> <li> <button class="cdx-button cdx-button--icon-only vector-limited-width-toggle" id=""><span class="vector-icon mw-ui-icon-fullScreen mw-ui-icon-wikimedia-fullScreen"></span> <span>Toggle limited content width</span> </button> </li> </ul> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":204,"wgPageParseReport":{"limitreport":{"cputime":"0.010","walltime":"0.011","ppvisitednodes":{"value":34,"limit":1000000},"postexpandincludesize":{"value":310,"limit":2097152},"templateargumentsize":{"value":0,"limit":2097152},"expansiondepth":{"value":4,"limit":100},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":0,"limit":5000000},"timingprofile":["100.00% 1.844 1 Template:stub","100.00% 1.844 1 -total"]},"cachereport":{"timestamp":"20250102104644","ttl":86400,"transientcontent":false}}});});</script> </body> </html>