|
1 | 1 | --- |
2 | | -sidebar_position: 10 |
3 | | -description: Short introduction to JAMstack |
| 2 | +title : What IS JAMStack |
| 3 | +sidebar_label : What IS JAMStack |
4 | 4 | --- |
5 | 5 |
|
6 | 6 | # What IS JAMStack |
7 | 7 |
|
8 | 8 | <SubHeading>Short introduction to JAMstack</SubHeading> |
9 | 9 |
|
10 | | -Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup |
| 10 | +JAMstack is a modern web development architecture and methodology that stands for JavaScript, APIs, and Markup. |
| 11 | +It represents a shift in how web applications and websites are built and delivered. |
11 | 12 |
|
12 | | -### JAMstack - Short Introduction |
| 13 | + |
13 | 14 |
|
14 | | -Apps built in Jamstack architecture met the following criteria: |
| 15 | +> Here's a **breakdown of each component of JAMstack**: |
15 | 16 |
|
16 | | -- **JavaScript**, any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client |
17 | | -- **APIs**, all server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript |
18 | | -- **Markup**, templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps |
| 17 | +## ✅ **JavaScript (JS)** |
19 | 18 |
|
20 | | -### Why using a JAMstack app? |
| 19 | +JavaScript is used for client-side functionality and interactivity in JAMstack applications. |
| 20 | +It typically handles tasks such as user interface enhancements, form handling, and dynamic content rendering in the browser. |
| 21 | +JAMstack projects often use modern JavaScript frameworks like React, Vue.js, or Angular for this purpose. |
21 | 22 |
|
22 | | -The major advantages met by the JAMstack pattern are: |
| 23 | +## ✅ **APIs** |
23 | 24 |
|
24 | | -- Apps are much faster because there is no more dynamic build of the pages |
25 | | -- Security - a static app with less API endpoints reduce allot the risk of being hacked |
26 | | -- Better developer experience - using a JAMstack app a developer needs only a simple editor and a console to create and deploy an app |
| 25 | +APIs (Application Programming Interfaces) play a crucial role in JAMstack. They provide the dynamic functionality and data retrieval needed for web applications. |
| 26 | +These APIs can be third-party services, serverless functions, or custom-built endpoints that deliver data in a structured format (usually JSON) for consumption by the frontend. |
27 | 27 |
|
28 | | -### Sample JAMstack App |
| 28 | +## ✅ **Markup** |
29 | 29 |
|
30 | | -For instance, let's build a sample JAMstack app by getting the source code from [Github](https://github.com/search?q=jamstack+fractal). Let's pick up the first result, open the [README](https://github.com/app-generator/jamstack-fractal/blob/master/README.mdx) file and follow the intructions provided: |
| 30 | +Markup refers to the pre-built, static HTML files that make up the core content and structure of a JAMstack site. |
| 31 | +These files are generated at build time, meaning they don't change unless you explicitly rebuild the site. |
| 32 | +This static nature has several benefits, including better performance, security, and scalability. |
31 | 33 |
|
32 | | -``` |
33 | | -$ git clone https://github.com/app-generator/jamstack-fractal.git |
34 | | -$ cd jamstack-fractal |
| 34 | +## ✅ JAMstack Advantages |
35 | 35 |
|
36 | | -$ yarn # install modules |
37 | | -$ yarn start # start the app for development |
| 36 | +- **Performance:** Static files are served directly from content delivery networks (CDNs), which are optimized for speed and global distribution. This results in faster load times. |
38 | 37 |
|
39 | | -$ yarn build # build for production |
40 | | -``` |
| 38 | +- **Security:** Since there's no server-side code execution in the traditional sense, many common security vulnerabilities are mitigated. |
41 | 39 |
|
42 | | -If all goes well, the app can be visited on `http://localhost:8000` As we can see, building an app in JAMstack architecture is quite an easy job. |
| 40 | +- **Scalability:** Scaling static assets is straightforward because CDNs can handle large amounts of traffic easily. |
43 | 41 |
|
44 | | -### Related Resources |
| 42 | +- **Developer Experience:** Separating the frontend from the backend allows for a clear separation of concerns. Developers can work on the frontend independently, and the deployment process is simplified. |
45 | 43 |
|
46 | | -- [JAMstack](https://jamstack.org/) - the website |
47 | | -- [WTF is JAMstack](https://jamstack.wtf/) - an well-known resource fpr JAMstack developers |
48 | | -- [Apps built in JAMstack](https://appseed.us/apps/jamstack) - index provided by AppSeed |
49 | | -- Open-Source [JAMstack Apps](https://github.com/app-generator/jamstack) published on [Github](https://github.com/search?q=jamstack) |
50 | | -- [Landed](https://appseed.us/apps/jamstack/html5up-landed) a very popular open-source app designed by **Html5 Up** and coded in JAMstack architecture |
| 44 | +- **Maintainability:** JAMstack sites are easier to maintain and update because changes can be made to the content or frontend without worrying about the backend infrastructure. |
| 45 | + |
| 46 | +- **Reduced Hosting Costs:** Hosting static files on CDNs is often more cost-effective than traditional server-based hosting. |
| 47 | + |
| 48 | +## ✅ In Summary |
| 49 | + |
| 50 | +While JAMstack has many advantages, it's not suitable for every type of web application. |
| 51 | +It works best for content-driven sites, blogs, e-commerce stores, and other projects where most of the content is relatively static and doesn't require real-time updates. |
| 52 | + |
| 53 | +For more dynamic applications, JAMstack can be combined with serverless functions or other backend services to handle specific functionalities while still benefiting from the overall architecture. |
| 54 | + |
| 55 | +## ✅ Resources |
| 56 | + |
| 57 | +- 👉 Access [AppSeed](https://appseed.us/) and start your next project |
| 58 | +- 👉 [Deploy Projects on Aws, Azure and Digital Ocean](https://www.docs.deploypro.dev/) via **DeployPRO** |
| 59 | +- 👉 Create an amazing landing page with [Simpllo, an open-source site builder](https://www.simpllo.com/) |
| 60 | +- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder |
0 commit comments