Web framework: Difference between revisions

Revision as of 02:22, 7 July 2023

Latest revision as of 09:56, 25 August 2025

(40 intermediate revisions by 30 users not shown)

Line 1:

{{short description|Software framework to support the development of websites}}

A '''web framework''' ('''WF''') or '''web application framework''' ('''WAF''') 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]] and are often associated with making developers life easier.<ref>{{Cite web |date=2023-07-06 |title=The 5 Best Web Frameworks in 2023: A Comprehensive Comparison {{!}} Five |url=https://five.co/the-5-best-web-frameworks/ |access-date=2023-07-07 |website=five.co |language=en-US}}</ref> 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==

Line 15:

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 [[Librarylibrary (computing)|libraries]] to help with common tasks, web applications often require specific libraries for particular tasks, such as creating [[HTML]] (for example, [[Jakarta Server 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. Examples of this include [[ASP.NET]], [[Java Platform, Enterprise Edition|Java EE]], [[WebObjects]], [[web2py]], [[OpenACS]], [[Catalyst (software)|Catalyst]], [[Mojolicious]], [[Ruby on Rails]], [[Laravel]], [[Grails (Framework)|Grails]], [[Django (web framework)|Django]], [[Zend Framework]], [[Sails.js]], [[Yii]],<ref>{{cite web |title=Yii PHP Framework |url=http://www.yiiframework.com/}}</ref> [[CakePHP]],<ref>{{cite web |title=CakePHP |url=http://cakephp.org/}}</ref> and [[Symfony]].{{citation needed|date=January 2017}}

==Types of framework architectures==

Line 33:

| url=https://www.theserverside.com/discussions/thread/22143.html

| date = 2003-10-29

| access-date = 2007-07-29 }}</ref> [[Django (web framework)|Django]], [[Ruby on Rails]], [[Symfony]], [[Spring MVC]], [[Stripes (framework)|Stripes]], [[Sails.js]], [[CodeIgniter]]<ref>{{cite web|url=https://cwiki.apache.org/confluence/display/WW/What+are+the+fundamental+differences+between+Struts+and+JSF |title=What are the fundamental differences between Struts and JSF |publisher=Struts.apache.org |date=2011-02-14 |access-date=2013-06-14}}</ref> are good examples of this architecture. 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. [[Lift (web framework)|Lift]], [[Tapestry (programming)|Tapestry]], [[JBoss Seam]], [[Jakarta Server Faces]], and [[Apache Wicket|Wicket]] are examples of pull-based architectures.

[[Play Framework|Play]], [[Apache Struts|Struts]], RIFE, and [[ZK (framework)|ZK]] have support for both push- and pull-based application controller calls.{{citation needed|date=January 2017}}

===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==

Line 48 ⟶ 47:

====Server-side====

{{col div|colwidth=30em}}

*[[Apache Wicket]]

*[[ASP.NET Core]]

Line 55:

*[[CppCMS]]

*[[Django (web framework)|Django]]

*[[Express.js]]

*[[Flask (web framework)|Flask]]

*[[FastAPI (web framework)| FastAPI]]

*[[Grails (framework)|Grails]]

*[[Jam.py (web framework)|Jam.py]]

*[[Laravel]]

*[[Mojolicious]]

*[[Pop PHP Framework]]

*[[Phoenix (web framework)|Phoenix]]

*[[Ruby on Rails]]

*[[Sails.js]]

*[[Seaside (software)]]

*[[Symfony]]

*[[Spring MVC]]

*[https://viewonly.dev VIEwoNLY]

*[[Wt (web toolkit)]]

*[[Yii]]

*[[Zend Framework]]

{{colend}}

====Client-side====

{{Main article|Single-page application}}

Examples include [[Backbone.js]], [[AngularJS]], [[Angular (applicationweb platformframework)|Angular]], [[EmberJSEmber.js]], [[React (JavaScript librarysoftware)|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 ===

===Discussion forums, wikis and weblogs===

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>

*WikiBase/[[WikiWikiWeb]]{{citation needed|date=January 2017}}

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===

Line 106 ⟶ 115:

===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=What is AJAX|url=https://www.dlsweb.rmit.edu.au/set/Courses/Content/CSIT/oua/cpt270/chapter/08/WhatisAJAX.html|access-date=2021-05-07|website=www.dlsweb.rmit.edu.au}}{{Dead link|date=August 2025 |bot=InternetArchiveBot |fix-attempted=yes }}</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}}

Line 122 ⟶ 131:

==See also==

{{colbegin}}

*[[CSS framework]] (for frontend)

*[[Comparison of JavaScript-based web frameworks]] (client-side)

*[[Comparison of serverJavaScript-sidebased web frameworks]] (client-side, for frontend)

*[[Comparison of JavaScriptserver-basedside web frameworks]] (client-sidefor backend)

*[[Application server]]

*[[Application framework]]

Line 133 ⟶ 143:

** [[List of rich web application frameworks]]

*[[Solution stack]]

*[[Mobile development framework]]

{{colend}}