{{short description|Software framework to support the development of websites}} A '''web framework''' ('''WF'''), '''web application framework''' ('''WAF'''), or '''web development framework''' is a [[software framework]] that is designed to support the development of [[web application]]s including web services, [[web resource]]s, and [[web API]]s. Web frameworks provide a standard way to build and deploy web applications on the [[World Wide Web]]. Web frameworks aim to automate the overhead associated with common activities performed in [[web development]]. For example, many web frameworks provide [[library (computing)|libraries]] for [[database]] access, [[template processor|templating]] frameworks, and [[session (computer science)|session]] management, and they often promote [[code reuse]].{{refn |{{cite web |url=http://docforge.com/wiki/Web_application_framework |title= Web application framework |author=Multiple (wiki) |website=Docforge |archive-url=https://web.archive.org/web/20150723163302/http://docforge.com/wiki/Web_application_framework |archive-date=2015-07-23 }} }} Although they often target development of [[dynamic web page|dynamic web site]]s, they are also applicable to [[static web page|static website]]s.{{refn |{{cite web |title=Top Open-Source Static Site Generators |url=https://www.staticgen.com/ |website=StaticGen}}}}
==History== {{Further|Rich web application}}
As the design of the [[World Wide Web]] was not inherently dynamic, early [[hypertext]] consisted of hand-coded [[HTML]] text files that were published on [[web servers]]. Any modifications to published pages needed to be performed by the pages' author. In 1993, the [[Common Gateway Interface]] (CGI) standard was introduced for interfacing external applications with web servers, to provide a [[dynamic web page]] that reflected user inputs.<ref>{{cite web | title = CGI: Common Gateway Interface | url=http://hoohoo.ncsa.uiuc.edu/cgi/intro.html | archive-url = https://web.archive.org/web/20090409213905/http://hoohoo.ncsa.uiuc.edu/cgi/intro.html | archive-date = 2009-04-09 }}</ref>
Original implementations of the CGI interface typically had adverse effects on the server load however, because each request started a separate [[Process (computing)|process]].<ref>{{Cite web|title=CGI|url=https://www.ibm.com/docs/en/i/7.4?topic=functionality-cgi|access-date=2021-05-07|website=www.ibm.com|language=en-us}}</ref> More recent implementations utilize persistent processes amongst other techniques to reduce the footprint in the server's resources and offer a general performance boost.{{citation needed|date=November 2021}}
In 1995, fully integrated server/language development environments first emerged and new web-specific languages were introduced, such as [[ColdFusion]], [[PHP]], and [[Active Server Pages]].{{citation needed|date=January 2017}}
Although the vast majority of languages for creating dynamic web pages have [[library (computing)|libraries]] to help with common tasks, web applications often require specific libraries for particular tasks, such as creating [[HTML]] (for example, [[Jakarta Faces]]).{{citation needed|date=January 2017}}
In the late 1990s, mature, "full stack" frameworks began to appear, that often gathered multiple libraries useful for [[web development]] into a single cohesive [[software stack]] for web developers to use.{{citation needed|date=January 2017}}
==Types of framework architectures== Most web frameworks are based on the [[model–view–controller]] (MVC) [[architectural pattern|pattern]].{{citation needed|date=January 2017}}
===Model–view–controller (MVC)=== {{Main article|Model–view–controller}} Many frameworks follow the MVC [[architectural pattern (computer science)|architectural pattern]] to separate the [[data model]] into [[business rule]]s (the "controller") and the [[user interface]] (the "view"). This is generally considered a good practice as it [[Separation of concerns|modularizes code]], promotes [[code reuse]], and allows multiple interfaces to be applied. In web applications, this permits different views to be presented, for example serving different [[web page]]s for mobile vs. desktop browsers, or providing machine-readable [[web service]] interfaces.
====Push-based vs. pull-based==== Most MVC frameworks follow a push-based architecture also called "action-based". These frameworks use actions that do the required processing, and then "push" the data to the view layer to render the results.<ref>{{cite web | last = Thomson | first = Kris | title = Clarification on MVC= Pull and MVC Push | url=https://www.theserverside.com/discussions/thread/22143.html | date = 2003-10-29 | access-date = 2007-07-29 }}</ref> An alternative to this is pull-based architecture, sometimes also called "component-based". These frameworks start with the view layer, which can then "pull" results from multiple controllers as needed. In this architecture, multiple controllers can be involved with a single view.
===Three-tier organization=== In [[Three-tier architecture|three-tier organization]], applications are structured around three physical tiers: client, application, and database.<ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/ff647546.aspx | title=Three-tiered distribution | author=Microsoft | access-date=2011-09-19 }}</ref><ref>{{cite web | url=http://download.oracle.com/docs/cd/E10316_01/cs/cs_doc_10/documentation/integrator/clustering_concepts_10en.pdf | title=clustering_concepts_10en | author=Oracle | access-date=2011-09-19}}</ref><ref>{{cite web | url= http://www.sis.pitt.edu/~perkoski/is1092/slides/chapter01.ppt | title=Introduction to Web Development | author=Robert R. Perkoski |archive-url=https://web.archive.org/web/20131107052241/http://www.sis.pitt.edu/~perkoski/is1092/slides/chapter01.ppt | archive-date=2013-11-07}}</ref><ref>{{cite web | url=http://publib.boulder.ibm.com/html/as400/v5r1/ic2933/index.htm?info/rzaii/rzaiithreetier.htm | title= Using Client Access Express in a three tier environment | author=IBM | access-date=2011-09-19}}</ref> The database is normally an [[relational database management system|RDBMS]]. The application contains the business logic, running on a server and communicates with the client using [[HTTP]].<ref>{{cite web | url=http://download.oracle.com/docs/cd/B25221_05/web.1013/b13593/undtldev010.htm | title=Understanding the Three-Tier Architecture | author=Oracle | access-date=2011-09-19}}</ref> The client on web applications is a web browser that runs HTML generated by the application layer.<ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/aa905336.aspx | title=Pragmatic Architecture: Layering | author=Microsoft | access-date=2011-09-19}}</ref><ref>{{cite web | url=http://www.arokiait.com/3-tire-web-architechture.htm | title=3-Tier Web Architecture | author=Arokia | access-date=2011-09-19 | archive-date=2012-07-18 | archive-url=https://archive.today/20120718123635/http://www.arokiait.com/3-tire-web-architechture.htm | url-status=dead }}</ref> The term should not be confused with MVC, where, unlike in three-tier architecture, it is considered a good practice to keep business logic away from the controller, the "middle layer".<ref>{{cite web|url=http://www.arrangeactassert.com/asp-net-mvc-controller-best-practices-–-skinny-controllers/ |title=ASP.NET MVC Controller Best Practices |access-date=2011-09-19 |url-status=dead |archive-url=https://web.archive.org/web/20111011174215/http://www.arrangeactassert.com:80/asp-net-mvc-controller-best-practices-%E2%80%93-skinny-controllers/ |archive-date=2011-10-11 }}</ref><ref>{{cite web | url=http://weblog.jamisbuck.org/2006/10/18/skinny-controller-fat-model | title=Skinny Controller, Fat Model | author=Jamis Buck |archive-url=https://web.archive.org/web/20150516021854/http://www.arrangeactassert.com/asp-net-mvc-controller-best-practices-%E2%80%93-skinny-controllers/ | archive-date=2015-05-16}}</ref>
==Framework applications== Frameworks are built to support the construction of internet applications based on a single programming language, ranging in focus from general purpose tools such as Zend Framework and Ruby on Rails, which augment the capabilities of a specific language, to native-language programmable packages built around a specific user application, such as [[content management system]]s (CMS), some mobile development tools and some portal tools.<ref>{{Cite news|url=https://www.wired.com/2010/02/get_started_with_web_frameworks/|title=Getting Started With Web Frameworks|publisher=[[Wired Magazine]]|access-date=2018-04-02|language=en}}</ref>
===General-purpose website frameworks=== Web frameworks must function according to the architectural rules of browsers and [[communication protocol|protocols]] such as [[Hypertext Transfer Protocol|HTTP]], which is [[Stateless protocol|stateless]]. Webpages are served up by a [[server (computing)|server]] and can then be modified by the browser using [[JavaScript]]. Either approach has its advantages and disadvantages.{{citation needed|date=January 2017}}
Server-side page changes typically require that the page be refreshed, but allow any language to be used and more computing power to be utilized. Client-side changes allow the page to be updated in small chunks which feels like a desktop application, but are limited to JavaScript and run in the user's browser, which may have limited computing power. Some mix of the two is typically used.<ref>{{Cite web|url=https://spin.atomicobject.com/2015/04/06/web-app-client-side-server-side/|title=Web Application Architecture – Client-Side vs. Server-Side|last=KLIMUSHYN|first=Mel|website=Atomic Spin|date=6 April 2015|access-date=2016-03-06}}</ref> Applications which make heavy use of JavaScript and only refresh parts of the page, are called [[single-page application]]s and typically make use of a client-side JavaScript web framework to organize the code.{{citation needed|date=January 2017}}
====Server-side==== {{col div|colwidth=30em}} *[[Apache Wicket]] *[[ASP.NET Core]] *[[CakePHP]] *[[Catalyst (software)|Catalyst]] *[[CodeIgniter]] *[[Django (web framework)|Django]] *[[Express.js]] *[[Flask (web framework)|Flask]] *[[FastAPI (web framework)| FastAPI]] *[[Grails (framework)|Grails]] *[[Laravel]] *[[Mojolicious]] *[[Pop PHP Framework]] *[[Phoenix (web framework)|Phoenix]] *[[Ruby on Rails]] *[[Sails.js]] *[[Seaside (software)]] *[[Symfony]] *[[Spring MVC]] *[[Wt (web toolkit)]] *[[Yii]] *[[Zend Framework]] {{colend}}
====Client-side==== {{Main article|Single-page application}}
Examples include [[Backbone.js]], [[AngularJS]], [[Angular (web framework)|Angular]], [[Ember.js]], [[React (software)|ReactJS]], [[jQuery UI]], [[Svelte]], and [[Vue.js]].<ref>{{Cite web|url=https://www.airpair.com/js/javascript-framework-comparison|title=AngularJS vs. Backbone.js vs. Ember.js|website=www.airpair.com|language=en-US|access-date=2016-06-04|archive-date=2023-03-26|archive-url=https://web.archive.org/web/20230326023041/https://www.airpair.com/js/javascript-framework-comparison|url-status=dead}}</ref>
=== Capabilities and Trade-offs in Modern Frameworks === JavaScript-based web application frameworks, such as React and Vue, provide extensive capabilities but come with associated trade-offs. These frameworks often extend or enhance features available through native web technologies, such as routing, component-based development, and state management. While native web standards, including Web Components, modern JavaScript APIs like Fetch and ES Modules, and browser capabilities like Shadow DOM, have advanced significantly, frameworks remain widely used for their ability to enhance developer productivity, offer structured patterns for large-scale applications, simplify handling edge cases, and provide tools for performance optimization.<ref name=":02">{{Cite book |last1=Uzayr |first1=Sufyan bin |last2=Cloud |first2=Nicholas |last3=Ambler |first3=Tim |title=JavaScript Frameworks for Modern Web Development: The Essential Frameworks, Libraries, and Tools to Learn Right Now |date=November 2019 |publisher=Apress |isbn=978-1484249949}}</ref><ref name=":1">{{Cite book |last1=Rojas |first1=Carlos |title=Building Native Web Components: Front-End Development with Polymer and Vue.js |date=13 November 2020 |publisher=Apress |isbn=978-1484259047}}</ref><ref name=":2">{{Cite book |title=Hands-On JavaScript High Performance: Build faster web apps using Node.js, Svelte.js, and WebAssembly |isbn=978-1838821098}}</ref>
Frameworks can introduce abstraction layers that may contribute to performance overhead, larger bundle sizes, and increased complexity. Modern frameworks, such as React 18 and Vue 3, address these challenges with features like concurrent rendering, tree-shaking, and selective hydration. While these advancements improve rendering efficiency and resource management, their benefits depend on the specific application and implementation context. Lightweight frameworks, such as Svelte and Preact, take different architectural approaches, with Svelte eliminating the virtual DOM entirely in favor of compiling components to efficient JavaScript code, and Preact offering a minimal, compatible alternative to React. Framework choice depends on an application’s requirements, including the team’s expertise, performance goals, and development priorities.<ref name=":02" /><ref name=":1" /><ref name=":2" />
A newer category of web frameworks, including enhance.dev, Astro, and Fresh, leverages native web standards while minimizing abstractions and development tooling.<ref>{{Cite web |title=Enhance |website=[[GitHub]] |url=https://github.com/enhance-dev }}</ref><ref>{{Cite web |title=Astro framework |website=[[GitHub]] |url=https://github.com/withastro/astro }}</ref><ref>{{Cite web |title=Fresh |website=[[GitHub]] |url=https://github.com/denoland/fresh }}</ref> These solutions emphasize [[progressive enhancement]], [[server-side rendering]], and optimizing performance. Astro renders static HTML by default while hydrating only interactive parts. Fresh focuses on server-side rendering with zero runtime overhead. Enhance.dev prioritizes progressive enhancement patterns using Web Components. While these tools reduce reliance on client-side JavaScript by shifting logic to build-time or server-side execution, they still use JavaScript where necessary for interactivity. This approach makes them particularly suitable for performance-critical and content-focused applications.<ref name=":02" /><ref name=":1" /><ref name=":2" />
==Features== Frameworks typically set the [[control flow]] of a program and allow the user of the framework to "hook into" that flow by exposing various events.<ref name=":0">{{Cite web|url=http://martinfowler.com/bliki/InversionOfControl.html|title=bliki: InversionOfControl|last=Fowler|first=Martin|website=martinfowler.com|access-date=2016-03-06}}</ref> This "[[inversion of control]]" design pattern is considered to be a defining principle of a framework, and benefits the code by enforcing a common flow for a team which everyone can customize in similar ways.<ref name=":0" /> For example, some popular "microframeworks" such as Ruby's [[Sinatra (software)|Sinatra]] (which inspired [[Express.js]]) allow for "middleware" hooks prior to and after HTTP requests. These middleware functions can be anything, and allow the user to define logging, authentication and session management, and redirecting.<ref>{{Cite web|url=http://www.capitalone.io/blog/successful-framework-philosophies/|title=Capital One Engineering – Philosophies that Shaped Successful Frameworks|last=Xue|first=Qiang|website=www.capitalone.io|access-date=2016-03-06|archive-date=2016-03-13|archive-url=https://web.archive.org/web/20160313083028/http://www.capitalone.io/blog/successful-framework-philosophies/|url-status=dead}}</ref>
===Web template system=== {{Main article|Web template system}}
===Caching=== {{Main article|Web cache}} Web caching is the [[web cache|caching]] of [[World Wide Web|web]] [[electronic document|documents]] in order to reduce [[Bandwidth (computing)|bandwidth]] usage, [[web server|server]] [[load (computing)|load]], and perceived "[[Latency (engineering)|lag]]". A web cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met. Some application frameworks provide mechanisms for caching documents and bypassing various stages of the page's preparation, such as database access or template interpretation.{{citation needed|date=January 2017}}
===Security=== {{Main article|Web application security}} Some web frameworks come with [[authentication]] and [[authorization]] frameworks, that enable the [[web server]] to identify the users of the application, and restrict access to functions based on some defined criteria. [[Drupal]] is one example that provides role-based access to pages, and provides a web-based interface for creating users and assigning them roles.{{citation needed|date=January 2017}}
===Database access, mapping and configuration=== Many web frameworks create a unified [[API]] to a database backend, enabling web applications to work with a variety of databases with no code changes, and allowing programmers to work with higher-level concepts. Additionally, some [[object-oriented programming|object-oriented]] frameworks contain mapping tools to provide [[object-relational mapping]], which maps [[object-oriented programming|objects]] to [[tuple]]s.<ref name="ActiveRecordBasics">{{cite web |url=https://guides.rubyonrails.org/active_record_basics.html |title=Active Record Basics |website=Ruby on Rails |access-date=March 20, 2021 |quote=Object Relational Mapping, commonly referred to as its abbreviation ORM, is a technique that connects the rich objects of an application to tables in a relational database management system...Active Record automatically creates methods to allow an application to read and manipulate data stored within its tables.}}</ref>
Some frameworks minimize web application configuration through the use of [[Introspection (computer science)|introspection]] and/or following well-known conventions. For example, many Java frameworks use [[Hibernate (Java)|Hibernate]] as a persistence layer, which can generate a database schema at runtime capable of persisting the necessary information. This allows the application designer to design business objects without needing to explicitly define a database schema. Frameworks such as [[Ruby on Rails]] can also work in reverse, that is, define properties of model objects at runtime based on a database schema.<ref name="ActiveRecordBasics" />
Other features web frameworks may provide include [[database transaction|transactional support]]<ref>{{cite web |url=https://api.rubyonrails.org/classes/ActiveRecord/Transactions/ClassMethods.html |title=Active Record Transactions |website=Ruby on Rails |access-date=March 20, 2021 }}</ref> and [[Data migration|database migration tools]].<ref name="ActiveRecordBasics" />
===URL mapping=== {{see also|Front controller|URL redirection}} A framework's [[Uniform Resource Locator|URL]] mapping or routing facility is the mechanism by which the framework interprets URLs. Some frameworks, such as Drupal and Django, match the provided URL against pre-determined patterns using [[regular expression]]s, while some others use [[rewriting]] techniques to translate the provided URL into one that the underlying engine will recognize. Another technique is that of [[graph traversal]] such as used by [[Zope]], where a URL is decomposed in steps that traverse an object graph (of models and views).{{citation needed|date=January 2017}}
A URL mapping system that uses pattern matching or rewriting to route and handle requests allows for [[URL shortening|shorter]] more "[[friendly URL]]s" to be used, increasing the simplicity of the site and allowing for better indexing by search engines. For example, a URL that ends with "/page.cgi?cat=science&topic=physics" could be changed to simply "/page/science/physics". This makes the URL easier for people to remember, read and write, and provides search engines with better information about the structural layout of the site. A graph traversal approach also tends to result in the creation of friendly URLs. A shorter URL such as "/page/science" tends to exist by default as that is simply a shorter form of the longer traversal to "/page/science/physics".{{citation needed|date=January 2017}}
===AJAX=== {{Main article|Ajax framework}} [[Ajax (programming)|Ajax]], shorthand for "''[[Asynchronous I/O|Asynchronous]] [[JavaScript]] and [[XML]]''", is a web development technique for creating web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase a web page's interactivity, speed, maintainability, and [[usability]].<ref>{{Cite web|title=create site with ajax webplano| url=https://webplano.com |access-date=2025-11-23 | website=webplano.com}}</ref>
Due to the complexity of Ajax programming in JavaScript, there are numerous [[Ajax framework]]s that exclusively deal with Ajax support. Some Ajax frameworks are even embedded as a part of larger frameworks. For example, the [[jQuery]] [[JavaScript library]] is included in Ruby on Rails.{{citation needed|date=January 2017}}
With the increased interest in developing "[[Web 2.0]]" [[rich web application]]s, the complexity of programming directly in Ajax and JavaScript has become so apparent that compiler technology has stepped in, to allow developers to code in high-level languages such as Java, Python and Ruby. The first of these compilers was [[Morfik]] followed by [[Google Web Toolkit]], with ports to Python and Ruby in the form of Pyjs and RubyJS following some time after. These compilers and their associated widget set libraries make the development of rich media Ajax applications much more akin to that of developing desktop applications.{{citation needed|date=January 2017}}
===Web services=== {{Main article|Web service}} Some frameworks provide tools for creating and providing web services. These utilities may offer similar tools as the rest of the web application.<ref>{{cite book |doi=10.1109/ICWS.2006.139 |isbn=0-7695-2669-1 |chapter=Tutorial 4: Web Services on Rails: Using Ruby and Rails for Web Services Development and Mashups |title=2006 IEEE International Conference on Web Services (ICWS'06) |year=2006 |last1=Maximilien |first1=E. M. |pages=xliii }}</ref>
===Web resources=== {{Main article|Web resource}} A number of newer [[Web 2.0]] [[Representational state transfer|REST]]ful frameworks are now providing [[resource-oriented architecture]] (ROA) infrastructure for building collections of resources in a sort of [[Semantic Web]] [[ontology engineering|ontology]], based on concepts from [[Resource Description Framework]] (RDF).{{citation needed|date=January 2017}}
==See also== {{colbegin}} *[[CSS framework]] (for frontend) *[[Comparison of JavaScript-based web frameworks]] (client-side, for frontend) *[[Comparison of server-side web frameworks]] (for backend) *[[Application server]] *[[Application framework]] *[[Application security]] *[[Convention over configuration]] *[[Don't repeat yourself]] (DRY) *[[List of web service frameworks]] *[[Rich web application]] (obsolete) ** [[List of rich web application frameworks]] *[[Solution stack]] {{colend}}
==References== {{reflist}}
{{Web frameworks}} {{Web interfaces}}
{{DEFAULTSORT:Web Framework}} [[Category:Web frameworks| ]]