https://en.wikipedia.org/w/index.php?action=history&feed=atom&title=JavaScript_stackJavaScript stack - Revision history2025-06-18T21:44:23ZRevision history for this page on the wikiMediaWiki 1.45.0-wmf.5https://en.wikipedia.org/w/index.php?title=JavaScript_stack&diff=1296204185&oldid=prevGogoLion at 14:32, 18 June 20252025-06-18T14:32:56Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Previous revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:32, 18 June 2025</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Line 13:</td>
<td colspan="2" class="diff-lineno">Line 13:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The components of MEAN, MERN, and MEVN are:</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The components of MEAN, MERN, and MEVN are:</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>==== MongoDB<del style="font-weight: bold; text-decoration: none;">{{Main articles|MongoDB}} </del>====</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>==== MongoDB====</div></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>{{Main|MongoDB}}</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>MongoDB is a NoSQL database program that uses JSON-like [[BSON]] (binary JSON) documents with optional schemas.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>MongoDB is a NoSQL database program that uses JSON-like [[BSON]] (binary JSON) documents with optional schemas.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The role of the database in the MEAN stack is very commonly filled by MongoDB because its use of JSON-like documents for interacting with data as opposed to the row/column model allows it to integrate well with the other (JavaScript-based) components of the stack.<ref>{{Cite web |title=The most popular database for modern apps |url=https://www.mongodb.com/ |access-date=2020-02-16 |website=MongoDB |language=en-us}}</ref></div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The role of the database in the MEAN stack is very commonly filled by MongoDB because its use of JSON-like documents for interacting with data as opposed to the row/column model allows it to integrate well with the other (JavaScript-based) components of the stack.<ref>{{Cite web |title=The most popular database for modern apps |url=https://www.mongodb.com/ |access-date=2020-02-16 |website=MongoDB |language=en-us}}</ref></div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>==== Express.js{{Main<del style="font-weight: bold; text-decoration: none;"> articles</del>|Express.js}} <del style="font-weight: bold; text-decoration: none;">====</del></div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>==== Express.js<ins style="font-weight: bold; text-decoration: none;">====</ins></div></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>{{Main|Express.js}} </div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Express.js (also referred to as Express) is a modular web application framework package for [[Node.js]].<ref>{{Cite web |title=Express - Node.js web application framework |url=https://expressjs.com/ |access-date=2020-02-16 |website=expressjs.com |language=en}}</ref></div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Express.js (also referred to as Express) is a modular web application framework package for [[Node.js]].<ref>{{Cite web |title=Express - Node.js web application framework |url=https://expressjs.com/ |access-date=2020-02-16 |website=expressjs.com |language=en}}</ref></div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>While Express is capable of acting as an internet-facing web server, even supporting SSL/TLS out of the box, it is often used in conjunction with a [[reverse proxy]] such as [[Nginx|NGINX]] or [[Apache HTTP Server|Apache]] for performance reasons.<ref>{{Cite web |last=II |first=Thomas Hunter |date=2019-03-28 |title=Why should I use a Reverse Proxy if Node.js is Production-Ready? |url=https://medium.com/intrinsic/why-should-i-use-a-reverse-proxy-if-node-js-is-production-ready-5a079408b2ca |access-date=2020-02-16 |website=Medium |language=en}}</ref></div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>While Express is capable of acting as an internet-facing web server, even supporting SSL/TLS out of the box, it is often used in conjunction with a [[reverse proxy]] such as [[Nginx|NGINX]] or [[Apache HTTP Server|Apache]] for performance reasons.<ref>{{Cite web |last=II |first=Thomas Hunter |date=2019-03-28 |title=Why should I use a Reverse Proxy if Node.js is Production-Ready? |url=https://medium.com/intrinsic/why-should-i-use-a-reverse-proxy-if-node-js-is-production-ready-5a079408b2ca |access-date=2020-02-16 |website=Medium |language=en}}</ref></div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>==== Angular, React, or Vue{{Main<del style="font-weight: bold; text-decoration: none;"> articles</del>|Angular (web framework)|React (JavaScript library)|Vue.js}}<del style="font-weight: bold; text-decoration: none;"> ====</del></div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>==== Angular, React, or Vue<ins style="font-weight: bold; text-decoration: none;">====</ins></div></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>{{Main|Angular (web framework)|React (JavaScript library)|Vue.js}}</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Typically data is fetched using [[Ajax (programming)|Ajax]] techniques and rendered in the browser on the client-side by a client-side application framework, however as the stack is commonly entirely JavaScript-based, in some implementations of the stack, server-side rendering where the rendering of the initial page can be offloaded to a server is used so that the initial data can be prefetched before it is loaded in the user's browser.<ref>{{Cite web |title=Features - Server Side Rendering {{!}} Next.js |url=https://nexts.org/features/server-side-rendering |access-date=2020-02-16 |website=nexts.org |language=en}}</ref></div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Typically data is fetched using [[Ajax (programming)|Ajax]] techniques and rendered in the browser on the client-side by a client-side application framework, however as the stack is commonly entirely JavaScript-based, in some implementations of the stack, server-side rendering where the rendering of the initial page can be offloaded to a server is used so that the initial data can be prefetched before it is loaded in the user's browser.<ref>{{Cite web |title=Features - Server Side Rendering {{!}} Next.js |url=https://nexts.org/features/server-side-rendering |access-date=2020-02-16 |website=nexts.org |language=en}}</ref></div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>==== Node.js{{Main<del style="font-weight: bold; text-decoration: none;"> articles</del>|Node.js}} <del style="font-weight: bold; text-decoration: none;"> ====</del></div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>==== Node.js<ins style="font-weight: bold; text-decoration: none;">====</ins></div></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>{{Main|Node.js}} </div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Node.js is the application runtime that the MEAN stack runs on.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Node.js is the application runtime that the MEAN stack runs on.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<!-- diff cache key enwiki:diff:1.41:old-1296203618:rev-1296204185:wikidiff2=table:1.14.1:ff290eae -->
</table>GogoLionhttps://en.wikipedia.org/w/index.php?title=JavaScript_stack&diff=1296203618&oldid=prevGogoLion: ←Created page with 'A JavaScript stack is a collection of technologies that use JavaScript as a primary programming language across the entire software development process, typically combining front-end and back-end tools to build full-scale web applications. With the rise of Node.js, JavaScript can now be executed server-side, allowing developers to use a single language for both client and server development. This unification simplifies the development workflow, improves...'2025-06-18T14:27:15Z<p><a href="/wiki/Wikipedia:AES" class="mw-redirect" title="Wikipedia:AES">←</a>Created page with 'A <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> stack is a collection of technologies that use JavaScript as a primary programming language across the entire software development process, typically combining front-end and back-end tools to build full-scale web applications. With the rise of Node.js, JavaScript can now be executed server-side, allowing developers to use a single language for both client and server development. This unification simplifies the development workflow, improves...'</p>
<p><b>New page</b></p><div>A [[JavaScript]] stack is a collection of technologies that use JavaScript as a primary programming language across the entire software development process, typically combining front-end and back-end tools to build full-scale web applications. With the rise of Node.js, JavaScript can now be executed server-side, allowing developers to use a single language for both client and server development. This unification simplifies the development workflow, improves code reuse, and enhances productivity by enabling consistent logic and tooling across the application. JavaScript stacks are often favored for their speed, scalability, and access to a vast ecosystem of libraries and frameworks available through platforms like npm. The increasing popularity of these stacks reflects a broader shift toward full-stack JavaScript development in modern web engineering.<ref name=":1">Tilkov, Stefan, and Steve Vinoski. "Node.js: Using JavaScript to Build High-Performance Network Programs." ''IEEE Internet Computing'', vol. 14, no. 6, 2010, pp. 80–83. DOI: 10.1109/MIC.2010.145</ref><ref>Pimentel, Jon. ''Full-Stack React Projects''. Packt Publishing, 2018.</ref><ref>{{Cite web |title=Node.js — About Node.js® |url=https://nodejs.org/en/about |access-date=2025-06-18 |website=nodejs.org |language=en-GB}}</ref><ref>{{Citation |last=bin Uzayr |first=Sufyan |title=JavaScript for Mobile Usage |date=2023-08-09 |work=Conquering JavaScript |pages=371–402 |url=https://doi.org/10.1201/9781003356578-7 |access-date=2025-06-18 |place=Boca Raton |publisher=CRC Press |isbn=978-1-003-35657-8}}</ref><br />
<br />
== MEAN/MERN/MEVN ==<br />
'''MEAN''' ([[MongoDB]], [[Express.js]], [[AngularJS]] (or [[Angular (application platform)|Angular]]), and [[Node.js]])<ref name=":0">{{Cite web |date=2019-05-09 |title=us-en_cloud_learn_mean-stack-explained |url=https://www.ibm.com/cloud/learn/mean-stack-explained |url-status=live |archive-url=https://web.archive.org/web/20200514164130/https://www.ibm.com/cloud/learn/mean-stack-explained |archive-date=2020-05-14 |access-date=2020-02-16 |website=www.ibm.com |publisher=IBM Cloud Education |language=en-us}}</ref> is a [[source-available]] [[JavaScript]] [[software stack]] for building [[Dynamic web page|dynamic web sites]] and [[Web application|web applications]].<ref>{{Cite book |last=Dickey |first=Jeff |url=https://books.google.com/books?id=UEOZBAAAQBAJ&q=MEAN+stack |title=Write Modern Web Apps with the MEAN Stack: Mongo, Express, AngularJS, and Node.js |date=2014-09-24 |publisher=Peachpit Press |isbn=9780133962376 |language=en}}</ref> A variation known as MERN replaces Angular with [[React (JavaScript library)|React.js]] front-end,<ref>{{cite web |title=MERN Stack Explained |url=https://www.mongodb.com/mern-stack |url-status=live |archive-url=https://web.archive.org/web/20230427015349/www.mongodb.com/mern-stack |archive-date=2023-04-27}}</ref><ref>{{cite web |title=How to Use MERN Stack: A Complete Guide |url=https://www.mongodb.com/languages/mern-stack-tutorial |url-status=live |archive-url=https://web.archive.org/web/20230321004436/www.mongodb.com/languages/mern-stack-tutorial |archive-date=2023-03-21}}</ref> and another named MEVN use [[Vue.js]] as [[Front-end (computing)|front-end]]. Because all components of the MEAN stack support programs that are written in JavaScript, MEAN applications can be written in one language for both [[server-side]] and [[client-side]] execution environments. Though often compared directly to other popular web development stacks such as the [[LAMP (software bundle)|LAMP stack]], the <br />
[[File:Meanstack-624x250.jpg|right|thumb|280x280px|Common logo used to represent MEAN stacks.]]<br />
components of the MEAN stack are higher-level including a web application presentation layer and not including an operating system layer.<ref>{{Cite web |title=LAMP vs MEAN, Deciding the right stack for your startup |url=https://www.linkedin.com/pulse/lamp-vs-mean-deciding-right-stack-your-startup-robert-roose |access-date=2020-02-16 |website=www.linkedin.com |language=en}}</ref><br />
<br />
The acronym ''MEAN'' was coined by Valeri Karpov.<ref name="MongoDBMEANstack">{{cite web |date=Apr 30, 2013 |title=The MEAN Stack: MongoDB, ExpressJS, Angular and Node.js |url=http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and |website=Tumblr}}</ref> He introduced the term in a 2013 blog post and the logo concept, initially created by Austin Anderson for the original MEAN stack [[LinkedIn]] group, is an assembly of the first letter of each component of the MEAN acronym.<ref name="MeanStackLinkedin">{{cite web |title=Mean Stack |url=https://www.linkedin.com/groups/Mean-Stack-5070069 |website=[[LinkedIn]]}}</ref><br />
<br />
Following the adoption of the MEAN stack, alternative versions emerged to accommodate different front-end preferences while maintaining the same JavaScript-based architecture. The '''MERN''' stack substitutes Angular with '''React.js''', a declarative, component-based library developed by Meta (formerly Facebook), which allows for greater flexibility in building dynamic user interfaces. Meanwhile, the '''MEVN''' stack integrates '''Vue.js''', a progressive front-end framework known for its gentle learning curve and ease of integration into existing projects. Both variations preserve the core back-end technologies—MongoDB, Express.js, and Node.js—while catering to developers who prefer a different approach to front-end development. These stacks reflect the growing diversification of the JavaScript ecosystem, offering developers choices based on performance, learning preferences, and community support, while still enabling full-stack development using a single programming language.<ref name=":1" /><ref>{{Cite journal |date=2022-02-11 |title=Styling React |url=https://doi.org/10.1002/9781119685630.ch10 |journal=Beginning React JS Foundations Building User Interfaces with ReactJS |pages=243–255 |doi=10.1002/9781119685630.ch10}}</ref><ref>{{Cite web |title=Vue.js |url=https://vuejs.org/ |access-date=2025-06-18 |website=vuejs.org |language=en-US}}</ref><br />
<br />
=== Components ===<br />
The components of MEAN, MERN, and MEVN are:<br />
<br />
==== MongoDB{{Main articles|MongoDB}} ====<br />
MongoDB is a NoSQL database program that uses JSON-like [[BSON]] (binary JSON) documents with optional schemas.<br />
<br />
The role of the database in the MEAN stack is very commonly filled by MongoDB because its use of JSON-like documents for interacting with data as opposed to the row/column model allows it to integrate well with the other (JavaScript-based) components of the stack.<ref>{{Cite web |title=The most popular database for modern apps |url=https://www.mongodb.com/ |access-date=2020-02-16 |website=MongoDB |language=en-us}}</ref><br />
<br />
==== Express.js{{Main articles|Express.js}} ====<br />
Express.js (also referred to as Express) is a modular web application framework package for [[Node.js]].<ref>{{Cite web |title=Express - Node.js web application framework |url=https://expressjs.com/ |access-date=2020-02-16 |website=expressjs.com |language=en}}</ref><br />
<br />
While Express is capable of acting as an internet-facing web server, even supporting SSL/TLS out of the box, it is often used in conjunction with a [[reverse proxy]] such as [[Nginx|NGINX]] or [[Apache HTTP Server|Apache]] for performance reasons.<ref>{{Cite web |last=II |first=Thomas Hunter |date=2019-03-28 |title=Why should I use a Reverse Proxy if Node.js is Production-Ready? |url=https://medium.com/intrinsic/why-should-i-use-a-reverse-proxy-if-node-js-is-production-ready-5a079408b2ca |access-date=2020-02-16 |website=Medium |language=en}}</ref><br />
<br />
==== Angular, React, or Vue{{Main articles|Angular (web framework)|React (JavaScript library)|Vue.js}} ====<br />
Typically data is fetched using [[Ajax (programming)|Ajax]] techniques and rendered in the browser on the client-side by a client-side application framework, however as the stack is commonly entirely JavaScript-based, in some implementations of the stack, server-side rendering where the rendering of the initial page can be offloaded to a server is used so that the initial data can be prefetched before it is loaded in the user's browser.<ref>{{Cite web |title=Features - Server Side Rendering {{!}} Next.js |url=https://nexts.org/features/server-side-rendering |access-date=2020-02-16 |website=nexts.org |language=en}}</ref><br />
<br />
==== Node.js{{Main articles|Node.js}} ====<br />
Node.js is the application runtime that the MEAN stack runs on.<br />
<br />
The use of Node.js, which is said to represent a "JavaScript Everywhere" paradigm,<ref>{{Cite web |date=2013-11-14 |title=JavaScript Everywhere and the Three Amigos (WebSphere: Into the wild BLUE yonder!) |url=https://www.ibm.com/developerworks/community/blogs/gcuomo/entry/javascript_everywhere_and_the_three_amigos?lang=en |url-status=dead |archive-url=https://web.archive.org/web/20131114212619/https://www.ibm.com/developerworks/community/blogs/gcuomo/entry/javascript_everywhere_and_the_three_amigos?lang=en |archive-date=2013-11-14 |access-date=2020-02-16}}</ref> is integral to the MEAN stack which relies on that concept.<br />
<br />
== JAMstack ==<br />
'''JAMstack''' (also stylized as '''Jamstack''') is a [[web development]] [[Software architecture|architecture]] pattern<ref>{{cite web |title=What is Jamstack? |url=https://jamstack.org/what-is-jamstack/ |website=Jamstack.org |language=en-US}}</ref> and [[solution stack]]. The acronym "JAM" stands for [[JavaScript]], [[API]] and [[Markup language|Markup]] (generated by a [[static site generator]]) and was coined by Mathias (Matt) Biilmann, CEO of [[Netlify]], in 2015.<ref name=":02">{{cite web |last=Cardoza |first=Christine |date=2020-07-06 |title=Jamstack brings front-end development back into focus |url=https://sdtimes.com/webdev/jamstack-brings-front-end-development-back-into-focus/ |access-date=2021-04-05 |website=[[SD Times]] |language=en-US}}</ref> The idea of combining the use of JavaScript, APIs and markup has existed since the beginnings of [[HTML5]].<ref>{{cite book |last1=Schmitt |first1=Christopher |url=https://books.google.com/books?id=6jee_deQYYMC |title=HTML5 Cookbook |last2=Simpson |first2=Kyle |date=2011-11-14 |publisher="O'Reilly Media, Inc." |isbn=978-1-4493-9679-4 |language=en}}</ref><ref>{{cite book |last1=Pecoraro |first1=Christopher |url=https://books.google.com/books?id=TmYtEAAAQBAJ&pg=PA6 |title=Jumpstart Jamstack Development: Build and deploy modern websites and web apps using Gatsby, Netlify, and Sanity |last2=Gambino |first2=Vincenzo |date=2021-05-07 |publisher=Packt Publishing Ltd |isbn=978-1-80020-590-1 |pages=2–7 |language=en}}</ref><br />
<br />
In JAMstack websites, the [[application logic]] typically resides on the client side (for example, an embedded e-commerce checkout service that interacts with pre-rendered static content), without being tightly coupled to a [[Backend (computing)|backend]] server. JAMstack sites are usually served with a [[Git]]-based or [[Headless content management system|headless CMS]].<ref name=":02" /><ref>{{cite book |last=Biilmann |first=Mathias |url=https://www.worldcat.org/oclc/1123220815 |title=Modern Web development on the JAMstack : modern techniques for ultra fast sites and web applications |date=2019 |others=Phil Hawksworth |isbn=9781492058564 |location=Sebastopol, CA |oclc=1123220815}}</ref><br />
<br />
== Other stacks ==<br />
<br />
=== OS-level stacks ===<br />
<br />
; MLVN<ref>{{cite book |author=Sharma, A. |title=Full-Stack Web Development with Vue.js and Node |publisher=Packt Publishing Ltd |year=2018 |isbn=9781788830775 |pages=6–30 |chapter=Chapter 2: Introducing MEVN |chapter-url=https://books.google.com/books?id=3EBbDwAAQBAJ&pg=PA6}}</ref><br />
: [[MongoDB]] (database)<br />
: [[Linux]] (operating system)<br />
: [[Varnish (software)]] (frontend cache)<br />
: [[Node.js]] (JavaScript runtime)<br />
; WISAV/WIPAV<br />
: [[Windows Server]] (operating system)<br />
: [[Internet Information Services]] (web server)<br />
: [[Microsoft SQL Server]]/[[PostgreSQL]] (database)<br />
: [[ASP.NET]] (backend web framework)<br />
: [[Vue.js]] (frontend web framework)<br />
<br />
=== OS-agnostic web stacks ===<br />
<br />
; GRANDstack<ref name="GrandStack">{{cite web |title=GRANDStack |url=https://grandstack.io/ |access-date=24 Dec 2019}}</ref><br />
: [[GraphQL]] (data query and manipulation language)<br />
: [[React (web framework)|React]] (web application presentation)<br />
: [[Meteor (web framework)|Apollo]] (Data Graph Platform)<br />
: [[Neo4j]] ([[Database management system|database management systems]])<br />
<br />
; PERN<ref>{{Cite web |date=2020-03-20 |title=Learn the PERN Stack by building a web app - Full video course |url=https://www.freecodecamp.org/news/learn-the-pern-stack-full-course/ |access-date=2021-06-19 |website=freeCodeCamp.org |language=en}}</ref><br />
: [[PostgreSQL]] (database)<br />
: [[Express.js]] (application controller layer)<br />
: [[React (JavaScript library)]] (web application presentation)<br />
: [[Node.js]] (JavaScript runtime)<br />
<br />
; T-REx<ref>{{Cite web |title=TerminusDB on Twitter |url=https://twitter.com/terminusdb/status/1313507776224690178 |access-date=2020-10-14 |website=Twitter |language=en}}</ref><br />
: [[TerminusDB]] (scalable [[graph database]])<br />
: [[React (web framework)|React]] ([[JavaScript]] web framework)<br />
: [[Express.js|Express]].js (framework for [[Node.js]])<br />
<br />
== References ==<br />
{{Reflist}}</div>GogoLion