diff --git a/404.html b/404.html
index 44522f9e92..d422be98cd 100644
--- a/404.html
+++ b/404.html
@@ -3,7 +3,7 @@
-Page Not Found | ILLA Cloud
+Page Not Found | ILLA Cloud
@@ -19,8 +19,8 @@
-
-
+
+
diff --git a/ai-voice-generator/index.html b/ai-voice-generator/index.html
index 373d77911a..8a88f649bc 100644
--- a/ai-voice-generator/index.html
+++ b/ai-voice-generator/index.html
@@ -3,7 +3,7 @@
-Build AI Voice Generator for your business | ILLA Cloud
+Build AI Voice Generator for your business | ILLA Cloud
@@ -19,8 +19,8 @@
-
-
+
+
Speech-to-text, transcribe the audio into text and translate or summarize it. Text-to-speech, create natural AI voices instantly in any language and let your content go beyond text.
diff --git a/assets/js/013bc832.59f734b9.js b/assets/js/013bc832.59f734b9.js
new file mode 100644
index 0000000000..0e33acf2cf
--- /dev/null
+++ b/assets/js/013bc832.59f734b9.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8293],{573:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>n,metadata:()=>i,toc:()=>c});var a=s(1527),l=s(7214);const n={slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},o=void 0,i={permalink:"/illa-website/blog/list-tables-in-postgresql",source:"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"postgres",permalink:"/illa-website/blog/tags/postgres"},{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"list",permalink:"/illa-website/blog/tags/list"},{label:"tables",permalink:"/illa-website/blog/tags/tables"},{label:"psql",permalink:"/illa-website/blog/tags/psql"}],readingTime:2.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"Build core app dashboard at lightning speed",permalink:"/illa-website/blog/core-app-dashboard-2"},nextItem:{title:"How to build a custom low code CRM in 2024",permalink:"/illa-website/blog/low-code-crm"},relatedPosts:[{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",permalink:"/illa-website/blog/postgresql-isnull",formattedDate:"February 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.435,date:"2024-02-04T11:00:00.000Z"}],authorPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"List Tables in the Database Using \\dt",id:"list-tables-in-the-database-using-dt",level:2},{value:"Query Tables from the pg_tables Table",id:"query-tables-from-the-pg_tables-table",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the ",(0,a.jsx)(t.code,{children:"psql"})," tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"list-tables-in-the-database-using-dt",children:"List Tables in the Database Using \\dt"}),"\n",(0,a.jsxs)(t.p,{children:["This example demonstrates the process of logging into the database using the ",(0,a.jsx)(t.code,{children:"psql"})," tool and listing tables in the database. Follow these steps:"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"Log in to the PostgreSQL server using the postgres user:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:'[~] psql -U postgres\npsql (14.4)\nType "help" for help.\n'})}),"\n",(0,a.jsx)(t.p,{children:"Note: You can also use any user with the appropriate database permissions."}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsxs)(t.li,{children:["Select the ",(0,a.jsx)(t.code,{children:"testdb"})," database with the following statement:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\c testdb;\n"})}),"\n",(0,a.jsx)(t.p,{children:"If the database hasn't been created yet, run the following statement:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"CREATE DATABASE testdb;\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"3",children:["\n",(0,a.jsxs)(t.li,{children:["Use the ",(0,a.jsx)(t.code,{children:"\\dt"})," command to list all tables in the ",(0,a.jsx)(t.code,{children:"testdb"})," database:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner\n--------+----------------+-------+----------\npublic | mytable | table | postgres\npublic | product | table | postgres\npublic | test_date | table | postgres\npublic | test_time | table | postgres\npublic | test_timestamp | table | postgres\npublic | week_day_sales | table | postgres\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"4",children:["\n",(0,a.jsxs)(t.li,{children:["If you want to view more information about the tables, use the ",(0,a.jsx)(t.code,{children:"\\dt+"})," command:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt+\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner | Persistence | Access method | Size | Description\n--------+----------------+-------+----------+-------------+---------------+------------+-------------\npublic | mytable | table | postgres | permanent | heap | 16 kB |\npublic | product | table | postgres | permanent | heap | 16 kB |\npublic | test_date | table | postgres | permanent | heap | 8192 bytes |\npublic | test_time | table | postgres | permanent | heap | 8192 bytes |\npublic | test_timestamp | table | postgres | permanent | heap | 8192 bytes |\npublic | week_day_sales | table | postgres | permanent | heap | 8192 bytes |\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.p,{children:["You can see that the input of ",(0,a.jsx)(t.code,{children:"\\dt+"})," includes columns such as ",(0,a.jsx)(t.code,{children:"Persistence"}),", ",(0,a.jsx)(t.code,{children:"Access method"}),", ",(0,a.jsx)(t.code,{children:"Size"}),", and ",(0,a.jsx)(t.code,{children:"Description"})," in addition to the output of ",(0,a.jsx)(t.code,{children:"\\dt"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"query-tables-from-the-pg_tables-table",children:"Query Tables from the pg_tables Table"}),"\n",(0,a.jsxs)(t.p,{children:["In addition to the ",(0,a.jsx)(t.code,{children:"\\dt"})," and ",(0,a.jsx)(t.code,{children:"\\dt+"})," commands, you can also query all tables in the current data from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"pg_tables"})," table is a built-in table in PostgreSQL that stores all tables in the database."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"SELECT * FROM pg_tables\nWHERE schemaname = 'public';\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" schemaname | tablename | tableowner | tablespace | hasindexes | hasrules | hastriggers | rowsecurity\n------------+----------------+------------+------------+------------+----------+-------------+-------------\n public | test_date | postgres | | t | f | f | f\n public | test_time | postgres | | t | f | f | f\n public | test_timestamp | postgres | | t | f | f | f\n public | week_day_sales | postgres | | t | f | f | f\n public | mytable | postgres | | f | f | f | f\n public | product | postgres | | t | f | f | f\n(6 rows)\n"})}),"\n",(0,a.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(t.p,{children:"PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the psql tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsxs)(t.p,{children:["In MySQL, you can use the ",(0,a.jsx)(t.code,{children:"SHOW TABLES"})," command to list databases."]})]})}function h(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var a=s(959);const l={},n=a.createContext(l);function o(e){const t=a.useContext(n);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),a.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/013bc832.a7f03657.js b/assets/js/013bc832.a7f03657.js
deleted file mode 100644
index 33cefcac6e..0000000000
--- a/assets/js/013bc832.a7f03657.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8293],{573:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>n,metadata:()=>i,toc:()=>d});var a=s(1527),l=s(7214);const n={slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},o=void 0,i={permalink:"/illa-website/blog/list-tables-in-postgresql",source:"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"postgres",permalink:"/illa-website/blog/tags/postgres"},{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"list",permalink:"/illa-website/blog/tags/list"},{label:"tables",permalink:"/illa-website/blog/tags/tables"},{label:"psql",permalink:"/illa-website/blog/tags/psql"}],readingTime:2.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"Build core app dashboard at lightning speed",permalink:"/illa-website/blog/core-app-dashboard-2"},nextItem:{title:"How to build a custom low code CRM in 2024",permalink:"/illa-website/blog/low-code-crm"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"}],authorPosts:[{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},d=[{value:"List Tables in the Database Using \\dt",id:"list-tables-in-the-database-using-dt",level:2},{value:"Query Tables from the pg_tables Table",id:"query-tables-from-the-pg_tables-table",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the ",(0,a.jsx)(t.code,{children:"psql"})," tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"list-tables-in-the-database-using-dt",children:"List Tables in the Database Using \\dt"}),"\n",(0,a.jsxs)(t.p,{children:["This example demonstrates the process of logging into the database using the ",(0,a.jsx)(t.code,{children:"psql"})," tool and listing tables in the database. Follow these steps:"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"Log in to the PostgreSQL server using the postgres user:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:'[~] psql -U postgres\npsql (14.4)\nType "help" for help.\n'})}),"\n",(0,a.jsx)(t.p,{children:"Note: You can also use any user with the appropriate database permissions."}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsxs)(t.li,{children:["Select the ",(0,a.jsx)(t.code,{children:"testdb"})," database with the following statement:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\c testdb;\n"})}),"\n",(0,a.jsx)(t.p,{children:"If the database hasn't been created yet, run the following statement:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"CREATE DATABASE testdb;\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"3",children:["\n",(0,a.jsxs)(t.li,{children:["Use the ",(0,a.jsx)(t.code,{children:"\\dt"})," command to list all tables in the ",(0,a.jsx)(t.code,{children:"testdb"})," database:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner\n--------+----------------+-------+----------\npublic | mytable | table | postgres\npublic | product | table | postgres\npublic | test_date | table | postgres\npublic | test_time | table | postgres\npublic | test_timestamp | table | postgres\npublic | week_day_sales | table | postgres\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"4",children:["\n",(0,a.jsxs)(t.li,{children:["If you want to view more information about the tables, use the ",(0,a.jsx)(t.code,{children:"\\dt+"})," command:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt+\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner | Persistence | Access method | Size | Description\n--------+----------------+-------+----------+-------------+---------------+------------+-------------\npublic | mytable | table | postgres | permanent | heap | 16 kB |\npublic | product | table | postgres | permanent | heap | 16 kB |\npublic | test_date | table | postgres | permanent | heap | 8192 bytes |\npublic | test_time | table | postgres | permanent | heap | 8192 bytes |\npublic | test_timestamp | table | postgres | permanent | heap | 8192 bytes |\npublic | week_day_sales | table | postgres | permanent | heap | 8192 bytes |\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.p,{children:["You can see that the input of ",(0,a.jsx)(t.code,{children:"\\dt+"})," includes columns such as ",(0,a.jsx)(t.code,{children:"Persistence"}),", ",(0,a.jsx)(t.code,{children:"Access method"}),", ",(0,a.jsx)(t.code,{children:"Size"}),", and ",(0,a.jsx)(t.code,{children:"Description"})," in addition to the output of ",(0,a.jsx)(t.code,{children:"\\dt"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"query-tables-from-the-pg_tables-table",children:"Query Tables from the pg_tables Table"}),"\n",(0,a.jsxs)(t.p,{children:["In addition to the ",(0,a.jsx)(t.code,{children:"\\dt"})," and ",(0,a.jsx)(t.code,{children:"\\dt+"})," commands, you can also query all tables in the current data from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"pg_tables"})," table is a built-in table in PostgreSQL that stores all tables in the database."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"SELECT * FROM pg_tables\nWHERE schemaname = 'public';\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" schemaname | tablename | tableowner | tablespace | hasindexes | hasrules | hastriggers | rowsecurity\n------------+----------------+------------+------------+------------+----------+-------------+-------------\n public | test_date | postgres | | t | f | f | f\n public | test_time | postgres | | t | f | f | f\n public | test_timestamp | postgres | | t | f | f | f\n public | week_day_sales | postgres | | t | f | f | f\n public | mytable | postgres | | f | f | f | f\n public | product | postgres | | t | f | f | f\n(6 rows)\n"})}),"\n",(0,a.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(t.p,{children:"PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the psql tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsxs)(t.p,{children:["In MySQL, you can use the ",(0,a.jsx)(t.code,{children:"SHOW TABLES"})," command to list databases."]})]})}function h(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var a=s(959);const l={},n=a.createContext(l);function o(e){const t=a.useContext(n);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),a.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/03958142.6025f444.js b/assets/js/03958142.55865bb8.js
similarity index 89%
rename from assets/js/03958142.6025f444.js
rename to assets/js/03958142.55865bb8.js
index dc12ce9beb..141db95ee0 100644
--- a/assets/js/03958142.6025f444.js
+++ b/assets/js/03958142.55865bb8.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5479],{9372:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var n=o(1527),a=o(7214);const s={slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},i=void 0,l={permalink:"/illa-website/blog/automate-send-to-slack",source:"@site/blog/automate-send-to-slack/automate-send-to-slack.md",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",date:"2024-01-17T10:00:00.000Z",formattedDate:"January 17, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"},{label:"slack",permalink:"/illa-website/blog/tags/slack"},{label:"automate",permalink:"/illa-website/blog/tags/automate"}],readingTime:3.275,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},unlisted:!1,prevItem:{title:"Create AI Tools like building with blocks",permalink:"/illa-website/blog/build-ai-tools"},nextItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},relatedPosts:[{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"How to Solve",id:"how-to-solve",level:2},{value:"Achieved Results",id:"achieved-results",level:2},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const t={h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily. Supporting powerful text and media formats, Slack allows us to send various messages. As developers, we have a multitude of tasks that need to be automated, such as:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Compilation and Building"}),": Automating the process of code compilation, especially in large projects, can significantly improve efficiency."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Test Execution"}),": Automatically running unit tests, integration tests, and performance tests to ensure code quality."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Deployment"}),": Automating code deployment to production or test environments, a common practice in Continuous Integration/Continuous Deployment (CI/CD) processes."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Data Backup and Recovery"}),": Regularly automating database and application data backups, and restoring them when needed."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Monitoring and Alerts"}),": Automating the monitoring of system and application performance and sending alerts in case of issues."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Log File Management"}),": Automating the collection, analysis, and archiving of logs."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Environment Configuration"}),": Using configuration management tools to automatically set up and maintain development, testing, and production environments."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Documentation Generation"}),": Automatically generating documentation from code comments or database structures."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Batch Processing of Data or Files"}),": Automatically performing data transformations, migrations, or other batch processing tasks."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Dependency Management"}),": Automatically managing project dependencies to ensure the latest and compatible versions of libraries and frameworks."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"These tasks are usually automated through various tools and scripts, such as using Jenkins or GitHub Actions for CI/CD processes, or Ansible, Puppet for environment configuration and management. Developers use many tools to accomplish these tasks, but these tools are usually independent. After completing their tasks, I believe everyone would appreciate a comprehensive notification for updates."}),"\n",(0,n.jsx)(t.p,{children:"Studies show that if an issue is notified via Slack at the time of creation, the resolution time can be reduced by 50%. Therefore, we need a tool to help us automate message sending to Slack, allowing us to see all messages in one place, rather than checking various tools."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.h2,{id:"how-to-solve",children:"How to Solve"}),"\n",(0,n.jsx)(t.p,{children:"Here we choose a tool to solve this, named ILLA Flow. It is a connector tool aimed at developers, helping them quickly build various automation tasks, including automating message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow offers various integrations, including but not limited to the most commonly used RestAPI, GraphQL, and a vast number of database connections and various SaaS platform capabilities, allowing you to quickly connect your products with those used by your customers. ILLA Flow also supports scheduled tasks, Webhooks, and parameter passing."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/resource.png",alt:"resource"})}),"\n",(0,n.jsx)(t.p,{children:"The most unique feature of ILLA Flow is the ability to incorporate an AI Agent into the workflow. This allows you to use an AI Agent, created by OpenAI's model, to process your notifications before sending them, making the notifications smarter and more interesting. You can also use the AI Agent for complex analyses, simplifying previously challenging summaries."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/agent.png",alt:"agent"})}),"\n",(0,n.jsx)(t.h2,{id:"achieved-results",children:"Achieved Results"}),"\n",(0,n.jsx)(t.p,{children:"We can create a workflow in ILLA Flow and then call Slack's Webhook in the workflow to achieve automated message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"After the completion of CI/CD tools, or after daily scheduled tasks, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to GitHub, allowing us to see messages sent by ILLA Flow in GitHub Issues."}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to the alert monitoring system, so when an alarm or anomaly occurs, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:"Finally, another product of ILLA, ILLA Builder, supports building custom panels, allowing us to jump directly to ILLA Builder to view more information through the links sent in Slack, making notifications very smart and detailed."}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"In daily work, there are numerous automation scenarios, and ILLA Flow is a tool aimed at developers. Most other automation connection tools are geared towards general users, which can make configuration more complex for developers."}),"\n",(0,n.jsx)(t.p,{children:"Using ILLA Flow, you can integrate AI Agents and various SaaS with one click, making internal team processes more automated and notifications smarter."})]})}function d(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>i});var n=o(959);const a={},s=n.createContext(a);function i(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5479],{9372:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var n=o(1527),a=o(7214);const s={slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},i=void 0,l={permalink:"/illa-website/blog/automate-send-to-slack",source:"@site/blog/automate-send-to-slack/automate-send-to-slack.md",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",date:"2024-01-17T10:00:00.000Z",formattedDate:"January 17, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"},{label:"slack",permalink:"/illa-website/blog/tags/slack"},{label:"automate",permalink:"/illa-website/blog/tags/automate"}],readingTime:3.275,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},unlisted:!1,prevItem:{title:"Create AI Tools like building with blocks",permalink:"/illa-website/blog/build-ai-tools"},nextItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},relatedPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"How to Solve",id:"how-to-solve",level:2},{value:"Achieved Results",id:"achieved-results",level:2},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const t={h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily. Supporting powerful text and media formats, Slack allows us to send various messages. As developers, we have a multitude of tasks that need to be automated, such as:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Compilation and Building"}),": Automating the process of code compilation, especially in large projects, can significantly improve efficiency."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Test Execution"}),": Automatically running unit tests, integration tests, and performance tests to ensure code quality."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Deployment"}),": Automating code deployment to production or test environments, a common practice in Continuous Integration/Continuous Deployment (CI/CD) processes."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Data Backup and Recovery"}),": Regularly automating database and application data backups, and restoring them when needed."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Monitoring and Alerts"}),": Automating the monitoring of system and application performance and sending alerts in case of issues."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Log File Management"}),": Automating the collection, analysis, and archiving of logs."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Environment Configuration"}),": Using configuration management tools to automatically set up and maintain development, testing, and production environments."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Documentation Generation"}),": Automatically generating documentation from code comments or database structures."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Batch Processing of Data or Files"}),": Automatically performing data transformations, migrations, or other batch processing tasks."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Dependency Management"}),": Automatically managing project dependencies to ensure the latest and compatible versions of libraries and frameworks."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"These tasks are usually automated through various tools and scripts, such as using Jenkins or GitHub Actions for CI/CD processes, or Ansible, Puppet for environment configuration and management. Developers use many tools to accomplish these tasks, but these tools are usually independent. After completing their tasks, I believe everyone would appreciate a comprehensive notification for updates."}),"\n",(0,n.jsx)(t.p,{children:"Studies show that if an issue is notified via Slack at the time of creation, the resolution time can be reduced by 50%. Therefore, we need a tool to help us automate message sending to Slack, allowing us to see all messages in one place, rather than checking various tools."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.h2,{id:"how-to-solve",children:"How to Solve"}),"\n",(0,n.jsx)(t.p,{children:"Here we choose a tool to solve this, named ILLA Flow. It is a connector tool aimed at developers, helping them quickly build various automation tasks, including automating message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow offers various integrations, including but not limited to the most commonly used RestAPI, GraphQL, and a vast number of database connections and various SaaS platform capabilities, allowing you to quickly connect your products with those used by your customers. ILLA Flow also supports scheduled tasks, Webhooks, and parameter passing."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/resource.png",alt:"resource"})}),"\n",(0,n.jsx)(t.p,{children:"The most unique feature of ILLA Flow is the ability to incorporate an AI Agent into the workflow. This allows you to use an AI Agent, created by OpenAI's model, to process your notifications before sending them, making the notifications smarter and more interesting. You can also use the AI Agent for complex analyses, simplifying previously challenging summaries."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/agent.png",alt:"agent"})}),"\n",(0,n.jsx)(t.h2,{id:"achieved-results",children:"Achieved Results"}),"\n",(0,n.jsx)(t.p,{children:"We can create a workflow in ILLA Flow and then call Slack's Webhook in the workflow to achieve automated message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"After the completion of CI/CD tools, or after daily scheduled tasks, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to GitHub, allowing us to see messages sent by ILLA Flow in GitHub Issues."}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to the alert monitoring system, so when an alarm or anomaly occurs, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:"Finally, another product of ILLA, ILLA Builder, supports building custom panels, allowing us to jump directly to ILLA Builder to view more information through the links sent in Slack, making notifications very smart and detailed."}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"In daily work, there are numerous automation scenarios, and ILLA Flow is a tool aimed at developers. Most other automation connection tools are geared towards general users, which can make configuration more complex for developers."}),"\n",(0,n.jsx)(t.p,{children:"Using ILLA Flow, you can integrate AI Agents and various SaaS with one click, making internal team processes more automated and notifications smarter."})]})}function d(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>i});var n=o(959);const a={},s=n.createContext(a);function i(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/03dad041.2157f975.js b/assets/js/03dad041.2157f975.js
new file mode 100644
index 0000000000..9036c08fbb
--- /dev/null
+++ b/assets/js/03dad041.2157f975.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3815],{7909:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var a=t(1527),s=t(7214);const o={slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},r=void 0,i={permalink:"/illa-website/blog/web-worker-tutorial",source:"@site/blog/web-worker-tutorial/web-worker-tutorial.md",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"javascript",permalink:"/illa-website/blog/tags/javascript"},{label:"webworker",permalink:"/illa-website/blog/tags/webworker"}],readingTime:7.64,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},nextItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},relatedPosts:[{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"What is Web Worker",id:"what-is-web-worker",level:2},{value:"The Limitations of Web Workers",id:"the-limitations-of-web-workers",level:2},{value:"The usage of Web Workers",id:"the-usage-of-web-workers",level:2},{value:"Communication",id:"communication",level:3},{value:"Termination",id:"termination",level:3},{value:"Advanced: Making Communication Promise-Based",id:"advanced-making-communication-promise-based",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread. This is a very useful feature for web developers. However, it is not widely used. In this article, I will show you how to use Web Worker."}),"\n",(0,a.jsx)(n.h2,{id:"what-is-web-worker",children:"What is Web Worker"}),"\n",(0,a.jsx)(n.p,{children:"As is well known, one of the key features of the JavaScript language is its single-threaded nature, meaning it can only synchronously process one task at a time. This is also a significant point of criticism by backend developers for the emergence of Node.js, which is derived from this language."}),"\n",(0,a.jsx)(n.p,{children:"However, when JavaScript was initially designed, it was intentionally designed as a single-threaded language, primarily due to its intended use case at the time."}),"\n",(0,a.jsx)(n.p,{children:"The original purpose of JavaScript was to facilitate interaction between the web page and the user, manipulating DOM or BOM elements. If multiple threads were used to pursue efficiency in this context, it would lead to issues such as resource contention and data synchronization. Therefore, it was necessary to specify that only one thread could directly manipulate page elements at any given time to ensure system stability and security."}),"\n",(0,a.jsx)(n.p,{children:"Despite this, JavaScript is not limited to linear task processing. JavaScript has message queues and an event loop mechanism, allowing concurrency through asynchronous message handling. In high I/O-concurrent transaction processing, the performance is excellent because it eliminates the need to manually create and destroy threads and occupy additional thread management space. Consequently, Node.js, as an explorer of JavaScript on the server side, exhibits significant advantages in handling high-concurrency network requests."}),"\n",(0,a.jsx)(n.p,{children:"Although JavaScript effectively addresses the performance issues related to high I/O with its asynchronous mechanisms, the fundamental nature of single-threaded execution remains unchanged. The drawback is evident when it comes to handling CPU-intensive tasks, as it cannot fully harness the computational resources of modern multi-core, multi-threaded machines."}),"\n",(0,a.jsx)(n.p,{children:"In modern large-scale frontend projects, as code complexity increases, local compute-intensive tasks also become more demanding. Running JavaScript projects in a single thread inevitably results in the application being busy with computations and neglecting the frequent user interactions, leading to suboptimal user experiences. In more severe cases, when there are too many compute-intensive tasks, it can lead to the web page becoming unresponsive due to resource saturation. Therefore, the need for local multi-threaded computing capability in web projects became imperative, giving rise to Web Workers."}),"\n",(0,a.jsx)(n.p,{children:"Web Workers were introduced as a standard in HTML5, and they are officially defined as follows:"}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsx)(n.p,{children:"Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application."}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"It allows JavaScript scripts to create multiple threads, thus fully utilizing the CPU's multi-core computing capabilities without blocking the main thread (typically referred to as the UI rendering thread)."}),"\n",(0,a.jsx)(n.p,{children:"Although Web Workers are part of the HTML5 standard, they were actually proposed in a draft by W3C as early as 2009. Therefore, their compatibility is excellent, and they are supported by virtually all major web browsers."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/worker.png",alt:"web_worker"})}),"\n",(0,a.jsx)(n.h2,{id:"the-limitations-of-web-workers",children:"The Limitations of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"It's important to note that Web Workers fundamentally do not break JavaScript's single-threaded nature."}),"\n",(0,a.jsx)(n.p,{children:"In fact, the code within a Web Worker script cannot directly manipulate DOM nodes and cannot use the majority of BOM (Browser Object Model) APIs. Its global environment is DedicatedWorkerGlobalScope rather than Window. The Worker operates in a sandbox, running entirely separate JavaScript files from the main thread."}),"\n",(0,a.jsx)(n.p,{children:"These limitations imposed on Workers are designed to avoid the resource contention issues mentioned at the beginning of this article. Their primary use case is to act as adjuncts to the main thread, handling high CPU-intensive data processing tasks and then passing the execution results back to the main thread through inter-thread communication. Throughout this process, the main thread continues to be responsive to user interactions, effectively preventing page lagging issues."}),"\n",(0,a.jsx)(n.h2,{id:"the-usage-of-web-workers",children:"The usage of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"Currently, browser support for Web Workers is quite comprehensive, and you can typically use them by simply providing the URI of the Worker script and instantiating it."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:'/* main.js */\n\nconst worker = new Worker("./worker.js")\n'})}),"\n",(0,a.jsx)(n.h3,{id:"communication",children:"Communication"}),"\n",(0,a.jsxs)(n.p,{children:["Communication between a Worker and the main thread requires only two APIs on each side: ",(0,a.jsx)(n.code,{children:"onmessage"})," or ",(0,a.jsx)(n.code,{children:"addEventListener"})," for receiving messages and ",(0,a.jsx)(n.code,{children:"postMessage"})," for sending messages, enabling seamless message-based interaction."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nconst worker = new Worker(\"./worker.js\");\n\n// Main thread sends a message\nworker.postMessage({ data: 'Main thread sends data' });\n\n// Main thread receives a message\nworker.onmessage = (e) => {\n const { data } = e;\n if (!data) return;\n console.log(data);\n}\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// Worker thread receives a message\nself.addEventListener('message', (e) => {\n const { data } = e;\n if (!data) return;\n // Worker thread sends a message\n self.postMessage({data: 'Worker received data'})\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Note: In the Worker, ",(0,a.jsx)(n.code,{children:"this.xx"}),", ",(0,a.jsx)(n.code,{children:"self.xx"}),", and directly using ",(0,a.jsx)(n.code,{children:"xx"})," all have the same scope, referring to the global variable ",(0,a.jsx)(n.code,{children:"DedicatedWorkerGlobalScope"}),", and can be used interchangeably."]}),"\n",(0,a.jsx)(n.h3,{id:"termination",children:"Termination"}),"\n",(0,a.jsx)(n.p,{children:"There are two ways to terminate a Worker: it can be terminated internally or can be instructed to terminate by the main thread."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* main.js */\nworker.terminate();\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* worker.js */\nself.close();\n"})}),"\n",(0,a.jsx)(n.h3,{id:"advanced-making-communication-promise-based",children:"Advanced: Making Communication Promise-Based"}),"\n",(0,a.jsx)(n.p,{children:"Based on the previous section, we have already been able to use the Worker's API to harness the browser's multi-threading capabilities quite simply. However, it lacks some usability features that are often needed in engineering applications, such as asynchronous responses. Let's do that next."}),"\n",(0,a.jsxs)(n.p,{children:["Firstly, we need an asynchronous callback collection called ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", which is used to store Promise resolve methods awaiting responses from the Worker. The keys can be specified using some unique identifier from the communication (ensuring uniqueness is sufficient). Next, we need to encapsulate the native ",(0,a.jsx)(n.code,{children:"postMessage"})," and ",(0,a.jsx)(n.code,{children:"onmessage"})," methods."]}),"\n",(0,a.jsxs)(n.p,{children:["In the messages sent via ",(0,a.jsx)(n.code,{children:"postMessage"}),", we include an ",(0,a.jsx)(n.code,{children:"id"})," and place the current Promise's resolve method into ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", awaiting the Worker's response."]}),"\n",(0,a.jsxs)(n.p,{children:["Regarding the ",(0,a.jsx)(n.code,{children:"onmessage"})," listener, after receiving a response from the Worker, we match it with the corresponding Promise and execute the ",(0,a.jsx)(n.code,{children:".then()"})," method. After completion, we remove the Promise's resolve function from the collection."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nlet fakeId = 0;\nclass MainThreadController {\n constructor(options) {\n this.worker = new Worker(options.workerUrl, { name: options.workerName });\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n onmessage(e) {\n const { id, response } = e.data;\n if (!this.actionHandlerMap[id]) return;\n\n // Execute the corresponding Promise resolve\n this.actionHandlerMap[id].call(this, response);\n delete this.actionHandlerMap[id];\n }\n\n postMessage(action) {\n // In practical use, you can specify or generate a business id as the key\n const id = fakeId++;\n return new Promise((resolve, reject) => {\n const message = {\n id,\n ...action,\n };\n this.worker.postMessage(message);\n this.actionHandlerMap[id] = (response) => {\n resolve(response);\n };\n });\n }\n}\n\nconst mainThreadController = new MainThreadController({ workerUrl: './worker.js', workerName: 'test-worker' });\nmainThreadController\n .postMessage({\n actionType: 'asyncCalc',\n payload: { msg: 'send messages to worker', params: 1 },\n })\n .then((response) => console.log('Message received from worker:', response.msg));\n"})}),"\n",(0,a.jsx)(n.p,{children:"The handling of the worker part is much simpler. After completing the computational processing, include the request's id in the response."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n switch (actionType) {\n case 'print':\n console.log(payload.msg);\n self.postMessage({ id, response: { msg: 'Message has been printed.' } });\n break;\n\n case 'asyncCalc':\n // Simulate an asynchronous processing scenario\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n self.postMessage({ id, response: { msg: `The calculated answer is ${result}.` } });\n break;\n\n default:\n break;\n }\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Of course, further improvements can be made on the worker side. We've noticed that as the Worker needs to handle more types of computations, using a switch statement in the ",(0,a.jsx)(n.code,{children:"onmessage"})," function can become lengthy. String-based checks may also not be reliable enough. We can simplify the logic within the Worker by encapsulating it using a strategy pattern."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// This can be extracted into a separate file and then imported\nconst api = {\n print(payload) {\n console.log(payload.msg);\n return { msg: 'Message has been printed.' };\n },\n async asyncCalc(payload) {\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n return { msg: `The calculated answer is ${result}.` };\n },\n};\n\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n const result = await api[actionType].call(this, payload);\n self.postMessage({ id, response: result });\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsx)(n.p,{children:"Thus, a simple and useful Promise-based Worker has been established."}),"\n",(0,a.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(n.p,{children:"In summary, this article provided a brief overview of Web Workers, including their capabilities and limitations, to give readers a comprehensive understanding of their use cases. It proposed a solution for encapsulating the native Worker API to enable Promise-based invocation. Finally, it recommended a feature-rich mature solution currently used within the team, with the hope of assisting frontend developers interested in working on Worker enhancements in the near future."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>r});var a=t(959);const s={},o=a.createContext(s);function r(e){const n=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/03dad041.cdf3e55a.js b/assets/js/03dad041.cdf3e55a.js
deleted file mode 100644
index 3690d3978b..0000000000
--- a/assets/js/03dad041.cdf3e55a.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3815],{7909:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var a=t(1527),s=t(7214);const r={slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},o=void 0,i={permalink:"/illa-website/blog/web-worker-tutorial",source:"@site/blog/web-worker-tutorial/web-worker-tutorial.md",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"javascript",permalink:"/illa-website/blog/tags/javascript"},{label:"webworker",permalink:"/illa-website/blog/tags/webworker"}],readingTime:7.64,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},nextItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},relatedPosts:[{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"What is Web Worker",id:"what-is-web-worker",level:2},{value:"The Limitations of Web Workers",id:"the-limitations-of-web-workers",level:2},{value:"The usage of Web Workers",id:"the-usage-of-web-workers",level:2},{value:"Communication",id:"communication",level:3},{value:"Termination",id:"termination",level:3},{value:"Advanced: Making Communication Promise-Based",id:"advanced-making-communication-promise-based",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread. This is a very useful feature for web developers. However, it is not widely used. In this article, I will show you how to use Web Worker."}),"\n",(0,a.jsx)(n.h2,{id:"what-is-web-worker",children:"What is Web Worker"}),"\n",(0,a.jsx)(n.p,{children:"As is well known, one of the key features of the JavaScript language is its single-threaded nature, meaning it can only synchronously process one task at a time. This is also a significant point of criticism by backend developers for the emergence of Node.js, which is derived from this language."}),"\n",(0,a.jsx)(n.p,{children:"However, when JavaScript was initially designed, it was intentionally designed as a single-threaded language, primarily due to its intended use case at the time."}),"\n",(0,a.jsx)(n.p,{children:"The original purpose of JavaScript was to facilitate interaction between the web page and the user, manipulating DOM or BOM elements. If multiple threads were used to pursue efficiency in this context, it would lead to issues such as resource contention and data synchronization. Therefore, it was necessary to specify that only one thread could directly manipulate page elements at any given time to ensure system stability and security."}),"\n",(0,a.jsx)(n.p,{children:"Despite this, JavaScript is not limited to linear task processing. JavaScript has message queues and an event loop mechanism, allowing concurrency through asynchronous message handling. In high I/O-concurrent transaction processing, the performance is excellent because it eliminates the need to manually create and destroy threads and occupy additional thread management space. Consequently, Node.js, as an explorer of JavaScript on the server side, exhibits significant advantages in handling high-concurrency network requests."}),"\n",(0,a.jsx)(n.p,{children:"Although JavaScript effectively addresses the performance issues related to high I/O with its asynchronous mechanisms, the fundamental nature of single-threaded execution remains unchanged. The drawback is evident when it comes to handling CPU-intensive tasks, as it cannot fully harness the computational resources of modern multi-core, multi-threaded machines."}),"\n",(0,a.jsx)(n.p,{children:"In modern large-scale frontend projects, as code complexity increases, local compute-intensive tasks also become more demanding. Running JavaScript projects in a single thread inevitably results in the application being busy with computations and neglecting the frequent user interactions, leading to suboptimal user experiences. In more severe cases, when there are too many compute-intensive tasks, it can lead to the web page becoming unresponsive due to resource saturation. Therefore, the need for local multi-threaded computing capability in web projects became imperative, giving rise to Web Workers."}),"\n",(0,a.jsx)(n.p,{children:"Web Workers were introduced as a standard in HTML5, and they are officially defined as follows:"}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsx)(n.p,{children:"Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application."}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"It allows JavaScript scripts to create multiple threads, thus fully utilizing the CPU's multi-core computing capabilities without blocking the main thread (typically referred to as the UI rendering thread)."}),"\n",(0,a.jsx)(n.p,{children:"Although Web Workers are part of the HTML5 standard, they were actually proposed in a draft by W3C as early as 2009. Therefore, their compatibility is excellent, and they are supported by virtually all major web browsers."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/worker.png",alt:"web_worker"})}),"\n",(0,a.jsx)(n.h2,{id:"the-limitations-of-web-workers",children:"The Limitations of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"It's important to note that Web Workers fundamentally do not break JavaScript's single-threaded nature."}),"\n",(0,a.jsx)(n.p,{children:"In fact, the code within a Web Worker script cannot directly manipulate DOM nodes and cannot use the majority of BOM (Browser Object Model) APIs. Its global environment is DedicatedWorkerGlobalScope rather than Window. The Worker operates in a sandbox, running entirely separate JavaScript files from the main thread."}),"\n",(0,a.jsx)(n.p,{children:"These limitations imposed on Workers are designed to avoid the resource contention issues mentioned at the beginning of this article. Their primary use case is to act as adjuncts to the main thread, handling high CPU-intensive data processing tasks and then passing the execution results back to the main thread through inter-thread communication. Throughout this process, the main thread continues to be responsive to user interactions, effectively preventing page lagging issues."}),"\n",(0,a.jsx)(n.h2,{id:"the-usage-of-web-workers",children:"The usage of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"Currently, browser support for Web Workers is quite comprehensive, and you can typically use them by simply providing the URI of the Worker script and instantiating it."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:'/* main.js */\n\nconst worker = new Worker("./worker.js")\n'})}),"\n",(0,a.jsx)(n.h3,{id:"communication",children:"Communication"}),"\n",(0,a.jsxs)(n.p,{children:["Communication between a Worker and the main thread requires only two APIs on each side: ",(0,a.jsx)(n.code,{children:"onmessage"})," or ",(0,a.jsx)(n.code,{children:"addEventListener"})," for receiving messages and ",(0,a.jsx)(n.code,{children:"postMessage"})," for sending messages, enabling seamless message-based interaction."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nconst worker = new Worker(\"./worker.js\");\n\n// Main thread sends a message\nworker.postMessage({ data: 'Main thread sends data' });\n\n// Main thread receives a message\nworker.onmessage = (e) => {\n const { data } = e;\n if (!data) return;\n console.log(data);\n}\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// Worker thread receives a message\nself.addEventListener('message', (e) => {\n const { data } = e;\n if (!data) return;\n // Worker thread sends a message\n self.postMessage({data: 'Worker received data'})\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Note: In the Worker, ",(0,a.jsx)(n.code,{children:"this.xx"}),", ",(0,a.jsx)(n.code,{children:"self.xx"}),", and directly using ",(0,a.jsx)(n.code,{children:"xx"})," all have the same scope, referring to the global variable ",(0,a.jsx)(n.code,{children:"DedicatedWorkerGlobalScope"}),", and can be used interchangeably."]}),"\n",(0,a.jsx)(n.h3,{id:"termination",children:"Termination"}),"\n",(0,a.jsx)(n.p,{children:"There are two ways to terminate a Worker: it can be terminated internally or can be instructed to terminate by the main thread."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* main.js */\nworker.terminate();\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* worker.js */\nself.close();\n"})}),"\n",(0,a.jsx)(n.h3,{id:"advanced-making-communication-promise-based",children:"Advanced: Making Communication Promise-Based"}),"\n",(0,a.jsx)(n.p,{children:"Based on the previous section, we have already been able to use the Worker's API to harness the browser's multi-threading capabilities quite simply. However, it lacks some usability features that are often needed in engineering applications, such as asynchronous responses. Let's do that next."}),"\n",(0,a.jsxs)(n.p,{children:["Firstly, we need an asynchronous callback collection called ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", which is used to store Promise resolve methods awaiting responses from the Worker. The keys can be specified using some unique identifier from the communication (ensuring uniqueness is sufficient). Next, we need to encapsulate the native ",(0,a.jsx)(n.code,{children:"postMessage"})," and ",(0,a.jsx)(n.code,{children:"onmessage"})," methods."]}),"\n",(0,a.jsxs)(n.p,{children:["In the messages sent via ",(0,a.jsx)(n.code,{children:"postMessage"}),", we include an ",(0,a.jsx)(n.code,{children:"id"})," and place the current Promise's resolve method into ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", awaiting the Worker's response."]}),"\n",(0,a.jsxs)(n.p,{children:["Regarding the ",(0,a.jsx)(n.code,{children:"onmessage"})," listener, after receiving a response from the Worker, we match it with the corresponding Promise and execute the ",(0,a.jsx)(n.code,{children:".then()"})," method. After completion, we remove the Promise's resolve function from the collection."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nlet fakeId = 0;\nclass MainThreadController {\n constructor(options) {\n this.worker = new Worker(options.workerUrl, { name: options.workerName });\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n onmessage(e) {\n const { id, response } = e.data;\n if (!this.actionHandlerMap[id]) return;\n\n // Execute the corresponding Promise resolve\n this.actionHandlerMap[id].call(this, response);\n delete this.actionHandlerMap[id];\n }\n\n postMessage(action) {\n // In practical use, you can specify or generate a business id as the key\n const id = fakeId++;\n return new Promise((resolve, reject) => {\n const message = {\n id,\n ...action,\n };\n this.worker.postMessage(message);\n this.actionHandlerMap[id] = (response) => {\n resolve(response);\n };\n });\n }\n}\n\nconst mainThreadController = new MainThreadController({ workerUrl: './worker.js', workerName: 'test-worker' });\nmainThreadController\n .postMessage({\n actionType: 'asyncCalc',\n payload: { msg: 'send messages to worker', params: 1 },\n })\n .then((response) => console.log('Message received from worker:', response.msg));\n"})}),"\n",(0,a.jsx)(n.p,{children:"The handling of the worker part is much simpler. After completing the computational processing, include the request's id in the response."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n switch (actionType) {\n case 'print':\n console.log(payload.msg);\n self.postMessage({ id, response: { msg: 'Message has been printed.' } });\n break;\n\n case 'asyncCalc':\n // Simulate an asynchronous processing scenario\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n self.postMessage({ id, response: { msg: `The calculated answer is ${result}.` } });\n break;\n\n default:\n break;\n }\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Of course, further improvements can be made on the worker side. We've noticed that as the Worker needs to handle more types of computations, using a switch statement in the ",(0,a.jsx)(n.code,{children:"onmessage"})," function can become lengthy. String-based checks may also not be reliable enough. We can simplify the logic within the Worker by encapsulating it using a strategy pattern."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// This can be extracted into a separate file and then imported\nconst api = {\n print(payload) {\n console.log(payload.msg);\n return { msg: 'Message has been printed.' };\n },\n async asyncCalc(payload) {\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n return { msg: `The calculated answer is ${result}.` };\n },\n};\n\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n const result = await api[actionType].call(this, payload);\n self.postMessage({ id, response: result });\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsx)(n.p,{children:"Thus, a simple and useful Promise-based Worker has been established."}),"\n",(0,a.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(n.p,{children:"In summary, this article provided a brief overview of Web Workers, including their capabilities and limitations, to give readers a comprehensive understanding of their use cases. It proposed a solution for encapsulating the native Worker API to enable Promise-based invocation. Finally, it recommended a feature-rich mature solution currently used within the team, with the hope of assisting frontend developers interested in working on Worker enhancements in the near future."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>o});var a=t(959);const s={},r=a.createContext(s);function o(e){const n=a.useContext(r);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/0b153274.58692331.js b/assets/js/0b153274.58692331.js
deleted file mode 100644
index f2ea02aa03..0000000000
--- a/assets/js/0b153274.58692331.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[6591],{5858:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var a=t(1527),s=t(7214);const r={slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},o=void 0,i={permalink:"/illa-website/blog/web-worker-tutorial",source:"@site/blog/web-worker-tutorial/web-worker-tutorial.md",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"javascript",permalink:"/illa-website/blog/tags/javascript"},{label:"webworker",permalink:"/illa-website/blog/tags/webworker"}],readingTime:7.64,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},nextItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},relatedPosts:[{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"What is Web Worker",id:"what-is-web-worker",level:2},{value:"The Limitations of Web Workers",id:"the-limitations-of-web-workers",level:2},{value:"The usage of Web Workers",id:"the-usage-of-web-workers",level:2},{value:"Communication",id:"communication",level:3},{value:"Termination",id:"termination",level:3},{value:"Advanced: Making Communication Promise-Based",id:"advanced-making-communication-promise-based",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread. This is a very useful feature for web developers. However, it is not widely used. In this article, I will show you how to use Web Worker."}),"\n",(0,a.jsx)(n.h2,{id:"what-is-web-worker",children:"What is Web Worker"}),"\n",(0,a.jsx)(n.p,{children:"As is well known, one of the key features of the JavaScript language is its single-threaded nature, meaning it can only synchronously process one task at a time. This is also a significant point of criticism by backend developers for the emergence of Node.js, which is derived from this language."}),"\n",(0,a.jsx)(n.p,{children:"However, when JavaScript was initially designed, it was intentionally designed as a single-threaded language, primarily due to its intended use case at the time."}),"\n",(0,a.jsx)(n.p,{children:"The original purpose of JavaScript was to facilitate interaction between the web page and the user, manipulating DOM or BOM elements. If multiple threads were used to pursue efficiency in this context, it would lead to issues such as resource contention and data synchronization. Therefore, it was necessary to specify that only one thread could directly manipulate page elements at any given time to ensure system stability and security."}),"\n",(0,a.jsx)(n.p,{children:"Despite this, JavaScript is not limited to linear task processing. JavaScript has message queues and an event loop mechanism, allowing concurrency through asynchronous message handling. In high I/O-concurrent transaction processing, the performance is excellent because it eliminates the need to manually create and destroy threads and occupy additional thread management space. Consequently, Node.js, as an explorer of JavaScript on the server side, exhibits significant advantages in handling high-concurrency network requests."}),"\n",(0,a.jsx)(n.p,{children:"Although JavaScript effectively addresses the performance issues related to high I/O with its asynchronous mechanisms, the fundamental nature of single-threaded execution remains unchanged. The drawback is evident when it comes to handling CPU-intensive tasks, as it cannot fully harness the computational resources of modern multi-core, multi-threaded machines."}),"\n",(0,a.jsx)(n.p,{children:"In modern large-scale frontend projects, as code complexity increases, local compute-intensive tasks also become more demanding. Running JavaScript projects in a single thread inevitably results in the application being busy with computations and neglecting the frequent user interactions, leading to suboptimal user experiences. In more severe cases, when there are too many compute-intensive tasks, it can lead to the web page becoming unresponsive due to resource saturation. Therefore, the need for local multi-threaded computing capability in web projects became imperative, giving rise to Web Workers."}),"\n",(0,a.jsx)(n.p,{children:"Web Workers were introduced as a standard in HTML5, and they are officially defined as follows:"}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsx)(n.p,{children:"Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application."}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"It allows JavaScript scripts to create multiple threads, thus fully utilizing the CPU's multi-core computing capabilities without blocking the main thread (typically referred to as the UI rendering thread)."}),"\n",(0,a.jsx)(n.p,{children:"Although Web Workers are part of the HTML5 standard, they were actually proposed in a draft by W3C as early as 2009. Therefore, their compatibility is excellent, and they are supported by virtually all major web browsers."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/worker.png",alt:"web_worker"})}),"\n",(0,a.jsx)(n.h2,{id:"the-limitations-of-web-workers",children:"The Limitations of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"It's important to note that Web Workers fundamentally do not break JavaScript's single-threaded nature."}),"\n",(0,a.jsx)(n.p,{children:"In fact, the code within a Web Worker script cannot directly manipulate DOM nodes and cannot use the majority of BOM (Browser Object Model) APIs. Its global environment is DedicatedWorkerGlobalScope rather than Window. The Worker operates in a sandbox, running entirely separate JavaScript files from the main thread."}),"\n",(0,a.jsx)(n.p,{children:"These limitations imposed on Workers are designed to avoid the resource contention issues mentioned at the beginning of this article. Their primary use case is to act as adjuncts to the main thread, handling high CPU-intensive data processing tasks and then passing the execution results back to the main thread through inter-thread communication. Throughout this process, the main thread continues to be responsive to user interactions, effectively preventing page lagging issues."}),"\n",(0,a.jsx)(n.h2,{id:"the-usage-of-web-workers",children:"The usage of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"Currently, browser support for Web Workers is quite comprehensive, and you can typically use them by simply providing the URI of the Worker script and instantiating it."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:'/* main.js */\n\nconst worker = new Worker("./worker.js")\n'})}),"\n",(0,a.jsx)(n.h3,{id:"communication",children:"Communication"}),"\n",(0,a.jsxs)(n.p,{children:["Communication between a Worker and the main thread requires only two APIs on each side: ",(0,a.jsx)(n.code,{children:"onmessage"})," or ",(0,a.jsx)(n.code,{children:"addEventListener"})," for receiving messages and ",(0,a.jsx)(n.code,{children:"postMessage"})," for sending messages, enabling seamless message-based interaction."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nconst worker = new Worker(\"./worker.js\");\n\n// Main thread sends a message\nworker.postMessage({ data: 'Main thread sends data' });\n\n// Main thread receives a message\nworker.onmessage = (e) => {\n const { data } = e;\n if (!data) return;\n console.log(data);\n}\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// Worker thread receives a message\nself.addEventListener('message', (e) => {\n const { data } = e;\n if (!data) return;\n // Worker thread sends a message\n self.postMessage({data: 'Worker received data'})\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Note: In the Worker, ",(0,a.jsx)(n.code,{children:"this.xx"}),", ",(0,a.jsx)(n.code,{children:"self.xx"}),", and directly using ",(0,a.jsx)(n.code,{children:"xx"})," all have the same scope, referring to the global variable ",(0,a.jsx)(n.code,{children:"DedicatedWorkerGlobalScope"}),", and can be used interchangeably."]}),"\n",(0,a.jsx)(n.h3,{id:"termination",children:"Termination"}),"\n",(0,a.jsx)(n.p,{children:"There are two ways to terminate a Worker: it can be terminated internally or can be instructed to terminate by the main thread."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* main.js */\nworker.terminate();\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* worker.js */\nself.close();\n"})}),"\n",(0,a.jsx)(n.h3,{id:"advanced-making-communication-promise-based",children:"Advanced: Making Communication Promise-Based"}),"\n",(0,a.jsx)(n.p,{children:"Based on the previous section, we have already been able to use the Worker's API to harness the browser's multi-threading capabilities quite simply. However, it lacks some usability features that are often needed in engineering applications, such as asynchronous responses. Let's do that next."}),"\n",(0,a.jsxs)(n.p,{children:["Firstly, we need an asynchronous callback collection called ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", which is used to store Promise resolve methods awaiting responses from the Worker. The keys can be specified using some unique identifier from the communication (ensuring uniqueness is sufficient). Next, we need to encapsulate the native ",(0,a.jsx)(n.code,{children:"postMessage"})," and ",(0,a.jsx)(n.code,{children:"onmessage"})," methods."]}),"\n",(0,a.jsxs)(n.p,{children:["In the messages sent via ",(0,a.jsx)(n.code,{children:"postMessage"}),", we include an ",(0,a.jsx)(n.code,{children:"id"})," and place the current Promise's resolve method into ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", awaiting the Worker's response."]}),"\n",(0,a.jsxs)(n.p,{children:["Regarding the ",(0,a.jsx)(n.code,{children:"onmessage"})," listener, after receiving a response from the Worker, we match it with the corresponding Promise and execute the ",(0,a.jsx)(n.code,{children:".then()"})," method. After completion, we remove the Promise's resolve function from the collection."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nlet fakeId = 0;\nclass MainThreadController {\n constructor(options) {\n this.worker = new Worker(options.workerUrl, { name: options.workerName });\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n onmessage(e) {\n const { id, response } = e.data;\n if (!this.actionHandlerMap[id]) return;\n\n // Execute the corresponding Promise resolve\n this.actionHandlerMap[id].call(this, response);\n delete this.actionHandlerMap[id];\n }\n\n postMessage(action) {\n // In practical use, you can specify or generate a business id as the key\n const id = fakeId++;\n return new Promise((resolve, reject) => {\n const message = {\n id,\n ...action,\n };\n this.worker.postMessage(message);\n this.actionHandlerMap[id] = (response) => {\n resolve(response);\n };\n });\n }\n}\n\nconst mainThreadController = new MainThreadController({ workerUrl: './worker.js', workerName: 'test-worker' });\nmainThreadController\n .postMessage({\n actionType: 'asyncCalc',\n payload: { msg: 'send messages to worker', params: 1 },\n })\n .then((response) => console.log('Message received from worker:', response.msg));\n"})}),"\n",(0,a.jsx)(n.p,{children:"The handling of the worker part is much simpler. After completing the computational processing, include the request's id in the response."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n switch (actionType) {\n case 'print':\n console.log(payload.msg);\n self.postMessage({ id, response: { msg: 'Message has been printed.' } });\n break;\n\n case 'asyncCalc':\n // Simulate an asynchronous processing scenario\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n self.postMessage({ id, response: { msg: `The calculated answer is ${result}.` } });\n break;\n\n default:\n break;\n }\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Of course, further improvements can be made on the worker side. We've noticed that as the Worker needs to handle more types of computations, using a switch statement in the ",(0,a.jsx)(n.code,{children:"onmessage"})," function can become lengthy. String-based checks may also not be reliable enough. We can simplify the logic within the Worker by encapsulating it using a strategy pattern."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// This can be extracted into a separate file and then imported\nconst api = {\n print(payload) {\n console.log(payload.msg);\n return { msg: 'Message has been printed.' };\n },\n async asyncCalc(payload) {\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n return { msg: `The calculated answer is ${result}.` };\n },\n};\n\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n const result = await api[actionType].call(this, payload);\n self.postMessage({ id, response: result });\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsx)(n.p,{children:"Thus, a simple and useful Promise-based Worker has been established."}),"\n",(0,a.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(n.p,{children:"In summary, this article provided a brief overview of Web Workers, including their capabilities and limitations, to give readers a comprehensive understanding of their use cases. It proposed a solution for encapsulating the native Worker API to enable Promise-based invocation. Finally, it recommended a feature-rich mature solution currently used within the team, with the hope of assisting frontend developers interested in working on Worker enhancements in the near future."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>o});var a=t(959);const s={},r=a.createContext(s);function o(e){const n=a.useContext(r);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/0b153274.b6377492.js b/assets/js/0b153274.b6377492.js
new file mode 100644
index 0000000000..e584c0ac7a
--- /dev/null
+++ b/assets/js/0b153274.b6377492.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[6591],{5858:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var a=t(1527),s=t(7214);const o={slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},r=void 0,i={permalink:"/illa-website/blog/web-worker-tutorial",source:"@site/blog/web-worker-tutorial/web-worker-tutorial.md",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"javascript",permalink:"/illa-website/blog/tags/javascript"},{label:"webworker",permalink:"/illa-website/blog/tags/webworker"}],readingTime:7.64,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"web-worker-tutorial",title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/cover.webp",tags:["javascript","webworker"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},nextItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},relatedPosts:[{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"What is Web Worker",id:"what-is-web-worker",level:2},{value:"The Limitations of Web Workers",id:"the-limitations-of-web-workers",level:2},{value:"The usage of Web Workers",id:"the-usage-of-web-workers",level:2},{value:"Communication",id:"communication",level:3},{value:"Termination",id:"termination",level:3},{value:"Advanced: Making Communication Promise-Based",id:"advanced-making-communication-promise-based",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread. This is a very useful feature for web developers. However, it is not widely used. In this article, I will show you how to use Web Worker."}),"\n",(0,a.jsx)(n.h2,{id:"what-is-web-worker",children:"What is Web Worker"}),"\n",(0,a.jsx)(n.p,{children:"As is well known, one of the key features of the JavaScript language is its single-threaded nature, meaning it can only synchronously process one task at a time. This is also a significant point of criticism by backend developers for the emergence of Node.js, which is derived from this language."}),"\n",(0,a.jsx)(n.p,{children:"However, when JavaScript was initially designed, it was intentionally designed as a single-threaded language, primarily due to its intended use case at the time."}),"\n",(0,a.jsx)(n.p,{children:"The original purpose of JavaScript was to facilitate interaction between the web page and the user, manipulating DOM or BOM elements. If multiple threads were used to pursue efficiency in this context, it would lead to issues such as resource contention and data synchronization. Therefore, it was necessary to specify that only one thread could directly manipulate page elements at any given time to ensure system stability and security."}),"\n",(0,a.jsx)(n.p,{children:"Despite this, JavaScript is not limited to linear task processing. JavaScript has message queues and an event loop mechanism, allowing concurrency through asynchronous message handling. In high I/O-concurrent transaction processing, the performance is excellent because it eliminates the need to manually create and destroy threads and occupy additional thread management space. Consequently, Node.js, as an explorer of JavaScript on the server side, exhibits significant advantages in handling high-concurrency network requests."}),"\n",(0,a.jsx)(n.p,{children:"Although JavaScript effectively addresses the performance issues related to high I/O with its asynchronous mechanisms, the fundamental nature of single-threaded execution remains unchanged. The drawback is evident when it comes to handling CPU-intensive tasks, as it cannot fully harness the computational resources of modern multi-core, multi-threaded machines."}),"\n",(0,a.jsx)(n.p,{children:"In modern large-scale frontend projects, as code complexity increases, local compute-intensive tasks also become more demanding. Running JavaScript projects in a single thread inevitably results in the application being busy with computations and neglecting the frequent user interactions, leading to suboptimal user experiences. In more severe cases, when there are too many compute-intensive tasks, it can lead to the web page becoming unresponsive due to resource saturation. Therefore, the need for local multi-threaded computing capability in web projects became imperative, giving rise to Web Workers."}),"\n",(0,a.jsx)(n.p,{children:"Web Workers were introduced as a standard in HTML5, and they are officially defined as follows:"}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsx)(n.p,{children:"Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application."}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"It allows JavaScript scripts to create multiple threads, thus fully utilizing the CPU's multi-core computing capabilities without blocking the main thread (typically referred to as the UI rendering thread)."}),"\n",(0,a.jsx)(n.p,{children:"Although Web Workers are part of the HTML5 standard, they were actually proposed in a draft by W3C as early as 2009. Therefore, their compatibility is excellent, and they are supported by virtually all major web browsers."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/web-worker-tutorial/worker.png",alt:"web_worker"})}),"\n",(0,a.jsx)(n.h2,{id:"the-limitations-of-web-workers",children:"The Limitations of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"It's important to note that Web Workers fundamentally do not break JavaScript's single-threaded nature."}),"\n",(0,a.jsx)(n.p,{children:"In fact, the code within a Web Worker script cannot directly manipulate DOM nodes and cannot use the majority of BOM (Browser Object Model) APIs. Its global environment is DedicatedWorkerGlobalScope rather than Window. The Worker operates in a sandbox, running entirely separate JavaScript files from the main thread."}),"\n",(0,a.jsx)(n.p,{children:"These limitations imposed on Workers are designed to avoid the resource contention issues mentioned at the beginning of this article. Their primary use case is to act as adjuncts to the main thread, handling high CPU-intensive data processing tasks and then passing the execution results back to the main thread through inter-thread communication. Throughout this process, the main thread continues to be responsive to user interactions, effectively preventing page lagging issues."}),"\n",(0,a.jsx)(n.h2,{id:"the-usage-of-web-workers",children:"The usage of Web Workers"}),"\n",(0,a.jsx)(n.p,{children:"Currently, browser support for Web Workers is quite comprehensive, and you can typically use them by simply providing the URI of the Worker script and instantiating it."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:'/* main.js */\n\nconst worker = new Worker("./worker.js")\n'})}),"\n",(0,a.jsx)(n.h3,{id:"communication",children:"Communication"}),"\n",(0,a.jsxs)(n.p,{children:["Communication between a Worker and the main thread requires only two APIs on each side: ",(0,a.jsx)(n.code,{children:"onmessage"})," or ",(0,a.jsx)(n.code,{children:"addEventListener"})," for receiving messages and ",(0,a.jsx)(n.code,{children:"postMessage"})," for sending messages, enabling seamless message-based interaction."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nconst worker = new Worker(\"./worker.js\");\n\n// Main thread sends a message\nworker.postMessage({ data: 'Main thread sends data' });\n\n// Main thread receives a message\nworker.onmessage = (e) => {\n const { data } = e;\n if (!data) return;\n console.log(data);\n}\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// Worker thread receives a message\nself.addEventListener('message', (e) => {\n const { data } = e;\n if (!data) return;\n // Worker thread sends a message\n self.postMessage({data: 'Worker received data'})\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Note: In the Worker, ",(0,a.jsx)(n.code,{children:"this.xx"}),", ",(0,a.jsx)(n.code,{children:"self.xx"}),", and directly using ",(0,a.jsx)(n.code,{children:"xx"})," all have the same scope, referring to the global variable ",(0,a.jsx)(n.code,{children:"DedicatedWorkerGlobalScope"}),", and can be used interchangeably."]}),"\n",(0,a.jsx)(n.h3,{id:"termination",children:"Termination"}),"\n",(0,a.jsx)(n.p,{children:"There are two ways to terminate a Worker: it can be terminated internally or can be instructed to terminate by the main thread."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* main.js */\nworker.terminate();\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"/* worker.js */\nself.close();\n"})}),"\n",(0,a.jsx)(n.h3,{id:"advanced-making-communication-promise-based",children:"Advanced: Making Communication Promise-Based"}),"\n",(0,a.jsx)(n.p,{children:"Based on the previous section, we have already been able to use the Worker's API to harness the browser's multi-threading capabilities quite simply. However, it lacks some usability features that are often needed in engineering applications, such as asynchronous responses. Let's do that next."}),"\n",(0,a.jsxs)(n.p,{children:["Firstly, we need an asynchronous callback collection called ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", which is used to store Promise resolve methods awaiting responses from the Worker. The keys can be specified using some unique identifier from the communication (ensuring uniqueness is sufficient). Next, we need to encapsulate the native ",(0,a.jsx)(n.code,{children:"postMessage"})," and ",(0,a.jsx)(n.code,{children:"onmessage"})," methods."]}),"\n",(0,a.jsxs)(n.p,{children:["In the messages sent via ",(0,a.jsx)(n.code,{children:"postMessage"}),", we include an ",(0,a.jsx)(n.code,{children:"id"})," and place the current Promise's resolve method into ",(0,a.jsx)(n.code,{children:"actionHandlerMap"}),", awaiting the Worker's response."]}),"\n",(0,a.jsxs)(n.p,{children:["Regarding the ",(0,a.jsx)(n.code,{children:"onmessage"})," listener, after receiving a response from the Worker, we match it with the corresponding Promise and execute the ",(0,a.jsx)(n.code,{children:".then()"})," method. After completion, we remove the Promise's resolve function from the collection."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* main.js */\nlet fakeId = 0;\nclass MainThreadController {\n constructor(options) {\n this.worker = new Worker(options.workerUrl, { name: options.workerName });\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n onmessage(e) {\n const { id, response } = e.data;\n if (!this.actionHandlerMap[id]) return;\n\n // Execute the corresponding Promise resolve\n this.actionHandlerMap[id].call(this, response);\n delete this.actionHandlerMap[id];\n }\n\n postMessage(action) {\n // In practical use, you can specify or generate a business id as the key\n const id = fakeId++;\n return new Promise((resolve, reject) => {\n const message = {\n id,\n ...action,\n };\n this.worker.postMessage(message);\n this.actionHandlerMap[id] = (response) => {\n resolve(response);\n };\n });\n }\n}\n\nconst mainThreadController = new MainThreadController({ workerUrl: './worker.js', workerName: 'test-worker' });\nmainThreadController\n .postMessage({\n actionType: 'asyncCalc',\n payload: { msg: 'send messages to worker', params: 1 },\n })\n .then((response) => console.log('Message received from worker:', response.msg));\n"})}),"\n",(0,a.jsx)(n.p,{children:"The handling of the worker part is much simpler. After completing the computational processing, include the request's id in the response."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n switch (actionType) {\n case 'print':\n console.log(payload.msg);\n self.postMessage({ id, response: { msg: 'Message has been printed.' } });\n break;\n\n case 'asyncCalc':\n // Simulate an asynchronous processing scenario\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n self.postMessage({ id, response: { msg: `The calculated answer is ${result}.` } });\n break;\n\n default:\n break;\n }\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Of course, further improvements can be made on the worker side. We've noticed that as the Worker needs to handle more types of computations, using a switch statement in the ",(0,a.jsx)(n.code,{children:"onmessage"})," function can become lengthy. String-based checks may also not be reliable enough. We can simplify the logic within the Worker by encapsulating it using a strategy pattern."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"/* worker.js */\n// This can be extracted into a separate file and then imported\nconst api = {\n print(payload) {\n console.log(payload.msg);\n return { msg: 'Message has been printed.' };\n },\n async asyncCalc(payload) {\n const result = await new Promise((resolve) => setTimeout(() => resolve(payload.params * 2), 1000));\n return { msg: `The calculated answer is ${result}.` };\n },\n};\n\nclass WorkerThreadController {\n constructor() {\n this.worker = self;\n\n // Collection for awaiting asynchronous callbacks\n this.actionHandlerMap = {};\n\n this.worker.onmessage = this.onmessage.bind(this);\n }\n\n async onmessage(e) {\n const { id, actionType, payload } = e.data;\n const result = await api[actionType].call(this, payload);\n self.postMessage({ id, response: result });\n }\n}\n\nconst workerThreadController = new WorkerThreadController();\n"})}),"\n",(0,a.jsx)(n.p,{children:"Thus, a simple and useful Promise-based Worker has been established."}),"\n",(0,a.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(n.p,{children:"In summary, this article provided a brief overview of Web Workers, including their capabilities and limitations, to give readers a comprehensive understanding of their use cases. It proposed a solution for encapsulating the native Worker API to enable Promise-based invocation. Finally, it recommended a feature-rich mature solution currently used within the team, with the hope of assisting frontend developers interested in working on Worker enhancements in the near future."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>r});var a=t(959);const s={},o=a.createContext(s);function r(e){const n=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/11f28d89.445484c7.js b/assets/js/11f28d89.445484c7.js
new file mode 100644
index 0000000000..47a9f4cf6a
--- /dev/null
+++ b/assets/js/11f28d89.445484c7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[7228],{5922:(e,o,n)=>{n.r(o),n.d(o,{assets:()=>r,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>s,toc:()=>c});var t=n(1527),a=n(7214);const l={slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},i=void 0,s={permalink:"/illa-website/blog/internal-tool",source:"@site/blog/internal-tool/internal-tool.md",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.4,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},nextItem:{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",permalink:"/illa-website/blog/launch-flow"},relatedPosts:[{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"What ILLA Cloud Can Do",id:"what-illa-cloud-can-do",level:2},{value:"User Experience",id:"user-experience",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const o={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.p,{children:"Open-source tools are common, but it's rare to see one with 10,000 stars. I'm sharing a product that has seen a crazy growth of 10,000 stars overseas. There are many low-code tools, but few are truly useful. This tool is primarily used by developers in North America, and their Discord community is very active."}),"\n",(0,t.jsx)(o.p,{children:"The community indeed has some good reviews."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/good.png",alt:"good"})}),"\n",(0,t.jsx)(o.h2,{id:"what-illa-cloud-can-do",children:"What ILLA Cloud Can Do"}),"\n",(0,t.jsxs)(o.p,{children:["Github: ",(0,t.jsx)(o.a,{href:"https://illacloud.com/illacloud/illa-builder",children:"https://illacloud.com/illacloud/illa-builder"})]}),"\n",(0,t.jsxs)(o.p,{children:["Official Website: ",(0,t.jsx)(o.a,{href:"https://illa.cloud",children:"https://illa.cloud"})]}),"\n",(0,t.jsx)(o.p,{children:"The main users of ILLA Cloud are backend engineers, which might be different from what most people think. A large number of backend engineers have used ILLA Cloud to build numerous data panels and management backends. After all, web development has always been a headache for backend engineers. The tools built with ILLA Cloud are indeed quite aesthetically pleasing and fast."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/dashboard.png",alt:"dashboard"})}),"\n",(0,t.jsx)(o.p,{children:"ILLA also supports collaboration, allowing multiple people to edit a project together. Backend engineers no longer need to worry about building various internal backends. We all know the pain and tears of relying on front-end engineers."}),"\n",(0,t.jsx)(o.p,{children:"The official website also has some solutions, which currently seem to focus mainly on management backends, data panels, etc."}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"AI text-to-image panel"}),"\n",(0,t.jsx)(o.li,{children:"AI voice processing panel"}),"\n",(0,t.jsx)(o.li,{children:"Data analysis panel"}),"\n",(0,t.jsx)(o.li,{children:"Content management CMS"}),"\n",(0,t.jsx)(o.li,{children:"Custom CRM"}),"\n",(0,t.jsx)(o.li,{children:"Management backend"}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/solution.png",alt:"solution"})}),"\n",(0,t.jsx)(o.p,{children:"They also support building workflows, and it seems they have done a lot of work in the low-code field, looking like a well-rounded product. It basically meets various common cases."}),"\n",(0,t.jsx)(o.p,{children:"For instance:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"Sending a message to Slack when a new user registers"}),"\n",(0,t.jsx)(o.li,{children:"Daily reporting of the number of stars on GitHub"}),"\n",(0,t.jsx)(o.li,{children:"Daily booking of meeting rooms"}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:"Engineers use ILLA Flow to automatically execute many tasks, such as:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"Reading business data from a database daily and sending it to Slack"}),"\n",(0,t.jsx)(o.li,{children:"Building CI/CD reporting systems"}),"\n",(0,t.jsx)(o.li,{children:"Sending emails when certain warnings occur"}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/flow.jpeg",alt:"flow"})}),"\n",(0,t.jsx)(o.h2,{id:"user-experience",children:"User Experience"}),"\n",(0,t.jsx)(o.p,{children:"I briefly experienced it, and they have really put a lot of effort into the editor's smoothness and overall experience. The overall editing experience is quite good. It includes smooth drag-and-drop capabilities and also supports collaboration."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/team.gif",alt:"collabration"})}),"\n",(0,t.jsx)(o.p,{children:"Various database integration capabilities are also supported, allowing quick data reading and writing from various data sources and databases. For backend engineers, integrating various services is indeed a nightmare. In this case, ILLA has already done the work. They also support integration with Huggingface, which seems like an official collaboration. It allows for quick use of the model capabilities on Huggingface, which is indeed interesting. You can quickly create some AI-driven tools."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/resource.png",alt:"resource"})}),"\n",(0,t.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(o.p,{children:'There are many low-code tools, but few can be practically used and implemented. ILLA seems to have been maintained for two years now, and their company is currently fully committed to this one thing. Unlike some low-code tools produced for certain purposes, they are directly addressing the needs of developers. Everyone can try it out!"'})]})}function u(e={}){const{wrapper:o}={...(0,a.a)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,o,n)=>{n.d(o,{Z:()=>s,a:()=>i});var t=n(959);const a={},l=t.createContext(a);function i(e){const o=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function s(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(l.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/11f28d89.a9ec474b.js b/assets/js/11f28d89.a9ec474b.js
deleted file mode 100644
index b86ee4dde4..0000000000
--- a/assets/js/11f28d89.a9ec474b.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[7228],{5922:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=t(1527),a=t(7214);const i={slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},l=void 0,s={permalink:"/illa-website/blog/internal-tool",source:"@site/blog/internal-tool/internal-tool.md",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.4,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},nextItem:{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",permalink:"/illa-website/blog/launch-flow"},relatedPosts:[{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"What ILLA Cloud Can Do",id:"what-illa-cloud-can-do",level:2},{value:"User Experience",id:"user-experience",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const o={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"Open-source tools are common, but it's rare to see one with 10,000 stars. I'm sharing a product that has seen a crazy growth of 10,000 stars overseas. There are many low-code tools, but few are truly useful. This tool is primarily used by developers in North America, and their Discord community is very active."}),"\n",(0,n.jsx)(o.p,{children:"The community indeed has some good reviews."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/good.png",alt:"good"})}),"\n",(0,n.jsx)(o.h2,{id:"what-illa-cloud-can-do",children:"What ILLA Cloud Can Do"}),"\n",(0,n.jsxs)(o.p,{children:["Github: ",(0,n.jsx)(o.a,{href:"https://illacloud.com/illacloud/illa-builder",children:"https://illacloud.com/illacloud/illa-builder"})]}),"\n",(0,n.jsxs)(o.p,{children:["Official Website: ",(0,n.jsx)(o.a,{href:"https://illa.cloud",children:"https://illa.cloud"})]}),"\n",(0,n.jsx)(o.p,{children:"The main users of ILLA Cloud are backend engineers, which might be different from what most people think. A large number of backend engineers have used ILLA Cloud to build numerous data panels and management backends. After all, web development has always been a headache for backend engineers. The tools built with ILLA Cloud are indeed quite aesthetically pleasing and fast."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/dashboard.png",alt:"dashboard"})}),"\n",(0,n.jsx)(o.p,{children:"ILLA also supports collaboration, allowing multiple people to edit a project together. Backend engineers no longer need to worry about building various internal backends. We all know the pain and tears of relying on front-end engineers."}),"\n",(0,n.jsx)(o.p,{children:"The official website also has some solutions, which currently seem to focus mainly on management backends, data panels, etc."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"AI text-to-image panel"}),"\n",(0,n.jsx)(o.li,{children:"AI voice processing panel"}),"\n",(0,n.jsx)(o.li,{children:"Data analysis panel"}),"\n",(0,n.jsx)(o.li,{children:"Content management CMS"}),"\n",(0,n.jsx)(o.li,{children:"Custom CRM"}),"\n",(0,n.jsx)(o.li,{children:"Management backend"}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/solution.png",alt:"solution"})}),"\n",(0,n.jsx)(o.p,{children:"They also support building workflows, and it seems they have done a lot of work in the low-code field, looking like a well-rounded product. It basically meets various common cases."}),"\n",(0,n.jsx)(o.p,{children:"For instance:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Sending a message to Slack when a new user registers"}),"\n",(0,n.jsx)(o.li,{children:"Daily reporting of the number of stars on GitHub"}),"\n",(0,n.jsx)(o.li,{children:"Daily booking of meeting rooms"}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"Engineers use ILLA Flow to automatically execute many tasks, such as:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Reading business data from a database daily and sending it to Slack"}),"\n",(0,n.jsx)(o.li,{children:"Building CI/CD reporting systems"}),"\n",(0,n.jsx)(o.li,{children:"Sending emails when certain warnings occur"}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/flow.jpeg",alt:"flow"})}),"\n",(0,n.jsx)(o.h2,{id:"user-experience",children:"User Experience"}),"\n",(0,n.jsx)(o.p,{children:"I briefly experienced it, and they have really put a lot of effort into the editor's smoothness and overall experience. The overall editing experience is quite good. It includes smooth drag-and-drop capabilities and also supports collaboration."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/team.gif",alt:"collabration"})}),"\n",(0,n.jsx)(o.p,{children:"Various database integration capabilities are also supported, allowing quick data reading and writing from various data sources and databases. For backend engineers, integrating various services is indeed a nightmare. In this case, ILLA has already done the work. They also support integration with Huggingface, which seems like an official collaboration. It allows for quick use of the model capabilities on Huggingface, which is indeed interesting. You can quickly create some AI-driven tools."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/resource.png",alt:"resource"})}),"\n",(0,n.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(o.p,{children:'There are many low-code tools, but few can be practically used and implemented. ILLA seems to have been maintained for two years now, and their company is currently fully committed to this one thing. Unlike some low-code tools produced for certain purposes, they are directly addressing the needs of developers. Everyone can try it out!"'})]})}function u(e={}){const{wrapper:o}={...(0,a.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>s,a:()=>l});var n=t(959);const a={},i=n.createContext(a);function l(e){const o=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function s(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1842627e.24b51805.js b/assets/js/1842627e.24b51805.js
new file mode 100644
index 0000000000..ccc2b35e5e
--- /dev/null
+++ b/assets/js/1842627e.24b51805.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5037],{2640:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(1527),o=i(7214);const s={title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},a=void 0,r={permalink:"/illa-website/blog/mui-2024",source:"@site/blog/mui-2024/mui.md",title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"UI Library",permalink:"/illa-website/blog/tags/ui-library"},{label:"Shadcn UI",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"React",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.255,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",permalink:"/illa-website/blog/lowcode-vs-traditional"},nextItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},relatedPosts:[{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of MUI",id:"features-of-mui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains highly prosperous. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,t.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,t.jsx)(n.p,{children:"In general, every company building web applications tends to select a component library. These libraries address a significant amount of repetitive work, offering readily usable components such as Select, Input, CheckBox, and more. These components, customizable through styles or pre-existing attractive styles, enable the rapid creation of beautiful websites without the need to build extensive foundational features from scratch."}),"\n",(0,t.jsx)(n.p,{children:"To summarize, component libraries are typically used in two scenarios:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"External tools: Directly targeted at company users, usually adhering to the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,t.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, focusing on aesthetic design while prioritizing rapid functionality implementation."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Next, we will analyze two component libraries based on the following points:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Design"}),"\n",(0,t.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,t.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,t.jsx)(n.h2,{id:"features-of-mui",children:"Features of MUI"}),"\n",(0,t.jsx)(n.p,{children:"Some detailed data about MUI:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\u2b50 Github Stars: 90k"}),"\n",(0,t.jsx)(n.li,{children:"\u23ec NPM Downloads: 3,263,852 downloads per week"}),"\n",(0,t.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Nov 6, 2014"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI, as a longstanding project maintained since 2014, boasts almost a decade of stability. Its high star count and weekly download numbers ensure that the community remains consistently active."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/mui.png",alt:"mui"})}),"\n",(0,t.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,t.jsx)(n.p,{children:"In terms of design, MUI strictly adheres to Google's renowned Material Design. MUI's customization capabilities are extensive, catering to a wide range of internal and external scenarios. Many well-known open-source projects use MUI for front-end development. For most functionalities, MUI provides comprehensive support."}),"\n",(0,t.jsx)(n.p,{children:"In addition to common features like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Colors"}),"\n",(0,t.jsx)(n.li,{children:"Border radii"}),"\n",(0,t.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI supports complete configurations of fonts, font sizes, colors, and margins, making it a powerful tool as a project with ten years of development."}),"\n",(0,t.jsx)(n.p,{children:"Regarding CSS support, MUI has its custom system, utilizing emotionjs for style adjustments in the overall layout. This may come with a learning curve and may not be as developer-friendly for direct development, requiring documentation consultation for certain style modifications."}),"\n",(0,t.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,t.jsx)(n.p,{children:"MUI's component types are highly complex, divided into several dimensions:"}),"\n",(0,t.jsx)(n.p,{children:"These include:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"MUI Core: Basic functional components of MUI, including a multitude of foundational components and a style system."}),"\n",(0,t.jsx)(n.li,{children:"MUI X: High-performance and complex components of MUI, including high-performance tables, charts, etc."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If you are developing a highly complex system, you can use MUI's full suite solution. However, MUI X is a paid component library, and a subscription fee may be required."}),"\n",(0,t.jsx)(n.p,{children:"MUI is a heavyweight repository with extensive code and a long maintenance history. Its high customizability makes it suitable for large projects. In the MUI repository, you can find a wealth of features."}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,t.jsx)(n.p,{children:"If you want to develop large projects, have high customization requirements, and wish to use high-performance data components and chart components, especially in scenarios with high business complexity and are willing to subscribe to MUI X, it is recommended to use MUI for development. Its flexible configuration and plethora of components can fully meet your requirements."}),"\n",(0,t.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,t.jsx)(n.p,{children:"If you need a lightweight framework and prefer to use a CSS-only solution for layout adjustments, it is not recommended here. MUI has a comprehensive proprietary design system, comes with a certain learning curve, and Material Design's aesthetics may not suit everyone. In such cases, exploring other open-source repositories might be more suitable."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1842627e.2ee46a23.js b/assets/js/1842627e.2ee46a23.js
deleted file mode 100644
index 4941f81c95..0000000000
--- a/assets/js/1842627e.2ee46a23.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5037],{2640:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(1527),o=i(7214);const s={title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},a=void 0,r={permalink:"/illa-website/blog/mui-2024",source:"@site/blog/mui-2024/mui.md",title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"UI Library",permalink:"/illa-website/blog/tags/ui-library"},{label:"Shadcn UI",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"React",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.255,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",permalink:"/illa-website/blog/lowcode-vs-traditional"},nextItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},relatedPosts:[{title:"Shadcn vs MUI: A Comparative Analysis of Strengths and Weaknesses",description:"2024 has arrived, and the ecosystem of React component libraries remains thriving.",permalink:"/illa-website/blog/shadcn-vs-mui",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.12,date:"2024-01-03T10:00:00.000Z"},{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of MUI",id:"features-of-mui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains highly prosperous. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,t.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,t.jsx)(n.p,{children:"In general, every company building web applications tends to select a component library. These libraries address a significant amount of repetitive work, offering readily usable components such as Select, Input, CheckBox, and more. These components, customizable through styles or pre-existing attractive styles, enable the rapid creation of beautiful websites without the need to build extensive foundational features from scratch."}),"\n",(0,t.jsx)(n.p,{children:"To summarize, component libraries are typically used in two scenarios:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"External tools: Directly targeted at company users, usually adhering to the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,t.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, focusing on aesthetic design while prioritizing rapid functionality implementation."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Next, we will analyze two component libraries based on the following points:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Design"}),"\n",(0,t.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,t.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,t.jsx)(n.h2,{id:"features-of-mui",children:"Features of MUI"}),"\n",(0,t.jsx)(n.p,{children:"Some detailed data about MUI:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\u2b50 Github Stars: 90k"}),"\n",(0,t.jsx)(n.li,{children:"\u23ec NPM Downloads: 3,263,852 downloads per week"}),"\n",(0,t.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Nov 6, 2014"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI, as a longstanding project maintained since 2014, boasts almost a decade of stability. Its high star count and weekly download numbers ensure that the community remains consistently active."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/mui.png",alt:"mui"})}),"\n",(0,t.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,t.jsx)(n.p,{children:"In terms of design, MUI strictly adheres to Google's renowned Material Design. MUI's customization capabilities are extensive, catering to a wide range of internal and external scenarios. Many well-known open-source projects use MUI for front-end development. For most functionalities, MUI provides comprehensive support."}),"\n",(0,t.jsx)(n.p,{children:"In addition to common features like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Colors"}),"\n",(0,t.jsx)(n.li,{children:"Border radii"}),"\n",(0,t.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI supports complete configurations of fonts, font sizes, colors, and margins, making it a powerful tool as a project with ten years of development."}),"\n",(0,t.jsx)(n.p,{children:"Regarding CSS support, MUI has its custom system, utilizing emotionjs for style adjustments in the overall layout. This may come with a learning curve and may not be as developer-friendly for direct development, requiring documentation consultation for certain style modifications."}),"\n",(0,t.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,t.jsx)(n.p,{children:"MUI's component types are highly complex, divided into several dimensions:"}),"\n",(0,t.jsx)(n.p,{children:"These include:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"MUI Core: Basic functional components of MUI, including a multitude of foundational components and a style system."}),"\n",(0,t.jsx)(n.li,{children:"MUI X: High-performance and complex components of MUI, including high-performance tables, charts, etc."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If you are developing a highly complex system, you can use MUI's full suite solution. However, MUI X is a paid component library, and a subscription fee may be required."}),"\n",(0,t.jsx)(n.p,{children:"MUI is a heavyweight repository with extensive code and a long maintenance history. Its high customizability makes it suitable for large projects. In the MUI repository, you can find a wealth of features."}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,t.jsx)(n.p,{children:"If you want to develop large projects, have high customization requirements, and wish to use high-performance data components and chart components, especially in scenarios with high business complexity and are willing to subscribe to MUI X, it is recommended to use MUI for development. Its flexible configuration and plethora of components can fully meet your requirements."}),"\n",(0,t.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,t.jsx)(n.p,{children:"If you need a lightweight framework and prefer to use a CSS-only solution for layout adjustments, it is not recommended here. MUI has a comprehensive proprietary design system, comes with a certain learning curve, and Material Design's aesthetics may not suit everyone. In such cases, exploring other open-source repositories might be more suitable."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1b46aaf4.cfe181ea.js b/assets/js/1b46aaf4.cfe181ea.js
new file mode 100644
index 0000000000..8bd6cc6b9c
--- /dev/null
+++ b/assets/js/1b46aaf4.cfe181ea.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[7663],{7856:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(1527),o=i(7214);const s={slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},a=void 0,r={permalink:"/illa-website/blog/it-support",source:"@site/blog/it-support/it-support.md",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",date:"2024-01-23T20:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:8.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},unlisted:!1,prevItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},nextItem:{title:"The Best Tools for Citizen Developers in 2024",permalink:"/illa-website/blog/best-citizen-developer-tool"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"}]},l={authorsImageUrls:[void 0]},c=[{value:"Job Content of IT Support",id:"job-content-of-it-support",level:2},{value:"Recommended Tools",id:"recommended-tools",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Linear",id:"linear",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Gitlab",id:"gitlab",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Notion",id:"notion",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"IT Support is divided into Technical Support and Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support requires technicians with a broad knowledge structure. Companies of a certain size all have an IT department, commonly referred to as network management, but not all companies have Program Support."}),"\n",(0,t.jsx)(n.h2,{id:"job-content-of-it-support",children:"Job Content of IT Support"}),"\n",(0,t.jsx)(n.p,{children:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database, machinery hardware equipment, etc. If the company needs any special software or to update a new system, it is usually done by forming a team with programmers from a technology company and the company's own Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support is more like a consultant, guiding the more macroscopic direction, so they generally know a lot."}),"\n",(0,t.jsx)(n.p,{children:"Program Support specializes more in coding."}),"\n",(0,t.jsx)(n.h2,{id:"recommended-tools",children:"Recommended Tools"}),"\n",(0,t.jsx)(n.p,{children:"In the course of IT Support work, we definitely need many tools to help us better complete our tasks, as every IT has many common needs. For example:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Handling work orders"}),"\n",(0,t.jsx)(n.li,{children:"Project management"}),"\n",(0,t.jsx)(n.li,{children:"Code management"}),"\n",(0,t.jsx)(n.li,{children:"Document management"}),"\n",(0,t.jsx)(n.li,{children:"Notifications"}),"\n",(0,t.jsx)(n.li,{children:"Meetings"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Here are some recommended tools to help everyone better complete their work."}),"\n",(0,t.jsx)(n.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,t.jsx)(n.p,{children:"If you're considering building a business-logic oriented tool and only require a beautiful UI without pursuing complex animations and flashy pages, ILLA Cloud is recommended for development and construction."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n",(0,t.jsx)(n.li,{children:"CRM"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/best-citizen-developer-tool/illa.png",alt:"illa"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud lets you quickly build tools through drag-and-drop without needing to write code, boosting your work efficiency by 10 times. It also natively supports team collaboration, allowing you and your colleagues to edit and build together."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also features connector capabilities, enabling quick connections to other SaaS tools you use. It supports scheduled tasks, Webhooks, parameter passing, and more."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also includes an AI Agent feature, helping you quickly build AI-driven tools, such as text analysis, voice analysis, image analysis, and more."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/agent.png",alt:"agent"})}),"\n",(0,t.jsx)(n.h2,{id:"linear",children:"Linear"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/linear.png",alt:"linear"})}),"\n",(0,t.jsx)(n.p,{children:"Linear is a project management tool that helps streamline software projects, sprints, tasks, and bug tracking. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Project Management"}),": Linear's focus on streamlining software projects suggests a user-friendly interface that simplifies complex project management tasks, making it easier for teams to follow through on project goals and deadlines."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Efficient Sprint and Task Management"}),": With features tailored for managing sprints and tasks, Linear likely offers effective tools for Agile methodologies, facilitating better planning, tracking, and execution of software development cycles."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Effective Bug Tracking"}),": The emphasis on bug tracking indicates that Linear provides robust tools for identifying, documenting, and resolving software bugs, which is crucial for maintaining software quality and reliability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Speed and Simplicity"}),": Being described as simple and fast, Linear might offer quick setup and ease of use, which can be particularly beneficial for teams looking to implement a tool without a steep learning curve."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Suitability for High-Performance Teams"}),": Built for high-performance teams, Linear is likely optimized for efficiency and scalability, supporting teams in managing complex projects without performance degradation."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential Over-Simplification"}),": While simplicity is an advantage, it might also mean that Linear lacks certain advanced features required by very large or complex projects, possibly limiting its utility for some specialized applications."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Focus on Software Projects"}),": Linear\u2019s specific focus on software projects suggests it may not be as well-suited for other types of project management, limiting its versatility for non-software teams."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve for New Users"}),": Despite its simplicity, new users, especially those not familiar with Agile methodologies, might still face a learning curve in understanding how to best utilize the tool for their specific needs."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Customization"}),": Fast and simple tools sometimes offer limited customization options, which might not meet the needs of teams that require highly tailored project management solutions."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Dependence on Team Discipline"}),": The effectiveness of any project management tool, including Linear, often depends on the team's discipline in using it consistently and correctly, which can be a challenge in some organizational cultures."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"gitlab",children:"Gitlab"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/gitlab.png",alt:"gitlab"})}),"\n",(0,t.jsx)(n.p,{children:"GitLab is a complete DevOps platform, delivered as a single application. It enables Concurrent DevOps to make the software lifecycle 200% faster, radically improving the speed of business."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integrated DevOps Workflow"}),": As a single application offering a complete DevOps solution, GitLab provides an integrated environment for all stages of software development, from planning to monitoring, which can greatly simplify the workflow."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Increased Efficiency"}),": GitLab's emphasis on Concurrent DevOps suggests it supports simultaneous actions in the development cycle, which can lead to a 200% faster software lifecycle, thereby accelerating the pace of business."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"All-in-One Platform"}),": The platform's all-in-one nature means that teams can avoid the hassle of integrating multiple separate tools, which can reduce complexity and potential compatibility issues."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Collaboration"}),": GitLab likely facilitates better collaboration among team members by providing a unified platform for code repository, issue tracking, CI/CD, and more, which can enhance teamwork and productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Visibility and Transparency"}),": Having all aspects of the DevOps cycle in one place can provide better visibility and transparency across the development process, enabling more informed decision-making."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve"}),": The comprehensive nature of GitLab may present a steep learning curve, especially for teams not accustomed to such an all-encompassing platform or those transitioning from simpler tools."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Resource Intensiveness"}),": Given its wide range of functionalities, GitLab could be resource-intensive, requiring significant server resources, which might be a challenge for smaller organizations or teams with limited IT infrastructure."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Overwhelming for Small Projects"}),": For smaller projects or teams, the extensive features of GitLab might be more than what is necessary, potentially leading to underutilization of the platform."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential for Vendor Lock-in"}),": Relying on a single platform for all DevOps needs may lead to vendor lock-in, where teams become dependent on GitLab and might face challenges if they decide to switch to another tool in the future."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Considerations"}),": While GitLab offers a variety of plans, including a free tier, the more advanced features, essential for larger teams and complex projects, are often part of their paid plans, which could be a significant expense for some organizations."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"notion",children:"Notion"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/notion.png",alt:"notion"})}),"\n",(0,t.jsx)(n.p,{children:"Notion is an all-in-one workspace for your notes, tasks, wikis, and databases. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Versatility"}),": As an all-in-one workspace, Notion offers a versatile platform where you can manage a variety of content types like notes, tasks, wikis, and databases. This versatility can streamline different aspects of work within a single application."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Ease of Use"}),": Described as simple and fast, Notion likely has a user-friendly interface, allowing for quick adoption and ease of use. This can reduce the learning curve and increase productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Customizability"}),": Notion's platform generally allows for a high degree of customization, enabling users to tailor it to their specific workflow needs, whether for individual use or team collaboration."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Collaboration Features"}),": Being built for high-performance teams, Notion is expected to have robust collaboration features, facilitating effective teamwork, information sharing, and project management."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integration Capabilities"}),": Notion often integrates well with other tools, which is beneficial for teams that use a variety of applications and services for their work."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potentially Overwhelming for New Users"}),": The vast array of features and customization options in Notion can be overwhelming for new users, particularly those who are looking for a more straightforward, plug-and-play type solution."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Offline Capabilities"}),": Notion's functionality can be limited when offline, which could be a drawback for users who need to access their workspace in areas with poor or no internet connectivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Performance Issues with Large Databases"}),": As databases grow in size, some users have reported performance issues with Notion, such as slower loading times and lag, which can hinder efficiency."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Export Options"}),": While Notion is great for accumulating and organizing information, exporting this data out of Notion can sometimes be a challenge, potentially causing issues with data portability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Factor for Premium Features"}),": While Notion offers a free tier, more advanced features and larger usage limits are gated behind their paid plans, which could be a consideration for budget-conscious individuals or small teams."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/connector.png",alt:"connector"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow is a low-code workflow tool that helps you automate your business processes. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,t.jsx)(n.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,t.jsx)(n.li,{children:"Book a meeting room every day"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,t.jsx)(n.li,{children:"Build a CI/CD report system"}),"\n",(0,t.jsx)(n.li,{children:"Send email when some warning occurs"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"For IT Support, simple and easy-to-use tools are key to enhancing work efficiency. Choosing the right tools for your needs is crucial. Hopefully, everyone can find useful tools and become an outstanding IT Support."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/35e17217.5590b810.js b/assets/js/35e17217.5590b810.js
new file mode 100644
index 0000000000..d0ab07d8da
--- /dev/null
+++ b/assets/js/35e17217.5590b810.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5290],{7680:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>n,default:()=>u,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var s=t(1527),o=t(7214);const i={title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},n=void 0,r={permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",source:"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md",title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",date:"2024-01-09T10:00:00.000Z",formattedDate:"January 9, 2024",tags:[{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:5.385,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},unlisted:!1,prevItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},nextItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},relatedPosts:[{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},d=[{value:"Database GUIs and why they are important",id:"database-guis-and-why-they-are-important",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:3},{value:"DBeaver",id:"dbeaver",level:3},{value:"Retool",id:"retool",level:3},{value:"Tooljet",id:"tooljet",level:3},{value:"DbVisualizer",id:"dbvisualizer",level:3},{value:"Appsmith",id:"appsmith",level:3},{value:"Dronahq",id:"dronahq",level:3},{value:"Find the one that best suits you",id:"find-the-one-that-best-suits-you",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.p,{children:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available, each with different features and capabilities. In this blog post, we'll look at seven of the best database GUIs to help you choose the right one."}),"\n",(0,s.jsx)(a.h2,{id:"database-guis-and-why-they-are-important",children:"Database GUIs and why they are important"}),"\n",(0,s.jsx)(a.p,{children:"Database GUIs are essential tools for database developers, database administrators, and database management systems users. Database management tools enable database developers to edit and manage MySQL and PostgreSQL databases and browse the database schema on Windows, Linux, and macOS operating systems."}),"\n",(0,s.jsx)(a.p,{children:"Popular databases such as Microsoft SQL Server, Oracle MySQL Database, and Oracle MySQL server also benefit from this technology through comprehensive cross-platform GUI database management tools. GUI database management tools allow users to construct complex query builders for their databases with just a mouse click instead of manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Web-based GUIs are becoming increasingly popular as they allow those with access to a web browser to easily manage their databases from any system, including Windows, Linux, and Mac. Using a database GUI is a much quicker way of managing your databases. It is also far more comprehensive when compared to entering SQL statements by hand. Allowing developers easy access to any database system's functionality makes database management significantly more accessible."}),"\n",(0,s.jsx)(a.h3,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/illa.png",alt:"illa"})}),"\n",(0,s.jsx)(a.p,{children:"ILLA is a top-notch low-code solution that allows developers to create a feature-rich internal tool within no time. Moreover, developers using the ILLA cloud will have to spend less effort and time on web designs and other integrations."}),"\n",(0,s.jsx)(a.p,{children:"The creators of ILLA have developed numerous inserts for the tool. So, the tool can quickly meet the requirements and needs of developers in any scenario. Moreover, developers can use drag and drag-and-drop builder of ILLA to improve their productivity in the best possible way. You can also connect this tool to any data source through APIs."}),"\n",(0,s.jsx)(a.p,{children:"ILLA Cloud is also one of the most popular Graphical User Interfaces (GUI) for managing SQL databases. It offers a user-friendly and intuitive interface, allowing developers to quickly change their database without manually entering complex SQL statements. ILLA Cloud also provides comprehensive cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With ILLA Cloud, users can quickly construct complex query builders with a mouse click. In addition to its great features, ILLA Cloud offers enterprise level security protocols protecting the user's data. Furthermore, users can easily extend their database by creating custom web services with ILLA's REST API platform. ILLA Cloud is the perfect choice for those looking for an easy way to manage their databases."}),"\n",(0,s.jsx)(a.h3,{id:"dbeaver",children:"DBeaver"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbeaver.avif",alt:"dbeaver"})}),"\n",(0,s.jsx)(a.p,{children:"DBeaver is an excellent choice for SQL Database GUI, particularly for those looking to avoid subscription-based models. It is a free and open-source database management tool that provides cross-platform support, allowing users to access their databases from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With DBeaver, users can quickly create complex queries and edit the database schema with a mouse click. It also features an extensive set of tools that make it easy to manage large SQL databases. These tools include an ER Diagram generator, data export/import features, and a powerful query builder that helps users construct complex queries."}),"\n",(0,s.jsx)(a.h3,{id:"retool",children:"Retool"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/retool.avif",alt:"retool"})}),"\n",(0,s.jsx)(a.p,{children:"Retool is an intuitive Graphical User Interface (GUI) for managing SQL databases that offers a wide range of features and benefits. It provides an clean interface with drag-and-drop features to construct complex queries without needing to manually enter SQL statements. Retool makes it easier for developers to interact with their databases, enabling them to make changes quickly and efficiently."}),"\n",(0,s.jsx)(a.p,{children:"Furthermore, Retool's advanced security protocols help protect users' data from unauthorized access. It also offers cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"tooljet",children:"Tooljet"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/tooljet.avif",alt:"tooljet"})}),"\n",(0,s.jsx)(a.p,{children:"Tooljet is an advanced Graphical User Interface (GUI) for managing SQL databases that offer users a comprehensive suite of features and tools to manage their databases efficiently. It has an intuitive drag-and-drop interface, allowing developers to quickly change their database without manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Tooljet also provides powerful query builders that enable users to construct complex queries in a few clicks and built-in reporting capabilities for generating reports quickly and easily. Furthermore, users can take advantage of the extensive cross-platform support provided by Tooljet and access their database from any system."}),"\n",(0,s.jsx)(a.h3,{id:"dbvisualizer",children:"DbVisualizer"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbvisualizer.avif",alt:"DbVisualizer"})}),"\n",(0,s.jsx)(a.p,{children:"DbVisualizer is a powerful and comprehensive GUI tool for managing SQL databases. It offers users an easy-to-use drag-and-drop interface for making changes to their database and robust query builders for constructing complex queries without manually entering SQL statements. DbVisualizer provides extensive cross-platform support, allowing users to access their database from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"It also features advanced security protocols to help protect users' data from unauthorized access. Overall, DbVisualizer is an excellent choice."}),"\n",(0,s.jsx)(a.h3,{id:"appsmith",children:"Appsmith"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/appsmith.avif",alt:"appsmith"})}),"\n",(0,s.jsx)(a.p,{children:"Appsmith is an incredibly powerful graphical user interface (GUI) that makes it easy to manage large SQL databases. It features a comprehensive set of tools that make managing such databases simpler and more intuitive than ever. The drag-and-drop interface allows developers to quickly construct complex queries without manually entering long strings of SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Appsmith also offers numerous advanced security protocols, such as user authentication and secure connection encryption. Moreover, Appsmith's cross-platform support enables users to access their data from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"dronahq",children:"Dronahq"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dronahq.avif",alt:"dronahq"})}),"\n",(0,s.jsx)(a.p,{children:"Dronahq is a powerful and feature-rich graphical user interface (GUI) for managing SQL databases. It offers users an intuitive drag-and-drop interface that makes creating complex queries simple without manually entering SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Dronahq provides extensive cross-platform support, enabling users to access their database from any system, including Windows, Linux, and Mac. It also features advanced security protocols such as role-based authentication and secure connection encryption. Furthermore, Dronahq has a powerful query builder that allows users to quickly create custom reports with the built-in reporting capabilities."}),"\n",(0,s.jsx)(a.h2,{id:"find-the-one-that-best-suits-you",children:"Find the one that best suits you"}),"\n",(0,s.jsx)(a.p,{children:"With the wide range of Graphical User Interfaces (GUIs) available, it is important to try out different options to find the one that best suits you. Each GUI has unique features, so users should take the time to research and weigh the pros and cons."}),"\n",(0,s.jsx)(a.p,{children:"Ultimately, choosing the right GUI is a long-term investment that can significantly improve a person\u2019s computing experience. Why not check out ILLA Cloud today? Its excellent features, user-friendly interface, and optimized performance could be just the right solution you need!"})]})}function u(e={}){const{wrapper:a}={...(0,o.a)(),...e.components};return a?(0,s.jsx)(a,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>r,a:()=>n});var s=t(959);const o={},i=s.createContext(o);function n(e){const a=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function r(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:n(e.components),s.createElement(i.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/35e17217.c26626f9.js b/assets/js/35e17217.c26626f9.js
deleted file mode 100644
index 5995533332..0000000000
--- a/assets/js/35e17217.c26626f9.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5290],{7680:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>d});var s=t(1527),o=t(7214);const i={title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},r=void 0,n={permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",source:"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md",title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",date:"2024-01-09T10:00:00.000Z",formattedDate:"January 9, 2024",tags:[{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:5.385,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},unlisted:!1,prevItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},nextItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},relatedPosts:[{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},d=[{value:"Database GUIs and why they are important",id:"database-guis-and-why-they-are-important",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:3},{value:"DBeaver",id:"dbeaver",level:3},{value:"Retool",id:"retool",level:3},{value:"Tooljet",id:"tooljet",level:3},{value:"DbVisualizer",id:"dbvisualizer",level:3},{value:"Appsmith",id:"appsmith",level:3},{value:"Dronahq",id:"dronahq",level:3},{value:"Find the one that best suits you",id:"find-the-one-that-best-suits-you",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.p,{children:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available, each with different features and capabilities. In this blog post, we'll look at seven of the best database GUIs to help you choose the right one."}),"\n",(0,s.jsx)(a.h2,{id:"database-guis-and-why-they-are-important",children:"Database GUIs and why they are important"}),"\n",(0,s.jsx)(a.p,{children:"Database GUIs are essential tools for database developers, database administrators, and database management systems users. Database management tools enable database developers to edit and manage MySQL and PostgreSQL databases and browse the database schema on Windows, Linux, and macOS operating systems."}),"\n",(0,s.jsx)(a.p,{children:"Popular databases such as Microsoft SQL Server, Oracle MySQL Database, and Oracle MySQL server also benefit from this technology through comprehensive cross-platform GUI database management tools. GUI database management tools allow users to construct complex query builders for their databases with just a mouse click instead of manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Web-based GUIs are becoming increasingly popular as they allow those with access to a web browser to easily manage their databases from any system, including Windows, Linux, and Mac. Using a database GUI is a much quicker way of managing your databases. It is also far more comprehensive when compared to entering SQL statements by hand. Allowing developers easy access to any database system's functionality makes database management significantly more accessible."}),"\n",(0,s.jsx)(a.h3,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/illa.png",alt:"illa"})}),"\n",(0,s.jsx)(a.p,{children:"ILLA is a top-notch low-code solution that allows developers to create a feature-rich internal tool within no time. Moreover, developers using the ILLA cloud will have to spend less effort and time on web designs and other integrations."}),"\n",(0,s.jsx)(a.p,{children:"The creators of ILLA have developed numerous inserts for the tool. So, the tool can quickly meet the requirements and needs of developers in any scenario. Moreover, developers can use drag and drag-and-drop builder of ILLA to improve their productivity in the best possible way. You can also connect this tool to any data source through APIs."}),"\n",(0,s.jsx)(a.p,{children:"ILLA Cloud is also one of the most popular Graphical User Interfaces (GUI) for managing SQL databases. It offers a user-friendly and intuitive interface, allowing developers to quickly change their database without manually entering complex SQL statements. ILLA Cloud also provides comprehensive cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With ILLA Cloud, users can quickly construct complex query builders with a mouse click. In addition to its great features, ILLA Cloud offers enterprise level security protocols protecting the user's data. Furthermore, users can easily extend their database by creating custom web services with ILLA's REST API platform. ILLA Cloud is the perfect choice for those looking for an easy way to manage their databases."}),"\n",(0,s.jsx)(a.h3,{id:"dbeaver",children:"DBeaver"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbeaver.avif",alt:"dbeaver"})}),"\n",(0,s.jsx)(a.p,{children:"DBeaver is an excellent choice for SQL Database GUI, particularly for those looking to avoid subscription-based models. It is a free and open-source database management tool that provides cross-platform support, allowing users to access their databases from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With DBeaver, users can quickly create complex queries and edit the database schema with a mouse click. It also features an extensive set of tools that make it easy to manage large SQL databases. These tools include an ER Diagram generator, data export/import features, and a powerful query builder that helps users construct complex queries."}),"\n",(0,s.jsx)(a.h3,{id:"retool",children:"Retool"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/retool.avif",alt:"retool"})}),"\n",(0,s.jsx)(a.p,{children:"Retool is an intuitive Graphical User Interface (GUI) for managing SQL databases that offers a wide range of features and benefits. It provides an clean interface with drag-and-drop features to construct complex queries without needing to manually enter SQL statements. Retool makes it easier for developers to interact with their databases, enabling them to make changes quickly and efficiently."}),"\n",(0,s.jsx)(a.p,{children:"Furthermore, Retool's advanced security protocols help protect users' data from unauthorized access. It also offers cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"tooljet",children:"Tooljet"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/tooljet.avif",alt:"tooljet"})}),"\n",(0,s.jsx)(a.p,{children:"Tooljet is an advanced Graphical User Interface (GUI) for managing SQL databases that offer users a comprehensive suite of features and tools to manage their databases efficiently. It has an intuitive drag-and-drop interface, allowing developers to quickly change their database without manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Tooljet also provides powerful query builders that enable users to construct complex queries in a few clicks and built-in reporting capabilities for generating reports quickly and easily. Furthermore, users can take advantage of the extensive cross-platform support provided by Tooljet and access their database from any system."}),"\n",(0,s.jsx)(a.h3,{id:"dbvisualizer",children:"DbVisualizer"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbvisualizer.avif",alt:"DbVisualizer"})}),"\n",(0,s.jsx)(a.p,{children:"DbVisualizer is a powerful and comprehensive GUI tool for managing SQL databases. It offers users an easy-to-use drag-and-drop interface for making changes to their database and robust query builders for constructing complex queries without manually entering SQL statements. DbVisualizer provides extensive cross-platform support, allowing users to access their database from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"It also features advanced security protocols to help protect users' data from unauthorized access. Overall, DbVisualizer is an excellent choice."}),"\n",(0,s.jsx)(a.h3,{id:"appsmith",children:"Appsmith"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/appsmith.avif",alt:"appsmith"})}),"\n",(0,s.jsx)(a.p,{children:"Appsmith is an incredibly powerful graphical user interface (GUI) that makes it easy to manage large SQL databases. It features a comprehensive set of tools that make managing such databases simpler and more intuitive than ever. The drag-and-drop interface allows developers to quickly construct complex queries without manually entering long strings of SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Appsmith also offers numerous advanced security protocols, such as user authentication and secure connection encryption. Moreover, Appsmith's cross-platform support enables users to access their data from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"dronahq",children:"Dronahq"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dronahq.avif",alt:"dronahq"})}),"\n",(0,s.jsx)(a.p,{children:"Dronahq is a powerful and feature-rich graphical user interface (GUI) for managing SQL databases. It offers users an intuitive drag-and-drop interface that makes creating complex queries simple without manually entering SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Dronahq provides extensive cross-platform support, enabling users to access their database from any system, including Windows, Linux, and Mac. It also features advanced security protocols such as role-based authentication and secure connection encryption. Furthermore, Dronahq has a powerful query builder that allows users to quickly create custom reports with the built-in reporting capabilities."}),"\n",(0,s.jsx)(a.h2,{id:"find-the-one-that-best-suits-you",children:"Find the one that best suits you"}),"\n",(0,s.jsx)(a.p,{children:"With the wide range of Graphical User Interfaces (GUIs) available, it is important to try out different options to find the one that best suits you. Each GUI has unique features, so users should take the time to research and weigh the pros and cons."}),"\n",(0,s.jsx)(a.p,{children:"Ultimately, choosing the right GUI is a long-term investment that can significantly improve a person\u2019s computing experience. Why not check out ILLA Cloud today? Its excellent features, user-friendly interface, and optimized performance could be just the right solution you need!"})]})}function u(e={}){const{wrapper:a}={...(0,o.a)(),...e.components};return a?(0,s.jsx)(a,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>n,a:()=>r});var s=t(959);const o={},i=s.createContext(o);function r(e){const a=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function n(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3d113612.308b9f75.js b/assets/js/3d113612.308b9f75.js
deleted file mode 100644
index ce50ea0f30..0000000000
--- a/assets/js/3d113612.308b9f75.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[1819],{7102:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>d});var s=t(1527),o=t(7214);const i={title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},r=void 0,n={permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",source:"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md",title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",date:"2024-01-09T10:00:00.000Z",formattedDate:"January 9, 2024",tags:[{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:5.385,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},unlisted:!1,prevItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},nextItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},relatedPosts:[{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},d=[{value:"Database GUIs and why they are important",id:"database-guis-and-why-they-are-important",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:3},{value:"DBeaver",id:"dbeaver",level:3},{value:"Retool",id:"retool",level:3},{value:"Tooljet",id:"tooljet",level:3},{value:"DbVisualizer",id:"dbvisualizer",level:3},{value:"Appsmith",id:"appsmith",level:3},{value:"Dronahq",id:"dronahq",level:3},{value:"Find the one that best suits you",id:"find-the-one-that-best-suits-you",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.p,{children:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available, each with different features and capabilities. In this blog post, we'll look at seven of the best database GUIs to help you choose the right one."}),"\n",(0,s.jsx)(a.h2,{id:"database-guis-and-why-they-are-important",children:"Database GUIs and why they are important"}),"\n",(0,s.jsx)(a.p,{children:"Database GUIs are essential tools for database developers, database administrators, and database management systems users. Database management tools enable database developers to edit and manage MySQL and PostgreSQL databases and browse the database schema on Windows, Linux, and macOS operating systems."}),"\n",(0,s.jsx)(a.p,{children:"Popular databases such as Microsoft SQL Server, Oracle MySQL Database, and Oracle MySQL server also benefit from this technology through comprehensive cross-platform GUI database management tools. GUI database management tools allow users to construct complex query builders for their databases with just a mouse click instead of manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Web-based GUIs are becoming increasingly popular as they allow those with access to a web browser to easily manage their databases from any system, including Windows, Linux, and Mac. Using a database GUI is a much quicker way of managing your databases. It is also far more comprehensive when compared to entering SQL statements by hand. Allowing developers easy access to any database system's functionality makes database management significantly more accessible."}),"\n",(0,s.jsx)(a.h3,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/illa.png",alt:"illa"})}),"\n",(0,s.jsx)(a.p,{children:"ILLA is a top-notch low-code solution that allows developers to create a feature-rich internal tool within no time. Moreover, developers using the ILLA cloud will have to spend less effort and time on web designs and other integrations."}),"\n",(0,s.jsx)(a.p,{children:"The creators of ILLA have developed numerous inserts for the tool. So, the tool can quickly meet the requirements and needs of developers in any scenario. Moreover, developers can use drag and drag-and-drop builder of ILLA to improve their productivity in the best possible way. You can also connect this tool to any data source through APIs."}),"\n",(0,s.jsx)(a.p,{children:"ILLA Cloud is also one of the most popular Graphical User Interfaces (GUI) for managing SQL databases. It offers a user-friendly and intuitive interface, allowing developers to quickly change their database without manually entering complex SQL statements. ILLA Cloud also provides comprehensive cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With ILLA Cloud, users can quickly construct complex query builders with a mouse click. In addition to its great features, ILLA Cloud offers enterprise level security protocols protecting the user's data. Furthermore, users can easily extend their database by creating custom web services with ILLA's REST API platform. ILLA Cloud is the perfect choice for those looking for an easy way to manage their databases."}),"\n",(0,s.jsx)(a.h3,{id:"dbeaver",children:"DBeaver"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbeaver.avif",alt:"dbeaver"})}),"\n",(0,s.jsx)(a.p,{children:"DBeaver is an excellent choice for SQL Database GUI, particularly for those looking to avoid subscription-based models. It is a free and open-source database management tool that provides cross-platform support, allowing users to access their databases from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With DBeaver, users can quickly create complex queries and edit the database schema with a mouse click. It also features an extensive set of tools that make it easy to manage large SQL databases. These tools include an ER Diagram generator, data export/import features, and a powerful query builder that helps users construct complex queries."}),"\n",(0,s.jsx)(a.h3,{id:"retool",children:"Retool"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/retool.avif",alt:"retool"})}),"\n",(0,s.jsx)(a.p,{children:"Retool is an intuitive Graphical User Interface (GUI) for managing SQL databases that offers a wide range of features and benefits. It provides an clean interface with drag-and-drop features to construct complex queries without needing to manually enter SQL statements. Retool makes it easier for developers to interact with their databases, enabling them to make changes quickly and efficiently."}),"\n",(0,s.jsx)(a.p,{children:"Furthermore, Retool's advanced security protocols help protect users' data from unauthorized access. It also offers cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"tooljet",children:"Tooljet"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/tooljet.avif",alt:"tooljet"})}),"\n",(0,s.jsx)(a.p,{children:"Tooljet is an advanced Graphical User Interface (GUI) for managing SQL databases that offer users a comprehensive suite of features and tools to manage their databases efficiently. It has an intuitive drag-and-drop interface, allowing developers to quickly change their database without manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Tooljet also provides powerful query builders that enable users to construct complex queries in a few clicks and built-in reporting capabilities for generating reports quickly and easily. Furthermore, users can take advantage of the extensive cross-platform support provided by Tooljet and access their database from any system."}),"\n",(0,s.jsx)(a.h3,{id:"dbvisualizer",children:"DbVisualizer"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbvisualizer.avif",alt:"DbVisualizer"})}),"\n",(0,s.jsx)(a.p,{children:"DbVisualizer is a powerful and comprehensive GUI tool for managing SQL databases. It offers users an easy-to-use drag-and-drop interface for making changes to their database and robust query builders for constructing complex queries without manually entering SQL statements. DbVisualizer provides extensive cross-platform support, allowing users to access their database from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"It also features advanced security protocols to help protect users' data from unauthorized access. Overall, DbVisualizer is an excellent choice."}),"\n",(0,s.jsx)(a.h3,{id:"appsmith",children:"Appsmith"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/appsmith.avif",alt:"appsmith"})}),"\n",(0,s.jsx)(a.p,{children:"Appsmith is an incredibly powerful graphical user interface (GUI) that makes it easy to manage large SQL databases. It features a comprehensive set of tools that make managing such databases simpler and more intuitive than ever. The drag-and-drop interface allows developers to quickly construct complex queries without manually entering long strings of SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Appsmith also offers numerous advanced security protocols, such as user authentication and secure connection encryption. Moreover, Appsmith's cross-platform support enables users to access their data from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"dronahq",children:"Dronahq"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dronahq.avif",alt:"dronahq"})}),"\n",(0,s.jsx)(a.p,{children:"Dronahq is a powerful and feature-rich graphical user interface (GUI) for managing SQL databases. It offers users an intuitive drag-and-drop interface that makes creating complex queries simple without manually entering SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Dronahq provides extensive cross-platform support, enabling users to access their database from any system, including Windows, Linux, and Mac. It also features advanced security protocols such as role-based authentication and secure connection encryption. Furthermore, Dronahq has a powerful query builder that allows users to quickly create custom reports with the built-in reporting capabilities."}),"\n",(0,s.jsx)(a.h2,{id:"find-the-one-that-best-suits-you",children:"Find the one that best suits you"}),"\n",(0,s.jsx)(a.p,{children:"With the wide range of Graphical User Interfaces (GUIs) available, it is important to try out different options to find the one that best suits you. Each GUI has unique features, so users should take the time to research and weigh the pros and cons."}),"\n",(0,s.jsx)(a.p,{children:"Ultimately, choosing the right GUI is a long-term investment that can significantly improve a person\u2019s computing experience. Why not check out ILLA Cloud today? Its excellent features, user-friendly interface, and optimized performance could be just the right solution you need!"})]})}function u(e={}){const{wrapper:a}={...(0,o.a)(),...e.components};return a?(0,s.jsx)(a,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>n,a:()=>r});var s=t(959);const o={},i=s.createContext(o);function r(e){const a=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function n(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3d113612.91059aaf.js b/assets/js/3d113612.91059aaf.js
new file mode 100644
index 0000000000..0c187ae353
--- /dev/null
+++ b/assets/js/3d113612.91059aaf.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[1819],{7102:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>n,default:()=>u,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var s=t(1527),o=t(7214);const i={title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},n=void 0,r={permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",source:"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md",title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",date:"2024-01-09T10:00:00.000Z",formattedDate:"January 9, 2024",tags:[{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:5.385,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Database GUIs for SQL databases",tags:["database","gui","tools"],slug:"top-7-database-guis-for-sql-databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/cover.png",date:"2024-01-09T10:00"},unlisted:!1,prevItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},nextItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},relatedPosts:[{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},d=[{value:"Database GUIs and why they are important",id:"database-guis-and-why-they-are-important",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:3},{value:"DBeaver",id:"dbeaver",level:3},{value:"Retool",id:"retool",level:3},{value:"Tooljet",id:"tooljet",level:3},{value:"DbVisualizer",id:"dbvisualizer",level:3},{value:"Appsmith",id:"appsmith",level:3},{value:"Dronahq",id:"dronahq",level:3},{value:"Find the one that best suits you",id:"find-the-one-that-best-suits-you",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.p,{children:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available, each with different features and capabilities. In this blog post, we'll look at seven of the best database GUIs to help you choose the right one."}),"\n",(0,s.jsx)(a.h2,{id:"database-guis-and-why-they-are-important",children:"Database GUIs and why they are important"}),"\n",(0,s.jsx)(a.p,{children:"Database GUIs are essential tools for database developers, database administrators, and database management systems users. Database management tools enable database developers to edit and manage MySQL and PostgreSQL databases and browse the database schema on Windows, Linux, and macOS operating systems."}),"\n",(0,s.jsx)(a.p,{children:"Popular databases such as Microsoft SQL Server, Oracle MySQL Database, and Oracle MySQL server also benefit from this technology through comprehensive cross-platform GUI database management tools. GUI database management tools allow users to construct complex query builders for their databases with just a mouse click instead of manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Web-based GUIs are becoming increasingly popular as they allow those with access to a web browser to easily manage their databases from any system, including Windows, Linux, and Mac. Using a database GUI is a much quicker way of managing your databases. It is also far more comprehensive when compared to entering SQL statements by hand. Allowing developers easy access to any database system's functionality makes database management significantly more accessible."}),"\n",(0,s.jsx)(a.h3,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/illa.png",alt:"illa"})}),"\n",(0,s.jsx)(a.p,{children:"ILLA is a top-notch low-code solution that allows developers to create a feature-rich internal tool within no time. Moreover, developers using the ILLA cloud will have to spend less effort and time on web designs and other integrations."}),"\n",(0,s.jsx)(a.p,{children:"The creators of ILLA have developed numerous inserts for the tool. So, the tool can quickly meet the requirements and needs of developers in any scenario. Moreover, developers can use drag and drag-and-drop builder of ILLA to improve their productivity in the best possible way. You can also connect this tool to any data source through APIs."}),"\n",(0,s.jsx)(a.p,{children:"ILLA Cloud is also one of the most popular Graphical User Interfaces (GUI) for managing SQL databases. It offers a user-friendly and intuitive interface, allowing developers to quickly change their database without manually entering complex SQL statements. ILLA Cloud also provides comprehensive cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With ILLA Cloud, users can quickly construct complex query builders with a mouse click. In addition to its great features, ILLA Cloud offers enterprise level security protocols protecting the user's data. Furthermore, users can easily extend their database by creating custom web services with ILLA's REST API platform. ILLA Cloud is the perfect choice for those looking for an easy way to manage their databases."}),"\n",(0,s.jsx)(a.h3,{id:"dbeaver",children:"DBeaver"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbeaver.avif",alt:"dbeaver"})}),"\n",(0,s.jsx)(a.p,{children:"DBeaver is an excellent choice for SQL Database GUI, particularly for those looking to avoid subscription-based models. It is a free and open-source database management tool that provides cross-platform support, allowing users to access their databases from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"With DBeaver, users can quickly create complex queries and edit the database schema with a mouse click. It also features an extensive set of tools that make it easy to manage large SQL databases. These tools include an ER Diagram generator, data export/import features, and a powerful query builder that helps users construct complex queries."}),"\n",(0,s.jsx)(a.h3,{id:"retool",children:"Retool"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/retool.avif",alt:"retool"})}),"\n",(0,s.jsx)(a.p,{children:"Retool is an intuitive Graphical User Interface (GUI) for managing SQL databases that offers a wide range of features and benefits. It provides an clean interface with drag-and-drop features to construct complex queries without needing to manually enter SQL statements. Retool makes it easier for developers to interact with their databases, enabling them to make changes quickly and efficiently."}),"\n",(0,s.jsx)(a.p,{children:"Furthermore, Retool's advanced security protocols help protect users' data from unauthorized access. It also offers cross-platform support, making it accessible from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"tooljet",children:"Tooljet"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/tooljet.avif",alt:"tooljet"})}),"\n",(0,s.jsx)(a.p,{children:"Tooljet is an advanced Graphical User Interface (GUI) for managing SQL databases that offer users a comprehensive suite of features and tools to manage their databases efficiently. It has an intuitive drag-and-drop interface, allowing developers to quickly change their database without manually entering complex SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Tooljet also provides powerful query builders that enable users to construct complex queries in a few clicks and built-in reporting capabilities for generating reports quickly and easily. Furthermore, users can take advantage of the extensive cross-platform support provided by Tooljet and access their database from any system."}),"\n",(0,s.jsx)(a.h3,{id:"dbvisualizer",children:"DbVisualizer"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dbvisualizer.avif",alt:"DbVisualizer"})}),"\n",(0,s.jsx)(a.p,{children:"DbVisualizer is a powerful and comprehensive GUI tool for managing SQL databases. It offers users an easy-to-use drag-and-drop interface for making changes to their database and robust query builders for constructing complex queries without manually entering SQL statements. DbVisualizer provides extensive cross-platform support, allowing users to access their database from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.p,{children:"It also features advanced security protocols to help protect users' data from unauthorized access. Overall, DbVisualizer is an excellent choice."}),"\n",(0,s.jsx)(a.h3,{id:"appsmith",children:"Appsmith"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/appsmith.avif",alt:"appsmith"})}),"\n",(0,s.jsx)(a.p,{children:"Appsmith is an incredibly powerful graphical user interface (GUI) that makes it easy to manage large SQL databases. It features a comprehensive set of tools that make managing such databases simpler and more intuitive than ever. The drag-and-drop interface allows developers to quickly construct complex queries without manually entering long strings of SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Appsmith also offers numerous advanced security protocols, such as user authentication and secure connection encryption. Moreover, Appsmith's cross-platform support enables users to access their data from any system, including Windows, Linux, and Mac."}),"\n",(0,s.jsx)(a.h3,{id:"dronahq",children:"Dronahq"}),"\n",(0,s.jsx)(a.p,{children:(0,s.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/top-7-database-guis-for-sql-databases/dronahq.avif",alt:"dronahq"})}),"\n",(0,s.jsx)(a.p,{children:"Dronahq is a powerful and feature-rich graphical user interface (GUI) for managing SQL databases. It offers users an intuitive drag-and-drop interface that makes creating complex queries simple without manually entering SQL statements."}),"\n",(0,s.jsx)(a.p,{children:"Dronahq provides extensive cross-platform support, enabling users to access their database from any system, including Windows, Linux, and Mac. It also features advanced security protocols such as role-based authentication and secure connection encryption. Furthermore, Dronahq has a powerful query builder that allows users to quickly create custom reports with the built-in reporting capabilities."}),"\n",(0,s.jsx)(a.h2,{id:"find-the-one-that-best-suits-you",children:"Find the one that best suits you"}),"\n",(0,s.jsx)(a.p,{children:"With the wide range of Graphical User Interfaces (GUIs) available, it is important to try out different options to find the one that best suits you. Each GUI has unique features, so users should take the time to research and weigh the pros and cons."}),"\n",(0,s.jsx)(a.p,{children:"Ultimately, choosing the right GUI is a long-term investment that can significantly improve a person\u2019s computing experience. Why not check out ILLA Cloud today? Its excellent features, user-friendly interface, and optimized performance could be just the right solution you need!"})]})}function u(e={}){const{wrapper:a}={...(0,o.a)(),...e.components};return a?(0,s.jsx)(a,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>r,a:()=>n});var s=t(959);const o={},i=s.createContext(o);function n(e){const a=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function r(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:n(e.components),s.createElement(i.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/40c20836.5aab4d0b.js b/assets/js/40c20836.2fab3591.js
similarity index 93%
rename from assets/js/40c20836.5aab4d0b.js
rename to assets/js/40c20836.2fab3591.js
index 3eefdc3ded..eac6946463 100644
--- a/assets/js/40c20836.5aab4d0b.js
+++ b/assets/js/40c20836.2fab3591.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2391],{3490:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>r,contentTitle:()=>a,default:()=>c,frontMatter:()=>n,metadata:()=>l,toc:()=>d});var i=t(1527),s=t(7214);const n={title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},a=void 0,l={permalink:"/illa-website/blog/tooljet-vs-appsmith",source:"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md",title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",date:"2024-01-23T10:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"tooljet",permalink:"/illa-website/blog/tags/tooljet"},{label:"appsmith",permalink:"/illa-website/blog/tags/appsmith"},{label:"retool",permalink:"/illa-website/blog/tags/retool"}],readingTime:7.11,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},unlisted:!1,prevItem:{title:"Appsmith vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/appsmith-vs-retool"},nextItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},relatedPosts:[{title:"Tooljet vs Retool: Which open-source low-code platform is better?",description:"The demand for efficient and easy-to-use internal tools is on the rise, and low-code platforms have emerged as the go-to solution for businesses.",permalink:"/illa-website/blog/tooljet-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.83,date:"2024-01-23T10:00:00.000Z"},{title:"Appsmith vs Retool: Which open-source low-code platform is better?",description:"In the ever-evolving landscape of low-code development platforms, Appsmith and Retool have emerged as strong contenders, each offering unique features and capabilities.",permalink:"/illa-website/blog/appsmith-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.435,date:"2024-01-23T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"ILLA Cloud: The best software development tool",id:"illa-cloud-the-best-software-development-tool",level:2},{value:"Tooljet and Appsmith are two popular software development tools.",id:"tooljet-and-appsmith-are-two-popular-software-development-tools",level:2},{value:"Tooljet - better for those who want more control over their project",id:"tooljet---better-for-those-who-want-more-control-over-their-project",level:2},{value:"Pros of Tooljet:",id:"pros-of-tooljet",level:3},{value:"Cons of Tooljet:",id:"cons-of-tooljet",level:3},{value:"Appsmith - more user-friendly",id:"appsmith---more-user-friendly",level:2},{value:"Pros of Appsmith:",id:"pros-of-appsmith",level:3},{value:"Cons of Appsmith:",id:"cons-of-appsmith",level:3},{value:"ILLA Cloud offers the best of both worlds",id:"illa-cloud-offers-the-best-of-both-worlds",level:2},{value:"Key features of ILLA",id:"key-features-of-illa",level:3},{value:"Upgraded ILLA features",id:"upgraded-illa-features",level:3},{value:"Responsive UI library to meet your needs",id:"responsive-ui-library-to-meet-your-needs",level:3},{value:"Conclusion",id:"conclusion",level:2}];function p(e){const o={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.p,{children:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option. Both are open-source platforms with various features to choose from, but they each have their own strengths and weaknesses. This blog post will compare Tooljet and Appsmith to help you decide which is suitable for your needs."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet is excellent for those who prefer working with visual elements and drag-and-drop tools. Its user interface allows you to quickly create applications by simply dragging and dropping different components into place, making it easy and fast to build applications from the ground up. Additionally, Tooljet has powerful management features that allow you to collaborate with other users in real-time and monitor project progress."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith is an excellent option for developers who want more control over their applications. It offers a wide range of great features, such as API integration, triggers, and scripts that can add complex functionality to your apps. Moreover, Appsmith also provides an intuitive code editor, making it easy to write custom code in your projects if needed."}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-the-best-software-development-tool",children:"ILLA Cloud: The best software development tool"}),"\n",(0,i.jsxs)(o.p,{children:[(0,i.jsx)(o.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(o.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(o.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/illa.png",alt:"illa"})}),"\n",(0,i.jsx)(o.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet-and-appsmith-are-two-popular-software-development-tools",children:"Tooljet and Appsmith are two popular software development tools."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet and Appsmith are two extremely powerful software development tools that enable developers to create applications with data sources quickly and efficiently without too much hand coding. Both tools use intuitive drag-and-drop elements, code tools, data connectors, and a visual development process to help streamline business process management."}),"\n",(0,i.jsx)(o.p,{children:"With their extensive feature sets, both Tooljet and Appsmith have successfully served many developers as they continue to rapidly develop data-driven applications. They prove time and time again that they are essential tools for any software developer with coding knowledge looking to create advanced data-driven applications in just a few simple steps."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet---better-for-those-who-want-more-control-over-their-project",children:"Tooljet - better for those who want more control over their project"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/tooljet.png",alt:"tooljet"})}),"\n",(0,i.jsx)(o.p,{children:"Both Tooljet and Appsmith are powerful for citizen developers to do rapid application development. Tooljet provides flexibility with a more hands-on approach, allowing business users the control they need to create total admin panels with custom UI components."}),"\n",(0,i.jsx)(o.p,{children:"It offers an intuitive user interface that allows users to rapidly design, develop, and manage applications through a series of drag-and-drop tools, visual elements, and data sources. Beyond its easy UI, Tooljet also boasts powerful features such as real-time collaboration, comprehensive project management capabilities, and built-in components."}),"\n",(0,i.jsx)(o.p,{children:"This comprehensive suite of features makes it easier for developers to quickly build robust apps without worrying about coding from scratch. Tooljet also supports various coding languages, including Java, JavaScript, Python, and Ruby, giving developers even more freedom when creating custom applications. Additionally, Tooljet has extensive documentation for users looking for additional support when working on their projects."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-tooljet",children:"Pros of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Intuitive and easy-to-use user interface that makes it simple to create applications quickly with drag-and-drop tools"}),"\n",(0,i.jsx)(o.li,{children:"Powerful management features to help collaborate with other users in real-time and monitor project progress"}),"\n",(0,i.jsx)(o.li,{children:"Built-in analytics and reporting tools to measure the performance, usage, and reliability of applications"}),"\n",(0,i.jsx)(o.li,{children:"A feature-rich platform that supports webhooks, API integration, and custom code for added complexity"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-tooljet",children:"Cons of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"The visual approach means it can be difficult to troubleshoot problems without an understanding of the underlying code"}),"\n",(0,i.jsx)(o.li,{children:"Visual elements are limited, which may not provide enough flexibility for more complex projects"}),"\n",(0,i.jsx)(o.li,{children:"Limited support for third-party integrations, which could restrict the use cases for certain applications"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"appsmith---more-user-friendly",children:"Appsmith - more user-friendly"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith.png",alt:"appsmith"})}),"\n",(0,i.jsx)(o.p,{children:"On the other hand, Appsmith is ideal for those who don\u2019t have coding experience but still want to craft an app - it makes app development more accessible than ever with user-friendly tools that require no technical knowledge. Appsmith is an intuitive, user-friendly low-code platform for non-technical users to build robust data-driven applications quickly. With a simple drag-and-drop interface, you can easily create custom UI components and manage your projects with comprehensive project management capabilities."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith also offers advanced security features such as role-based access control to ensure that only authorized personnel access sensitive information. Additionally, Appsmith integrates with third-party services and supports webhooks, API integration, and custom code, which makes it a great choice for creating robust applications without the need to code from scratch."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-appsmith",children:"Pros of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Highly customizable features so developers can add complex functionality to their apps easily"}),"\n",(0,i.jsx)(o.li,{children:"Intuitive code editor makes it easy to write custom code into your projects if needed"}),"\n",(0,i.jsx)(o.li,{children:"Supports multiple programming languages such as JavaScript, HTML5, CSS3, TypeScript, etc."}),"\n",(0,i.jsx)(o.li,{children:"Flexible API integration allows users to connect various services together quickly and securely"}),"\n",(0,i.jsx)(o.li,{children:"A wide range of predefined templates and components make it easier to create new applications from scratch"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-appsmith",children:"Cons of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Not as beginner-friendly compared to other low-code platforms, which could limit its usefulness for certain users"}),"\n",(0,i.jsx)(o.li,{children:"Code changes can be tricky as they require manual adjustments every time they are made"}),"\n",(0,i.jsx)(o.li,{children:"More expensive than Tooljet, which may not make it a viable option for some budgets"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-offers-the-best-of-both-worlds",children:"ILLA Cloud offers the best of both worlds"}),"\n",(0,i.jsx)(o.p,{children:"ILLA is one of the fastest platforms for internal tool development. It saves developers precious time on web design and other aspects of their job. One of the main reasons developers are increasingly choosing ILLA is the library. The platform has conjured a rich collection of code components that you can simply drag and drop and build complex applications within minutes."}),"\n",(0,i.jsx)(o.p,{children:"You can also use application programming interfaces to join ILLA with a database of your choice. The platform can excellently integrate back-end and front-end data. As a result, developers can make vast information interactions possible with basic data calls."}),"\n",(0,i.jsx)(o.p,{children:"Any developer will love ILLA for two reasons- freedom and the chance to work simultaneously with other developers. Firstly, developers can write JavaScript wherever they want. This permits more flexibility in their job and increased variety in results."}),"\n",(0,i.jsx)(o.p,{children:"Secondly, developers can share links in ILLA Builder with other professionals in real time. Consequently, they can edit and comment on each other\u2019s work as they go along. In other words, developers get to work in a fun and collaborative workspace. Naturally, this yields faster and improved results."}),"\n",(0,i.jsx)(o.p,{children:"Lastly, developers can always carry their work with them when using ILLA cloud. Just one click from any device will give them access to the cloud and bring them to ILLA\u2019s user interface."}),"\n",(0,i.jsx)(o.h3,{id:"key-features-of-illa",children:"Key features of ILLA"}),"\n",(0,i.jsx)(o.p,{children:"Here are the key features of ILLA you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"ILLA has a ready-to-use library for React components."}),"\n",(0,i.jsx)(o.li,{children:"Most amazingly, the ILLA design tool has a typescript typing feature and supports predictable static typing."}),"\n",(0,i.jsx)(o.li,{children:"ILLA Design provides quick and easy import, which helps in improving developers\u2019 productivity."}),"\n",(0,i.jsx)(o.li,{children:"You can access beautifully designed and powerful themes and components."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"upgraded-illa-features",children:"Upgraded ILLA features"}),"\n",(0,i.jsx)(o.p,{children:"Here are some upgraded features of ILLA that you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Quick integration with any data source"}),"\n",(0,i.jsx)(o.li,{children:"You can connect ILLA to any mainstream database or any other data source. This tool allows you to get data from the backend using front-end components."}),"\n",(0,i.jsx)(o.li,{children:"Real-time collaboration for enhanced efficiency"}),"\n",(0,i.jsx)(o.li,{children:"ILLA Builder allows developers to work collaboratively on a project. They can create and share links to different developers to co-edit their tools and communicate with other team members in real time."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"responsive-ui-library-to-meet-your-needs",children:"Responsive UI library to meet your needs"}),"\n",(0,i.jsx)(o.p,{children:"ILLA Builder also has numerous components to meet every developer\u2019s needs efficiently. So, developers can access the drag-and-drop builder to develop their desired internal tools quickly."}),"\n",(0,i.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(o.p,{children:"In conclusion, Tooljet and Appsmith are both excellent low-code platforms that can help you build applications quickly and efficiently. However, they each have their own strengths and weaknesses, so it\u2019s important to consider your needs before deciding which one is right for you. If you\u2019re looking for a more hands-on approach with powerful management features, then Tooljet may be the better option for you. On the other hand, if you want a user-friendly platform that doesn\u2019t require any coding experience, then Appsmith may be the better choice. Ultimately, it all comes down to what type of developer you are and what type of application you want to build."})]})}function c(e={}){const{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>l,a:()=>a});var i=t(959);const s={},n=i.createContext(s);function a(e){const o=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function l(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(n.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2391],{3490:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>r,contentTitle:()=>a,default:()=>c,frontMatter:()=>n,metadata:()=>l,toc:()=>d});var i=t(1527),s=t(7214);const n={title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},a=void 0,l={permalink:"/illa-website/blog/tooljet-vs-appsmith",source:"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md",title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",date:"2024-01-23T10:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"tooljet",permalink:"/illa-website/blog/tags/tooljet"},{label:"appsmith",permalink:"/illa-website/blog/tags/appsmith"},{label:"retool",permalink:"/illa-website/blog/tags/retool"}],readingTime:7.11,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},unlisted:!1,prevItem:{title:"Appsmith vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/appsmith-vs-retool"},nextItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},relatedPosts:[{title:"Appsmith vs Retool: Which open-source low-code platform is better?",description:"In the ever-evolving landscape of low-code development platforms, Appsmith and Retool have emerged as strong contenders, each offering unique features and capabilities.",permalink:"/illa-website/blog/appsmith-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.435,date:"2024-01-23T10:00:00.000Z"},{title:"Tooljet vs Retool: Which open-source low-code platform is better?",description:"The demand for efficient and easy-to-use internal tools is on the rise, and low-code platforms have emerged as the go-to solution for businesses.",permalink:"/illa-website/blog/tooljet-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.83,date:"2024-01-23T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"ILLA Cloud: The best software development tool",id:"illa-cloud-the-best-software-development-tool",level:2},{value:"Tooljet and Appsmith are two popular software development tools.",id:"tooljet-and-appsmith-are-two-popular-software-development-tools",level:2},{value:"Tooljet - better for those who want more control over their project",id:"tooljet---better-for-those-who-want-more-control-over-their-project",level:2},{value:"Pros of Tooljet:",id:"pros-of-tooljet",level:3},{value:"Cons of Tooljet:",id:"cons-of-tooljet",level:3},{value:"Appsmith - more user-friendly",id:"appsmith---more-user-friendly",level:2},{value:"Pros of Appsmith:",id:"pros-of-appsmith",level:3},{value:"Cons of Appsmith:",id:"cons-of-appsmith",level:3},{value:"ILLA Cloud offers the best of both worlds",id:"illa-cloud-offers-the-best-of-both-worlds",level:2},{value:"Key features of ILLA",id:"key-features-of-illa",level:3},{value:"Upgraded ILLA features",id:"upgraded-illa-features",level:3},{value:"Responsive UI library to meet your needs",id:"responsive-ui-library-to-meet-your-needs",level:3},{value:"Conclusion",id:"conclusion",level:2}];function p(e){const o={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.p,{children:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option. Both are open-source platforms with various features to choose from, but they each have their own strengths and weaknesses. This blog post will compare Tooljet and Appsmith to help you decide which is suitable for your needs."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet is excellent for those who prefer working with visual elements and drag-and-drop tools. Its user interface allows you to quickly create applications by simply dragging and dropping different components into place, making it easy and fast to build applications from the ground up. Additionally, Tooljet has powerful management features that allow you to collaborate with other users in real-time and monitor project progress."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith is an excellent option for developers who want more control over their applications. It offers a wide range of great features, such as API integration, triggers, and scripts that can add complex functionality to your apps. Moreover, Appsmith also provides an intuitive code editor, making it easy to write custom code in your projects if needed."}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-the-best-software-development-tool",children:"ILLA Cloud: The best software development tool"}),"\n",(0,i.jsxs)(o.p,{children:[(0,i.jsx)(o.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(o.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(o.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/illa.png",alt:"illa"})}),"\n",(0,i.jsx)(o.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet-and-appsmith-are-two-popular-software-development-tools",children:"Tooljet and Appsmith are two popular software development tools."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet and Appsmith are two extremely powerful software development tools that enable developers to create applications with data sources quickly and efficiently without too much hand coding. Both tools use intuitive drag-and-drop elements, code tools, data connectors, and a visual development process to help streamline business process management."}),"\n",(0,i.jsx)(o.p,{children:"With their extensive feature sets, both Tooljet and Appsmith have successfully served many developers as they continue to rapidly develop data-driven applications. They prove time and time again that they are essential tools for any software developer with coding knowledge looking to create advanced data-driven applications in just a few simple steps."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet---better-for-those-who-want-more-control-over-their-project",children:"Tooljet - better for those who want more control over their project"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/tooljet.png",alt:"tooljet"})}),"\n",(0,i.jsx)(o.p,{children:"Both Tooljet and Appsmith are powerful for citizen developers to do rapid application development. Tooljet provides flexibility with a more hands-on approach, allowing business users the control they need to create total admin panels with custom UI components."}),"\n",(0,i.jsx)(o.p,{children:"It offers an intuitive user interface that allows users to rapidly design, develop, and manage applications through a series of drag-and-drop tools, visual elements, and data sources. Beyond its easy UI, Tooljet also boasts powerful features such as real-time collaboration, comprehensive project management capabilities, and built-in components."}),"\n",(0,i.jsx)(o.p,{children:"This comprehensive suite of features makes it easier for developers to quickly build robust apps without worrying about coding from scratch. Tooljet also supports various coding languages, including Java, JavaScript, Python, and Ruby, giving developers even more freedom when creating custom applications. Additionally, Tooljet has extensive documentation for users looking for additional support when working on their projects."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-tooljet",children:"Pros of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Intuitive and easy-to-use user interface that makes it simple to create applications quickly with drag-and-drop tools"}),"\n",(0,i.jsx)(o.li,{children:"Powerful management features to help collaborate with other users in real-time and monitor project progress"}),"\n",(0,i.jsx)(o.li,{children:"Built-in analytics and reporting tools to measure the performance, usage, and reliability of applications"}),"\n",(0,i.jsx)(o.li,{children:"A feature-rich platform that supports webhooks, API integration, and custom code for added complexity"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-tooljet",children:"Cons of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"The visual approach means it can be difficult to troubleshoot problems without an understanding of the underlying code"}),"\n",(0,i.jsx)(o.li,{children:"Visual elements are limited, which may not provide enough flexibility for more complex projects"}),"\n",(0,i.jsx)(o.li,{children:"Limited support for third-party integrations, which could restrict the use cases for certain applications"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"appsmith---more-user-friendly",children:"Appsmith - more user-friendly"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith.png",alt:"appsmith"})}),"\n",(0,i.jsx)(o.p,{children:"On the other hand, Appsmith is ideal for those who don\u2019t have coding experience but still want to craft an app - it makes app development more accessible than ever with user-friendly tools that require no technical knowledge. Appsmith is an intuitive, user-friendly low-code platform for non-technical users to build robust data-driven applications quickly. With a simple drag-and-drop interface, you can easily create custom UI components and manage your projects with comprehensive project management capabilities."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith also offers advanced security features such as role-based access control to ensure that only authorized personnel access sensitive information. Additionally, Appsmith integrates with third-party services and supports webhooks, API integration, and custom code, which makes it a great choice for creating robust applications without the need to code from scratch."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-appsmith",children:"Pros of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Highly customizable features so developers can add complex functionality to their apps easily"}),"\n",(0,i.jsx)(o.li,{children:"Intuitive code editor makes it easy to write custom code into your projects if needed"}),"\n",(0,i.jsx)(o.li,{children:"Supports multiple programming languages such as JavaScript, HTML5, CSS3, TypeScript, etc."}),"\n",(0,i.jsx)(o.li,{children:"Flexible API integration allows users to connect various services together quickly and securely"}),"\n",(0,i.jsx)(o.li,{children:"A wide range of predefined templates and components make it easier to create new applications from scratch"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-appsmith",children:"Cons of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Not as beginner-friendly compared to other low-code platforms, which could limit its usefulness for certain users"}),"\n",(0,i.jsx)(o.li,{children:"Code changes can be tricky as they require manual adjustments every time they are made"}),"\n",(0,i.jsx)(o.li,{children:"More expensive than Tooljet, which may not make it a viable option for some budgets"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-offers-the-best-of-both-worlds",children:"ILLA Cloud offers the best of both worlds"}),"\n",(0,i.jsx)(o.p,{children:"ILLA is one of the fastest platforms for internal tool development. It saves developers precious time on web design and other aspects of their job. One of the main reasons developers are increasingly choosing ILLA is the library. The platform has conjured a rich collection of code components that you can simply drag and drop and build complex applications within minutes."}),"\n",(0,i.jsx)(o.p,{children:"You can also use application programming interfaces to join ILLA with a database of your choice. The platform can excellently integrate back-end and front-end data. As a result, developers can make vast information interactions possible with basic data calls."}),"\n",(0,i.jsx)(o.p,{children:"Any developer will love ILLA for two reasons- freedom and the chance to work simultaneously with other developers. Firstly, developers can write JavaScript wherever they want. This permits more flexibility in their job and increased variety in results."}),"\n",(0,i.jsx)(o.p,{children:"Secondly, developers can share links in ILLA Builder with other professionals in real time. Consequently, they can edit and comment on each other\u2019s work as they go along. In other words, developers get to work in a fun and collaborative workspace. Naturally, this yields faster and improved results."}),"\n",(0,i.jsx)(o.p,{children:"Lastly, developers can always carry their work with them when using ILLA cloud. Just one click from any device will give them access to the cloud and bring them to ILLA\u2019s user interface."}),"\n",(0,i.jsx)(o.h3,{id:"key-features-of-illa",children:"Key features of ILLA"}),"\n",(0,i.jsx)(o.p,{children:"Here are the key features of ILLA you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"ILLA has a ready-to-use library for React components."}),"\n",(0,i.jsx)(o.li,{children:"Most amazingly, the ILLA design tool has a typescript typing feature and supports predictable static typing."}),"\n",(0,i.jsx)(o.li,{children:"ILLA Design provides quick and easy import, which helps in improving developers\u2019 productivity."}),"\n",(0,i.jsx)(o.li,{children:"You can access beautifully designed and powerful themes and components."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"upgraded-illa-features",children:"Upgraded ILLA features"}),"\n",(0,i.jsx)(o.p,{children:"Here are some upgraded features of ILLA that you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Quick integration with any data source"}),"\n",(0,i.jsx)(o.li,{children:"You can connect ILLA to any mainstream database or any other data source. This tool allows you to get data from the backend using front-end components."}),"\n",(0,i.jsx)(o.li,{children:"Real-time collaboration for enhanced efficiency"}),"\n",(0,i.jsx)(o.li,{children:"ILLA Builder allows developers to work collaboratively on a project. They can create and share links to different developers to co-edit their tools and communicate with other team members in real time."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"responsive-ui-library-to-meet-your-needs",children:"Responsive UI library to meet your needs"}),"\n",(0,i.jsx)(o.p,{children:"ILLA Builder also has numerous components to meet every developer\u2019s needs efficiently. So, developers can access the drag-and-drop builder to develop their desired internal tools quickly."}),"\n",(0,i.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(o.p,{children:"In conclusion, Tooljet and Appsmith are both excellent low-code platforms that can help you build applications quickly and efficiently. However, they each have their own strengths and weaknesses, so it\u2019s important to consider your needs before deciding which one is right for you. If you\u2019re looking for a more hands-on approach with powerful management features, then Tooljet may be the better option for you. On the other hand, if you want a user-friendly platform that doesn\u2019t require any coding experience, then Appsmith may be the better choice. Ultimately, it all comes down to what type of developer you are and what type of application you want to build."})]})}function c(e={}){const{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>l,a:()=>a});var i=t(959);const s={},n=i.createContext(s);function a(e){const o=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function l(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(n.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4a61f11b.88f6cd67.js b/assets/js/4a61f11b.88f6cd67.js
new file mode 100644
index 0000000000..4c510e043a
--- /dev/null
+++ b/assets/js/4a61f11b.88f6cd67.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9699],{1483:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var i=t(1527),o=t(7214);const a={slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},s=void 0,r={permalink:"/illa-website/blog/shadcn-ui-2024",source:"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"shadcn-ui",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.96,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},nextItem:{title:"Shadcn vs MUI: A Comparative Analysis of Strengths and Weaknesses",permalink:"/illa-website/blog/shadcn-vs-mui"},relatedPosts:[{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"},{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of Shadcn UI",id:"features-of-shadcn-ui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"How to Choose",id:"how-to-choose",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains vibrant. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"In general, companies choose a component library when building web applications to streamline repetitive tasks. Component libraries offer a range of out-of-the-box components like Select, Input, CheckBox, etc. These components, with customizable styles or built-in attractive styles, enable rapid development of aesthetically pleasing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we typically use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, usually aligned with the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, emphasizing design aesthetics and rapid functionality implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze the Shadcn UI component library based on the following points:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Design"}),"\n",(0,i.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,i.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"features-of-shadcn-ui",children:"Features of Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:"Some detailed data about Shadcn:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\u2b50 Github Stars: 37k"}),"\n",(0,i.jsx)(n.li,{children:"\u23ec NPM Downloads: 23,962 downloads per week"}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Mar 8, 2023"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI is a relatively new project that gained 37k stars in less than a year, indicating its rapid recognition in the open-source community."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/shadcn-ui.png",alt:"shadcn-ui"})}),"\n",(0,i.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,i.jsx)(n.p,{children:"In terms of design, Shadcn UI leans towards a business style with a clean UI, suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes, but it seems to offer customization only for:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Colors"}),"\n",(0,i.jsx)(n.li,{children:"Border radii"}),"\n",(0,i.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n",(0,i.jsx)(n.li,{children:'Predefined "Default" and "New York" styles'}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"In terms of fine-grained control, such as font and font size, it appears to lack flexibility. However, for internal tool scenarios, this level of control may be sufficient, but for external tools, it might be somewhat limiting."}),"\n",(0,i.jsxs)(n.p,{children:["In terms of CSS, Shadcn UI supports both traditional CSS and CSS-in-JS, using ",(0,i.jsx)(n.a,{href:"https://stitches.dev/",children:"Stitches"})," for the CSS-in-JS solution. Traditional CSS is supported by default, but additional configuration might be needed for less and sass, and it's not out-of-the-box."]}),"\n",(0,i.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,i.jsx)(n.p,{children:"The library's feature richness completely satisfies daily development needs, with most capabilities supported and comprehensive callbacks. Shadcn UI supports crucial capabilities, including but not limited to:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"SSR"}),"\n",(0,i.jsx)(n.li,{children:"Accessibility"}),"\n",(0,i.jsx)(n.li,{children:"Animation"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"However, for more advanced requirements like extremely rich charts and high-performance tables, it seems not to be supported. With the continuous development of the project, it is expected that the project will evolve over time."}),"\n",(0,i.jsx)(n.h2,{id:"how-to-choose",children:"How to Choose"}),"\n",(0,i.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,i.jsx)(n.p,{children:"If you are a curious open-source enthusiast, not requiring highly customized UI, and without complex data processing needs, Shadcn UI is recommended for development. It is lightweight, with simpler configuration, ready to use out-of-the-box, allowing direct development without worrying about details."}),"\n",(0,i.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"If you have a high need for UI and component customization and plan to use Shadcn UI for large projects, it is not recommended. Shadcn UI's customization capabilities are not as robust, and it does not provide out-of-the-box charts and high-performance data components. In such cases, you may need to look for other open-source projects to supplement these features."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(959);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4a61f11b.97d67ffb.js b/assets/js/4a61f11b.97d67ffb.js
deleted file mode 100644
index 122da7e3b4..0000000000
--- a/assets/js/4a61f11b.97d67ffb.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9699],{1483:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(1527),o=t(7214);const s={slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},a=void 0,r={permalink:"/illa-website/blog/shadcn-ui-2024",source:"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"shadcn-ui",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.96,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},nextItem:{title:"Shadcn vs MUI: A Comparative Analysis of Strengths and Weaknesses",permalink:"/illa-website/blog/shadcn-vs-mui"},relatedPosts:[{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"},{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"},{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of Shadcn UI",id:"features-of-shadcn-ui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"How to Choose",id:"how-to-choose",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains vibrant. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"In general, companies choose a component library when building web applications to streamline repetitive tasks. Component libraries offer a range of out-of-the-box components like Select, Input, CheckBox, etc. These components, with customizable styles or built-in attractive styles, enable rapid development of aesthetically pleasing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we typically use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, usually aligned with the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, emphasizing design aesthetics and rapid functionality implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze the Shadcn UI component library based on the following points:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Design"}),"\n",(0,i.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,i.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"features-of-shadcn-ui",children:"Features of Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:"Some detailed data about Shadcn:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\u2b50 Github Stars: 37k"}),"\n",(0,i.jsx)(n.li,{children:"\u23ec NPM Downloads: 23,962 downloads per week"}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Mar 8, 2023"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI is a relatively new project that gained 37k stars in less than a year, indicating its rapid recognition in the open-source community."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/shadcn-ui.png",alt:"shadcn-ui"})}),"\n",(0,i.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,i.jsx)(n.p,{children:"In terms of design, Shadcn UI leans towards a business style with a clean UI, suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes, but it seems to offer customization only for:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Colors"}),"\n",(0,i.jsx)(n.li,{children:"Border radii"}),"\n",(0,i.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n",(0,i.jsx)(n.li,{children:'Predefined "Default" and "New York" styles'}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"In terms of fine-grained control, such as font and font size, it appears to lack flexibility. However, for internal tool scenarios, this level of control may be sufficient, but for external tools, it might be somewhat limiting."}),"\n",(0,i.jsxs)(n.p,{children:["In terms of CSS, Shadcn UI supports both traditional CSS and CSS-in-JS, using ",(0,i.jsx)(n.a,{href:"https://stitches.dev/",children:"Stitches"})," for the CSS-in-JS solution. Traditional CSS is supported by default, but additional configuration might be needed for less and sass, and it's not out-of-the-box."]}),"\n",(0,i.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,i.jsx)(n.p,{children:"The library's feature richness completely satisfies daily development needs, with most capabilities supported and comprehensive callbacks. Shadcn UI supports crucial capabilities, including but not limited to:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"SSR"}),"\n",(0,i.jsx)(n.li,{children:"Accessibility"}),"\n",(0,i.jsx)(n.li,{children:"Animation"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"However, for more advanced requirements like extremely rich charts and high-performance tables, it seems not to be supported. With the continuous development of the project, it is expected that the project will evolve over time."}),"\n",(0,i.jsx)(n.h2,{id:"how-to-choose",children:"How to Choose"}),"\n",(0,i.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,i.jsx)(n.p,{children:"If you are a curious open-source enthusiast, not requiring highly customized UI, and without complex data processing needs, Shadcn UI is recommended for development. It is lightweight, with simpler configuration, ready to use out-of-the-box, allowing direct development without worrying about details."}),"\n",(0,i.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"If you have a high need for UI and component customization and plan to use Shadcn UI for large projects, it is not recommended. Shadcn UI's customization capabilities are not as robust, and it does not provide out-of-the-box charts and high-performance data components. In such cases, you may need to look for other open-source projects to supplement these features."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(959);const o={},s=i.createContext(o);function a(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4fb9e68b.77cd1453.js b/assets/js/4fb9e68b.77cd1453.js
new file mode 100644
index 0000000000..65d5474da3
--- /dev/null
+++ b/assets/js/4fb9e68b.77cd1453.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2361],{4133:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>r,toc:()=>d});var i=a(1527),o=a(7214);const n={slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},s=void 0,r={permalink:"/illa-website/blog/core-app-dashboard-2",source:"@site/blog/core-app-dashboard/core-app-dashboard.md",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"core app dashboard",permalink:"/illa-website/blog/tags/core-app-dashboard"}],readingTime:7.445,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},nextItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},relatedPosts:[{title:"5 Best Low Code Platform in 2024",description:"As the software industry evolves, low-code tools are increasingly gaining popularity. Implementing the right low-code tools",permalink:"/illa-website/blog/best-low-code-platform",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.665,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}]},l={authorsImageUrls:[void 0]},d=[{value:"What is the Core App Dashboard?",id:"what-is-the-core-app-dashboard",level:2},{value:"Why should we use the Core Dash app?",id:"why-should-we-use-the-core-dash-app",level:2},{value:"Functions of the Core App Dashboard",id:"functions-of-the-core-app-dashboard",level:2},{value:"How to build a core dashboard using ILLA Cloud?",id:"how-to-build-a-core-dashboard-using-illa-cloud",level:2},{value:"Step 1: Getting Started with ILLA Cloud",id:"step-1-getting-started-with-illa-cloud",level:3},{value:"Step 2: Creating a New Project",id:"step-2-creating-a-new-project",level:3},{value:"Step 3: Designing the User Interface",id:"step-3-designing-the-user-interface",level:3},{value:"Step 4: Integrating Data Sources",id:"step-4-integrating-data-sources",level:3},{value:"Step 5: Creating Data Automation Workflows",id:"step-5-creating-data-automation-workflows",level:3},{value:"Step 6: Operations Automation",id:"step-6-operations-automation",level:3},{value:"Step 7: Testing and Deployment",id:"step-7-testing-and-deployment",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.h2,{id:"what-is-the-core-app-dashboard",children:"What is the Core App Dashboard?"}),"\n",(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.p,{children:"Think of it as the dashboard in a car\u2014it presents the driver with all the essential data at a glance, ensuring efficient navigation and vehicle performance. Similarly, a Core App Dashboard does the same, but for the application realm."}),"\n",(0,i.jsx)(t.h2,{id:"why-should-we-use-the-core-dash-app",children:"Why should we use the Core Dash app?"}),"\n",(0,i.jsx)(t.p,{children:"The use of Core Dash apps, or more commonly known as core dashboard applications, has become increasingly prevalent in today's tech-driven world. These dashboards play a pivotal role in simplifying complex processes, providing insights, and enhancing user experience. Here's why you should consider using a Core Dash app:"}),"\n",(0,i.jsx)(t.p,{children:"Centralized Control: A core dashboard application offers a unified platform where users can access, monitor, and control various functionalities and features of an application. This centralization minimizes the need to jump between multiple interfaces, thus improving efficiency."}),"\n",(0,i.jsx)(t.p,{children:"Real-time Data Visualization: Dashboards provide real-time data visualization, allowing users to quickly grasp the current status, trends, and performance metrics. This can aid in making informed decisions promptly."}),"\n",(0,i.jsx)(t.p,{children:"Enhanced User Experience: A well-designed dashboard provides an intuitive user interface, making it easier for users to navigate and access the information they need. This contributes to a more seamless and enhanced user experience."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Core Dash apps can often be tailored to meet specific needs. Users can customize views, metrics, and even the layout to suit their preferences or job functions."}),"\n",(0,i.jsx)(t.p,{children:"Improved Productivity: By consolidating essential data and functionalities in one place, dashboards reduce the time spent searching for information, leading to increased productivity."}),"\n",(0,i.jsx)(t.p,{children:"Integrated Analytics: Many Core Dash apps come with integrated analytics tools that offer insights into user behavior, application performance, and other critical metrics. This data can be invaluable for driving growth and optimization."}),"\n",(0,i.jsx)(t.p,{children:"Security: Dashboards can provide robust security features, including user access controls, encryption, and audit trails. This ensures that sensitive data is protected and only accessible to authorized users."}),"\n",(0,i.jsx)(t.p,{children:"Collaboration: Some dashboards come with collaborative tools, enabling teams to work together more effectively, share insights, and communicate seamlessly within the platform."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As organizations grow, their data and processes can become more complex. Core Dash apps are designed to be scalable, ensuring they remain effective and efficient even as demands increase."}),"\n",(0,i.jsx)(t.p,{children:"Cost-Effective: By integrating multiple functionalities and data sources into one platform, dashboards can reduce the need for multiple standalone tools. This consolidation can lead to cost savings in both software procurement and training."}),"\n",(0,i.jsx)(t.p,{children:"Alerts and Notifications: Dashboards can be set up to send alerts or notifications based on specific criteria or thresholds. This ensures that users are promptly informed about any critical events or changes."}),"\n",(0,i.jsx)(t.p,{children:"Support for Decision-making: With all the relevant data and analytics at their fingertips, decision-makers can derive actionable insights, helping them make more informed and strategic decisions."}),"\n",(0,i.jsx)(t.p,{children:"In summary, a Core Dash app provides a powerful and comprehensive tool for businesses and individuals alike. Whether it's for monitoring, analytics, collaboration, or decision-making, these dashboards offer a range of benefits that can significantly enhance efficiency, productivity, and overall user experience. If you're looking for a way to consolidate data, gain insights, and improve operational efficiency, a Core Dash app might be the solution you need."}),"\n",(0,i.jsx)(t.h2,{id:"functions-of-the-core-app-dashboard",children:"Functions of the Core App Dashboard"}),"\n",(0,i.jsx)(t.p,{children:"While the specific functionalities might differ based on the nature of the application, universally, a Core App Dashboard is expected to deliver the following capabilities:"}),"\n",(0,i.jsx)(t.p,{children:"Comprehensive Analytics: A bird's-eye view of the application's performance metrics, user activity, and other pivotal data, enabling users to understand and optimize app usage."}),"\n",(0,i.jsx)(t.p,{children:"User Administration: A crucial feature for multi-user platforms, the dashboard provides tools for the seamless management of users\u2014enabling add-ons, edits, deletions, and role definitions."}),"\n",(0,i.jsx)(t.p,{children:"Configurational Controls: Whether it's changing the interface's aesthetics or adjusting the application's backend mechanics, the dashboard allows for intuitive, centralized control over various settings."}),"\n",(0,i.jsx)(t.p,{children:"Notification Hub: This consolidates all alerts, ensuring users never miss out on essential updates, messages, or tasks."}),"\n",(0,i.jsx)(t.p,{children:"Task Management: Some dashboards integrate task management tools to enable users to allocate, track, and manage projects and responsibilities."}),"\n",(0,i.jsx)(t.p,{children:"Integration and Extensions: Dashboards might provide interfaces for integrating third-party tools or extending the application's capabilities."}),"\n",(0,i.jsx)(t.p,{children:"Utilizing the Core App Dashboard: What to Keep in Mind"}),"\n",(0,i.jsx)(t.p,{children:"Harnessing the potential of a Core App Dashboard necessitates understanding and addressing a few critical considerations:"}),"\n",(0,i.jsx)(t.p,{children:"Intuitive Design: A cluttered or convoluted dashboard can deter users. Ensuring a clean, intuitive, and user-friendly design is paramount."}),"\n",(0,i.jsx)(t.p,{children:"Robust Security: Given the control and insights a dashboard offers, its security cannot be compromised. Regular updates, strong encryption, and multi-factor authentication can enhance security."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As applications evolve, dashboards should scale accordingly. This includes accommodating additional data, users, and functionalities."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Every organization or user has unique needs. Offering customization options ensures the dashboard remains relevant and effective."}),"\n",(0,i.jsx)(t.p,{children:"Regular Updates: The digital realm is dynamic. Dashboards should regularly update to incorporate new features, fix bugs, and enhance performance."}),"\n",(0,i.jsx)(t.h2,{id:"how-to-build-a-core-dashboard-using-illa-cloud",children:"How to build a core dashboard using ILLA Cloud?"}),"\n",(0,i.jsx)(t.p,{children:"In the ever-evolving digital realm, the ability to visualize and act upon data quickly is crucial. A well-structured core app dashboard can be your central hub for all pivotal information. Combining this with the innovative prowess of ILLA Cloud can make your dashboard not just functional but transformative. Here's how you can embark on this transformative journey:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.h3,{id:"step-1-getting-started-with-illa-cloud",children:"Step 1: Getting Started with ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Your first stop is the official ILLA Cloud website. Register and create an account. With this step, you open the gateway to a dashboard replete with tools tailored for intuitive application development."}),"\n",(0,i.jsx)(t.h3,{id:"step-2-creating-a-new-project",children:"Step 2: Creating a New Project"}),"\n",(0,i.jsx)(t.p,{children:'Spot the "Create New Project" button? Click on it. Now, christen your project with a name and sprinkle in a description. Given our focus, you\'d want to select a core app dashboard as your project type.'}),"\n",(0,i.jsx)(t.h3,{id:"step-3-designing-the-user-interface",children:"Step 3: Designing the User Interface"}),"\n",(0,i.jsx)(t.p,{children:"Harness the strength of ILLA Cloud's low-code environment. Crafting a user interface becomes a game of drag-and-drop. Be it buttons, charts, or widgets, position them as you deem fit and give them a makeover to resonate with your brand's identity."}),"\n",(0,i.jsx)(t.h3,{id:"step-4-integrating-data-sources",children:"Step 4: Integrating Data Sources"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud makes data integration a breeze. Using the no-code API connector, you can seamlessly fetch data from various repositories, be it intricate databases, versatile external APIs, or humble spreadsheets. Your dashboard now thrives with real-time data.ILLA Cloud supports a myriad of data sources to ensure it caters to a wide range of business needs.For example,"}),"\n",(0,i.jsx)(t.p,{children:"Airtable: Known for its spreadsheet-database hybrid functionalities, businesses can leverage Airtable's structured data with ILLA Cloud."}),"\n",(0,i.jsx)(t.p,{children:"Google Sheets: Many organizations use Google Sheets due to its collaboration features. Directly integrate these sheets into your dashboard for an efficient workflow."}),"\n",(0,i.jsx)(t.p,{children:"MySQL & PostgreSQL: These popular relational database management systems hold vast amounts of structured data. ILLA Cloud\u2019s connectors ensure this data can be visualized seamlessly."}),"\n",(0,i.jsx)(t.h3,{id:"step-5-creating-data-automation-workflows",children:"Step 5: Creating Data Automation Workflows"}),"\n",(0,i.jsx)(t.p,{children:"Accuracy is key. With ILLA Cloud's data automation workflows and the robust Event Handler feature, say goodbye to inconsistencies. Set the stage for meticulous data validation, apt transformation, and synchronized updates. The Event Handler acts as an event processing function, allowing you to create dynamic triggering mechanisms in the workflow. Simply put, its logic operates on the principle of 'when something happens, then something else will happen.' This ensures that your dashboard always responds in real-time and reflects the absolute truth.\""}),"\n",(0,i.jsx)(t.p,{children:"This revision emphasizes the importance of the Event Handler within the context of ensuring data accuracy and real-time responsiveness."}),"\n",(0,i.jsx)(t.h3,{id:"step-6-operations-automation",children:"Step 6: Operations Automation"}),"\n",(0,i.jsx)(t.p,{children:"Routine tasks can be automated. Let ILLA Cloud's operation automation features take the helm. Design workflows that are proactive, initiating actions based on set criteria. The result? A reduction in manual tasks and a boost in overall efficiency."}),"\n",(0,i.jsx)(t.h3,{id:"step-7-testing-and-deployment",children:"Step 7: Testing and Deployment"}),"\n",(0,i.jsx)(t.p,{children:"Before you unveil your masterpiece, test it. Use the ILLA Cloud environment to ensure every cog in your dashboard machine runs smoothly. Once you're content with its performance, roll out your dashboard to the desired environment, and let your stakeholders revel in its capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"Building a core app dashboard might seem daunting, but with ILLA Cloud, it's akin to weaving a story\u2014with data as your language. This guide laid down a structured path, taking you from initiation to deployment, ensuring your journey is seamless. The core app dashboard you create with ILLA Cloud won't just be a repository of data; it'll be a hub of insights, driving informed decisions and fostering growth. Dive into the world of ILLA Cloud, and make app development an experience, not just a task."})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},7214:(e,t,a)=>{a.d(t,{Z:()=>r,a:()=>s});var i=a(959);const o={},n=i.createContext(o);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4fb9e68b.c70e5871.js b/assets/js/4fb9e68b.c70e5871.js
deleted file mode 100644
index 8417d0ce0c..0000000000
--- a/assets/js/4fb9e68b.c70e5871.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2361],{4133:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>r,toc:()=>d});var i=a(1527),o=a(7214);const n={slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},s=void 0,r={permalink:"/illa-website/blog/core-app-dashboard-2",source:"@site/blog/core-app-dashboard/core-app-dashboard.md",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"core app dashboard",permalink:"/illa-website/blog/tags/core-app-dashboard"}],readingTime:7.445,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},nextItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},relatedPosts:[{title:"5 Best Low Code Platform in 2024",description:"As the software industry evolves, low-code tools are increasingly gaining popularity. Implementing the right low-code tools",permalink:"/illa-website/blog/best-low-code-platform",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.665,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}]},l={authorsImageUrls:[void 0]},d=[{value:"What is the Core App Dashboard?",id:"what-is-the-core-app-dashboard",level:2},{value:"Why should we use the Core Dash app?",id:"why-should-we-use-the-core-dash-app",level:2},{value:"Functions of the Core App Dashboard",id:"functions-of-the-core-app-dashboard",level:2},{value:"How to build a core dashboard using ILLA Cloud?",id:"how-to-build-a-core-dashboard-using-illa-cloud",level:2},{value:"Step 1: Getting Started with ILLA Cloud",id:"step-1-getting-started-with-illa-cloud",level:3},{value:"Step 2: Creating a New Project",id:"step-2-creating-a-new-project",level:3},{value:"Step 3: Designing the User Interface",id:"step-3-designing-the-user-interface",level:3},{value:"Step 4: Integrating Data Sources",id:"step-4-integrating-data-sources",level:3},{value:"Step 5: Creating Data Automation Workflows",id:"step-5-creating-data-automation-workflows",level:3},{value:"Step 6: Operations Automation",id:"step-6-operations-automation",level:3},{value:"Step 7: Testing and Deployment",id:"step-7-testing-and-deployment",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.h2,{id:"what-is-the-core-app-dashboard",children:"What is the Core App Dashboard?"}),"\n",(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.p,{children:"Think of it as the dashboard in a car\u2014it presents the driver with all the essential data at a glance, ensuring efficient navigation and vehicle performance. Similarly, a Core App Dashboard does the same, but for the application realm."}),"\n",(0,i.jsx)(t.h2,{id:"why-should-we-use-the-core-dash-app",children:"Why should we use the Core Dash app?"}),"\n",(0,i.jsx)(t.p,{children:"The use of Core Dash apps, or more commonly known as core dashboard applications, has become increasingly prevalent in today's tech-driven world. These dashboards play a pivotal role in simplifying complex processes, providing insights, and enhancing user experience. Here's why you should consider using a Core Dash app:"}),"\n",(0,i.jsx)(t.p,{children:"Centralized Control: A core dashboard application offers a unified platform where users can access, monitor, and control various functionalities and features of an application. This centralization minimizes the need to jump between multiple interfaces, thus improving efficiency."}),"\n",(0,i.jsx)(t.p,{children:"Real-time Data Visualization: Dashboards provide real-time data visualization, allowing users to quickly grasp the current status, trends, and performance metrics. This can aid in making informed decisions promptly."}),"\n",(0,i.jsx)(t.p,{children:"Enhanced User Experience: A well-designed dashboard provides an intuitive user interface, making it easier for users to navigate and access the information they need. This contributes to a more seamless and enhanced user experience."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Core Dash apps can often be tailored to meet specific needs. Users can customize views, metrics, and even the layout to suit their preferences or job functions."}),"\n",(0,i.jsx)(t.p,{children:"Improved Productivity: By consolidating essential data and functionalities in one place, dashboards reduce the time spent searching for information, leading to increased productivity."}),"\n",(0,i.jsx)(t.p,{children:"Integrated Analytics: Many Core Dash apps come with integrated analytics tools that offer insights into user behavior, application performance, and other critical metrics. This data can be invaluable for driving growth and optimization."}),"\n",(0,i.jsx)(t.p,{children:"Security: Dashboards can provide robust security features, including user access controls, encryption, and audit trails. This ensures that sensitive data is protected and only accessible to authorized users."}),"\n",(0,i.jsx)(t.p,{children:"Collaboration: Some dashboards come with collaborative tools, enabling teams to work together more effectively, share insights, and communicate seamlessly within the platform."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As organizations grow, their data and processes can become more complex. Core Dash apps are designed to be scalable, ensuring they remain effective and efficient even as demands increase."}),"\n",(0,i.jsx)(t.p,{children:"Cost-Effective: By integrating multiple functionalities and data sources into one platform, dashboards can reduce the need for multiple standalone tools. This consolidation can lead to cost savings in both software procurement and training."}),"\n",(0,i.jsx)(t.p,{children:"Alerts and Notifications: Dashboards can be set up to send alerts or notifications based on specific criteria or thresholds. This ensures that users are promptly informed about any critical events or changes."}),"\n",(0,i.jsx)(t.p,{children:"Support for Decision-making: With all the relevant data and analytics at their fingertips, decision-makers can derive actionable insights, helping them make more informed and strategic decisions."}),"\n",(0,i.jsx)(t.p,{children:"In summary, a Core Dash app provides a powerful and comprehensive tool for businesses and individuals alike. Whether it's for monitoring, analytics, collaboration, or decision-making, these dashboards offer a range of benefits that can significantly enhance efficiency, productivity, and overall user experience. If you're looking for a way to consolidate data, gain insights, and improve operational efficiency, a Core Dash app might be the solution you need."}),"\n",(0,i.jsx)(t.h2,{id:"functions-of-the-core-app-dashboard",children:"Functions of the Core App Dashboard"}),"\n",(0,i.jsx)(t.p,{children:"While the specific functionalities might differ based on the nature of the application, universally, a Core App Dashboard is expected to deliver the following capabilities:"}),"\n",(0,i.jsx)(t.p,{children:"Comprehensive Analytics: A bird's-eye view of the application's performance metrics, user activity, and other pivotal data, enabling users to understand and optimize app usage."}),"\n",(0,i.jsx)(t.p,{children:"User Administration: A crucial feature for multi-user platforms, the dashboard provides tools for the seamless management of users\u2014enabling add-ons, edits, deletions, and role definitions."}),"\n",(0,i.jsx)(t.p,{children:"Configurational Controls: Whether it's changing the interface's aesthetics or adjusting the application's backend mechanics, the dashboard allows for intuitive, centralized control over various settings."}),"\n",(0,i.jsx)(t.p,{children:"Notification Hub: This consolidates all alerts, ensuring users never miss out on essential updates, messages, or tasks."}),"\n",(0,i.jsx)(t.p,{children:"Task Management: Some dashboards integrate task management tools to enable users to allocate, track, and manage projects and responsibilities."}),"\n",(0,i.jsx)(t.p,{children:"Integration and Extensions: Dashboards might provide interfaces for integrating third-party tools or extending the application's capabilities."}),"\n",(0,i.jsx)(t.p,{children:"Utilizing the Core App Dashboard: What to Keep in Mind"}),"\n",(0,i.jsx)(t.p,{children:"Harnessing the potential of a Core App Dashboard necessitates understanding and addressing a few critical considerations:"}),"\n",(0,i.jsx)(t.p,{children:"Intuitive Design: A cluttered or convoluted dashboard can deter users. Ensuring a clean, intuitive, and user-friendly design is paramount."}),"\n",(0,i.jsx)(t.p,{children:"Robust Security: Given the control and insights a dashboard offers, its security cannot be compromised. Regular updates, strong encryption, and multi-factor authentication can enhance security."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As applications evolve, dashboards should scale accordingly. This includes accommodating additional data, users, and functionalities."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Every organization or user has unique needs. Offering customization options ensures the dashboard remains relevant and effective."}),"\n",(0,i.jsx)(t.p,{children:"Regular Updates: The digital realm is dynamic. Dashboards should regularly update to incorporate new features, fix bugs, and enhance performance."}),"\n",(0,i.jsx)(t.h2,{id:"how-to-build-a-core-dashboard-using-illa-cloud",children:"How to build a core dashboard using ILLA Cloud?"}),"\n",(0,i.jsx)(t.p,{children:"In the ever-evolving digital realm, the ability to visualize and act upon data quickly is crucial. A well-structured core app dashboard can be your central hub for all pivotal information. Combining this with the innovative prowess of ILLA Cloud can make your dashboard not just functional but transformative. Here's how you can embark on this transformative journey:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.h3,{id:"step-1-getting-started-with-illa-cloud",children:"Step 1: Getting Started with ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Your first stop is the official ILLA Cloud website. Register and create an account. With this step, you open the gateway to a dashboard replete with tools tailored for intuitive application development."}),"\n",(0,i.jsx)(t.h3,{id:"step-2-creating-a-new-project",children:"Step 2: Creating a New Project"}),"\n",(0,i.jsx)(t.p,{children:'Spot the "Create New Project" button? Click on it. Now, christen your project with a name and sprinkle in a description. Given our focus, you\'d want to select a core app dashboard as your project type.'}),"\n",(0,i.jsx)(t.h3,{id:"step-3-designing-the-user-interface",children:"Step 3: Designing the User Interface"}),"\n",(0,i.jsx)(t.p,{children:"Harness the strength of ILLA Cloud's low-code environment. Crafting a user interface becomes a game of drag-and-drop. Be it buttons, charts, or widgets, position them as you deem fit and give them a makeover to resonate with your brand's identity."}),"\n",(0,i.jsx)(t.h3,{id:"step-4-integrating-data-sources",children:"Step 4: Integrating Data Sources"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud makes data integration a breeze. Using the no-code API connector, you can seamlessly fetch data from various repositories, be it intricate databases, versatile external APIs, or humble spreadsheets. Your dashboard now thrives with real-time data.ILLA Cloud supports a myriad of data sources to ensure it caters to a wide range of business needs.For example,"}),"\n",(0,i.jsx)(t.p,{children:"Airtable: Known for its spreadsheet-database hybrid functionalities, businesses can leverage Airtable's structured data with ILLA Cloud."}),"\n",(0,i.jsx)(t.p,{children:"Google Sheets: Many organizations use Google Sheets due to its collaboration features. Directly integrate these sheets into your dashboard for an efficient workflow."}),"\n",(0,i.jsx)(t.p,{children:"MySQL & PostgreSQL: These popular relational database management systems hold vast amounts of structured data. ILLA Cloud\u2019s connectors ensure this data can be visualized seamlessly."}),"\n",(0,i.jsx)(t.h3,{id:"step-5-creating-data-automation-workflows",children:"Step 5: Creating Data Automation Workflows"}),"\n",(0,i.jsx)(t.p,{children:"Accuracy is key. With ILLA Cloud's data automation workflows and the robust Event Handler feature, say goodbye to inconsistencies. Set the stage for meticulous data validation, apt transformation, and synchronized updates. The Event Handler acts as an event processing function, allowing you to create dynamic triggering mechanisms in the workflow. Simply put, its logic operates on the principle of 'when something happens, then something else will happen.' This ensures that your dashboard always responds in real-time and reflects the absolute truth.\""}),"\n",(0,i.jsx)(t.p,{children:"This revision emphasizes the importance of the Event Handler within the context of ensuring data accuracy and real-time responsiveness."}),"\n",(0,i.jsx)(t.h3,{id:"step-6-operations-automation",children:"Step 6: Operations Automation"}),"\n",(0,i.jsx)(t.p,{children:"Routine tasks can be automated. Let ILLA Cloud's operation automation features take the helm. Design workflows that are proactive, initiating actions based on set criteria. The result? A reduction in manual tasks and a boost in overall efficiency."}),"\n",(0,i.jsx)(t.h3,{id:"step-7-testing-and-deployment",children:"Step 7: Testing and Deployment"}),"\n",(0,i.jsx)(t.p,{children:"Before you unveil your masterpiece, test it. Use the ILLA Cloud environment to ensure every cog in your dashboard machine runs smoothly. Once you're content with its performance, roll out your dashboard to the desired environment, and let your stakeholders revel in its capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"Building a core app dashboard might seem daunting, but with ILLA Cloud, it's akin to weaving a story\u2014with data as your language. This guide laid down a structured path, taking you from initiation to deployment, ensuring your journey is seamless. The core app dashboard you create with ILLA Cloud won't just be a repository of data; it'll be a hub of insights, driving informed decisions and fostering growth. Dive into the world of ILLA Cloud, and make app development an experience, not just a task."})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},7214:(e,t,a)=>{a.d(t,{Z:()=>r,a:()=>s});var i=a(959);const o={},n=i.createContext(o);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/55813e94.d7e25724.js b/assets/js/55813e94.b9bc3069.js
similarity index 92%
rename from assets/js/55813e94.d7e25724.js
rename to assets/js/55813e94.b9bc3069.js
index 3a1a4f0611..951cbd0d39 100644
--- a/assets/js/55813e94.d7e25724.js
+++ b/assets/js/55813e94.b9bc3069.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8135],{8847:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var n=t(1527),o=t(7214);const a={slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},l=void 0,r={permalink:"/illa-website/blog/postgresql-select",source:"@site/blog/postgresql-select/postgresql-select.md",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",date:"2024-02-21T10:00:00.000Z",formattedDate:"February 21, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"select",permalink:"/illa-website/blog/tags/select"}],readingTime:5.82,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},unlisted:!1,prevItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},nextItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},relatedPosts:[{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",permalink:"/illa-website/blog/postgresql-isnull",formattedDate:"February 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.435,date:"2024-02-04T11:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},i={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL SELECT Syntax",id:"postgresql-select-syntax",level:2},{value:"PostgreSQL SELECT Examples",id:"postgresql-select-examples",level:2},{value:"Query One Column with PostgreSQL SELECT",id:"query-one-column-with-postgresql-select",level:3},{value:"Query Multiple Columns with PostgreSQL SELECT",id:"query-multiple-columns-with-postgresql-select",level:3},{value:"Query All Columns from a Table with PostgreSQL SELECT",id:"query-all-columns-from-a-table-with-postgresql-select",level:3},{value:"Query with Expressions in PostgreSQL SELECT",id:"query-with-expressions-in-postgresql-select",level:3},{value:"Calculate Expressions with PostgreSQL SELECT",id:"calculate-expressions-with-postgresql-select",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const s={code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["This article introduces the basic form of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement in ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", as well as how to use ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from tables."]}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-syntax",children:"PostgreSQL SELECT Syntax"}),"\n",(0,n.jsxs)(s.p,{children:["Let's start with the basic form of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement for retrieving data from a single table."]}),"\n",(0,n.jsxs)(s.p,{children:["The syntax of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is shown below:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n expr_list\nFROM \n table_name\n[other_clauses];\n"})}),"\n",(0,n.jsx)(s.p,{children:"In this syntax:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"SELECT"})," and ",(0,n.jsx)(s.code,{children:"FROM"})," are keywords."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"expr_list"})," is a list of columns or expressions to select. Multiple columns or expressions need to be separated by commas."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"table_name"})," is the data table to query from."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"FROM table_name"})," is optional. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause if you are not querying rows from any table."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"other_clauses"})," are clauses supported by the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The ",(0,n.jsx)(s.code,{children:"SELECT"})," statement supports many clauses including:","\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"DISTINCT"})," operator to select distinct rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"ORDER BY"})," clause to sort rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"WHERE"})," clause to filter rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"LIMIT"})," or ",(0,n.jsx)(s.code,{children:"FETCH"})," clause to select a subset of rows from the table."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"GROUP BY"})," clause to group rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"HAVING"})," clause to filter groups."]}),"\n",(0,n.jsxs)(s.li,{children:["Use joins such as ",(0,n.jsx)(s.code,{children:"INNER JOIN"}),", ",(0,n.jsx)(s.code,{children:"LEFT JOIN"}),", ",(0,n.jsx)(s.code,{children:"FULL OUTER JOIN"}),", ",(0,n.jsx)(s.code,{children:"CROSS JOIN"})," to join with other tables."]}),"\n",(0,n.jsxs)(s.li,{children:["Use ",(0,n.jsx)(s.code,{children:"UNION"}),", ",(0,n.jsx)(s.code,{children:"INTERSECT"})," and ",(0,n.jsx)(s.code,{children:"EXCEPT"})," to perform set operations."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"Note that SQL keywords are case insensitive. However, it is a good coding practice to write SQL keywords in uppercase for better readability of SQL code."}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, we'll focus on the basic usage of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The usage of other related clauses will be covered in subsequent tutorials."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-examples",children:"PostgreSQL SELECT Examples"}),"\n",(0,n.jsxs)(s.p,{children:["Let's look at some examples of using PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements."]}),"\n",(0,n.jsxs)(s.p,{children:["We'll use the ",(0,n.jsx)(s.code,{children:"customer"})," table from the ",(0,n.jsx)(s.code,{children:"PostgreSQL Sakila"})," sample database for the demonstration."]}),"\n",(0,n.jsx)(s.h3,{id:"query-one-column-with-postgresql-select",children:"Query One Column with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement finds all customer first names from the ",(0,n.jsx)(s.code,{children:"customer"})," table:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT first_name FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name\n------------ \nMARY\nPATRICIA\nLINDA\nBARBARA\nELIZABETH\nJENNIFER\nMARIA \nSUSAN\nMARGARET\nDOROTHY\n"})}),"\n",(0,n.jsxs)(s.p,{children:["Note that we added a semicolon (;) at the end of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The semicolon is not part of the SQL statement. It is used to signal the end of the SQL statement to PostgreSQL. Semicolon is also used to separate two SQL statements."]}),"\n",(0,n.jsx)(s.h3,{id:"query-multiple-columns-with-postgresql-select",children:"Query Multiple Columns with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to know the customer's first name, last name, and email, you can specify these column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause as shown in the following query:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name,\n last_name,\n email\nFROM\n customer; \n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name | last_name | email \n------------+-----------+-------------------------------------\nMARY | SMITH | MARY.SMITH@sakilacustomer.org \nPATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org\nLINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org \nBARBARA | JONES | BARBARA.JONES@sakilacustomer.org \nELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org \nJENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org \nMARIA | MILLER | MARIA.MILLER@sakilacustomer.org \nSUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org \nMARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org \nDOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org\n"})}),"\n",(0,n.jsx)(s.h3,{id:"query-all-columns-from-a-table-with-postgresql-select",children:"Query All Columns from a Table with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to find all columns from the ",(0,n.jsx)(s.code,{children:"customer"})," table using the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement, use the following statement:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT * FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" customer_id | store_id | first_name | last_name | email | address_id | activebool | create_date | last_update | active \n-------------+----------+------------+-----------+-------------------------------------+------------+------------+-------------+---------------------+---------\n 1 | 1 | MARY | SMITH | MARY.SMITH@sakilacustomer.org | 5 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 2 | 1 | PATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org | 6 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 3 | 1 | LINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org | 7 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 4 | 2 | BARBARA | JONES | BARBARA.JONES@sakilacustomer.org | 8 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 5 | 1 | ELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org | 9 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 6 | 2 | JENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org | 10 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 7 | 1 | MARIA | MILLER | MARIA.MILLER@sakilacustomer.org | 11 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 8 | 2 | SUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org | 12 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 9 | 2 | MARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org | 13 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 10 | 1 | DOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org | 14 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we used the asterisk (",(0,n.jsxs)(s.em,{children:[") in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause which is shorthand for all columns. The asterisk ("]}),") allows us to type less without having to list out all column names in the ",(0,n.jsx)(s.code,{children:"customer"})," table."]}),"\n",(0,n.jsxs)(s.p,{children:["However, using asterisk (*) in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements is not a good practice for the following reasons:"]}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsxs)(s.p,{children:["Database performance. Assuming you have a table with lots of columns and large amounts of data, a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement with asterisk (*) shorthand will select data from all columns of the table which may not be necessary for the application."]}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Application performance. Retrieving unnecessary data from the database increases traffic between the database server and application server. Hence your application's response time may be slower and less scalable."}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["For these reasons, it is best to explicitly specify column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause to only get required data from the database."]}),"\n",(0,n.jsx)(s.p,{children:"You should only use the asterisk (*) shorthand for adhoc queries that check database data."}),"\n",(0,n.jsx)(s.h3,{id:"query-with-expressions-in-postgresql-select",children:"Query with Expressions in PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["In addition to column names, you can also use expressions in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following example uses a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement to return the full name and email of all customers:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name || ' ' || last_name, \n email\nFROM\n customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" ?column? | email \n-------------------+-------------------------------------\n MARY SMITH | MARY.SMITH@sakilacustomer.org\n PATRICIA JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org \n LINDA WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org\n BARBARA JONES | BARBARA.JONES@sakilacustomer.org\n ELIZABETH BROWN | ELIZABETH.BROWN@sakilacustomer.org\n JENNIFER DAVIS | JENNIFER.DAVIS@sakilacustomer.org\n MARIA MILLER | MARIA.MILLER@sakilacustomer.org\n SUSAN WILSON | SUSAN.WILSON@sakilacustomer.org\n MARGARET MOORE | MARGARET.MOORE@sakilacustomer.org\n DOROTHY TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org \n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we concatenated each customer's first name, space and last name using the string concatenation operator ",(0,n.jsx)(s.code,{children:"||"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"calculate-expressions-with-postgresql-select",children:"Calculate Expressions with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you just want to calculate the result of an expression, you can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to calculate the result of ",(0,n.jsx)(s.code,{children:"5 * 3"}),":"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT 5 * 3;\n"})}),"\n",(0,n.jsx)(s.p,{children:"The output is:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"?column?\n----------\n 15\n"})}),"\n",(0,n.jsx)(s.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, you learned how to use the basic form of PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from a single table. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements if you do not need to query data from any table."]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,s,t)=>{t.d(s,{Z:()=>r,a:()=>l});var n=t(959);const o={},a=n.createContext(o);function l(e){const s=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),n.createElement(a.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8135],{8847:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var n=t(1527),o=t(7214);const a={slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},l=void 0,r={permalink:"/illa-website/blog/postgresql-select",source:"@site/blog/postgresql-select/postgresql-select.md",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",date:"2024-02-21T10:00:00.000Z",formattedDate:"February 21, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"select",permalink:"/illa-website/blog/tags/select"}],readingTime:5.82,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},unlisted:!1,prevItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},nextItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},relatedPosts:[{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",permalink:"/illa-website/blog/postgresql-isnull",formattedDate:"February 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.435,date:"2024-02-04T11:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},i={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL SELECT Syntax",id:"postgresql-select-syntax",level:2},{value:"PostgreSQL SELECT Examples",id:"postgresql-select-examples",level:2},{value:"Query One Column with PostgreSQL SELECT",id:"query-one-column-with-postgresql-select",level:3},{value:"Query Multiple Columns with PostgreSQL SELECT",id:"query-multiple-columns-with-postgresql-select",level:3},{value:"Query All Columns from a Table with PostgreSQL SELECT",id:"query-all-columns-from-a-table-with-postgresql-select",level:3},{value:"Query with Expressions in PostgreSQL SELECT",id:"query-with-expressions-in-postgresql-select",level:3},{value:"Calculate Expressions with PostgreSQL SELECT",id:"calculate-expressions-with-postgresql-select",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const s={code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["This article introduces the basic form of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement in ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", as well as how to use ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from tables."]}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-syntax",children:"PostgreSQL SELECT Syntax"}),"\n",(0,n.jsxs)(s.p,{children:["Let's start with the basic form of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement for retrieving data from a single table."]}),"\n",(0,n.jsxs)(s.p,{children:["The syntax of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is shown below:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n expr_list\nFROM \n table_name\n[other_clauses];\n"})}),"\n",(0,n.jsx)(s.p,{children:"In this syntax:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"SELECT"})," and ",(0,n.jsx)(s.code,{children:"FROM"})," are keywords."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"expr_list"})," is a list of columns or expressions to select. Multiple columns or expressions need to be separated by commas."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"table_name"})," is the data table to query from."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"FROM table_name"})," is optional. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause if you are not querying rows from any table."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"other_clauses"})," are clauses supported by the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The ",(0,n.jsx)(s.code,{children:"SELECT"})," statement supports many clauses including:","\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"DISTINCT"})," operator to select distinct rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"ORDER BY"})," clause to sort rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"WHERE"})," clause to filter rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"LIMIT"})," or ",(0,n.jsx)(s.code,{children:"FETCH"})," clause to select a subset of rows from the table."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"GROUP BY"})," clause to group rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"HAVING"})," clause to filter groups."]}),"\n",(0,n.jsxs)(s.li,{children:["Use joins such as ",(0,n.jsx)(s.code,{children:"INNER JOIN"}),", ",(0,n.jsx)(s.code,{children:"LEFT JOIN"}),", ",(0,n.jsx)(s.code,{children:"FULL OUTER JOIN"}),", ",(0,n.jsx)(s.code,{children:"CROSS JOIN"})," to join with other tables."]}),"\n",(0,n.jsxs)(s.li,{children:["Use ",(0,n.jsx)(s.code,{children:"UNION"}),", ",(0,n.jsx)(s.code,{children:"INTERSECT"})," and ",(0,n.jsx)(s.code,{children:"EXCEPT"})," to perform set operations."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"Note that SQL keywords are case insensitive. However, it is a good coding practice to write SQL keywords in uppercase for better readability of SQL code."}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, we'll focus on the basic usage of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The usage of other related clauses will be covered in subsequent tutorials."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-examples",children:"PostgreSQL SELECT Examples"}),"\n",(0,n.jsxs)(s.p,{children:["Let's look at some examples of using PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements."]}),"\n",(0,n.jsxs)(s.p,{children:["We'll use the ",(0,n.jsx)(s.code,{children:"customer"})," table from the ",(0,n.jsx)(s.code,{children:"PostgreSQL Sakila"})," sample database for the demonstration."]}),"\n",(0,n.jsx)(s.h3,{id:"query-one-column-with-postgresql-select",children:"Query One Column with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement finds all customer first names from the ",(0,n.jsx)(s.code,{children:"customer"})," table:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT first_name FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name\n------------ \nMARY\nPATRICIA\nLINDA\nBARBARA\nELIZABETH\nJENNIFER\nMARIA \nSUSAN\nMARGARET\nDOROTHY\n"})}),"\n",(0,n.jsxs)(s.p,{children:["Note that we added a semicolon (;) at the end of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The semicolon is not part of the SQL statement. It is used to signal the end of the SQL statement to PostgreSQL. Semicolon is also used to separate two SQL statements."]}),"\n",(0,n.jsx)(s.h3,{id:"query-multiple-columns-with-postgresql-select",children:"Query Multiple Columns with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to know the customer's first name, last name, and email, you can specify these column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause as shown in the following query:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name,\n last_name,\n email\nFROM\n customer; \n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name | last_name | email \n------------+-----------+-------------------------------------\nMARY | SMITH | MARY.SMITH@sakilacustomer.org \nPATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org\nLINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org \nBARBARA | JONES | BARBARA.JONES@sakilacustomer.org \nELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org \nJENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org \nMARIA | MILLER | MARIA.MILLER@sakilacustomer.org \nSUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org \nMARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org \nDOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org\n"})}),"\n",(0,n.jsx)(s.h3,{id:"query-all-columns-from-a-table-with-postgresql-select",children:"Query All Columns from a Table with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to find all columns from the ",(0,n.jsx)(s.code,{children:"customer"})," table using the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement, use the following statement:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT * FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" customer_id | store_id | first_name | last_name | email | address_id | activebool | create_date | last_update | active \n-------------+----------+------------+-----------+-------------------------------------+------------+------------+-------------+---------------------+---------\n 1 | 1 | MARY | SMITH | MARY.SMITH@sakilacustomer.org | 5 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 2 | 1 | PATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org | 6 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 3 | 1 | LINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org | 7 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 4 | 2 | BARBARA | JONES | BARBARA.JONES@sakilacustomer.org | 8 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 5 | 1 | ELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org | 9 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 6 | 2 | JENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org | 10 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 7 | 1 | MARIA | MILLER | MARIA.MILLER@sakilacustomer.org | 11 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 8 | 2 | SUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org | 12 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 9 | 2 | MARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org | 13 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 10 | 1 | DOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org | 14 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we used the asterisk (",(0,n.jsxs)(s.em,{children:[") in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause which is shorthand for all columns. The asterisk ("]}),") allows us to type less without having to list out all column names in the ",(0,n.jsx)(s.code,{children:"customer"})," table."]}),"\n",(0,n.jsxs)(s.p,{children:["However, using asterisk (*) in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements is not a good practice for the following reasons:"]}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsxs)(s.p,{children:["Database performance. Assuming you have a table with lots of columns and large amounts of data, a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement with asterisk (*) shorthand will select data from all columns of the table which may not be necessary for the application."]}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Application performance. Retrieving unnecessary data from the database increases traffic between the database server and application server. Hence your application's response time may be slower and less scalable."}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["For these reasons, it is best to explicitly specify column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause to only get required data from the database."]}),"\n",(0,n.jsx)(s.p,{children:"You should only use the asterisk (*) shorthand for adhoc queries that check database data."}),"\n",(0,n.jsx)(s.h3,{id:"query-with-expressions-in-postgresql-select",children:"Query with Expressions in PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["In addition to column names, you can also use expressions in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following example uses a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement to return the full name and email of all customers:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name || ' ' || last_name, \n email\nFROM\n customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" ?column? | email \n-------------------+-------------------------------------\n MARY SMITH | MARY.SMITH@sakilacustomer.org\n PATRICIA JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org \n LINDA WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org\n BARBARA JONES | BARBARA.JONES@sakilacustomer.org\n ELIZABETH BROWN | ELIZABETH.BROWN@sakilacustomer.org\n JENNIFER DAVIS | JENNIFER.DAVIS@sakilacustomer.org\n MARIA MILLER | MARIA.MILLER@sakilacustomer.org\n SUSAN WILSON | SUSAN.WILSON@sakilacustomer.org\n MARGARET MOORE | MARGARET.MOORE@sakilacustomer.org\n DOROTHY TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org \n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we concatenated each customer's first name, space and last name using the string concatenation operator ",(0,n.jsx)(s.code,{children:"||"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"calculate-expressions-with-postgresql-select",children:"Calculate Expressions with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you just want to calculate the result of an expression, you can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to calculate the result of ",(0,n.jsx)(s.code,{children:"5 * 3"}),":"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT 5 * 3;\n"})}),"\n",(0,n.jsx)(s.p,{children:"The output is:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"?column?\n----------\n 15\n"})}),"\n",(0,n.jsx)(s.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, you learned how to use the basic form of PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from a single table. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements if you do not need to query data from any table."]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,s,t)=>{t.d(s,{Z:()=>r,a:()=>l});var n=t(959);const o={},a=n.createContext(o);function l(e){const s=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),n.createElement(a.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5cd65baf.3671c00e.js b/assets/js/5cd65baf.3671c00e.js
new file mode 100644
index 0000000000..7bf219cebd
--- /dev/null
+++ b/assets/js/5cd65baf.3671c00e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9239],{9590:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var i=o(1527),n=o(7214);const a={slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},s=void 0,l={permalink:"/illa-website/blog/lowcode-vs-traditional",source:"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"traditional development",permalink:"/illa-website/blog/tags/traditional-development"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.33,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},nextItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},relatedPosts:[{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"When Launching a Transient Business Initiative",id:"when-launching-a-transient-business-initiative",level:2},{value:"Addressing User-Facing Components: Webflow",id:"addressing-user-facing-components-webflow",level:3},{value:"Managing Business Operations: ILLA Cloud",id:"managing-business-operations-illa-cloud",level:3},{value:"When Initiating a Novel Business Venture",id:"when-initiating-a-novel-business-venture",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios. This has alleviated the need to initiate projects from scratch, saving considerable time for more pivotal business endeavors. However, it's crucial to recognize that while low code accelerates development, it does so at the expense of some flexibility. As a result, not all solutions are well-suited for low-code development. Let's delve deeper into the analysis of scenarios that favor low-code tools versus those where traditional code development remains more appropriate. Throughout this exploration, the key comparison of low code versus traditional development remains paramount, emphasizing the critical importance of choosing the most efficient approach."}),"\n",(0,i.jsx)(t.h2,{id:"when-launching-a-transient-business-initiative",children:"When Launching a Transient Business Initiative"}),"\n",(0,i.jsx)(t.p,{children:"In the dynamic landscape of frequent holidays and special occasions, creating distinct online experiences becomes imperative. Each company may have its unique marketing days, requiring engaging activities. Crafting these online marketing campaigns inevitably poses a development challenge, necessitating substantial resource allocation. While the need for visually captivating designs is evident, the overall complexity may not justify significant development costs, especially when the lifecycle is limited to 1-2 weeks. In such cases, opting for low-code tools emerges as a financially prudent decision. Here, we advocate for a specific low-code solution."}),"\n",(0,i.jsx)(t.h3,{id:"addressing-user-facing-components-webflow",children:"Addressing User-Facing Components: Webflow"}),"\n",(0,i.jsx)(t.p,{children:"Webflow, with its intuitive drag-and-drop interface and designer-friendly adjustments, facilitates the creation of visually stunning landing pages. This approach allows users to interact with an aesthetically pleasing website, and remarkably, only requires the expertise of a single designer. Furthermore, Webflow offers an array of templates that can be easily customized, enabling the swift construction of an exquisite website."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/webflow.png",alt:"webflow"})}),"\n",(0,i.jsx)(t.h3,{id:"managing-business-operations-illa-cloud",children:"Managing Business Operations: ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Regardless of the frontend technology used, an effective management tool is indispensable for overseeing business operations."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://illacloud.com",children:"ILLA Cloud"}),", as an out-of-the-box low-code tool, empowers developers to rapidly construct internal tools using straightforward JavaScript, eliminating the need to create new projects."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(t.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(t.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Compared to scenarios relying on component libraries, ILLA Cloud boasts a 10x faster construction speed for the aforementioned tools. Additionally, ILLA Cloud supports collaborative editing among multiple team members, fostering efficient teamwork."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.p,{children:"The synergy of these two tools expedites the creation of business requirements in marketing scenarios. This synergistic approach minimizes the need for extensive development resources while addressing the demand for quick response and deployment. Consequently, it propels the business iteration speed to new heights."}),"\n",(0,i.jsx)(t.h2,{id:"when-initiating-a-novel-business-venture",children:"When Initiating a Novel Business Venture"}),"\n",(0,i.jsx)(t.p,{children:"The commencement of a project necessitates a thorough evaluation of its characteristics. For comprehensive toC products such as social platforms, gaming applications, or IM services, the recommendation leans towards traditional development methodologies. This ensures a high degree of flexibility in adapting to evolving requirements."}),"\n",(0,i.jsx)(t.p,{children:"For ventures centered around retail or services, the utilization of Shopify for frontend presentation proves advantageous. This choice guarantees widespread distribution of products while curbing development costs. Furthermore, Shopify supports customization, catering to diverse business needs effectively."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/shopify.png",alt:"shopify"})}),"\n",(0,i.jsx)(t.p,{children:"In instances where a swift development of an app or website is paramount, direct coding may offer a faster solution. Therefore, the selection of an appropriate solution heavily relies on the unique attributes of the scenario."}),"\n",(0,i.jsx)(t.p,{children:"If the backend functionality of Shopify falls short of requirements, the integration of ILLA Cloud can bridge the gap, providing a platform for customized management."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"In the decision-making process for selecting development tools, a multifaceted approach is recommended. While direct coding provides unparalleled flexibility, it does come at the cost of development speed. The strategic integration of low-code tools and SaaS solutions can yield substantial gains in productivity."}),"\n",(0,i.jsx)(t.p,{children:"For operations demanding flexibility and essential to the core business, traditional development methods remain the preferred choice. The agility and control afforded by traditional development methods result in products that are highly tailored to specific needs."}),"\n",(0,i.jsx)(t.p,{children:"Ultimately, there is no one-size-fits-all solution; the best choice is the one that aligns most closely with the unique requirements of the scenario at hand."})]})}function h(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>s});var i=o(959);const n={},a=i.createContext(n);function s(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5cd65baf.d6f234dc.js b/assets/js/5cd65baf.d6f234dc.js
deleted file mode 100644
index 0975842edd..0000000000
--- a/assets/js/5cd65baf.d6f234dc.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9239],{9590:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var i=o(1527),n=o(7214);const a={slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},s=void 0,l={permalink:"/illa-website/blog/lowcode-vs-traditional",source:"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"traditional development",permalink:"/illa-website/blog/tags/traditional-development"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.33,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},nextItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},relatedPosts:[{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"5 Best Low Code Platform in 2024",description:"As the software industry evolves, low-code tools are increasingly gaining popularity. Implementing the right low-code tools",permalink:"/illa-website/blog/best-low-code-platform",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.665,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"When Launching a Transient Business Initiative",id:"when-launching-a-transient-business-initiative",level:2},{value:"Addressing User-Facing Components: Webflow",id:"addressing-user-facing-components-webflow",level:3},{value:"Managing Business Operations: ILLA Cloud",id:"managing-business-operations-illa-cloud",level:3},{value:"When Initiating a Novel Business Venture",id:"when-initiating-a-novel-business-venture",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios. This has alleviated the need to initiate projects from scratch, saving considerable time for more pivotal business endeavors. However, it's crucial to recognize that while low code accelerates development, it does so at the expense of some flexibility. As a result, not all solutions are well-suited for low-code development. Let's delve deeper into the analysis of scenarios that favor low-code tools versus those where traditional code development remains more appropriate. Throughout this exploration, the key comparison of low code versus traditional development remains paramount, emphasizing the critical importance of choosing the most efficient approach."}),"\n",(0,i.jsx)(t.h2,{id:"when-launching-a-transient-business-initiative",children:"When Launching a Transient Business Initiative"}),"\n",(0,i.jsx)(t.p,{children:"In the dynamic landscape of frequent holidays and special occasions, creating distinct online experiences becomes imperative. Each company may have its unique marketing days, requiring engaging activities. Crafting these online marketing campaigns inevitably poses a development challenge, necessitating substantial resource allocation. While the need for visually captivating designs is evident, the overall complexity may not justify significant development costs, especially when the lifecycle is limited to 1-2 weeks. In such cases, opting for low-code tools emerges as a financially prudent decision. Here, we advocate for a specific low-code solution."}),"\n",(0,i.jsx)(t.h3,{id:"addressing-user-facing-components-webflow",children:"Addressing User-Facing Components: Webflow"}),"\n",(0,i.jsx)(t.p,{children:"Webflow, with its intuitive drag-and-drop interface and designer-friendly adjustments, facilitates the creation of visually stunning landing pages. This approach allows users to interact with an aesthetically pleasing website, and remarkably, only requires the expertise of a single designer. Furthermore, Webflow offers an array of templates that can be easily customized, enabling the swift construction of an exquisite website."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/webflow.png",alt:"webflow"})}),"\n",(0,i.jsx)(t.h3,{id:"managing-business-operations-illa-cloud",children:"Managing Business Operations: ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Regardless of the frontend technology used, an effective management tool is indispensable for overseeing business operations."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://illacloud.com",children:"ILLA Cloud"}),", as an out-of-the-box low-code tool, empowers developers to rapidly construct internal tools using straightforward JavaScript, eliminating the need to create new projects."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(t.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(t.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Compared to scenarios relying on component libraries, ILLA Cloud boasts a 10x faster construction speed for the aforementioned tools. Additionally, ILLA Cloud supports collaborative editing among multiple team members, fostering efficient teamwork."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.p,{children:"The synergy of these two tools expedites the creation of business requirements in marketing scenarios. This synergistic approach minimizes the need for extensive development resources while addressing the demand for quick response and deployment. Consequently, it propels the business iteration speed to new heights."}),"\n",(0,i.jsx)(t.h2,{id:"when-initiating-a-novel-business-venture",children:"When Initiating a Novel Business Venture"}),"\n",(0,i.jsx)(t.p,{children:"The commencement of a project necessitates a thorough evaluation of its characteristics. For comprehensive toC products such as social platforms, gaming applications, or IM services, the recommendation leans towards traditional development methodologies. This ensures a high degree of flexibility in adapting to evolving requirements."}),"\n",(0,i.jsx)(t.p,{children:"For ventures centered around retail or services, the utilization of Shopify for frontend presentation proves advantageous. This choice guarantees widespread distribution of products while curbing development costs. Furthermore, Shopify supports customization, catering to diverse business needs effectively."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/shopify.png",alt:"shopify"})}),"\n",(0,i.jsx)(t.p,{children:"In instances where a swift development of an app or website is paramount, direct coding may offer a faster solution. Therefore, the selection of an appropriate solution heavily relies on the unique attributes of the scenario."}),"\n",(0,i.jsx)(t.p,{children:"If the backend functionality of Shopify falls short of requirements, the integration of ILLA Cloud can bridge the gap, providing a platform for customized management."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"In the decision-making process for selecting development tools, a multifaceted approach is recommended. While direct coding provides unparalleled flexibility, it does come at the cost of development speed. The strategic integration of low-code tools and SaaS solutions can yield substantial gains in productivity."}),"\n",(0,i.jsx)(t.p,{children:"For operations demanding flexibility and essential to the core business, traditional development methods remain the preferred choice. The agility and control afforded by traditional development methods result in products that are highly tailored to specific needs."}),"\n",(0,i.jsx)(t.p,{children:"Ultimately, there is no one-size-fits-all solution; the best choice is the one that aligns most closely with the unique requirements of the scenario at hand."})]})}function h(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>s});var i=o(959);const n={},a=i.createContext(n);function s(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5f78ec6a.50792b17.js b/assets/js/5f78ec6a.50792b17.js
new file mode 100644
index 0000000000..b07a4c1ce3
--- /dev/null
+++ b/assets/js/5f78ec6a.50792b17.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3096],{2369:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=t(1527),o=t(7214);const i={slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},l=void 0,a={permalink:"/illa-website/blog/nvm-use-2024",source:"@site/blog/nvm-use/nvm-use.md",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:4.035,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},nextItem:{title:"2024 has arrived, should I choose Shadcn UI?",permalink:"/illa-website/blog/shadcn-ui-2024"},relatedPosts:[{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"Recommending an Open Source Project for Backend Development",id:"recommending-an-open-source-project-for-backend-development",level:2},{value:"Introduction to nvm",id:"introduction-to-nvm",level:2},{value:"Installing nvm",id:"installing-nvm",level:2},{value:"Using nvm",id:"using-nvm",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime." Numerous tool libraries, local package management, mock environments, and more are built on Node.js, making it truly the infrastructure of the frontend world.'}),"\n",(0,s.jsx)(n.p,{children:"The flourishing ecosystem has made it essential for everyone to install Node.js when building frontend projects. However, with the long history of products, versioning becomes a common issue\u2014some projects require new versions, while others need older ones. Managing multiple versions of Node.js has been a persistent challenge for developers."}),"\n",(0,s.jsx)(n.p,{children:"Currently, the open-source tool nvm addresses this issue. With simple command-line usage, developers can quickly switch between different versions of Node.js, allowing them to focus on development rather than wasting time on environment configuration."}),"\n",(0,s.jsx)(n.p,{children:"The predominant machines for frontend development are still Macbooks. Therefore, this article will explain how to elegantly install and use nvm on Mac to efficiently manage Node.js versions."}),"\n",(0,s.jsx)(n.h2,{id:"recommending-an-open-source-project-for-backend-development",children:"Recommending an Open Source Project for Backend Development"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that enables the rapid construction of internal tools using simple JS, without the need to create new projects."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,s.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,s.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Compared to scenarios built with component libraries, ILLA Cloud allows for 10x faster construction of the mentioned tools. Additionally, ILLA Cloud supports collaboration among multiple users, facilitating teamwork for rapid customization of backend capabilities."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/dashboard.png",alt:"dashboard"})}),"\n",(0,s.jsx)(n.h2,{id:"introduction-to-nvm",children:"Introduction to nvm"}),"\n",(0,s.jsxs)(n.p,{children:["\u23ec GitHub Repository: ",(0,s.jsx)(n.a,{href:"https://github.com/nvm-sh/nvm",children:"https://github.com/nvm-sh/nvm"})]}),"\n",(0,s.jsx)(n.p,{children:"\u2b50 GitHub Stars: 72.4k"}),"\n",(0,s.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Dec 22, 2014"}),"\n",(0,s.jsx)(n.p,{children:'nvm is an open-source project that has been maintained for nearly 10 years. Positive reviews have kept this project robust and, through continuous maintenance, it has become a perfect solution for "Node.js version management."'}),"\n",(0,s.jsx)(n.h2,{id:"installing-nvm",children:"Installing nvm"}),"\n",(0,s.jsxs)(n.p,{children:["Since we are using a Mac for development, I strongly recommend using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," for package management and then using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," to install nvm."]}),"\n",(0,s.jsx)(n.p,{children:"To install Homebrew, it is recommended to use the installation script. It requires minimal configuration and allows immediate use. Moreover, Homebrew makes it easy to uninstall repositories cleanly if needed."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:'> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"\n'})}),"\n",(0,s.jsx)(n.p,{children:"Running this command will install the latest version of Homebrew, automatically handling the installation of Xcode Command Tools in the MacOS environment."}),"\n",(0,s.jsx)(n.p,{children:"Of course, all of this is automated. Below is an installation process example."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/homebrew-install.png",alt:"homebrew_install"})}),"\n",(0,s.jsx)(n.p,{children:"After a short wait, we can proceed with the installation of nvm using the installed Homebrew."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> brew install nvm\n"})}),"\n",(0,s.jsx)(n.p,{children:"After confirming agreement, nvm will be completely installed. If you decide you don't want it anymore, you can use the following command to uninstall:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"# delete nvm if you don't need it.\n> brew uninstall nvm\n"})}),"\n",(0,s.jsx)(n.h2,{id:"using-nvm",children:"Using nvm"}),"\n",(0,s.jsx)(n.p,{children:"Once nvm is installed, here are some commonly used commands to help you get started. These commands should fulfill your daily needs."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm list\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "list" command displays various mainstream Node.js versions. You can install versions according to your needs, and it will also show the currently used Node.js version on your machine. It will display some codenames.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-list.png",alt:"nvm_list"})}),"\n",(0,s.jsx)(n.p,{children:'For example, "lts/gallim" is the version name for Node.js v16. To install using this codename, nvm will automatically install the latest version of v16. It\'s quite convenient. You can also use this command to check the currently used version.'}),"\n",(0,s.jsx)(n.p,{children:"Another command allows you to check the current Node.js version:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> node --version\n"})}),"\n",(0,s.jsx)(n.p,{children:"After entering this command, you can verify whether the Node.js version has been successfully switched."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm install stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The second command installs a specific Node.js version; "stable" refers to a specific version number. You can also use the codename for a particular version. For example, to install "Node.js 18," you would use "nvm install 18." Here, I\'m installing the "stable" version. nvm will automatically determine the latest Stable version and install it for me. After successful installation, it will automatically switch to the installed version.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/stable-install.png",alt:"stable-install"})}),"\n",(0,s.jsx)(n.p,{children:"Where there's an installation command, there's also an uninstallation command. Use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm uninstall stable\n"})}),"\n",(0,s.jsx)(n.p,{children:"To delete the corresponding version."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-uninstall.png",alt:"nvm-uninstall"})}),"\n",(0,s.jsx)(n.p,{children:"Once you've learned how to install and uninstall, the next important step is version switching."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm use stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "use" command allows you to quickly switch between Node.js versions currently in use. You can also use the "stable" codename. This way, you can quickly switch between versions for different projects.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-use.png",alt:"nvm-use"})}),"\n",(0,s.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(n.p,{children:"This article has explained the entire process for a beginner, from installing to using nvm. You can quickly try it out and better manage your Node.js versions."}),"\n",(0,s.jsx)(n.p,{children:"Node.js version management is a long-discussed issue, and nvm is an excellent open-source project that effectively addresses this problem. Of course, no project is perfect. If you have other recommendations, feel free to leave a comment and let more people know about outstanding projects\u2014that's the mission of open-source enthusiasts!"})]})}function m(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>l});var s=t(959);const o={},i=s.createContext(o);function l(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5f78ec6a.daf9b18d.js b/assets/js/5f78ec6a.daf9b18d.js
deleted file mode 100644
index 71d2210a71..0000000000
--- a/assets/js/5f78ec6a.daf9b18d.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3096],{2369:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=t(1527),o=t(7214);const i={slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},l=void 0,a={permalink:"/illa-website/blog/nvm-use-2024",source:"@site/blog/nvm-use/nvm-use.md",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:4.035,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},nextItem:{title:"2024 has arrived, should I choose Shadcn UI?",permalink:"/illa-website/blog/shadcn-ui-2024"},relatedPosts:[{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"},{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"Recommending an Open Source Project for Backend Development",id:"recommending-an-open-source-project-for-backend-development",level:2},{value:"Introduction to nvm",id:"introduction-to-nvm",level:2},{value:"Installing nvm",id:"installing-nvm",level:2},{value:"Using nvm",id:"using-nvm",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime." Numerous tool libraries, local package management, mock environments, and more are built on Node.js, making it truly the infrastructure of the frontend world.'}),"\n",(0,s.jsx)(n.p,{children:"The flourishing ecosystem has made it essential for everyone to install Node.js when building frontend projects. However, with the long history of products, versioning becomes a common issue\u2014some projects require new versions, while others need older ones. Managing multiple versions of Node.js has been a persistent challenge for developers."}),"\n",(0,s.jsx)(n.p,{children:"Currently, the open-source tool nvm addresses this issue. With simple command-line usage, developers can quickly switch between different versions of Node.js, allowing them to focus on development rather than wasting time on environment configuration."}),"\n",(0,s.jsx)(n.p,{children:"The predominant machines for frontend development are still Macbooks. Therefore, this article will explain how to elegantly install and use nvm on Mac to efficiently manage Node.js versions."}),"\n",(0,s.jsx)(n.h2,{id:"recommending-an-open-source-project-for-backend-development",children:"Recommending an Open Source Project for Backend Development"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that enables the rapid construction of internal tools using simple JS, without the need to create new projects."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,s.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,s.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Compared to scenarios built with component libraries, ILLA Cloud allows for 10x faster construction of the mentioned tools. Additionally, ILLA Cloud supports collaboration among multiple users, facilitating teamwork for rapid customization of backend capabilities."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/dashboard.png",alt:"dashboard"})}),"\n",(0,s.jsx)(n.h2,{id:"introduction-to-nvm",children:"Introduction to nvm"}),"\n",(0,s.jsxs)(n.p,{children:["\u23ec GitHub Repository: ",(0,s.jsx)(n.a,{href:"https://github.com/nvm-sh/nvm",children:"https://github.com/nvm-sh/nvm"})]}),"\n",(0,s.jsx)(n.p,{children:"\u2b50 GitHub Stars: 72.4k"}),"\n",(0,s.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Dec 22, 2014"}),"\n",(0,s.jsx)(n.p,{children:'nvm is an open-source project that has been maintained for nearly 10 years. Positive reviews have kept this project robust and, through continuous maintenance, it has become a perfect solution for "Node.js version management."'}),"\n",(0,s.jsx)(n.h2,{id:"installing-nvm",children:"Installing nvm"}),"\n",(0,s.jsxs)(n.p,{children:["Since we are using a Mac for development, I strongly recommend using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," for package management and then using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," to install nvm."]}),"\n",(0,s.jsx)(n.p,{children:"To install Homebrew, it is recommended to use the installation script. It requires minimal configuration and allows immediate use. Moreover, Homebrew makes it easy to uninstall repositories cleanly if needed."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:'> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"\n'})}),"\n",(0,s.jsx)(n.p,{children:"Running this command will install the latest version of Homebrew, automatically handling the installation of Xcode Command Tools in the MacOS environment."}),"\n",(0,s.jsx)(n.p,{children:"Of course, all of this is automated. Below is an installation process example."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/homebrew-install.png",alt:"homebrew_install"})}),"\n",(0,s.jsx)(n.p,{children:"After a short wait, we can proceed with the installation of nvm using the installed Homebrew."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> brew install nvm\n"})}),"\n",(0,s.jsx)(n.p,{children:"After confirming agreement, nvm will be completely installed. If you decide you don't want it anymore, you can use the following command to uninstall:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"# delete nvm if you don't need it.\n> brew uninstall nvm\n"})}),"\n",(0,s.jsx)(n.h2,{id:"using-nvm",children:"Using nvm"}),"\n",(0,s.jsx)(n.p,{children:"Once nvm is installed, here are some commonly used commands to help you get started. These commands should fulfill your daily needs."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm list\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "list" command displays various mainstream Node.js versions. You can install versions according to your needs, and it will also show the currently used Node.js version on your machine. It will display some codenames.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-list.png",alt:"nvm_list"})}),"\n",(0,s.jsx)(n.p,{children:'For example, "lts/gallim" is the version name for Node.js v16. To install using this codename, nvm will automatically install the latest version of v16. It\'s quite convenient. You can also use this command to check the currently used version.'}),"\n",(0,s.jsx)(n.p,{children:"Another command allows you to check the current Node.js version:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> node --version\n"})}),"\n",(0,s.jsx)(n.p,{children:"After entering this command, you can verify whether the Node.js version has been successfully switched."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm install stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The second command installs a specific Node.js version; "stable" refers to a specific version number. You can also use the codename for a particular version. For example, to install "Node.js 18," you would use "nvm install 18." Here, I\'m installing the "stable" version. nvm will automatically determine the latest Stable version and install it for me. After successful installation, it will automatically switch to the installed version.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/stable-install.png",alt:"stable-install"})}),"\n",(0,s.jsx)(n.p,{children:"Where there's an installation command, there's also an uninstallation command. Use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm uninstall stable\n"})}),"\n",(0,s.jsx)(n.p,{children:"To delete the corresponding version."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-uninstall.png",alt:"nvm-uninstall"})}),"\n",(0,s.jsx)(n.p,{children:"Once you've learned how to install and uninstall, the next important step is version switching."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm use stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "use" command allows you to quickly switch between Node.js versions currently in use. You can also use the "stable" codename. This way, you can quickly switch between versions for different projects.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-use.png",alt:"nvm-use"})}),"\n",(0,s.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(n.p,{children:"This article has explained the entire process for a beginner, from installing to using nvm. You can quickly try it out and better manage your Node.js versions."}),"\n",(0,s.jsx)(n.p,{children:"Node.js version management is a long-discussed issue, and nvm is an excellent open-source project that effectively addresses this problem. Of course, no project is perfect. If you have other recommendations, feel free to leave a comment and let more people know about outstanding projects\u2014that's the mission of open-source enthusiasts!"})]})}function m(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>l});var s=t(959);const o={},i=s.createContext(o);function l(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/6d69edbe.b13f68e3.js b/assets/js/6d69edbe.b13f68e3.js
deleted file mode 100644
index a5865f5e39..0000000000
--- a/assets/js/6d69edbe.b13f68e3.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8876],{5391:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=t(1527),o=t(7214);const i={slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},l=void 0,a={permalink:"/illa-website/blog/nvm-use-2024",source:"@site/blog/nvm-use/nvm-use.md",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:4.035,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},nextItem:{title:"2024 has arrived, should I choose Shadcn UI?",permalink:"/illa-website/blog/shadcn-ui-2024"},relatedPosts:[{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"},{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"Recommending an Open Source Project for Backend Development",id:"recommending-an-open-source-project-for-backend-development",level:2},{value:"Introduction to nvm",id:"introduction-to-nvm",level:2},{value:"Installing nvm",id:"installing-nvm",level:2},{value:"Using nvm",id:"using-nvm",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime." Numerous tool libraries, local package management, mock environments, and more are built on Node.js, making it truly the infrastructure of the frontend world.'}),"\n",(0,s.jsx)(n.p,{children:"The flourishing ecosystem has made it essential for everyone to install Node.js when building frontend projects. However, with the long history of products, versioning becomes a common issue\u2014some projects require new versions, while others need older ones. Managing multiple versions of Node.js has been a persistent challenge for developers."}),"\n",(0,s.jsx)(n.p,{children:"Currently, the open-source tool nvm addresses this issue. With simple command-line usage, developers can quickly switch between different versions of Node.js, allowing them to focus on development rather than wasting time on environment configuration."}),"\n",(0,s.jsx)(n.p,{children:"The predominant machines for frontend development are still Macbooks. Therefore, this article will explain how to elegantly install and use nvm on Mac to efficiently manage Node.js versions."}),"\n",(0,s.jsx)(n.h2,{id:"recommending-an-open-source-project-for-backend-development",children:"Recommending an Open Source Project for Backend Development"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that enables the rapid construction of internal tools using simple JS, without the need to create new projects."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,s.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,s.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Compared to scenarios built with component libraries, ILLA Cloud allows for 10x faster construction of the mentioned tools. Additionally, ILLA Cloud supports collaboration among multiple users, facilitating teamwork for rapid customization of backend capabilities."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/dashboard.png",alt:"dashboard"})}),"\n",(0,s.jsx)(n.h2,{id:"introduction-to-nvm",children:"Introduction to nvm"}),"\n",(0,s.jsxs)(n.p,{children:["\u23ec GitHub Repository: ",(0,s.jsx)(n.a,{href:"https://github.com/nvm-sh/nvm",children:"https://github.com/nvm-sh/nvm"})]}),"\n",(0,s.jsx)(n.p,{children:"\u2b50 GitHub Stars: 72.4k"}),"\n",(0,s.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Dec 22, 2014"}),"\n",(0,s.jsx)(n.p,{children:'nvm is an open-source project that has been maintained for nearly 10 years. Positive reviews have kept this project robust and, through continuous maintenance, it has become a perfect solution for "Node.js version management."'}),"\n",(0,s.jsx)(n.h2,{id:"installing-nvm",children:"Installing nvm"}),"\n",(0,s.jsxs)(n.p,{children:["Since we are using a Mac for development, I strongly recommend using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," for package management and then using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," to install nvm."]}),"\n",(0,s.jsx)(n.p,{children:"To install Homebrew, it is recommended to use the installation script. It requires minimal configuration and allows immediate use. Moreover, Homebrew makes it easy to uninstall repositories cleanly if needed."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:'> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"\n'})}),"\n",(0,s.jsx)(n.p,{children:"Running this command will install the latest version of Homebrew, automatically handling the installation of Xcode Command Tools in the MacOS environment."}),"\n",(0,s.jsx)(n.p,{children:"Of course, all of this is automated. Below is an installation process example."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/homebrew-install.png",alt:"homebrew_install"})}),"\n",(0,s.jsx)(n.p,{children:"After a short wait, we can proceed with the installation of nvm using the installed Homebrew."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> brew install nvm\n"})}),"\n",(0,s.jsx)(n.p,{children:"After confirming agreement, nvm will be completely installed. If you decide you don't want it anymore, you can use the following command to uninstall:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"# delete nvm if you don't need it.\n> brew uninstall nvm\n"})}),"\n",(0,s.jsx)(n.h2,{id:"using-nvm",children:"Using nvm"}),"\n",(0,s.jsx)(n.p,{children:"Once nvm is installed, here are some commonly used commands to help you get started. These commands should fulfill your daily needs."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm list\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "list" command displays various mainstream Node.js versions. You can install versions according to your needs, and it will also show the currently used Node.js version on your machine. It will display some codenames.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-list.png",alt:"nvm_list"})}),"\n",(0,s.jsx)(n.p,{children:'For example, "lts/gallim" is the version name for Node.js v16. To install using this codename, nvm will automatically install the latest version of v16. It\'s quite convenient. You can also use this command to check the currently used version.'}),"\n",(0,s.jsx)(n.p,{children:"Another command allows you to check the current Node.js version:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> node --version\n"})}),"\n",(0,s.jsx)(n.p,{children:"After entering this command, you can verify whether the Node.js version has been successfully switched."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm install stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The second command installs a specific Node.js version; "stable" refers to a specific version number. You can also use the codename for a particular version. For example, to install "Node.js 18," you would use "nvm install 18." Here, I\'m installing the "stable" version. nvm will automatically determine the latest Stable version and install it for me. After successful installation, it will automatically switch to the installed version.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/stable-install.png",alt:"stable-install"})}),"\n",(0,s.jsx)(n.p,{children:"Where there's an installation command, there's also an uninstallation command. Use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm uninstall stable\n"})}),"\n",(0,s.jsx)(n.p,{children:"To delete the corresponding version."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-uninstall.png",alt:"nvm-uninstall"})}),"\n",(0,s.jsx)(n.p,{children:"Once you've learned how to install and uninstall, the next important step is version switching."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm use stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "use" command allows you to quickly switch between Node.js versions currently in use. You can also use the "stable" codename. This way, you can quickly switch between versions for different projects.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-use.png",alt:"nvm-use"})}),"\n",(0,s.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(n.p,{children:"This article has explained the entire process for a beginner, from installing to using nvm. You can quickly try it out and better manage your Node.js versions."}),"\n",(0,s.jsx)(n.p,{children:"Node.js version management is a long-discussed issue, and nvm is an excellent open-source project that effectively addresses this problem. Of course, no project is perfect. If you have other recommendations, feel free to leave a comment and let more people know about outstanding projects\u2014that's the mission of open-source enthusiasts!"})]})}function m(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>l});var s=t(959);const o={},i=s.createContext(o);function l(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/6d69edbe.fbf2d1bd.js b/assets/js/6d69edbe.fbf2d1bd.js
new file mode 100644
index 0000000000..09a1edbe90
--- /dev/null
+++ b/assets/js/6d69edbe.fbf2d1bd.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8876],{5391:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=t(1527),o=t(7214);const i={slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},l=void 0,a={permalink:"/illa-website/blog/nvm-use-2024",source:"@site/blog/nvm-use/nvm-use.md",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:4.035,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"nvm-use-2024",title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/nvm-use/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},nextItem:{title:"2024 has arrived, should I choose Shadcn UI?",permalink:"/illa-website/blog/shadcn-ui-2024"},relatedPosts:[{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"Recommending an Open Source Project for Backend Development",id:"recommending-an-open-source-project-for-backend-development",level:2},{value:"Introduction to nvm",id:"introduction-to-nvm",level:2},{value:"Installing nvm",id:"installing-nvm",level:2},{value:"Using nvm",id:"using-nvm",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime." Numerous tool libraries, local package management, mock environments, and more are built on Node.js, making it truly the infrastructure of the frontend world.'}),"\n",(0,s.jsx)(n.p,{children:"The flourishing ecosystem has made it essential for everyone to install Node.js when building frontend projects. However, with the long history of products, versioning becomes a common issue\u2014some projects require new versions, while others need older ones. Managing multiple versions of Node.js has been a persistent challenge for developers."}),"\n",(0,s.jsx)(n.p,{children:"Currently, the open-source tool nvm addresses this issue. With simple command-line usage, developers can quickly switch between different versions of Node.js, allowing them to focus on development rather than wasting time on environment configuration."}),"\n",(0,s.jsx)(n.p,{children:"The predominant machines for frontend development are still Macbooks. Therefore, this article will explain how to elegantly install and use nvm on Mac to efficiently manage Node.js versions."}),"\n",(0,s.jsx)(n.h2,{id:"recommending-an-open-source-project-for-backend-development",children:"Recommending an Open Source Project for Backend Development"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that enables the rapid construction of internal tools using simple JS, without the need to create new projects."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,s.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,s.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Compared to scenarios built with component libraries, ILLA Cloud allows for 10x faster construction of the mentioned tools. Additionally, ILLA Cloud supports collaboration among multiple users, facilitating teamwork for rapid customization of backend capabilities."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/dashboard.png",alt:"dashboard"})}),"\n",(0,s.jsx)(n.h2,{id:"introduction-to-nvm",children:"Introduction to nvm"}),"\n",(0,s.jsxs)(n.p,{children:["\u23ec GitHub Repository: ",(0,s.jsx)(n.a,{href:"https://github.com/nvm-sh/nvm",children:"https://github.com/nvm-sh/nvm"})]}),"\n",(0,s.jsx)(n.p,{children:"\u2b50 GitHub Stars: 72.4k"}),"\n",(0,s.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Dec 22, 2014"}),"\n",(0,s.jsx)(n.p,{children:'nvm is an open-source project that has been maintained for nearly 10 years. Positive reviews have kept this project robust and, through continuous maintenance, it has become a perfect solution for "Node.js version management."'}),"\n",(0,s.jsx)(n.h2,{id:"installing-nvm",children:"Installing nvm"}),"\n",(0,s.jsxs)(n.p,{children:["Since we are using a Mac for development, I strongly recommend using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," for package management and then using ",(0,s.jsx)(n.a,{href:"https://brew.sh",children:"Homebrew"})," to install nvm."]}),"\n",(0,s.jsx)(n.p,{children:"To install Homebrew, it is recommended to use the installation script. It requires minimal configuration and allows immediate use. Moreover, Homebrew makes it easy to uninstall repositories cleanly if needed."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:'> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"\n'})}),"\n",(0,s.jsx)(n.p,{children:"Running this command will install the latest version of Homebrew, automatically handling the installation of Xcode Command Tools in the MacOS environment."}),"\n",(0,s.jsx)(n.p,{children:"Of course, all of this is automated. Below is an installation process example."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/homebrew-install.png",alt:"homebrew_install"})}),"\n",(0,s.jsx)(n.p,{children:"After a short wait, we can proceed with the installation of nvm using the installed Homebrew."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> brew install nvm\n"})}),"\n",(0,s.jsx)(n.p,{children:"After confirming agreement, nvm will be completely installed. If you decide you don't want it anymore, you can use the following command to uninstall:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"# delete nvm if you don't need it.\n> brew uninstall nvm\n"})}),"\n",(0,s.jsx)(n.h2,{id:"using-nvm",children:"Using nvm"}),"\n",(0,s.jsx)(n.p,{children:"Once nvm is installed, here are some commonly used commands to help you get started. These commands should fulfill your daily needs."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm list\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "list" command displays various mainstream Node.js versions. You can install versions according to your needs, and it will also show the currently used Node.js version on your machine. It will display some codenames.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-list.png",alt:"nvm_list"})}),"\n",(0,s.jsx)(n.p,{children:'For example, "lts/gallim" is the version name for Node.js v16. To install using this codename, nvm will automatically install the latest version of v16. It\'s quite convenient. You can also use this command to check the currently used version.'}),"\n",(0,s.jsx)(n.p,{children:"Another command allows you to check the current Node.js version:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> node --version\n"})}),"\n",(0,s.jsx)(n.p,{children:"After entering this command, you can verify whether the Node.js version has been successfully switched."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm install stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The second command installs a specific Node.js version; "stable" refers to a specific version number. You can also use the codename for a particular version. For example, to install "Node.js 18," you would use "nvm install 18." Here, I\'m installing the "stable" version. nvm will automatically determine the latest Stable version and install it for me. After successful installation, it will automatically switch to the installed version.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/stable-install.png",alt:"stable-install"})}),"\n",(0,s.jsx)(n.p,{children:"Where there's an installation command, there's also an uninstallation command. Use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm uninstall stable\n"})}),"\n",(0,s.jsx)(n.p,{children:"To delete the corresponding version."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-uninstall.png",alt:"nvm-uninstall"})}),"\n",(0,s.jsx)(n.p,{children:"Once you've learned how to install and uninstall, the next important step is version switching."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"> nvm use stable\n"})}),"\n",(0,s.jsx)(n.p,{children:'The "use" command allows you to quickly switch between Node.js versions currently in use. You can also use the "stable" codename. This way, you can quickly switch between versions for different projects.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/nvm-use/nvm-use.png",alt:"nvm-use"})}),"\n",(0,s.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(n.p,{children:"This article has explained the entire process for a beginner, from installing to using nvm. You can quickly try it out and better manage your Node.js versions."}),"\n",(0,s.jsx)(n.p,{children:"Node.js version management is a long-discussed issue, and nvm is an excellent open-source project that effectively addresses this problem. Of course, no project is perfect. If you have other recommendations, feel free to leave a comment and let more people know about outstanding projects\u2014that's the mission of open-source enthusiasts!"})]})}function m(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>l});var s=t(959);const o={},i=s.createContext(o);function l(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/72d3bf7a.89357e38.js b/assets/js/72d3bf7a.89357e38.js
new file mode 100644
index 0000000000..768ece537d
--- /dev/null
+++ b/assets/js/72d3bf7a.89357e38.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[4808],{2685:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var i=o(1527),n=o(7214);const a={slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},s=void 0,l={permalink:"/illa-website/blog/lowcode-vs-traditional",source:"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"traditional development",permalink:"/illa-website/blog/tags/traditional-development"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.33,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},nextItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},relatedPosts:[{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"When Launching a Transient Business Initiative",id:"when-launching-a-transient-business-initiative",level:2},{value:"Addressing User-Facing Components: Webflow",id:"addressing-user-facing-components-webflow",level:3},{value:"Managing Business Operations: ILLA Cloud",id:"managing-business-operations-illa-cloud",level:3},{value:"When Initiating a Novel Business Venture",id:"when-initiating-a-novel-business-venture",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios. This has alleviated the need to initiate projects from scratch, saving considerable time for more pivotal business endeavors. However, it's crucial to recognize that while low code accelerates development, it does so at the expense of some flexibility. As a result, not all solutions are well-suited for low-code development. Let's delve deeper into the analysis of scenarios that favor low-code tools versus those where traditional code development remains more appropriate. Throughout this exploration, the key comparison of low code versus traditional development remains paramount, emphasizing the critical importance of choosing the most efficient approach."}),"\n",(0,i.jsx)(t.h2,{id:"when-launching-a-transient-business-initiative",children:"When Launching a Transient Business Initiative"}),"\n",(0,i.jsx)(t.p,{children:"In the dynamic landscape of frequent holidays and special occasions, creating distinct online experiences becomes imperative. Each company may have its unique marketing days, requiring engaging activities. Crafting these online marketing campaigns inevitably poses a development challenge, necessitating substantial resource allocation. While the need for visually captivating designs is evident, the overall complexity may not justify significant development costs, especially when the lifecycle is limited to 1-2 weeks. In such cases, opting for low-code tools emerges as a financially prudent decision. Here, we advocate for a specific low-code solution."}),"\n",(0,i.jsx)(t.h3,{id:"addressing-user-facing-components-webflow",children:"Addressing User-Facing Components: Webflow"}),"\n",(0,i.jsx)(t.p,{children:"Webflow, with its intuitive drag-and-drop interface and designer-friendly adjustments, facilitates the creation of visually stunning landing pages. This approach allows users to interact with an aesthetically pleasing website, and remarkably, only requires the expertise of a single designer. Furthermore, Webflow offers an array of templates that can be easily customized, enabling the swift construction of an exquisite website."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/webflow.png",alt:"webflow"})}),"\n",(0,i.jsx)(t.h3,{id:"managing-business-operations-illa-cloud",children:"Managing Business Operations: ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Regardless of the frontend technology used, an effective management tool is indispensable for overseeing business operations."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://illacloud.com",children:"ILLA Cloud"}),", as an out-of-the-box low-code tool, empowers developers to rapidly construct internal tools using straightforward JavaScript, eliminating the need to create new projects."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(t.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(t.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Compared to scenarios relying on component libraries, ILLA Cloud boasts a 10x faster construction speed for the aforementioned tools. Additionally, ILLA Cloud supports collaborative editing among multiple team members, fostering efficient teamwork."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.p,{children:"The synergy of these two tools expedites the creation of business requirements in marketing scenarios. This synergistic approach minimizes the need for extensive development resources while addressing the demand for quick response and deployment. Consequently, it propels the business iteration speed to new heights."}),"\n",(0,i.jsx)(t.h2,{id:"when-initiating-a-novel-business-venture",children:"When Initiating a Novel Business Venture"}),"\n",(0,i.jsx)(t.p,{children:"The commencement of a project necessitates a thorough evaluation of its characteristics. For comprehensive toC products such as social platforms, gaming applications, or IM services, the recommendation leans towards traditional development methodologies. This ensures a high degree of flexibility in adapting to evolving requirements."}),"\n",(0,i.jsx)(t.p,{children:"For ventures centered around retail or services, the utilization of Shopify for frontend presentation proves advantageous. This choice guarantees widespread distribution of products while curbing development costs. Furthermore, Shopify supports customization, catering to diverse business needs effectively."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/shopify.png",alt:"shopify"})}),"\n",(0,i.jsx)(t.p,{children:"In instances where a swift development of an app or website is paramount, direct coding may offer a faster solution. Therefore, the selection of an appropriate solution heavily relies on the unique attributes of the scenario."}),"\n",(0,i.jsx)(t.p,{children:"If the backend functionality of Shopify falls short of requirements, the integration of ILLA Cloud can bridge the gap, providing a platform for customized management."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"In the decision-making process for selecting development tools, a multifaceted approach is recommended. While direct coding provides unparalleled flexibility, it does come at the cost of development speed. The strategic integration of low-code tools and SaaS solutions can yield substantial gains in productivity."}),"\n",(0,i.jsx)(t.p,{children:"For operations demanding flexibility and essential to the core business, traditional development methods remain the preferred choice. The agility and control afforded by traditional development methods result in products that are highly tailored to specific needs."}),"\n",(0,i.jsx)(t.p,{children:"Ultimately, there is no one-size-fits-all solution; the best choice is the one that aligns most closely with the unique requirements of the scenario at hand."})]})}function h(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>s});var i=o(959);const n={},a=i.createContext(n);function s(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/72d3bf7a.b2125056.js b/assets/js/72d3bf7a.b2125056.js
deleted file mode 100644
index 766c50d0e4..0000000000
--- a/assets/js/72d3bf7a.b2125056.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[4808],{2685:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var i=o(1527),n=o(7214);const a={slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},s=void 0,l={permalink:"/illa-website/blog/lowcode-vs-traditional",source:"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"traditional development",permalink:"/illa-website/blog/tags/traditional-development"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.33,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"lowcode-vs-traditional",title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/cover.png",tags:["low code","traditional development","javascript"],is_featured:!0,date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},nextItem:{title:"2024 has arrived, should I choose MUI?",permalink:"/illa-website/blog/mui-2024"},relatedPosts:[{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"5 Best Low Code Platform in 2024",description:"As the software industry evolves, low-code tools are increasingly gaining popularity. Implementing the right low-code tools",permalink:"/illa-website/blog/best-low-code-platform",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.665,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"When Launching a Transient Business Initiative",id:"when-launching-a-transient-business-initiative",level:2},{value:"Addressing User-Facing Components: Webflow",id:"addressing-user-facing-components-webflow",level:3},{value:"Managing Business Operations: ILLA Cloud",id:"managing-business-operations-illa-cloud",level:3},{value:"When Initiating a Novel Business Venture",id:"when-initiating-a-novel-business-venture",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios. This has alleviated the need to initiate projects from scratch, saving considerable time for more pivotal business endeavors. However, it's crucial to recognize that while low code accelerates development, it does so at the expense of some flexibility. As a result, not all solutions are well-suited for low-code development. Let's delve deeper into the analysis of scenarios that favor low-code tools versus those where traditional code development remains more appropriate. Throughout this exploration, the key comparison of low code versus traditional development remains paramount, emphasizing the critical importance of choosing the most efficient approach."}),"\n",(0,i.jsx)(t.h2,{id:"when-launching-a-transient-business-initiative",children:"When Launching a Transient Business Initiative"}),"\n",(0,i.jsx)(t.p,{children:"In the dynamic landscape of frequent holidays and special occasions, creating distinct online experiences becomes imperative. Each company may have its unique marketing days, requiring engaging activities. Crafting these online marketing campaigns inevitably poses a development challenge, necessitating substantial resource allocation. While the need for visually captivating designs is evident, the overall complexity may not justify significant development costs, especially when the lifecycle is limited to 1-2 weeks. In such cases, opting for low-code tools emerges as a financially prudent decision. Here, we advocate for a specific low-code solution."}),"\n",(0,i.jsx)(t.h3,{id:"addressing-user-facing-components-webflow",children:"Addressing User-Facing Components: Webflow"}),"\n",(0,i.jsx)(t.p,{children:"Webflow, with its intuitive drag-and-drop interface and designer-friendly adjustments, facilitates the creation of visually stunning landing pages. This approach allows users to interact with an aesthetically pleasing website, and remarkably, only requires the expertise of a single designer. Furthermore, Webflow offers an array of templates that can be easily customized, enabling the swift construction of an exquisite website."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/webflow.png",alt:"webflow"})}),"\n",(0,i.jsx)(t.h3,{id:"managing-business-operations-illa-cloud",children:"Managing Business Operations: ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Regardless of the frontend technology used, an effective management tool is indispensable for overseeing business operations."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://illacloud.com",children:"ILLA Cloud"}),", as an out-of-the-box low-code tool, empowers developers to rapidly construct internal tools using straightforward JavaScript, eliminating the need to create new projects."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(t.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(t.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Compared to scenarios relying on component libraries, ILLA Cloud boasts a 10x faster construction speed for the aforementioned tools. Additionally, ILLA Cloud supports collaborative editing among multiple team members, fostering efficient teamwork."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.p,{children:"The synergy of these two tools expedites the creation of business requirements in marketing scenarios. This synergistic approach minimizes the need for extensive development resources while addressing the demand for quick response and deployment. Consequently, it propels the business iteration speed to new heights."}),"\n",(0,i.jsx)(t.h2,{id:"when-initiating-a-novel-business-venture",children:"When Initiating a Novel Business Venture"}),"\n",(0,i.jsx)(t.p,{children:"The commencement of a project necessitates a thorough evaluation of its characteristics. For comprehensive toC products such as social platforms, gaming applications, or IM services, the recommendation leans towards traditional development methodologies. This ensures a high degree of flexibility in adapting to evolving requirements."}),"\n",(0,i.jsx)(t.p,{children:"For ventures centered around retail or services, the utilization of Shopify for frontend presentation proves advantageous. This choice guarantees widespread distribution of products while curbing development costs. Furthermore, Shopify supports customization, catering to diverse business needs effectively."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/lowcode-vs-traditional/shopify.png",alt:"shopify"})}),"\n",(0,i.jsx)(t.p,{children:"In instances where a swift development of an app or website is paramount, direct coding may offer a faster solution. Therefore, the selection of an appropriate solution heavily relies on the unique attributes of the scenario."}),"\n",(0,i.jsx)(t.p,{children:"If the backend functionality of Shopify falls short of requirements, the integration of ILLA Cloud can bridge the gap, providing a platform for customized management."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"In the decision-making process for selecting development tools, a multifaceted approach is recommended. While direct coding provides unparalleled flexibility, it does come at the cost of development speed. The strategic integration of low-code tools and SaaS solutions can yield substantial gains in productivity."}),"\n",(0,i.jsx)(t.p,{children:"For operations demanding flexibility and essential to the core business, traditional development methods remain the preferred choice. The agility and control afforded by traditional development methods result in products that are highly tailored to specific needs."}),"\n",(0,i.jsx)(t.p,{children:"Ultimately, there is no one-size-fits-all solution; the best choice is the one that aligns most closely with the unique requirements of the scenario at hand."})]})}function h(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>s});var i=o(959);const n={},a=i.createContext(n);function s(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/745ae684.628c6cb4.js b/assets/js/745ae684.628c6cb4.js
new file mode 100644
index 0000000000..48c12c03a9
--- /dev/null
+++ b/assets/js/745ae684.628c6cb4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[1027],{6122:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>s,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var n=t(1527),l=t(7214);const i={slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},a=void 0,r={permalink:"/illa-website/blog/launch-flow",source:"@site/blog/launch-flow/launch-flow.md",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:1.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},nextItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}]},s={authorsImageUrls:[void 0]},c=[{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Integrate Everything",id:"integrate-everything",level:2},{value:"Some examples",id:"some-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const o={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,l.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"Hi everyone, I'm Owen, and we are a startup company focused on low-code solutions. Our team is quite small, consisting of only 7 people."}),"\n",(0,n.jsx)(o.p,{children:"Today, we launched our new product: ILLA Flow."}),"\n",(0,n.jsxs)(o.p,{children:["Website: ",(0,n.jsx)(o.a,{href:"https://illacloud.com",children:"https://illacloud.com"})," (You can find it after login, at the left of dashboard -> Flow)"]}),"\n",(0,n.jsx)(o.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping, thereby enabling connections and scheduling with various databases and APIs."}),"\n",(0,n.jsx)(o.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,n.jsx)(o.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/flow.jpeg",alt:"flow"})}),"\n",(0,n.jsx)(o.h2,{id:"integrate-everything",children:"Integrate Everything"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow can connect to any"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"RestAPI"}),"\n",(0,n.jsx)(o.li,{children:"MySQL"}),"\n",(0,n.jsx)(o.li,{children:"MariaDB,"}),"\n",(0,n.jsx)(o.li,{children:"PostgreSQL"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/resource.jpeg",alt:"resource"})}),"\n",(0,n.jsx)(o.p,{children:"We will strive to expand support for more connectivity features."}),"\n",(0,n.jsx)(o.h2,{id:"some-examples",children:"Some examples"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,n.jsx)(o.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,n.jsx)(o.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,n.jsx)(o.li,{children:"Book a meeting room every day"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,n.jsx)(o.li,{children:"Build a CI/CD report system"}),"\n",(0,n.jsx)(o.li,{children:"Send email when some warning occurs"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow supports scheduled triggers and the use of Webhooks for triggering. As a low-code tool, ILLA also enables the construction of panels to drive multiple workflows, forming a complete business process. Currently, the product is entirely free and requires no costs."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/dashboard.jpeg",alt:"dashboard"})}),"\n",(0,n.jsx)(o.p,{children:"Our initial intention in creating this product was to address the lack of developer-friendly workflow products on the market. We aim to build a complete low-code matrix product to provide a better experience. Moreover, we have achieved multi-person real-time collaboration, similar to the experience of editing in Figma, ensuring that a team can edit workflows together."}),"\n",(0,n.jsx)(o.p,{children:"As an early-stage product, there are still many features that are not perfect, and we hope everyone can provide valuable feedback to help us optimize it."})]})}function u(e={}){const{wrapper:o}={...(0,l.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>r,a:()=>a});var n=t(959);const l={},i=n.createContext(l);function a(e){const o=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function r(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),n.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/745ae684.9898f73e.js b/assets/js/745ae684.9898f73e.js
deleted file mode 100644
index 8164f19e2c..0000000000
--- a/assets/js/745ae684.9898f73e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[1027],{6122:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var n=o(1527),l=o(7214);const a={slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},i=void 0,r={permalink:"/illa-website/blog/launch-flow",source:"@site/blog/launch-flow/launch-flow.md",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:1.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},nextItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"}]},s={authorsImageUrls:[void 0]},c=[{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Integrate Everything",id:"integrate-everything",level:2},{value:"Some examples",id:"some-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,l.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Hi everyone, I'm Owen, and we are a startup company focused on low-code solutions. Our team is quite small, consisting of only 7 people."}),"\n",(0,n.jsx)(t.p,{children:"Today, we launched our new product: ILLA Flow."}),"\n",(0,n.jsxs)(t.p,{children:["Website: ",(0,n.jsx)(t.a,{href:"https://illacloud.com",children:"https://illacloud.com"})," (You can find it after login, at the left of dashboard -> Flow)"]}),"\n",(0,n.jsx)(t.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping, thereby enabling connections and scheduling with various databases and APIs."}),"\n",(0,n.jsx)(t.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,n.jsx)(t.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/flow.jpeg",alt:"flow"})}),"\n",(0,n.jsx)(t.h2,{id:"integrate-everything",children:"Integrate Everything"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow can connect to any"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"RestAPI"}),"\n",(0,n.jsx)(t.li,{children:"MySQL"}),"\n",(0,n.jsx)(t.li,{children:"MariaDB,"}),"\n",(0,n.jsx)(t.li,{children:"PostgreSQL"}),"\n",(0,n.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/resource.jpeg",alt:"resource"})}),"\n",(0,n.jsx)(t.p,{children:"We will strive to expand support for more connectivity features."}),"\n",(0,n.jsx)(t.h2,{id:"some-examples",children:"Some examples"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,n.jsx)(t.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,n.jsx)(t.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,n.jsx)(t.li,{children:"Book a meeting room every day"}),"\n",(0,n.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,n.jsx)(t.li,{children:"Build a CI/CD report system"}),"\n",(0,n.jsx)(t.li,{children:"Send email when some warning occurs"}),"\n",(0,n.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow supports scheduled triggers and the use of Webhooks for triggering. As a low-code tool, ILLA also enables the construction of panels to drive multiple workflows, forming a complete business process. Currently, the product is entirely free and requires no costs."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/dashboard.jpeg",alt:"dashboard"})}),"\n",(0,n.jsx)(t.p,{children:"Our initial intention in creating this product was to address the lack of developer-friendly workflow products on the market. We aim to build a complete low-code matrix product to provide a better experience. Moreover, we have achieved multi-person real-time collaboration, similar to the experience of editing in Figma, ensuring that a team can edit workflows together."}),"\n",(0,n.jsx)(t.p,{children:"As an early-stage product, there are still many features that are not perfect, and we hope everyone can provide valuable feedback to help us optimize it."})]})}function u(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>r,a:()=>i});var n=o(959);const l={},a=n.createContext(l);function i(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/79c71fe4.cb63ffc1.js b/assets/js/79c71fe4.ef02ff38.js
similarity index 97%
rename from assets/js/79c71fe4.cb63ffc1.js
rename to assets/js/79c71fe4.ef02ff38.js
index 0a946593d2..77eaed1901 100644
--- a/assets/js/79c71fe4.cb63ffc1.js
+++ b/assets/js/79c71fe4.ef02ff38.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2581],{618:(e,o,s)=>{s.r(o),s.d(o,{assets:()=>d,contentTitle:()=>t,default:()=>c,frontMatter:()=>i,metadata:()=>r,toc:()=>l});var a=s(1527),n=s(7214);const i={title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},t=void 0,r={permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",source:"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md",title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",date:"2023-12-20T10:00:00.000Z",formattedDate:"December 20, 2023",tags:[{label:"redis",permalink:"/illa-website/blog/tags/redis"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:20.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},unlisted:!1,prevItem:{title:"Quickly create a personalized data dashboard for your boss",permalink:"/illa-website/blog/build-dashboard"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"}],authorPosts:[]},d={authorsImageUrls:[void 0]},l=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:",id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",level:3},{value:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"RedisInsight",id:"redisinsight",level:2},{value:"Some of the advantages of RedisInsight are:",id:"some-of-the-advantages-of-redisinsight-are",level:3},{value:"Some of the drawbacks of RedisInsight are:",id:"some-of-the-drawbacks-of-redisinsight-are",level:3},{value:"Redis Desktop Manager (RESP.app)",id:"redis-desktop-manager-respapp",level:2},{value:"Some of the advantages of Redis Desktop Manager are:",id:"some-of-the-advantages-of-redis-desktop-manager-are",level:3},{value:"Some of the drawbacks of Redis Desktop Manager are:",id:"some-of-the-drawbacks-of-redis-desktop-manager-are",level:3},{value:"Medis",id:"medis",level:2},{value:"Some of the advantages of Medis are:",id:"some-of-the-advantages-of-medis-are",level:3},{value:"Some of the drawbacks of Medis are:",id:"some-of-the-drawbacks-of-medis-are",level:3},{value:"To use Medis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Redis Commander",id:"redis-commander",level:2},{value:"Some of the advantages of Redis Commander are:",id:"some-of-the-advantages-of-redis-commander-are",level:3},{value:"Some of the drawbacks of Redis Commander are:",id:"some-of-the-drawbacks-of-redis-commander-are",level:3},{value:"Download Redis Commander from GitHub or npm.",id:"download-redis-commander-from-github-or-npm",level:3},{value:"Redsmin",id:"redsmin",level:2},{value:"Some of the advantages of Redsmin are:",id:"some-of-the-advantages-of-redsmin-are",level:3},{value:"Some of the drawbacks of Redsmin are:",id:"some-of-the-drawbacks-of-redsmin-are",level:3},{value:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Webdis",id:"webdis",level:2},{value:"Some of the advantages of Webdis are:",id:"some-of-the-advantages-of-webdis-are",level:3},{value:"Some of the drawbacks of Webdis are:",id:"some-of-the-drawbacks-of-webdis-are",level:3},{value:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const o={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2024 and how to use them. Find out why ILLA Cloud is the best Redis GUI tool in our opinion."}),"\n",(0,a.jsx)(o.p,{children:"Redis is a popular open-source, in-memory data structure store that can be used as a database, cache, message broker, and more. Redis supports various data types like strings, lists, sets, hashes, and streams. Redis also offers many features like transactions, replication, clustering, pub/sub, Lua scripting, and more."}),"\n",(0,a.jsx)(o.p,{children:"However, working with Redis can be challenging without a graphical user interface (GUI) to help you visualize and interact with your data. A Redis GUI tool can help you browse, filter, edit, and delete your Redis keys, run commands and queries, monitor performance and metrics, and more."}),"\n",(0,a.jsx)(o.p,{children:"Many Redis GUI tools are available in the market, each with its own features, pros and cons, and price. This blog post will review the top 7 Redis GUI tools in 2024 and compare them based on their functionality, usability, compatibility, and cost. We will also show you how to use ILLA Cloud, the best Redis GUI tool, to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. It is a powerful and flexible UI library for building web applications that connect to your databases and APIs. You can use ILLA Cloud to build anything from simple forms and tables to complex applications with advanced features."}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud supports Redis as one of its data sources. You can connect to your Redis server or cluster using ILLA Cloud and access your data using a graphical interface. You can also run commands and queries using SQL and JavaScript. You can use template syntax to inject dynamic values into your components and queries. You can also customize and control your components with JavaScript."}),"\n",(0,a.jsx)(o.h3,{id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",children:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use ILLA Cloud without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is cross-platform and cloud-based. You can use ILLA Cloud on any device and operating system. You can also deploy it on your own server or use the ILLA Cloud service."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple data sources. You can connect to various databases and APIs using ILLA Cloud, such as PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, AWS S3, and more. You can also integrate with any data source connected through APIs."}),"\n",(0,a.jsx)(o.li,{children:"It has a drag-and-drop interface. You can build a user interface for your application by dragging and dropping components like tables, charts, forms, buttons, and more. You don\u2019t need to write any HTML or CSS code."}),"\n",(0,a.jsx)(o.li,{children:"It has a rich set of components. You can use dozens of components in ILLA Cloud to meet your needs in different scenarios. You can also customize them with JavaScript."}),"\n",(0,a.jsx)(o.li,{children:"It supports JavaScript inside widgets, queries, and other components. Using JavaScript, you can add logic, transform data, and define complex workflows. You can also use template syntax to inject dynamic values into your components and queries."}),"\n",(0,a.jsx)(o.li,{children:"It has a collaborative feature. You can work with other developers on the same project by sharing links. You can also chat with them in real time and give feedback."}),"\n",(0,a.jsx)(o.li,{children:"It has a friendly community. You can join the Discord community of ILLA Cloud and get support from other users and developers. You can also share feedback, ask questions, and get updates."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the ILLA Cloud website."}),"\n",(0,a.jsx)(o.li,{children:"Create a new project and choose Redis as your data source."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Query tab on the top panel. You can write SQL or JavaScript in the editor. You can use template syntax to inject dynamic values into your queries. You can also use auto-completion and syntax highlighting features. You can run your queries by clicking the Run button or pressing Ctrl+Enter. You will see the results on the right panel. You can also export the results as CSV or JSON files."}),"\n",(0,a.jsx)(o.li,{children:"To build a user interface for your application, click on the Builder tab on the top panel. You will see a grid-style canvas where you can drag and drop components from the left panel. You can choose from various components like tables, charts, forms, buttons, etc. You can also customize and control your components with JavaScript. You can use template syntax to inject dynamic values into your components. You can also bind your components to your queries and data sources."}),"\n",(0,a.jsx)(o.li,{children:"To preview your application, click on the Preview button on the top right corner. You will see how your application looks and works in a browser. You can also test your components and queries and see the results."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using ILLA Cloud. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redisinsight",children:"RedisInsight"}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight is a desktop manager for Redis that provides an intuitive and efficient UI for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight allows you to browse and interact with Redis data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also explore the latest capabilities offered by Redis, such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redisinsight-are",children:"Some of the advantages of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and easy to use. You can download RedisInsight for free and install it on your Linux, Windows, or macOS machine. You can also check out the GitHub project and provide feedback."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use RedisInsight on any device and operating system. You can also connect to any Redis server or cluster using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also use the Workbench feature to run commands and queries using a Monaco Editor."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interactively work with complex data models such as documents, graphs, time series, etc. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redisinsight-are",children:"Some of the drawbacks of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not open-source. You cannot contribute to or modify the project according to your needs."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using RedisInsight."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"redis-desktop-manager-respapp",children:"Redis Desktop Manager (RESP.app)"}),"\n",(0,a.jsx)(o.p,{children:"Redis Desktop Manager is a cross-platform desktop GUI for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-desktop-manager-are",children:"Some of the advantages of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cross-platform and desktop-based. You can use Redis Desktop Manager on Linux, Windows, or macOS machines. You can also install it as a snap package or a docker image."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Desktop Manager. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Console feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-desktop-manager-are",children:"Some of the drawbacks of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redis Desktop Manager. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, etc."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Desktop Manager."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Desktop Manager."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"medis",children:"Medis"}),"\n",(0,a.jsx)(o.p,{children:"Medis is a beautiful and easy-to-use Mac database management application for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-medis-are",children:"Some of the advantages of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is beautiful and easy-to-use. Medis has a sleek and intuitive design that makes it easy to use. It also has dark mode support that makes it look even better."}),"\n",(0,a.jsx)(o.li,{children:"It is Mac-based and desktop-based. You can use Medis on any Mac machine. You can also install it from the Mac App Store or download it from GitHub."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Medis. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Terminal feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-medis-are",children:"Some of the drawbacks of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Medis. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It is only available for Mac. You cannot use Medis on other operating systems or devices."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Medis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Medis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Medis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Medis from the Mac App Store or GitHub."}),"\n",(0,a.jsx)(o.li,{children:"Install Medis on your Mac machine."}),"\n",(0,a.jsx)(o.li,{children:"Launch Medis and click on Add Connection button."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on CLI tab on the bottom panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Medis. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redis-commander",children:"Redis Commander"}),"\n",(0,a.jsx)(o.p,{children:"Redis Commander is a free and open-source Redis management tool written in Node.js. It allows you to connect to multiple Redis servers and clusters and manage your data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-commander-are",children:"Some of the advantages of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use Redis Commander without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is web-based and cross-platform. You can use Redis Commander on any device and operating system. You need to install it on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Commander. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-commander-are",children:"Some of the drawbacks of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very stable or reliable. Redis Commander may have bugs or issues affecting its performance or functionality. It may also crash or freeze sometimes."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Commander."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Commander."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"To use Redis Commander to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsx)(o.h3,{id:"download-redis-commander-from-github-or-npm",children:"Download Redis Commander from GitHub or npm."}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Install Redis Commander on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch Redis Commander by running redis-commander command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redis Commander through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:8081",children:"http://localhost:8081"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redis Commander. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redsmin",children:"Redsmin"}),"\n",(0,a.jsx)(o.p,{children:"Redsmin is a cloud-based Redis management service that provides a real-time interface for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"Redsmin allows you to browse and interact with Redis data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also monitor the performance and metrics of your Redis server or cluster using a dashboard."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redsmin-are",children:"Some of the advantages of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cloud-based and cross-platform. You can use Redsmin on any device and operating system. You must install a proxy daemon on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redsmin. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interact with complex data models such as documents, graphs, and time series. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n",(0,a.jsx)(o.li,{children:"It has a dashboard for monitoring performance and metrics. You can monitor your Redis server's or cluster's performance and metrics using a dashboard. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redsmin-are",children:"Some of the drawbacks of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redsmin. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It requires a proxy daemon installation. You must install a proxy daemon on your server to connect to Redsmin. This may affect your security or performance."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redsmin."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redsmin."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the Redsmin website."}),"\n",(0,a.jsx)(o.li,{children:"Download and install the proxy daemon on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch the proxy daemon by running redsmin command in your terminal."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redsmin API key when prompted."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redsmin through your web browser by entering ",(0,a.jsx)(o.a,{href:"https://app.redsmin.com",children:"https://app.redsmin.com"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n",(0,a.jsx)(o.li,{children:"To explore the latest capabilities offered by Redis, click on the corresponding tabs on the top panel. You can choose from various modules, such as RedisJSON, RedisGraph, and RedisTimeSeries. Using a web-based interface, you can query, visualize, and interact with complex data models."}),"\n",(0,a.jsx)(o.li,{children:"To monitor your Redis server's or cluster's performance and metrics, click on the Dashboard tab on the top panel. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redsmin. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"webdis",children:"Webdis"}),"\n",(0,a.jsx)(o.p,{children:"Webdis is a simple web server that exposes Redis commands as HTTP endpoints with JSON output. It allows you to connect to your Redis server and access your data using a web browser or any HTTP client. You can also run commands and queries using HTTP requests."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-webdis-are",children:"Some of the advantages of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is simple and lightweight. Webdis is a simple web server that requires no installation or configuration. It is also very fast and consumes little memory."}),"\n",(0,a.jsx)(o.li,{children:"It is open-source and free. You can use Webdis without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use Webdis on Linux, Windows, or macOS machines. You can also connect to any Redis server or cluster using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. You can browse and interact with Redis data using a web browser or any HTTP client. You can also display data in JSON format."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-webdis-are",children:"Some of the drawbacks of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very secure or reliable. Webdis does not support authentication or encryption for your Redis connection. It may also expose your Redis data to unauthorized access or modification."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a built-in CLI for running commands and queries. You have to use HTTP requests to run commands and queries on your Redis data."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Webdis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Webdis from GitHub or compile it from the source code."}),"\n",(0,a.jsx)(o.li,{children:"Launch Webdis by running webdis the command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Webdis through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:7379",children:"http://localhost:7379"})," in your address bar."]}),"\n",(0,a.jsxs)(o.li,{children:["Enter your Redis command or query in the URL path after the slash. For example, ",(0,a.jsx)(o.a,{href:"http://localhost:7379/GET/foo",children:"http://localhost:7379/GET/foo"})," will get the value of the key foo."]}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"See the result of your command or query in JSON format in your browser.\nThat\u2019s it! You have built a Redis GUI for your application using Webdis. You can now use it to access and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(o.p,{children:"In this blog post, we have reviewed the top 7 Redis GUI tools in 2024 and compared them based on their functionality, usability, compatibility, and cost. We have also shown you how to use each tool to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.p,{children:"We hope this blog post has helped you find the best Redis GUI tool for your needs and preferences. However, if you ask us, we recommend ILLA Cloud as the best Redis GUI tool."})]})}function c(e={}){const{wrapper:o}={...(0,n.a)(),...e.components};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},7214:(e,o,s)=>{s.d(o,{Z:()=>r,a:()=>t});var a=s(959);const n={},i=a.createContext(n);function t(e){const o=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function r(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:t(e.components),a.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2581],{618:(e,o,s)=>{s.r(o),s.d(o,{assets:()=>d,contentTitle:()=>t,default:()=>c,frontMatter:()=>i,metadata:()=>r,toc:()=>l});var a=s(1527),n=s(7214);const i={title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},t=void 0,r={permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",source:"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md",title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",date:"2023-12-20T10:00:00.000Z",formattedDate:"December 20, 2023",tags:[{label:"redis",permalink:"/illa-website/blog/tags/redis"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:20.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},unlisted:!1,prevItem:{title:"Quickly create a personalized data dashboard for your boss",permalink:"/illa-website/blog/build-dashboard"},relatedPosts:[{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"}],authorPosts:[]},d={authorsImageUrls:[void 0]},l=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:",id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",level:3},{value:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"RedisInsight",id:"redisinsight",level:2},{value:"Some of the advantages of RedisInsight are:",id:"some-of-the-advantages-of-redisinsight-are",level:3},{value:"Some of the drawbacks of RedisInsight are:",id:"some-of-the-drawbacks-of-redisinsight-are",level:3},{value:"Redis Desktop Manager (RESP.app)",id:"redis-desktop-manager-respapp",level:2},{value:"Some of the advantages of Redis Desktop Manager are:",id:"some-of-the-advantages-of-redis-desktop-manager-are",level:3},{value:"Some of the drawbacks of Redis Desktop Manager are:",id:"some-of-the-drawbacks-of-redis-desktop-manager-are",level:3},{value:"Medis",id:"medis",level:2},{value:"Some of the advantages of Medis are:",id:"some-of-the-advantages-of-medis-are",level:3},{value:"Some of the drawbacks of Medis are:",id:"some-of-the-drawbacks-of-medis-are",level:3},{value:"To use Medis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Redis Commander",id:"redis-commander",level:2},{value:"Some of the advantages of Redis Commander are:",id:"some-of-the-advantages-of-redis-commander-are",level:3},{value:"Some of the drawbacks of Redis Commander are:",id:"some-of-the-drawbacks-of-redis-commander-are",level:3},{value:"Download Redis Commander from GitHub or npm.",id:"download-redis-commander-from-github-or-npm",level:3},{value:"Redsmin",id:"redsmin",level:2},{value:"Some of the advantages of Redsmin are:",id:"some-of-the-advantages-of-redsmin-are",level:3},{value:"Some of the drawbacks of Redsmin are:",id:"some-of-the-drawbacks-of-redsmin-are",level:3},{value:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Webdis",id:"webdis",level:2},{value:"Some of the advantages of Webdis are:",id:"some-of-the-advantages-of-webdis-are",level:3},{value:"Some of the drawbacks of Webdis are:",id:"some-of-the-drawbacks-of-webdis-are",level:3},{value:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const o={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2024 and how to use them. Find out why ILLA Cloud is the best Redis GUI tool in our opinion."}),"\n",(0,a.jsx)(o.p,{children:"Redis is a popular open-source, in-memory data structure store that can be used as a database, cache, message broker, and more. Redis supports various data types like strings, lists, sets, hashes, and streams. Redis also offers many features like transactions, replication, clustering, pub/sub, Lua scripting, and more."}),"\n",(0,a.jsx)(o.p,{children:"However, working with Redis can be challenging without a graphical user interface (GUI) to help you visualize and interact with your data. A Redis GUI tool can help you browse, filter, edit, and delete your Redis keys, run commands and queries, monitor performance and metrics, and more."}),"\n",(0,a.jsx)(o.p,{children:"Many Redis GUI tools are available in the market, each with its own features, pros and cons, and price. This blog post will review the top 7 Redis GUI tools in 2024 and compare them based on their functionality, usability, compatibility, and cost. We will also show you how to use ILLA Cloud, the best Redis GUI tool, to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. It is a powerful and flexible UI library for building web applications that connect to your databases and APIs. You can use ILLA Cloud to build anything from simple forms and tables to complex applications with advanced features."}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud supports Redis as one of its data sources. You can connect to your Redis server or cluster using ILLA Cloud and access your data using a graphical interface. You can also run commands and queries using SQL and JavaScript. You can use template syntax to inject dynamic values into your components and queries. You can also customize and control your components with JavaScript."}),"\n",(0,a.jsx)(o.h3,{id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",children:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use ILLA Cloud without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is cross-platform and cloud-based. You can use ILLA Cloud on any device and operating system. You can also deploy it on your own server or use the ILLA Cloud service."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple data sources. You can connect to various databases and APIs using ILLA Cloud, such as PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, AWS S3, and more. You can also integrate with any data source connected through APIs."}),"\n",(0,a.jsx)(o.li,{children:"It has a drag-and-drop interface. You can build a user interface for your application by dragging and dropping components like tables, charts, forms, buttons, and more. You don\u2019t need to write any HTML or CSS code."}),"\n",(0,a.jsx)(o.li,{children:"It has a rich set of components. You can use dozens of components in ILLA Cloud to meet your needs in different scenarios. You can also customize them with JavaScript."}),"\n",(0,a.jsx)(o.li,{children:"It supports JavaScript inside widgets, queries, and other components. Using JavaScript, you can add logic, transform data, and define complex workflows. You can also use template syntax to inject dynamic values into your components and queries."}),"\n",(0,a.jsx)(o.li,{children:"It has a collaborative feature. You can work with other developers on the same project by sharing links. You can also chat with them in real time and give feedback."}),"\n",(0,a.jsx)(o.li,{children:"It has a friendly community. You can join the Discord community of ILLA Cloud and get support from other users and developers. You can also share feedback, ask questions, and get updates."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the ILLA Cloud website."}),"\n",(0,a.jsx)(o.li,{children:"Create a new project and choose Redis as your data source."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Query tab on the top panel. You can write SQL or JavaScript in the editor. You can use template syntax to inject dynamic values into your queries. You can also use auto-completion and syntax highlighting features. You can run your queries by clicking the Run button or pressing Ctrl+Enter. You will see the results on the right panel. You can also export the results as CSV or JSON files."}),"\n",(0,a.jsx)(o.li,{children:"To build a user interface for your application, click on the Builder tab on the top panel. You will see a grid-style canvas where you can drag and drop components from the left panel. You can choose from various components like tables, charts, forms, buttons, etc. You can also customize and control your components with JavaScript. You can use template syntax to inject dynamic values into your components. You can also bind your components to your queries and data sources."}),"\n",(0,a.jsx)(o.li,{children:"To preview your application, click on the Preview button on the top right corner. You will see how your application looks and works in a browser. You can also test your components and queries and see the results."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using ILLA Cloud. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redisinsight",children:"RedisInsight"}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight is a desktop manager for Redis that provides an intuitive and efficient UI for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight allows you to browse and interact with Redis data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also explore the latest capabilities offered by Redis, such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redisinsight-are",children:"Some of the advantages of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and easy to use. You can download RedisInsight for free and install it on your Linux, Windows, or macOS machine. You can also check out the GitHub project and provide feedback."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use RedisInsight on any device and operating system. You can also connect to any Redis server or cluster using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also use the Workbench feature to run commands and queries using a Monaco Editor."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interactively work with complex data models such as documents, graphs, time series, etc. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redisinsight-are",children:"Some of the drawbacks of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not open-source. You cannot contribute to or modify the project according to your needs."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using RedisInsight."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"redis-desktop-manager-respapp",children:"Redis Desktop Manager (RESP.app)"}),"\n",(0,a.jsx)(o.p,{children:"Redis Desktop Manager is a cross-platform desktop GUI for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-desktop-manager-are",children:"Some of the advantages of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cross-platform and desktop-based. You can use Redis Desktop Manager on Linux, Windows, or macOS machines. You can also install it as a snap package or a docker image."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Desktop Manager. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Console feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-desktop-manager-are",children:"Some of the drawbacks of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redis Desktop Manager. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, etc."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Desktop Manager."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Desktop Manager."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"medis",children:"Medis"}),"\n",(0,a.jsx)(o.p,{children:"Medis is a beautiful and easy-to-use Mac database management application for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-medis-are",children:"Some of the advantages of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is beautiful and easy-to-use. Medis has a sleek and intuitive design that makes it easy to use. It also has dark mode support that makes it look even better."}),"\n",(0,a.jsx)(o.li,{children:"It is Mac-based and desktop-based. You can use Medis on any Mac machine. You can also install it from the Mac App Store or download it from GitHub."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Medis. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Terminal feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-medis-are",children:"Some of the drawbacks of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Medis. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It is only available for Mac. You cannot use Medis on other operating systems or devices."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Medis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Medis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Medis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Medis from the Mac App Store or GitHub."}),"\n",(0,a.jsx)(o.li,{children:"Install Medis on your Mac machine."}),"\n",(0,a.jsx)(o.li,{children:"Launch Medis and click on Add Connection button."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on CLI tab on the bottom panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Medis. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redis-commander",children:"Redis Commander"}),"\n",(0,a.jsx)(o.p,{children:"Redis Commander is a free and open-source Redis management tool written in Node.js. It allows you to connect to multiple Redis servers and clusters and manage your data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-commander-are",children:"Some of the advantages of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use Redis Commander without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is web-based and cross-platform. You can use Redis Commander on any device and operating system. You need to install it on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Commander. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-commander-are",children:"Some of the drawbacks of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very stable or reliable. Redis Commander may have bugs or issues affecting its performance or functionality. It may also crash or freeze sometimes."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Commander."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Commander."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"To use Redis Commander to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsx)(o.h3,{id:"download-redis-commander-from-github-or-npm",children:"Download Redis Commander from GitHub or npm."}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Install Redis Commander on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch Redis Commander by running redis-commander command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redis Commander through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:8081",children:"http://localhost:8081"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redis Commander. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redsmin",children:"Redsmin"}),"\n",(0,a.jsx)(o.p,{children:"Redsmin is a cloud-based Redis management service that provides a real-time interface for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"Redsmin allows you to browse and interact with Redis data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also monitor the performance and metrics of your Redis server or cluster using a dashboard."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redsmin-are",children:"Some of the advantages of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cloud-based and cross-platform. You can use Redsmin on any device and operating system. You must install a proxy daemon on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redsmin. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interact with complex data models such as documents, graphs, and time series. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n",(0,a.jsx)(o.li,{children:"It has a dashboard for monitoring performance and metrics. You can monitor your Redis server's or cluster's performance and metrics using a dashboard. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redsmin-are",children:"Some of the drawbacks of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redsmin. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It requires a proxy daemon installation. You must install a proxy daemon on your server to connect to Redsmin. This may affect your security or performance."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redsmin."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redsmin."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the Redsmin website."}),"\n",(0,a.jsx)(o.li,{children:"Download and install the proxy daemon on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch the proxy daemon by running redsmin command in your terminal."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redsmin API key when prompted."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redsmin through your web browser by entering ",(0,a.jsx)(o.a,{href:"https://app.redsmin.com",children:"https://app.redsmin.com"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n",(0,a.jsx)(o.li,{children:"To explore the latest capabilities offered by Redis, click on the corresponding tabs on the top panel. You can choose from various modules, such as RedisJSON, RedisGraph, and RedisTimeSeries. Using a web-based interface, you can query, visualize, and interact with complex data models."}),"\n",(0,a.jsx)(o.li,{children:"To monitor your Redis server's or cluster's performance and metrics, click on the Dashboard tab on the top panel. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redsmin. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"webdis",children:"Webdis"}),"\n",(0,a.jsx)(o.p,{children:"Webdis is a simple web server that exposes Redis commands as HTTP endpoints with JSON output. It allows you to connect to your Redis server and access your data using a web browser or any HTTP client. You can also run commands and queries using HTTP requests."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-webdis-are",children:"Some of the advantages of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is simple and lightweight. Webdis is a simple web server that requires no installation or configuration. It is also very fast and consumes little memory."}),"\n",(0,a.jsx)(o.li,{children:"It is open-source and free. You can use Webdis without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use Webdis on Linux, Windows, or macOS machines. You can also connect to any Redis server or cluster using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. You can browse and interact with Redis data using a web browser or any HTTP client. You can also display data in JSON format."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-webdis-are",children:"Some of the drawbacks of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very secure or reliable. Webdis does not support authentication or encryption for your Redis connection. It may also expose your Redis data to unauthorized access or modification."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a built-in CLI for running commands and queries. You have to use HTTP requests to run commands and queries on your Redis data."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Webdis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Webdis from GitHub or compile it from the source code."}),"\n",(0,a.jsx)(o.li,{children:"Launch Webdis by running webdis the command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Webdis through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:7379",children:"http://localhost:7379"})," in your address bar."]}),"\n",(0,a.jsxs)(o.li,{children:["Enter your Redis command or query in the URL path after the slash. For example, ",(0,a.jsx)(o.a,{href:"http://localhost:7379/GET/foo",children:"http://localhost:7379/GET/foo"})," will get the value of the key foo."]}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"See the result of your command or query in JSON format in your browser.\nThat\u2019s it! You have built a Redis GUI for your application using Webdis. You can now use it to access and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(o.p,{children:"In this blog post, we have reviewed the top 7 Redis GUI tools in 2024 and compared them based on their functionality, usability, compatibility, and cost. We have also shown you how to use each tool to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.p,{children:"We hope this blog post has helped you find the best Redis GUI tool for your needs and preferences. However, if you ask us, we recommend ILLA Cloud as the best Redis GUI tool."})]})}function c(e={}){const{wrapper:o}={...(0,n.a)(),...e.components};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},7214:(e,o,s)=>{s.d(o,{Z:()=>r,a:()=>t});var a=s(959);const n={},i=a.createContext(n);function t(e){const o=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function r(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:t(e.components),a.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/7dda7093.c74b2047.js b/assets/js/7dda7093.c74b2047.js
new file mode 100644
index 0000000000..5e8b8392fe
--- /dev/null
+++ b/assets/js/7dda7093.c74b2047.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8518],{2860:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var s=o(1527),i=o(7214);const a={slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},n=void 0,l={permalink:"/illa-website/blog/low-code-crm",source:"@site/blog/low-code-crm/low-code-crm.md",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code crm",permalink:"/illa-website/blog/tags/low-code-crm"}],readingTime:3.76,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},nextItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},relatedPosts:[],authorPosts:[{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"Why Build Your Own CRM?",id:"why-build-your-own-crm",level:2},{value:"Advantages of Low-Code Platforms",id:"advantages-of-low-code-platforms",level:2},{value:"Building CRM with ILLA Cloud",id:"building-crm-with-illa-cloud",level:2},{value:"Advantages of ILLA Cloud",id:"advantages-of-illa-cloud",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems. The main advantage of low-code platforms lies in their ability to rapidly iterate. This rapid iteration is key to swiftly responding to market changes, which in turn leads to quick market share acquisition. Gaining market share rapidly is essential for fast capital acquisition, and this swift capital influx fuels further rapid iteration. This cycle positions low-code platforms as the preferred choice for businesses to develop their operational systems in the coming years."}),"\n",(0,s.jsx)(t.p,{children:"Customer Relationship Management (CRM), a system essential for every business, stands as a significant application scenario for low-code platforms. This article will explore how to build a CRM system using a low-code platform."}),"\n",(0,s.jsx)(t.h2,{id:"why-build-your-own-crm",children:"Why Build Your Own CRM?"}),"\n",(0,s.jsx)(t.p,{children:"While every business requires a CRM system, the ones currently available in the market are either too complex or overly simplistic, making it hard to meet specific business needs. As a result, many businesses opt to build their own CRM systems."}),"\n",(0,s.jsx)(t.p,{children:"Using low-code tools to build a CRM system allows for rapid iteration and swift response to market changes. This cycle cements the future of low-code platforms as the go-to solution for businesses developing operational systems."}),"\n",(0,s.jsx)(t.p,{children:"The flexible capabilities of low-code allow for quick, from-the-ground-up construction of fully customized CRM tools tailored to a company's unique requirements."}),"\n",(0,s.jsx)(t.h2,{id:"advantages-of-low-code-platforms",children:"Advantages of Low-Code Platforms"}),"\n",(0,s.jsx)(t.p,{children:"The primary advantage of low-code platforms is their ability to facilitate rapid iteration. This rapid iteration is crucial for quick response to market changes, which leads to swift market share and capital acquisition, feeding back into more rapid iteration. This cycle ensures that low-code platforms will remain the preferred choice for businesses building operational systems in the near future."}),"\n",(0,s.jsx)(t.p,{children:"Building a CRM with low-code means focusing solely on business logic without worrying about operational costs or design styles. It empowers everyone to develop customized systems for their company and team."}),"\n",(0,s.jsx)(t.p,{children:"Moreover, these systems are aesthetically pleasing and easily modifiable."}),"\n",(0,s.jsx)(t.h2,{id:"building-crm-with-illa-cloud",children:"Building CRM with ILLA Cloud"}),"\n",(0,s.jsx)(t.p,{children:"ILLA Cloud is a low-code platform that helps businesses quickly build their operational systems. It offers a wide range of components, enabling the rapid construction of business systems."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/crm.webp",alt:"crm"})}),"\n",(0,s.jsx)(t.p,{children:"The system built with ILLA Cloud offers several features:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Customer management"}),"\n",(0,s.jsx)(t.li,{children:"Progress tracking"}),"\n",(0,s.jsx)(t.li,{children:"Data report management"}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"As a low-code tool, ILLA Cloud allows for unlimited customization, enabling the creation of bespoke features unique to a company."}),"\n",(0,s.jsx)(t.p,{children:"With drag-and-drop simplicity, ILLA Cloud enables rapid construction of custom UIs, allowing users to create a fully-functional low-code CRM in just minutes. This platform boasts an extensive array of common components, coupled with the ability to pull data from any database or data source. Therefore, choosing ILLA Cloud for building a low-code CRM is an exceptionally sound decision."}),"\n",(0,s.jsx)(t.p,{children:"The platform's user-friendly interface simplifies the CRM creation process, making it accessible even to those with minimal technical expertise. The vast selection of components ensures that every necessary feature can be easily integrated into the CRM system, tailored to specific business requirements."}),"\n",(0,s.jsx)(t.p,{children:"Furthermore, the seamless integration with various databases and data sources empowers businesses to consolidate and utilize their data efficiently, enhancing the CRM's effectiveness. This capability is crucial for businesses aiming to maintain a comprehensive and up-to-date customer database, which is at the core of any successful CRM system."}),"\n",(0,s.jsx)(t.p,{children:"In summary, ILLA Cloud's combination of ease-of-use, comprehensive component selection, and robust data integration capabilities makes it a top-tier choice for businesses looking to implement a low-code CRM solution."}),"\n",(0,s.jsx)(t.h2,{id:"advantages-of-illa-cloud",children:"Advantages of ILLA Cloud"}),"\n",(0,s.jsx)(t.p,{children:"ILLA Cloud enables quick Web UI construction through drag-and-drop, eliminating the need for complex web technology skills. This accessibility allows anyone to create their own business systems."}),"\n",(0,s.jsx)(t.p,{children:"It requires no operational skills, as all products are fully hosted on the ILLA Cloud, eliminating operational costs."}),"\n",(0,s.jsx)(t.p,{children:"ILLA Cloud supports collaborative team updates without any additional tools."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/team.gif",alt:"team"})}),"\n",(0,s.jsx)(t.p,{children:"ILLA also integrates complete AI capabilities. If there's a need to send text messages to customers, users can directly use the latest AI Agent within the product."}),"\n",(0,s.jsx)(t.p,{children:"We believe that building AI-Driven Business Tools is the future's preferred method."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/send.gif",alt:"send"})}),"\n",(0,s.jsx)(t.p,{children:"Flexibility has always been a strength of low-code tools, and we offer industry-leading solutions to help users quickly create their corresponding products. We hope that low-code can assist every developer in building their own low-code CRM."}),"\n",(0,s.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(t.p,{children:"Every company should have its own low-code CRM, as customized needs and capabilities are key to flexible operations. We hope everyone can rapidly build business tools using low-code tools."})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>n});var s=o(959);const i={},a=s.createContext(i);function n(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/7dda7093.d37b3ed0.js b/assets/js/7dda7093.d37b3ed0.js
deleted file mode 100644
index a2c38a78ac..0000000000
--- a/assets/js/7dda7093.d37b3ed0.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8518],{2860:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var i=o(1527),s=o(7214);const a={slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},n=void 0,l={permalink:"/illa-website/blog/low-code-crm",source:"@site/blog/low-code-crm/low-code-crm.md",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code crm",permalink:"/illa-website/blog/tags/low-code-crm"}],readingTime:3.76,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},nextItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},relatedPosts:[],authorPosts:[{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"Why Build Your Own CRM?",id:"why-build-your-own-crm",level:2},{value:"Advantages of Low-Code Platforms",id:"advantages-of-low-code-platforms",level:2},{value:"Building CRM with ILLA Cloud",id:"building-crm-with-illa-cloud",level:2},{value:"Advantages of ILLA Cloud",id:"advantages-of-illa-cloud",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems. The main advantage of low-code platforms lies in their ability to rapidly iterate. This rapid iteration is key to swiftly responding to market changes, which in turn leads to quick market share acquisition. Gaining market share rapidly is essential for fast capital acquisition, and this swift capital influx fuels further rapid iteration. This cycle positions low-code platforms as the preferred choice for businesses to develop their operational systems in the coming years."}),"\n",(0,i.jsx)(t.p,{children:"Customer Relationship Management (CRM), a system essential for every business, stands as a significant application scenario for low-code platforms. This article will explore how to build a CRM system using a low-code platform."}),"\n",(0,i.jsx)(t.h2,{id:"why-build-your-own-crm",children:"Why Build Your Own CRM?"}),"\n",(0,i.jsx)(t.p,{children:"While every business requires a CRM system, the ones currently available in the market are either too complex or overly simplistic, making it hard to meet specific business needs. As a result, many businesses opt to build their own CRM systems."}),"\n",(0,i.jsx)(t.p,{children:"Using low-code tools to build a CRM system allows for rapid iteration and swift response to market changes. This cycle cements the future of low-code platforms as the go-to solution for businesses developing operational systems."}),"\n",(0,i.jsx)(t.p,{children:"The flexible capabilities of low-code allow for quick, from-the-ground-up construction of fully customized CRM tools tailored to a company's unique requirements."}),"\n",(0,i.jsx)(t.h2,{id:"advantages-of-low-code-platforms",children:"Advantages of Low-Code Platforms"}),"\n",(0,i.jsx)(t.p,{children:"The primary advantage of low-code platforms is their ability to facilitate rapid iteration. This rapid iteration is crucial for quick response to market changes, which leads to swift market share and capital acquisition, feeding back into more rapid iteration. This cycle ensures that low-code platforms will remain the preferred choice for businesses building operational systems in the near future."}),"\n",(0,i.jsx)(t.p,{children:"Building a CRM with low-code means focusing solely on business logic without worrying about operational costs or design styles. It empowers everyone to develop customized systems for their company and team."}),"\n",(0,i.jsx)(t.p,{children:"Moreover, these systems are aesthetically pleasing and easily modifiable."}),"\n",(0,i.jsx)(t.h2,{id:"building-crm-with-illa-cloud",children:"Building CRM with ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud is a low-code platform that helps businesses quickly build their operational systems. It offers a wide range of components, enabling the rapid construction of business systems."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/crm.webp",alt:"crm"})}),"\n",(0,i.jsx)(t.p,{children:"The system built with ILLA Cloud offers several features:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Customer management"}),"\n",(0,i.jsx)(t.li,{children:"Progress tracking"}),"\n",(0,i.jsx)(t.li,{children:"Data report management"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"As a low-code tool, ILLA Cloud allows for unlimited customization, enabling the creation of bespoke features unique to a company."}),"\n",(0,i.jsx)(t.p,{children:"With drag-and-drop simplicity, ILLA Cloud enables rapid construction of custom UIs, allowing users to create a fully-functional low-code CRM in just minutes. This platform boasts an extensive array of common components, coupled with the ability to pull data from any database or data source. Therefore, choosing ILLA Cloud for building a low-code CRM is an exceptionally sound decision."}),"\n",(0,i.jsx)(t.p,{children:"The platform's user-friendly interface simplifies the CRM creation process, making it accessible even to those with minimal technical expertise. The vast selection of components ensures that every necessary feature can be easily integrated into the CRM system, tailored to specific business requirements."}),"\n",(0,i.jsx)(t.p,{children:"Furthermore, the seamless integration with various databases and data sources empowers businesses to consolidate and utilize their data efficiently, enhancing the CRM's effectiveness. This capability is crucial for businesses aiming to maintain a comprehensive and up-to-date customer database, which is at the core of any successful CRM system."}),"\n",(0,i.jsx)(t.p,{children:"In summary, ILLA Cloud's combination of ease-of-use, comprehensive component selection, and robust data integration capabilities makes it a top-tier choice for businesses looking to implement a low-code CRM solution."}),"\n",(0,i.jsx)(t.h2,{id:"advantages-of-illa-cloud",children:"Advantages of ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud enables quick Web UI construction through drag-and-drop, eliminating the need for complex web technology skills. This accessibility allows anyone to create their own business systems."}),"\n",(0,i.jsx)(t.p,{children:"It requires no operational skills, as all products are fully hosted on the ILLA Cloud, eliminating operational costs."}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud supports collaborative team updates without any additional tools."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/team.gif",alt:"team"})}),"\n",(0,i.jsx)(t.p,{children:"ILLA also integrates complete AI capabilities. If there's a need to send text messages to customers, users can directly use the latest AI Agent within the product."}),"\n",(0,i.jsx)(t.p,{children:"We believe that building AI-Driven Business Tools is the future's preferred method."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/send.gif",alt:"send"})}),"\n",(0,i.jsx)(t.p,{children:"Flexibility has always been a strength of low-code tools, and we offer industry-leading solutions to help users quickly create their corresponding products. We hope that low-code can assist every developer in building their own low-code CRM."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"Every company should have its own low-code CRM, as customized needs and capabilities are key to flexible operations. We hope everyone can rapidly build business tools using low-code tools."})]})}function u(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>n});var i=o(959);const s={},a=i.createContext(s);function n(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:n(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/86a054dc.c00f97ad.js b/assets/js/86a054dc.961a3a28.js
similarity index 97%
rename from assets/js/86a054dc.c00f97ad.js
rename to assets/js/86a054dc.961a3a28.js
index 9c3ea5ece8..974cd6a699 100644
--- a/assets/js/86a054dc.c00f97ad.js
+++ b/assets/js/86a054dc.961a3a28.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9847],{17:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var o=n(1527),t=n(7214);const a={slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},i=void 0,s={permalink:"/illa-website/blog/react-error-boundary",source:"@site/blog/react-error-boundary/react-error-boundary.md",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",date:"2024-02-27T10:00:00.000Z",formattedDate:"February 27, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:13.86,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},unlisted:!1,nextItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},relatedPosts:[{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},c={authorsImageUrls:[void 0]},l=[{value:"What is React Error Boundary?",id:"what-is-react-error-boundary",level:2},{value:"Basic Usage",id:"basic-usage",level:2},{value:"Implementing Error Boundaries: Common Design Patterns",id:"implementing-error-boundaries-common-design-patterns",level:3},{value:"Component-Level Error Boundaries",id:"component-level-error-boundaries",level:3},{value:"Layout-Level Error Boundaries",id:"layout-level-error-boundaries",level:3},{value:"Top-Level Error Boundaries",id:"top-level-error-boundaries",level:3},{value:"Using the react-error-boundary Library",id:"using-the-react-error-boundary-library",level:2},{value:"ErrorBoundary Component",id:"errorboundary-component",level:2},{value:"useErrorHandler Hook",id:"useerrorhandler-hook",level:2},{value:"withErrorBoundary HOC",id:"witherrorboundary-hoc",level:2},{value:"Benefits",id:"benefits",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const r={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.p,{children:"When building applications, errors are inevitable. Even with the best coding practices, unexpected runtime errors can occur, causing the application to crash. Therefore, handling errors is crucial. This article will explore how to capture and handle errors in React and introduce a more powerful way to handle React errors!"}),"\n",(0,o.jsx)(r.p,{children:"Why capture errors in React? Since React 16, if an error occurs during the lifecycle and is not caught, the entire application will unmount itself, leading to a crash. Before this, even small errors in components would remain on the screen, but now, certain trivial parts of the UI or uncaught errors from uncontrollable third-party libraries can cause the page to crash, resulting in a white screen and affecting the user experience. Thus, capturing and handling errors in React is essential."}),"\n",(0,o.jsxs)(r.p,{children:["In JavaScript, we can use ",(0,o.jsx)(r.code,{children:"try...catch"})," to catch errors, for example:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'const fetchData = async () => {\n try {\n return await fetch("https://some-url-that-might-fail.com"); \n } catch (error) {\n console.error(error); \n return error;\n }\n};\n'})}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"try...catch"})," is only suitable for imperative code, such as data fetching; it is not suitable for declarative code, such as JSX written within components. So, how do we capture errors in React? Fortunately, React 16 introduced a new concept: React Error Boundary. Let's see what it is and how to use it."]}),"\n",(0,o.jsx)(r.h2,{id:"what-is-react-error-boundary",children:"What is React Error Boundary?"}),"\n",(0,o.jsxs)(r.p,{children:["React Error Boundary (error boundary) is a way to handle errors in a React application. It is a React component that can capture JavaScript errors at any point in the child component tree, log these errors, and display a fallback UI instead of a crashed component tree (white screen). They are like a JavaScript ",(0,o.jsx)(r.code,{children:"catch {}"})," block but only for components."]}),"\n",(0,o.jsx)(r.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,o.jsx)(r.p,{children:"Before the introduction of error boundaries, errors within components would propagate and eventually lead to a white screen or an erroneous UI, affecting the user experience. However, with error boundaries, these unhandled errors can be effectively contained and managed."}),"\n",(0,o.jsx)(r.p,{children:"We can set error boundaries across the entire application or have more granular control on individual components. It's important to note that error boundaries only capture errors during rendering, lifecycle methods, and constructors, but not the following:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["Event handling (for this, you need to use the conventional ",(0,o.jsx)(r.code,{children:"try/catch"})," block)"]}),"\n",(0,o.jsxs)(r.li,{children:["Asynchronous code (e.g., callbacks for ",(0,o.jsx)(r.code,{children:"setTimeout"})," or ",(0,o.jsx)(r.code,{children:"requestAnimationFrame"}),")"]}),"\n",(0,o.jsx)(r.li,{children:"Server-side rendering"}),"\n",(0,o.jsx)(r.li,{children:"Errors occurring within the error boundary itself rather than its child components"}),"\n"]}),"\n",(0,o.jsx)(r.p,{children:"Error boundaries were introduced in React v16. To use error boundaries, you need to define a class component and add one or both of the following lifecycle methods:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"}),": This lifecycle method is called after an error is thrown to render a fallback UI. It is called during the rendering phase, so side effects are not allowed."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"componentDidCatch()"}),": This method is used to log error information. It is called during the commit phase, so side effects can be executed."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["Here's an example of an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," class component that implements both ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," and ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," lifecycle methods:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"class ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n // Update state to display the fallback UI on the next render.\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n // Render any custom fallback UI\n return
Oops! Something went wrong.
;\n }\n\n return this.props.children; \n }\n}\n\n// Using in a component\nclass App extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["Here, an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," error boundary component is defined. Its constructor initializes the state object and sets the ",(0,o.jsx)(r.code,{children:"hasError"})," property to ",(0,o.jsx)(r.code,{children:"false"}),", indicating no error has occurred."]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," method is called when an error is caught. It takes an ",(0,o.jsx)(r.code,{children:"error"})," object as a parameter and returns a new state object, setting ",(0,o.jsx)(r.code,{children:"hasError"})," to ",(0,o.jsx)(r.code,{children:"true"})," so that the fallback UI is displayed on the next render."]}),"\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," method is called after an error is caught. In this example, it logs the error and error information to the console."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["In the ",(0,o.jsx)(r.code,{children:"render()"})," method, the rendering of the original child components or the fallback UI is determined based on the value of ",(0,o.jsx)(r.code,{children:"hasError"}),". If ",(0,o.jsx)(r.code,{children:"hasError"})," is true, it renders ",(0,o.jsx)(r.code,{children:"
Oops! Something went wrong.
"}),"; otherwise, it renders the original child components. When using error boundaries in React components, you can wrap any component that needs error boundary protection with ",(0,o.jsx)(r.code,{children:""}),". This way, a crash in a small component won't cause the entire application to crash, resulting in a white screen. Only the component with the error will not render normally but will display the fallback UI, making it easier for us to quickly identify which component has a problem."]}),"\n",(0,o.jsx)(r.h3,{id:"implementing-error-boundaries-common-design-patterns",children:"Implementing Error Boundaries: Common Design Patterns"}),"\n",(0,o.jsx)(r.p,{children:"When implementing React error boundaries, you can use one of the following three design patterns based on your specific needs."}),"\n",(0,o.jsx)(r.h3,{id:"component-level-error-boundaries",children:"Component-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"This approach involves wrapping individual components within an error boundary. It provides a high level of granularity, allowing for the separate handling of errors within each component. If a component crashes, the error boundary can catch the error and prevent it from propagating up the component tree. This means that only the crashed component is affected, and the rest of the application can continue to run normally."}),"\n",(0,o.jsx)(r.p,{children:"Component-level error boundaries are particularly useful when you have components that are isolated from each other and do not share state. If one component fails to render, it does not affect the others. However, if many components require their own error boundaries, this method can lead to a lot of duplicated code."}),"\n",(0,o.jsx)(r.h3,{id:"layout-level-error-boundaries",children:"Layout-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Layout-level error boundaries are placed higher in the component tree, typically wrapping groups of related components. This is a good choice when you have closely related components that share a common state."}),"\n",(0,o.jsx)(r.p,{children:"When an error occurs in one of the components, a layout-level error boundary can catch it and display an error message or a fallback UI for the entire group of components. This can be a good way to handle errors that affect a whole section of the application, such as a sidebar or dashboard."}),"\n",(0,o.jsx)(r.p,{children:"However, layout-level error boundaries are coarser than component-level boundaries. An error in one component can affect the entire group of components, even if the other components are functioning correctly."}),"\n",(0,o.jsx)(r.h3,{id:"top-level-error-boundaries",children:"Top-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Top-level error boundaries are placed at the very top of the component tree. They are a general solution that can handle any errors that occur in the application. This approach ensures that if an error happens anywhere in the application, it can be caught and handled gracefully."}),"\n",(0,o.jsx)(r.p,{children:"This can prevent the entire application from crashing when an error occurs. However, top-level error boundaries are the coarsest method. An error can affect the entire application, not just the component or group of components where the error occurred."}),"\n",(0,o.jsxs)(r.h2,{id:"using-the-react-error-boundary-library",children:["Using the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," Library"]}),"\n",(0,o.jsxs)(r.p,{children:["As mentioned earlier, React Error Boundaries have some limitations and cannot handle certain special cases. Below is a more powerful way to handle errors in React: the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," library. It is a small React error handling library that provides enhanced error handling capabilities and more flexible methods to deal with errors in React applications, allowing developers to create stronger and user-friendly error handling mechanisms."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," uses a more modern approach, adopting React Hooks and functional components, aligning with the current trends in React development. It uses a simple component called ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," to wrap potentially error-prone code."]}),"\n",(0,o.jsxs)(r.p,{children:["Here are the props provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"FallbackComponent"}),": Used to specify a custom component to render when an error occurs within the error boundary. It offers flexibility to create a visually appealing and informative user interface to display errors and provide any necessary actions."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackRender"}),": Similar to ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", this prop is used to define a custom rendering function to render the error fallback interface. It provides more control over the rendering process and allows for more advanced error handling logic."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onError"}),": It accepts a callback function that is called when the error boundary catches an error, passing the error object and component stack trace information. It allows us to perform additional actions, such as logging errors or sending error reports to external services."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onReset"}),": It accepts a callback function that is triggered after the error boundary successfully resets. It can be used to perform cleanup operations or update the component's state after an error is recovered."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackProps"}),": Allows passing additional ",(0,o.jsx)(r.code,{children:"props"})," to the ",(0,o.jsx)(r.code,{children:"FallbackComponent"})," or ",(0,o.jsx)(r.code,{children:"fallbackRender"})," function. It can be used to provide context or additional data to the error fallback interface."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"retry"}),": A boolean value that determines whether the error boundary allows retrying the operation that caused the error. When set to true, the ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function can be called from the error fallback interface to retry the operation."]}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"errorboundary-component",children:"ErrorBoundary Component"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has a prop called ",(0,o.jsx)(r.code,{children:"fallbackRender"}),", which accepts a function or a React element to display when an error is caught. Additionally, it provides a ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop that can reset the component's state when specific props change."]}),"\n",(0,o.jsxs)(r.p,{children:["The beauty of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is that it avoids the need to manually write class components and handle state, doing all the work in the background, allowing developers to focus on building the application. Here's an example of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a component:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction MyFallbackComponent({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent() {\n // Some component logic that might throw a JavaScript error\n}\n\nfunction App() {\n return (\n {\n // Cleanup application state\n }}\n resetKeys={['someKey']}\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, when an error is caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),", it renders ",(0,o.jsx)(r.code,{children:"MyFallbackComponent"}),". It displays the error message and provides a button to reset the error state and attempt to render the component again. The ",(0,o.jsx)(r.code,{children:"onReset"})," prop is used to clean up any side effects that occurred before the error was thrown, while the ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is used to control when the component state should be reset."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"onError"})," prop of ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," is a function that is called whenever an error is caught. This property can be used to report errors:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'// Error reporting function\nfunction logErrorToService(error, info) {\n // Error reporting logic...\n console.error("Caught an error:", error, info);\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n'})}),"\n",(0,o.jsxs)(r.p,{children:["One of the most powerful features of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is the ability to reset the error boundary state, clearing the error and attempting to re-render the component tree. This is very useful when the error is likely transient, such as a network error caused by a temporary disconnection."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function provided to the fallback component can be used to reset the error boundary. For example, this function can be called on a button click, allowing users to manually retry a failed operation."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," can accept an ",(0,o.jsx)(r.code,{children:"onReset"})," prop, which is a function called before the error state is reset. This function is useful for performing any cleanup or state reset operations before the component is re-rendered after an error."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is an array of values that, when changed, trigger a reset of the error boundary. This is useful when you know that changing certain ",(0,o.jsx)(r.code,{children:"props"})," or state values should resolve the error. Here's an example of how to use these properties:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent({ someKey }) {\n // Some component logic that might throw a JS error\n}\n\nfunction App() {\n const [someKey, setSomeKey] = React.useState(null)\n\n return (\n setSomeKey(null)} // Reset application state here\n resetKeys={[someKey]} // Reset error boundary when someKey changes\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, if an error is caught within ",(0,o.jsx)(r.code,{children:"MyComponent"}),", the ",(0,o.jsx)(r.code,{children:"ErrorFallback"}),' component is rendered, displaying the error message and a "Try Again" button. When this button is clicked, it calls ',(0,o.jsx)(r.code,{children:"resetErrorBoundary"}),", triggering the ",(0,o.jsx)(r.code,{children:"onReset"})," function and clearing the error state, allowing ",(0,o.jsx)(r.code,{children:"MyComponent"})," to render again. If the ",(0,o.jsx)(r.code,{children:"someKey prop"})," changes, the error boundary will also reset, providing a flexible way to recover from errors based on changes in the application state."]}),"\n",(0,o.jsx)(r.h2,{id:"useerrorhandler-hook",children:"useErrorHandler Hook"}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," also provides a ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook, which is a custom React Hook that allows errors to be thrown from anywhere in a functional component. The thrown errors will be caught by the nearest error boundary, just as errors thrown from lifecycle methods or render functions in class components are caught by error boundaries."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook is particularly useful when dealing with asynchronous code, as errors thrown in this manner are not caught by component error boundaries. Here's an example of using ",(0,o.jsx)(r.code,{children:"useErrorHandler"}),":"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { useErrorHandler } from 'react-error-boundary'\n\nfunction MyComponent() {\n const handleError = useErrorHandler()\n\n async function fetchData() {\n try {\n // Fetch data\n } catch (error) {\n handleError(error)\n }\n }\n\n return {\n ...\n };\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," uses ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," to obtain a function for handling errors. The function is an asynchronous function for fetching data and catching errors. If an error occurs, it is passed to the ",(0,o.jsx)(r.code,{children:"handleError"})," function, which throws the error so it can be caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"useErrorHandler"})," provides a powerful way to handle errors in functional components. It works seamlessly with the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component from ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", making error handling in React more straightforward and clear."]}),"\n",(0,o.jsx)(r.h2,{id:"witherrorboundary-hoc",children:"withErrorBoundary HOC"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," package also offers a solution with a ",(0,o.jsx)(r.code,{children:"withErrorBoundary HOC"})," (Higher-Order Component). It is an HOC that wraps a given component to catch errors within that component. The advantage of this approach is that it adds an error boundary to a component without changing its original implementation or adding extra JSX to the component tree."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { withErrorBoundary } from 'react-error-boundary'\n\nfunction MyComponent() {\n // Component logic\n}\n\nconst MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, {\n FallbackComponent: ErrorFallback,\n onError: logErrorToService,\n onReset: handleReset,\n resetKeys: ['someKey']\n});\n\nfunction App() {\n return \n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," is wrapped in an error boundary using ",(0,o.jsx)(r.code,{children:"withErrorBoundary"}),". The second argument to ",(0,o.jsx)(r.code,{children:"withErrorBoundary"})," is an optional object that can provide the same ",(0,o.jsx)(r.code,{children:"props"})," as the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component: ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", ",(0,o.jsx)(r.code,{children:"onError"}),", ",(0,o.jsx)(r.code,{children:"onReset"}),", and ",(0,o.jsx)(r.code,{children:"resetKeys"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:["This HOC approach is an elegant solution for adding error boundaries to components without modifying their implementation, especially useful for class components where ",(0,o.jsx)(r.code,{children:"Hooks"})," cannot be used. It demonstrates the flexibility of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in adapting to different coding styles and React development paradigms."]}),"\n",(0,o.jsx)(r.h2,{id:"benefits",children:"Benefits"}),"\n",(0,o.jsxs)(r.p,{children:["Having looked at the basic usage of ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", let's summarize the benefits of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:"Easy to use: The library provides a simple and intuitive API that is easy to understand and use. It abstracts the complexity of error handling and presents a clear and straightforward way for developers to manage errors."}),"\n",(0,o.jsx)(r.li,{children:"Functional components friendly: Unlike traditional React error boundaries that require class components, react-error-boundary is designed specifically for functional components. It uses Hooks, aligning with the current trends in React development."}),"\n",(0,o.jsx)(r.li,{children:"Flexible: The library offers multiple ways to use error boundaries, including as components, higher-order components (HOCs), and custom Hooks. This flexibility allows developers to choose the best method based on their needs and coding style."}),"\n",(0,o.jsx)(r.li,{children:"Customizable fallback UI: The library allows for a customizable fallback UI to be displayed when an error is caught. This provides a better user experience than an application crash or a blank screen."}),"\n",(0,o.jsx)(r.li,{children:"Reset functionality: The library can reset the error state, allowing the application to recover from errors. This feature is particularly useful for transient errors that can be resolved without a full page reload."}),"\n",(0,o.jsxs)(r.li,{children:["Error reporting: Errors can be logged to an error reporting service through the ",(0,o.jsx)(r.code,{children:"onError"})," prop, providing valuable information for debugging and problem-solving."]}),"\n",(0,o.jsx)(r.li,{children:"Community and maintenance: The library is widely used in the React community and actively maintained, so regular updates and improvements can be expected."}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsxs)(r.p,{children:["Whether using class components or functional components, ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has got you covered. Its flexible API includes components, higher-order components, and custom Hooks, providing multiple ways to integrate error handling into your components. Additionally, it supports custom fallback UIs, error reset functionality, and error reporting, ensuring a smooth user experience even when problems arise."]}),"\n",(0,o.jsxs)(r.p,{children:["Using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features."]})]})}function h(e={}){const{wrapper:r}={...(0,t.a)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,r,n)=>{n.d(r,{Z:()=>s,a:()=>i});var o=n(959);const t={},a=o.createContext(t);function i(e){const r=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(a.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9847],{17:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var o=n(1527),t=n(7214);const a={slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},i=void 0,s={permalink:"/illa-website/blog/react-error-boundary",source:"@site/blog/react-error-boundary/react-error-boundary.md",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",date:"2024-02-27T10:00:00.000Z",formattedDate:"February 27, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:13.86,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},unlisted:!1,nextItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},relatedPosts:[{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"}],authorPosts:[]},c={authorsImageUrls:[void 0]},l=[{value:"What is React Error Boundary?",id:"what-is-react-error-boundary",level:2},{value:"Basic Usage",id:"basic-usage",level:2},{value:"Implementing Error Boundaries: Common Design Patterns",id:"implementing-error-boundaries-common-design-patterns",level:3},{value:"Component-Level Error Boundaries",id:"component-level-error-boundaries",level:3},{value:"Layout-Level Error Boundaries",id:"layout-level-error-boundaries",level:3},{value:"Top-Level Error Boundaries",id:"top-level-error-boundaries",level:3},{value:"Using the react-error-boundary Library",id:"using-the-react-error-boundary-library",level:2},{value:"ErrorBoundary Component",id:"errorboundary-component",level:2},{value:"useErrorHandler Hook",id:"useerrorhandler-hook",level:2},{value:"withErrorBoundary HOC",id:"witherrorboundary-hoc",level:2},{value:"Benefits",id:"benefits",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const r={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.p,{children:"When building applications, errors are inevitable. Even with the best coding practices, unexpected runtime errors can occur, causing the application to crash. Therefore, handling errors is crucial. This article will explore how to capture and handle errors in React and introduce a more powerful way to handle React errors!"}),"\n",(0,o.jsx)(r.p,{children:"Why capture errors in React? Since React 16, if an error occurs during the lifecycle and is not caught, the entire application will unmount itself, leading to a crash. Before this, even small errors in components would remain on the screen, but now, certain trivial parts of the UI or uncaught errors from uncontrollable third-party libraries can cause the page to crash, resulting in a white screen and affecting the user experience. Thus, capturing and handling errors in React is essential."}),"\n",(0,o.jsxs)(r.p,{children:["In JavaScript, we can use ",(0,o.jsx)(r.code,{children:"try...catch"})," to catch errors, for example:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'const fetchData = async () => {\n try {\n return await fetch("https://some-url-that-might-fail.com"); \n } catch (error) {\n console.error(error); \n return error;\n }\n};\n'})}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"try...catch"})," is only suitable for imperative code, such as data fetching; it is not suitable for declarative code, such as JSX written within components. So, how do we capture errors in React? Fortunately, React 16 introduced a new concept: React Error Boundary. Let's see what it is and how to use it."]}),"\n",(0,o.jsx)(r.h2,{id:"what-is-react-error-boundary",children:"What is React Error Boundary?"}),"\n",(0,o.jsxs)(r.p,{children:["React Error Boundary (error boundary) is a way to handle errors in a React application. It is a React component that can capture JavaScript errors at any point in the child component tree, log these errors, and display a fallback UI instead of a crashed component tree (white screen). They are like a JavaScript ",(0,o.jsx)(r.code,{children:"catch {}"})," block but only for components."]}),"\n",(0,o.jsx)(r.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,o.jsx)(r.p,{children:"Before the introduction of error boundaries, errors within components would propagate and eventually lead to a white screen or an erroneous UI, affecting the user experience. However, with error boundaries, these unhandled errors can be effectively contained and managed."}),"\n",(0,o.jsx)(r.p,{children:"We can set error boundaries across the entire application or have more granular control on individual components. It's important to note that error boundaries only capture errors during rendering, lifecycle methods, and constructors, but not the following:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["Event handling (for this, you need to use the conventional ",(0,o.jsx)(r.code,{children:"try/catch"})," block)"]}),"\n",(0,o.jsxs)(r.li,{children:["Asynchronous code (e.g., callbacks for ",(0,o.jsx)(r.code,{children:"setTimeout"})," or ",(0,o.jsx)(r.code,{children:"requestAnimationFrame"}),")"]}),"\n",(0,o.jsx)(r.li,{children:"Server-side rendering"}),"\n",(0,o.jsx)(r.li,{children:"Errors occurring within the error boundary itself rather than its child components"}),"\n"]}),"\n",(0,o.jsx)(r.p,{children:"Error boundaries were introduced in React v16. To use error boundaries, you need to define a class component and add one or both of the following lifecycle methods:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"}),": This lifecycle method is called after an error is thrown to render a fallback UI. It is called during the rendering phase, so side effects are not allowed."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"componentDidCatch()"}),": This method is used to log error information. It is called during the commit phase, so side effects can be executed."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["Here's an example of an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," class component that implements both ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," and ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," lifecycle methods:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"class ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n // Update state to display the fallback UI on the next render.\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n // Render any custom fallback UI\n return
Oops! Something went wrong.
;\n }\n\n return this.props.children; \n }\n}\n\n// Using in a component\nclass App extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["Here, an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," error boundary component is defined. Its constructor initializes the state object and sets the ",(0,o.jsx)(r.code,{children:"hasError"})," property to ",(0,o.jsx)(r.code,{children:"false"}),", indicating no error has occurred."]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," method is called when an error is caught. It takes an ",(0,o.jsx)(r.code,{children:"error"})," object as a parameter and returns a new state object, setting ",(0,o.jsx)(r.code,{children:"hasError"})," to ",(0,o.jsx)(r.code,{children:"true"})," so that the fallback UI is displayed on the next render."]}),"\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," method is called after an error is caught. In this example, it logs the error and error information to the console."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["In the ",(0,o.jsx)(r.code,{children:"render()"})," method, the rendering of the original child components or the fallback UI is determined based on the value of ",(0,o.jsx)(r.code,{children:"hasError"}),". If ",(0,o.jsx)(r.code,{children:"hasError"})," is true, it renders ",(0,o.jsx)(r.code,{children:"
Oops! Something went wrong.
"}),"; otherwise, it renders the original child components. When using error boundaries in React components, you can wrap any component that needs error boundary protection with ",(0,o.jsx)(r.code,{children:""}),". This way, a crash in a small component won't cause the entire application to crash, resulting in a white screen. Only the component with the error will not render normally but will display the fallback UI, making it easier for us to quickly identify which component has a problem."]}),"\n",(0,o.jsx)(r.h3,{id:"implementing-error-boundaries-common-design-patterns",children:"Implementing Error Boundaries: Common Design Patterns"}),"\n",(0,o.jsx)(r.p,{children:"When implementing React error boundaries, you can use one of the following three design patterns based on your specific needs."}),"\n",(0,o.jsx)(r.h3,{id:"component-level-error-boundaries",children:"Component-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"This approach involves wrapping individual components within an error boundary. It provides a high level of granularity, allowing for the separate handling of errors within each component. If a component crashes, the error boundary can catch the error and prevent it from propagating up the component tree. This means that only the crashed component is affected, and the rest of the application can continue to run normally."}),"\n",(0,o.jsx)(r.p,{children:"Component-level error boundaries are particularly useful when you have components that are isolated from each other and do not share state. If one component fails to render, it does not affect the others. However, if many components require their own error boundaries, this method can lead to a lot of duplicated code."}),"\n",(0,o.jsx)(r.h3,{id:"layout-level-error-boundaries",children:"Layout-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Layout-level error boundaries are placed higher in the component tree, typically wrapping groups of related components. This is a good choice when you have closely related components that share a common state."}),"\n",(0,o.jsx)(r.p,{children:"When an error occurs in one of the components, a layout-level error boundary can catch it and display an error message or a fallback UI for the entire group of components. This can be a good way to handle errors that affect a whole section of the application, such as a sidebar or dashboard."}),"\n",(0,o.jsx)(r.p,{children:"However, layout-level error boundaries are coarser than component-level boundaries. An error in one component can affect the entire group of components, even if the other components are functioning correctly."}),"\n",(0,o.jsx)(r.h3,{id:"top-level-error-boundaries",children:"Top-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Top-level error boundaries are placed at the very top of the component tree. They are a general solution that can handle any errors that occur in the application. This approach ensures that if an error happens anywhere in the application, it can be caught and handled gracefully."}),"\n",(0,o.jsx)(r.p,{children:"This can prevent the entire application from crashing when an error occurs. However, top-level error boundaries are the coarsest method. An error can affect the entire application, not just the component or group of components where the error occurred."}),"\n",(0,o.jsxs)(r.h2,{id:"using-the-react-error-boundary-library",children:["Using the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," Library"]}),"\n",(0,o.jsxs)(r.p,{children:["As mentioned earlier, React Error Boundaries have some limitations and cannot handle certain special cases. Below is a more powerful way to handle errors in React: the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," library. It is a small React error handling library that provides enhanced error handling capabilities and more flexible methods to deal with errors in React applications, allowing developers to create stronger and user-friendly error handling mechanisms."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," uses a more modern approach, adopting React Hooks and functional components, aligning with the current trends in React development. It uses a simple component called ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," to wrap potentially error-prone code."]}),"\n",(0,o.jsxs)(r.p,{children:["Here are the props provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"FallbackComponent"}),": Used to specify a custom component to render when an error occurs within the error boundary. It offers flexibility to create a visually appealing and informative user interface to display errors and provide any necessary actions."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackRender"}),": Similar to ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", this prop is used to define a custom rendering function to render the error fallback interface. It provides more control over the rendering process and allows for more advanced error handling logic."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onError"}),": It accepts a callback function that is called when the error boundary catches an error, passing the error object and component stack trace information. It allows us to perform additional actions, such as logging errors or sending error reports to external services."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onReset"}),": It accepts a callback function that is triggered after the error boundary successfully resets. It can be used to perform cleanup operations or update the component's state after an error is recovered."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackProps"}),": Allows passing additional ",(0,o.jsx)(r.code,{children:"props"})," to the ",(0,o.jsx)(r.code,{children:"FallbackComponent"})," or ",(0,o.jsx)(r.code,{children:"fallbackRender"})," function. It can be used to provide context or additional data to the error fallback interface."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"retry"}),": A boolean value that determines whether the error boundary allows retrying the operation that caused the error. When set to true, the ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function can be called from the error fallback interface to retry the operation."]}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"errorboundary-component",children:"ErrorBoundary Component"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has a prop called ",(0,o.jsx)(r.code,{children:"fallbackRender"}),", which accepts a function or a React element to display when an error is caught. Additionally, it provides a ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop that can reset the component's state when specific props change."]}),"\n",(0,o.jsxs)(r.p,{children:["The beauty of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is that it avoids the need to manually write class components and handle state, doing all the work in the background, allowing developers to focus on building the application. Here's an example of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a component:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction MyFallbackComponent({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent() {\n // Some component logic that might throw a JavaScript error\n}\n\nfunction App() {\n return (\n {\n // Cleanup application state\n }}\n resetKeys={['someKey']}\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, when an error is caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),", it renders ",(0,o.jsx)(r.code,{children:"MyFallbackComponent"}),". It displays the error message and provides a button to reset the error state and attempt to render the component again. The ",(0,o.jsx)(r.code,{children:"onReset"})," prop is used to clean up any side effects that occurred before the error was thrown, while the ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is used to control when the component state should be reset."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"onError"})," prop of ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," is a function that is called whenever an error is caught. This property can be used to report errors:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'// Error reporting function\nfunction logErrorToService(error, info) {\n // Error reporting logic...\n console.error("Caught an error:", error, info);\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n'})}),"\n",(0,o.jsxs)(r.p,{children:["One of the most powerful features of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is the ability to reset the error boundary state, clearing the error and attempting to re-render the component tree. This is very useful when the error is likely transient, such as a network error caused by a temporary disconnection."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function provided to the fallback component can be used to reset the error boundary. For example, this function can be called on a button click, allowing users to manually retry a failed operation."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," can accept an ",(0,o.jsx)(r.code,{children:"onReset"})," prop, which is a function called before the error state is reset. This function is useful for performing any cleanup or state reset operations before the component is re-rendered after an error."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is an array of values that, when changed, trigger a reset of the error boundary. This is useful when you know that changing certain ",(0,o.jsx)(r.code,{children:"props"})," or state values should resolve the error. Here's an example of how to use these properties:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent({ someKey }) {\n // Some component logic that might throw a JS error\n}\n\nfunction App() {\n const [someKey, setSomeKey] = React.useState(null)\n\n return (\n setSomeKey(null)} // Reset application state here\n resetKeys={[someKey]} // Reset error boundary when someKey changes\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, if an error is caught within ",(0,o.jsx)(r.code,{children:"MyComponent"}),", the ",(0,o.jsx)(r.code,{children:"ErrorFallback"}),' component is rendered, displaying the error message and a "Try Again" button. When this button is clicked, it calls ',(0,o.jsx)(r.code,{children:"resetErrorBoundary"}),", triggering the ",(0,o.jsx)(r.code,{children:"onReset"})," function and clearing the error state, allowing ",(0,o.jsx)(r.code,{children:"MyComponent"})," to render again. If the ",(0,o.jsx)(r.code,{children:"someKey prop"})," changes, the error boundary will also reset, providing a flexible way to recover from errors based on changes in the application state."]}),"\n",(0,o.jsx)(r.h2,{id:"useerrorhandler-hook",children:"useErrorHandler Hook"}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," also provides a ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook, which is a custom React Hook that allows errors to be thrown from anywhere in a functional component. The thrown errors will be caught by the nearest error boundary, just as errors thrown from lifecycle methods or render functions in class components are caught by error boundaries."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook is particularly useful when dealing with asynchronous code, as errors thrown in this manner are not caught by component error boundaries. Here's an example of using ",(0,o.jsx)(r.code,{children:"useErrorHandler"}),":"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { useErrorHandler } from 'react-error-boundary'\n\nfunction MyComponent() {\n const handleError = useErrorHandler()\n\n async function fetchData() {\n try {\n // Fetch data\n } catch (error) {\n handleError(error)\n }\n }\n\n return {\n ...\n };\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," uses ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," to obtain a function for handling errors. The function is an asynchronous function for fetching data and catching errors. If an error occurs, it is passed to the ",(0,o.jsx)(r.code,{children:"handleError"})," function, which throws the error so it can be caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"useErrorHandler"})," provides a powerful way to handle errors in functional components. It works seamlessly with the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component from ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", making error handling in React more straightforward and clear."]}),"\n",(0,o.jsx)(r.h2,{id:"witherrorboundary-hoc",children:"withErrorBoundary HOC"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," package also offers a solution with a ",(0,o.jsx)(r.code,{children:"withErrorBoundary HOC"})," (Higher-Order Component). It is an HOC that wraps a given component to catch errors within that component. The advantage of this approach is that it adds an error boundary to a component without changing its original implementation or adding extra JSX to the component tree."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { withErrorBoundary } from 'react-error-boundary'\n\nfunction MyComponent() {\n // Component logic\n}\n\nconst MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, {\n FallbackComponent: ErrorFallback,\n onError: logErrorToService,\n onReset: handleReset,\n resetKeys: ['someKey']\n});\n\nfunction App() {\n return \n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," is wrapped in an error boundary using ",(0,o.jsx)(r.code,{children:"withErrorBoundary"}),". The second argument to ",(0,o.jsx)(r.code,{children:"withErrorBoundary"})," is an optional object that can provide the same ",(0,o.jsx)(r.code,{children:"props"})," as the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component: ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", ",(0,o.jsx)(r.code,{children:"onError"}),", ",(0,o.jsx)(r.code,{children:"onReset"}),", and ",(0,o.jsx)(r.code,{children:"resetKeys"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:["This HOC approach is an elegant solution for adding error boundaries to components without modifying their implementation, especially useful for class components where ",(0,o.jsx)(r.code,{children:"Hooks"})," cannot be used. It demonstrates the flexibility of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in adapting to different coding styles and React development paradigms."]}),"\n",(0,o.jsx)(r.h2,{id:"benefits",children:"Benefits"}),"\n",(0,o.jsxs)(r.p,{children:["Having looked at the basic usage of ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", let's summarize the benefits of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:"Easy to use: The library provides a simple and intuitive API that is easy to understand and use. It abstracts the complexity of error handling and presents a clear and straightforward way for developers to manage errors."}),"\n",(0,o.jsx)(r.li,{children:"Functional components friendly: Unlike traditional React error boundaries that require class components, react-error-boundary is designed specifically for functional components. It uses Hooks, aligning with the current trends in React development."}),"\n",(0,o.jsx)(r.li,{children:"Flexible: The library offers multiple ways to use error boundaries, including as components, higher-order components (HOCs), and custom Hooks. This flexibility allows developers to choose the best method based on their needs and coding style."}),"\n",(0,o.jsx)(r.li,{children:"Customizable fallback UI: The library allows for a customizable fallback UI to be displayed when an error is caught. This provides a better user experience than an application crash or a blank screen."}),"\n",(0,o.jsx)(r.li,{children:"Reset functionality: The library can reset the error state, allowing the application to recover from errors. This feature is particularly useful for transient errors that can be resolved without a full page reload."}),"\n",(0,o.jsxs)(r.li,{children:["Error reporting: Errors can be logged to an error reporting service through the ",(0,o.jsx)(r.code,{children:"onError"})," prop, providing valuable information for debugging and problem-solving."]}),"\n",(0,o.jsx)(r.li,{children:"Community and maintenance: The library is widely used in the React community and actively maintained, so regular updates and improvements can be expected."}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsxs)(r.p,{children:["Whether using class components or functional components, ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has got you covered. Its flexible API includes components, higher-order components, and custom Hooks, providing multiple ways to integrate error handling into your components. Additionally, it supports custom fallback UIs, error reset functionality, and error reporting, ensuring a smooth user experience even when problems arise."]}),"\n",(0,o.jsxs)(r.p,{children:["Using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features."]})]})}function h(e={}){const{wrapper:r}={...(0,t.a)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,r,n)=>{n.d(r,{Z:()=>s,a:()=>i});var o=n(959);const t={},a=o.createContext(t);function i(e){const r=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(a.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/88d8af9f.3fb9b665.js b/assets/js/88d8af9f.3fb9b665.js
deleted file mode 100644
index d185d42559..0000000000
--- a/assets/js/88d8af9f.3fb9b665.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5038],{9129:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(1527),o=i(7214);const s={title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},a=void 0,r={permalink:"/illa-website/blog/mui-2024",source:"@site/blog/mui-2024/mui.md",title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"UI Library",permalink:"/illa-website/blog/tags/ui-library"},{label:"Shadcn UI",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"React",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.255,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",permalink:"/illa-website/blog/lowcode-vs-traditional"},nextItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},relatedPosts:[{title:"Shadcn vs MUI: A Comparative Analysis of Strengths and Weaknesses",description:"2024 has arrived, and the ecosystem of React component libraries remains thriving.",permalink:"/illa-website/blog/shadcn-vs-mui",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.12,date:"2024-01-03T10:00:00.000Z"},{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"},{title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",permalink:"/illa-website/blog/internal-tool",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.4,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of MUI",id:"features-of-mui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains highly prosperous. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,t.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,t.jsx)(n.p,{children:"In general, every company building web applications tends to select a component library. These libraries address a significant amount of repetitive work, offering readily usable components such as Select, Input, CheckBox, and more. These components, customizable through styles or pre-existing attractive styles, enable the rapid creation of beautiful websites without the need to build extensive foundational features from scratch."}),"\n",(0,t.jsx)(n.p,{children:"To summarize, component libraries are typically used in two scenarios:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"External tools: Directly targeted at company users, usually adhering to the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,t.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, focusing on aesthetic design while prioritizing rapid functionality implementation."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Next, we will analyze two component libraries based on the following points:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Design"}),"\n",(0,t.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,t.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,t.jsx)(n.h2,{id:"features-of-mui",children:"Features of MUI"}),"\n",(0,t.jsx)(n.p,{children:"Some detailed data about MUI:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\u2b50 Github Stars: 90k"}),"\n",(0,t.jsx)(n.li,{children:"\u23ec NPM Downloads: 3,263,852 downloads per week"}),"\n",(0,t.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Nov 6, 2014"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI, as a longstanding project maintained since 2014, boasts almost a decade of stability. Its high star count and weekly download numbers ensure that the community remains consistently active."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/mui.png",alt:"mui"})}),"\n",(0,t.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,t.jsx)(n.p,{children:"In terms of design, MUI strictly adheres to Google's renowned Material Design. MUI's customization capabilities are extensive, catering to a wide range of internal and external scenarios. Many well-known open-source projects use MUI for front-end development. For most functionalities, MUI provides comprehensive support."}),"\n",(0,t.jsx)(n.p,{children:"In addition to common features like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Colors"}),"\n",(0,t.jsx)(n.li,{children:"Border radii"}),"\n",(0,t.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI supports complete configurations of fonts, font sizes, colors, and margins, making it a powerful tool as a project with ten years of development."}),"\n",(0,t.jsx)(n.p,{children:"Regarding CSS support, MUI has its custom system, utilizing emotionjs for style adjustments in the overall layout. This may come with a learning curve and may not be as developer-friendly for direct development, requiring documentation consultation for certain style modifications."}),"\n",(0,t.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,t.jsx)(n.p,{children:"MUI's component types are highly complex, divided into several dimensions:"}),"\n",(0,t.jsx)(n.p,{children:"These include:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"MUI Core: Basic functional components of MUI, including a multitude of foundational components and a style system."}),"\n",(0,t.jsx)(n.li,{children:"MUI X: High-performance and complex components of MUI, including high-performance tables, charts, etc."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If you are developing a highly complex system, you can use MUI's full suite solution. However, MUI X is a paid component library, and a subscription fee may be required."}),"\n",(0,t.jsx)(n.p,{children:"MUI is a heavyweight repository with extensive code and a long maintenance history. Its high customizability makes it suitable for large projects. In the MUI repository, you can find a wealth of features."}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,t.jsx)(n.p,{children:"If you want to develop large projects, have high customization requirements, and wish to use high-performance data components and chart components, especially in scenarios with high business complexity and are willing to subscribe to MUI X, it is recommended to use MUI for development. Its flexible configuration and plethora of components can fully meet your requirements."}),"\n",(0,t.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,t.jsx)(n.p,{children:"If you need a lightweight framework and prefer to use a CSS-only solution for layout adjustments, it is not recommended here. MUI has a comprehensive proprietary design system, comes with a certain learning curve, and Material Design's aesthetics may not suit everyone. In such cases, exploring other open-source repositories might be more suitable."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/88d8af9f.df393ed1.js b/assets/js/88d8af9f.df393ed1.js
new file mode 100644
index 0000000000..20d8916138
--- /dev/null
+++ b/assets/js/88d8af9f.df393ed1.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5038],{9129:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(1527),o=i(7214);const s={title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},a=void 0,r={permalink:"/illa-website/blog/mui-2024",source:"@site/blog/mui-2024/mui.md",title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"UI Library",permalink:"/illa-website/blog/tags/ui-library"},{label:"Shadcn UI",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"React",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:3.255,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"2024 has arrived, should I choose MUI?",tags:["UI Library","Shadcn UI","React","javascript"],slug:"mui-2024",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/mui-2024/cover.png",date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",permalink:"/illa-website/blog/lowcode-vs-traditional"},nextItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},relatedPosts:[{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Best Web Worker Tutorial",description:"Web Worker is a JavaScript API that allows you to run JavaScript in the background. It is designed to run complex calculations without blocking the main thread.",permalink:"/illa-website/blog/web-worker-tutorial",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.64,date:"2024-01-29T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of MUI",id:"features-of-mui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains highly prosperous. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,t.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,t.jsx)(n.p,{children:"In general, every company building web applications tends to select a component library. These libraries address a significant amount of repetitive work, offering readily usable components such as Select, Input, CheckBox, and more. These components, customizable through styles or pre-existing attractive styles, enable the rapid creation of beautiful websites without the need to build extensive foundational features from scratch."}),"\n",(0,t.jsx)(n.p,{children:"To summarize, component libraries are typically used in two scenarios:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"External tools: Directly targeted at company users, usually adhering to the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,t.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, focusing on aesthetic design while prioritizing rapid functionality implementation."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Next, we will analyze two component libraries based on the following points:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Design"}),"\n",(0,t.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,t.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,t.jsx)(n.h2,{id:"features-of-mui",children:"Features of MUI"}),"\n",(0,t.jsx)(n.p,{children:"Some detailed data about MUI:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\u2b50 Github Stars: 90k"}),"\n",(0,t.jsx)(n.li,{children:"\u23ec NPM Downloads: 3,263,852 downloads per week"}),"\n",(0,t.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Nov 6, 2014"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI, as a longstanding project maintained since 2014, boasts almost a decade of stability. Its high star count and weekly download numbers ensure that the community remains consistently active."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/mui-2024/mui.png",alt:"mui"})}),"\n",(0,t.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,t.jsx)(n.p,{children:"In terms of design, MUI strictly adheres to Google's renowned Material Design. MUI's customization capabilities are extensive, catering to a wide range of internal and external scenarios. Many well-known open-source projects use MUI for front-end development. For most functionalities, MUI provides comprehensive support."}),"\n",(0,t.jsx)(n.p,{children:"In addition to common features like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Colors"}),"\n",(0,t.jsx)(n.li,{children:"Border radii"}),"\n",(0,t.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"MUI supports complete configurations of fonts, font sizes, colors, and margins, making it a powerful tool as a project with ten years of development."}),"\n",(0,t.jsx)(n.p,{children:"Regarding CSS support, MUI has its custom system, utilizing emotionjs for style adjustments in the overall layout. This may come with a learning curve and may not be as developer-friendly for direct development, requiring documentation consultation for certain style modifications."}),"\n",(0,t.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,t.jsx)(n.p,{children:"MUI's component types are highly complex, divided into several dimensions:"}),"\n",(0,t.jsx)(n.p,{children:"These include:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"MUI Core: Basic functional components of MUI, including a multitude of foundational components and a style system."}),"\n",(0,t.jsx)(n.li,{children:"MUI X: High-performance and complex components of MUI, including high-performance tables, charts, etc."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If you are developing a highly complex system, you can use MUI's full suite solution. However, MUI X is a paid component library, and a subscription fee may be required."}),"\n",(0,t.jsx)(n.p,{children:"MUI is a heavyweight repository with extensive code and a long maintenance history. Its high customizability makes it suitable for large projects. In the MUI repository, you can find a wealth of features."}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,t.jsx)(n.p,{children:"If you want to develop large projects, have high customization requirements, and wish to use high-performance data components and chart components, especially in scenarios with high business complexity and are willing to subscribe to MUI X, it is recommended to use MUI for development. Its flexible configuration and plethora of components can fully meet your requirements."}),"\n",(0,t.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,t.jsx)(n.p,{children:"If you need a lightweight framework and prefer to use a CSS-only solution for layout adjustments, it is not recommended here. MUI has a comprehensive proprietary design system, comes with a certain learning curve, and Material Design's aesthetics may not suit everyone. In such cases, exploring other open-source repositories might be more suitable."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/8f1e5e50.84fc2086.js b/assets/js/8f1e5e50.ceb27e7b.js
similarity index 93%
rename from assets/js/8f1e5e50.84fc2086.js
rename to assets/js/8f1e5e50.ceb27e7b.js
index 1fde4fdeac..6e9fa9fceb 100644
--- a/assets/js/8f1e5e50.84fc2086.js
+++ b/assets/js/8f1e5e50.ceb27e7b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8916],{2892:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=a(1527),t=a(7214);const s={slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},o=void 0,r={permalink:"/illa-website/blog/react-component-library",source:"@site/blog/react-component-library/react-component-library.md",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:6.14,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},nextItem:{title:"Best Web Worker Tutorial",permalink:"/illa-website/blog/web-worker-tutorial"},relatedPosts:[{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Best Choice for Internal Tool Scenarios",id:"best-choice-for-internal-tool-scenarios",level:2},{value:"MUI",id:"mui",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Shadcn UI",id:"shadcn-ui",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Chakra UI",id:"chakra-ui",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"Ant Design",id:"ant-design",level:2},{value:"Advantages",id:"advantages-3",level:3},{value:"Disadvantages",id:"disadvantages-3",level:3},{value:"Fluent UI",id:"fluent-ui",level:2},{value:"Advantages",id:"advantages-4",level:3},{value:"Disadvantages",id:"disadvantages-4",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber. React is also used by many open-source projects, such as WordPress, Drupal, and Magento."}),"\n",(0,i.jsx)(n.p,{children:"When building many interfaces, it's essential to choose an appropriate React component library. These libraries can help us quickly build user interfaces. They also provide many reusable components, such as buttons, forms, charts, tables, etc. These libraries offer many features, including themes, animations, routing, state management, and more."}),"\n",(0,i.jsx)(n.p,{children:"There are many React component libraries on the market. Each library has its own features, pros and cons, and price. In this blog post, we will review the top 5 React component libraries in 2024 and compare them based on their features, ease of use, compatibility."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"Typically, companies choose component libraries to build web applications to simplify repetitive tasks. Component libraries provide a range of ready-to-use components, such as dropdowns, input boxes, checkboxes, etc. These components come with customizable styles or attractive built-in styles, allowing for the rapid development of visually appealing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we usually use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, often consistent with the company's style, more aesthetically pleasing, and more responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: For internal use by company employees, emphasizing design aesthetics and rapid feature implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze component libraries based on the following aspects:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Advantages"}),"\n",(0,i.jsx)(n.li,{children:"Disadvantages"}),"\n",(0,i.jsx)(n.li,{children:"How to make a choice"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"best-choice-for-internal-tool-scenarios",children:"Best Choice for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows for the rapid construction of internal tools using simple JS, without the need for complex frontend projects. It offers drag-and-drop UI building."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web and application management panels"}),"\n",(0,i.jsx)(n.li,{children:"Data dashboards"}),"\n",(0,i.jsx)(n.li,{children:"Custom B2B tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with component libraries, ILLA Cloud can achieve tool construction 10 times faster and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"mui",children:"MUI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/mui.png",alt:"MUI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 90k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 3,263,852 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: November 6, 2014"}),"\n",(0,i.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"MUI's components are comprehensive, consisting of:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"MUI Core: Core components, including buttons, forms, icons, charts, tables, etc."}),"\n",(0,i.jsx)(n.li,{children:"MUI X: Advanced components, including data tables, complex charts, etc."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Using MUI can cover all scenarios without the need for other component libraries for complex data handling and presentation."}),"\n",(0,i.jsx)(n.p,{children:"If you like the style of Material Design, MUI is your best choice. You can build a complete Google-style application without any modifications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Complex data handling components in MUI X require payment."}),"\n",(0,i.jsx)(n.p,{children:"MUI, as an implementation of Material Design, has a rigorous design style, which may require extra work for scenarios needing custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"MUI's custom Style system uses EmotionJs for overall layout style adjustments, which may have a learning curve and might not be suitable for direct development without consulting documentation."}),"\n",(0,i.jsx)(n.p,{children:"If you dislike the CSS-IN-JS approach, MUI might not be your best choice."}),"\n",(0,i.jsx)(n.h2,{id:"shadcn-ui",children:"Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/shadcnui.png",alt:"Shadcn UI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 37k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 23,962 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: March 8, 2023"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a relatively new project, Shadcn UI has quickly gained recognition in the open-source community. Being newly built without historical baggage, it can adapt better to new technology stacks."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's design style is more business-oriented, with a clean user interface suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes and some preset styles, allowing for quick application builds without the need for custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's biggest advantage is that it is not a library distributed by npm. Integrating Shadcn UI involves building directly with code, meaning you can modify its code without additional effort."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme is based on CSS variables, which means it does not support IE11. If you need IE11 support, Shadcn UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme customization uses CSS variables or Tailwind CSS utility classes, so additional work may be needed for CSS-IN-JS users."}),"\n",(0,i.jsx)(n.p,{children:"Being relatively new, Shadcn UI may lack support for complex components like DataGrid and Chart, requiring other solutions, meaning you can't rely on a single component library for all tasks."}),"\n",(0,i.jsx)(n.h2,{id:"chakra-ui",children:"Chakra UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/chakraui.png",alt:"chakra-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 35.8k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 534,188 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: December 7, 2019"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is a commercially styled component library, not bound to any specific style, making it aesthetically pleasing for most users."}),"\n",(0,i.jsx)(n.p,{children:"As a library, Chakra UI has a vast template market, offering complete templates for mainstream scenarios like e-commerce and SaaS websites. These templates can be used directly or modified."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI's features mostly require no configuration, helpful for rapid prototyping, and natively supports responsiveness for previews on different devices."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is SEO-friendly, essential for products requiring SEO optimization."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"It's best not to use Chakra UI for complex tool or SaaS products due to its limited component customization capabilities. Using Chakra UI for Landing Pages is the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Although Chakra UI has a rich template market, these templates are not free, and additional costs are required for purchases."}),"\n",(0,i.jsx)(n.h2,{id:"ant-design",children:"Ant Design"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/antd.png",alt:"ant-design"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 89.1k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 1,264,151 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: July 21, 2015"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-3",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a library maintained by a mature billion-dollar public company, Ant Design offers the best richness, covering all scenarios with stable components."}),"\n",(0,i.jsx)(n.p,{children:"If you need to unify React and Vue styles in your workspace, Ant Design is your best choice, supporting both React and Vue."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design includes not only basic components but also Web3 components, allowing for direct Web3 application development."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design also customizes component libraries for data charts, big data scenarios, and maps, supporting complex data screen scenarios."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-3",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Ant Design's extensive support comes with historical baggage, such as poor performance in the Table component, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Although Ant Design excellently covers component breadth, it lacks depth in component satisfaction."}),"\n",(0,i.jsx)(n.p,{children:"All dependencies in Ant Design are maintained by Ant Design, requiring extra work to adapt your build and CSS schemes, which is unfriendly for scenarios wishing to use other open-source libraries."}),"\n",(0,i.jsx)(n.h2,{id:"fluent-ui",children:"Fluent UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/fluentui.png",alt:"fluent-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 17.3k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 191,170 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: September 17, 2020"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-4",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Maintained officially by Microsoft, Fluent UI's style is completely consistent with Microsoft's, helpful for scenarios needing to align with Microsoft's style."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI supports many platforms, including Web, React Native, iOS, Android, macOS, and Windows, allowing for the development of cross-platform applications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-4",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Not everyone likes Microsoft's style, so if you dislike it, Fluent UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI's documentation could be improved, as documentation construction is crucial for developers."}),"\n",(0,i.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(n.p,{children:"If you need a comprehensive component library and are willing to pay for it, MUI is recommended. If you don't want to pay, Ant Design is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you are developing a Landing Page, Chakra UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you want to use the Microsoft style, Fluent UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you don't want to introduce a component library and only want to integrate the source code, Shadcn UI is recommended."})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,a)=>{a.d(n,{Z:()=>r,a:()=>o});var i=a(959);const t={},s=i.createContext(t);function o(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8916],{2892:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=a(1527),t=a(7214);const s={slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},o=void 0,r={permalink:"/illa-website/blog/react-component-library",source:"@site/blog/react-component-library/react-component-library.md",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:6.14,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},nextItem:{title:"Best Web Worker Tutorial",permalink:"/illa-website/blog/web-worker-tutorial"},relatedPosts:[{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Best Choice for Internal Tool Scenarios",id:"best-choice-for-internal-tool-scenarios",level:2},{value:"MUI",id:"mui",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Shadcn UI",id:"shadcn-ui",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Chakra UI",id:"chakra-ui",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"Ant Design",id:"ant-design",level:2},{value:"Advantages",id:"advantages-3",level:3},{value:"Disadvantages",id:"disadvantages-3",level:3},{value:"Fluent UI",id:"fluent-ui",level:2},{value:"Advantages",id:"advantages-4",level:3},{value:"Disadvantages",id:"disadvantages-4",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber. React is also used by many open-source projects, such as WordPress, Drupal, and Magento."}),"\n",(0,i.jsx)(n.p,{children:"When building many interfaces, it's essential to choose an appropriate React component library. These libraries can help us quickly build user interfaces. They also provide many reusable components, such as buttons, forms, charts, tables, etc. These libraries offer many features, including themes, animations, routing, state management, and more."}),"\n",(0,i.jsx)(n.p,{children:"There are many React component libraries on the market. Each library has its own features, pros and cons, and price. In this blog post, we will review the top 5 React component libraries in 2024 and compare them based on their features, ease of use, compatibility."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"Typically, companies choose component libraries to build web applications to simplify repetitive tasks. Component libraries provide a range of ready-to-use components, such as dropdowns, input boxes, checkboxes, etc. These components come with customizable styles or attractive built-in styles, allowing for the rapid development of visually appealing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we usually use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, often consistent with the company's style, more aesthetically pleasing, and more responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: For internal use by company employees, emphasizing design aesthetics and rapid feature implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze component libraries based on the following aspects:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Advantages"}),"\n",(0,i.jsx)(n.li,{children:"Disadvantages"}),"\n",(0,i.jsx)(n.li,{children:"How to make a choice"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"best-choice-for-internal-tool-scenarios",children:"Best Choice for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows for the rapid construction of internal tools using simple JS, without the need for complex frontend projects. It offers drag-and-drop UI building."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web and application management panels"}),"\n",(0,i.jsx)(n.li,{children:"Data dashboards"}),"\n",(0,i.jsx)(n.li,{children:"Custom B2B tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with component libraries, ILLA Cloud can achieve tool construction 10 times faster and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"mui",children:"MUI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/mui.png",alt:"MUI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 90k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 3,263,852 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: November 6, 2014"}),"\n",(0,i.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"MUI's components are comprehensive, consisting of:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"MUI Core: Core components, including buttons, forms, icons, charts, tables, etc."}),"\n",(0,i.jsx)(n.li,{children:"MUI X: Advanced components, including data tables, complex charts, etc."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Using MUI can cover all scenarios without the need for other component libraries for complex data handling and presentation."}),"\n",(0,i.jsx)(n.p,{children:"If you like the style of Material Design, MUI is your best choice. You can build a complete Google-style application without any modifications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Complex data handling components in MUI X require payment."}),"\n",(0,i.jsx)(n.p,{children:"MUI, as an implementation of Material Design, has a rigorous design style, which may require extra work for scenarios needing custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"MUI's custom Style system uses EmotionJs for overall layout style adjustments, which may have a learning curve and might not be suitable for direct development without consulting documentation."}),"\n",(0,i.jsx)(n.p,{children:"If you dislike the CSS-IN-JS approach, MUI might not be your best choice."}),"\n",(0,i.jsx)(n.h2,{id:"shadcn-ui",children:"Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/shadcnui.png",alt:"Shadcn UI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 37k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 23,962 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: March 8, 2023"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a relatively new project, Shadcn UI has quickly gained recognition in the open-source community. Being newly built without historical baggage, it can adapt better to new technology stacks."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's design style is more business-oriented, with a clean user interface suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes and some preset styles, allowing for quick application builds without the need for custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's biggest advantage is that it is not a library distributed by npm. Integrating Shadcn UI involves building directly with code, meaning you can modify its code without additional effort."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme is based on CSS variables, which means it does not support IE11. If you need IE11 support, Shadcn UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme customization uses CSS variables or Tailwind CSS utility classes, so additional work may be needed for CSS-IN-JS users."}),"\n",(0,i.jsx)(n.p,{children:"Being relatively new, Shadcn UI may lack support for complex components like DataGrid and Chart, requiring other solutions, meaning you can't rely on a single component library for all tasks."}),"\n",(0,i.jsx)(n.h2,{id:"chakra-ui",children:"Chakra UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/chakraui.png",alt:"chakra-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 35.8k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 534,188 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: December 7, 2019"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is a commercially styled component library, not bound to any specific style, making it aesthetically pleasing for most users."}),"\n",(0,i.jsx)(n.p,{children:"As a library, Chakra UI has a vast template market, offering complete templates for mainstream scenarios like e-commerce and SaaS websites. These templates can be used directly or modified."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI's features mostly require no configuration, helpful for rapid prototyping, and natively supports responsiveness for previews on different devices."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is SEO-friendly, essential for products requiring SEO optimization."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"It's best not to use Chakra UI for complex tool or SaaS products due to its limited component customization capabilities. Using Chakra UI for Landing Pages is the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Although Chakra UI has a rich template market, these templates are not free, and additional costs are required for purchases."}),"\n",(0,i.jsx)(n.h2,{id:"ant-design",children:"Ant Design"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/antd.png",alt:"ant-design"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 89.1k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 1,264,151 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: July 21, 2015"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-3",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a library maintained by a mature billion-dollar public company, Ant Design offers the best richness, covering all scenarios with stable components."}),"\n",(0,i.jsx)(n.p,{children:"If you need to unify React and Vue styles in your workspace, Ant Design is your best choice, supporting both React and Vue."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design includes not only basic components but also Web3 components, allowing for direct Web3 application development."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design also customizes component libraries for data charts, big data scenarios, and maps, supporting complex data screen scenarios."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-3",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Ant Design's extensive support comes with historical baggage, such as poor performance in the Table component, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Although Ant Design excellently covers component breadth, it lacks depth in component satisfaction."}),"\n",(0,i.jsx)(n.p,{children:"All dependencies in Ant Design are maintained by Ant Design, requiring extra work to adapt your build and CSS schemes, which is unfriendly for scenarios wishing to use other open-source libraries."}),"\n",(0,i.jsx)(n.h2,{id:"fluent-ui",children:"Fluent UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/fluentui.png",alt:"fluent-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 17.3k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 191,170 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: September 17, 2020"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-4",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Maintained officially by Microsoft, Fluent UI's style is completely consistent with Microsoft's, helpful for scenarios needing to align with Microsoft's style."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI supports many platforms, including Web, React Native, iOS, Android, macOS, and Windows, allowing for the development of cross-platform applications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-4",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Not everyone likes Microsoft's style, so if you dislike it, Fluent UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI's documentation could be improved, as documentation construction is crucial for developers."}),"\n",(0,i.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(n.p,{children:"If you need a comprehensive component library and are willing to pay for it, MUI is recommended. If you don't want to pay, Ant Design is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you are developing a Landing Page, Chakra UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you want to use the Microsoft style, Fluent UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you don't want to introduce a component library and only want to integrate the source code, Shadcn UI is recommended."})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,a)=>{a.d(n,{Z:()=>r,a:()=>o});var i=a(959);const t={},s=i.createContext(t);function o(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/912dc06b.d76cafed.js b/assets/js/912dc06b.1ba43509.js
similarity index 95%
rename from assets/js/912dc06b.d76cafed.js
rename to assets/js/912dc06b.1ba43509.js
index 04d8fff8e1..8ee4a3a23e 100644
--- a/assets/js/912dc06b.d76cafed.js
+++ b/assets/js/912dc06b.1ba43509.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[4501],{3507:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var o=t(1527),i=t(7214);const s={title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},n=void 0,l={permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",source:"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md",title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",date:"2024-01-08T10:00:00.000Z",formattedDate:"January 8, 2024",tags:[{label:"crud",permalink:"/illa-website/blog/tags/crud"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:10.165,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},unlisted:!1,prevItem:{title:"Top 7 Database GUIs for SQL databases",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases"},nextItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"Database",id:"database",level:2},{value:"User Interface",id:"user-interface",level:2},{value:"API",id:"api",level:2},{value:"Tools For Building Crud Applications",id:"tools-for-building-crud-applications",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Features:",id:"features",level:3},{value:"Drawbacks:",id:"drawbacks",level:3},{value:"AppSmith",id:"appsmith",level:2},{value:"Features:",id:"features-1",level:3},{value:"Drawbacks:",id:"drawbacks-1",level:3},{value:"Knack",id:"knack",level:2},{value:"Features:",id:"features-2",level:3},{value:"Drawbacks:",id:"drawbacks-2",level:3},{value:"Budibase",id:"budibase",level:2},{value:"Features:",id:"features-3",level:3},{value:"Drawbacks:",id:"drawbacks-3",level:3},{value:"Bubble",id:"bubble",level:2},{value:"Features:",id:"features-4",level:3},{value:"Drawbacks:",id:"drawbacks-4",level:3},{value:"UI Bakery",id:"ui-bakery",level:2},{value:"Features:",id:"features-5",level:3},{value:"Drawbacks:",id:"drawbacks-5",level:3},{value:"Retool",id:"retool",level:2},{value:"Features:",id:"features-6",level:3},{value:"Drawbacks:",id:"drawbacks-6",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps. CRUD stands for Create, Read, Update, and Delete, which are the four basic operations that models should be able to do on data. CRUD applications are very common in web development, as they allow users to perform basic operations on data without writing complex code."}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications consist of three main components: a database, a user interface, and an API. The database is where the data is stored and retrieved. The user interface is the front end that users interact with. The API contains the code and methods that communicate with the database. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we will review some of the best tools for building CRUD applications, covering each component separately. We will also provide some examples and tips on how to use them effectively."}),"\n",(0,o.jsx)(a.h2,{id:"database",children:"Database"}),"\n",(0,o.jsx)(a.p,{children:"The database is the core of any CRUD application, as it stores the data that users can create, read, update, and delete. There are many types of databases available, but they can be broadly categorized into two groups: relational (SQL) and non-relational (NoSQL)."}),"\n",(0,o.jsx)(a.p,{children:"Relational databases use tables to store data; each table has a predefined schema and each row represents a record. Relational databases are good for structured and consistent data that requires complex queries and transactions. Some of the most popular relational databases are MySQL, PostgreSQL, Oracle, and SQL Server."}),"\n",(0,o.jsx)(a.p,{children:"Non-relational databases use collections to store data, where each collection can have a flexible schema and each document represents a record. Non-relational databases are good for unstructured and dynamic data that require high scalability and performance. Some of the most popular non-relational databases are MongoDB, CouchDB, Firebase, and DynamoDB."}),"\n",(0,o.jsx)(a.p,{children:"Choosing the right database for your CRUD application depends on several factors, such as the type and volume of data you need to store, the level of consistency and reliability you need to ensure, and the complexity and frequency of queries you need to perform. You should also consider the compatibility and integration of your database with your user interface and API tools."}),"\n",(0,o.jsx)(a.h2,{id:"user-interface",children:"User Interface"}),"\n",(0,o.jsx)(a.p,{children:"The user interface is the front end of your CRUD application, where users can see and manipulate the data stored in your database. The user interface can be built using various technologies and frameworks, depending on the type and complexity of your application."}),"\n",(0,o.jsx)(a.p,{children:"One of the most common ways to build a user interface for a CRUD application is by using HTML, CSS, and JavaScript. HTML defines the structure and content of your web page, CSS styles the appearance and layout of your web page, and JavaScript adds interactivity and functionality to your web page. You can use plain HTML, CSS, and JavaScript or use libraries and frameworks that simplify and enhance your development process."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular libraries and frameworks for building user interfaces are React, Angular, Vue.js, Bootstrap, Tailwind CSS, jQuery, etc. These tools provide various features and benefits for creating dynamic and responsive web pages that can communicate with your API and database."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build a user interface for a CRUD application is by using low-code or no-code platforms. These platforms allow you to create web pages using drag-and-drop components and visual editors without writing much or any code. Some of the most popular low-code or no-code platforms are Budibase, Appsmith, Bubble.io, Webflow, etc. These tools are great for beginners or non-developers who want to create simple and fast CRUD applications without learning complex technologies."}),"\n",(0,o.jsx)(a.h2,{id:"api",children:"API"}),"\n",(0,o.jsx)(a.p,{children:"The API is the bridge between your user interface and your database. It defines how your user interface can request data from your database or send data to your database using HTTP methods such as GET (read), POST (create), PUT (update), or DELETE (delete). The API also handles authentication, authorization, validation, error handling, etc."}),"\n",(0,o.jsx)(a.p,{children:"There are many ways to build an API for your CRUD application, but one of the most common ways is using REST (Representational State Transfer). REST is an architectural style that defines how resources (data) can be accessed and manipulated using standard HTTP methods and formats such as JSON or XML. REST APIs are easy to understand and use by both humans and machines."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building REST APIs are Node.js, Express.js, Flask, Django, Ruby on Rails, Laravel, etc. These tools are frameworks that provide various features and libraries for creating and managing web servers and APIs."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build an API for your CRUD application is using GraphQL. GraphQL is a query language and a runtime that allows you to define and execute queries and mutations (operations) on your data using a single endpoint. GraphQL APIs are more flexible and efficient than REST APIs, as they allow you to request or send only the data you need, avoiding over-fetching or under-fetching."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building GraphQL APIs are Apollo Server, Prisma, Hasura, Graphene, etc. These tools are libraries or platforms that help you create and manage GraphQL servers and schemas."}),"\n",(0,o.jsx)(a.h2,{id:"tools-for-building-crud-applications",children:"Tools For Building Crud Applications"}),"\n",(0,o.jsx)(a.p,{children:"You will find many software claiming to provide ease in building useful CRUD Applications, but you need to be careful to find the ones that help in making the most compatible CRUD Applications. Let us discuss the top 7 software that can help you. We short-listed these seven tools according to client\u2019s preferences and feasibility. We will mention their features and drawbacks so that you can choose wisely and according to your demands."}),"\n",(0,o.jsx)(a.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/illa.png",alt:"illa"})}),"\n",(0,o.jsx)(a.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. Its main aim is to help programmers develop modules to monitor data, which is one of the most tedious jobs for a developer. Another new feature in this open-source low-code app is that you can make your own customized block of code and then later put it up for sale in the marketplace."}),"\n",(0,o.jsx)(a.p,{children:"It gets connected to the mainstream database, or, alternatively, it can connect to any database through APIs. It can even add action to the chain of user events. Its backend and front-end data components are tightly integrated; hence developers can write data calls for massive information interaction."}),"\n",(0,o.jsx)(a.p,{children:"It is doubly useful for developers because it offers them the freedom to implement richer functionality. They can use {{template syntax}} for richer content."}),"\n",(0,o.jsx)(a.p,{children:"It allows real-time collaboration, making it easier for developers to interact at different ends of the world to work on it simultaneously. They can use ILLA Builder by sharing links, co-editing, and communicating for improved development efficiency."}),"\n",(0,o.jsx)(a.p,{children:"ILLA Builder has a comprehensive UI library. It has several useful components that developers can use to drop and drag to build attractive interfaces without wasting much time"}),"\n",(0,o.jsx)(a.h3,{id:"features",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It can easily be integrated with any database."}),"\n",(0,o.jsx)(a.li,{children:"You can download ILLA CLI for any of these operating systems: Windows, Linux, and MAC."}),"\n",(0,o.jsx)(a.li,{children:"It offers real-time collaboration which enables the developers to communicate for better development."}),"\n",(0,o.jsx)(a.li,{children:"It provides flexible deployment. You can use ILLA Cloud, ILLA CLI, Kubernetes, and Docker."}),"\n",(0,o.jsx)(a.li,{children:"You can easily integrate third-party APIs."}),"\n",(0,o.jsx)(a.li,{children:"It is free to share, use, copy, and update."}),"\n",(0,o.jsx)(a.li,{children:"It is constantly being polished with new updates and features."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"ILLA Cloud has basically been developed for the convenience of programmers."}),"\n",(0,o.jsx)(a.li,{children:"You need to be proficient in either of the four languages to fully utilize it. JavaScript, RUST, and Forlang are its major languages."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"appsmith",children:"AppSmith"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/appsmith.png",alt:"appsmith"})}),"\n",(0,o.jsx)(a.p,{children:"AppSmith was the first open-source low-code tool. It introduced the developers to a whole new world of click-and-drag programming. The standard plan consists of unlimited apps and widgets that are immensely useful for building live dashboards. This standard plan is free. It has many features; a summary of these is below:"}),"\n",(0,o.jsx)(a.h3,{id:"features-1",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It easily gets connected to your supported database."}),"\n",(0,o.jsx)(a.li,{children:"Instinctive drag-and-drop widgets prove to be very helpful and make coding even easier."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-1",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"To fully utilize this app, you need to know JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"knack",children:"Knack"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/knack.png",alt:"knack"})}),"\n",(0,o.jsx)(a.p,{children:"Knack is another no-code app that is used generally used for automating manual processes. It will be problematic if you try to plug it in with an existing database. It has certain limitations, which is why it is best used for internal processes only. It will allow you to view, manage, update, analyze, and share data. The application templates for different cases start quickly. Here are a few features of this application."}),"\n",(0,o.jsx)(a.h3,{id:"features-2",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports a built-in database as well as user management, authentication, email, and notification automation workflows."}),"\n",(0,o.jsx)(a.li,{children:"Developers can easily customize it with JavaSript and CSS."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-2",children:"Drawbacks:"}),"\n",(0,o.jsx)(a.p,{children:"The most severe drawback is its incapability to interact with other databases."}),"\n",(0,o.jsx)(a.h2,{id:"budibase",children:"Budibase"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/budibase.png",alt:"budibase"})}),"\n",(0,o.jsx)(a.p,{children:"Budibase is another popular low-code tool extensively used for CRUD applications. You can easily integrate it with major databases. Below are a few prominent features of the tool."}),"\n",(0,o.jsx)(a.h3,{id:"features-3",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It has a load of widgets and other features to beautify your page."}),"\n",(0,o.jsx)(a.li,{children:"It supports an internal database but supports by connecting to an external database as well."}),"\n",(0,o.jsx)(a.li,{children:"In the shape of extensive documentation, a complete guide is also available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-3",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"JavaScript, as well as technical skills, are required."}),"\n",(0,o.jsx)(a.li,{children:"No templates are available."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"bubble",children:"Bubble"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/bubble.png",alt:"bubble"})}),"\n",(0,o.jsx)(a.p,{children:"This much more complicated tool is not recommended for smaller internal apps."}),"\n",(0,o.jsx)(a.h3,{id:"features-4",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Widgets and designs are available."}),"\n",(0,o.jsx)(a.li,{children:"Perfectly capable of deployment."}),"\n",(0,o.jsx)(a.li,{children:"The volume of traffic, users, and data is unlimited."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-4",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is complicated to learn."}),"\n",(0,o.jsx)(a.li,{children:"You cannot host it on your infrastructure"}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"ui-bakery",children:"UI Bakery"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/uibakery.png",alt:"bakery"})}),"\n",(0,o.jsx)(a.p,{children:"This app is a relatively new product but is still the perfect no-code tool for building internal tools and CRUD apps because of the predefined widgets and ready-made templates. It can easily connect to SQL Databases like MySQL, Google Datasheets, and Postgres."}),"\n",(0,o.jsx)(a.h3,{id:"features-5",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports user management through Google, Twitter, and Facebook."}),"\n",(0,o.jsx)(a.li,{children:"Developers can do app hosting on a unique URL"}),"\n",(0,o.jsx)(a.li,{children:"You can customize the widgets and templates."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-5",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is not suitable for public-facing apps, customer-facing websites, and mobile apps."}),"\n",(0,o.jsx)(a.li,{children:"You need technical staff to deal with this, as it requires a moderate level of knowledge to deal with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"retool",children:"Retool"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/retool.png",alt:"retool"})}),"\n",(0,o.jsx)(a.p,{children:"Though last on the list, retool is also an excellent choice as a CRUD application. It is a drag-and-drop building blocks platform. You need to customize JavaScript in order to fetch your data from an external database."}),"\n",(0,o.jsx)(a.h3,{id:"features-6",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports built-in authorization and authentication."}),"\n",(0,o.jsx)(a.li,{children:"You can customize it with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-6",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Its free plan is minimal and charges at a per-end user base."}),"\n",(0,o.jsx)(a.li,{children:"You cannot use it for public-facing apps."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces. CRUD applications consist of three main components: a database, a user interface, and an API. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we reviewed some of the best tools for building CRUD applications, covering each component separately. We also provided some examples and tips on how to use them effectively. We hope this post helped you learn more about CRUD applications and how to build them."}),"\n",(0,o.jsx)(a.p,{children:"If you are looking for a tool that can help you build CRUD applications quickly and easily, we recommend you check out ILLA Cloud. ILLA Cloud is a cloud-based platform that lets you create CRUD applications without coding. You can connect to any database or API, design your user interface with drag-and-drop components, and deploy your application with one click. ILLA Cloud also provides features such as authentication, authorization, validation, error handling, etc. ILLA Cloud is the best tool for building CRUD applications in minutes."})]})}function u(e={}){const{wrapper:a}={...(0,i.a)(),...e.components};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>l,a:()=>n});var o=t(959);const i={},s=o.createContext(i);function n(e){const a=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function l(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),o.createElement(s.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[4501],{3507:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var o=t(1527),i=t(7214);const s={title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},n=void 0,l={permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",source:"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md",title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",date:"2024-01-08T10:00:00.000Z",formattedDate:"January 8, 2024",tags:[{label:"crud",permalink:"/illa-website/blog/tags/crud"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:10.165,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},unlisted:!1,prevItem:{title:"Top 7 Database GUIs for SQL databases",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases"},nextItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"Database",id:"database",level:2},{value:"User Interface",id:"user-interface",level:2},{value:"API",id:"api",level:2},{value:"Tools For Building Crud Applications",id:"tools-for-building-crud-applications",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Features:",id:"features",level:3},{value:"Drawbacks:",id:"drawbacks",level:3},{value:"AppSmith",id:"appsmith",level:2},{value:"Features:",id:"features-1",level:3},{value:"Drawbacks:",id:"drawbacks-1",level:3},{value:"Knack",id:"knack",level:2},{value:"Features:",id:"features-2",level:3},{value:"Drawbacks:",id:"drawbacks-2",level:3},{value:"Budibase",id:"budibase",level:2},{value:"Features:",id:"features-3",level:3},{value:"Drawbacks:",id:"drawbacks-3",level:3},{value:"Bubble",id:"bubble",level:2},{value:"Features:",id:"features-4",level:3},{value:"Drawbacks:",id:"drawbacks-4",level:3},{value:"UI Bakery",id:"ui-bakery",level:2},{value:"Features:",id:"features-5",level:3},{value:"Drawbacks:",id:"drawbacks-5",level:3},{value:"Retool",id:"retool",level:2},{value:"Features:",id:"features-6",level:3},{value:"Drawbacks:",id:"drawbacks-6",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps. CRUD stands for Create, Read, Update, and Delete, which are the four basic operations that models should be able to do on data. CRUD applications are very common in web development, as they allow users to perform basic operations on data without writing complex code."}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications consist of three main components: a database, a user interface, and an API. The database is where the data is stored and retrieved. The user interface is the front end that users interact with. The API contains the code and methods that communicate with the database. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we will review some of the best tools for building CRUD applications, covering each component separately. We will also provide some examples and tips on how to use them effectively."}),"\n",(0,o.jsx)(a.h2,{id:"database",children:"Database"}),"\n",(0,o.jsx)(a.p,{children:"The database is the core of any CRUD application, as it stores the data that users can create, read, update, and delete. There are many types of databases available, but they can be broadly categorized into two groups: relational (SQL) and non-relational (NoSQL)."}),"\n",(0,o.jsx)(a.p,{children:"Relational databases use tables to store data; each table has a predefined schema and each row represents a record. Relational databases are good for structured and consistent data that requires complex queries and transactions. Some of the most popular relational databases are MySQL, PostgreSQL, Oracle, and SQL Server."}),"\n",(0,o.jsx)(a.p,{children:"Non-relational databases use collections to store data, where each collection can have a flexible schema and each document represents a record. Non-relational databases are good for unstructured and dynamic data that require high scalability and performance. Some of the most popular non-relational databases are MongoDB, CouchDB, Firebase, and DynamoDB."}),"\n",(0,o.jsx)(a.p,{children:"Choosing the right database for your CRUD application depends on several factors, such as the type and volume of data you need to store, the level of consistency and reliability you need to ensure, and the complexity and frequency of queries you need to perform. You should also consider the compatibility and integration of your database with your user interface and API tools."}),"\n",(0,o.jsx)(a.h2,{id:"user-interface",children:"User Interface"}),"\n",(0,o.jsx)(a.p,{children:"The user interface is the front end of your CRUD application, where users can see and manipulate the data stored in your database. The user interface can be built using various technologies and frameworks, depending on the type and complexity of your application."}),"\n",(0,o.jsx)(a.p,{children:"One of the most common ways to build a user interface for a CRUD application is by using HTML, CSS, and JavaScript. HTML defines the structure and content of your web page, CSS styles the appearance and layout of your web page, and JavaScript adds interactivity and functionality to your web page. You can use plain HTML, CSS, and JavaScript or use libraries and frameworks that simplify and enhance your development process."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular libraries and frameworks for building user interfaces are React, Angular, Vue.js, Bootstrap, Tailwind CSS, jQuery, etc. These tools provide various features and benefits for creating dynamic and responsive web pages that can communicate with your API and database."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build a user interface for a CRUD application is by using low-code or no-code platforms. These platforms allow you to create web pages using drag-and-drop components and visual editors without writing much or any code. Some of the most popular low-code or no-code platforms are Budibase, Appsmith, Bubble.io, Webflow, etc. These tools are great for beginners or non-developers who want to create simple and fast CRUD applications without learning complex technologies."}),"\n",(0,o.jsx)(a.h2,{id:"api",children:"API"}),"\n",(0,o.jsx)(a.p,{children:"The API is the bridge between your user interface and your database. It defines how your user interface can request data from your database or send data to your database using HTTP methods such as GET (read), POST (create), PUT (update), or DELETE (delete). The API also handles authentication, authorization, validation, error handling, etc."}),"\n",(0,o.jsx)(a.p,{children:"There are many ways to build an API for your CRUD application, but one of the most common ways is using REST (Representational State Transfer). REST is an architectural style that defines how resources (data) can be accessed and manipulated using standard HTTP methods and formats such as JSON or XML. REST APIs are easy to understand and use by both humans and machines."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building REST APIs are Node.js, Express.js, Flask, Django, Ruby on Rails, Laravel, etc. These tools are frameworks that provide various features and libraries for creating and managing web servers and APIs."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build an API for your CRUD application is using GraphQL. GraphQL is a query language and a runtime that allows you to define and execute queries and mutations (operations) on your data using a single endpoint. GraphQL APIs are more flexible and efficient than REST APIs, as they allow you to request or send only the data you need, avoiding over-fetching or under-fetching."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building GraphQL APIs are Apollo Server, Prisma, Hasura, Graphene, etc. These tools are libraries or platforms that help you create and manage GraphQL servers and schemas."}),"\n",(0,o.jsx)(a.h2,{id:"tools-for-building-crud-applications",children:"Tools For Building Crud Applications"}),"\n",(0,o.jsx)(a.p,{children:"You will find many software claiming to provide ease in building useful CRUD Applications, but you need to be careful to find the ones that help in making the most compatible CRUD Applications. Let us discuss the top 7 software that can help you. We short-listed these seven tools according to client\u2019s preferences and feasibility. We will mention their features and drawbacks so that you can choose wisely and according to your demands."}),"\n",(0,o.jsx)(a.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/illa.png",alt:"illa"})}),"\n",(0,o.jsx)(a.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. Its main aim is to help programmers develop modules to monitor data, which is one of the most tedious jobs for a developer. Another new feature in this open-source low-code app is that you can make your own customized block of code and then later put it up for sale in the marketplace."}),"\n",(0,o.jsx)(a.p,{children:"It gets connected to the mainstream database, or, alternatively, it can connect to any database through APIs. It can even add action to the chain of user events. Its backend and front-end data components are tightly integrated; hence developers can write data calls for massive information interaction."}),"\n",(0,o.jsx)(a.p,{children:"It is doubly useful for developers because it offers them the freedom to implement richer functionality. They can use {{template syntax}} for richer content."}),"\n",(0,o.jsx)(a.p,{children:"It allows real-time collaboration, making it easier for developers to interact at different ends of the world to work on it simultaneously. They can use ILLA Builder by sharing links, co-editing, and communicating for improved development efficiency."}),"\n",(0,o.jsx)(a.p,{children:"ILLA Builder has a comprehensive UI library. It has several useful components that developers can use to drop and drag to build attractive interfaces without wasting much time"}),"\n",(0,o.jsx)(a.h3,{id:"features",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It can easily be integrated with any database."}),"\n",(0,o.jsx)(a.li,{children:"You can download ILLA CLI for any of these operating systems: Windows, Linux, and MAC."}),"\n",(0,o.jsx)(a.li,{children:"It offers real-time collaboration which enables the developers to communicate for better development."}),"\n",(0,o.jsx)(a.li,{children:"It provides flexible deployment. You can use ILLA Cloud, ILLA CLI, Kubernetes, and Docker."}),"\n",(0,o.jsx)(a.li,{children:"You can easily integrate third-party APIs."}),"\n",(0,o.jsx)(a.li,{children:"It is free to share, use, copy, and update."}),"\n",(0,o.jsx)(a.li,{children:"It is constantly being polished with new updates and features."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"ILLA Cloud has basically been developed for the convenience of programmers."}),"\n",(0,o.jsx)(a.li,{children:"You need to be proficient in either of the four languages to fully utilize it. JavaScript, RUST, and Forlang are its major languages."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"appsmith",children:"AppSmith"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/appsmith.png",alt:"appsmith"})}),"\n",(0,o.jsx)(a.p,{children:"AppSmith was the first open-source low-code tool. It introduced the developers to a whole new world of click-and-drag programming. The standard plan consists of unlimited apps and widgets that are immensely useful for building live dashboards. This standard plan is free. It has many features; a summary of these is below:"}),"\n",(0,o.jsx)(a.h3,{id:"features-1",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It easily gets connected to your supported database."}),"\n",(0,o.jsx)(a.li,{children:"Instinctive drag-and-drop widgets prove to be very helpful and make coding even easier."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-1",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"To fully utilize this app, you need to know JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"knack",children:"Knack"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/knack.png",alt:"knack"})}),"\n",(0,o.jsx)(a.p,{children:"Knack is another no-code app that is used generally used for automating manual processes. It will be problematic if you try to plug it in with an existing database. It has certain limitations, which is why it is best used for internal processes only. It will allow you to view, manage, update, analyze, and share data. The application templates for different cases start quickly. Here are a few features of this application."}),"\n",(0,o.jsx)(a.h3,{id:"features-2",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports a built-in database as well as user management, authentication, email, and notification automation workflows."}),"\n",(0,o.jsx)(a.li,{children:"Developers can easily customize it with JavaSript and CSS."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-2",children:"Drawbacks:"}),"\n",(0,o.jsx)(a.p,{children:"The most severe drawback is its incapability to interact with other databases."}),"\n",(0,o.jsx)(a.h2,{id:"budibase",children:"Budibase"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/budibase.png",alt:"budibase"})}),"\n",(0,o.jsx)(a.p,{children:"Budibase is another popular low-code tool extensively used for CRUD applications. You can easily integrate it with major databases. Below are a few prominent features of the tool."}),"\n",(0,o.jsx)(a.h3,{id:"features-3",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It has a load of widgets and other features to beautify your page."}),"\n",(0,o.jsx)(a.li,{children:"It supports an internal database but supports by connecting to an external database as well."}),"\n",(0,o.jsx)(a.li,{children:"In the shape of extensive documentation, a complete guide is also available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-3",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"JavaScript, as well as technical skills, are required."}),"\n",(0,o.jsx)(a.li,{children:"No templates are available."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"bubble",children:"Bubble"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/bubble.png",alt:"bubble"})}),"\n",(0,o.jsx)(a.p,{children:"This much more complicated tool is not recommended for smaller internal apps."}),"\n",(0,o.jsx)(a.h3,{id:"features-4",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Widgets and designs are available."}),"\n",(0,o.jsx)(a.li,{children:"Perfectly capable of deployment."}),"\n",(0,o.jsx)(a.li,{children:"The volume of traffic, users, and data is unlimited."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-4",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is complicated to learn."}),"\n",(0,o.jsx)(a.li,{children:"You cannot host it on your infrastructure"}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"ui-bakery",children:"UI Bakery"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/uibakery.png",alt:"bakery"})}),"\n",(0,o.jsx)(a.p,{children:"This app is a relatively new product but is still the perfect no-code tool for building internal tools and CRUD apps because of the predefined widgets and ready-made templates. It can easily connect to SQL Databases like MySQL, Google Datasheets, and Postgres."}),"\n",(0,o.jsx)(a.h3,{id:"features-5",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports user management through Google, Twitter, and Facebook."}),"\n",(0,o.jsx)(a.li,{children:"Developers can do app hosting on a unique URL"}),"\n",(0,o.jsx)(a.li,{children:"You can customize the widgets and templates."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-5",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is not suitable for public-facing apps, customer-facing websites, and mobile apps."}),"\n",(0,o.jsx)(a.li,{children:"You need technical staff to deal with this, as it requires a moderate level of knowledge to deal with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"retool",children:"Retool"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/retool.png",alt:"retool"})}),"\n",(0,o.jsx)(a.p,{children:"Though last on the list, retool is also an excellent choice as a CRUD application. It is a drag-and-drop building blocks platform. You need to customize JavaScript in order to fetch your data from an external database."}),"\n",(0,o.jsx)(a.h3,{id:"features-6",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports built-in authorization and authentication."}),"\n",(0,o.jsx)(a.li,{children:"You can customize it with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-6",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Its free plan is minimal and charges at a per-end user base."}),"\n",(0,o.jsx)(a.li,{children:"You cannot use it for public-facing apps."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces. CRUD applications consist of three main components: a database, a user interface, and an API. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we reviewed some of the best tools for building CRUD applications, covering each component separately. We also provided some examples and tips on how to use them effectively. We hope this post helped you learn more about CRUD applications and how to build them."}),"\n",(0,o.jsx)(a.p,{children:"If you are looking for a tool that can help you build CRUD applications quickly and easily, we recommend you check out ILLA Cloud. ILLA Cloud is a cloud-based platform that lets you create CRUD applications without coding. You can connect to any database or API, design your user interface with drag-and-drop components, and deploy your application with one click. ILLA Cloud also provides features such as authentication, authorization, validation, error handling, etc. ILLA Cloud is the best tool for building CRUD applications in minutes."})]})}function u(e={}){const{wrapper:a}={...(0,i.a)(),...e.components};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>l,a:()=>n});var o=t(959);const i={},s=o.createContext(i);function n(e){const a=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function l(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),o.createElement(s.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/9c6dc03d.58add9e1.js b/assets/js/9c6dc03d.4773e2b9.js
similarity index 89%
rename from assets/js/9c6dc03d.58add9e1.js
rename to assets/js/9c6dc03d.4773e2b9.js
index f6da20ce90..54a89990b0 100644
--- a/assets/js/9c6dc03d.58add9e1.js
+++ b/assets/js/9c6dc03d.4773e2b9.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3327],{4441:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var n=o(1527),a=o(7214);const s={slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},i=void 0,l={permalink:"/illa-website/blog/automate-send-to-slack",source:"@site/blog/automate-send-to-slack/automate-send-to-slack.md",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",date:"2024-01-17T10:00:00.000Z",formattedDate:"January 17, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"},{label:"slack",permalink:"/illa-website/blog/tags/slack"},{label:"automate",permalink:"/illa-website/blog/tags/automate"}],readingTime:3.275,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},unlisted:!1,prevItem:{title:"Create AI Tools like building with blocks",permalink:"/illa-website/blog/build-ai-tools"},nextItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},relatedPosts:[{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"How to Solve",id:"how-to-solve",level:2},{value:"Achieved Results",id:"achieved-results",level:2},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const t={h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily. Supporting powerful text and media formats, Slack allows us to send various messages. As developers, we have a multitude of tasks that need to be automated, such as:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Compilation and Building"}),": Automating the process of code compilation, especially in large projects, can significantly improve efficiency."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Test Execution"}),": Automatically running unit tests, integration tests, and performance tests to ensure code quality."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Deployment"}),": Automating code deployment to production or test environments, a common practice in Continuous Integration/Continuous Deployment (CI/CD) processes."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Data Backup and Recovery"}),": Regularly automating database and application data backups, and restoring them when needed."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Monitoring and Alerts"}),": Automating the monitoring of system and application performance and sending alerts in case of issues."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Log File Management"}),": Automating the collection, analysis, and archiving of logs."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Environment Configuration"}),": Using configuration management tools to automatically set up and maintain development, testing, and production environments."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Documentation Generation"}),": Automatically generating documentation from code comments or database structures."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Batch Processing of Data or Files"}),": Automatically performing data transformations, migrations, or other batch processing tasks."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Dependency Management"}),": Automatically managing project dependencies to ensure the latest and compatible versions of libraries and frameworks."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"These tasks are usually automated through various tools and scripts, such as using Jenkins or GitHub Actions for CI/CD processes, or Ansible, Puppet for environment configuration and management. Developers use many tools to accomplish these tasks, but these tools are usually independent. After completing their tasks, I believe everyone would appreciate a comprehensive notification for updates."}),"\n",(0,n.jsx)(t.p,{children:"Studies show that if an issue is notified via Slack at the time of creation, the resolution time can be reduced by 50%. Therefore, we need a tool to help us automate message sending to Slack, allowing us to see all messages in one place, rather than checking various tools."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.h2,{id:"how-to-solve",children:"How to Solve"}),"\n",(0,n.jsx)(t.p,{children:"Here we choose a tool to solve this, named ILLA Flow. It is a connector tool aimed at developers, helping them quickly build various automation tasks, including automating message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow offers various integrations, including but not limited to the most commonly used RestAPI, GraphQL, and a vast number of database connections and various SaaS platform capabilities, allowing you to quickly connect your products with those used by your customers. ILLA Flow also supports scheduled tasks, Webhooks, and parameter passing."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/resource.png",alt:"resource"})}),"\n",(0,n.jsx)(t.p,{children:"The most unique feature of ILLA Flow is the ability to incorporate an AI Agent into the workflow. This allows you to use an AI Agent, created by OpenAI's model, to process your notifications before sending them, making the notifications smarter and more interesting. You can also use the AI Agent for complex analyses, simplifying previously challenging summaries."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/agent.png",alt:"agent"})}),"\n",(0,n.jsx)(t.h2,{id:"achieved-results",children:"Achieved Results"}),"\n",(0,n.jsx)(t.p,{children:"We can create a workflow in ILLA Flow and then call Slack's Webhook in the workflow to achieve automated message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"After the completion of CI/CD tools, or after daily scheduled tasks, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to GitHub, allowing us to see messages sent by ILLA Flow in GitHub Issues."}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to the alert monitoring system, so when an alarm or anomaly occurs, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:"Finally, another product of ILLA, ILLA Builder, supports building custom panels, allowing us to jump directly to ILLA Builder to view more information through the links sent in Slack, making notifications very smart and detailed."}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"In daily work, there are numerous automation scenarios, and ILLA Flow is a tool aimed at developers. Most other automation connection tools are geared towards general users, which can make configuration more complex for developers."}),"\n",(0,n.jsx)(t.p,{children:"Using ILLA Flow, you can integrate AI Agents and various SaaS with one click, making internal team processes more automated and notifications smarter."})]})}function d(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>i});var n=o(959);const a={},s=n.createContext(a);function i(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3327],{4441:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var n=o(1527),a=o(7214);const s={slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},i=void 0,l={permalink:"/illa-website/blog/automate-send-to-slack",source:"@site/blog/automate-send-to-slack/automate-send-to-slack.md",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",date:"2024-01-17T10:00:00.000Z",formattedDate:"January 17, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"},{label:"slack",permalink:"/illa-website/blog/tags/slack"},{label:"automate",permalink:"/illa-website/blog/tags/automate"}],readingTime:3.275,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"automate-send-to-slack",title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/cover.webp",tags:["workflow","slack","automate"],date:"2024-01-17T10:00"},unlisted:!1,prevItem:{title:"Create AI Tools like building with blocks",permalink:"/illa-website/blog/build-ai-tools"},nextItem:{title:"Best product that enables freelancers to create admin panels",permalink:"/illa-website/blog/boost-freelancer"},relatedPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"How to Solve",id:"how-to-solve",level:2},{value:"Achieved Results",id:"achieved-results",level:2},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const t={h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily. Supporting powerful text and media formats, Slack allows us to send various messages. As developers, we have a multitude of tasks that need to be automated, such as:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Compilation and Building"}),": Automating the process of code compilation, especially in large projects, can significantly improve efficiency."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Test Execution"}),": Automatically running unit tests, integration tests, and performance tests to ensure code quality."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Code Deployment"}),": Automating code deployment to production or test environments, a common practice in Continuous Integration/Continuous Deployment (CI/CD) processes."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Data Backup and Recovery"}),": Regularly automating database and application data backups, and restoring them when needed."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Monitoring and Alerts"}),": Automating the monitoring of system and application performance and sending alerts in case of issues."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Log File Management"}),": Automating the collection, analysis, and archiving of logs."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Environment Configuration"}),": Using configuration management tools to automatically set up and maintain development, testing, and production environments."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Documentation Generation"}),": Automatically generating documentation from code comments or database structures."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Batch Processing of Data or Files"}),": Automatically performing data transformations, migrations, or other batch processing tasks."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Dependency Management"}),": Automatically managing project dependencies to ensure the latest and compatible versions of libraries and frameworks."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"These tasks are usually automated through various tools and scripts, such as using Jenkins or GitHub Actions for CI/CD processes, or Ansible, Puppet for environment configuration and management. Developers use many tools to accomplish these tasks, but these tools are usually independent. After completing their tasks, I believe everyone would appreciate a comprehensive notification for updates."}),"\n",(0,n.jsx)(t.p,{children:"Studies show that if an issue is notified via Slack at the time of creation, the resolution time can be reduced by 50%. Therefore, we need a tool to help us automate message sending to Slack, allowing us to see all messages in one place, rather than checking various tools."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.h2,{id:"how-to-solve",children:"How to Solve"}),"\n",(0,n.jsx)(t.p,{children:"Here we choose a tool to solve this, named ILLA Flow. It is a connector tool aimed at developers, helping them quickly build various automation tasks, including automating message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow offers various integrations, including but not limited to the most commonly used RestAPI, GraphQL, and a vast number of database connections and various SaaS platform capabilities, allowing you to quickly connect your products with those used by your customers. ILLA Flow also supports scheduled tasks, Webhooks, and parameter passing."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/resource.png",alt:"resource"})}),"\n",(0,n.jsx)(t.p,{children:"The most unique feature of ILLA Flow is the ability to incorporate an AI Agent into the workflow. This allows you to use an AI Agent, created by OpenAI's model, to process your notifications before sending them, making the notifications smarter and more interesting. You can also use the AI Agent for complex analyses, simplifying previously challenging summaries."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/agent.png",alt:"agent"})}),"\n",(0,n.jsx)(t.h2,{id:"achieved-results",children:"Achieved Results"}),"\n",(0,n.jsx)(t.p,{children:"We can create a workflow in ILLA Flow and then call Slack's Webhook in the workflow to achieve automated message sending to Slack."}),"\n",(0,n.jsx)(t.p,{children:"After the completion of CI/CD tools, or after daily scheduled tasks, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/automate-send-to-slack/connector.png",alt:"connector"})}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to GitHub, allowing us to see messages sent by ILLA Flow in GitHub Issues."}),"\n",(0,n.jsx)(t.p,{children:"We can also connect ILLA Flow to the alert monitoring system, so when an alarm or anomaly occurs, we can see messages in Slack."}),"\n",(0,n.jsx)(t.p,{children:"Finally, another product of ILLA, ILLA Builder, supports building custom panels, allowing us to jump directly to ILLA Builder to view more information through the links sent in Slack, making notifications very smart and detailed."}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"In daily work, there are numerous automation scenarios, and ILLA Flow is a tool aimed at developers. Most other automation connection tools are geared towards general users, which can make configuration more complex for developers."}),"\n",(0,n.jsx)(t.p,{children:"Using ILLA Flow, you can integrate AI Agents and various SaaS with one click, making internal team processes more automated and notifications smarter."})]})}function d(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>i});var n=o(959);const a={},s=n.createContext(a);function i(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/a48c94eb.c15169ea.js b/assets/js/a48c94eb.03eb6d3c.js
similarity index 82%
rename from assets/js/a48c94eb.c15169ea.js
rename to assets/js/a48c94eb.03eb6d3c.js
index e4b9594526..a8580a261e 100644
--- a/assets/js/a48c94eb.c15169ea.js
+++ b/assets/js/a48c94eb.03eb6d3c.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8347],{9261:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var n=s(1527),a=s(7214);const l={slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},o=void 0,i={permalink:"/illa-website/blog/postgresql-isnull",source:"@site/blog/postgresql-isnull/postgresql-isnull.md",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",date:"2024-02-04T11:00:00.000Z",formattedDate:"February 4, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"isnull",permalink:"/illa-website/blog/tags/isnull"},{label:"isnotnull",permalink:"/illa-website/blog/tags/isnotnull"}],readingTime:2.435,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},unlisted:!1,prevItem:{title:"PostgreSQL SELECT Statement",permalink:"/illa-website/blog/postgresql-select"},nextItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},relatedPosts:[{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL IS NULL Syntax",id:"postgresql-is-null-syntax",level:2},{value:"PostgreSQL IS NULL Operator Rules",id:"postgresql-is-null-operator-rules",level:2},{value:"PostgreSQL IS NULL Examples",id:"postgresql-is-null-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["This article explains how to use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator in PostgreSQL to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),".\nPostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a boolean operator that checks if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),". A ",(0,n.jsx)(t.code,{children:"NULL"})," value is a special value that\nindicates nothing, it is neither an empty string nor false."]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-syntax",children:"PostgreSQL IS NULL Syntax"}),"\n",(0,n.jsxs)(t.p,{children:["PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a unary comparison operator that only requires one operand. The syntax for the ",(0,n.jsx)(t.code,{children:"IS NULL"}),"\noperator is:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"expr IS NULL\nexpr IS NOT NULL\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Breakdown:"})}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"expr"})," can be a field name, a value, or an expression."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NOT NULL"})," is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," can be used in ",(0,n.jsx)(t.code,{children:"SELECT"})," statements or ",(0,n.jsx)(t.code,{children:"WHERE"})," clauses."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-operator-rules",children:"PostgreSQL IS NULL Operator Rules"}),"\n",(0,n.jsxs)(t.p,{children:["When the operand on the left side of the PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator is ",(0,n.jsx)(t.code,{children:"NULL"}),", the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator returns ",(0,n.jsx)(t.code,{children:"t"}),",\notherwise it returns ",(0,n.jsx)(t.code,{children:"f"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:'SELECT\n NULL IS NULL "NULL IS NULL",\n 0 IS NULL "0 IS NULL",\n 1 IS NULL "1 IS NULL";\n'})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" NULL IS NOT NULL | 0 IS NOT NULL | 1 IS NOT NULL\n------------------+---------------+---------------\n f | t | t\n"})}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-examples",children:"PostgreSQL IS NULL Examples"}),"\n",(0,n.jsxs)(t.p,{children:["We will use the tables in the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database for demonstration. Please install the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database in\nPostgreSQL first."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database is one of the most widely used and best sample databases. The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database was\noriginally developed by Mike Hillyer, a former member of the MySQL AB documentation team. It is designed to provide a\nstandard schema that can be used for example demonstrations in books, tutorials, articles, etc."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," database models a DVD rental store business, including movies, actors, movie-actor relationships, and a\ncentral inventory table that connects movies, stores, and rental transactions."]}),"\n",(0,n.jsxs)(t.p,{children:["As one of the best sample databases, the ",(0,n.jsx)(t.code,{children:"Sakila"})," database has been ported to platforms such as PostgreSQL, Oracle, DB2,\nand SQLite."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database, the ",(0,n.jsx)(t.code,{children:"staff"})," table stores employee information for the DVD rental store."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"staff"})," table, ",(0,n.jsx)(t.code,{children:"picture"})," stores the employee's photo file. To query for employees who have not uploaded a photo\nfrom the ",(0,n.jsx)(t.code,{children:"staff"})," table, you need to check if ",(0,n.jsx)(t.code,{children:"picture"})," is ",(0,n.jsx)(t.code,{children:"NULL"}),". Use the following SQL statement with ",(0,n.jsx)(t.code,{children:"IS NULL"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"SELECT\n first_name, last_name, picture\nFROM\n staff\nWHERE\n picture IS NULL;\n"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" first_name | last_name | picture\n------------+-----------+---------\n Mike | Hillyer | \n Jon | Stephens | \n"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(t.p,{children:["In this article, we learned the syntax and usage of the ",(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," comparison operators in PostgreSQL.\nHere are the key takeaways from this article:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," are unary comparison operators."]}),"\n",(0,n.jsxs)(t.li,{children:["Use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["The ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," operator is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"NULL IS NULL"})," evaluates to true."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(959);const a={},l=n.createContext(a);function o(e){const t=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(l.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8347],{9261:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var n=s(1527),a=s(7214);const l={slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},o=void 0,i={permalink:"/illa-website/blog/postgresql-isnull",source:"@site/blog/postgresql-isnull/postgresql-isnull.md",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",date:"2024-02-04T11:00:00.000Z",formattedDate:"February 4, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"isnull",permalink:"/illa-website/blog/tags/isnull"},{label:"isnotnull",permalink:"/illa-website/blog/tags/isnotnull"}],readingTime:2.435,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},unlisted:!1,prevItem:{title:"PostgreSQL SELECT Statement",permalink:"/illa-website/blog/postgresql-select"},nextItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},relatedPosts:[{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL IS NULL Syntax",id:"postgresql-is-null-syntax",level:2},{value:"PostgreSQL IS NULL Operator Rules",id:"postgresql-is-null-operator-rules",level:2},{value:"PostgreSQL IS NULL Examples",id:"postgresql-is-null-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["This article explains how to use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator in PostgreSQL to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),".\nPostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a boolean operator that checks if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),". A ",(0,n.jsx)(t.code,{children:"NULL"})," value is a special value that\nindicates nothing, it is neither an empty string nor false."]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-syntax",children:"PostgreSQL IS NULL Syntax"}),"\n",(0,n.jsxs)(t.p,{children:["PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a unary comparison operator that only requires one operand. The syntax for the ",(0,n.jsx)(t.code,{children:"IS NULL"}),"\noperator is:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"expr IS NULL\nexpr IS NOT NULL\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Breakdown:"})}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"expr"})," can be a field name, a value, or an expression."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NOT NULL"})," is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," can be used in ",(0,n.jsx)(t.code,{children:"SELECT"})," statements or ",(0,n.jsx)(t.code,{children:"WHERE"})," clauses."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-operator-rules",children:"PostgreSQL IS NULL Operator Rules"}),"\n",(0,n.jsxs)(t.p,{children:["When the operand on the left side of the PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator is ",(0,n.jsx)(t.code,{children:"NULL"}),", the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator returns ",(0,n.jsx)(t.code,{children:"t"}),",\notherwise it returns ",(0,n.jsx)(t.code,{children:"f"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:'SELECT\n NULL IS NULL "NULL IS NULL",\n 0 IS NULL "0 IS NULL",\n 1 IS NULL "1 IS NULL";\n'})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" NULL IS NOT NULL | 0 IS NOT NULL | 1 IS NOT NULL\n------------------+---------------+---------------\n f | t | t\n"})}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-examples",children:"PostgreSQL IS NULL Examples"}),"\n",(0,n.jsxs)(t.p,{children:["We will use the tables in the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database for demonstration. Please install the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database in\nPostgreSQL first."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database is one of the most widely used and best sample databases. The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database was\noriginally developed by Mike Hillyer, a former member of the MySQL AB documentation team. It is designed to provide a\nstandard schema that can be used for example demonstrations in books, tutorials, articles, etc."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," database models a DVD rental store business, including movies, actors, movie-actor relationships, and a\ncentral inventory table that connects movies, stores, and rental transactions."]}),"\n",(0,n.jsxs)(t.p,{children:["As one of the best sample databases, the ",(0,n.jsx)(t.code,{children:"Sakila"})," database has been ported to platforms such as PostgreSQL, Oracle, DB2,\nand SQLite."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database, the ",(0,n.jsx)(t.code,{children:"staff"})," table stores employee information for the DVD rental store."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"staff"})," table, ",(0,n.jsx)(t.code,{children:"picture"})," stores the employee's photo file. To query for employees who have not uploaded a photo\nfrom the ",(0,n.jsx)(t.code,{children:"staff"})," table, you need to check if ",(0,n.jsx)(t.code,{children:"picture"})," is ",(0,n.jsx)(t.code,{children:"NULL"}),". Use the following SQL statement with ",(0,n.jsx)(t.code,{children:"IS NULL"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"SELECT\n first_name, last_name, picture\nFROM\n staff\nWHERE\n picture IS NULL;\n"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" first_name | last_name | picture\n------------+-----------+---------\n Mike | Hillyer | \n Jon | Stephens | \n"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(t.p,{children:["In this article, we learned the syntax and usage of the ",(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," comparison operators in PostgreSQL.\nHere are the key takeaways from this article:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," are unary comparison operators."]}),"\n",(0,n.jsxs)(t.li,{children:["Use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["The ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," operator is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"NULL IS NULL"})," evaluates to true."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(959);const a={},l=n.createContext(a);function o(e){const t=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(l.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/b6eb34d2.6019a96f.js b/assets/js/b6eb34d2.6019a96f.js
deleted file mode 100644
index e5da84e140..0000000000
--- a/assets/js/b6eb34d2.6019a96f.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5191],{5067:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(1527),o=t(7214);const s={slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},a=void 0,r={permalink:"/illa-website/blog/shadcn-ui-2024",source:"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"shadcn-ui",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.96,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},nextItem:{title:"Shadcn vs MUI: A Comparative Analysis of Strengths and Weaknesses",permalink:"/illa-website/blog/shadcn-vs-mui"},relatedPosts:[{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"},{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"},{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of Shadcn UI",id:"features-of-shadcn-ui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"How to Choose",id:"how-to-choose",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains vibrant. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"In general, companies choose a component library when building web applications to streamline repetitive tasks. Component libraries offer a range of out-of-the-box components like Select, Input, CheckBox, etc. These components, with customizable styles or built-in attractive styles, enable rapid development of aesthetically pleasing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we typically use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, usually aligned with the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, emphasizing design aesthetics and rapid functionality implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze the Shadcn UI component library based on the following points:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Design"}),"\n",(0,i.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,i.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"features-of-shadcn-ui",children:"Features of Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:"Some detailed data about Shadcn:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\u2b50 Github Stars: 37k"}),"\n",(0,i.jsx)(n.li,{children:"\u23ec NPM Downloads: 23,962 downloads per week"}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Mar 8, 2023"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI is a relatively new project that gained 37k stars in less than a year, indicating its rapid recognition in the open-source community."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/shadcn-ui.png",alt:"shadcn-ui"})}),"\n",(0,i.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,i.jsx)(n.p,{children:"In terms of design, Shadcn UI leans towards a business style with a clean UI, suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes, but it seems to offer customization only for:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Colors"}),"\n",(0,i.jsx)(n.li,{children:"Border radii"}),"\n",(0,i.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n",(0,i.jsx)(n.li,{children:'Predefined "Default" and "New York" styles'}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"In terms of fine-grained control, such as font and font size, it appears to lack flexibility. However, for internal tool scenarios, this level of control may be sufficient, but for external tools, it might be somewhat limiting."}),"\n",(0,i.jsxs)(n.p,{children:["In terms of CSS, Shadcn UI supports both traditional CSS and CSS-in-JS, using ",(0,i.jsx)(n.a,{href:"https://stitches.dev/",children:"Stitches"})," for the CSS-in-JS solution. Traditional CSS is supported by default, but additional configuration might be needed for less and sass, and it's not out-of-the-box."]}),"\n",(0,i.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,i.jsx)(n.p,{children:"The library's feature richness completely satisfies daily development needs, with most capabilities supported and comprehensive callbacks. Shadcn UI supports crucial capabilities, including but not limited to:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"SSR"}),"\n",(0,i.jsx)(n.li,{children:"Accessibility"}),"\n",(0,i.jsx)(n.li,{children:"Animation"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"However, for more advanced requirements like extremely rich charts and high-performance tables, it seems not to be supported. With the continuous development of the project, it is expected that the project will evolve over time."}),"\n",(0,i.jsx)(n.h2,{id:"how-to-choose",children:"How to Choose"}),"\n",(0,i.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,i.jsx)(n.p,{children:"If you are a curious open-source enthusiast, not requiring highly customized UI, and without complex data processing needs, Shadcn UI is recommended for development. It is lightweight, with simpler configuration, ready to use out-of-the-box, allowing direct development without worrying about details."}),"\n",(0,i.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"If you have a high need for UI and component customization and plan to use Shadcn UI for large projects, it is not recommended. Shadcn UI's customization capabilities are not as robust, and it does not provide out-of-the-box charts and high-performance data components. In such cases, you may need to look for other open-source projects to supplement these features."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(959);const o={},s=i.createContext(o);function a(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/b6eb34d2.dbbd1de1.js b/assets/js/b6eb34d2.dbbd1de1.js
new file mode 100644
index 0000000000..fab58a3d6b
--- /dev/null
+++ b/assets/js/b6eb34d2.dbbd1de1.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5191],{5067:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var i=t(1527),o=t(7214);const a={slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},s=void 0,r={permalink:"/illa-website/blog/shadcn-ui-2024",source:"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",date:"2024-01-03T10:00:00.000Z",formattedDate:"January 3, 2024",tags:[{label:"shadcn-ui",permalink:"/illa-website/blog/tags/shadcn-ui"},{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.96,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"shadcn-ui-2024",title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/cover.png",tags:["shadcn-ui","react","javascript"],date:"2024-01-03T10:00"},unlisted:!1,prevItem:{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",permalink:"/illa-website/blog/nvm-use-2024"},nextItem:{title:"Shadcn vs MUI: A Comparative Analysis of Strengths and Weaknesses",permalink:"/illa-website/blog/shadcn-vs-mui"},relatedPosts:[{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"},{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Other Choices for Internal Tool Scenarios",id:"other-choices-for-internal-tool-scenarios",level:2},{value:"Features of Shadcn UI",id:"features-of-shadcn-ui",level:2},{value:"Design",id:"design",level:3},{value:"Richness of Features",id:"richness-of-features",level:3},{value:"How to Choose",id:"how-to-choose",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"2024 has arrived, and the ecosystem of React component libraries remains vibrant. This article will dissect two currently popular component libraries from various perspectives, providing an objective analysis to help users make more informed choices."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"In general, companies choose a component library when building web applications to streamline repetitive tasks. Component libraries offer a range of out-of-the-box components like Select, Input, CheckBox, etc. These components, with customizable styles or built-in attractive styles, enable rapid development of aesthetically pleasing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we typically use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, usually aligned with the company's style, more aesthetically pleasing, and responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: Aimed at internal use by company employees, emphasizing design aesthetics and rapid functionality implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze the Shadcn UI component library based on the following points:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Design"}),"\n",(0,i.jsx)(n.li,{children:"Richness of Features"}),"\n",(0,i.jsx)(n.li,{children:"How to Choose in Different Scenarios"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"other-choices-for-internal-tool-scenarios",children:"Other Choices for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(n.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"features-of-shadcn-ui",children:"Features of Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:"Some detailed data about Shadcn:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\u2b50 Github Stars: 37k"}),"\n",(0,i.jsx)(n.li,{children:"\u23ec NPM Downloads: 23,962 downloads per week"}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\udcaa\ud83c\udffc First Release Date: Mar 8, 2023"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI is a relatively new project that gained 37k stars in less than a year, indicating its rapid recognition in the open-source community."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/shadcn-ui-2024/shadcn-ui.png",alt:"shadcn-ui"})}),"\n",(0,i.jsx)(n.h3,{id:"design",children:"Design"}),"\n",(0,i.jsx)(n.p,{children:"In terms of design, Shadcn UI leans towards a business style with a clean UI, suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes, but it seems to offer customization only for:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Colors"}),"\n",(0,i.jsx)(n.li,{children:"Border radii"}),"\n",(0,i.jsx)(n.li,{children:"Dark mode / Light mode"}),"\n",(0,i.jsx)(n.li,{children:'Predefined "Default" and "New York" styles'}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"In terms of fine-grained control, such as font and font size, it appears to lack flexibility. However, for internal tool scenarios, this level of control may be sufficient, but for external tools, it might be somewhat limiting."}),"\n",(0,i.jsxs)(n.p,{children:["In terms of CSS, Shadcn UI supports both traditional CSS and CSS-in-JS, using ",(0,i.jsx)(n.a,{href:"https://stitches.dev/",children:"Stitches"})," for the CSS-in-JS solution. Traditional CSS is supported by default, but additional configuration might be needed for less and sass, and it's not out-of-the-box."]}),"\n",(0,i.jsx)(n.h3,{id:"richness-of-features",children:"Richness of Features"}),"\n",(0,i.jsx)(n.p,{children:"The library's feature richness completely satisfies daily development needs, with most capabilities supported and comprehensive callbacks. Shadcn UI supports crucial capabilities, including but not limited to:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"SSR"}),"\n",(0,i.jsx)(n.li,{children:"Accessibility"}),"\n",(0,i.jsx)(n.li,{children:"Animation"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"However, for more advanced requirements like extremely rich charts and high-performance tables, it seems not to be supported. With the continuous development of the project, it is expected that the project will evolve over time."}),"\n",(0,i.jsx)(n.h2,{id:"how-to-choose",children:"How to Choose"}),"\n",(0,i.jsx)(n.p,{children:"\u2705 Advantages"}),"\n",(0,i.jsx)(n.p,{children:"If you are a curious open-source enthusiast, not requiring highly customized UI, and without complex data processing needs, Shadcn UI is recommended for development. It is lightweight, with simpler configuration, ready to use out-of-the-box, allowing direct development without worrying about details."}),"\n",(0,i.jsx)(n.p,{children:"\u274c Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"If you have a high need for UI and component customization and plan to use Shadcn UI for large projects, it is not recommended. Shadcn UI's customization capabilities are not as robust, and it does not provide out-of-the-box charts and high-performance data components. In such cases, you may need to look for other open-source projects to supplement these features."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(959);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/bd8bbd45.51c5b001.js b/assets/js/bd8bbd45.1cb20233.js
similarity index 93%
rename from assets/js/bd8bbd45.51c5b001.js
rename to assets/js/bd8bbd45.1cb20233.js
index 223905a269..998e9a50ca 100644
--- a/assets/js/bd8bbd45.51c5b001.js
+++ b/assets/js/bd8bbd45.1cb20233.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2852],{2747:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=a(1527),t=a(7214);const s={slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},o=void 0,r={permalink:"/illa-website/blog/react-component-library",source:"@site/blog/react-component-library/react-component-library.md",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:6.14,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},nextItem:{title:"Best Web Worker Tutorial",permalink:"/illa-website/blog/web-worker-tutorial"},relatedPosts:[{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Best Choice for Internal Tool Scenarios",id:"best-choice-for-internal-tool-scenarios",level:2},{value:"MUI",id:"mui",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Shadcn UI",id:"shadcn-ui",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Chakra UI",id:"chakra-ui",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"Ant Design",id:"ant-design",level:2},{value:"Advantages",id:"advantages-3",level:3},{value:"Disadvantages",id:"disadvantages-3",level:3},{value:"Fluent UI",id:"fluent-ui",level:2},{value:"Advantages",id:"advantages-4",level:3},{value:"Disadvantages",id:"disadvantages-4",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber. React is also used by many open-source projects, such as WordPress, Drupal, and Magento."}),"\n",(0,i.jsx)(n.p,{children:"When building many interfaces, it's essential to choose an appropriate React component library. These libraries can help us quickly build user interfaces. They also provide many reusable components, such as buttons, forms, charts, tables, etc. These libraries offer many features, including themes, animations, routing, state management, and more."}),"\n",(0,i.jsx)(n.p,{children:"There are many React component libraries on the market. Each library has its own features, pros and cons, and price. In this blog post, we will review the top 5 React component libraries in 2024 and compare them based on their features, ease of use, compatibility."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"Typically, companies choose component libraries to build web applications to simplify repetitive tasks. Component libraries provide a range of ready-to-use components, such as dropdowns, input boxes, checkboxes, etc. These components come with customizable styles or attractive built-in styles, allowing for the rapid development of visually appealing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we usually use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, often consistent with the company's style, more aesthetically pleasing, and more responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: For internal use by company employees, emphasizing design aesthetics and rapid feature implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze component libraries based on the following aspects:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Advantages"}),"\n",(0,i.jsx)(n.li,{children:"Disadvantages"}),"\n",(0,i.jsx)(n.li,{children:"How to make a choice"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"best-choice-for-internal-tool-scenarios",children:"Best Choice for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows for the rapid construction of internal tools using simple JS, without the need for complex frontend projects. It offers drag-and-drop UI building."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web and application management panels"}),"\n",(0,i.jsx)(n.li,{children:"Data dashboards"}),"\n",(0,i.jsx)(n.li,{children:"Custom B2B tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with component libraries, ILLA Cloud can achieve tool construction 10 times faster and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"mui",children:"MUI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/mui.png",alt:"MUI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 90k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 3,263,852 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: November 6, 2014"}),"\n",(0,i.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"MUI's components are comprehensive, consisting of:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"MUI Core: Core components, including buttons, forms, icons, charts, tables, etc."}),"\n",(0,i.jsx)(n.li,{children:"MUI X: Advanced components, including data tables, complex charts, etc."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Using MUI can cover all scenarios without the need for other component libraries for complex data handling and presentation."}),"\n",(0,i.jsx)(n.p,{children:"If you like the style of Material Design, MUI is your best choice. You can build a complete Google-style application without any modifications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Complex data handling components in MUI X require payment."}),"\n",(0,i.jsx)(n.p,{children:"MUI, as an implementation of Material Design, has a rigorous design style, which may require extra work for scenarios needing custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"MUI's custom Style system uses EmotionJs for overall layout style adjustments, which may have a learning curve and might not be suitable for direct development without consulting documentation."}),"\n",(0,i.jsx)(n.p,{children:"If you dislike the CSS-IN-JS approach, MUI might not be your best choice."}),"\n",(0,i.jsx)(n.h2,{id:"shadcn-ui",children:"Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/shadcnui.png",alt:"Shadcn UI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 37k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 23,962 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: March 8, 2023"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a relatively new project, Shadcn UI has quickly gained recognition in the open-source community. Being newly built without historical baggage, it can adapt better to new technology stacks."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's design style is more business-oriented, with a clean user interface suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes and some preset styles, allowing for quick application builds without the need for custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's biggest advantage is that it is not a library distributed by npm. Integrating Shadcn UI involves building directly with code, meaning you can modify its code without additional effort."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme is based on CSS variables, which means it does not support IE11. If you need IE11 support, Shadcn UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme customization uses CSS variables or Tailwind CSS utility classes, so additional work may be needed for CSS-IN-JS users."}),"\n",(0,i.jsx)(n.p,{children:"Being relatively new, Shadcn UI may lack support for complex components like DataGrid and Chart, requiring other solutions, meaning you can't rely on a single component library for all tasks."}),"\n",(0,i.jsx)(n.h2,{id:"chakra-ui",children:"Chakra UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/chakraui.png",alt:"chakra-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 35.8k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 534,188 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: December 7, 2019"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is a commercially styled component library, not bound to any specific style, making it aesthetically pleasing for most users."}),"\n",(0,i.jsx)(n.p,{children:"As a library, Chakra UI has a vast template market, offering complete templates for mainstream scenarios like e-commerce and SaaS websites. These templates can be used directly or modified."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI's features mostly require no configuration, helpful for rapid prototyping, and natively supports responsiveness for previews on different devices."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is SEO-friendly, essential for products requiring SEO optimization."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"It's best not to use Chakra UI for complex tool or SaaS products due to its limited component customization capabilities. Using Chakra UI for Landing Pages is the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Although Chakra UI has a rich template market, these templates are not free, and additional costs are required for purchases."}),"\n",(0,i.jsx)(n.h2,{id:"ant-design",children:"Ant Design"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/antd.png",alt:"ant-design"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 89.1k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 1,264,151 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: July 21, 2015"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-3",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a library maintained by a mature billion-dollar public company, Ant Design offers the best richness, covering all scenarios with stable components."}),"\n",(0,i.jsx)(n.p,{children:"If you need to unify React and Vue styles in your workspace, Ant Design is your best choice, supporting both React and Vue."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design includes not only basic components but also Web3 components, allowing for direct Web3 application development."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design also customizes component libraries for data charts, big data scenarios, and maps, supporting complex data screen scenarios."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-3",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Ant Design's extensive support comes with historical baggage, such as poor performance in the Table component, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Although Ant Design excellently covers component breadth, it lacks depth in component satisfaction."}),"\n",(0,i.jsx)(n.p,{children:"All dependencies in Ant Design are maintained by Ant Design, requiring extra work to adapt your build and CSS schemes, which is unfriendly for scenarios wishing to use other open-source libraries."}),"\n",(0,i.jsx)(n.h2,{id:"fluent-ui",children:"Fluent UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/fluentui.png",alt:"fluent-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 17.3k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 191,170 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: September 17, 2020"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-4",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Maintained officially by Microsoft, Fluent UI's style is completely consistent with Microsoft's, helpful for scenarios needing to align with Microsoft's style."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI supports many platforms, including Web, React Native, iOS, Android, macOS, and Windows, allowing for the development of cross-platform applications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-4",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Not everyone likes Microsoft's style, so if you dislike it, Fluent UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI's documentation could be improved, as documentation construction is crucial for developers."}),"\n",(0,i.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(n.p,{children:"If you need a comprehensive component library and are willing to pay for it, MUI is recommended. If you don't want to pay, Ant Design is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you are developing a Landing Page, Chakra UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you want to use the Microsoft style, Fluent UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you don't want to introduce a component library and only want to integrate the source code, Shadcn UI is recommended."})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,a)=>{a.d(n,{Z:()=>r,a:()=>o});var i=a(959);const t={},s=i.createContext(t);function o(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2852],{2747:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=a(1527),t=a(7214);const s={slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},o=void 0,r={permalink:"/illa-website/blog/react-component-library",source:"@site/blog/react-component-library/react-component-library.md",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",date:"2024-01-29T10:00:00.000Z",formattedDate:"January 29, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:6.14,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-component-library",title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-component-library/cover.webp",tags:["react","component","library"],date:"2024-01-29T10:00"},unlisted:!1,prevItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},nextItem:{title:"Best Web Worker Tutorial",permalink:"/illa-website/blog/web-worker-tutorial"},relatedPosts:[{title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",permalink:"/illa-website/blog/react-error-boundary",formattedDate:"February 27, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:13.86,date:"2024-02-27T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},l={authorsImageUrls:[void 0]},c=[{value:"Why Choose a Component Library?",id:"why-choose-a-component-library",level:2},{value:"Best Choice for Internal Tool Scenarios",id:"best-choice-for-internal-tool-scenarios",level:2},{value:"MUI",id:"mui",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Shadcn UI",id:"shadcn-ui",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Chakra UI",id:"chakra-ui",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"Ant Design",id:"ant-design",level:2},{value:"Advantages",id:"advantages-3",level:3},{value:"Disadvantages",id:"disadvantages-3",level:3},{value:"Fluent UI",id:"fluent-ui",level:2},{value:"Advantages",id:"advantages-4",level:3},{value:"Disadvantages",id:"disadvantages-4",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber. React is also used by many open-source projects, such as WordPress, Drupal, and Magento."}),"\n",(0,i.jsx)(n.p,{children:"When building many interfaces, it's essential to choose an appropriate React component library. These libraries can help us quickly build user interfaces. They also provide many reusable components, such as buttons, forms, charts, tables, etc. These libraries offer many features, including themes, animations, routing, state management, and more."}),"\n",(0,i.jsx)(n.p,{children:"There are many React component libraries on the market. Each library has its own features, pros and cons, and price. In this blog post, we will review the top 5 React component libraries in 2024 and compare them based on their features, ease of use, compatibility."}),"\n",(0,i.jsx)(n.h2,{id:"why-choose-a-component-library",children:"Why Choose a Component Library?"}),"\n",(0,i.jsx)(n.p,{children:"Typically, companies choose component libraries to build web applications to simplify repetitive tasks. Component libraries provide a range of ready-to-use components, such as dropdowns, input boxes, checkboxes, etc. These components come with customizable styles or attractive built-in styles, allowing for the rapid development of visually appealing websites without starting from scratch."}),"\n",(0,i.jsx)(n.p,{children:"In summary, we usually use component libraries in two scenarios:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"External tools: Directly facing company users, often consistent with the company's style, more aesthetically pleasing, and more responsive."}),"\n",(0,i.jsx)(n.li,{children:"Internal tools: For internal use by company employees, emphasizing design aesthetics and rapid feature implementation."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Next, we will analyze component libraries based on the following aspects:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"Advantages"}),"\n",(0,i.jsx)(n.li,{children:"Disadvantages"}),"\n",(0,i.jsx)(n.li,{children:"How to make a choice"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"best-choice-for-internal-tool-scenarios",children:"Best Choice for Internal Tool Scenarios"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://illacloud.com",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows for the rapid construction of internal tools using simple JS, without the need for complex frontend projects. It offers drag-and-drop UI building."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Web and application management panels"}),"\n",(0,i.jsx)(n.li,{children:"Data dashboards"}),"\n",(0,i.jsx)(n.li,{children:"Custom B2B tools"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Compared to building with component libraries, ILLA Cloud can achieve tool construction 10 times faster and supports collaborative editing within teams."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(n.h2,{id:"mui",children:"MUI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/mui.png",alt:"MUI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 90k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 3,263,852 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: November 6, 2014"}),"\n",(0,i.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"MUI's components are comprehensive, consisting of:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"MUI Core: Core components, including buttons, forms, icons, charts, tables, etc."}),"\n",(0,i.jsx)(n.li,{children:"MUI X: Advanced components, including data tables, complex charts, etc."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Using MUI can cover all scenarios without the need for other component libraries for complex data handling and presentation."}),"\n",(0,i.jsx)(n.p,{children:"If you like the style of Material Design, MUI is your best choice. You can build a complete Google-style application without any modifications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Complex data handling components in MUI X require payment."}),"\n",(0,i.jsx)(n.p,{children:"MUI, as an implementation of Material Design, has a rigorous design style, which may require extra work for scenarios needing custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"MUI's custom Style system uses EmotionJs for overall layout style adjustments, which may have a learning curve and might not be suitable for direct development without consulting documentation."}),"\n",(0,i.jsx)(n.p,{children:"If you dislike the CSS-IN-JS approach, MUI might not be your best choice."}),"\n",(0,i.jsx)(n.h2,{id:"shadcn-ui",children:"Shadcn UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/shadcnui.png",alt:"Shadcn UI"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 37k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 23,962 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: March 8, 2023"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a relatively new project, Shadcn UI has quickly gained recognition in the open-source community. Being newly built without historical baggage, it can adapt better to new technology stacks."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's design style is more business-oriented, with a clean user interface suitable for internal tools and serious application scenarios. Shadcn UI supports custom themes and some preset styles, allowing for quick application builds without the need for custom design styles."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's biggest advantage is that it is not a library distributed by npm. Integrating Shadcn UI involves building directly with code, meaning you can modify its code without additional effort."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme is based on CSS variables, which means it does not support IE11. If you need IE11 support, Shadcn UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Shadcn UI's theme customization uses CSS variables or Tailwind CSS utility classes, so additional work may be needed for CSS-IN-JS users."}),"\n",(0,i.jsx)(n.p,{children:"Being relatively new, Shadcn UI may lack support for complex components like DataGrid and Chart, requiring other solutions, meaning you can't rely on a single component library for all tasks."}),"\n",(0,i.jsx)(n.h2,{id:"chakra-ui",children:"Chakra UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/chakraui.png",alt:"chakra-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 35.8k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 534,188 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: December 7, 2019"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is a commercially styled component library, not bound to any specific style, making it aesthetically pleasing for most users."}),"\n",(0,i.jsx)(n.p,{children:"As a library, Chakra UI has a vast template market, offering complete templates for mainstream scenarios like e-commerce and SaaS websites. These templates can be used directly or modified."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI's features mostly require no configuration, helpful for rapid prototyping, and natively supports responsiveness for previews on different devices."}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI is SEO-friendly, essential for products requiring SEO optimization."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Chakra UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"It's best not to use Chakra UI for complex tool or SaaS products due to its limited component customization capabilities. Using Chakra UI for Landing Pages is the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Although Chakra UI has a rich template market, these templates are not free, and additional costs are required for purchases."}),"\n",(0,i.jsx)(n.h2,{id:"ant-design",children:"Ant Design"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/antd.png",alt:"ant-design"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 89.1k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 1,264,151 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: July 21, 2015"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-3",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"As a library maintained by a mature billion-dollar public company, Ant Design offers the best richness, covering all scenarios with stable components."}),"\n",(0,i.jsx)(n.p,{children:"If you need to unify React and Vue styles in your workspace, Ant Design is your best choice, supporting both React and Vue."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design includes not only basic components but also Web3 components, allowing for direct Web3 application development."}),"\n",(0,i.jsx)(n.p,{children:"Ant Design also customizes component libraries for data charts, big data scenarios, and maps, supporting complex data screen scenarios."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-3",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Ant Design's extensive support comes with historical baggage, such as poor performance in the Table component, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Although Ant Design excellently covers component breadth, it lacks depth in component satisfaction."}),"\n",(0,i.jsx)(n.p,{children:"All dependencies in Ant Design are maintained by Ant Design, requiring extra work to adapt your build and CSS schemes, which is unfriendly for scenarios wishing to use other open-source libraries."}),"\n",(0,i.jsx)(n.h2,{id:"fluent-ui",children:"Fluent UI"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/react-component-library/fluentui.png",alt:"fluent-ui"})}),"\n",(0,i.jsx)(n.p,{children:"\u2b50 GitHub Stars: 17.3k"}),"\n",(0,i.jsx)(n.p,{children:"\u23ec NPM Downloads: 191,170 per week"}),"\n",(0,i.jsx)(n.p,{children:"\ud83d\udcaa\ud83c\udffc Initial Release Date: September 17, 2020"}),"\n",(0,i.jsx)(n.h3,{id:"advantages-4",children:"Advantages"}),"\n",(0,i.jsx)(n.p,{children:"Maintained officially by Microsoft, Fluent UI's style is completely consistent with Microsoft's, helpful for scenarios needing to align with Microsoft's style."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI supports many platforms, including Web, React Native, iOS, Android, macOS, and Windows, allowing for the development of cross-platform applications."}),"\n",(0,i.jsx)(n.h3,{id:"disadvantages-4",children:"Disadvantages"}),"\n",(0,i.jsx)(n.p,{children:"Not everyone likes Microsoft's style, so if you dislike it, Fluent UI might not be the best choice."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI lacks component richness for complex scenarios like data handling and charts, requiring additional solutions."}),"\n",(0,i.jsx)(n.p,{children:"Fluent UI's documentation could be improved, as documentation construction is crucial for developers."}),"\n",(0,i.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(n.p,{children:"If you need a comprehensive component library and are willing to pay for it, MUI is recommended. If you don't want to pay, Ant Design is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you are developing a Landing Page, Chakra UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you want to use the Microsoft style, Fluent UI is recommended."}),"\n",(0,i.jsx)(n.p,{children:"If you don't want to introduce a component library and only want to integrate the source code, Shadcn UI is recommended."})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,n,a)=>{a.d(n,{Z:()=>r,a:()=>o});var i=a(959);const t={},s=i.createContext(t);function o(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/be40e9ec.11eec0a2.js b/assets/js/be40e9ec.11eec0a2.js
deleted file mode 100644
index 067d0434f3..0000000000
--- a/assets/js/be40e9ec.11eec0a2.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3157],{4654:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>n,metadata:()=>i,toc:()=>d});var a=s(1527),l=s(7214);const n={slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},o=void 0,i={permalink:"/illa-website/blog/list-tables-in-postgresql",source:"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"postgres",permalink:"/illa-website/blog/tags/postgres"},{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"list",permalink:"/illa-website/blog/tags/list"},{label:"tables",permalink:"/illa-website/blog/tags/tables"},{label:"psql",permalink:"/illa-website/blog/tags/psql"}],readingTime:2.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"Build core app dashboard at lightning speed",permalink:"/illa-website/blog/core-app-dashboard-2"},nextItem:{title:"How to build a custom low code CRM in 2024",permalink:"/illa-website/blog/low-code-crm"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"}],authorPosts:[{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},d=[{value:"List Tables in the Database Using \\dt",id:"list-tables-in-the-database-using-dt",level:2},{value:"Query Tables from the pg_tables Table",id:"query-tables-from-the-pg_tables-table",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the ",(0,a.jsx)(t.code,{children:"psql"})," tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"list-tables-in-the-database-using-dt",children:"List Tables in the Database Using \\dt"}),"\n",(0,a.jsxs)(t.p,{children:["This example demonstrates the process of logging into the database using the ",(0,a.jsx)(t.code,{children:"psql"})," tool and listing tables in the database. Follow these steps:"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"Log in to the PostgreSQL server using the postgres user:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:'[~] psql -U postgres\npsql (14.4)\nType "help" for help.\n'})}),"\n",(0,a.jsx)(t.p,{children:"Note: You can also use any user with the appropriate database permissions."}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsxs)(t.li,{children:["Select the ",(0,a.jsx)(t.code,{children:"testdb"})," database with the following statement:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\c testdb;\n"})}),"\n",(0,a.jsx)(t.p,{children:"If the database hasn't been created yet, run the following statement:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"CREATE DATABASE testdb;\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"3",children:["\n",(0,a.jsxs)(t.li,{children:["Use the ",(0,a.jsx)(t.code,{children:"\\dt"})," command to list all tables in the ",(0,a.jsx)(t.code,{children:"testdb"})," database:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner\n--------+----------------+-------+----------\npublic | mytable | table | postgres\npublic | product | table | postgres\npublic | test_date | table | postgres\npublic | test_time | table | postgres\npublic | test_timestamp | table | postgres\npublic | week_day_sales | table | postgres\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"4",children:["\n",(0,a.jsxs)(t.li,{children:["If you want to view more information about the tables, use the ",(0,a.jsx)(t.code,{children:"\\dt+"})," command:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt+\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner | Persistence | Access method | Size | Description\n--------+----------------+-------+----------+-------------+---------------+------------+-------------\npublic | mytable | table | postgres | permanent | heap | 16 kB |\npublic | product | table | postgres | permanent | heap | 16 kB |\npublic | test_date | table | postgres | permanent | heap | 8192 bytes |\npublic | test_time | table | postgres | permanent | heap | 8192 bytes |\npublic | test_timestamp | table | postgres | permanent | heap | 8192 bytes |\npublic | week_day_sales | table | postgres | permanent | heap | 8192 bytes |\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.p,{children:["You can see that the input of ",(0,a.jsx)(t.code,{children:"\\dt+"})," includes columns such as ",(0,a.jsx)(t.code,{children:"Persistence"}),", ",(0,a.jsx)(t.code,{children:"Access method"}),", ",(0,a.jsx)(t.code,{children:"Size"}),", and ",(0,a.jsx)(t.code,{children:"Description"})," in addition to the output of ",(0,a.jsx)(t.code,{children:"\\dt"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"query-tables-from-the-pg_tables-table",children:"Query Tables from the pg_tables Table"}),"\n",(0,a.jsxs)(t.p,{children:["In addition to the ",(0,a.jsx)(t.code,{children:"\\dt"})," and ",(0,a.jsx)(t.code,{children:"\\dt+"})," commands, you can also query all tables in the current data from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"pg_tables"})," table is a built-in table in PostgreSQL that stores all tables in the database."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"SELECT * FROM pg_tables\nWHERE schemaname = 'public';\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" schemaname | tablename | tableowner | tablespace | hasindexes | hasrules | hastriggers | rowsecurity\n------------+----------------+------------+------------+------------+----------+-------------+-------------\n public | test_date | postgres | | t | f | f | f\n public | test_time | postgres | | t | f | f | f\n public | test_timestamp | postgres | | t | f | f | f\n public | week_day_sales | postgres | | t | f | f | f\n public | mytable | postgres | | f | f | f | f\n public | product | postgres | | t | f | f | f\n(6 rows)\n"})}),"\n",(0,a.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(t.p,{children:"PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the psql tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsxs)(t.p,{children:["In MySQL, you can use the ",(0,a.jsx)(t.code,{children:"SHOW TABLES"})," command to list databases."]})]})}function h(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var a=s(959);const l={},n=a.createContext(l);function o(e){const t=a.useContext(n);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),a.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/be40e9ec.d4d1ec16.js b/assets/js/be40e9ec.d4d1ec16.js
new file mode 100644
index 0000000000..60730867d0
--- /dev/null
+++ b/assets/js/be40e9ec.d4d1ec16.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3157],{4654:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>n,metadata:()=>i,toc:()=>c});var a=s(1527),l=s(7214);const n={slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},o=void 0,i={permalink:"/illa-website/blog/list-tables-in-postgresql",source:"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"postgres",permalink:"/illa-website/blog/tags/postgres"},{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"database",permalink:"/illa-website/blog/tags/database"},{label:"list",permalink:"/illa-website/blog/tags/list"},{label:"tables",permalink:"/illa-website/blog/tags/tables"},{label:"psql",permalink:"/illa-website/blog/tags/psql"}],readingTime:2.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"list-tables-in-postgresql",title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/list-tables-in-postgresql/cover.webp",tags:["postgres","postgresql","database","list","tables","psql"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"Build core app dashboard at lightning speed",permalink:"/illa-website/blog/core-app-dashboard-2"},nextItem:{title:"How to build a custom low code CRM in 2024",permalink:"/illa-website/blog/low-code-crm"},relatedPosts:[{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",permalink:"/illa-website/blog/postgresql-isnull",formattedDate:"February 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.435,date:"2024-02-04T11:00:00.000Z"}],authorPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"List Tables in the Database Using \\dt",id:"list-tables-in-the-database-using-dt",level:2},{value:"Query Tables from the pg_tables Table",id:"query-tables-from-the-pg_tables-table",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the ",(0,a.jsx)(t.code,{children:"psql"})," tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"list-tables-in-the-database-using-dt",children:"List Tables in the Database Using \\dt"}),"\n",(0,a.jsxs)(t.p,{children:["This example demonstrates the process of logging into the database using the ",(0,a.jsx)(t.code,{children:"psql"})," tool and listing tables in the database. Follow these steps:"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"Log in to the PostgreSQL server using the postgres user:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:'[~] psql -U postgres\npsql (14.4)\nType "help" for help.\n'})}),"\n",(0,a.jsx)(t.p,{children:"Note: You can also use any user with the appropriate database permissions."}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsxs)(t.li,{children:["Select the ",(0,a.jsx)(t.code,{children:"testdb"})," database with the following statement:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\c testdb;\n"})}),"\n",(0,a.jsx)(t.p,{children:"If the database hasn't been created yet, run the following statement:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"CREATE DATABASE testdb;\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"3",children:["\n",(0,a.jsxs)(t.li,{children:["Use the ",(0,a.jsx)(t.code,{children:"\\dt"})," command to list all tables in the ",(0,a.jsx)(t.code,{children:"testdb"})," database:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner\n--------+----------------+-------+----------\npublic | mytable | table | postgres\npublic | product | table | postgres\npublic | test_date | table | postgres\npublic | test_time | table | postgres\npublic | test_timestamp | table | postgres\npublic | week_day_sales | table | postgres\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"4",children:["\n",(0,a.jsxs)(t.li,{children:["If you want to view more information about the tables, use the ",(0,a.jsx)(t.code,{children:"\\dt+"})," command:"]}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"\\dt+\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" List of relations\nSchema | Name | Type | Owner | Persistence | Access method | Size | Description\n--------+----------------+-------+----------+-------------+---------------+------------+-------------\npublic | mytable | table | postgres | permanent | heap | 16 kB |\npublic | product | table | postgres | permanent | heap | 16 kB |\npublic | test_date | table | postgres | permanent | heap | 8192 bytes |\npublic | test_time | table | postgres | permanent | heap | 8192 bytes |\npublic | test_timestamp | table | postgres | permanent | heap | 8192 bytes |\npublic | week_day_sales | table | postgres | permanent | heap | 8192 bytes |\n(6 rows)\n"})}),"\n",(0,a.jsxs)(t.p,{children:["You can see that the input of ",(0,a.jsx)(t.code,{children:"\\dt+"})," includes columns such as ",(0,a.jsx)(t.code,{children:"Persistence"}),", ",(0,a.jsx)(t.code,{children:"Access method"}),", ",(0,a.jsx)(t.code,{children:"Size"}),", and ",(0,a.jsx)(t.code,{children:"Description"})," in addition to the output of ",(0,a.jsx)(t.code,{children:"\\dt"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"query-tables-from-the-pg_tables-table",children:"Query Tables from the pg_tables Table"}),"\n",(0,a.jsxs)(t.p,{children:["In addition to the ",(0,a.jsx)(t.code,{children:"\\dt"})," and ",(0,a.jsx)(t.code,{children:"\\dt+"})," commands, you can also query all tables in the current data from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"pg_tables"})," table is a built-in table in PostgreSQL that stores all tables in the database."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"SELECT * FROM pg_tables\nWHERE schemaname = 'public';\n"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:" schemaname | tablename | tableowner | tablespace | hasindexes | hasrules | hastriggers | rowsecurity\n------------+----------------+------------+------------+------------+----------+-------------+-------------\n public | test_date | postgres | | t | f | f | f\n public | test_time | postgres | | t | f | f | f\n public | test_timestamp | postgres | | t | f | f | f\n public | week_day_sales | postgres | | t | f | f | f\n public | mytable | postgres | | f | f | f | f\n public | product | postgres | | t | f | f | f\n(6 rows)\n"})}),"\n",(0,a.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(t.p,{children:"PostgreSQL provides two ways to list all tables in a database:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Use ",(0,a.jsx)(t.code,{children:"\\dt"})," or ",(0,a.jsx)(t.code,{children:"\\dt+"})," in the psql tool to list all tables in the current database."]}),"\n",(0,a.jsxs)(t.li,{children:["Query all tables from the ",(0,a.jsx)(t.code,{children:"pg_tables"})," table."]}),"\n"]}),"\n",(0,a.jsxs)(t.p,{children:["In MySQL, you can use the ",(0,a.jsx)(t.code,{children:"SHOW TABLES"})," command to list databases."]})]})}function h(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var a=s(959);const l={},n=a.createContext(l);function o(e){const t=a.useContext(n);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),a.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1b46aaf4.d1923d53.js b/assets/js/c1d2b2d8.5e2efd69.js
similarity index 80%
rename from assets/js/1b46aaf4.d1923d53.js
rename to assets/js/c1d2b2d8.5e2efd69.js
index 108f5b9eb7..0ac22fed42 100644
--- a/assets/js/1b46aaf4.d1923d53.js
+++ b/assets/js/c1d2b2d8.5e2efd69.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[7663],{7856:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=i(1527),s=i(7214);const o={slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},a=void 0,r={permalink:"/illa-website/blog/it-support",source:"@site/blog/it-support/it-support.md",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",date:"2024-01-23T20:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:8.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},unlisted:!1,prevItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},nextItem:{title:"The Best Tools for Citizen Developers in 2024",permalink:"/illa-website/blog/best-citizen-developer-tool"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}]},l={authorsImageUrls:[void 0]},c=[{value:"Job Content of IT Support",id:"job-content-of-it-support",level:2},{value:"Recommended Tools",id:"recommended-tools",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Linear",id:"linear",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Gitlab",id:"gitlab",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Notion",id:"notion",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"IT Support is divided into Technical Support and Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support requires technicians with a broad knowledge structure. Companies of a certain size all have an IT department, commonly referred to as network management, but not all companies have Program Support."}),"\n",(0,t.jsx)(n.h2,{id:"job-content-of-it-support",children:"Job Content of IT Support"}),"\n",(0,t.jsx)(n.p,{children:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database, machinery hardware equipment, etc. If the company needs any special software or to update a new system, it is usually done by forming a team with programmers from a technology company and the company's own Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support is more like a consultant, guiding the more macroscopic direction, so they generally know a lot."}),"\n",(0,t.jsx)(n.p,{children:"Program Support specializes more in coding."}),"\n",(0,t.jsx)(n.h2,{id:"recommended-tools",children:"Recommended Tools"}),"\n",(0,t.jsx)(n.p,{children:"In the course of IT Support work, we definitely need many tools to help us better complete our tasks, as every IT has many common needs. For example:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Handling work orders"}),"\n",(0,t.jsx)(n.li,{children:"Project management"}),"\n",(0,t.jsx)(n.li,{children:"Code management"}),"\n",(0,t.jsx)(n.li,{children:"Document management"}),"\n",(0,t.jsx)(n.li,{children:"Notifications"}),"\n",(0,t.jsx)(n.li,{children:"Meetings"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Here are some recommended tools to help everyone better complete their work."}),"\n",(0,t.jsx)(n.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,t.jsx)(n.p,{children:"If you're considering building a business-logic oriented tool and only require a beautiful UI without pursuing complex animations and flashy pages, ILLA Cloud is recommended for development and construction."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n",(0,t.jsx)(n.li,{children:"CRM"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/best-citizen-developer-tool/illa.png",alt:"illa"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud lets you quickly build tools through drag-and-drop without needing to write code, boosting your work efficiency by 10 times. It also natively supports team collaboration, allowing you and your colleagues to edit and build together."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also features connector capabilities, enabling quick connections to other SaaS tools you use. It supports scheduled tasks, Webhooks, parameter passing, and more."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also includes an AI Agent feature, helping you quickly build AI-driven tools, such as text analysis, voice analysis, image analysis, and more."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/agent.png",alt:"agent"})}),"\n",(0,t.jsx)(n.h2,{id:"linear",children:"Linear"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/linear.png",alt:"linear"})}),"\n",(0,t.jsx)(n.p,{children:"Linear is a project management tool that helps streamline software projects, sprints, tasks, and bug tracking. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Project Management"}),": Linear's focus on streamlining software projects suggests a user-friendly interface that simplifies complex project management tasks, making it easier for teams to follow through on project goals and deadlines."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Efficient Sprint and Task Management"}),": With features tailored for managing sprints and tasks, Linear likely offers effective tools for Agile methodologies, facilitating better planning, tracking, and execution of software development cycles."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Effective Bug Tracking"}),": The emphasis on bug tracking indicates that Linear provides robust tools for identifying, documenting, and resolving software bugs, which is crucial for maintaining software quality and reliability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Speed and Simplicity"}),": Being described as simple and fast, Linear might offer quick setup and ease of use, which can be particularly beneficial for teams looking to implement a tool without a steep learning curve."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Suitability for High-Performance Teams"}),": Built for high-performance teams, Linear is likely optimized for efficiency and scalability, supporting teams in managing complex projects without performance degradation."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential Over-Simplification"}),": While simplicity is an advantage, it might also mean that Linear lacks certain advanced features required by very large or complex projects, possibly limiting its utility for some specialized applications."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Focus on Software Projects"}),": Linear\u2019s specific focus on software projects suggests it may not be as well-suited for other types of project management, limiting its versatility for non-software teams."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve for New Users"}),": Despite its simplicity, new users, especially those not familiar with Agile methodologies, might still face a learning curve in understanding how to best utilize the tool for their specific needs."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Customization"}),": Fast and simple tools sometimes offer limited customization options, which might not meet the needs of teams that require highly tailored project management solutions."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Dependence on Team Discipline"}),": The effectiveness of any project management tool, including Linear, often depends on the team's discipline in using it consistently and correctly, which can be a challenge in some organizational cultures."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"gitlab",children:"Gitlab"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/gitlab.png",alt:"gitlab"})}),"\n",(0,t.jsx)(n.p,{children:"GitLab is a complete DevOps platform, delivered as a single application. It enables Concurrent DevOps to make the software lifecycle 200% faster, radically improving the speed of business."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integrated DevOps Workflow"}),": As a single application offering a complete DevOps solution, GitLab provides an integrated environment for all stages of software development, from planning to monitoring, which can greatly simplify the workflow."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Increased Efficiency"}),": GitLab's emphasis on Concurrent DevOps suggests it supports simultaneous actions in the development cycle, which can lead to a 200% faster software lifecycle, thereby accelerating the pace of business."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"All-in-One Platform"}),": The platform's all-in-one nature means that teams can avoid the hassle of integrating multiple separate tools, which can reduce complexity and potential compatibility issues."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Collaboration"}),": GitLab likely facilitates better collaboration among team members by providing a unified platform for code repository, issue tracking, CI/CD, and more, which can enhance teamwork and productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Visibility and Transparency"}),": Having all aspects of the DevOps cycle in one place can provide better visibility and transparency across the development process, enabling more informed decision-making."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve"}),": The comprehensive nature of GitLab may present a steep learning curve, especially for teams not accustomed to such an all-encompassing platform or those transitioning from simpler tools."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Resource Intensiveness"}),": Given its wide range of functionalities, GitLab could be resource-intensive, requiring significant server resources, which might be a challenge for smaller organizations or teams with limited IT infrastructure."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Overwhelming for Small Projects"}),": For smaller projects or teams, the extensive features of GitLab might be more than what is necessary, potentially leading to underutilization of the platform."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential for Vendor Lock-in"}),": Relying on a single platform for all DevOps needs may lead to vendor lock-in, where teams become dependent on GitLab and might face challenges if they decide to switch to another tool in the future."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Considerations"}),": While GitLab offers a variety of plans, including a free tier, the more advanced features, essential for larger teams and complex projects, are often part of their paid plans, which could be a significant expense for some organizations."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"notion",children:"Notion"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/notion.png",alt:"notion"})}),"\n",(0,t.jsx)(n.p,{children:"Notion is an all-in-one workspace for your notes, tasks, wikis, and databases. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Versatility"}),": As an all-in-one workspace, Notion offers a versatile platform where you can manage a variety of content types like notes, tasks, wikis, and databases. This versatility can streamline different aspects of work within a single application."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Ease of Use"}),": Described as simple and fast, Notion likely has a user-friendly interface, allowing for quick adoption and ease of use. This can reduce the learning curve and increase productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Customizability"}),": Notion's platform generally allows for a high degree of customization, enabling users to tailor it to their specific workflow needs, whether for individual use or team collaboration."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Collaboration Features"}),": Being built for high-performance teams, Notion is expected to have robust collaboration features, facilitating effective teamwork, information sharing, and project management."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integration Capabilities"}),": Notion often integrates well with other tools, which is beneficial for teams that use a variety of applications and services for their work."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potentially Overwhelming for New Users"}),": The vast array of features and customization options in Notion can be overwhelming for new users, particularly those who are looking for a more straightforward, plug-and-play type solution."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Offline Capabilities"}),": Notion's functionality can be limited when offline, which could be a drawback for users who need to access their workspace in areas with poor or no internet connectivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Performance Issues with Large Databases"}),": As databases grow in size, some users have reported performance issues with Notion, such as slower loading times and lag, which can hinder efficiency."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Export Options"}),": While Notion is great for accumulating and organizing information, exporting this data out of Notion can sometimes be a challenge, potentially causing issues with data portability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Factor for Premium Features"}),": While Notion offers a free tier, more advanced features and larger usage limits are gated behind their paid plans, which could be a consideration for budget-conscious individuals or small teams."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/connector.png",alt:"connector"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow is a low-code workflow tool that helps you automate your business processes. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,t.jsx)(n.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,t.jsx)(n.li,{children:"Book a meeting room every day"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,t.jsx)(n.li,{children:"Build a CI/CD report system"}),"\n",(0,t.jsx)(n.li,{children:"Send email when some warning occurs"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"For IT Support, simple and easy-to-use tools are key to enhancing work efficiency. Choosing the right tools for your needs is crucial. Hopefully, everyone can find useful tools and become an outstanding IT Support."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const s={},o=t.createContext(s);function a(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[1316],{495:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(1527),o=i(7214);const s={slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},a=void 0,r={permalink:"/illa-website/blog/it-support",source:"@site/blog/it-support/it-support.md",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",date:"2024-01-23T20:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:8.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},unlisted:!1,prevItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},nextItem:{title:"The Best Tools for Citizen Developers in 2024",permalink:"/illa-website/blog/best-citizen-developer-tool"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"}]},l={authorsImageUrls:[void 0]},c=[{value:"Job Content of IT Support",id:"job-content-of-it-support",level:2},{value:"Recommended Tools",id:"recommended-tools",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Linear",id:"linear",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Gitlab",id:"gitlab",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Notion",id:"notion",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"IT Support is divided into Technical Support and Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support requires technicians with a broad knowledge structure. Companies of a certain size all have an IT department, commonly referred to as network management, but not all companies have Program Support."}),"\n",(0,t.jsx)(n.h2,{id:"job-content-of-it-support",children:"Job Content of IT Support"}),"\n",(0,t.jsx)(n.p,{children:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database, machinery hardware equipment, etc. If the company needs any special software or to update a new system, it is usually done by forming a team with programmers from a technology company and the company's own Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support is more like a consultant, guiding the more macroscopic direction, so they generally know a lot."}),"\n",(0,t.jsx)(n.p,{children:"Program Support specializes more in coding."}),"\n",(0,t.jsx)(n.h2,{id:"recommended-tools",children:"Recommended Tools"}),"\n",(0,t.jsx)(n.p,{children:"In the course of IT Support work, we definitely need many tools to help us better complete our tasks, as every IT has many common needs. For example:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Handling work orders"}),"\n",(0,t.jsx)(n.li,{children:"Project management"}),"\n",(0,t.jsx)(n.li,{children:"Code management"}),"\n",(0,t.jsx)(n.li,{children:"Document management"}),"\n",(0,t.jsx)(n.li,{children:"Notifications"}),"\n",(0,t.jsx)(n.li,{children:"Meetings"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Here are some recommended tools to help everyone better complete their work."}),"\n",(0,t.jsx)(n.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,t.jsx)(n.p,{children:"If you're considering building a business-logic oriented tool and only require a beautiful UI without pursuing complex animations and flashy pages, ILLA Cloud is recommended for development and construction."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n",(0,t.jsx)(n.li,{children:"CRM"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/best-citizen-developer-tool/illa.png",alt:"illa"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud lets you quickly build tools through drag-and-drop without needing to write code, boosting your work efficiency by 10 times. It also natively supports team collaboration, allowing you and your colleagues to edit and build together."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also features connector capabilities, enabling quick connections to other SaaS tools you use. It supports scheduled tasks, Webhooks, parameter passing, and more."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also includes an AI Agent feature, helping you quickly build AI-driven tools, such as text analysis, voice analysis, image analysis, and more."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/agent.png",alt:"agent"})}),"\n",(0,t.jsx)(n.h2,{id:"linear",children:"Linear"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/linear.png",alt:"linear"})}),"\n",(0,t.jsx)(n.p,{children:"Linear is a project management tool that helps streamline software projects, sprints, tasks, and bug tracking. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Project Management"}),": Linear's focus on streamlining software projects suggests a user-friendly interface that simplifies complex project management tasks, making it easier for teams to follow through on project goals and deadlines."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Efficient Sprint and Task Management"}),": With features tailored for managing sprints and tasks, Linear likely offers effective tools for Agile methodologies, facilitating better planning, tracking, and execution of software development cycles."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Effective Bug Tracking"}),": The emphasis on bug tracking indicates that Linear provides robust tools for identifying, documenting, and resolving software bugs, which is crucial for maintaining software quality and reliability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Speed and Simplicity"}),": Being described as simple and fast, Linear might offer quick setup and ease of use, which can be particularly beneficial for teams looking to implement a tool without a steep learning curve."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Suitability for High-Performance Teams"}),": Built for high-performance teams, Linear is likely optimized for efficiency and scalability, supporting teams in managing complex projects without performance degradation."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential Over-Simplification"}),": While simplicity is an advantage, it might also mean that Linear lacks certain advanced features required by very large or complex projects, possibly limiting its utility for some specialized applications."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Focus on Software Projects"}),": Linear\u2019s specific focus on software projects suggests it may not be as well-suited for other types of project management, limiting its versatility for non-software teams."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve for New Users"}),": Despite its simplicity, new users, especially those not familiar with Agile methodologies, might still face a learning curve in understanding how to best utilize the tool for their specific needs."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Customization"}),": Fast and simple tools sometimes offer limited customization options, which might not meet the needs of teams that require highly tailored project management solutions."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Dependence on Team Discipline"}),": The effectiveness of any project management tool, including Linear, often depends on the team's discipline in using it consistently and correctly, which can be a challenge in some organizational cultures."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"gitlab",children:"Gitlab"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/gitlab.png",alt:"gitlab"})}),"\n",(0,t.jsx)(n.p,{children:"GitLab is a complete DevOps platform, delivered as a single application. It enables Concurrent DevOps to make the software lifecycle 200% faster, radically improving the speed of business."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integrated DevOps Workflow"}),": As a single application offering a complete DevOps solution, GitLab provides an integrated environment for all stages of software development, from planning to monitoring, which can greatly simplify the workflow."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Increased Efficiency"}),": GitLab's emphasis on Concurrent DevOps suggests it supports simultaneous actions in the development cycle, which can lead to a 200% faster software lifecycle, thereby accelerating the pace of business."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"All-in-One Platform"}),": The platform's all-in-one nature means that teams can avoid the hassle of integrating multiple separate tools, which can reduce complexity and potential compatibility issues."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Collaboration"}),": GitLab likely facilitates better collaboration among team members by providing a unified platform for code repository, issue tracking, CI/CD, and more, which can enhance teamwork and productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Visibility and Transparency"}),": Having all aspects of the DevOps cycle in one place can provide better visibility and transparency across the development process, enabling more informed decision-making."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve"}),": The comprehensive nature of GitLab may present a steep learning curve, especially for teams not accustomed to such an all-encompassing platform or those transitioning from simpler tools."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Resource Intensiveness"}),": Given its wide range of functionalities, GitLab could be resource-intensive, requiring significant server resources, which might be a challenge for smaller organizations or teams with limited IT infrastructure."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Overwhelming for Small Projects"}),": For smaller projects or teams, the extensive features of GitLab might be more than what is necessary, potentially leading to underutilization of the platform."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential for Vendor Lock-in"}),": Relying on a single platform for all DevOps needs may lead to vendor lock-in, where teams become dependent on GitLab and might face challenges if they decide to switch to another tool in the future."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Considerations"}),": While GitLab offers a variety of plans, including a free tier, the more advanced features, essential for larger teams and complex projects, are often part of their paid plans, which could be a significant expense for some organizations."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"notion",children:"Notion"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/notion.png",alt:"notion"})}),"\n",(0,t.jsx)(n.p,{children:"Notion is an all-in-one workspace for your notes, tasks, wikis, and databases. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Versatility"}),": As an all-in-one workspace, Notion offers a versatile platform where you can manage a variety of content types like notes, tasks, wikis, and databases. This versatility can streamline different aspects of work within a single application."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Ease of Use"}),": Described as simple and fast, Notion likely has a user-friendly interface, allowing for quick adoption and ease of use. This can reduce the learning curve and increase productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Customizability"}),": Notion's platform generally allows for a high degree of customization, enabling users to tailor it to their specific workflow needs, whether for individual use or team collaboration."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Collaboration Features"}),": Being built for high-performance teams, Notion is expected to have robust collaboration features, facilitating effective teamwork, information sharing, and project management."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integration Capabilities"}),": Notion often integrates well with other tools, which is beneficial for teams that use a variety of applications and services for their work."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potentially Overwhelming for New Users"}),": The vast array of features and customization options in Notion can be overwhelming for new users, particularly those who are looking for a more straightforward, plug-and-play type solution."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Offline Capabilities"}),": Notion's functionality can be limited when offline, which could be a drawback for users who need to access their workspace in areas with poor or no internet connectivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Performance Issues with Large Databases"}),": As databases grow in size, some users have reported performance issues with Notion, such as slower loading times and lag, which can hinder efficiency."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Export Options"}),": While Notion is great for accumulating and organizing information, exporting this data out of Notion can sometimes be a challenge, potentially causing issues with data portability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Factor for Premium Features"}),": While Notion offers a free tier, more advanced features and larger usage limits are gated behind their paid plans, which could be a consideration for budget-conscious individuals or small teams."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/connector.png",alt:"connector"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow is a low-code workflow tool that helps you automate your business processes. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,t.jsx)(n.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,t.jsx)(n.li,{children:"Book a meeting room every day"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,t.jsx)(n.li,{children:"Build a CI/CD report system"}),"\n",(0,t.jsx)(n.li,{children:"Send email when some warning occurs"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"For IT Support, simple and easy-to-use tools are key to enhancing work efficiency. Choosing the right tools for your needs is crucial. Hopefully, everyone can find useful tools and become an outstanding IT Support."})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/c1d2b2d8.7960453d.js b/assets/js/c1d2b2d8.7960453d.js
deleted file mode 100644
index 4dc45ebac4..0000000000
--- a/assets/js/c1d2b2d8.7960453d.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[1316],{495:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=i(1527),s=i(7214);const o={slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},a=void 0,r={permalink:"/illa-website/blog/it-support",source:"@site/blog/it-support/it-support.md",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",date:"2024-01-23T20:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:8.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"it-support",title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/it-support/cover.webp",tags:["workflow"],date:"2024-01-23T20:00"},unlisted:!1,prevItem:{title:"Most Practical TypeScript Features",permalink:"/illa-website/blog/typescript-most-practical-features-compilation"},nextItem:{title:"The Best Tools for Citizen Developers in 2024",permalink:"/illa-website/blog/best-citizen-developer-tool"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}],authorPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}]},l={authorsImageUrls:[void 0]},c=[{value:"Job Content of IT Support",id:"job-content-of-it-support",level:2},{value:"Recommended Tools",id:"recommended-tools",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Linear",id:"linear",level:2},{value:"Advantages",id:"advantages",level:3},{value:"Disadvantages",id:"disadvantages",level:3},{value:"Gitlab",id:"gitlab",level:2},{value:"Advantages",id:"advantages-1",level:3},{value:"Disadvantages",id:"disadvantages-1",level:3},{value:"Notion",id:"notion",level:2},{value:"Advantages",id:"advantages-2",level:3},{value:"Disadvantages",id:"disadvantages-2",level:3},{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const n={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"IT Support is divided into Technical Support and Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support requires technicians with a broad knowledge structure. Companies of a certain size all have an IT department, commonly referred to as network management, but not all companies have Program Support."}),"\n",(0,t.jsx)(n.h2,{id:"job-content-of-it-support",children:"Job Content of IT Support"}),"\n",(0,t.jsx)(n.p,{children:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database, machinery hardware equipment, etc. If the company needs any special software or to update a new system, it is usually done by forming a team with programmers from a technology company and the company's own Program Support."}),"\n",(0,t.jsx)(n.p,{children:"Technical Support is more like a consultant, guiding the more macroscopic direction, so they generally know a lot."}),"\n",(0,t.jsx)(n.p,{children:"Program Support specializes more in coding."}),"\n",(0,t.jsx)(n.h2,{id:"recommended-tools",children:"Recommended Tools"}),"\n",(0,t.jsx)(n.p,{children:"In the course of IT Support work, we definitely need many tools to help us better complete our tasks, as every IT has many common needs. For example:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Handling work orders"}),"\n",(0,t.jsx)(n.li,{children:"Project management"}),"\n",(0,t.jsx)(n.li,{children:"Code management"}),"\n",(0,t.jsx)(n.li,{children:"Document management"}),"\n",(0,t.jsx)(n.li,{children:"Notifications"}),"\n",(0,t.jsx)(n.li,{children:"Meetings"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Here are some recommended tools to help everyone better complete their work."}),"\n",(0,t.jsx)(n.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,t.jsx)(n.p,{children:"If you're considering building a business-logic oriented tool and only require a beautiful UI without pursuing complex animations and flashy pages, ILLA Cloud is recommended for development and construction."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Web & App Admin Panel"}),"\n",(0,t.jsx)(n.li,{children:"Data Dashboard"}),"\n",(0,t.jsx)(n.li,{children:"Customized B2B Tools"}),"\n",(0,t.jsx)(n.li,{children:"CRM"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/best-citizen-developer-tool/illa.png",alt:"illa"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud lets you quickly build tools through drag-and-drop without needing to write code, boosting your work efficiency by 10 times. It also natively supports team collaboration, allowing you and your colleagues to edit and build together."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also features connector capabilities, enabling quick connections to other SaaS tools you use. It supports scheduled tasks, Webhooks, parameter passing, and more."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Cloud also includes an AI Agent feature, helping you quickly build AI-driven tools, such as text analysis, voice analysis, image analysis, and more."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/agent.png",alt:"agent"})}),"\n",(0,t.jsx)(n.h2,{id:"linear",children:"Linear"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/linear.png",alt:"linear"})}),"\n",(0,t.jsx)(n.p,{children:"Linear is a project management tool that helps streamline software projects, sprints, tasks, and bug tracking. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Project Management"}),": Linear's focus on streamlining software projects suggests a user-friendly interface that simplifies complex project management tasks, making it easier for teams to follow through on project goals and deadlines."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Efficient Sprint and Task Management"}),": With features tailored for managing sprints and tasks, Linear likely offers effective tools for Agile methodologies, facilitating better planning, tracking, and execution of software development cycles."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Effective Bug Tracking"}),": The emphasis on bug tracking indicates that Linear provides robust tools for identifying, documenting, and resolving software bugs, which is crucial for maintaining software quality and reliability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Speed and Simplicity"}),": Being described as simple and fast, Linear might offer quick setup and ease of use, which can be particularly beneficial for teams looking to implement a tool without a steep learning curve."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Suitability for High-Performance Teams"}),": Built for high-performance teams, Linear is likely optimized for efficiency and scalability, supporting teams in managing complex projects without performance degradation."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential Over-Simplification"}),": While simplicity is an advantage, it might also mean that Linear lacks certain advanced features required by very large or complex projects, possibly limiting its utility for some specialized applications."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Focus on Software Projects"}),": Linear\u2019s specific focus on software projects suggests it may not be as well-suited for other types of project management, limiting its versatility for non-software teams."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve for New Users"}),": Despite its simplicity, new users, especially those not familiar with Agile methodologies, might still face a learning curve in understanding how to best utilize the tool for their specific needs."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Customization"}),": Fast and simple tools sometimes offer limited customization options, which might not meet the needs of teams that require highly tailored project management solutions."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Dependence on Team Discipline"}),": The effectiveness of any project management tool, including Linear, often depends on the team's discipline in using it consistently and correctly, which can be a challenge in some organizational cultures."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"gitlab",children:"Gitlab"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/gitlab.png",alt:"gitlab"})}),"\n",(0,t.jsx)(n.p,{children:"GitLab is a complete DevOps platform, delivered as a single application. It enables Concurrent DevOps to make the software lifecycle 200% faster, radically improving the speed of business."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-1",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integrated DevOps Workflow"}),": As a single application offering a complete DevOps solution, GitLab provides an integrated environment for all stages of software development, from planning to monitoring, which can greatly simplify the workflow."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Increased Efficiency"}),": GitLab's emphasis on Concurrent DevOps suggests it supports simultaneous actions in the development cycle, which can lead to a 200% faster software lifecycle, thereby accelerating the pace of business."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"All-in-One Platform"}),": The platform's all-in-one nature means that teams can avoid the hassle of integrating multiple separate tools, which can reduce complexity and potential compatibility issues."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Streamlined Collaboration"}),": GitLab likely facilitates better collaboration among team members by providing a unified platform for code repository, issue tracking, CI/CD, and more, which can enhance teamwork and productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Visibility and Transparency"}),": Having all aspects of the DevOps cycle in one place can provide better visibility and transparency across the development process, enabling more informed decision-making."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-1",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Learning Curve"}),": The comprehensive nature of GitLab may present a steep learning curve, especially for teams not accustomed to such an all-encompassing platform or those transitioning from simpler tools."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Resource Intensiveness"}),": Given its wide range of functionalities, GitLab could be resource-intensive, requiring significant server resources, which might be a challenge for smaller organizations or teams with limited IT infrastructure."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Overwhelming for Small Projects"}),": For smaller projects or teams, the extensive features of GitLab might be more than what is necessary, potentially leading to underutilization of the platform."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potential for Vendor Lock-in"}),": Relying on a single platform for all DevOps needs may lead to vendor lock-in, where teams become dependent on GitLab and might face challenges if they decide to switch to another tool in the future."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Considerations"}),": While GitLab offers a variety of plans, including a free tier, the more advanced features, essential for larger teams and complex projects, are often part of their paid plans, which could be a significant expense for some organizations."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"notion",children:"Notion"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/notion.png",alt:"notion"})}),"\n",(0,t.jsx)(n.p,{children:"Notion is an all-in-one workspace for your notes, tasks, wikis, and databases. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.h3,{id:"advantages-2",children:"Advantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Versatility"}),": As an all-in-one workspace, Notion offers a versatile platform where you can manage a variety of content types like notes, tasks, wikis, and databases. This versatility can streamline different aspects of work within a single application."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Ease of Use"}),": Described as simple and fast, Notion likely has a user-friendly interface, allowing for quick adoption and ease of use. This can reduce the learning curve and increase productivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Customizability"}),": Notion's platform generally allows for a high degree of customization, enabling users to tailor it to their specific workflow needs, whether for individual use or team collaboration."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Collaboration Features"}),": Being built for high-performance teams, Notion is expected to have robust collaboration features, facilitating effective teamwork, information sharing, and project management."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Integration Capabilities"}),": Notion often integrates well with other tools, which is beneficial for teams that use a variety of applications and services for their work."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"disadvantages-2",children:"Disadvantages"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Potentially Overwhelming for New Users"}),": The vast array of features and customization options in Notion can be overwhelming for new users, particularly those who are looking for a more straightforward, plug-and-play type solution."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Offline Capabilities"}),": Notion's functionality can be limited when offline, which could be a drawback for users who need to access their workspace in areas with poor or no internet connectivity."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Performance Issues with Large Databases"}),": As databases grow in size, some users have reported performance issues with Notion, such as slower loading times and lag, which can hinder efficiency."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Limited Export Options"}),": While Notion is great for accumulating and organizing information, exporting this data out of Notion can sometimes be a challenge, potentially causing issues with data portability."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Cost Factor for Premium Features"}),": While Notion offers a free tier, more advanced features and larger usage limits are gated behind their paid plans, which could be a consideration for budget-conscious individuals or small teams."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://cdn.illacloud.com/illa-website/blog/it-support/connector.png",alt:"connector"})}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow is a low-code workflow tool that helps you automate your business processes. It is a simple, fast, and powerful tool built for high-performance teams."}),"\n",(0,t.jsx)(n.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,t.jsx)(n.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,t.jsx)(n.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,t.jsx)(n.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,t.jsx)(n.li,{children:"Book a meeting room every day"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,t.jsx)(n.li,{children:"Build a CI/CD report system"}),"\n",(0,t.jsx)(n.li,{children:"Send email when some warning occurs"}),"\n",(0,t.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(n.p,{children:"For IT Support, simple and easy-to-use tools are key to enhancing work efficiency. Choosing the right tools for your needs is crucial. Hopefully, everyone can find useful tools and become an outstanding IT Support."})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>a});var t=i(959);const s={},o=t.createContext(s);function a(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/cd038061.2d8dfe9b.js b/assets/js/cd038061.3f48fe39.js
similarity index 87%
rename from assets/js/cd038061.2d8dfe9b.js
rename to assets/js/cd038061.3f48fe39.js
index f3c9c5c81a..e968a1da51 100644
--- a/assets/js/cd038061.2d8dfe9b.js
+++ b/assets/js/cd038061.3f48fe39.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9993],{4122:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>n,metadata:()=>s,toc:()=>c});var o=i(1527),l=i(7214);const n={slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},a=void 0,s={permalink:"/illa-website/blog/build-ai-tools",source:"@site/blog/build-ai-tools/build-ai-tools.md",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",date:"2024-01-19T10:00:00.000Z",formattedDate:"January 19, 2024",tags:[{label:"ai",permalink:"/illa-website/blog/tags/ai"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:2.2,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},unlisted:!1,prevItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},nextItem:{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",permalink:"/illa-website/blog/automate-send-to-slack"},relatedPosts:[{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Building Smart Applications",id:"building-smart-applications",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields. However, for most people, AI remains a high-barrier technology, requiring a significant amount of time and effort to learn before it can be applied effectively in practical work."}),"\n",(0,o.jsx)(t.p,{children:"Each of us has our own unique needs, such as building text-to-image tools or writing tools specific to our work chains. There are numerous interesting models on HuggingFace, allowing us to quickly create our own AI tools based on these models, thereby making our work more intelligent!"}),"\n",(0,o.jsx)(t.p,{children:"Here is a recommended tool that allows users to build AI tools like assembling blocks:"}),"\n",(0,o.jsx)(t.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsxs)(t.p,{children:["The official website is: ",(0,o.jsx)(t.a,{href:"https://illacloud.com",children:"https://illacloud.com"})]}),"\n",(0,o.jsxs)(t.p,{children:["Github: ",(0,o.jsx)(t.a,{href:"https://github.com/illacloud/illa-builder",children:"https://github.com/illacloud/illa-builder"})]}),"\n",(0,o.jsxs)(t.p,{children:["This open-source low-code tool's slogan is: ",(0,o.jsx)(t.strong,{children:"Build AI Driven Business Tools"}),". It focuses on helping users quickly build AI-driven tools. Users can construct pages through drag-and-drop. Then, by using three major functions, they can connect to AI:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"ILLA AI Agent"}),"\n",(0,o.jsx)(t.li,{children:"Models from HuggingFace"}),"\n",(0,o.jsx)(t.li,{children:"RestAPI to call OpenAI's interface"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"This allows for the quick creation of personalized AI tools."}),"\n",(0,o.jsx)(t.h2,{id:"building-smart-applications",children:"Building Smart Applications"}),"\n",(0,o.jsx)(t.p,{children:"Here we use OpenAI's text-to-image interface to build our own text-to-image panel, using tools built with ILLA Cloud, which offers certain advantages:"}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/image-generator",children:"https://illacloud.com/image-generator"})]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"The generated images can be sent to any system or SaaS using the ILLA Flow feature."}),"\n",(0,o.jsx)(t.li,{children:"The models used later can be called via RestAPI or through HuggingFace's models."}),"\n",(0,o.jsx)(t.li,{children:"Built-in prompts can be added to ensure that the generated content is sufficiently customized."}),"\n",(0,o.jsx)(t.li,{children:"The ILLA AI Agent feature can enrich the content's prompts, as not everyone is familiar with writing prompts."}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/image_generate_content.webp",alt:"image_generate_content"})}),"\n",(0,o.jsx)(t.p,{children:"I used several components here, quickly creating my own web panel through drag-and-drop, and then connected the logic through JavaScript, making it available for use by my team."}),"\n",(0,o.jsx)(t.p,{children:"I built two examples; another is an AI voice processing panel."}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/ai-voice-generator",children:"https://illacloud.com/ai-voice-generator"})]}),"\n",(0,o.jsx)(t.p,{children:"This panel has the following functions:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Meeting minutes transcription"}),"\n",(0,o.jsx)(t.li,{children:"Generation of meeting minutes"}),"\n",(0,o.jsx)(t.li,{children:"Translation and dubbing of meeting minutes"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/mix_ai_voice.webp",alt:"mix_ai_voice"})}),"\n",(0,o.jsx)(t.p,{children:"It primarily uses OpenAI's Whisper capability. There are thousands of AI capabilities, but the most important is to find what suits you. Using ILLA Cloud, you can quickly build AI applications like building blocks. Start using it now!"}),"\n",(0,o.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(t.p,{children:"From the above introduction, we can see that using ILLA Cloud, you can quickly build your own AI tools, and ILLA Cloud has a rich array of components, basically meeting a large number of everyday business needs."}),"\n",(0,o.jsx)(t.p,{children:"ILLA's self-developed component library has made the above functions flexible enough. Come and use ILLA Cloud to build your own AI tools!"})]})}function u(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,t,i)=>{i.d(t,{Z:()=>s,a:()=>a});var o=i(959);const l={},n=o.createContext(l);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9993],{4122:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>n,metadata:()=>s,toc:()=>c});var o=i(1527),l=i(7214);const n={slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},a=void 0,s={permalink:"/illa-website/blog/build-ai-tools",source:"@site/blog/build-ai-tools/build-ai-tools.md",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",date:"2024-01-19T10:00:00.000Z",formattedDate:"January 19, 2024",tags:[{label:"ai",permalink:"/illa-website/blog/tags/ai"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:2.2,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},unlisted:!1,prevItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},nextItem:{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",permalink:"/illa-website/blog/automate-send-to-slack"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Building Smart Applications",id:"building-smart-applications",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields. However, for most people, AI remains a high-barrier technology, requiring a significant amount of time and effort to learn before it can be applied effectively in practical work."}),"\n",(0,o.jsx)(t.p,{children:"Each of us has our own unique needs, such as building text-to-image tools or writing tools specific to our work chains. There are numerous interesting models on HuggingFace, allowing us to quickly create our own AI tools based on these models, thereby making our work more intelligent!"}),"\n",(0,o.jsx)(t.p,{children:"Here is a recommended tool that allows users to build AI tools like assembling blocks:"}),"\n",(0,o.jsx)(t.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsxs)(t.p,{children:["The official website is: ",(0,o.jsx)(t.a,{href:"https://illacloud.com",children:"https://illacloud.com"})]}),"\n",(0,o.jsxs)(t.p,{children:["Github: ",(0,o.jsx)(t.a,{href:"https://github.com/illacloud/illa-builder",children:"https://github.com/illacloud/illa-builder"})]}),"\n",(0,o.jsxs)(t.p,{children:["This open-source low-code tool's slogan is: ",(0,o.jsx)(t.strong,{children:"Build AI Driven Business Tools"}),". It focuses on helping users quickly build AI-driven tools. Users can construct pages through drag-and-drop. Then, by using three major functions, they can connect to AI:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"ILLA AI Agent"}),"\n",(0,o.jsx)(t.li,{children:"Models from HuggingFace"}),"\n",(0,o.jsx)(t.li,{children:"RestAPI to call OpenAI's interface"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"This allows for the quick creation of personalized AI tools."}),"\n",(0,o.jsx)(t.h2,{id:"building-smart-applications",children:"Building Smart Applications"}),"\n",(0,o.jsx)(t.p,{children:"Here we use OpenAI's text-to-image interface to build our own text-to-image panel, using tools built with ILLA Cloud, which offers certain advantages:"}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/image-generator",children:"https://illacloud.com/image-generator"})]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"The generated images can be sent to any system or SaaS using the ILLA Flow feature."}),"\n",(0,o.jsx)(t.li,{children:"The models used later can be called via RestAPI or through HuggingFace's models."}),"\n",(0,o.jsx)(t.li,{children:"Built-in prompts can be added to ensure that the generated content is sufficiently customized."}),"\n",(0,o.jsx)(t.li,{children:"The ILLA AI Agent feature can enrich the content's prompts, as not everyone is familiar with writing prompts."}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/image_generate_content.webp",alt:"image_generate_content"})}),"\n",(0,o.jsx)(t.p,{children:"I used several components here, quickly creating my own web panel through drag-and-drop, and then connected the logic through JavaScript, making it available for use by my team."}),"\n",(0,o.jsx)(t.p,{children:"I built two examples; another is an AI voice processing panel."}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/ai-voice-generator",children:"https://illacloud.com/ai-voice-generator"})]}),"\n",(0,o.jsx)(t.p,{children:"This panel has the following functions:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Meeting minutes transcription"}),"\n",(0,o.jsx)(t.li,{children:"Generation of meeting minutes"}),"\n",(0,o.jsx)(t.li,{children:"Translation and dubbing of meeting minutes"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/mix_ai_voice.webp",alt:"mix_ai_voice"})}),"\n",(0,o.jsx)(t.p,{children:"It primarily uses OpenAI's Whisper capability. There are thousands of AI capabilities, but the most important is to find what suits you. Using ILLA Cloud, you can quickly build AI applications like building blocks. Start using it now!"}),"\n",(0,o.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(t.p,{children:"From the above introduction, we can see that using ILLA Cloud, you can quickly build your own AI tools, and ILLA Cloud has a rich array of components, basically meeting a large number of everyday business needs."}),"\n",(0,o.jsx)(t.p,{children:"ILLA's self-developed component library has made the above functions flexible enough. Come and use ILLA Cloud to build your own AI tools!"})]})}function u(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,t,i)=>{i.d(t,{Z:()=>s,a:()=>a});var o=i(959);const l={},n=o.createContext(l);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/ceb37023.f674869d.js b/assets/js/ceb37023.ff6bb0fb.js
similarity index 95%
rename from assets/js/ceb37023.f674869d.js
rename to assets/js/ceb37023.ff6bb0fb.js
index 2e89561169..4c0075c76f 100644
--- a/assets/js/ceb37023.f674869d.js
+++ b/assets/js/ceb37023.ff6bb0fb.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[4425],{8704:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var o=t(1527),i=t(7214);const s={title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},n=void 0,l={permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",source:"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md",title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",date:"2024-01-08T10:00:00.000Z",formattedDate:"January 8, 2024",tags:[{label:"crud",permalink:"/illa-website/blog/tags/crud"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:10.165,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},unlisted:!1,prevItem:{title:"Top 7 Database GUIs for SQL databases",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases"},nextItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"Database",id:"database",level:2},{value:"User Interface",id:"user-interface",level:2},{value:"API",id:"api",level:2},{value:"Tools For Building Crud Applications",id:"tools-for-building-crud-applications",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Features:",id:"features",level:3},{value:"Drawbacks:",id:"drawbacks",level:3},{value:"AppSmith",id:"appsmith",level:2},{value:"Features:",id:"features-1",level:3},{value:"Drawbacks:",id:"drawbacks-1",level:3},{value:"Knack",id:"knack",level:2},{value:"Features:",id:"features-2",level:3},{value:"Drawbacks:",id:"drawbacks-2",level:3},{value:"Budibase",id:"budibase",level:2},{value:"Features:",id:"features-3",level:3},{value:"Drawbacks:",id:"drawbacks-3",level:3},{value:"Bubble",id:"bubble",level:2},{value:"Features:",id:"features-4",level:3},{value:"Drawbacks:",id:"drawbacks-4",level:3},{value:"UI Bakery",id:"ui-bakery",level:2},{value:"Features:",id:"features-5",level:3},{value:"Drawbacks:",id:"drawbacks-5",level:3},{value:"Retool",id:"retool",level:2},{value:"Features:",id:"features-6",level:3},{value:"Drawbacks:",id:"drawbacks-6",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps. CRUD stands for Create, Read, Update, and Delete, which are the four basic operations that models should be able to do on data. CRUD applications are very common in web development, as they allow users to perform basic operations on data without writing complex code."}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications consist of three main components: a database, a user interface, and an API. The database is where the data is stored and retrieved. The user interface is the front end that users interact with. The API contains the code and methods that communicate with the database. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we will review some of the best tools for building CRUD applications, covering each component separately. We will also provide some examples and tips on how to use them effectively."}),"\n",(0,o.jsx)(a.h2,{id:"database",children:"Database"}),"\n",(0,o.jsx)(a.p,{children:"The database is the core of any CRUD application, as it stores the data that users can create, read, update, and delete. There are many types of databases available, but they can be broadly categorized into two groups: relational (SQL) and non-relational (NoSQL)."}),"\n",(0,o.jsx)(a.p,{children:"Relational databases use tables to store data; each table has a predefined schema and each row represents a record. Relational databases are good for structured and consistent data that requires complex queries and transactions. Some of the most popular relational databases are MySQL, PostgreSQL, Oracle, and SQL Server."}),"\n",(0,o.jsx)(a.p,{children:"Non-relational databases use collections to store data, where each collection can have a flexible schema and each document represents a record. Non-relational databases are good for unstructured and dynamic data that require high scalability and performance. Some of the most popular non-relational databases are MongoDB, CouchDB, Firebase, and DynamoDB."}),"\n",(0,o.jsx)(a.p,{children:"Choosing the right database for your CRUD application depends on several factors, such as the type and volume of data you need to store, the level of consistency and reliability you need to ensure, and the complexity and frequency of queries you need to perform. You should also consider the compatibility and integration of your database with your user interface and API tools."}),"\n",(0,o.jsx)(a.h2,{id:"user-interface",children:"User Interface"}),"\n",(0,o.jsx)(a.p,{children:"The user interface is the front end of your CRUD application, where users can see and manipulate the data stored in your database. The user interface can be built using various technologies and frameworks, depending on the type and complexity of your application."}),"\n",(0,o.jsx)(a.p,{children:"One of the most common ways to build a user interface for a CRUD application is by using HTML, CSS, and JavaScript. HTML defines the structure and content of your web page, CSS styles the appearance and layout of your web page, and JavaScript adds interactivity and functionality to your web page. You can use plain HTML, CSS, and JavaScript or use libraries and frameworks that simplify and enhance your development process."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular libraries and frameworks for building user interfaces are React, Angular, Vue.js, Bootstrap, Tailwind CSS, jQuery, etc. These tools provide various features and benefits for creating dynamic and responsive web pages that can communicate with your API and database."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build a user interface for a CRUD application is by using low-code or no-code platforms. These platforms allow you to create web pages using drag-and-drop components and visual editors without writing much or any code. Some of the most popular low-code or no-code platforms are Budibase, Appsmith, Bubble.io, Webflow, etc. These tools are great for beginners or non-developers who want to create simple and fast CRUD applications without learning complex technologies."}),"\n",(0,o.jsx)(a.h2,{id:"api",children:"API"}),"\n",(0,o.jsx)(a.p,{children:"The API is the bridge between your user interface and your database. It defines how your user interface can request data from your database or send data to your database using HTTP methods such as GET (read), POST (create), PUT (update), or DELETE (delete). The API also handles authentication, authorization, validation, error handling, etc."}),"\n",(0,o.jsx)(a.p,{children:"There are many ways to build an API for your CRUD application, but one of the most common ways is using REST (Representational State Transfer). REST is an architectural style that defines how resources (data) can be accessed and manipulated using standard HTTP methods and formats such as JSON or XML. REST APIs are easy to understand and use by both humans and machines."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building REST APIs are Node.js, Express.js, Flask, Django, Ruby on Rails, Laravel, etc. These tools are frameworks that provide various features and libraries for creating and managing web servers and APIs."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build an API for your CRUD application is using GraphQL. GraphQL is a query language and a runtime that allows you to define and execute queries and mutations (operations) on your data using a single endpoint. GraphQL APIs are more flexible and efficient than REST APIs, as they allow you to request or send only the data you need, avoiding over-fetching or under-fetching."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building GraphQL APIs are Apollo Server, Prisma, Hasura, Graphene, etc. These tools are libraries or platforms that help you create and manage GraphQL servers and schemas."}),"\n",(0,o.jsx)(a.h2,{id:"tools-for-building-crud-applications",children:"Tools For Building Crud Applications"}),"\n",(0,o.jsx)(a.p,{children:"You will find many software claiming to provide ease in building useful CRUD Applications, but you need to be careful to find the ones that help in making the most compatible CRUD Applications. Let us discuss the top 7 software that can help you. We short-listed these seven tools according to client\u2019s preferences and feasibility. We will mention their features and drawbacks so that you can choose wisely and according to your demands."}),"\n",(0,o.jsx)(a.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/illa.png",alt:"illa"})}),"\n",(0,o.jsx)(a.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. Its main aim is to help programmers develop modules to monitor data, which is one of the most tedious jobs for a developer. Another new feature in this open-source low-code app is that you can make your own customized block of code and then later put it up for sale in the marketplace."}),"\n",(0,o.jsx)(a.p,{children:"It gets connected to the mainstream database, or, alternatively, it can connect to any database through APIs. It can even add action to the chain of user events. Its backend and front-end data components are tightly integrated; hence developers can write data calls for massive information interaction."}),"\n",(0,o.jsx)(a.p,{children:"It is doubly useful for developers because it offers them the freedom to implement richer functionality. They can use {{template syntax}} for richer content."}),"\n",(0,o.jsx)(a.p,{children:"It allows real-time collaboration, making it easier for developers to interact at different ends of the world to work on it simultaneously. They can use ILLA Builder by sharing links, co-editing, and communicating for improved development efficiency."}),"\n",(0,o.jsx)(a.p,{children:"ILLA Builder has a comprehensive UI library. It has several useful components that developers can use to drop and drag to build attractive interfaces without wasting much time"}),"\n",(0,o.jsx)(a.h3,{id:"features",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It can easily be integrated with any database."}),"\n",(0,o.jsx)(a.li,{children:"You can download ILLA CLI for any of these operating systems: Windows, Linux, and MAC."}),"\n",(0,o.jsx)(a.li,{children:"It offers real-time collaboration which enables the developers to communicate for better development."}),"\n",(0,o.jsx)(a.li,{children:"It provides flexible deployment. You can use ILLA Cloud, ILLA CLI, Kubernetes, and Docker."}),"\n",(0,o.jsx)(a.li,{children:"You can easily integrate third-party APIs."}),"\n",(0,o.jsx)(a.li,{children:"It is free to share, use, copy, and update."}),"\n",(0,o.jsx)(a.li,{children:"It is constantly being polished with new updates and features."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"ILLA Cloud has basically been developed for the convenience of programmers."}),"\n",(0,o.jsx)(a.li,{children:"You need to be proficient in either of the four languages to fully utilize it. JavaScript, RUST, and Forlang are its major languages."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"appsmith",children:"AppSmith"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/appsmith.png",alt:"appsmith"})}),"\n",(0,o.jsx)(a.p,{children:"AppSmith was the first open-source low-code tool. It introduced the developers to a whole new world of click-and-drag programming. The standard plan consists of unlimited apps and widgets that are immensely useful for building live dashboards. This standard plan is free. It has many features; a summary of these is below:"}),"\n",(0,o.jsx)(a.h3,{id:"features-1",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It easily gets connected to your supported database."}),"\n",(0,o.jsx)(a.li,{children:"Instinctive drag-and-drop widgets prove to be very helpful and make coding even easier."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-1",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"To fully utilize this app, you need to know JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"knack",children:"Knack"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/knack.png",alt:"knack"})}),"\n",(0,o.jsx)(a.p,{children:"Knack is another no-code app that is used generally used for automating manual processes. It will be problematic if you try to plug it in with an existing database. It has certain limitations, which is why it is best used for internal processes only. It will allow you to view, manage, update, analyze, and share data. The application templates for different cases start quickly. Here are a few features of this application."}),"\n",(0,o.jsx)(a.h3,{id:"features-2",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports a built-in database as well as user management, authentication, email, and notification automation workflows."}),"\n",(0,o.jsx)(a.li,{children:"Developers can easily customize it with JavaSript and CSS."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-2",children:"Drawbacks:"}),"\n",(0,o.jsx)(a.p,{children:"The most severe drawback is its incapability to interact with other databases."}),"\n",(0,o.jsx)(a.h2,{id:"budibase",children:"Budibase"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/budibase.png",alt:"budibase"})}),"\n",(0,o.jsx)(a.p,{children:"Budibase is another popular low-code tool extensively used for CRUD applications. You can easily integrate it with major databases. Below are a few prominent features of the tool."}),"\n",(0,o.jsx)(a.h3,{id:"features-3",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It has a load of widgets and other features to beautify your page."}),"\n",(0,o.jsx)(a.li,{children:"It supports an internal database but supports by connecting to an external database as well."}),"\n",(0,o.jsx)(a.li,{children:"In the shape of extensive documentation, a complete guide is also available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-3",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"JavaScript, as well as technical skills, are required."}),"\n",(0,o.jsx)(a.li,{children:"No templates are available."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"bubble",children:"Bubble"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/bubble.png",alt:"bubble"})}),"\n",(0,o.jsx)(a.p,{children:"This much more complicated tool is not recommended for smaller internal apps."}),"\n",(0,o.jsx)(a.h3,{id:"features-4",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Widgets and designs are available."}),"\n",(0,o.jsx)(a.li,{children:"Perfectly capable of deployment."}),"\n",(0,o.jsx)(a.li,{children:"The volume of traffic, users, and data is unlimited."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-4",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is complicated to learn."}),"\n",(0,o.jsx)(a.li,{children:"You cannot host it on your infrastructure"}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"ui-bakery",children:"UI Bakery"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/uibakery.png",alt:"bakery"})}),"\n",(0,o.jsx)(a.p,{children:"This app is a relatively new product but is still the perfect no-code tool for building internal tools and CRUD apps because of the predefined widgets and ready-made templates. It can easily connect to SQL Databases like MySQL, Google Datasheets, and Postgres."}),"\n",(0,o.jsx)(a.h3,{id:"features-5",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports user management through Google, Twitter, and Facebook."}),"\n",(0,o.jsx)(a.li,{children:"Developers can do app hosting on a unique URL"}),"\n",(0,o.jsx)(a.li,{children:"You can customize the widgets and templates."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-5",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is not suitable for public-facing apps, customer-facing websites, and mobile apps."}),"\n",(0,o.jsx)(a.li,{children:"You need technical staff to deal with this, as it requires a moderate level of knowledge to deal with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"retool",children:"Retool"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/retool.png",alt:"retool"})}),"\n",(0,o.jsx)(a.p,{children:"Though last on the list, retool is also an excellent choice as a CRUD application. It is a drag-and-drop building blocks platform. You need to customize JavaScript in order to fetch your data from an external database."}),"\n",(0,o.jsx)(a.h3,{id:"features-6",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports built-in authorization and authentication."}),"\n",(0,o.jsx)(a.li,{children:"You can customize it with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-6",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Its free plan is minimal and charges at a per-end user base."}),"\n",(0,o.jsx)(a.li,{children:"You cannot use it for public-facing apps."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces. CRUD applications consist of three main components: a database, a user interface, and an API. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we reviewed some of the best tools for building CRUD applications, covering each component separately. We also provided some examples and tips on how to use them effectively. We hope this post helped you learn more about CRUD applications and how to build them."}),"\n",(0,o.jsx)(a.p,{children:"If you are looking for a tool that can help you build CRUD applications quickly and easily, we recommend you check out ILLA Cloud. ILLA Cloud is a cloud-based platform that lets you create CRUD applications without coding. You can connect to any database or API, design your user interface with drag-and-drop components, and deploy your application with one click. ILLA Cloud also provides features such as authentication, authorization, validation, error handling, etc. ILLA Cloud is the best tool for building CRUD applications in minutes."})]})}function u(e={}){const{wrapper:a}={...(0,i.a)(),...e.components};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>l,a:()=>n});var o=t(959);const i={},s=o.createContext(i);function n(e){const a=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function l(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),o.createElement(s.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[4425],{8704:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var o=t(1527),i=t(7214);const s={title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},n=void 0,l={permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",source:"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md",title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",date:"2024-01-08T10:00:00.000Z",formattedDate:"January 8, 2024",tags:[{label:"crud",permalink:"/illa-website/blog/tags/crud"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:10.165,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"The Best Tools for Building Crud Applications in 2024",tags:["crud","tools"],slug:"the-best-tools-for-build-crud-applications",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/cover.png",date:"2024-01-08T10:00"},unlisted:!1,prevItem:{title:"Top 7 Database GUIs for SQL databases",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases"},nextItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"Database",id:"database",level:2},{value:"User Interface",id:"user-interface",level:2},{value:"API",id:"api",level:2},{value:"Tools For Building Crud Applications",id:"tools-for-building-crud-applications",level:2},{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Features:",id:"features",level:3},{value:"Drawbacks:",id:"drawbacks",level:3},{value:"AppSmith",id:"appsmith",level:2},{value:"Features:",id:"features-1",level:3},{value:"Drawbacks:",id:"drawbacks-1",level:3},{value:"Knack",id:"knack",level:2},{value:"Features:",id:"features-2",level:3},{value:"Drawbacks:",id:"drawbacks-2",level:3},{value:"Budibase",id:"budibase",level:2},{value:"Features:",id:"features-3",level:3},{value:"Drawbacks:",id:"drawbacks-3",level:3},{value:"Bubble",id:"bubble",level:2},{value:"Features:",id:"features-4",level:3},{value:"Drawbacks:",id:"drawbacks-4",level:3},{value:"UI Bakery",id:"ui-bakery",level:2},{value:"Features:",id:"features-5",level:3},{value:"Drawbacks:",id:"drawbacks-5",level:3},{value:"Retool",id:"retool",level:2},{value:"Features:",id:"features-6",level:3},{value:"Drawbacks:",id:"drawbacks-6",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const a={h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps. CRUD stands for Create, Read, Update, and Delete, which are the four basic operations that models should be able to do on data. CRUD applications are very common in web development, as they allow users to perform basic operations on data without writing complex code."}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications consist of three main components: a database, a user interface, and an API. The database is where the data is stored and retrieved. The user interface is the front end that users interact with. The API contains the code and methods that communicate with the database. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we will review some of the best tools for building CRUD applications, covering each component separately. We will also provide some examples and tips on how to use them effectively."}),"\n",(0,o.jsx)(a.h2,{id:"database",children:"Database"}),"\n",(0,o.jsx)(a.p,{children:"The database is the core of any CRUD application, as it stores the data that users can create, read, update, and delete. There are many types of databases available, but they can be broadly categorized into two groups: relational (SQL) and non-relational (NoSQL)."}),"\n",(0,o.jsx)(a.p,{children:"Relational databases use tables to store data; each table has a predefined schema and each row represents a record. Relational databases are good for structured and consistent data that requires complex queries and transactions. Some of the most popular relational databases are MySQL, PostgreSQL, Oracle, and SQL Server."}),"\n",(0,o.jsx)(a.p,{children:"Non-relational databases use collections to store data, where each collection can have a flexible schema and each document represents a record. Non-relational databases are good for unstructured and dynamic data that require high scalability and performance. Some of the most popular non-relational databases are MongoDB, CouchDB, Firebase, and DynamoDB."}),"\n",(0,o.jsx)(a.p,{children:"Choosing the right database for your CRUD application depends on several factors, such as the type and volume of data you need to store, the level of consistency and reliability you need to ensure, and the complexity and frequency of queries you need to perform. You should also consider the compatibility and integration of your database with your user interface and API tools."}),"\n",(0,o.jsx)(a.h2,{id:"user-interface",children:"User Interface"}),"\n",(0,o.jsx)(a.p,{children:"The user interface is the front end of your CRUD application, where users can see and manipulate the data stored in your database. The user interface can be built using various technologies and frameworks, depending on the type and complexity of your application."}),"\n",(0,o.jsx)(a.p,{children:"One of the most common ways to build a user interface for a CRUD application is by using HTML, CSS, and JavaScript. HTML defines the structure and content of your web page, CSS styles the appearance and layout of your web page, and JavaScript adds interactivity and functionality to your web page. You can use plain HTML, CSS, and JavaScript or use libraries and frameworks that simplify and enhance your development process."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular libraries and frameworks for building user interfaces are React, Angular, Vue.js, Bootstrap, Tailwind CSS, jQuery, etc. These tools provide various features and benefits for creating dynamic and responsive web pages that can communicate with your API and database."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build a user interface for a CRUD application is by using low-code or no-code platforms. These platforms allow you to create web pages using drag-and-drop components and visual editors without writing much or any code. Some of the most popular low-code or no-code platforms are Budibase, Appsmith, Bubble.io, Webflow, etc. These tools are great for beginners or non-developers who want to create simple and fast CRUD applications without learning complex technologies."}),"\n",(0,o.jsx)(a.h2,{id:"api",children:"API"}),"\n",(0,o.jsx)(a.p,{children:"The API is the bridge between your user interface and your database. It defines how your user interface can request data from your database or send data to your database using HTTP methods such as GET (read), POST (create), PUT (update), or DELETE (delete). The API also handles authentication, authorization, validation, error handling, etc."}),"\n",(0,o.jsx)(a.p,{children:"There are many ways to build an API for your CRUD application, but one of the most common ways is using REST (Representational State Transfer). REST is an architectural style that defines how resources (data) can be accessed and manipulated using standard HTTP methods and formats such as JSON or XML. REST APIs are easy to understand and use by both humans and machines."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building REST APIs are Node.js, Express.js, Flask, Django, Ruby on Rails, Laravel, etc. These tools are frameworks that provide various features and libraries for creating and managing web servers and APIs."}),"\n",(0,o.jsx)(a.p,{children:"Another way to build an API for your CRUD application is using GraphQL. GraphQL is a query language and a runtime that allows you to define and execute queries and mutations (operations) on your data using a single endpoint. GraphQL APIs are more flexible and efficient than REST APIs, as they allow you to request or send only the data you need, avoiding over-fetching or under-fetching."}),"\n",(0,o.jsx)(a.p,{children:"Some of the most popular tools for building GraphQL APIs are Apollo Server, Prisma, Hasura, Graphene, etc. These tools are libraries or platforms that help you create and manage GraphQL servers and schemas."}),"\n",(0,o.jsx)(a.h2,{id:"tools-for-building-crud-applications",children:"Tools For Building Crud Applications"}),"\n",(0,o.jsx)(a.p,{children:"You will find many software claiming to provide ease in building useful CRUD Applications, but you need to be careful to find the ones that help in making the most compatible CRUD Applications. Let us discuss the top 7 software that can help you. We short-listed these seven tools according to client\u2019s preferences and feasibility. We will mention their features and drawbacks so that you can choose wisely and according to your demands."}),"\n",(0,o.jsx)(a.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/illa.png",alt:"illa"})}),"\n",(0,o.jsx)(a.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. Its main aim is to help programmers develop modules to monitor data, which is one of the most tedious jobs for a developer. Another new feature in this open-source low-code app is that you can make your own customized block of code and then later put it up for sale in the marketplace."}),"\n",(0,o.jsx)(a.p,{children:"It gets connected to the mainstream database, or, alternatively, it can connect to any database through APIs. It can even add action to the chain of user events. Its backend and front-end data components are tightly integrated; hence developers can write data calls for massive information interaction."}),"\n",(0,o.jsx)(a.p,{children:"It is doubly useful for developers because it offers them the freedom to implement richer functionality. They can use {{template syntax}} for richer content."}),"\n",(0,o.jsx)(a.p,{children:"It allows real-time collaboration, making it easier for developers to interact at different ends of the world to work on it simultaneously. They can use ILLA Builder by sharing links, co-editing, and communicating for improved development efficiency."}),"\n",(0,o.jsx)(a.p,{children:"ILLA Builder has a comprehensive UI library. It has several useful components that developers can use to drop and drag to build attractive interfaces without wasting much time"}),"\n",(0,o.jsx)(a.h3,{id:"features",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It can easily be integrated with any database."}),"\n",(0,o.jsx)(a.li,{children:"You can download ILLA CLI for any of these operating systems: Windows, Linux, and MAC."}),"\n",(0,o.jsx)(a.li,{children:"It offers real-time collaboration which enables the developers to communicate for better development."}),"\n",(0,o.jsx)(a.li,{children:"It provides flexible deployment. You can use ILLA Cloud, ILLA CLI, Kubernetes, and Docker."}),"\n",(0,o.jsx)(a.li,{children:"You can easily integrate third-party APIs."}),"\n",(0,o.jsx)(a.li,{children:"It is free to share, use, copy, and update."}),"\n",(0,o.jsx)(a.li,{children:"It is constantly being polished with new updates and features."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"ILLA Cloud has basically been developed for the convenience of programmers."}),"\n",(0,o.jsx)(a.li,{children:"You need to be proficient in either of the four languages to fully utilize it. JavaScript, RUST, and Forlang are its major languages."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"appsmith",children:"AppSmith"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/appsmith.png",alt:"appsmith"})}),"\n",(0,o.jsx)(a.p,{children:"AppSmith was the first open-source low-code tool. It introduced the developers to a whole new world of click-and-drag programming. The standard plan consists of unlimited apps and widgets that are immensely useful for building live dashboards. This standard plan is free. It has many features; a summary of these is below:"}),"\n",(0,o.jsx)(a.h3,{id:"features-1",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It easily gets connected to your supported database."}),"\n",(0,o.jsx)(a.li,{children:"Instinctive drag-and-drop widgets prove to be very helpful and make coding even easier."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-1",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"To fully utilize this app, you need to know JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"knack",children:"Knack"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/knack.png",alt:"knack"})}),"\n",(0,o.jsx)(a.p,{children:"Knack is another no-code app that is used generally used for automating manual processes. It will be problematic if you try to plug it in with an existing database. It has certain limitations, which is why it is best used for internal processes only. It will allow you to view, manage, update, analyze, and share data. The application templates for different cases start quickly. Here are a few features of this application."}),"\n",(0,o.jsx)(a.h3,{id:"features-2",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports a built-in database as well as user management, authentication, email, and notification automation workflows."}),"\n",(0,o.jsx)(a.li,{children:"Developers can easily customize it with JavaSript and CSS."}),"\n",(0,o.jsx)(a.li,{children:"A complete guide, including documentation and videos, is available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-2",children:"Drawbacks:"}),"\n",(0,o.jsx)(a.p,{children:"The most severe drawback is its incapability to interact with other databases."}),"\n",(0,o.jsx)(a.h2,{id:"budibase",children:"Budibase"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/budibase.png",alt:"budibase"})}),"\n",(0,o.jsx)(a.p,{children:"Budibase is another popular low-code tool extensively used for CRUD applications. You can easily integrate it with major databases. Below are a few prominent features of the tool."}),"\n",(0,o.jsx)(a.h3,{id:"features-3",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It has a load of widgets and other features to beautify your page."}),"\n",(0,o.jsx)(a.li,{children:"It supports an internal database but supports by connecting to an external database as well."}),"\n",(0,o.jsx)(a.li,{children:"In the shape of extensive documentation, a complete guide is also available for guidance."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-3",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"JavaScript, as well as technical skills, are required."}),"\n",(0,o.jsx)(a.li,{children:"No templates are available."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"bubble",children:"Bubble"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/bubble.png",alt:"bubble"})}),"\n",(0,o.jsx)(a.p,{children:"This much more complicated tool is not recommended for smaller internal apps."}),"\n",(0,o.jsx)(a.h3,{id:"features-4",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Widgets and designs are available."}),"\n",(0,o.jsx)(a.li,{children:"Perfectly capable of deployment."}),"\n",(0,o.jsx)(a.li,{children:"The volume of traffic, users, and data is unlimited."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-4",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is complicated to learn."}),"\n",(0,o.jsx)(a.li,{children:"You cannot host it on your infrastructure"}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"ui-bakery",children:"UI Bakery"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/uibakery.png",alt:"bakery"})}),"\n",(0,o.jsx)(a.p,{children:"This app is a relatively new product but is still the perfect no-code tool for building internal tools and CRUD apps because of the predefined widgets and ready-made templates. It can easily connect to SQL Databases like MySQL, Google Datasheets, and Postgres."}),"\n",(0,o.jsx)(a.h3,{id:"features-5",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports user management through Google, Twitter, and Facebook."}),"\n",(0,o.jsx)(a.li,{children:"Developers can do app hosting on a unique URL"}),"\n",(0,o.jsx)(a.li,{children:"You can customize the widgets and templates."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-5",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It is not suitable for public-facing apps, customer-facing websites, and mobile apps."}),"\n",(0,o.jsx)(a.li,{children:"You need technical staff to deal with this, as it requires a moderate level of knowledge to deal with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"retool",children:"Retool"}),"\n",(0,o.jsx)(a.p,{children:(0,o.jsx)(a.img,{src:"https://cdn.illacloud.com/illa-website/blog/the-best-tools-for-build-crud-applications/retool.png",alt:"retool"})}),"\n",(0,o.jsx)(a.p,{children:"Though last on the list, retool is also an excellent choice as a CRUD application. It is a drag-and-drop building blocks platform. You need to customize JavaScript in order to fetch your data from an external database."}),"\n",(0,o.jsx)(a.h3,{id:"features-6",children:"Features:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"It supports built-in authorization and authentication."}),"\n",(0,o.jsx)(a.li,{children:"You can customize it with JavaScript."}),"\n"]}),"\n",(0,o.jsx)(a.h3,{id:"drawbacks-6",children:"Drawbacks:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:"Its free plan is minimal and charges at a per-end user base."}),"\n",(0,o.jsx)(a.li,{children:"You cannot use it for public-facing apps."}),"\n"]}),"\n",(0,o.jsx)(a.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(a.p,{children:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces. CRUD applications consist of three main components: a database, a user interface, and an API. Each component can use different technologies and frameworks, depending on the needs and preferences of the developer."}),"\n",(0,o.jsx)(a.p,{children:"In this blog post, we reviewed some of the best tools for building CRUD applications, covering each component separately. We also provided some examples and tips on how to use them effectively. We hope this post helped you learn more about CRUD applications and how to build them."}),"\n",(0,o.jsx)(a.p,{children:"If you are looking for a tool that can help you build CRUD applications quickly and easily, we recommend you check out ILLA Cloud. ILLA Cloud is a cloud-based platform that lets you create CRUD applications without coding. You can connect to any database or API, design your user interface with drag-and-drop components, and deploy your application with one click. ILLA Cloud also provides features such as authentication, authorization, validation, error handling, etc. ILLA Cloud is the best tool for building CRUD applications in minutes."})]})}function u(e={}){const{wrapper:a}={...(0,i.a)(),...e.components};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},7214:(e,a,t)=>{t.d(a,{Z:()=>l,a:()=>n});var o=t(959);const i={},s=o.createContext(i);function n(e){const a=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function l(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),o.createElement(s.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/cf2425b1.3abbb32d.js b/assets/js/cf2425b1.ee656b61.js
similarity index 82%
rename from assets/js/cf2425b1.3abbb32d.js
rename to assets/js/cf2425b1.ee656b61.js
index 5c4624b3eb..e6f96f7e4c 100644
--- a/assets/js/cf2425b1.3abbb32d.js
+++ b/assets/js/cf2425b1.ee656b61.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5330],{9393:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var n=s(1527),a=s(7214);const l={slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},o=void 0,i={permalink:"/illa-website/blog/postgresql-isnull",source:"@site/blog/postgresql-isnull/postgresql-isnull.md",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",date:"2024-02-04T11:00:00.000Z",formattedDate:"February 4, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"isnull",permalink:"/illa-website/blog/tags/isnull"},{label:"isnotnull",permalink:"/illa-website/blog/tags/isnotnull"}],readingTime:2.435,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},unlisted:!1,prevItem:{title:"PostgreSQL SELECT Statement",permalink:"/illa-website/blog/postgresql-select"},nextItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},relatedPosts:[{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL IS NULL Syntax",id:"postgresql-is-null-syntax",level:2},{value:"PostgreSQL IS NULL Operator Rules",id:"postgresql-is-null-operator-rules",level:2},{value:"PostgreSQL IS NULL Examples",id:"postgresql-is-null-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["This article explains how to use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator in PostgreSQL to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),".\nPostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a boolean operator that checks if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),". A ",(0,n.jsx)(t.code,{children:"NULL"})," value is a special value that\nindicates nothing, it is neither an empty string nor false."]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-syntax",children:"PostgreSQL IS NULL Syntax"}),"\n",(0,n.jsxs)(t.p,{children:["PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a unary comparison operator that only requires one operand. The syntax for the ",(0,n.jsx)(t.code,{children:"IS NULL"}),"\noperator is:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"expr IS NULL\nexpr IS NOT NULL\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Breakdown:"})}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"expr"})," can be a field name, a value, or an expression."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NOT NULL"})," is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," can be used in ",(0,n.jsx)(t.code,{children:"SELECT"})," statements or ",(0,n.jsx)(t.code,{children:"WHERE"})," clauses."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-operator-rules",children:"PostgreSQL IS NULL Operator Rules"}),"\n",(0,n.jsxs)(t.p,{children:["When the operand on the left side of the PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator is ",(0,n.jsx)(t.code,{children:"NULL"}),", the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator returns ",(0,n.jsx)(t.code,{children:"t"}),",\notherwise it returns ",(0,n.jsx)(t.code,{children:"f"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:'SELECT\n NULL IS NULL "NULL IS NULL",\n 0 IS NULL "0 IS NULL",\n 1 IS NULL "1 IS NULL";\n'})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" NULL IS NOT NULL | 0 IS NOT NULL | 1 IS NOT NULL\n------------------+---------------+---------------\n f | t | t\n"})}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-examples",children:"PostgreSQL IS NULL Examples"}),"\n",(0,n.jsxs)(t.p,{children:["We will use the tables in the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database for demonstration. Please install the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database in\nPostgreSQL first."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database is one of the most widely used and best sample databases. The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database was\noriginally developed by Mike Hillyer, a former member of the MySQL AB documentation team. It is designed to provide a\nstandard schema that can be used for example demonstrations in books, tutorials, articles, etc."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," database models a DVD rental store business, including movies, actors, movie-actor relationships, and a\ncentral inventory table that connects movies, stores, and rental transactions."]}),"\n",(0,n.jsxs)(t.p,{children:["As one of the best sample databases, the ",(0,n.jsx)(t.code,{children:"Sakila"})," database has been ported to platforms such as PostgreSQL, Oracle, DB2,\nand SQLite."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database, the ",(0,n.jsx)(t.code,{children:"staff"})," table stores employee information for the DVD rental store."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"staff"})," table, ",(0,n.jsx)(t.code,{children:"picture"})," stores the employee's photo file. To query for employees who have not uploaded a photo\nfrom the ",(0,n.jsx)(t.code,{children:"staff"})," table, you need to check if ",(0,n.jsx)(t.code,{children:"picture"})," is ",(0,n.jsx)(t.code,{children:"NULL"}),". Use the following SQL statement with ",(0,n.jsx)(t.code,{children:"IS NULL"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"SELECT\n first_name, last_name, picture\nFROM\n staff\nWHERE\n picture IS NULL;\n"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" first_name | last_name | picture\n------------+-----------+---------\n Mike | Hillyer | \n Jon | Stephens | \n"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(t.p,{children:["In this article, we learned the syntax and usage of the ",(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," comparison operators in PostgreSQL.\nHere are the key takeaways from this article:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," are unary comparison operators."]}),"\n",(0,n.jsxs)(t.li,{children:["Use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["The ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," operator is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"NULL IS NULL"})," evaluates to true."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(959);const a={},l=n.createContext(a);function o(e){const t=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(l.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[5330],{9393:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var n=s(1527),a=s(7214);const l={slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},o=void 0,i={permalink:"/illa-website/blog/postgresql-isnull",source:"@site/blog/postgresql-isnull/postgresql-isnull.md",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",date:"2024-02-04T11:00:00.000Z",formattedDate:"February 4, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"isnull",permalink:"/illa-website/blog/tags/isnull"},{label:"isnotnull",permalink:"/illa-website/blog/tags/isnotnull"}],readingTime:2.435,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-isnull",title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/postgresql-isnull/cover.webp",tags:["postgresql","isnull","isnotnull"],date:"2024-02-04T11:00"},unlisted:!1,prevItem:{title:"PostgreSQL SELECT Statement",permalink:"/illa-website/blog/postgresql-select"},nextItem:{title:"Most Popular 5 React Component Libraries in 2024",permalink:"/illa-website/blog/react-component-library"},relatedPosts:[{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",permalink:"/illa-website/blog/postgresql-select",formattedDate:"February 21, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.82,date:"2024-02-21T10:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL IS NULL Syntax",id:"postgresql-is-null-syntax",level:2},{value:"PostgreSQL IS NULL Operator Rules",id:"postgresql-is-null-operator-rules",level:2},{value:"PostgreSQL IS NULL Examples",id:"postgresql-is-null-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["This article explains how to use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator in PostgreSQL to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),".\nPostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a boolean operator that checks if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),". A ",(0,n.jsx)(t.code,{children:"NULL"})," value is a special value that\nindicates nothing, it is neither an empty string nor false."]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-syntax",children:"PostgreSQL IS NULL Syntax"}),"\n",(0,n.jsxs)(t.p,{children:["PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," is a unary comparison operator that only requires one operand. The syntax for the ",(0,n.jsx)(t.code,{children:"IS NULL"}),"\noperator is:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"expr IS NULL\nexpr IS NOT NULL\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Breakdown:"})}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"expr"})," can be a field name, a value, or an expression."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NOT NULL"})," is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," can be used in ",(0,n.jsx)(t.code,{children:"SELECT"})," statements or ",(0,n.jsx)(t.code,{children:"WHERE"})," clauses."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-operator-rules",children:"PostgreSQL IS NULL Operator Rules"}),"\n",(0,n.jsxs)(t.p,{children:["When the operand on the left side of the PostgreSQL ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator is ",(0,n.jsx)(t.code,{children:"NULL"}),", the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator returns ",(0,n.jsx)(t.code,{children:"t"}),",\notherwise it returns ",(0,n.jsx)(t.code,{children:"f"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:'SELECT\n NULL IS NULL "NULL IS NULL",\n 0 IS NULL "0 IS NULL",\n 1 IS NULL "1 IS NULL";\n'})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" NULL IS NOT NULL | 0 IS NOT NULL | 1 IS NOT NULL\n------------------+---------------+---------------\n f | t | t\n"})}),"\n",(0,n.jsx)(t.h2,{id:"postgresql-is-null-examples",children:"PostgreSQL IS NULL Examples"}),"\n",(0,n.jsxs)(t.p,{children:["We will use the tables in the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database for demonstration. Please install the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database in\nPostgreSQL first."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database is one of the most widely used and best sample databases. The ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database was\noriginally developed by Mike Hillyer, a former member of the MySQL AB documentation team. It is designed to provide a\nstandard schema that can be used for example demonstrations in books, tutorials, articles, etc."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Sakila"})," database models a DVD rental store business, including movies, actors, movie-actor relationships, and a\ncentral inventory table that connects movies, stores, and rental transactions."]}),"\n",(0,n.jsxs)(t.p,{children:["As one of the best sample databases, the ",(0,n.jsx)(t.code,{children:"Sakila"})," database has been ported to platforms such as PostgreSQL, Oracle, DB2,\nand SQLite."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"Sakila"})," sample database, the ",(0,n.jsx)(t.code,{children:"staff"})," table stores employee information for the DVD rental store."]}),"\n",(0,n.jsxs)(t.p,{children:["In the ",(0,n.jsx)(t.code,{children:"staff"})," table, ",(0,n.jsx)(t.code,{children:"picture"})," stores the employee's photo file. To query for employees who have not uploaded a photo\nfrom the ",(0,n.jsx)(t.code,{children:"staff"})," table, you need to check if ",(0,n.jsx)(t.code,{children:"picture"})," is ",(0,n.jsx)(t.code,{children:"NULL"}),". Use the following SQL statement with ",(0,n.jsx)(t.code,{children:"IS NULL"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"SELECT\n first_name, last_name, picture\nFROM\n staff\nWHERE\n picture IS NULL;\n"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:" first_name | last_name | picture\n------------+-----------+---------\n Mike | Hillyer | \n Jon | Stephens | \n"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(t.p,{children:["In this article, we learned the syntax and usage of the ",(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," comparison operators in PostgreSQL.\nHere are the key takeaways from this article:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"IS NULL"})," and ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," are unary comparison operators."]}),"\n",(0,n.jsxs)(t.li,{children:["Use the ",(0,n.jsx)(t.code,{children:"IS NULL"})," operator to check if a value is ",(0,n.jsx)(t.code,{children:"NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["The ",(0,n.jsx)(t.code,{children:"IS NOT NULL"})," operator is the negation of ",(0,n.jsx)(t.code,{children:"IS NULL"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"NULL IS NULL"})," evaluates to true."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(959);const a={},l=n.createContext(a);function o(e){const t=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(l.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/d37b0cd5.661ed128.js b/assets/js/d37b0cd5.661ed128.js
deleted file mode 100644
index b22be5039d..0000000000
--- a/assets/js/d37b0cd5.661ed128.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2075],{4565:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>r,toc:()=>d});var i=a(1527),o=a(7214);const n={slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},s=void 0,r={permalink:"/illa-website/blog/core-app-dashboard-2",source:"@site/blog/core-app-dashboard/core-app-dashboard.md",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"core app dashboard",permalink:"/illa-website/blog/tags/core-app-dashboard"}],readingTime:7.445,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},nextItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},relatedPosts:[{title:"5 Best Low Code Platform in 2024",description:"As the software industry evolves, low-code tools are increasingly gaining popularity. Implementing the right low-code tools",permalink:"/illa-website/blog/best-low-code-platform",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.665,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}]},l={authorsImageUrls:[void 0]},d=[{value:"What is the Core App Dashboard?",id:"what-is-the-core-app-dashboard",level:2},{value:"Why should we use the Core Dash app?",id:"why-should-we-use-the-core-dash-app",level:2},{value:"Functions of the Core App Dashboard",id:"functions-of-the-core-app-dashboard",level:2},{value:"How to build a core dashboard using ILLA Cloud?",id:"how-to-build-a-core-dashboard-using-illa-cloud",level:2},{value:"Step 1: Getting Started with ILLA Cloud",id:"step-1-getting-started-with-illa-cloud",level:3},{value:"Step 2: Creating a New Project",id:"step-2-creating-a-new-project",level:3},{value:"Step 3: Designing the User Interface",id:"step-3-designing-the-user-interface",level:3},{value:"Step 4: Integrating Data Sources",id:"step-4-integrating-data-sources",level:3},{value:"Step 5: Creating Data Automation Workflows",id:"step-5-creating-data-automation-workflows",level:3},{value:"Step 6: Operations Automation",id:"step-6-operations-automation",level:3},{value:"Step 7: Testing and Deployment",id:"step-7-testing-and-deployment",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.h2,{id:"what-is-the-core-app-dashboard",children:"What is the Core App Dashboard?"}),"\n",(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.p,{children:"Think of it as the dashboard in a car\u2014it presents the driver with all the essential data at a glance, ensuring efficient navigation and vehicle performance. Similarly, a Core App Dashboard does the same, but for the application realm."}),"\n",(0,i.jsx)(t.h2,{id:"why-should-we-use-the-core-dash-app",children:"Why should we use the Core Dash app?"}),"\n",(0,i.jsx)(t.p,{children:"The use of Core Dash apps, or more commonly known as core dashboard applications, has become increasingly prevalent in today's tech-driven world. These dashboards play a pivotal role in simplifying complex processes, providing insights, and enhancing user experience. Here's why you should consider using a Core Dash app:"}),"\n",(0,i.jsx)(t.p,{children:"Centralized Control: A core dashboard application offers a unified platform where users can access, monitor, and control various functionalities and features of an application. This centralization minimizes the need to jump between multiple interfaces, thus improving efficiency."}),"\n",(0,i.jsx)(t.p,{children:"Real-time Data Visualization: Dashboards provide real-time data visualization, allowing users to quickly grasp the current status, trends, and performance metrics. This can aid in making informed decisions promptly."}),"\n",(0,i.jsx)(t.p,{children:"Enhanced User Experience: A well-designed dashboard provides an intuitive user interface, making it easier for users to navigate and access the information they need. This contributes to a more seamless and enhanced user experience."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Core Dash apps can often be tailored to meet specific needs. Users can customize views, metrics, and even the layout to suit their preferences or job functions."}),"\n",(0,i.jsx)(t.p,{children:"Improved Productivity: By consolidating essential data and functionalities in one place, dashboards reduce the time spent searching for information, leading to increased productivity."}),"\n",(0,i.jsx)(t.p,{children:"Integrated Analytics: Many Core Dash apps come with integrated analytics tools that offer insights into user behavior, application performance, and other critical metrics. This data can be invaluable for driving growth and optimization."}),"\n",(0,i.jsx)(t.p,{children:"Security: Dashboards can provide robust security features, including user access controls, encryption, and audit trails. This ensures that sensitive data is protected and only accessible to authorized users."}),"\n",(0,i.jsx)(t.p,{children:"Collaboration: Some dashboards come with collaborative tools, enabling teams to work together more effectively, share insights, and communicate seamlessly within the platform."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As organizations grow, their data and processes can become more complex. Core Dash apps are designed to be scalable, ensuring they remain effective and efficient even as demands increase."}),"\n",(0,i.jsx)(t.p,{children:"Cost-Effective: By integrating multiple functionalities and data sources into one platform, dashboards can reduce the need for multiple standalone tools. This consolidation can lead to cost savings in both software procurement and training."}),"\n",(0,i.jsx)(t.p,{children:"Alerts and Notifications: Dashboards can be set up to send alerts or notifications based on specific criteria or thresholds. This ensures that users are promptly informed about any critical events or changes."}),"\n",(0,i.jsx)(t.p,{children:"Support for Decision-making: With all the relevant data and analytics at their fingertips, decision-makers can derive actionable insights, helping them make more informed and strategic decisions."}),"\n",(0,i.jsx)(t.p,{children:"In summary, a Core Dash app provides a powerful and comprehensive tool for businesses and individuals alike. Whether it's for monitoring, analytics, collaboration, or decision-making, these dashboards offer a range of benefits that can significantly enhance efficiency, productivity, and overall user experience. If you're looking for a way to consolidate data, gain insights, and improve operational efficiency, a Core Dash app might be the solution you need."}),"\n",(0,i.jsx)(t.h2,{id:"functions-of-the-core-app-dashboard",children:"Functions of the Core App Dashboard"}),"\n",(0,i.jsx)(t.p,{children:"While the specific functionalities might differ based on the nature of the application, universally, a Core App Dashboard is expected to deliver the following capabilities:"}),"\n",(0,i.jsx)(t.p,{children:"Comprehensive Analytics: A bird's-eye view of the application's performance metrics, user activity, and other pivotal data, enabling users to understand and optimize app usage."}),"\n",(0,i.jsx)(t.p,{children:"User Administration: A crucial feature for multi-user platforms, the dashboard provides tools for the seamless management of users\u2014enabling add-ons, edits, deletions, and role definitions."}),"\n",(0,i.jsx)(t.p,{children:"Configurational Controls: Whether it's changing the interface's aesthetics or adjusting the application's backend mechanics, the dashboard allows for intuitive, centralized control over various settings."}),"\n",(0,i.jsx)(t.p,{children:"Notification Hub: This consolidates all alerts, ensuring users never miss out on essential updates, messages, or tasks."}),"\n",(0,i.jsx)(t.p,{children:"Task Management: Some dashboards integrate task management tools to enable users to allocate, track, and manage projects and responsibilities."}),"\n",(0,i.jsx)(t.p,{children:"Integration and Extensions: Dashboards might provide interfaces for integrating third-party tools or extending the application's capabilities."}),"\n",(0,i.jsx)(t.p,{children:"Utilizing the Core App Dashboard: What to Keep in Mind"}),"\n",(0,i.jsx)(t.p,{children:"Harnessing the potential of a Core App Dashboard necessitates understanding and addressing a few critical considerations:"}),"\n",(0,i.jsx)(t.p,{children:"Intuitive Design: A cluttered or convoluted dashboard can deter users. Ensuring a clean, intuitive, and user-friendly design is paramount."}),"\n",(0,i.jsx)(t.p,{children:"Robust Security: Given the control and insights a dashboard offers, its security cannot be compromised. Regular updates, strong encryption, and multi-factor authentication can enhance security."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As applications evolve, dashboards should scale accordingly. This includes accommodating additional data, users, and functionalities."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Every organization or user has unique needs. Offering customization options ensures the dashboard remains relevant and effective."}),"\n",(0,i.jsx)(t.p,{children:"Regular Updates: The digital realm is dynamic. Dashboards should regularly update to incorporate new features, fix bugs, and enhance performance."}),"\n",(0,i.jsx)(t.h2,{id:"how-to-build-a-core-dashboard-using-illa-cloud",children:"How to build a core dashboard using ILLA Cloud?"}),"\n",(0,i.jsx)(t.p,{children:"In the ever-evolving digital realm, the ability to visualize and act upon data quickly is crucial. A well-structured core app dashboard can be your central hub for all pivotal information. Combining this with the innovative prowess of ILLA Cloud can make your dashboard not just functional but transformative. Here's how you can embark on this transformative journey:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.h3,{id:"step-1-getting-started-with-illa-cloud",children:"Step 1: Getting Started with ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Your first stop is the official ILLA Cloud website. Register and create an account. With this step, you open the gateway to a dashboard replete with tools tailored for intuitive application development."}),"\n",(0,i.jsx)(t.h3,{id:"step-2-creating-a-new-project",children:"Step 2: Creating a New Project"}),"\n",(0,i.jsx)(t.p,{children:'Spot the "Create New Project" button? Click on it. Now, christen your project with a name and sprinkle in a description. Given our focus, you\'d want to select a core app dashboard as your project type.'}),"\n",(0,i.jsx)(t.h3,{id:"step-3-designing-the-user-interface",children:"Step 3: Designing the User Interface"}),"\n",(0,i.jsx)(t.p,{children:"Harness the strength of ILLA Cloud's low-code environment. Crafting a user interface becomes a game of drag-and-drop. Be it buttons, charts, or widgets, position them as you deem fit and give them a makeover to resonate with your brand's identity."}),"\n",(0,i.jsx)(t.h3,{id:"step-4-integrating-data-sources",children:"Step 4: Integrating Data Sources"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud makes data integration a breeze. Using the no-code API connector, you can seamlessly fetch data from various repositories, be it intricate databases, versatile external APIs, or humble spreadsheets. Your dashboard now thrives with real-time data.ILLA Cloud supports a myriad of data sources to ensure it caters to a wide range of business needs.For example,"}),"\n",(0,i.jsx)(t.p,{children:"Airtable: Known for its spreadsheet-database hybrid functionalities, businesses can leverage Airtable's structured data with ILLA Cloud."}),"\n",(0,i.jsx)(t.p,{children:"Google Sheets: Many organizations use Google Sheets due to its collaboration features. Directly integrate these sheets into your dashboard for an efficient workflow."}),"\n",(0,i.jsx)(t.p,{children:"MySQL & PostgreSQL: These popular relational database management systems hold vast amounts of structured data. ILLA Cloud\u2019s connectors ensure this data can be visualized seamlessly."}),"\n",(0,i.jsx)(t.h3,{id:"step-5-creating-data-automation-workflows",children:"Step 5: Creating Data Automation Workflows"}),"\n",(0,i.jsx)(t.p,{children:"Accuracy is key. With ILLA Cloud's data automation workflows and the robust Event Handler feature, say goodbye to inconsistencies. Set the stage for meticulous data validation, apt transformation, and synchronized updates. The Event Handler acts as an event processing function, allowing you to create dynamic triggering mechanisms in the workflow. Simply put, its logic operates on the principle of 'when something happens, then something else will happen.' This ensures that your dashboard always responds in real-time and reflects the absolute truth.\""}),"\n",(0,i.jsx)(t.p,{children:"This revision emphasizes the importance of the Event Handler within the context of ensuring data accuracy and real-time responsiveness."}),"\n",(0,i.jsx)(t.h3,{id:"step-6-operations-automation",children:"Step 6: Operations Automation"}),"\n",(0,i.jsx)(t.p,{children:"Routine tasks can be automated. Let ILLA Cloud's operation automation features take the helm. Design workflows that are proactive, initiating actions based on set criteria. The result? A reduction in manual tasks and a boost in overall efficiency."}),"\n",(0,i.jsx)(t.h3,{id:"step-7-testing-and-deployment",children:"Step 7: Testing and Deployment"}),"\n",(0,i.jsx)(t.p,{children:"Before you unveil your masterpiece, test it. Use the ILLA Cloud environment to ensure every cog in your dashboard machine runs smoothly. Once you're content with its performance, roll out your dashboard to the desired environment, and let your stakeholders revel in its capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"Building a core app dashboard might seem daunting, but with ILLA Cloud, it's akin to weaving a story\u2014with data as your language. This guide laid down a structured path, taking you from initiation to deployment, ensuring your journey is seamless. The core app dashboard you create with ILLA Cloud won't just be a repository of data; it'll be a hub of insights, driving informed decisions and fostering growth. Dive into the world of ILLA Cloud, and make app development an experience, not just a task."})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},7214:(e,t,a)=>{a.d(t,{Z:()=>r,a:()=>s});var i=a(959);const o={},n=i.createContext(o);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/d37b0cd5.997800d5.js b/assets/js/d37b0cd5.997800d5.js
new file mode 100644
index 0000000000..8d77304c41
--- /dev/null
+++ b/assets/js/d37b0cd5.997800d5.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2075],{4565:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>n,metadata:()=>r,toc:()=>d});var i=a(1527),o=a(7214);const n={slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},s=void 0,r={permalink:"/illa-website/blog/core-app-dashboard-2",source:"@site/blog/core-app-dashboard/core-app-dashboard.md",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code",permalink:"/illa-website/blog/tags/low-code"},{label:"core app dashboard",permalink:"/illa-website/blog/tags/core-app-dashboard"}],readingTime:7.445,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"core-app-dashboard-2",title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/cover.png",tags:["low code","core app dashboard"],is_featured:!0,date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},nextItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},relatedPosts:[{title:"5 Best Low Code Platform in 2024",description:"As the software industry evolves, low-code tools are increasingly gaining popularity. Implementing the right low-code tools",permalink:"/illa-website/blog/best-low-code-platform",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.665,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}]},l={authorsImageUrls:[void 0]},d=[{value:"What is the Core App Dashboard?",id:"what-is-the-core-app-dashboard",level:2},{value:"Why should we use the Core Dash app?",id:"why-should-we-use-the-core-dash-app",level:2},{value:"Functions of the Core App Dashboard",id:"functions-of-the-core-app-dashboard",level:2},{value:"How to build a core dashboard using ILLA Cloud?",id:"how-to-build-a-core-dashboard-using-illa-cloud",level:2},{value:"Step 1: Getting Started with ILLA Cloud",id:"step-1-getting-started-with-illa-cloud",level:3},{value:"Step 2: Creating a New Project",id:"step-2-creating-a-new-project",level:3},{value:"Step 3: Designing the User Interface",id:"step-3-designing-the-user-interface",level:3},{value:"Step 4: Integrating Data Sources",id:"step-4-integrating-data-sources",level:3},{value:"Step 5: Creating Data Automation Workflows",id:"step-5-creating-data-automation-workflows",level:3},{value:"Step 6: Operations Automation",id:"step-6-operations-automation",level:3},{value:"Step 7: Testing and Deployment",id:"step-7-testing-and-deployment",level:3},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={h2:"h2",h3:"h3",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.h2,{id:"what-is-the-core-app-dashboard",children:"What is the Core App Dashboard?"}),"\n",(0,i.jsx)(t.p,{children:"The Core App Dashboard is the nerve center of any sophisticated application. At its essence, it is a centralized interface providing comprehensive insights and controls tailored to the specifics of an application, facilitating better decision-making and management."}),"\n",(0,i.jsx)(t.p,{children:"Think of it as the dashboard in a car\u2014it presents the driver with all the essential data at a glance, ensuring efficient navigation and vehicle performance. Similarly, a Core App Dashboard does the same, but for the application realm."}),"\n",(0,i.jsx)(t.h2,{id:"why-should-we-use-the-core-dash-app",children:"Why should we use the Core Dash app?"}),"\n",(0,i.jsx)(t.p,{children:"The use of Core Dash apps, or more commonly known as core dashboard applications, has become increasingly prevalent in today's tech-driven world. These dashboards play a pivotal role in simplifying complex processes, providing insights, and enhancing user experience. Here's why you should consider using a Core Dash app:"}),"\n",(0,i.jsx)(t.p,{children:"Centralized Control: A core dashboard application offers a unified platform where users can access, monitor, and control various functionalities and features of an application. This centralization minimizes the need to jump between multiple interfaces, thus improving efficiency."}),"\n",(0,i.jsx)(t.p,{children:"Real-time Data Visualization: Dashboards provide real-time data visualization, allowing users to quickly grasp the current status, trends, and performance metrics. This can aid in making informed decisions promptly."}),"\n",(0,i.jsx)(t.p,{children:"Enhanced User Experience: A well-designed dashboard provides an intuitive user interface, making it easier for users to navigate and access the information they need. This contributes to a more seamless and enhanced user experience."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Core Dash apps can often be tailored to meet specific needs. Users can customize views, metrics, and even the layout to suit their preferences or job functions."}),"\n",(0,i.jsx)(t.p,{children:"Improved Productivity: By consolidating essential data and functionalities in one place, dashboards reduce the time spent searching for information, leading to increased productivity."}),"\n",(0,i.jsx)(t.p,{children:"Integrated Analytics: Many Core Dash apps come with integrated analytics tools that offer insights into user behavior, application performance, and other critical metrics. This data can be invaluable for driving growth and optimization."}),"\n",(0,i.jsx)(t.p,{children:"Security: Dashboards can provide robust security features, including user access controls, encryption, and audit trails. This ensures that sensitive data is protected and only accessible to authorized users."}),"\n",(0,i.jsx)(t.p,{children:"Collaboration: Some dashboards come with collaborative tools, enabling teams to work together more effectively, share insights, and communicate seamlessly within the platform."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As organizations grow, their data and processes can become more complex. Core Dash apps are designed to be scalable, ensuring they remain effective and efficient even as demands increase."}),"\n",(0,i.jsx)(t.p,{children:"Cost-Effective: By integrating multiple functionalities and data sources into one platform, dashboards can reduce the need for multiple standalone tools. This consolidation can lead to cost savings in both software procurement and training."}),"\n",(0,i.jsx)(t.p,{children:"Alerts and Notifications: Dashboards can be set up to send alerts or notifications based on specific criteria or thresholds. This ensures that users are promptly informed about any critical events or changes."}),"\n",(0,i.jsx)(t.p,{children:"Support for Decision-making: With all the relevant data and analytics at their fingertips, decision-makers can derive actionable insights, helping them make more informed and strategic decisions."}),"\n",(0,i.jsx)(t.p,{children:"In summary, a Core Dash app provides a powerful and comprehensive tool for businesses and individuals alike. Whether it's for monitoring, analytics, collaboration, or decision-making, these dashboards offer a range of benefits that can significantly enhance efficiency, productivity, and overall user experience. If you're looking for a way to consolidate data, gain insights, and improve operational efficiency, a Core Dash app might be the solution you need."}),"\n",(0,i.jsx)(t.h2,{id:"functions-of-the-core-app-dashboard",children:"Functions of the Core App Dashboard"}),"\n",(0,i.jsx)(t.p,{children:"While the specific functionalities might differ based on the nature of the application, universally, a Core App Dashboard is expected to deliver the following capabilities:"}),"\n",(0,i.jsx)(t.p,{children:"Comprehensive Analytics: A bird's-eye view of the application's performance metrics, user activity, and other pivotal data, enabling users to understand and optimize app usage."}),"\n",(0,i.jsx)(t.p,{children:"User Administration: A crucial feature for multi-user platforms, the dashboard provides tools for the seamless management of users\u2014enabling add-ons, edits, deletions, and role definitions."}),"\n",(0,i.jsx)(t.p,{children:"Configurational Controls: Whether it's changing the interface's aesthetics or adjusting the application's backend mechanics, the dashboard allows for intuitive, centralized control over various settings."}),"\n",(0,i.jsx)(t.p,{children:"Notification Hub: This consolidates all alerts, ensuring users never miss out on essential updates, messages, or tasks."}),"\n",(0,i.jsx)(t.p,{children:"Task Management: Some dashboards integrate task management tools to enable users to allocate, track, and manage projects and responsibilities."}),"\n",(0,i.jsx)(t.p,{children:"Integration and Extensions: Dashboards might provide interfaces for integrating third-party tools or extending the application's capabilities."}),"\n",(0,i.jsx)(t.p,{children:"Utilizing the Core App Dashboard: What to Keep in Mind"}),"\n",(0,i.jsx)(t.p,{children:"Harnessing the potential of a Core App Dashboard necessitates understanding and addressing a few critical considerations:"}),"\n",(0,i.jsx)(t.p,{children:"Intuitive Design: A cluttered or convoluted dashboard can deter users. Ensuring a clean, intuitive, and user-friendly design is paramount."}),"\n",(0,i.jsx)(t.p,{children:"Robust Security: Given the control and insights a dashboard offers, its security cannot be compromised. Regular updates, strong encryption, and multi-factor authentication can enhance security."}),"\n",(0,i.jsx)(t.p,{children:"Scalability: As applications evolve, dashboards should scale accordingly. This includes accommodating additional data, users, and functionalities."}),"\n",(0,i.jsx)(t.p,{children:"Customization: Every organization or user has unique needs. Offering customization options ensures the dashboard remains relevant and effective."}),"\n",(0,i.jsx)(t.p,{children:"Regular Updates: The digital realm is dynamic. Dashboards should regularly update to incorporate new features, fix bugs, and enhance performance."}),"\n",(0,i.jsx)(t.h2,{id:"how-to-build-a-core-dashboard-using-illa-cloud",children:"How to build a core dashboard using ILLA Cloud?"}),"\n",(0,i.jsx)(t.p,{children:"In the ever-evolving digital realm, the ability to visualize and act upon data quickly is crucial. A well-structured core app dashboard can be your central hub for all pivotal information. Combining this with the innovative prowess of ILLA Cloud can make your dashboard not just functional but transformative. Here's how you can embark on this transformative journey:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/core-app-dashboard/dashboard.png",alt:"dashboard"})}),"\n",(0,i.jsx)(t.h3,{id:"step-1-getting-started-with-illa-cloud",children:"Step 1: Getting Started with ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"Your first stop is the official ILLA Cloud website. Register and create an account. With this step, you open the gateway to a dashboard replete with tools tailored for intuitive application development."}),"\n",(0,i.jsx)(t.h3,{id:"step-2-creating-a-new-project",children:"Step 2: Creating a New Project"}),"\n",(0,i.jsx)(t.p,{children:'Spot the "Create New Project" button? Click on it. Now, christen your project with a name and sprinkle in a description. Given our focus, you\'d want to select a core app dashboard as your project type.'}),"\n",(0,i.jsx)(t.h3,{id:"step-3-designing-the-user-interface",children:"Step 3: Designing the User Interface"}),"\n",(0,i.jsx)(t.p,{children:"Harness the strength of ILLA Cloud's low-code environment. Crafting a user interface becomes a game of drag-and-drop. Be it buttons, charts, or widgets, position them as you deem fit and give them a makeover to resonate with your brand's identity."}),"\n",(0,i.jsx)(t.h3,{id:"step-4-integrating-data-sources",children:"Step 4: Integrating Data Sources"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud makes data integration a breeze. Using the no-code API connector, you can seamlessly fetch data from various repositories, be it intricate databases, versatile external APIs, or humble spreadsheets. Your dashboard now thrives with real-time data.ILLA Cloud supports a myriad of data sources to ensure it caters to a wide range of business needs.For example,"}),"\n",(0,i.jsx)(t.p,{children:"Airtable: Known for its spreadsheet-database hybrid functionalities, businesses can leverage Airtable's structured data with ILLA Cloud."}),"\n",(0,i.jsx)(t.p,{children:"Google Sheets: Many organizations use Google Sheets due to its collaboration features. Directly integrate these sheets into your dashboard for an efficient workflow."}),"\n",(0,i.jsx)(t.p,{children:"MySQL & PostgreSQL: These popular relational database management systems hold vast amounts of structured data. ILLA Cloud\u2019s connectors ensure this data can be visualized seamlessly."}),"\n",(0,i.jsx)(t.h3,{id:"step-5-creating-data-automation-workflows",children:"Step 5: Creating Data Automation Workflows"}),"\n",(0,i.jsx)(t.p,{children:"Accuracy is key. With ILLA Cloud's data automation workflows and the robust Event Handler feature, say goodbye to inconsistencies. Set the stage for meticulous data validation, apt transformation, and synchronized updates. The Event Handler acts as an event processing function, allowing you to create dynamic triggering mechanisms in the workflow. Simply put, its logic operates on the principle of 'when something happens, then something else will happen.' This ensures that your dashboard always responds in real-time and reflects the absolute truth.\""}),"\n",(0,i.jsx)(t.p,{children:"This revision emphasizes the importance of the Event Handler within the context of ensuring data accuracy and real-time responsiveness."}),"\n",(0,i.jsx)(t.h3,{id:"step-6-operations-automation",children:"Step 6: Operations Automation"}),"\n",(0,i.jsx)(t.p,{children:"Routine tasks can be automated. Let ILLA Cloud's operation automation features take the helm. Design workflows that are proactive, initiating actions based on set criteria. The result? A reduction in manual tasks and a boost in overall efficiency."}),"\n",(0,i.jsx)(t.h3,{id:"step-7-testing-and-deployment",children:"Step 7: Testing and Deployment"}),"\n",(0,i.jsx)(t.p,{children:"Before you unveil your masterpiece, test it. Use the ILLA Cloud environment to ensure every cog in your dashboard machine runs smoothly. Once you're content with its performance, roll out your dashboard to the desired environment, and let your stakeholders revel in its capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"Building a core app dashboard might seem daunting, but with ILLA Cloud, it's akin to weaving a story\u2014with data as your language. This guide laid down a structured path, taking you from initiation to deployment, ensuring your journey is seamless. The core app dashboard you create with ILLA Cloud won't just be a repository of data; it'll be a hub of insights, driving informed decisions and fostering growth. Dive into the world of ILLA Cloud, and make app development an experience, not just a task."})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},7214:(e,t,a)=>{a.d(t,{Z:()=>r,a:()=>s});var i=a(959);const o={},n=i.createContext(o);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/d3b7cf11.c621a041.js b/assets/js/d3b7cf11.b851ab17.js
similarity index 92%
rename from assets/js/d3b7cf11.c621a041.js
rename to assets/js/d3b7cf11.b851ab17.js
index 611f1ed0c8..d6cb9d90ab 100644
--- a/assets/js/d3b7cf11.c621a041.js
+++ b/assets/js/d3b7cf11.b851ab17.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2525],{9551:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var n=t(1527),o=t(7214);const a={slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},l=void 0,r={permalink:"/illa-website/blog/postgresql-select",source:"@site/blog/postgresql-select/postgresql-select.md",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",date:"2024-02-21T10:00:00.000Z",formattedDate:"February 21, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"select",permalink:"/illa-website/blog/tags/select"}],readingTime:5.82,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},unlisted:!1,prevItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},nextItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},relatedPosts:[{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",permalink:"/illa-website/blog/postgresql-isnull",formattedDate:"February 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.435,date:"2024-02-04T11:00:00.000Z"},{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},i={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL SELECT Syntax",id:"postgresql-select-syntax",level:2},{value:"PostgreSQL SELECT Examples",id:"postgresql-select-examples",level:2},{value:"Query One Column with PostgreSQL SELECT",id:"query-one-column-with-postgresql-select",level:3},{value:"Query Multiple Columns with PostgreSQL SELECT",id:"query-multiple-columns-with-postgresql-select",level:3},{value:"Query All Columns from a Table with PostgreSQL SELECT",id:"query-all-columns-from-a-table-with-postgresql-select",level:3},{value:"Query with Expressions in PostgreSQL SELECT",id:"query-with-expressions-in-postgresql-select",level:3},{value:"Calculate Expressions with PostgreSQL SELECT",id:"calculate-expressions-with-postgresql-select",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const s={code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["This article introduces the basic form of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement in ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", as well as how to use ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from tables."]}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-syntax",children:"PostgreSQL SELECT Syntax"}),"\n",(0,n.jsxs)(s.p,{children:["Let's start with the basic form of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement for retrieving data from a single table."]}),"\n",(0,n.jsxs)(s.p,{children:["The syntax of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is shown below:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n expr_list\nFROM \n table_name\n[other_clauses];\n"})}),"\n",(0,n.jsx)(s.p,{children:"In this syntax:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"SELECT"})," and ",(0,n.jsx)(s.code,{children:"FROM"})," are keywords."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"expr_list"})," is a list of columns or expressions to select. Multiple columns or expressions need to be separated by commas."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"table_name"})," is the data table to query from."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"FROM table_name"})," is optional. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause if you are not querying rows from any table."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"other_clauses"})," are clauses supported by the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The ",(0,n.jsx)(s.code,{children:"SELECT"})," statement supports many clauses including:","\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"DISTINCT"})," operator to select distinct rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"ORDER BY"})," clause to sort rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"WHERE"})," clause to filter rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"LIMIT"})," or ",(0,n.jsx)(s.code,{children:"FETCH"})," clause to select a subset of rows from the table."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"GROUP BY"})," clause to group rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"HAVING"})," clause to filter groups."]}),"\n",(0,n.jsxs)(s.li,{children:["Use joins such as ",(0,n.jsx)(s.code,{children:"INNER JOIN"}),", ",(0,n.jsx)(s.code,{children:"LEFT JOIN"}),", ",(0,n.jsx)(s.code,{children:"FULL OUTER JOIN"}),", ",(0,n.jsx)(s.code,{children:"CROSS JOIN"})," to join with other tables."]}),"\n",(0,n.jsxs)(s.li,{children:["Use ",(0,n.jsx)(s.code,{children:"UNION"}),", ",(0,n.jsx)(s.code,{children:"INTERSECT"})," and ",(0,n.jsx)(s.code,{children:"EXCEPT"})," to perform set operations."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"Note that SQL keywords are case insensitive. However, it is a good coding practice to write SQL keywords in uppercase for better readability of SQL code."}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, we'll focus on the basic usage of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The usage of other related clauses will be covered in subsequent tutorials."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-examples",children:"PostgreSQL SELECT Examples"}),"\n",(0,n.jsxs)(s.p,{children:["Let's look at some examples of using PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements."]}),"\n",(0,n.jsxs)(s.p,{children:["We'll use the ",(0,n.jsx)(s.code,{children:"customer"})," table from the ",(0,n.jsx)(s.code,{children:"PostgreSQL Sakila"})," sample database for the demonstration."]}),"\n",(0,n.jsx)(s.h3,{id:"query-one-column-with-postgresql-select",children:"Query One Column with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement finds all customer first names from the ",(0,n.jsx)(s.code,{children:"customer"})," table:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT first_name FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name\n------------ \nMARY\nPATRICIA\nLINDA\nBARBARA\nELIZABETH\nJENNIFER\nMARIA \nSUSAN\nMARGARET\nDOROTHY\n"})}),"\n",(0,n.jsxs)(s.p,{children:["Note that we added a semicolon (;) at the end of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The semicolon is not part of the SQL statement. It is used to signal the end of the SQL statement to PostgreSQL. Semicolon is also used to separate two SQL statements."]}),"\n",(0,n.jsx)(s.h3,{id:"query-multiple-columns-with-postgresql-select",children:"Query Multiple Columns with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to know the customer's first name, last name, and email, you can specify these column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause as shown in the following query:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name,\n last_name,\n email\nFROM\n customer; \n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name | last_name | email \n------------+-----------+-------------------------------------\nMARY | SMITH | MARY.SMITH@sakilacustomer.org \nPATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org\nLINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org \nBARBARA | JONES | BARBARA.JONES@sakilacustomer.org \nELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org \nJENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org \nMARIA | MILLER | MARIA.MILLER@sakilacustomer.org \nSUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org \nMARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org \nDOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org\n"})}),"\n",(0,n.jsx)(s.h3,{id:"query-all-columns-from-a-table-with-postgresql-select",children:"Query All Columns from a Table with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to find all columns from the ",(0,n.jsx)(s.code,{children:"customer"})," table using the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement, use the following statement:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT * FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" customer_id | store_id | first_name | last_name | email | address_id | activebool | create_date | last_update | active \n-------------+----------+------------+-----------+-------------------------------------+------------+------------+-------------+---------------------+---------\n 1 | 1 | MARY | SMITH | MARY.SMITH@sakilacustomer.org | 5 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 2 | 1 | PATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org | 6 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 3 | 1 | LINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org | 7 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 4 | 2 | BARBARA | JONES | BARBARA.JONES@sakilacustomer.org | 8 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 5 | 1 | ELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org | 9 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 6 | 2 | JENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org | 10 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 7 | 1 | MARIA | MILLER | MARIA.MILLER@sakilacustomer.org | 11 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 8 | 2 | SUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org | 12 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 9 | 2 | MARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org | 13 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 10 | 1 | DOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org | 14 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we used the asterisk (",(0,n.jsxs)(s.em,{children:[") in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause which is shorthand for all columns. The asterisk ("]}),") allows us to type less without having to list out all column names in the ",(0,n.jsx)(s.code,{children:"customer"})," table."]}),"\n",(0,n.jsxs)(s.p,{children:["However, using asterisk (*) in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements is not a good practice for the following reasons:"]}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsxs)(s.p,{children:["Database performance. Assuming you have a table with lots of columns and large amounts of data, a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement with asterisk (*) shorthand will select data from all columns of the table which may not be necessary for the application."]}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Application performance. Retrieving unnecessary data from the database increases traffic between the database server and application server. Hence your application's response time may be slower and less scalable."}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["For these reasons, it is best to explicitly specify column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause to only get required data from the database."]}),"\n",(0,n.jsx)(s.p,{children:"You should only use the asterisk (*) shorthand for adhoc queries that check database data."}),"\n",(0,n.jsx)(s.h3,{id:"query-with-expressions-in-postgresql-select",children:"Query with Expressions in PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["In addition to column names, you can also use expressions in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following example uses a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement to return the full name and email of all customers:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name || ' ' || last_name, \n email\nFROM\n customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" ?column? | email \n-------------------+-------------------------------------\n MARY SMITH | MARY.SMITH@sakilacustomer.org\n PATRICIA JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org \n LINDA WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org\n BARBARA JONES | BARBARA.JONES@sakilacustomer.org\n ELIZABETH BROWN | ELIZABETH.BROWN@sakilacustomer.org\n JENNIFER DAVIS | JENNIFER.DAVIS@sakilacustomer.org\n MARIA MILLER | MARIA.MILLER@sakilacustomer.org\n SUSAN WILSON | SUSAN.WILSON@sakilacustomer.org\n MARGARET MOORE | MARGARET.MOORE@sakilacustomer.org\n DOROTHY TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org \n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we concatenated each customer's first name, space and last name using the string concatenation operator ",(0,n.jsx)(s.code,{children:"||"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"calculate-expressions-with-postgresql-select",children:"Calculate Expressions with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you just want to calculate the result of an expression, you can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to calculate the result of ",(0,n.jsx)(s.code,{children:"5 * 3"}),":"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT 5 * 3;\n"})}),"\n",(0,n.jsx)(s.p,{children:"The output is:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"?column?\n----------\n 15\n"})}),"\n",(0,n.jsx)(s.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, you learned how to use the basic form of PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from a single table. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements if you do not need to query data from any table."]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,s,t)=>{t.d(s,{Z:()=>r,a:()=>l});var n=t(959);const o={},a=n.createContext(o);function l(e){const s=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),n.createElement(a.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2525],{9551:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var n=t(1527),o=t(7214);const a={slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},l=void 0,r={permalink:"/illa-website/blog/postgresql-select",source:"@site/blog/postgresql-select/postgresql-select.md",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",date:"2024-02-21T10:00:00.000Z",formattedDate:"February 21, 2024",tags:[{label:"postgresql",permalink:"/illa-website/blog/tags/postgresql"},{label:"select",permalink:"/illa-website/blog/tags/select"}],readingTime:5.82,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"postgresql-select",title:"PostgreSQL SELECT Statement",description:"This article introduces the basic form of the `SELECT` statement in `PostgreSQL`, as well as how to use `SELECT` statements to query data from tables. In `PostgreSQL`, the `SELECT` statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/posgresql-select/cover.webp",tags:["postgresql","select"],date:"2024-02-21T10:00"},unlisted:!1,prevItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},nextItem:{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",permalink:"/illa-website/blog/postgresql-isnull"},relatedPosts:[{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",description:"A table of contents has numerous benefits, and is a valuable addition for websites, especially blogs. An organized and easily navigable table of contents significantly improves the user experience, simplifying the process for readers to find information they require. By adding a table of contents, not only do you provide readers with streamlined navigation, but you also increase the overall accessibility and usability of content.",permalink:"/illa-website/blog/react-markdown",formattedDate:"February 26, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:9.965,date:"2024-02-26T10:00:00.000Z"},{title:"Best Practices for PostgreSQL ISNULL and ISNOTNULL",description:"This article explains how to use the `IS NULL` operator in PostgreSQL to check if a value is `NULL`. PostgreSQL `IS NULL` is a boolean operator that checks if a value is `NULL`. A `NULL` value is a special value that indicates nothing, it is neither an empty string nor false.",permalink:"/illa-website/blog/postgresql-isnull",formattedDate:"February 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.435,date:"2024-02-04T11:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"}],authorPosts:[]},i={authorsImageUrls:[void 0]},c=[{value:"PostgreSQL SELECT Syntax",id:"postgresql-select-syntax",level:2},{value:"PostgreSQL SELECT Examples",id:"postgresql-select-examples",level:2},{value:"Query One Column with PostgreSQL SELECT",id:"query-one-column-with-postgresql-select",level:3},{value:"Query Multiple Columns with PostgreSQL SELECT",id:"query-multiple-columns-with-postgresql-select",level:3},{value:"Query All Columns from a Table with PostgreSQL SELECT",id:"query-all-columns-from-a-table-with-postgresql-select",level:3},{value:"Query with Expressions in PostgreSQL SELECT",id:"query-with-expressions-in-postgresql-select",level:3},{value:"Calculate Expressions with PostgreSQL SELECT",id:"calculate-expressions-with-postgresql-select",level:3},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const s={code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["This article introduces the basic form of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement in ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", as well as how to use ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from tables."]}),"\n",(0,n.jsxs)(s.p,{children:["In ",(0,n.jsx)(s.code,{children:"PostgreSQL"}),", the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to retrieve data from one or more tables and it is perhaps the most widely used statement."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-syntax",children:"PostgreSQL SELECT Syntax"}),"\n",(0,n.jsxs)(s.p,{children:["Let's start with the basic form of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement for retrieving data from a single table."]}),"\n",(0,n.jsxs)(s.p,{children:["The syntax of a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is shown below:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n expr_list\nFROM \n table_name\n[other_clauses];\n"})}),"\n",(0,n.jsx)(s.p,{children:"In this syntax:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"SELECT"})," and ",(0,n.jsx)(s.code,{children:"FROM"})," are keywords."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"expr_list"})," is a list of columns or expressions to select. Multiple columns or expressions need to be separated by commas."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"table_name"})," is the data table to query from."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"FROM table_name"})," is optional. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause if you are not querying rows from any table."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.code,{children:"other_clauses"})," are clauses supported by the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The ",(0,n.jsx)(s.code,{children:"SELECT"})," statement supports many clauses including:","\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"DISTINCT"})," operator to select distinct rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"ORDER BY"})," clause to sort rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"WHERE"})," clause to filter rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"LIMIT"})," or ",(0,n.jsx)(s.code,{children:"FETCH"})," clause to select a subset of rows from the table."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"GROUP BY"})," clause to group rows."]}),"\n",(0,n.jsxs)(s.li,{children:["Use the ",(0,n.jsx)(s.code,{children:"HAVING"})," clause to filter groups."]}),"\n",(0,n.jsxs)(s.li,{children:["Use joins such as ",(0,n.jsx)(s.code,{children:"INNER JOIN"}),", ",(0,n.jsx)(s.code,{children:"LEFT JOIN"}),", ",(0,n.jsx)(s.code,{children:"FULL OUTER JOIN"}),", ",(0,n.jsx)(s.code,{children:"CROSS JOIN"})," to join with other tables."]}),"\n",(0,n.jsxs)(s.li,{children:["Use ",(0,n.jsx)(s.code,{children:"UNION"}),", ",(0,n.jsx)(s.code,{children:"INTERSECT"})," and ",(0,n.jsx)(s.code,{children:"EXCEPT"})," to perform set operations."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"Note that SQL keywords are case insensitive. However, it is a good coding practice to write SQL keywords in uppercase for better readability of SQL code."}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, we'll focus on the basic usage of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The usage of other related clauses will be covered in subsequent tutorials."]}),"\n",(0,n.jsx)(s.h2,{id:"postgresql-select-examples",children:"PostgreSQL SELECT Examples"}),"\n",(0,n.jsxs)(s.p,{children:["Let's look at some examples of using PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements."]}),"\n",(0,n.jsxs)(s.p,{children:["We'll use the ",(0,n.jsx)(s.code,{children:"customer"})," table from the ",(0,n.jsx)(s.code,{children:"PostgreSQL Sakila"})," sample database for the demonstration."]}),"\n",(0,n.jsx)(s.h3,{id:"query-one-column-with-postgresql-select",children:"Query One Column with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement finds all customer first names from the ",(0,n.jsx)(s.code,{children:"customer"})," table:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT first_name FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name\n------------ \nMARY\nPATRICIA\nLINDA\nBARBARA\nELIZABETH\nJENNIFER\nMARIA \nSUSAN\nMARGARET\nDOROTHY\n"})}),"\n",(0,n.jsxs)(s.p,{children:["Note that we added a semicolon (;) at the end of the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The semicolon is not part of the SQL statement. It is used to signal the end of the SQL statement to PostgreSQL. Semicolon is also used to separate two SQL statements."]}),"\n",(0,n.jsx)(s.h3,{id:"query-multiple-columns-with-postgresql-select",children:"Query Multiple Columns with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to know the customer's first name, last name, and email, you can specify these column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause as shown in the following query:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name,\n last_name,\n email\nFROM\n customer; \n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"first_name | last_name | email \n------------+-----------+-------------------------------------\nMARY | SMITH | MARY.SMITH@sakilacustomer.org \nPATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org\nLINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org \nBARBARA | JONES | BARBARA.JONES@sakilacustomer.org \nELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org \nJENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org \nMARIA | MILLER | MARIA.MILLER@sakilacustomer.org \nSUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org \nMARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org \nDOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org\n"})}),"\n",(0,n.jsx)(s.h3,{id:"query-all-columns-from-a-table-with-postgresql-select",children:"Query All Columns from a Table with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you want to find all columns from the ",(0,n.jsx)(s.code,{children:"customer"})," table using the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement, use the following statement:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT * FROM customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" customer_id | store_id | first_name | last_name | email | address_id | activebool | create_date | last_update | active \n-------------+----------+------------+-----------+-------------------------------------+------------+------------+-------------+---------------------+---------\n 1 | 1 | MARY | SMITH | MARY.SMITH@sakilacustomer.org | 5 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 2 | 1 | PATRICIA | JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org | 6 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 3 | 1 | LINDA | WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org | 7 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 4 | 2 | BARBARA | JONES | BARBARA.JONES@sakilacustomer.org | 8 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 5 | 1 | ELIZABETH | BROWN | ELIZABETH.BROWN@sakilacustomer.org | 9 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 6 | 2 | JENNIFER | DAVIS | JENNIFER.DAVIS@sakilacustomer.org | 10 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 7 | 1 | MARIA | MILLER | MARIA.MILLER@sakilacustomer.org | 11 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 8 | 2 | SUSAN | WILSON | SUSAN.WILSON@sakilacustomer.org | 12 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 9 | 2 | MARGARET | MOORE | MARGARET.MOORE@sakilacustomer.org | 13 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n 10 | 1 | DOROTHY | TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org | 14 | t | 2006-02-14 | 2006-02-15 04:57:20 | 1\n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we used the asterisk (",(0,n.jsxs)(s.em,{children:[") in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause which is shorthand for all columns. The asterisk ("]}),") allows us to type less without having to list out all column names in the ",(0,n.jsx)(s.code,{children:"customer"})," table."]}),"\n",(0,n.jsxs)(s.p,{children:["However, using asterisk (*) in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements is not a good practice for the following reasons:"]}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsxs)(s.p,{children:["Database performance. Assuming you have a table with lots of columns and large amounts of data, a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement with asterisk (*) shorthand will select data from all columns of the table which may not be necessary for the application."]}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Application performance. Retrieving unnecessary data from the database increases traffic between the database server and application server. Hence your application's response time may be slower and less scalable."}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["For these reasons, it is best to explicitly specify column names in the ",(0,n.jsx)(s.code,{children:"SELECT"})," clause to only get required data from the database."]}),"\n",(0,n.jsx)(s.p,{children:"You should only use the asterisk (*) shorthand for adhoc queries that check database data."}),"\n",(0,n.jsx)(s.h3,{id:"query-with-expressions-in-postgresql-select",children:"Query with Expressions in PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["In addition to column names, you can also use expressions in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following example uses a ",(0,n.jsx)(s.code,{children:"SELECT"})," statement to return the full name and email of all customers:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT\n first_name || ' ' || last_name, \n email\nFROM\n customer;\n"})}),"\n",(0,n.jsx)(s.p,{children:"Here is partial output:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:" ?column? | email \n-------------------+-------------------------------------\n MARY SMITH | MARY.SMITH@sakilacustomer.org\n PATRICIA JOHNSON | PATRICIA.JOHNSON@sakilacustomer.org \n LINDA WILLIAMS | LINDA.WILLIAMS@sakilacustomer.org\n BARBARA JONES | BARBARA.JONES@sakilacustomer.org\n ELIZABETH BROWN | ELIZABETH.BROWN@sakilacustomer.org\n JENNIFER DAVIS | JENNIFER.DAVIS@sakilacustomer.org\n MARIA MILLER | MARIA.MILLER@sakilacustomer.org\n SUSAN WILSON | SUSAN.WILSON@sakilacustomer.org\n MARGARET MOORE | MARGARET.MOORE@sakilacustomer.org\n DOROTHY TAYLOR | DOROTHY.TAYLOR@sakilacustomer.org \n"})}),"\n",(0,n.jsxs)(s.p,{children:["In this example, we concatenated each customer's first name, space and last name using the string concatenation operator ",(0,n.jsx)(s.code,{children:"||"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"calculate-expressions-with-postgresql-select",children:"Calculate Expressions with PostgreSQL SELECT"}),"\n",(0,n.jsxs)(s.p,{children:["If you just want to calculate the result of an expression, you can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in the ",(0,n.jsx)(s.code,{children:"SELECT"})," statement. The following ",(0,n.jsx)(s.code,{children:"SELECT"})," statement is used to calculate the result of ",(0,n.jsx)(s.code,{children:"5 * 3"}),":"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-sql",children:"SELECT 5 * 3;\n"})}),"\n",(0,n.jsx)(s.p,{children:"The output is:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{children:"?column?\n----------\n 15\n"})}),"\n",(0,n.jsx)(s.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsxs)(s.p,{children:["In this tutorial, you learned how to use the basic form of PostgreSQL ",(0,n.jsx)(s.code,{children:"SELECT"})," statements to query data from a single table. You can omit the ",(0,n.jsx)(s.code,{children:"FROM"})," clause in ",(0,n.jsx)(s.code,{children:"SELECT"})," statements if you do not need to query data from any table."]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,s,t)=>{t.d(s,{Z:()=>r,a:()=>l});var n=t(959);const o={},a=n.createContext(o);function l(e){const s=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),n.createElement(a.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/d3d78a2c.d34caca8.js b/assets/js/d3d78a2c.1b3d766b.js
similarity index 93%
rename from assets/js/d3d78a2c.d34caca8.js
rename to assets/js/d3d78a2c.1b3d766b.js
index 315a2aeec8..acc5314d0b 100644
--- a/assets/js/d3d78a2c.d34caca8.js
+++ b/assets/js/d3d78a2c.1b3d766b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3934],{686:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>r,contentTitle:()=>a,default:()=>c,frontMatter:()=>n,metadata:()=>l,toc:()=>d});var i=t(1527),s=t(7214);const n={title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},a=void 0,l={permalink:"/illa-website/blog/tooljet-vs-appsmith",source:"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md",title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",date:"2024-01-23T10:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"tooljet",permalink:"/illa-website/blog/tags/tooljet"},{label:"appsmith",permalink:"/illa-website/blog/tags/appsmith"},{label:"retool",permalink:"/illa-website/blog/tags/retool"}],readingTime:7.11,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},unlisted:!1,prevItem:{title:"Appsmith vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/appsmith-vs-retool"},nextItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},relatedPosts:[{title:"Tooljet vs Retool: Which open-source low-code platform is better?",description:"The demand for efficient and easy-to-use internal tools is on the rise, and low-code platforms have emerged as the go-to solution for businesses.",permalink:"/illa-website/blog/tooljet-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.83,date:"2024-01-23T10:00:00.000Z"},{title:"Appsmith vs Retool: Which open-source low-code platform is better?",description:"In the ever-evolving landscape of low-code development platforms, Appsmith and Retool have emerged as strong contenders, each offering unique features and capabilities.",permalink:"/illa-website/blog/appsmith-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.435,date:"2024-01-23T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"ILLA Cloud: The best software development tool",id:"illa-cloud-the-best-software-development-tool",level:2},{value:"Tooljet and Appsmith are two popular software development tools.",id:"tooljet-and-appsmith-are-two-popular-software-development-tools",level:2},{value:"Tooljet - better for those who want more control over their project",id:"tooljet---better-for-those-who-want-more-control-over-their-project",level:2},{value:"Pros of Tooljet:",id:"pros-of-tooljet",level:3},{value:"Cons of Tooljet:",id:"cons-of-tooljet",level:3},{value:"Appsmith - more user-friendly",id:"appsmith---more-user-friendly",level:2},{value:"Pros of Appsmith:",id:"pros-of-appsmith",level:3},{value:"Cons of Appsmith:",id:"cons-of-appsmith",level:3},{value:"ILLA Cloud offers the best of both worlds",id:"illa-cloud-offers-the-best-of-both-worlds",level:2},{value:"Key features of ILLA",id:"key-features-of-illa",level:3},{value:"Upgraded ILLA features",id:"upgraded-illa-features",level:3},{value:"Responsive UI library to meet your needs",id:"responsive-ui-library-to-meet-your-needs",level:3},{value:"Conclusion",id:"conclusion",level:2}];function p(e){const o={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.p,{children:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option. Both are open-source platforms with various features to choose from, but they each have their own strengths and weaknesses. This blog post will compare Tooljet and Appsmith to help you decide which is suitable for your needs."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet is excellent for those who prefer working with visual elements and drag-and-drop tools. Its user interface allows you to quickly create applications by simply dragging and dropping different components into place, making it easy and fast to build applications from the ground up. Additionally, Tooljet has powerful management features that allow you to collaborate with other users in real-time and monitor project progress."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith is an excellent option for developers who want more control over their applications. It offers a wide range of great features, such as API integration, triggers, and scripts that can add complex functionality to your apps. Moreover, Appsmith also provides an intuitive code editor, making it easy to write custom code in your projects if needed."}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-the-best-software-development-tool",children:"ILLA Cloud: The best software development tool"}),"\n",(0,i.jsxs)(o.p,{children:[(0,i.jsx)(o.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(o.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(o.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/illa.png",alt:"illa"})}),"\n",(0,i.jsx)(o.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet-and-appsmith-are-two-popular-software-development-tools",children:"Tooljet and Appsmith are two popular software development tools."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet and Appsmith are two extremely powerful software development tools that enable developers to create applications with data sources quickly and efficiently without too much hand coding. Both tools use intuitive drag-and-drop elements, code tools, data connectors, and a visual development process to help streamline business process management."}),"\n",(0,i.jsx)(o.p,{children:"With their extensive feature sets, both Tooljet and Appsmith have successfully served many developers as they continue to rapidly develop data-driven applications. They prove time and time again that they are essential tools for any software developer with coding knowledge looking to create advanced data-driven applications in just a few simple steps."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet---better-for-those-who-want-more-control-over-their-project",children:"Tooljet - better for those who want more control over their project"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/tooljet.png",alt:"tooljet"})}),"\n",(0,i.jsx)(o.p,{children:"Both Tooljet and Appsmith are powerful for citizen developers to do rapid application development. Tooljet provides flexibility with a more hands-on approach, allowing business users the control they need to create total admin panels with custom UI components."}),"\n",(0,i.jsx)(o.p,{children:"It offers an intuitive user interface that allows users to rapidly design, develop, and manage applications through a series of drag-and-drop tools, visual elements, and data sources. Beyond its easy UI, Tooljet also boasts powerful features such as real-time collaboration, comprehensive project management capabilities, and built-in components."}),"\n",(0,i.jsx)(o.p,{children:"This comprehensive suite of features makes it easier for developers to quickly build robust apps without worrying about coding from scratch. Tooljet also supports various coding languages, including Java, JavaScript, Python, and Ruby, giving developers even more freedom when creating custom applications. Additionally, Tooljet has extensive documentation for users looking for additional support when working on their projects."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-tooljet",children:"Pros of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Intuitive and easy-to-use user interface that makes it simple to create applications quickly with drag-and-drop tools"}),"\n",(0,i.jsx)(o.li,{children:"Powerful management features to help collaborate with other users in real-time and monitor project progress"}),"\n",(0,i.jsx)(o.li,{children:"Built-in analytics and reporting tools to measure the performance, usage, and reliability of applications"}),"\n",(0,i.jsx)(o.li,{children:"A feature-rich platform that supports webhooks, API integration, and custom code for added complexity"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-tooljet",children:"Cons of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"The visual approach means it can be difficult to troubleshoot problems without an understanding of the underlying code"}),"\n",(0,i.jsx)(o.li,{children:"Visual elements are limited, which may not provide enough flexibility for more complex projects"}),"\n",(0,i.jsx)(o.li,{children:"Limited support for third-party integrations, which could restrict the use cases for certain applications"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"appsmith---more-user-friendly",children:"Appsmith - more user-friendly"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith.png",alt:"appsmith"})}),"\n",(0,i.jsx)(o.p,{children:"On the other hand, Appsmith is ideal for those who don\u2019t have coding experience but still want to craft an app - it makes app development more accessible than ever with user-friendly tools that require no technical knowledge. Appsmith is an intuitive, user-friendly low-code platform for non-technical users to build robust data-driven applications quickly. With a simple drag-and-drop interface, you can easily create custom UI components and manage your projects with comprehensive project management capabilities."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith also offers advanced security features such as role-based access control to ensure that only authorized personnel access sensitive information. Additionally, Appsmith integrates with third-party services and supports webhooks, API integration, and custom code, which makes it a great choice for creating robust applications without the need to code from scratch."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-appsmith",children:"Pros of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Highly customizable features so developers can add complex functionality to their apps easily"}),"\n",(0,i.jsx)(o.li,{children:"Intuitive code editor makes it easy to write custom code into your projects if needed"}),"\n",(0,i.jsx)(o.li,{children:"Supports multiple programming languages such as JavaScript, HTML5, CSS3, TypeScript, etc."}),"\n",(0,i.jsx)(o.li,{children:"Flexible API integration allows users to connect various services together quickly and securely"}),"\n",(0,i.jsx)(o.li,{children:"A wide range of predefined templates and components make it easier to create new applications from scratch"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-appsmith",children:"Cons of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Not as beginner-friendly compared to other low-code platforms, which could limit its usefulness for certain users"}),"\n",(0,i.jsx)(o.li,{children:"Code changes can be tricky as they require manual adjustments every time they are made"}),"\n",(0,i.jsx)(o.li,{children:"More expensive than Tooljet, which may not make it a viable option for some budgets"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-offers-the-best-of-both-worlds",children:"ILLA Cloud offers the best of both worlds"}),"\n",(0,i.jsx)(o.p,{children:"ILLA is one of the fastest platforms for internal tool development. It saves developers precious time on web design and other aspects of their job. One of the main reasons developers are increasingly choosing ILLA is the library. The platform has conjured a rich collection of code components that you can simply drag and drop and build complex applications within minutes."}),"\n",(0,i.jsx)(o.p,{children:"You can also use application programming interfaces to join ILLA with a database of your choice. The platform can excellently integrate back-end and front-end data. As a result, developers can make vast information interactions possible with basic data calls."}),"\n",(0,i.jsx)(o.p,{children:"Any developer will love ILLA for two reasons- freedom and the chance to work simultaneously with other developers. Firstly, developers can write JavaScript wherever they want. This permits more flexibility in their job and increased variety in results."}),"\n",(0,i.jsx)(o.p,{children:"Secondly, developers can share links in ILLA Builder with other professionals in real time. Consequently, they can edit and comment on each other\u2019s work as they go along. In other words, developers get to work in a fun and collaborative workspace. Naturally, this yields faster and improved results."}),"\n",(0,i.jsx)(o.p,{children:"Lastly, developers can always carry their work with them when using ILLA cloud. Just one click from any device will give them access to the cloud and bring them to ILLA\u2019s user interface."}),"\n",(0,i.jsx)(o.h3,{id:"key-features-of-illa",children:"Key features of ILLA"}),"\n",(0,i.jsx)(o.p,{children:"Here are the key features of ILLA you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"ILLA has a ready-to-use library for React components."}),"\n",(0,i.jsx)(o.li,{children:"Most amazingly, the ILLA design tool has a typescript typing feature and supports predictable static typing."}),"\n",(0,i.jsx)(o.li,{children:"ILLA Design provides quick and easy import, which helps in improving developers\u2019 productivity."}),"\n",(0,i.jsx)(o.li,{children:"You can access beautifully designed and powerful themes and components."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"upgraded-illa-features",children:"Upgraded ILLA features"}),"\n",(0,i.jsx)(o.p,{children:"Here are some upgraded features of ILLA that you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Quick integration with any data source"}),"\n",(0,i.jsx)(o.li,{children:"You can connect ILLA to any mainstream database or any other data source. This tool allows you to get data from the backend using front-end components."}),"\n",(0,i.jsx)(o.li,{children:"Real-time collaboration for enhanced efficiency"}),"\n",(0,i.jsx)(o.li,{children:"ILLA Builder allows developers to work collaboratively on a project. They can create and share links to different developers to co-edit their tools and communicate with other team members in real time."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"responsive-ui-library-to-meet-your-needs",children:"Responsive UI library to meet your needs"}),"\n",(0,i.jsx)(o.p,{children:"ILLA Builder also has numerous components to meet every developer\u2019s needs efficiently. So, developers can access the drag-and-drop builder to develop their desired internal tools quickly."}),"\n",(0,i.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(o.p,{children:"In conclusion, Tooljet and Appsmith are both excellent low-code platforms that can help you build applications quickly and efficiently. However, they each have their own strengths and weaknesses, so it\u2019s important to consider your needs before deciding which one is right for you. If you\u2019re looking for a more hands-on approach with powerful management features, then Tooljet may be the better option for you. On the other hand, if you want a user-friendly platform that doesn\u2019t require any coding experience, then Appsmith may be the better choice. Ultimately, it all comes down to what type of developer you are and what type of application you want to build."})]})}function c(e={}){const{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>l,a:()=>a});var i=t(959);const s={},n=i.createContext(s);function a(e){const o=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function l(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(n.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3934],{686:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>r,contentTitle:()=>a,default:()=>c,frontMatter:()=>n,metadata:()=>l,toc:()=>d});var i=t(1527),s=t(7214);const n={title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},a=void 0,l={permalink:"/illa-website/blog/tooljet-vs-appsmith",source:"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md",title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",date:"2024-01-23T10:00:00.000Z",formattedDate:"January 23, 2024",tags:[{label:"tooljet",permalink:"/illa-website/blog/tags/tooljet"},{label:"appsmith",permalink:"/illa-website/blog/tags/appsmith"},{label:"retool",permalink:"/illa-website/blog/tags/retool"}],readingTime:7.11,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Tooljet vs Appsmitm: Which open-source low-code platform is better?",tags:["tooljet","appsmith","retool"],slug:"tooljet-vs-appsmith",description:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith-tooljet.webp",date:"2024-01-23T10:00"},unlisted:!1,prevItem:{title:"Appsmith vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/appsmith-vs-retool"},nextItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},relatedPosts:[{title:"Appsmith vs Retool: Which open-source low-code platform is better?",description:"In the ever-evolving landscape of low-code development platforms, Appsmith and Retool have emerged as strong contenders, each offering unique features and capabilities.",permalink:"/illa-website/blog/appsmith-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.435,date:"2024-01-23T10:00:00.000Z"},{title:"Tooljet vs Retool: Which open-source low-code platform is better?",description:"The demand for efficient and easy-to-use internal tools is on the rise, and low-code platforms have emerged as the go-to solution for businesses.",permalink:"/illa-website/blog/tooljet-vs-retool",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.83,date:"2024-01-23T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},d=[{value:"ILLA Cloud: The best software development tool",id:"illa-cloud-the-best-software-development-tool",level:2},{value:"Tooljet and Appsmith are two popular software development tools.",id:"tooljet-and-appsmith-are-two-popular-software-development-tools",level:2},{value:"Tooljet - better for those who want more control over their project",id:"tooljet---better-for-those-who-want-more-control-over-their-project",level:2},{value:"Pros of Tooljet:",id:"pros-of-tooljet",level:3},{value:"Cons of Tooljet:",id:"cons-of-tooljet",level:3},{value:"Appsmith - more user-friendly",id:"appsmith---more-user-friendly",level:2},{value:"Pros of Appsmith:",id:"pros-of-appsmith",level:3},{value:"Cons of Appsmith:",id:"cons-of-appsmith",level:3},{value:"ILLA Cloud offers the best of both worlds",id:"illa-cloud-offers-the-best-of-both-worlds",level:2},{value:"Key features of ILLA",id:"key-features-of-illa",level:3},{value:"Upgraded ILLA features",id:"upgraded-illa-features",level:3},{value:"Responsive UI library to meet your needs",id:"responsive-ui-library-to-meet-your-needs",level:3},{value:"Conclusion",id:"conclusion",level:2}];function p(e){const o={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.p,{children:"If you\u2019re considering using a low-code development platform to build applications, you may wonder whether Tooljet or Appsmith is the better option. Both are open-source platforms with various features to choose from, but they each have their own strengths and weaknesses. This blog post will compare Tooljet and Appsmith to help you decide which is suitable for your needs."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet is excellent for those who prefer working with visual elements and drag-and-drop tools. Its user interface allows you to quickly create applications by simply dragging and dropping different components into place, making it easy and fast to build applications from the ground up. Additionally, Tooljet has powerful management features that allow you to collaborate with other users in real-time and monitor project progress."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith is an excellent option for developers who want more control over their applications. It offers a wide range of great features, such as API integration, triggers, and scripts that can add complex functionality to your apps. Moreover, Appsmith also provides an intuitive code editor, making it easy to write custom code in your projects if needed."}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-the-best-software-development-tool",children:"ILLA Cloud: The best software development tool"}),"\n",(0,i.jsxs)(o.p,{children:[(0,i.jsx)(o.a,{href:"https://illacloud.com/",children:"ILLA Cloud"})," is an out-of-the-box low-code tool that allows quick construction of internal tools with simple JS, without the need to create new projects."]}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Web & App Admin Panel"}),"\n",(0,i.jsx)(o.li,{children:"Data Dashboard"}),"\n",(0,i.jsx)(o.li,{children:"Customized B2B Tools"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/illa.png",alt:"illa"})}),"\n",(0,i.jsx)(o.p,{children:"Compared to building with a component library, ILLA Cloud enables 10x faster tool construction and supports collaborative editing within teams."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet-and-appsmith-are-two-popular-software-development-tools",children:"Tooljet and Appsmith are two popular software development tools."}),"\n",(0,i.jsx)(o.p,{children:"Tooljet and Appsmith are two extremely powerful software development tools that enable developers to create applications with data sources quickly and efficiently without too much hand coding. Both tools use intuitive drag-and-drop elements, code tools, data connectors, and a visual development process to help streamline business process management."}),"\n",(0,i.jsx)(o.p,{children:"With their extensive feature sets, both Tooljet and Appsmith have successfully served many developers as they continue to rapidly develop data-driven applications. They prove time and time again that they are essential tools for any software developer with coding knowledge looking to create advanced data-driven applications in just a few simple steps."}),"\n",(0,i.jsx)(o.h2,{id:"tooljet---better-for-those-who-want-more-control-over-their-project",children:"Tooljet - better for those who want more control over their project"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/tooljet.png",alt:"tooljet"})}),"\n",(0,i.jsx)(o.p,{children:"Both Tooljet and Appsmith are powerful for citizen developers to do rapid application development. Tooljet provides flexibility with a more hands-on approach, allowing business users the control they need to create total admin panels with custom UI components."}),"\n",(0,i.jsx)(o.p,{children:"It offers an intuitive user interface that allows users to rapidly design, develop, and manage applications through a series of drag-and-drop tools, visual elements, and data sources. Beyond its easy UI, Tooljet also boasts powerful features such as real-time collaboration, comprehensive project management capabilities, and built-in components."}),"\n",(0,i.jsx)(o.p,{children:"This comprehensive suite of features makes it easier for developers to quickly build robust apps without worrying about coding from scratch. Tooljet also supports various coding languages, including Java, JavaScript, Python, and Ruby, giving developers even more freedom when creating custom applications. Additionally, Tooljet has extensive documentation for users looking for additional support when working on their projects."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-tooljet",children:"Pros of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Intuitive and easy-to-use user interface that makes it simple to create applications quickly with drag-and-drop tools"}),"\n",(0,i.jsx)(o.li,{children:"Powerful management features to help collaborate with other users in real-time and monitor project progress"}),"\n",(0,i.jsx)(o.li,{children:"Built-in analytics and reporting tools to measure the performance, usage, and reliability of applications"}),"\n",(0,i.jsx)(o.li,{children:"A feature-rich platform that supports webhooks, API integration, and custom code for added complexity"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-tooljet",children:"Cons of Tooljet:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"The visual approach means it can be difficult to troubleshoot problems without an understanding of the underlying code"}),"\n",(0,i.jsx)(o.li,{children:"Visual elements are limited, which may not provide enough flexibility for more complex projects"}),"\n",(0,i.jsx)(o.li,{children:"Limited support for third-party integrations, which could restrict the use cases for certain applications"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"appsmith---more-user-friendly",children:"Appsmith - more user-friendly"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/tooljet-vs-appsmith-vs-retool/appsmith.png",alt:"appsmith"})}),"\n",(0,i.jsx)(o.p,{children:"On the other hand, Appsmith is ideal for those who don\u2019t have coding experience but still want to craft an app - it makes app development more accessible than ever with user-friendly tools that require no technical knowledge. Appsmith is an intuitive, user-friendly low-code platform for non-technical users to build robust data-driven applications quickly. With a simple drag-and-drop interface, you can easily create custom UI components and manage your projects with comprehensive project management capabilities."}),"\n",(0,i.jsx)(o.p,{children:"Appsmith also offers advanced security features such as role-based access control to ensure that only authorized personnel access sensitive information. Additionally, Appsmith integrates with third-party services and supports webhooks, API integration, and custom code, which makes it a great choice for creating robust applications without the need to code from scratch."}),"\n",(0,i.jsx)(o.h3,{id:"pros-of-appsmith",children:"Pros of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Highly customizable features so developers can add complex functionality to their apps easily"}),"\n",(0,i.jsx)(o.li,{children:"Intuitive code editor makes it easy to write custom code into your projects if needed"}),"\n",(0,i.jsx)(o.li,{children:"Supports multiple programming languages such as JavaScript, HTML5, CSS3, TypeScript, etc."}),"\n",(0,i.jsx)(o.li,{children:"Flexible API integration allows users to connect various services together quickly and securely"}),"\n",(0,i.jsx)(o.li,{children:"A wide range of predefined templates and components make it easier to create new applications from scratch"}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"cons-of-appsmith",children:"Cons of Appsmith:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Not as beginner-friendly compared to other low-code platforms, which could limit its usefulness for certain users"}),"\n",(0,i.jsx)(o.li,{children:"Code changes can be tricky as they require manual adjustments every time they are made"}),"\n",(0,i.jsx)(o.li,{children:"More expensive than Tooljet, which may not make it a viable option for some budgets"}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"illa-cloud-offers-the-best-of-both-worlds",children:"ILLA Cloud offers the best of both worlds"}),"\n",(0,i.jsx)(o.p,{children:"ILLA is one of the fastest platforms for internal tool development. It saves developers precious time on web design and other aspects of their job. One of the main reasons developers are increasingly choosing ILLA is the library. The platform has conjured a rich collection of code components that you can simply drag and drop and build complex applications within minutes."}),"\n",(0,i.jsx)(o.p,{children:"You can also use application programming interfaces to join ILLA with a database of your choice. The platform can excellently integrate back-end and front-end data. As a result, developers can make vast information interactions possible with basic data calls."}),"\n",(0,i.jsx)(o.p,{children:"Any developer will love ILLA for two reasons- freedom and the chance to work simultaneously with other developers. Firstly, developers can write JavaScript wherever they want. This permits more flexibility in their job and increased variety in results."}),"\n",(0,i.jsx)(o.p,{children:"Secondly, developers can share links in ILLA Builder with other professionals in real time. Consequently, they can edit and comment on each other\u2019s work as they go along. In other words, developers get to work in a fun and collaborative workspace. Naturally, this yields faster and improved results."}),"\n",(0,i.jsx)(o.p,{children:"Lastly, developers can always carry their work with them when using ILLA cloud. Just one click from any device will give them access to the cloud and bring them to ILLA\u2019s user interface."}),"\n",(0,i.jsx)(o.h3,{id:"key-features-of-illa",children:"Key features of ILLA"}),"\n",(0,i.jsx)(o.p,{children:"Here are the key features of ILLA you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"ILLA has a ready-to-use library for React components."}),"\n",(0,i.jsx)(o.li,{children:"Most amazingly, the ILLA design tool has a typescript typing feature and supports predictable static typing."}),"\n",(0,i.jsx)(o.li,{children:"ILLA Design provides quick and easy import, which helps in improving developers\u2019 productivity."}),"\n",(0,i.jsx)(o.li,{children:"You can access beautifully designed and powerful themes and components."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"upgraded-illa-features",children:"Upgraded ILLA features"}),"\n",(0,i.jsx)(o.p,{children:"Here are some upgraded features of ILLA that you must know:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"Quick integration with any data source"}),"\n",(0,i.jsx)(o.li,{children:"You can connect ILLA to any mainstream database or any other data source. This tool allows you to get data from the backend using front-end components."}),"\n",(0,i.jsx)(o.li,{children:"Real-time collaboration for enhanced efficiency"}),"\n",(0,i.jsx)(o.li,{children:"ILLA Builder allows developers to work collaboratively on a project. They can create and share links to different developers to co-edit their tools and communicate with other team members in real time."}),"\n"]}),"\n",(0,i.jsx)(o.h3,{id:"responsive-ui-library-to-meet-your-needs",children:"Responsive UI library to meet your needs"}),"\n",(0,i.jsx)(o.p,{children:"ILLA Builder also has numerous components to meet every developer\u2019s needs efficiently. So, developers can access the drag-and-drop builder to develop their desired internal tools quickly."}),"\n",(0,i.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(o.p,{children:"In conclusion, Tooljet and Appsmith are both excellent low-code platforms that can help you build applications quickly and efficiently. However, they each have their own strengths and weaknesses, so it\u2019s important to consider your needs before deciding which one is right for you. If you\u2019re looking for a more hands-on approach with powerful management features, then Tooljet may be the better option for you. On the other hand, if you want a user-friendly platform that doesn\u2019t require any coding experience, then Appsmith may be the better choice. Ultimately, it all comes down to what type of developer you are and what type of application you want to build."})]})}function c(e={}){const{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>l,a:()=>a});var i=t(959);const s={},n=i.createContext(s);function a(e){const o=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function l(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(n.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/e55440e4.400a08f5.js b/assets/js/e55440e4.400a08f5.js
deleted file mode 100644
index f2f670d803..0000000000
--- a/assets/js/e55440e4.400a08f5.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3845],{3610:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var n=o(1527),l=o(7214);const a={slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},i=void 0,r={permalink:"/illa-website/blog/launch-flow",source:"@site/blog/launch-flow/launch-flow.md",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:1.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},nextItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"}]},s={authorsImageUrls:[void 0]},c=[{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Integrate Everything",id:"integrate-everything",level:2},{value:"Some examples",id:"some-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,l.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Hi everyone, I'm Owen, and we are a startup company focused on low-code solutions. Our team is quite small, consisting of only 7 people."}),"\n",(0,n.jsx)(t.p,{children:"Today, we launched our new product: ILLA Flow."}),"\n",(0,n.jsxs)(t.p,{children:["Website: ",(0,n.jsx)(t.a,{href:"https://illacloud.com",children:"https://illacloud.com"})," (You can find it after login, at the left of dashboard -> Flow)"]}),"\n",(0,n.jsx)(t.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping, thereby enabling connections and scheduling with various databases and APIs."}),"\n",(0,n.jsx)(t.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,n.jsx)(t.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/flow.jpeg",alt:"flow"})}),"\n",(0,n.jsx)(t.h2,{id:"integrate-everything",children:"Integrate Everything"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow can connect to any"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"RestAPI"}),"\n",(0,n.jsx)(t.li,{children:"MySQL"}),"\n",(0,n.jsx)(t.li,{children:"MariaDB,"}),"\n",(0,n.jsx)(t.li,{children:"PostgreSQL"}),"\n",(0,n.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/resource.jpeg",alt:"resource"})}),"\n",(0,n.jsx)(t.p,{children:"We will strive to expand support for more connectivity features."}),"\n",(0,n.jsx)(t.h2,{id:"some-examples",children:"Some examples"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,n.jsx)(t.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,n.jsx)(t.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,n.jsx)(t.li,{children:"Book a meeting room every day"}),"\n",(0,n.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,n.jsx)(t.li,{children:"Build a CI/CD report system"}),"\n",(0,n.jsx)(t.li,{children:"Send email when some warning occurs"}),"\n",(0,n.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"ILLA Flow supports scheduled triggers and the use of Webhooks for triggering. As a low-code tool, ILLA also enables the construction of panels to drive multiple workflows, forming a complete business process. Currently, the product is entirely free and requires no costs."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/dashboard.jpeg",alt:"dashboard"})}),"\n",(0,n.jsx)(t.p,{children:"Our initial intention in creating this product was to address the lack of developer-friendly workflow products on the market. We aim to build a complete low-code matrix product to provide a better experience. Moreover, we have achieved multi-person real-time collaboration, similar to the experience of editing in Figma, ensuring that a team can edit workflows together."}),"\n",(0,n.jsx)(t.p,{children:"As an early-stage product, there are still many features that are not perfect, and we hope everyone can provide valuable feedback to help us optimize it."})]})}function u(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>r,a:()=>i});var n=o(959);const l={},a=n.createContext(l);function i(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/e55440e4.48c53467.js b/assets/js/e55440e4.48c53467.js
new file mode 100644
index 0000000000..bf135bf23c
--- /dev/null
+++ b/assets/js/e55440e4.48c53467.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[3845],{3610:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>s,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var n=t(1527),l=t(7214);const i={slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},a=void 0,r={permalink:"/illa-website/blog/launch-flow",source:"@site/blog/launch-flow/launch-flow.md",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"workflow",permalink:"/illa-website/blog/tags/workflow"}],readingTime:1.91,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"launch-flow",title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/launch-flow/cover.png",tags:["workflow"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"Best Open-Source Low-Code Platform for Building Internal Tools",permalink:"/illa-website/blog/internal-tool"},nextItem:{title:"5 Best Low Code Platform in 2024",permalink:"/illa-website/blog/best-low-code-platform"},relatedPosts:[{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",description:"Slack, as a primary communication tool for many people's work, has become one of the essential tools that must be opened daily.",permalink:"/illa-website/blog/automate-send-to-slack",formattedDate:"January 17, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.275,date:"2024-01-17T10:00:00.000Z"},{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"}],authorPosts:[{title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",permalink:"/illa-website/blog/low-code-crm",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.76,date:"2024-01-04T10:00:00.000Z"},{title:"Build core app dashboard at lightning speed",description:"The Core App Dashboard is the nerve center of any sophisticated application.",permalink:"/illa-website/blog/core-app-dashboard-2",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:7.445,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"}]},s={authorsImageUrls:[void 0]},c=[{value:"ILLA Flow",id:"illa-flow",level:2},{value:"Integrate Everything",id:"integrate-everything",level:2},{value:"Some examples",id:"some-examples",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const o={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,l.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"Hi everyone, I'm Owen, and we are a startup company focused on low-code solutions. Our team is quite small, consisting of only 7 people."}),"\n",(0,n.jsx)(o.p,{children:"Today, we launched our new product: ILLA Flow."}),"\n",(0,n.jsxs)(o.p,{children:["Website: ",(0,n.jsx)(o.a,{href:"https://illacloud.com",children:"https://illacloud.com"})," (You can find it after login, at the left of dashboard -> Flow)"]}),"\n",(0,n.jsx)(o.h2,{id:"illa-flow",children:"ILLA Flow"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping, thereby enabling connections and scheduling with various databases and APIs."}),"\n",(0,n.jsx)(o.p,{children:"You can build your own workflow through a drag-and-drop interface, and then execute your workflow by scheduling triggers or Webhook triggers."}),"\n",(0,n.jsx)(o.p,{children:"The smooth drag-and-drop experience allows you to quickly build workflows without worrying about any integration issues. The entire system is driven by JavaScript, ensuring flexibility while also being developer-friendly."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/flow.jpeg",alt:"flow"})}),"\n",(0,n.jsx)(o.h2,{id:"integrate-everything",children:"Integrate Everything"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow can connect to any"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"RestAPI"}),"\n",(0,n.jsx)(o.li,{children:"MySQL"}),"\n",(0,n.jsx)(o.li,{children:"MariaDB,"}),"\n",(0,n.jsx)(o.li,{children:"PostgreSQL"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/resource.jpeg",alt:"resource"})}),"\n",(0,n.jsx)(o.p,{children:"We will strive to expand support for more connectivity features."}),"\n",(0,n.jsx)(o.h2,{id:"some-examples",children:"Some examples"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow supports multiple trigger types, including scheduled triggers and Webhook triggers."}),"\n",(0,n.jsx)(o.p,{children:"We use ILLA Flow to do lots of things, like:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Send a message to Slack when a new user registers"}),"\n",(0,n.jsx)(o.li,{children:"Report the number of stars on GitHub every day"}),"\n",(0,n.jsx)(o.li,{children:"Book a meeting room every day"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"Our engineers use ILLA Flow to automate many tasks, like:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Read some business data from databases and send to Slack every day"}),"\n",(0,n.jsx)(o.li,{children:"Build a CI/CD report system"}),"\n",(0,n.jsx)(o.li,{children:"Send email when some warning occurs"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(o.p,{children:"ILLA Flow supports scheduled triggers and the use of Webhooks for triggering. As a low-code tool, ILLA also enables the construction of panels to drive multiple workflows, forming a complete business process. Currently, the product is entirely free and requires no costs."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/launch-flow/dashboard.jpeg",alt:"dashboard"})}),"\n",(0,n.jsx)(o.p,{children:"Our initial intention in creating this product was to address the lack of developer-friendly workflow products on the market. We aim to build a complete low-code matrix product to provide a better experience. Moreover, we have achieved multi-person real-time collaboration, similar to the experience of editing in Figma, ensuring that a team can edit workflows together."}),"\n",(0,n.jsx)(o.p,{children:"As an early-stage product, there are still many features that are not perfect, and we hope everyone can provide valuable feedback to help us optimize it."})]})}function u(e={}){const{wrapper:o}={...(0,l.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>r,a:()=>a});var n=t(959);const l={},i=n.createContext(l);function a(e){const o=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function r(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),n.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/eb5bf31c.1bdcdd2e.js b/assets/js/eb5bf31c.5ace8be1.js
similarity index 97%
rename from assets/js/eb5bf31c.1bdcdd2e.js
rename to assets/js/eb5bf31c.5ace8be1.js
index 29f3a515cc..b17d436f64 100644
--- a/assets/js/eb5bf31c.1bdcdd2e.js
+++ b/assets/js/eb5bf31c.5ace8be1.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[757],{4339:(e,o,s)=>{s.r(o),s.d(o,{assets:()=>d,contentTitle:()=>t,default:()=>c,frontMatter:()=>i,metadata:()=>r,toc:()=>l});var a=s(1527),n=s(7214);const i={title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},t=void 0,r={permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",source:"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md",title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",date:"2023-12-20T10:00:00.000Z",formattedDate:"December 20, 2023",tags:[{label:"redis",permalink:"/illa-website/blog/tags/redis"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:20.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},unlisted:!1,prevItem:{title:"Quickly create a personalized data dashboard for your boss",permalink:"/illa-website/blog/build-dashboard"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"}],authorPosts:[]},d={authorsImageUrls:[void 0]},l=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:",id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",level:3},{value:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"RedisInsight",id:"redisinsight",level:2},{value:"Some of the advantages of RedisInsight are:",id:"some-of-the-advantages-of-redisinsight-are",level:3},{value:"Some of the drawbacks of RedisInsight are:",id:"some-of-the-drawbacks-of-redisinsight-are",level:3},{value:"Redis Desktop Manager (RESP.app)",id:"redis-desktop-manager-respapp",level:2},{value:"Some of the advantages of Redis Desktop Manager are:",id:"some-of-the-advantages-of-redis-desktop-manager-are",level:3},{value:"Some of the drawbacks of Redis Desktop Manager are:",id:"some-of-the-drawbacks-of-redis-desktop-manager-are",level:3},{value:"Medis",id:"medis",level:2},{value:"Some of the advantages of Medis are:",id:"some-of-the-advantages-of-medis-are",level:3},{value:"Some of the drawbacks of Medis are:",id:"some-of-the-drawbacks-of-medis-are",level:3},{value:"To use Medis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Redis Commander",id:"redis-commander",level:2},{value:"Some of the advantages of Redis Commander are:",id:"some-of-the-advantages-of-redis-commander-are",level:3},{value:"Some of the drawbacks of Redis Commander are:",id:"some-of-the-drawbacks-of-redis-commander-are",level:3},{value:"Download Redis Commander from GitHub or npm.",id:"download-redis-commander-from-github-or-npm",level:3},{value:"Redsmin",id:"redsmin",level:2},{value:"Some of the advantages of Redsmin are:",id:"some-of-the-advantages-of-redsmin-are",level:3},{value:"Some of the drawbacks of Redsmin are:",id:"some-of-the-drawbacks-of-redsmin-are",level:3},{value:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Webdis",id:"webdis",level:2},{value:"Some of the advantages of Webdis are:",id:"some-of-the-advantages-of-webdis-are",level:3},{value:"Some of the drawbacks of Webdis are:",id:"some-of-the-drawbacks-of-webdis-are",level:3},{value:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const o={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2024 and how to use them. Find out why ILLA Cloud is the best Redis GUI tool in our opinion."}),"\n",(0,a.jsx)(o.p,{children:"Redis is a popular open-source, in-memory data structure store that can be used as a database, cache, message broker, and more. Redis supports various data types like strings, lists, sets, hashes, and streams. Redis also offers many features like transactions, replication, clustering, pub/sub, Lua scripting, and more."}),"\n",(0,a.jsx)(o.p,{children:"However, working with Redis can be challenging without a graphical user interface (GUI) to help you visualize and interact with your data. A Redis GUI tool can help you browse, filter, edit, and delete your Redis keys, run commands and queries, monitor performance and metrics, and more."}),"\n",(0,a.jsx)(o.p,{children:"Many Redis GUI tools are available in the market, each with its own features, pros and cons, and price. This blog post will review the top 7 Redis GUI tools in 2024 and compare them based on their functionality, usability, compatibility, and cost. We will also show you how to use ILLA Cloud, the best Redis GUI tool, to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. It is a powerful and flexible UI library for building web applications that connect to your databases and APIs. You can use ILLA Cloud to build anything from simple forms and tables to complex applications with advanced features."}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud supports Redis as one of its data sources. You can connect to your Redis server or cluster using ILLA Cloud and access your data using a graphical interface. You can also run commands and queries using SQL and JavaScript. You can use template syntax to inject dynamic values into your components and queries. You can also customize and control your components with JavaScript."}),"\n",(0,a.jsx)(o.h3,{id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",children:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use ILLA Cloud without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is cross-platform and cloud-based. You can use ILLA Cloud on any device and operating system. You can also deploy it on your own server or use the ILLA Cloud service."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple data sources. You can connect to various databases and APIs using ILLA Cloud, such as PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, AWS S3, and more. You can also integrate with any data source connected through APIs."}),"\n",(0,a.jsx)(o.li,{children:"It has a drag-and-drop interface. You can build a user interface for your application by dragging and dropping components like tables, charts, forms, buttons, and more. You don\u2019t need to write any HTML or CSS code."}),"\n",(0,a.jsx)(o.li,{children:"It has a rich set of components. You can use dozens of components in ILLA Cloud to meet your needs in different scenarios. You can also customize them with JavaScript."}),"\n",(0,a.jsx)(o.li,{children:"It supports JavaScript inside widgets, queries, and other components. Using JavaScript, you can add logic, transform data, and define complex workflows. You can also use template syntax to inject dynamic values into your components and queries."}),"\n",(0,a.jsx)(o.li,{children:"It has a collaborative feature. You can work with other developers on the same project by sharing links. You can also chat with them in real time and give feedback."}),"\n",(0,a.jsx)(o.li,{children:"It has a friendly community. You can join the Discord community of ILLA Cloud and get support from other users and developers. You can also share feedback, ask questions, and get updates."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the ILLA Cloud website."}),"\n",(0,a.jsx)(o.li,{children:"Create a new project and choose Redis as your data source."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Query tab on the top panel. You can write SQL or JavaScript in the editor. You can use template syntax to inject dynamic values into your queries. You can also use auto-completion and syntax highlighting features. You can run your queries by clicking the Run button or pressing Ctrl+Enter. You will see the results on the right panel. You can also export the results as CSV or JSON files."}),"\n",(0,a.jsx)(o.li,{children:"To build a user interface for your application, click on the Builder tab on the top panel. You will see a grid-style canvas where you can drag and drop components from the left panel. You can choose from various components like tables, charts, forms, buttons, etc. You can also customize and control your components with JavaScript. You can use template syntax to inject dynamic values into your components. You can also bind your components to your queries and data sources."}),"\n",(0,a.jsx)(o.li,{children:"To preview your application, click on the Preview button on the top right corner. You will see how your application looks and works in a browser. You can also test your components and queries and see the results."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using ILLA Cloud. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redisinsight",children:"RedisInsight"}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight is a desktop manager for Redis that provides an intuitive and efficient UI for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight allows you to browse and interact with Redis data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also explore the latest capabilities offered by Redis, such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redisinsight-are",children:"Some of the advantages of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and easy to use. You can download RedisInsight for free and install it on your Linux, Windows, or macOS machine. You can also check out the GitHub project and provide feedback."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use RedisInsight on any device and operating system. You can also connect to any Redis server or cluster using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also use the Workbench feature to run commands and queries using a Monaco Editor."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interactively work with complex data models such as documents, graphs, time series, etc. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redisinsight-are",children:"Some of the drawbacks of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not open-source. You cannot contribute to or modify the project according to your needs."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using RedisInsight."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"redis-desktop-manager-respapp",children:"Redis Desktop Manager (RESP.app)"}),"\n",(0,a.jsx)(o.p,{children:"Redis Desktop Manager is a cross-platform desktop GUI for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-desktop-manager-are",children:"Some of the advantages of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cross-platform and desktop-based. You can use Redis Desktop Manager on Linux, Windows, or macOS machines. You can also install it as a snap package or a docker image."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Desktop Manager. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Console feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-desktop-manager-are",children:"Some of the drawbacks of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redis Desktop Manager. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, etc."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Desktop Manager."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Desktop Manager."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"medis",children:"Medis"}),"\n",(0,a.jsx)(o.p,{children:"Medis is a beautiful and easy-to-use Mac database management application for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-medis-are",children:"Some of the advantages of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is beautiful and easy-to-use. Medis has a sleek and intuitive design that makes it easy to use. It also has dark mode support that makes it look even better."}),"\n",(0,a.jsx)(o.li,{children:"It is Mac-based and desktop-based. You can use Medis on any Mac machine. You can also install it from the Mac App Store or download it from GitHub."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Medis. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Terminal feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-medis-are",children:"Some of the drawbacks of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Medis. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It is only available for Mac. You cannot use Medis on other operating systems or devices."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Medis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Medis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Medis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Medis from the Mac App Store or GitHub."}),"\n",(0,a.jsx)(o.li,{children:"Install Medis on your Mac machine."}),"\n",(0,a.jsx)(o.li,{children:"Launch Medis and click on Add Connection button."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on CLI tab on the bottom panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Medis. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redis-commander",children:"Redis Commander"}),"\n",(0,a.jsx)(o.p,{children:"Redis Commander is a free and open-source Redis management tool written in Node.js. It allows you to connect to multiple Redis servers and clusters and manage your data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-commander-are",children:"Some of the advantages of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use Redis Commander without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is web-based and cross-platform. You can use Redis Commander on any device and operating system. You need to install it on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Commander. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-commander-are",children:"Some of the drawbacks of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very stable or reliable. Redis Commander may have bugs or issues affecting its performance or functionality. It may also crash or freeze sometimes."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Commander."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Commander."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"To use Redis Commander to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsx)(o.h3,{id:"download-redis-commander-from-github-or-npm",children:"Download Redis Commander from GitHub or npm."}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Install Redis Commander on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch Redis Commander by running redis-commander command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redis Commander through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:8081",children:"http://localhost:8081"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redis Commander. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redsmin",children:"Redsmin"}),"\n",(0,a.jsx)(o.p,{children:"Redsmin is a cloud-based Redis management service that provides a real-time interface for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"Redsmin allows you to browse and interact with Redis data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also monitor the performance and metrics of your Redis server or cluster using a dashboard."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redsmin-are",children:"Some of the advantages of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cloud-based and cross-platform. You can use Redsmin on any device and operating system. You must install a proxy daemon on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redsmin. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interact with complex data models such as documents, graphs, and time series. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n",(0,a.jsx)(o.li,{children:"It has a dashboard for monitoring performance and metrics. You can monitor your Redis server's or cluster's performance and metrics using a dashboard. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redsmin-are",children:"Some of the drawbacks of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redsmin. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It requires a proxy daemon installation. You must install a proxy daemon on your server to connect to Redsmin. This may affect your security or performance."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redsmin."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redsmin."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the Redsmin website."}),"\n",(0,a.jsx)(o.li,{children:"Download and install the proxy daemon on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch the proxy daemon by running redsmin command in your terminal."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redsmin API key when prompted."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redsmin through your web browser by entering ",(0,a.jsx)(o.a,{href:"https://app.redsmin.com",children:"https://app.redsmin.com"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n",(0,a.jsx)(o.li,{children:"To explore the latest capabilities offered by Redis, click on the corresponding tabs on the top panel. You can choose from various modules, such as RedisJSON, RedisGraph, and RedisTimeSeries. Using a web-based interface, you can query, visualize, and interact with complex data models."}),"\n",(0,a.jsx)(o.li,{children:"To monitor your Redis server's or cluster's performance and metrics, click on the Dashboard tab on the top panel. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redsmin. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"webdis",children:"Webdis"}),"\n",(0,a.jsx)(o.p,{children:"Webdis is a simple web server that exposes Redis commands as HTTP endpoints with JSON output. It allows you to connect to your Redis server and access your data using a web browser or any HTTP client. You can also run commands and queries using HTTP requests."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-webdis-are",children:"Some of the advantages of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is simple and lightweight. Webdis is a simple web server that requires no installation or configuration. It is also very fast and consumes little memory."}),"\n",(0,a.jsx)(o.li,{children:"It is open-source and free. You can use Webdis without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use Webdis on Linux, Windows, or macOS machines. You can also connect to any Redis server or cluster using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. You can browse and interact with Redis data using a web browser or any HTTP client. You can also display data in JSON format."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-webdis-are",children:"Some of the drawbacks of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very secure or reliable. Webdis does not support authentication or encryption for your Redis connection. It may also expose your Redis data to unauthorized access or modification."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a built-in CLI for running commands and queries. You have to use HTTP requests to run commands and queries on your Redis data."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Webdis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Webdis from GitHub or compile it from the source code."}),"\n",(0,a.jsx)(o.li,{children:"Launch Webdis by running webdis the command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Webdis through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:7379",children:"http://localhost:7379"})," in your address bar."]}),"\n",(0,a.jsxs)(o.li,{children:["Enter your Redis command or query in the URL path after the slash. For example, ",(0,a.jsx)(o.a,{href:"http://localhost:7379/GET/foo",children:"http://localhost:7379/GET/foo"})," will get the value of the key foo."]}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"See the result of your command or query in JSON format in your browser.\nThat\u2019s it! You have built a Redis GUI for your application using Webdis. You can now use it to access and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(o.p,{children:"In this blog post, we have reviewed the top 7 Redis GUI tools in 2024 and compared them based on their functionality, usability, compatibility, and cost. We have also shown you how to use each tool to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.p,{children:"We hope this blog post has helped you find the best Redis GUI tool for your needs and preferences. However, if you ask us, we recommend ILLA Cloud as the best Redis GUI tool."})]})}function c(e={}){const{wrapper:o}={...(0,n.a)(),...e.components};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},7214:(e,o,s)=>{s.d(o,{Z:()=>r,a:()=>t});var a=s(959);const n={},i=a.createContext(n);function t(e){const o=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function r(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:t(e.components),a.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[757],{4339:(e,o,s)=>{s.r(o),s.d(o,{assets:()=>d,contentTitle:()=>t,default:()=>c,frontMatter:()=>i,metadata:()=>r,toc:()=>l});var a=s(1527),n=s(7214);const i={title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},t=void 0,r={permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",source:"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md",title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",date:"2023-12-20T10:00:00.000Z",formattedDate:"December 20, 2023",tags:[{label:"redis",permalink:"/illa-website/blog/tags/redis"},{label:"gui",permalink:"/illa-website/blog/tags/gui"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:20.025,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{title:"Top 7 Redis GUI Tools in 2024",tags:["redis","gui","tools"],slug:"top-7-redis-gui-tools-in-2023",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/top-7-redis-gui-tools-in-2023/cover.png",date:"2023-12-20T10:00"},unlisted:!1,prevItem:{title:"Quickly create a personalized data dashboard for your boss",permalink:"/illa-website/blog/build-dashboard"},relatedPosts:[{title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",permalink:"/illa-website/blog/build-ai-tools",formattedDate:"January 19, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.2,date:"2024-01-19T10:00:00.000Z"},{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"}],authorPosts:[]},d={authorsImageUrls:[void 0]},l=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:",id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",level:3},{value:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"RedisInsight",id:"redisinsight",level:2},{value:"Some of the advantages of RedisInsight are:",id:"some-of-the-advantages-of-redisinsight-are",level:3},{value:"Some of the drawbacks of RedisInsight are:",id:"some-of-the-drawbacks-of-redisinsight-are",level:3},{value:"Redis Desktop Manager (RESP.app)",id:"redis-desktop-manager-respapp",level:2},{value:"Some of the advantages of Redis Desktop Manager are:",id:"some-of-the-advantages-of-redis-desktop-manager-are",level:3},{value:"Some of the drawbacks of Redis Desktop Manager are:",id:"some-of-the-drawbacks-of-redis-desktop-manager-are",level:3},{value:"Medis",id:"medis",level:2},{value:"Some of the advantages of Medis are:",id:"some-of-the-advantages-of-medis-are",level:3},{value:"Some of the drawbacks of Medis are:",id:"some-of-the-drawbacks-of-medis-are",level:3},{value:"To use Medis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Redis Commander",id:"redis-commander",level:2},{value:"Some of the advantages of Redis Commander are:",id:"some-of-the-advantages-of-redis-commander-are",level:3},{value:"Some of the drawbacks of Redis Commander are:",id:"some-of-the-drawbacks-of-redis-commander-are",level:3},{value:"Download Redis Commander from GitHub or npm.",id:"download-redis-commander-from-github-or-npm",level:3},{value:"Redsmin",id:"redsmin",level:2},{value:"Some of the advantages of Redsmin are:",id:"some-of-the-advantages-of-redsmin-are",level:3},{value:"Some of the drawbacks of Redsmin are:",id:"some-of-the-drawbacks-of-redsmin-are",level:3},{value:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Webdis",id:"webdis",level:2},{value:"Some of the advantages of Webdis are:",id:"some-of-the-advantages-of-webdis-are",level:3},{value:"Some of the drawbacks of Webdis are:",id:"some-of-the-drawbacks-of-webdis-are",level:3},{value:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:",id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",level:3},{value:"Conclusion",id:"conclusion",level:2}];function u(e){const o={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2024 and how to use them. Find out why ILLA Cloud is the best Redis GUI tool in our opinion."}),"\n",(0,a.jsx)(o.p,{children:"Redis is a popular open-source, in-memory data structure store that can be used as a database, cache, message broker, and more. Redis supports various data types like strings, lists, sets, hashes, and streams. Redis also offers many features like transactions, replication, clustering, pub/sub, Lua scripting, and more."}),"\n",(0,a.jsx)(o.p,{children:"However, working with Redis can be challenging without a graphical user interface (GUI) to help you visualize and interact with your data. A Redis GUI tool can help you browse, filter, edit, and delete your Redis keys, run commands and queries, monitor performance and metrics, and more."}),"\n",(0,a.jsx)(o.p,{children:"Many Redis GUI tools are available in the market, each with its own features, pros and cons, and price. This blog post will review the top 7 Redis GUI tools in 2024 and compare them based on their functionality, usability, compatibility, and cost. We will also show you how to use ILLA Cloud, the best Redis GUI tool, to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud is an open-source low-code platform for building internal tools. It is a powerful and flexible UI library for building web applications that connect to your databases and APIs. You can use ILLA Cloud to build anything from simple forms and tables to complex applications with advanced features."}),"\n",(0,a.jsx)(o.p,{children:"ILLA Cloud supports Redis as one of its data sources. You can connect to your Redis server or cluster using ILLA Cloud and access your data using a graphical interface. You can also run commands and queries using SQL and JavaScript. You can use template syntax to inject dynamic values into your components and queries. You can also customize and control your components with JavaScript."}),"\n",(0,a.jsx)(o.h3,{id:"illa-cloud-has-many-advantages-over-other-redis-gui-tools-some-of-them-are",children:"ILLA Cloud has many advantages over other Redis GUI tools. Some of them are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use ILLA Cloud without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is cross-platform and cloud-based. You can use ILLA Cloud on any device and operating system. You can also deploy it on your own server or use the ILLA Cloud service."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple data sources. You can connect to various databases and APIs using ILLA Cloud, such as PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, AWS S3, and more. You can also integrate with any data source connected through APIs."}),"\n",(0,a.jsx)(o.li,{children:"It has a drag-and-drop interface. You can build a user interface for your application by dragging and dropping components like tables, charts, forms, buttons, and more. You don\u2019t need to write any HTML or CSS code."}),"\n",(0,a.jsx)(o.li,{children:"It has a rich set of components. You can use dozens of components in ILLA Cloud to meet your needs in different scenarios. You can also customize them with JavaScript."}),"\n",(0,a.jsx)(o.li,{children:"It supports JavaScript inside widgets, queries, and other components. Using JavaScript, you can add logic, transform data, and define complex workflows. You can also use template syntax to inject dynamic values into your components and queries."}),"\n",(0,a.jsx)(o.li,{children:"It has a collaborative feature. You can work with other developers on the same project by sharing links. You can also chat with them in real time and give feedback."}),"\n",(0,a.jsx)(o.li,{children:"It has a friendly community. You can join the Discord community of ILLA Cloud and get support from other users and developers. You can also share feedback, ask questions, and get updates."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-illa-cloud-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use ILLA Cloud to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the ILLA Cloud website."}),"\n",(0,a.jsx)(o.li,{children:"Create a new project and choose Redis as your data source."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Query tab on the top panel. You can write SQL or JavaScript in the editor. You can use template syntax to inject dynamic values into your queries. You can also use auto-completion and syntax highlighting features. You can run your queries by clicking the Run button or pressing Ctrl+Enter. You will see the results on the right panel. You can also export the results as CSV or JSON files."}),"\n",(0,a.jsx)(o.li,{children:"To build a user interface for your application, click on the Builder tab on the top panel. You will see a grid-style canvas where you can drag and drop components from the left panel. You can choose from various components like tables, charts, forms, buttons, etc. You can also customize and control your components with JavaScript. You can use template syntax to inject dynamic values into your components. You can also bind your components to your queries and data sources."}),"\n",(0,a.jsx)(o.li,{children:"To preview your application, click on the Preview button on the top right corner. You will see how your application looks and works in a browser. You can also test your components and queries and see the results."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using ILLA Cloud. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redisinsight",children:"RedisInsight"}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight is a desktop manager for Redis that provides an intuitive and efficient UI for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"RedisInsight allows you to browse and interact with Redis data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also explore the latest capabilities offered by Redis, such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redisinsight-are",children:"Some of the advantages of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and easy to use. You can download RedisInsight for free and install it on your Linux, Windows, or macOS machine. You can also check out the GitHub project and provide feedback."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use RedisInsight on any device and operating system. You can also connect to any Redis server or cluster using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also use the Workbench feature to run commands and queries using a Monaco Editor."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interactively work with complex data models such as documents, graphs, time series, etc. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redisinsight-are",children:"Some of the drawbacks of RedisInsight are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not open-source. You cannot contribute to or modify the project according to your needs."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using RedisInsight."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using RedisInsight."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"redis-desktop-manager-respapp",children:"Redis Desktop Manager (RESP.app)"}),"\n",(0,a.jsx)(o.p,{children:"Redis Desktop Manager is a cross-platform desktop GUI for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-desktop-manager-are",children:"Some of the advantages of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cross-platform and desktop-based. You can use Redis Desktop Manager on Linux, Windows, or macOS machines. You can also install it as a snap package or a docker image."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Desktop Manager. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Console feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-desktop-manager-are",children:"Some of the drawbacks of Redis Desktop Manager are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redis Desktop Manager. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, etc."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Desktop Manager."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Desktop Manager."}),"\n"]}),"\n",(0,a.jsx)(o.h2,{id:"medis",children:"Medis"}),"\n",(0,a.jsx)(o.p,{children:"Medis is a beautiful and easy-to-use Mac database management application for Redis. It lets you connect to multiple Redis servers and clusters and manage your data using a graphical interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-medis-are",children:"Some of the advantages of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is beautiful and easy-to-use. Medis has a sleek and intuitive design that makes it easy to use. It also has dark mode support that makes it look even better."}),"\n",(0,a.jsx)(o.li,{children:"It is Mac-based and desktop-based. You can use Medis on any Mac machine. You can also install it from the Mac App Store or download it from GitHub."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Medis. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a graphical interface for Redis data. Using a graphical interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. Using a terminal-like interface, you can also use the Terminal feature to run commands and queries."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-medis-are",children:"Some of the drawbacks of Medis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Medis. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It is only available for Mac. You cannot use Medis on other operating systems or devices."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Medis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Medis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-medis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Medis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Medis from the Mac App Store or GitHub."}),"\n",(0,a.jsx)(o.li,{children:"Install Medis on your Mac machine."}),"\n",(0,a.jsx)(o.li,{children:"Launch Medis and click on Add Connection button."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on CLI tab on the bottom panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Medis. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redis-commander",children:"Redis Commander"}),"\n",(0,a.jsx)(o.p,{children:"Redis Commander is a free and open-source Redis management tool written in Node.js. It allows you to connect to multiple Redis servers and clusters and manage your data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redis-commander-are",children:"Some of the advantages of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is free and open-source. You can use Redis Commander without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It is web-based and cross-platform. You can use Redis Commander on any device and operating system. You need to install it on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redis Commander. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redis-commander-are",children:"Some of the drawbacks of Redis Commander are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very stable or reliable. Redis Commander may have bugs or issues affecting its performance or functionality. It may also crash or freeze sometimes."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redis Commander."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redis Commander."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"To use Redis Commander to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsx)(o.h3,{id:"download-redis-commander-from-github-or-npm",children:"Download Redis Commander from GitHub or npm."}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Install Redis Commander on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch Redis Commander by running redis-commander command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redis Commander through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:8081",children:"http://localhost:8081"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (host name or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redis Commander. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"redsmin",children:"Redsmin"}),"\n",(0,a.jsx)(o.p,{children:"Redsmin is a cloud-based Redis management service that provides a real-time interface for Redis and Redis Stack. It supports all Redis deployments, such as Redis Open Source, Redis Stack, Redis Enterprise Software, Redis Enterprise Cloud, or Amazon ElastiCache."}),"\n",(0,a.jsx)(o.p,{children:"Redsmin allows you to browse and interact with Redis data using a web-based interface. You can also run commands and queries using a built-in CLI with auto-completion and syntax highlighting features. You can also monitor the performance and metrics of your Redis server or cluster using a dashboard."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-redsmin-are",children:"Some of the advantages of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is cloud-based and cross-platform. You can use Redsmin on any device and operating system. You must install a proxy daemon on your server and access it through a web browser."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple Redis servers and clusters. You can connect to multiple Redis servers and clusters using Redsmin. You can also import and export connections using JSON files."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. Using a web-based interface, you can browse, filter, edit, and delete your Redis keys. You can also display data in various formats like JSON, hexadecimal, MessagePack, and more. You can also use the Tree view to group data and enhance the navigation."}),"\n",(0,a.jsx)(o.li,{children:"It has a built-in CLI for running commands and queries. You can run commands and queries using a built-in CLI with auto-completion and syntax highlighting features."}),"\n",(0,a.jsx)(o.li,{children:"It supports the latest capabilities offered by Redis. You can query, visualize, and interact with complex data models such as documents, graphs, and time series. You can also explore queryable JSON documents, full-text search, probabilistic data structures, and more."}),"\n",(0,a.jsx)(o.li,{children:"It has a dashboard for monitoring performance and metrics. You can monitor your Redis server's or cluster's performance and metrics using a dashboard. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-redsmin-are",children:"Some of the drawbacks of Redsmin are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not free or open-source. You have to pay a subscription fee to use Redsmin. The free version has limited features and functionality."}),"\n",(0,a.jsx)(o.li,{children:"It requires a proxy daemon installation. You must install a proxy daemon on your server to connect to Redsmin. This may affect your security or performance."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Redsmin."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Redsmin."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-redsmin-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Redsmin to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Sign up for a free account on the Redsmin website."}),"\n",(0,a.jsx)(o.li,{children:"Download and install the proxy daemon on your server using Node.js."}),"\n",(0,a.jsx)(o.li,{children:"Launch the proxy daemon by running redsmin command in your terminal."}),"\n",(0,a.jsx)(o.li,{children:"Enter your Redsmin API key when prompted."}),"\n",(0,a.jsxs)(o.li,{children:["Access Redsmin through your web browser by entering ",(0,a.jsx)(o.a,{href:"https://app.redsmin.com",children:"https://app.redsmin.com"})," in your address bar."]}),"\n",(0,a.jsx)(o.li,{children:"Click on Add Redis Server button to add your Redis connection details (hostname or IP address, port number, password, and database number)."}),"\n",(0,a.jsx)(o.li,{children:"Click on Connect button to connect to your Redis server or cluster."}),"\n",(0,a.jsx)(o.li,{children:"Once connected, you will see your Redis keys on the left panel. You can browse, filter, and search them by name, type, or value. You can also edit or delete them by right-clicking on them."}),"\n",(0,a.jsx)(o.li,{children:"To run commands or queries on your Redis data, click on the Console tab on the top panel. You can write commands or queries in the editor. You can use auto-completion and syntax highlighting features. You can run your commands or queries by clicking on Execute button or pressing Ctrl+Enter. You will see the results on the right panel."}),"\n",(0,a.jsx)(o.li,{children:"To explore the latest capabilities offered by Redis, click on the corresponding tabs on the top panel. You can choose from various modules, such as RedisJSON, RedisGraph, and RedisTimeSeries. Using a web-based interface, you can query, visualize, and interact with complex data models."}),"\n",(0,a.jsx)(o.li,{children:"To monitor your Redis server's or cluster's performance and metrics, click on the Dashboard tab on the top panel. You can see commands processed in real-time and inspect slow commands. You can also troubleshoot performance issues and debug your Redis server."}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"That\u2019s it! You have built a Redis GUI for your application using Redsmin. You can now use it to visualize and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"webdis",children:"Webdis"}),"\n",(0,a.jsx)(o.p,{children:"Webdis is a simple web server that exposes Redis commands as HTTP endpoints with JSON output. It allows you to connect to your Redis server and access your data using a web browser or any HTTP client. You can also run commands and queries using HTTP requests."}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-advantages-of-webdis-are",children:"Some of the advantages of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is simple and lightweight. Webdis is a simple web server that requires no installation or configuration. It is also very fast and consumes little memory."}),"\n",(0,a.jsx)(o.li,{children:"It is open-source and free. You can use Webdis without paying any fees or licenses. You can also contribute to the project on GitHub and help improve it."}),"\n",(0,a.jsx)(o.li,{children:"It supports multiple operating systems and Redis deployments. You can use Webdis on Linux, Windows, or macOS machines. You can also connect to any Redis server or cluster using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It has a web-based interface for Redis data. You can browse and interact with Redis data using a web browser or any HTTP client. You can also display data in JSON format."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"some-of-the-drawbacks-of-webdis-are",children:"Some of the drawbacks of Webdis are:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"It is not very secure or reliable. Webdis does not support authentication or encryption for your Redis connection. It may also expose your Redis data to unauthorized access or modification."}),"\n",(0,a.jsx)(o.li,{children:"It does not support the latest capabilities offered by Redis. You cannot query, visualize, or interact with complex data models such as documents, graphs, time series, and more."}),"\n",(0,a.jsx)(o.li,{children:"It does not support multiple data sources. You cannot connect to other databases or APIs using Webdis."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a built-in CLI for running commands and queries. You have to use HTTP requests to run commands and queries on your Redis data."}),"\n",(0,a.jsx)(o.li,{children:"It does not have a drag-and-drop interface for building user interfaces. You cannot build a user interface for your application using Webdis."}),"\n"]}),"\n",(0,a.jsx)(o.h3,{id:"to-use-webdis-to-build-a-redis-gui-for-your-application-you-need-to-follow-these-steps",children:"To use Webdis to build a Redis GUI for your application, you need to follow these steps:"}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsx)(o.li,{children:"Download Webdis from GitHub or compile it from the source code."}),"\n",(0,a.jsx)(o.li,{children:"Launch Webdis by running webdis the command in your terminal."}),"\n",(0,a.jsxs)(o.li,{children:["Access Webdis through your web browser by entering ",(0,a.jsx)(o.a,{href:"http://localhost:7379",children:"http://localhost:7379"})," in your address bar."]}),"\n",(0,a.jsxs)(o.li,{children:["Enter your Redis command or query in the URL path after the slash. For example, ",(0,a.jsx)(o.a,{href:"http://localhost:7379/GET/foo",children:"http://localhost:7379/GET/foo"})," will get the value of the key foo."]}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"See the result of your command or query in JSON format in your browser.\nThat\u2019s it! You have built a Redis GUI for your application using Webdis. You can now use it to access and interact with your Redis data."}),"\n",(0,a.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsx)(o.p,{children:"In this blog post, we have reviewed the top 7 Redis GUI tools in 2024 and compared them based on their functionality, usability, compatibility, and cost. We have also shown you how to use each tool to build a Redis GUI for your application."}),"\n",(0,a.jsx)(o.p,{children:"We hope this blog post has helped you find the best Redis GUI tool for your needs and preferences. However, if you ask us, we recommend ILLA Cloud as the best Redis GUI tool."})]})}function c(e={}){const{wrapper:o}={...(0,n.a)(),...e.components};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},7214:(e,o,s)=>{s.d(o,{Z:()=>r,a:()=>t});var a=s(959);const n={},i=a.createContext(n);function t(e){const o=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function r(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:t(e.components),a.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/ec7f9948.049300cd.js b/assets/js/ec7f9948.2a1e6d6b.js
similarity index 87%
rename from assets/js/ec7f9948.049300cd.js
rename to assets/js/ec7f9948.2a1e6d6b.js
index 18d5014bd3..0d6f0ca839 100644
--- a/assets/js/ec7f9948.049300cd.js
+++ b/assets/js/ec7f9948.2a1e6d6b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8987],{258:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>n,metadata:()=>s,toc:()=>c});var o=i(1527),l=i(7214);const n={slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},a=void 0,s={permalink:"/illa-website/blog/build-ai-tools",source:"@site/blog/build-ai-tools/build-ai-tools.md",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",date:"2024-01-19T10:00:00.000Z",formattedDate:"January 19, 2024",tags:[{label:"ai",permalink:"/illa-website/blog/tags/ai"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:2.2,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},unlisted:!1,prevItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},nextItem:{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",permalink:"/illa-website/blog/automate-send-to-slack"},relatedPosts:[{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Building Smart Applications",id:"building-smart-applications",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields. However, for most people, AI remains a high-barrier technology, requiring a significant amount of time and effort to learn before it can be applied effectively in practical work."}),"\n",(0,o.jsx)(t.p,{children:"Each of us has our own unique needs, such as building text-to-image tools or writing tools specific to our work chains. There are numerous interesting models on HuggingFace, allowing us to quickly create our own AI tools based on these models, thereby making our work more intelligent!"}),"\n",(0,o.jsx)(t.p,{children:"Here is a recommended tool that allows users to build AI tools like assembling blocks:"}),"\n",(0,o.jsx)(t.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsxs)(t.p,{children:["The official website is: ",(0,o.jsx)(t.a,{href:"https://illacloud.com",children:"https://illacloud.com"})]}),"\n",(0,o.jsxs)(t.p,{children:["Github: ",(0,o.jsx)(t.a,{href:"https://github.com/illacloud/illa-builder",children:"https://github.com/illacloud/illa-builder"})]}),"\n",(0,o.jsxs)(t.p,{children:["This open-source low-code tool's slogan is: ",(0,o.jsx)(t.strong,{children:"Build AI Driven Business Tools"}),". It focuses on helping users quickly build AI-driven tools. Users can construct pages through drag-and-drop. Then, by using three major functions, they can connect to AI:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"ILLA AI Agent"}),"\n",(0,o.jsx)(t.li,{children:"Models from HuggingFace"}),"\n",(0,o.jsx)(t.li,{children:"RestAPI to call OpenAI's interface"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"This allows for the quick creation of personalized AI tools."}),"\n",(0,o.jsx)(t.h2,{id:"building-smart-applications",children:"Building Smart Applications"}),"\n",(0,o.jsx)(t.p,{children:"Here we use OpenAI's text-to-image interface to build our own text-to-image panel, using tools built with ILLA Cloud, which offers certain advantages:"}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/image-generator",children:"https://illacloud.com/image-generator"})]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"The generated images can be sent to any system or SaaS using the ILLA Flow feature."}),"\n",(0,o.jsx)(t.li,{children:"The models used later can be called via RestAPI or through HuggingFace's models."}),"\n",(0,o.jsx)(t.li,{children:"Built-in prompts can be added to ensure that the generated content is sufficiently customized."}),"\n",(0,o.jsx)(t.li,{children:"The ILLA AI Agent feature can enrich the content's prompts, as not everyone is familiar with writing prompts."}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/image_generate_content.webp",alt:"image_generate_content"})}),"\n",(0,o.jsx)(t.p,{children:"I used several components here, quickly creating my own web panel through drag-and-drop, and then connected the logic through JavaScript, making it available for use by my team."}),"\n",(0,o.jsx)(t.p,{children:"I built two examples; another is an AI voice processing panel."}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/ai-voice-generator",children:"https://illacloud.com/ai-voice-generator"})]}),"\n",(0,o.jsx)(t.p,{children:"This panel has the following functions:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Meeting minutes transcription"}),"\n",(0,o.jsx)(t.li,{children:"Generation of meeting minutes"}),"\n",(0,o.jsx)(t.li,{children:"Translation and dubbing of meeting minutes"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/mix_ai_voice.webp",alt:"mix_ai_voice"})}),"\n",(0,o.jsx)(t.p,{children:"It primarily uses OpenAI's Whisper capability. There are thousands of AI capabilities, but the most important is to find what suits you. Using ILLA Cloud, you can quickly build AI applications like building blocks. Start using it now!"}),"\n",(0,o.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(t.p,{children:"From the above introduction, we can see that using ILLA Cloud, you can quickly build your own AI tools, and ILLA Cloud has a rich array of components, basically meeting a large number of everyday business needs."}),"\n",(0,o.jsx)(t.p,{children:"ILLA's self-developed component library has made the above functions flexible enough. Come and use ILLA Cloud to build your own AI tools!"})]})}function u(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,t,i)=>{i.d(t,{Z:()=>s,a:()=>a});var o=i(959);const l={},n=o.createContext(l);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[8987],{258:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>n,metadata:()=>s,toc:()=>c});var o=i(1527),l=i(7214);const n={slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},a=void 0,s={permalink:"/illa-website/blog/build-ai-tools",source:"@site/blog/build-ai-tools/build-ai-tools.md",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",date:"2024-01-19T10:00:00.000Z",formattedDate:"January 19, 2024",tags:[{label:"ai",permalink:"/illa-website/blog/tags/ai"},{label:"tools",permalink:"/illa-website/blog/tags/tools"}],readingTime:2.2,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"build-ai-tools",title:"Create AI Tools like building with blocks",description:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/cover.png",tags:["ai","tools"],date:"2024-01-19T10:00"},unlisted:!1,prevItem:{title:"Tooljet vs Retool: Which open-source low-code platform is better?",permalink:"/illa-website/blog/tooljet-vs-retool"},nextItem:{title:"Best Developer-Friendly Tool for Automating Message Sending to Slack",permalink:"/illa-website/blog/automate-send-to-slack"},relatedPosts:[{title:"Top 7 Database GUIs for SQL databases",description:"Database GUI tools make working with SQL databases much simpler and more efficient for developers. Many great database GUIs are available.",permalink:"/illa-website/blog/top-7-database-guis-for-sql-databases",formattedDate:"January 9, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:5.385,date:"2024-01-09T10:00:00.000Z"},{title:"The Best Tools for Building Crud Applications in 2024",description:"CRUD applications are a type of software that allows users to create, read, update, and delete data using various interfaces such as web pages or mobile apps.",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications",formattedDate:"January 8, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:10.165,date:"2024-01-08T10:00:00.000Z"},{title:"Top 7 Redis GUI Tools in 2024",description:"Looking for the best Redis GUI tool for your application? Read this blog post to learn about the top 7 Redis GUI tools in 2023 and how to use them.",permalink:"/illa-website/blog/top-7-redis-gui-tools-in-2023",formattedDate:"December 20, 2023",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:20.025,date:"2023-12-20T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"ILLA Cloud",id:"illa-cloud",level:2},{value:"Building Smart Applications",id:"building-smart-applications",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={a:"a",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"AI development has reached a point today where it's no longer a novelty, but rather widely applied in various fields. However, for most people, AI remains a high-barrier technology, requiring a significant amount of time and effort to learn before it can be applied effectively in practical work."}),"\n",(0,o.jsx)(t.p,{children:"Each of us has our own unique needs, such as building text-to-image tools or writing tools specific to our work chains. There are numerous interesting models on HuggingFace, allowing us to quickly create our own AI tools based on these models, thereby making our work more intelligent!"}),"\n",(0,o.jsx)(t.p,{children:"Here is a recommended tool that allows users to build AI tools like assembling blocks:"}),"\n",(0,o.jsx)(t.h2,{id:"illa-cloud",children:"ILLA Cloud"}),"\n",(0,o.jsxs)(t.p,{children:["The official website is: ",(0,o.jsx)(t.a,{href:"https://illacloud.com",children:"https://illacloud.com"})]}),"\n",(0,o.jsxs)(t.p,{children:["Github: ",(0,o.jsx)(t.a,{href:"https://github.com/illacloud/illa-builder",children:"https://github.com/illacloud/illa-builder"})]}),"\n",(0,o.jsxs)(t.p,{children:["This open-source low-code tool's slogan is: ",(0,o.jsx)(t.strong,{children:"Build AI Driven Business Tools"}),". It focuses on helping users quickly build AI-driven tools. Users can construct pages through drag-and-drop. Then, by using three major functions, they can connect to AI:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"ILLA AI Agent"}),"\n",(0,o.jsx)(t.li,{children:"Models from HuggingFace"}),"\n",(0,o.jsx)(t.li,{children:"RestAPI to call OpenAI's interface"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"This allows for the quick creation of personalized AI tools."}),"\n",(0,o.jsx)(t.h2,{id:"building-smart-applications",children:"Building Smart Applications"}),"\n",(0,o.jsx)(t.p,{children:"Here we use OpenAI's text-to-image interface to build our own text-to-image panel, using tools built with ILLA Cloud, which offers certain advantages:"}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/image-generator",children:"https://illacloud.com/image-generator"})]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"The generated images can be sent to any system or SaaS using the ILLA Flow feature."}),"\n",(0,o.jsx)(t.li,{children:"The models used later can be called via RestAPI or through HuggingFace's models."}),"\n",(0,o.jsx)(t.li,{children:"Built-in prompts can be added to ensure that the generated content is sufficiently customized."}),"\n",(0,o.jsx)(t.li,{children:"The ILLA AI Agent feature can enrich the content's prompts, as not everyone is familiar with writing prompts."}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/image_generate_content.webp",alt:"image_generate_content"})}),"\n",(0,o.jsx)(t.p,{children:"I used several components here, quickly creating my own web panel through drag-and-drop, and then connected the logic through JavaScript, making it available for use by my team."}),"\n",(0,o.jsx)(t.p,{children:"I built two examples; another is an AI voice processing panel."}),"\n",(0,o.jsxs)(t.p,{children:["Example here: ",(0,o.jsx)(t.a,{href:"https://illacloud.com/ai-voice-generator",children:"https://illacloud.com/ai-voice-generator"})]}),"\n",(0,o.jsx)(t.p,{children:"This panel has the following functions:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Meeting minutes transcription"}),"\n",(0,o.jsx)(t.li,{children:"Generation of meeting minutes"}),"\n",(0,o.jsx)(t.li,{children:"Translation and dubbing of meeting minutes"}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/build-ai-tools/mix_ai_voice.webp",alt:"mix_ai_voice"})}),"\n",(0,o.jsx)(t.p,{children:"It primarily uses OpenAI's Whisper capability. There are thousands of AI capabilities, but the most important is to find what suits you. Using ILLA Cloud, you can quickly build AI applications like building blocks. Start using it now!"}),"\n",(0,o.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(t.p,{children:"From the above introduction, we can see that using ILLA Cloud, you can quickly build your own AI tools, and ILLA Cloud has a rich array of components, basically meeting a large number of everyday business needs."}),"\n",(0,o.jsx)(t.p,{children:"ILLA's self-developed component library has made the above functions flexible enough. Come and use ILLA Cloud to build your own AI tools!"})]})}function u(e={}){const{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,t,i)=>{i.d(t,{Z:()=>s,a:()=>a});var o=i(959);const l={},n=o.createContext(l);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/ed1472d5.567617d6.js b/assets/js/ed1472d5.37f97649.js
similarity index 97%
rename from assets/js/ed1472d5.567617d6.js
rename to assets/js/ed1472d5.37f97649.js
index 0ff88022ab..ac9e7331a1 100644
--- a/assets/js/ed1472d5.567617d6.js
+++ b/assets/js/ed1472d5.37f97649.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2186],{7674:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var o=n(1527),t=n(7214);const a={slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},i=void 0,s={permalink:"/illa-website/blog/react-error-boundary",source:"@site/blog/react-error-boundary/react-error-boundary.md",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",date:"2024-02-27T10:00:00.000Z",formattedDate:"February 27, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:13.86,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},unlisted:!1,nextItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},relatedPosts:[{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},c={authorsImageUrls:[void 0]},l=[{value:"What is React Error Boundary?",id:"what-is-react-error-boundary",level:2},{value:"Basic Usage",id:"basic-usage",level:2},{value:"Implementing Error Boundaries: Common Design Patterns",id:"implementing-error-boundaries-common-design-patterns",level:3},{value:"Component-Level Error Boundaries",id:"component-level-error-boundaries",level:3},{value:"Layout-Level Error Boundaries",id:"layout-level-error-boundaries",level:3},{value:"Top-Level Error Boundaries",id:"top-level-error-boundaries",level:3},{value:"Using the react-error-boundary Library",id:"using-the-react-error-boundary-library",level:2},{value:"ErrorBoundary Component",id:"errorboundary-component",level:2},{value:"useErrorHandler Hook",id:"useerrorhandler-hook",level:2},{value:"withErrorBoundary HOC",id:"witherrorboundary-hoc",level:2},{value:"Benefits",id:"benefits",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const r={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.p,{children:"When building applications, errors are inevitable. Even with the best coding practices, unexpected runtime errors can occur, causing the application to crash. Therefore, handling errors is crucial. This article will explore how to capture and handle errors in React and introduce a more powerful way to handle React errors!"}),"\n",(0,o.jsx)(r.p,{children:"Why capture errors in React? Since React 16, if an error occurs during the lifecycle and is not caught, the entire application will unmount itself, leading to a crash. Before this, even small errors in components would remain on the screen, but now, certain trivial parts of the UI or uncaught errors from uncontrollable third-party libraries can cause the page to crash, resulting in a white screen and affecting the user experience. Thus, capturing and handling errors in React is essential."}),"\n",(0,o.jsxs)(r.p,{children:["In JavaScript, we can use ",(0,o.jsx)(r.code,{children:"try...catch"})," to catch errors, for example:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'const fetchData = async () => {\n try {\n return await fetch("https://some-url-that-might-fail.com"); \n } catch (error) {\n console.error(error); \n return error;\n }\n};\n'})}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"try...catch"})," is only suitable for imperative code, such as data fetching; it is not suitable for declarative code, such as JSX written within components. So, how do we capture errors in React? Fortunately, React 16 introduced a new concept: React Error Boundary. Let's see what it is and how to use it."]}),"\n",(0,o.jsx)(r.h2,{id:"what-is-react-error-boundary",children:"What is React Error Boundary?"}),"\n",(0,o.jsxs)(r.p,{children:["React Error Boundary (error boundary) is a way to handle errors in a React application. It is a React component that can capture JavaScript errors at any point in the child component tree, log these errors, and display a fallback UI instead of a crashed component tree (white screen). They are like a JavaScript ",(0,o.jsx)(r.code,{children:"catch {}"})," block but only for components."]}),"\n",(0,o.jsx)(r.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,o.jsx)(r.p,{children:"Before the introduction of error boundaries, errors within components would propagate and eventually lead to a white screen or an erroneous UI, affecting the user experience. However, with error boundaries, these unhandled errors can be effectively contained and managed."}),"\n",(0,o.jsx)(r.p,{children:"We can set error boundaries across the entire application or have more granular control on individual components. It's important to note that error boundaries only capture errors during rendering, lifecycle methods, and constructors, but not the following:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["Event handling (for this, you need to use the conventional ",(0,o.jsx)(r.code,{children:"try/catch"})," block)"]}),"\n",(0,o.jsxs)(r.li,{children:["Asynchronous code (e.g., callbacks for ",(0,o.jsx)(r.code,{children:"setTimeout"})," or ",(0,o.jsx)(r.code,{children:"requestAnimationFrame"}),")"]}),"\n",(0,o.jsx)(r.li,{children:"Server-side rendering"}),"\n",(0,o.jsx)(r.li,{children:"Errors occurring within the error boundary itself rather than its child components"}),"\n"]}),"\n",(0,o.jsx)(r.p,{children:"Error boundaries were introduced in React v16. To use error boundaries, you need to define a class component and add one or both of the following lifecycle methods:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"}),": This lifecycle method is called after an error is thrown to render a fallback UI. It is called during the rendering phase, so side effects are not allowed."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"componentDidCatch()"}),": This method is used to log error information. It is called during the commit phase, so side effects can be executed."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["Here's an example of an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," class component that implements both ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," and ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," lifecycle methods:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"class ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n // Update state to display the fallback UI on the next render.\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n // Render any custom fallback UI\n return
Oops! Something went wrong.
;\n }\n\n return this.props.children; \n }\n}\n\n// Using in a component\nclass App extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["Here, an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," error boundary component is defined. Its constructor initializes the state object and sets the ",(0,o.jsx)(r.code,{children:"hasError"})," property to ",(0,o.jsx)(r.code,{children:"false"}),", indicating no error has occurred."]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," method is called when an error is caught. It takes an ",(0,o.jsx)(r.code,{children:"error"})," object as a parameter and returns a new state object, setting ",(0,o.jsx)(r.code,{children:"hasError"})," to ",(0,o.jsx)(r.code,{children:"true"})," so that the fallback UI is displayed on the next render."]}),"\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," method is called after an error is caught. In this example, it logs the error and error information to the console."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["In the ",(0,o.jsx)(r.code,{children:"render()"})," method, the rendering of the original child components or the fallback UI is determined based on the value of ",(0,o.jsx)(r.code,{children:"hasError"}),". If ",(0,o.jsx)(r.code,{children:"hasError"})," is true, it renders ",(0,o.jsx)(r.code,{children:"
Oops! Something went wrong.
"}),"; otherwise, it renders the original child components. When using error boundaries in React components, you can wrap any component that needs error boundary protection with ",(0,o.jsx)(r.code,{children:""}),". This way, a crash in a small component won't cause the entire application to crash, resulting in a white screen. Only the component with the error will not render normally but will display the fallback UI, making it easier for us to quickly identify which component has a problem."]}),"\n",(0,o.jsx)(r.h3,{id:"implementing-error-boundaries-common-design-patterns",children:"Implementing Error Boundaries: Common Design Patterns"}),"\n",(0,o.jsx)(r.p,{children:"When implementing React error boundaries, you can use one of the following three design patterns based on your specific needs."}),"\n",(0,o.jsx)(r.h3,{id:"component-level-error-boundaries",children:"Component-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"This approach involves wrapping individual components within an error boundary. It provides a high level of granularity, allowing for the separate handling of errors within each component. If a component crashes, the error boundary can catch the error and prevent it from propagating up the component tree. This means that only the crashed component is affected, and the rest of the application can continue to run normally."}),"\n",(0,o.jsx)(r.p,{children:"Component-level error boundaries are particularly useful when you have components that are isolated from each other and do not share state. If one component fails to render, it does not affect the others. However, if many components require their own error boundaries, this method can lead to a lot of duplicated code."}),"\n",(0,o.jsx)(r.h3,{id:"layout-level-error-boundaries",children:"Layout-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Layout-level error boundaries are placed higher in the component tree, typically wrapping groups of related components. This is a good choice when you have closely related components that share a common state."}),"\n",(0,o.jsx)(r.p,{children:"When an error occurs in one of the components, a layout-level error boundary can catch it and display an error message or a fallback UI for the entire group of components. This can be a good way to handle errors that affect a whole section of the application, such as a sidebar or dashboard."}),"\n",(0,o.jsx)(r.p,{children:"However, layout-level error boundaries are coarser than component-level boundaries. An error in one component can affect the entire group of components, even if the other components are functioning correctly."}),"\n",(0,o.jsx)(r.h3,{id:"top-level-error-boundaries",children:"Top-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Top-level error boundaries are placed at the very top of the component tree. They are a general solution that can handle any errors that occur in the application. This approach ensures that if an error happens anywhere in the application, it can be caught and handled gracefully."}),"\n",(0,o.jsx)(r.p,{children:"This can prevent the entire application from crashing when an error occurs. However, top-level error boundaries are the coarsest method. An error can affect the entire application, not just the component or group of components where the error occurred."}),"\n",(0,o.jsxs)(r.h2,{id:"using-the-react-error-boundary-library",children:["Using the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," Library"]}),"\n",(0,o.jsxs)(r.p,{children:["As mentioned earlier, React Error Boundaries have some limitations and cannot handle certain special cases. Below is a more powerful way to handle errors in React: the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," library. It is a small React error handling library that provides enhanced error handling capabilities and more flexible methods to deal with errors in React applications, allowing developers to create stronger and user-friendly error handling mechanisms."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," uses a more modern approach, adopting React Hooks and functional components, aligning with the current trends in React development. It uses a simple component called ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," to wrap potentially error-prone code."]}),"\n",(0,o.jsxs)(r.p,{children:["Here are the props provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"FallbackComponent"}),": Used to specify a custom component to render when an error occurs within the error boundary. It offers flexibility to create a visually appealing and informative user interface to display errors and provide any necessary actions."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackRender"}),": Similar to ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", this prop is used to define a custom rendering function to render the error fallback interface. It provides more control over the rendering process and allows for more advanced error handling logic."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onError"}),": It accepts a callback function that is called when the error boundary catches an error, passing the error object and component stack trace information. It allows us to perform additional actions, such as logging errors or sending error reports to external services."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onReset"}),": It accepts a callback function that is triggered after the error boundary successfully resets. It can be used to perform cleanup operations or update the component's state after an error is recovered."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackProps"}),": Allows passing additional ",(0,o.jsx)(r.code,{children:"props"})," to the ",(0,o.jsx)(r.code,{children:"FallbackComponent"})," or ",(0,o.jsx)(r.code,{children:"fallbackRender"})," function. It can be used to provide context or additional data to the error fallback interface."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"retry"}),": A boolean value that determines whether the error boundary allows retrying the operation that caused the error. When set to true, the ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function can be called from the error fallback interface to retry the operation."]}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"errorboundary-component",children:"ErrorBoundary Component"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has a prop called ",(0,o.jsx)(r.code,{children:"fallbackRender"}),", which accepts a function or a React element to display when an error is caught. Additionally, it provides a ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop that can reset the component's state when specific props change."]}),"\n",(0,o.jsxs)(r.p,{children:["The beauty of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is that it avoids the need to manually write class components and handle state, doing all the work in the background, allowing developers to focus on building the application. Here's an example of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a component:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction MyFallbackComponent({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent() {\n // Some component logic that might throw a JavaScript error\n}\n\nfunction App() {\n return (\n {\n // Cleanup application state\n }}\n resetKeys={['someKey']}\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, when an error is caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),", it renders ",(0,o.jsx)(r.code,{children:"MyFallbackComponent"}),". It displays the error message and provides a button to reset the error state and attempt to render the component again. The ",(0,o.jsx)(r.code,{children:"onReset"})," prop is used to clean up any side effects that occurred before the error was thrown, while the ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is used to control when the component state should be reset."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"onError"})," prop of ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," is a function that is called whenever an error is caught. This property can be used to report errors:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'// Error reporting function\nfunction logErrorToService(error, info) {\n // Error reporting logic...\n console.error("Caught an error:", error, info);\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n'})}),"\n",(0,o.jsxs)(r.p,{children:["One of the most powerful features of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is the ability to reset the error boundary state, clearing the error and attempting to re-render the component tree. This is very useful when the error is likely transient, such as a network error caused by a temporary disconnection."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function provided to the fallback component can be used to reset the error boundary. For example, this function can be called on a button click, allowing users to manually retry a failed operation."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," can accept an ",(0,o.jsx)(r.code,{children:"onReset"})," prop, which is a function called before the error state is reset. This function is useful for performing any cleanup or state reset operations before the component is re-rendered after an error."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is an array of values that, when changed, trigger a reset of the error boundary. This is useful when you know that changing certain ",(0,o.jsx)(r.code,{children:"props"})," or state values should resolve the error. Here's an example of how to use these properties:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent({ someKey }) {\n // Some component logic that might throw a JS error\n}\n\nfunction App() {\n const [someKey, setSomeKey] = React.useState(null)\n\n return (\n setSomeKey(null)} // Reset application state here\n resetKeys={[someKey]} // Reset error boundary when someKey changes\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, if an error is caught within ",(0,o.jsx)(r.code,{children:"MyComponent"}),", the ",(0,o.jsx)(r.code,{children:"ErrorFallback"}),' component is rendered, displaying the error message and a "Try Again" button. When this button is clicked, it calls ',(0,o.jsx)(r.code,{children:"resetErrorBoundary"}),", triggering the ",(0,o.jsx)(r.code,{children:"onReset"})," function and clearing the error state, allowing ",(0,o.jsx)(r.code,{children:"MyComponent"})," to render again. If the ",(0,o.jsx)(r.code,{children:"someKey prop"})," changes, the error boundary will also reset, providing a flexible way to recover from errors based on changes in the application state."]}),"\n",(0,o.jsx)(r.h2,{id:"useerrorhandler-hook",children:"useErrorHandler Hook"}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," also provides a ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook, which is a custom React Hook that allows errors to be thrown from anywhere in a functional component. The thrown errors will be caught by the nearest error boundary, just as errors thrown from lifecycle methods or render functions in class components are caught by error boundaries."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook is particularly useful when dealing with asynchronous code, as errors thrown in this manner are not caught by component error boundaries. Here's an example of using ",(0,o.jsx)(r.code,{children:"useErrorHandler"}),":"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { useErrorHandler } from 'react-error-boundary'\n\nfunction MyComponent() {\n const handleError = useErrorHandler()\n\n async function fetchData() {\n try {\n // Fetch data\n } catch (error) {\n handleError(error)\n }\n }\n\n return {\n ...\n };\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," uses ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," to obtain a function for handling errors. The function is an asynchronous function for fetching data and catching errors. If an error occurs, it is passed to the ",(0,o.jsx)(r.code,{children:"handleError"})," function, which throws the error so it can be caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"useErrorHandler"})," provides a powerful way to handle errors in functional components. It works seamlessly with the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component from ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", making error handling in React more straightforward and clear."]}),"\n",(0,o.jsx)(r.h2,{id:"witherrorboundary-hoc",children:"withErrorBoundary HOC"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," package also offers a solution with a ",(0,o.jsx)(r.code,{children:"withErrorBoundary HOC"})," (Higher-Order Component). It is an HOC that wraps a given component to catch errors within that component. The advantage of this approach is that it adds an error boundary to a component without changing its original implementation or adding extra JSX to the component tree."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { withErrorBoundary } from 'react-error-boundary'\n\nfunction MyComponent() {\n // Component logic\n}\n\nconst MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, {\n FallbackComponent: ErrorFallback,\n onError: logErrorToService,\n onReset: handleReset,\n resetKeys: ['someKey']\n});\n\nfunction App() {\n return \n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," is wrapped in an error boundary using ",(0,o.jsx)(r.code,{children:"withErrorBoundary"}),". The second argument to ",(0,o.jsx)(r.code,{children:"withErrorBoundary"})," is an optional object that can provide the same ",(0,o.jsx)(r.code,{children:"props"})," as the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component: ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", ",(0,o.jsx)(r.code,{children:"onError"}),", ",(0,o.jsx)(r.code,{children:"onReset"}),", and ",(0,o.jsx)(r.code,{children:"resetKeys"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:["This HOC approach is an elegant solution for adding error boundaries to components without modifying their implementation, especially useful for class components where ",(0,o.jsx)(r.code,{children:"Hooks"})," cannot be used. It demonstrates the flexibility of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in adapting to different coding styles and React development paradigms."]}),"\n",(0,o.jsx)(r.h2,{id:"benefits",children:"Benefits"}),"\n",(0,o.jsxs)(r.p,{children:["Having looked at the basic usage of ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", let's summarize the benefits of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:"Easy to use: The library provides a simple and intuitive API that is easy to understand and use. It abstracts the complexity of error handling and presents a clear and straightforward way for developers to manage errors."}),"\n",(0,o.jsx)(r.li,{children:"Functional components friendly: Unlike traditional React error boundaries that require class components, react-error-boundary is designed specifically for functional components. It uses Hooks, aligning with the current trends in React development."}),"\n",(0,o.jsx)(r.li,{children:"Flexible: The library offers multiple ways to use error boundaries, including as components, higher-order components (HOCs), and custom Hooks. This flexibility allows developers to choose the best method based on their needs and coding style."}),"\n",(0,o.jsx)(r.li,{children:"Customizable fallback UI: The library allows for a customizable fallback UI to be displayed when an error is caught. This provides a better user experience than an application crash or a blank screen."}),"\n",(0,o.jsx)(r.li,{children:"Reset functionality: The library can reset the error state, allowing the application to recover from errors. This feature is particularly useful for transient errors that can be resolved without a full page reload."}),"\n",(0,o.jsxs)(r.li,{children:["Error reporting: Errors can be logged to an error reporting service through the ",(0,o.jsx)(r.code,{children:"onError"})," prop, providing valuable information for debugging and problem-solving."]}),"\n",(0,o.jsx)(r.li,{children:"Community and maintenance: The library is widely used in the React community and actively maintained, so regular updates and improvements can be expected."}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsxs)(r.p,{children:["Whether using class components or functional components, ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has got you covered. Its flexible API includes components, higher-order components, and custom Hooks, providing multiple ways to integrate error handling into your components. Additionally, it supports custom fallback UIs, error reset functionality, and error reporting, ensuring a smooth user experience even when problems arise."]}),"\n",(0,o.jsxs)(r.p,{children:["Using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features."]})]})}function h(e={}){const{wrapper:r}={...(0,t.a)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,r,n)=>{n.d(r,{Z:()=>s,a:()=>i});var o=n(959);const t={},a=o.createContext(t);function i(e){const r=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(a.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[2186],{7674:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var o=n(1527),t=n(7214);const a={slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},i=void 0,s={permalink:"/illa-website/blog/react-error-boundary",source:"@site/blog/react-error-boundary/react-error-boundary.md",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",date:"2024-02-27T10:00:00.000Z",formattedDate:"February 27, 2024",tags:[{label:"react",permalink:"/illa-website/blog/tags/react"},{label:"component",permalink:"/illa-website/blog/tags/component"},{label:"library",permalink:"/illa-website/blog/tags/library"}],readingTime:13.86,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"react-error-boundary",title:"React Error Boundary: A More Powerful Way to Handle React Errors",description:"Using react-error-boundary in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/react-error-boundary/cover.webp",tags:["react","component","library"],date:"2024-02-27T10:00"},unlisted:!1,nextItem:{title:"Using Remark to Create an Interactive Table of Contents in a Next.js Blog",permalink:"/illa-website/blog/react-markdown"},relatedPosts:[{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"},{title:"Most Popular 5 React Component Libraries in 2024",description:"React is a popular JavaScript library for building user interfaces. It is used by many companies, including Facebook, Instagram, Netflix, Airbnb, and Uber.",permalink:"/illa-website/blog/react-component-library",formattedDate:"January 29, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:6.14,date:"2024-01-29T10:00:00.000Z"}],authorPosts:[]},c={authorsImageUrls:[void 0]},l=[{value:"What is React Error Boundary?",id:"what-is-react-error-boundary",level:2},{value:"Basic Usage",id:"basic-usage",level:2},{value:"Implementing Error Boundaries: Common Design Patterns",id:"implementing-error-boundaries-common-design-patterns",level:3},{value:"Component-Level Error Boundaries",id:"component-level-error-boundaries",level:3},{value:"Layout-Level Error Boundaries",id:"layout-level-error-boundaries",level:3},{value:"Top-Level Error Boundaries",id:"top-level-error-boundaries",level:3},{value:"Using the react-error-boundary Library",id:"using-the-react-error-boundary-library",level:2},{value:"ErrorBoundary Component",id:"errorboundary-component",level:2},{value:"useErrorHandler Hook",id:"useerrorhandler-hook",level:2},{value:"withErrorBoundary HOC",id:"witherrorboundary-hoc",level:2},{value:"Benefits",id:"benefits",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const r={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.p,{children:"When building applications, errors are inevitable. Even with the best coding practices, unexpected runtime errors can occur, causing the application to crash. Therefore, handling errors is crucial. This article will explore how to capture and handle errors in React and introduce a more powerful way to handle React errors!"}),"\n",(0,o.jsx)(r.p,{children:"Why capture errors in React? Since React 16, if an error occurs during the lifecycle and is not caught, the entire application will unmount itself, leading to a crash. Before this, even small errors in components would remain on the screen, but now, certain trivial parts of the UI or uncaught errors from uncontrollable third-party libraries can cause the page to crash, resulting in a white screen and affecting the user experience. Thus, capturing and handling errors in React is essential."}),"\n",(0,o.jsxs)(r.p,{children:["In JavaScript, we can use ",(0,o.jsx)(r.code,{children:"try...catch"})," to catch errors, for example:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'const fetchData = async () => {\n try {\n return await fetch("https://some-url-that-might-fail.com"); \n } catch (error) {\n console.error(error); \n return error;\n }\n};\n'})}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"try...catch"})," is only suitable for imperative code, such as data fetching; it is not suitable for declarative code, such as JSX written within components. So, how do we capture errors in React? Fortunately, React 16 introduced a new concept: React Error Boundary. Let's see what it is and how to use it."]}),"\n",(0,o.jsx)(r.h2,{id:"what-is-react-error-boundary",children:"What is React Error Boundary?"}),"\n",(0,o.jsxs)(r.p,{children:["React Error Boundary (error boundary) is a way to handle errors in a React application. It is a React component that can capture JavaScript errors at any point in the child component tree, log these errors, and display a fallback UI instead of a crashed component tree (white screen). They are like a JavaScript ",(0,o.jsx)(r.code,{children:"catch {}"})," block but only for components."]}),"\n",(0,o.jsx)(r.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,o.jsx)(r.p,{children:"Before the introduction of error boundaries, errors within components would propagate and eventually lead to a white screen or an erroneous UI, affecting the user experience. However, with error boundaries, these unhandled errors can be effectively contained and managed."}),"\n",(0,o.jsx)(r.p,{children:"We can set error boundaries across the entire application or have more granular control on individual components. It's important to note that error boundaries only capture errors during rendering, lifecycle methods, and constructors, but not the following:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["Event handling (for this, you need to use the conventional ",(0,o.jsx)(r.code,{children:"try/catch"})," block)"]}),"\n",(0,o.jsxs)(r.li,{children:["Asynchronous code (e.g., callbacks for ",(0,o.jsx)(r.code,{children:"setTimeout"})," or ",(0,o.jsx)(r.code,{children:"requestAnimationFrame"}),")"]}),"\n",(0,o.jsx)(r.li,{children:"Server-side rendering"}),"\n",(0,o.jsx)(r.li,{children:"Errors occurring within the error boundary itself rather than its child components"}),"\n"]}),"\n",(0,o.jsx)(r.p,{children:"Error boundaries were introduced in React v16. To use error boundaries, you need to define a class component and add one or both of the following lifecycle methods:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"}),": This lifecycle method is called after an error is thrown to render a fallback UI. It is called during the rendering phase, so side effects are not allowed."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"componentDidCatch()"}),": This method is used to log error information. It is called during the commit phase, so side effects can be executed."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["Here's an example of an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," class component that implements both ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," and ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," lifecycle methods:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"class ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n // Update state to display the fallback UI on the next render.\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n // Render any custom fallback UI\n return
Oops! Something went wrong.
;\n }\n\n return this.props.children; \n }\n}\n\n// Using in a component\nclass App extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["Here, an ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," error boundary component is defined. Its constructor initializes the state object and sets the ",(0,o.jsx)(r.code,{children:"hasError"})," property to ",(0,o.jsx)(r.code,{children:"false"}),", indicating no error has occurred."]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"getDerivedStateFromError()"})," method is called when an error is caught. It takes an ",(0,o.jsx)(r.code,{children:"error"})," object as a parameter and returns a new state object, setting ",(0,o.jsx)(r.code,{children:"hasError"})," to ",(0,o.jsx)(r.code,{children:"true"})," so that the fallback UI is displayed on the next render."]}),"\n",(0,o.jsxs)(r.li,{children:["The ",(0,o.jsx)(r.code,{children:"componentDidCatch()"})," method is called after an error is caught. In this example, it logs the error and error information to the console."]}),"\n"]}),"\n",(0,o.jsxs)(r.p,{children:["In the ",(0,o.jsx)(r.code,{children:"render()"})," method, the rendering of the original child components or the fallback UI is determined based on the value of ",(0,o.jsx)(r.code,{children:"hasError"}),". If ",(0,o.jsx)(r.code,{children:"hasError"})," is true, it renders ",(0,o.jsx)(r.code,{children:"
Oops! Something went wrong.
"}),"; otherwise, it renders the original child components. When using error boundaries in React components, you can wrap any component that needs error boundary protection with ",(0,o.jsx)(r.code,{children:""}),". This way, a crash in a small component won't cause the entire application to crash, resulting in a white screen. Only the component with the error will not render normally but will display the fallback UI, making it easier for us to quickly identify which component has a problem."]}),"\n",(0,o.jsx)(r.h3,{id:"implementing-error-boundaries-common-design-patterns",children:"Implementing Error Boundaries: Common Design Patterns"}),"\n",(0,o.jsx)(r.p,{children:"When implementing React error boundaries, you can use one of the following three design patterns based on your specific needs."}),"\n",(0,o.jsx)(r.h3,{id:"component-level-error-boundaries",children:"Component-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"This approach involves wrapping individual components within an error boundary. It provides a high level of granularity, allowing for the separate handling of errors within each component. If a component crashes, the error boundary can catch the error and prevent it from propagating up the component tree. This means that only the crashed component is affected, and the rest of the application can continue to run normally."}),"\n",(0,o.jsx)(r.p,{children:"Component-level error boundaries are particularly useful when you have components that are isolated from each other and do not share state. If one component fails to render, it does not affect the others. However, if many components require their own error boundaries, this method can lead to a lot of duplicated code."}),"\n",(0,o.jsx)(r.h3,{id:"layout-level-error-boundaries",children:"Layout-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Layout-level error boundaries are placed higher in the component tree, typically wrapping groups of related components. This is a good choice when you have closely related components that share a common state."}),"\n",(0,o.jsx)(r.p,{children:"When an error occurs in one of the components, a layout-level error boundary can catch it and display an error message or a fallback UI for the entire group of components. This can be a good way to handle errors that affect a whole section of the application, such as a sidebar or dashboard."}),"\n",(0,o.jsx)(r.p,{children:"However, layout-level error boundaries are coarser than component-level boundaries. An error in one component can affect the entire group of components, even if the other components are functioning correctly."}),"\n",(0,o.jsx)(r.h3,{id:"top-level-error-boundaries",children:"Top-Level Error Boundaries"}),"\n",(0,o.jsx)(r.p,{children:"Top-level error boundaries are placed at the very top of the component tree. They are a general solution that can handle any errors that occur in the application. This approach ensures that if an error happens anywhere in the application, it can be caught and handled gracefully."}),"\n",(0,o.jsx)(r.p,{children:"This can prevent the entire application from crashing when an error occurs. However, top-level error boundaries are the coarsest method. An error can affect the entire application, not just the component or group of components where the error occurred."}),"\n",(0,o.jsxs)(r.h2,{id:"using-the-react-error-boundary-library",children:["Using the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," Library"]}),"\n",(0,o.jsxs)(r.p,{children:["As mentioned earlier, React Error Boundaries have some limitations and cannot handle certain special cases. Below is a more powerful way to handle errors in React: the ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," library. It is a small React error handling library that provides enhanced error handling capabilities and more flexible methods to deal with errors in React applications, allowing developers to create stronger and user-friendly error handling mechanisms."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," uses a more modern approach, adopting React Hooks and functional components, aligning with the current trends in React development. It uses a simple component called ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," to wrap potentially error-prone code."]}),"\n",(0,o.jsxs)(r.p,{children:["Here are the props provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"FallbackComponent"}),": Used to specify a custom component to render when an error occurs within the error boundary. It offers flexibility to create a visually appealing and informative user interface to display errors and provide any necessary actions."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackRender"}),": Similar to ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", this prop is used to define a custom rendering function to render the error fallback interface. It provides more control over the rendering process and allows for more advanced error handling logic."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onError"}),": It accepts a callback function that is called when the error boundary catches an error, passing the error object and component stack trace information. It allows us to perform additional actions, such as logging errors or sending error reports to external services."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"onReset"}),": It accepts a callback function that is triggered after the error boundary successfully resets. It can be used to perform cleanup operations or update the component's state after an error is recovered."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"fallbackProps"}),": Allows passing additional ",(0,o.jsx)(r.code,{children:"props"})," to the ",(0,o.jsx)(r.code,{children:"FallbackComponent"})," or ",(0,o.jsx)(r.code,{children:"fallbackRender"})," function. It can be used to provide context or additional data to the error fallback interface."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"retry"}),": A boolean value that determines whether the error boundary allows retrying the operation that caused the error. When set to true, the ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function can be called from the error fallback interface to retry the operation."]}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"errorboundary-component",children:"ErrorBoundary Component"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component provided by ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has a prop called ",(0,o.jsx)(r.code,{children:"fallbackRender"}),", which accepts a function or a React element to display when an error is caught. Additionally, it provides a ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop that can reset the component's state when specific props change."]}),"\n",(0,o.jsxs)(r.p,{children:["The beauty of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is that it avoids the need to manually write class components and handle state, doing all the work in the background, allowing developers to focus on building the application. Here's an example of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a component:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction MyFallbackComponent({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent() {\n // Some component logic that might throw a JavaScript error\n}\n\nfunction App() {\n return (\n {\n // Cleanup application state\n }}\n resetKeys={['someKey']}\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, when an error is caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),", it renders ",(0,o.jsx)(r.code,{children:"MyFallbackComponent"}),". It displays the error message and provides a button to reset the error state and attempt to render the component again. The ",(0,o.jsx)(r.code,{children:"onReset"})," prop is used to clean up any side effects that occurred before the error was thrown, while the ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is used to control when the component state should be reset."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"onError"})," prop of ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," is a function that is called whenever an error is caught. This property can be used to report errors:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:'// Error reporting function\nfunction logErrorToService(error, info) {\n // Error reporting logic...\n console.error("Caught an error:", error, info);\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n'})}),"\n",(0,o.jsxs)(r.p,{children:["One of the most powerful features of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," is the ability to reset the error boundary state, clearing the error and attempting to re-render the component tree. This is very useful when the error is likely transient, such as a network error caused by a temporary disconnection."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetErrorBoundary"})," function provided to the fallback component can be used to reset the error boundary. For example, this function can be called on a button click, allowing users to manually retry a failed operation."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," can accept an ",(0,o.jsx)(r.code,{children:"onReset"})," prop, which is a function called before the error state is reset. This function is useful for performing any cleanup or state reset operations before the component is re-rendered after an error."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"resetKeys"})," prop is an array of values that, when changed, trigger a reset of the error boundary. This is useful when you know that changing certain ",(0,o.jsx)(r.code,{children:"props"})," or state values should resolve the error. Here's an example of how to use these properties:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { ErrorBoundary } from 'react-error-boundary'\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n return (\n
\n
Oops! Something went wrong:
\n
{error.message}
\n \n
\n )\n}\n\nfunction MyComponent({ someKey }) {\n // Some component logic that might throw a JS error\n}\n\nfunction App() {\n const [someKey, setSomeKey] = React.useState(null)\n\n return (\n setSomeKey(null)} // Reset application state here\n resetKeys={[someKey]} // Reset error boundary when someKey changes\n >\n \n \n )\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, if an error is caught within ",(0,o.jsx)(r.code,{children:"MyComponent"}),", the ",(0,o.jsx)(r.code,{children:"ErrorFallback"}),' component is rendered, displaying the error message and a "Try Again" button. When this button is clicked, it calls ',(0,o.jsx)(r.code,{children:"resetErrorBoundary"}),", triggering the ",(0,o.jsx)(r.code,{children:"onReset"})," function and clearing the error state, allowing ",(0,o.jsx)(r.code,{children:"MyComponent"})," to render again. If the ",(0,o.jsx)(r.code,{children:"someKey prop"})," changes, the error boundary will also reset, providing a flexible way to recover from errors based on changes in the application state."]}),"\n",(0,o.jsx)(r.h2,{id:"useerrorhandler-hook",children:"useErrorHandler Hook"}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"react-error-boundary"})," also provides a ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook, which is a custom React Hook that allows errors to be thrown from anywhere in a functional component. The thrown errors will be caught by the nearest error boundary, just as errors thrown from lifecycle methods or render functions in class components are caught by error boundaries."]}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," Hook is particularly useful when dealing with asynchronous code, as errors thrown in this manner are not caught by component error boundaries. Here's an example of using ",(0,o.jsx)(r.code,{children:"useErrorHandler"}),":"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { useErrorHandler } from 'react-error-boundary'\n\nfunction MyComponent() {\n const handleError = useErrorHandler()\n\n async function fetchData() {\n try {\n // Fetch data\n } catch (error) {\n handleError(error)\n }\n }\n\n return {\n ...\n };\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," uses ",(0,o.jsx)(r.code,{children:"useErrorHandler"})," to obtain a function for handling errors. The function is an asynchronous function for fetching data and catching errors. If an error occurs, it is passed to the ",(0,o.jsx)(r.code,{children:"handleError"})," function, which throws the error so it can be caught by ",(0,o.jsx)(r.code,{children:"ErrorBoundary"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"useErrorHandler"})," provides a powerful way to handle errors in functional components. It works seamlessly with the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component from ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", making error handling in React more straightforward and clear."]}),"\n",(0,o.jsx)(r.h2,{id:"witherrorboundary-hoc",children:"withErrorBoundary HOC"}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," package also offers a solution with a ",(0,o.jsx)(r.code,{children:"withErrorBoundary HOC"})," (Higher-Order Component). It is an HOC that wraps a given component to catch errors within that component. The advantage of this approach is that it adds an error boundary to a component without changing its original implementation or adding extra JSX to the component tree."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-javascript",children:"import { withErrorBoundary } from 'react-error-boundary'\n\nfunction MyComponent() {\n // Component logic\n}\n\nconst MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, {\n FallbackComponent: ErrorFallback,\n onError: logErrorToService,\n onReset: handleReset,\n resetKeys: ['someKey']\n});\n\nfunction App() {\n return \n}\n"})}),"\n",(0,o.jsxs)(r.p,{children:["In this example, ",(0,o.jsx)(r.code,{children:"MyComponent"})," is wrapped in an error boundary using ",(0,o.jsx)(r.code,{children:"withErrorBoundary"}),". The second argument to ",(0,o.jsx)(r.code,{children:"withErrorBoundary"})," is an optional object that can provide the same ",(0,o.jsx)(r.code,{children:"props"})," as the ",(0,o.jsx)(r.code,{children:"ErrorBoundary"})," component: ",(0,o.jsx)(r.code,{children:"FallbackComponent"}),", ",(0,o.jsx)(r.code,{children:"onError"}),", ",(0,o.jsx)(r.code,{children:"onReset"}),", and ",(0,o.jsx)(r.code,{children:"resetKeys"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:["This HOC approach is an elegant solution for adding error boundaries to components without modifying their implementation, especially useful for class components where ",(0,o.jsx)(r.code,{children:"Hooks"})," cannot be used. It demonstrates the flexibility of ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in adapting to different coding styles and React development paradigms."]}),"\n",(0,o.jsx)(r.h2,{id:"benefits",children:"Benefits"}),"\n",(0,o.jsxs)(r.p,{children:["Having looked at the basic usage of ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),", let's summarize the benefits of using ",(0,o.jsx)(r.code,{children:"react-error-boundary"}),":"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:"Easy to use: The library provides a simple and intuitive API that is easy to understand and use. It abstracts the complexity of error handling and presents a clear and straightforward way for developers to manage errors."}),"\n",(0,o.jsx)(r.li,{children:"Functional components friendly: Unlike traditional React error boundaries that require class components, react-error-boundary is designed specifically for functional components. It uses Hooks, aligning with the current trends in React development."}),"\n",(0,o.jsx)(r.li,{children:"Flexible: The library offers multiple ways to use error boundaries, including as components, higher-order components (HOCs), and custom Hooks. This flexibility allows developers to choose the best method based on their needs and coding style."}),"\n",(0,o.jsx)(r.li,{children:"Customizable fallback UI: The library allows for a customizable fallback UI to be displayed when an error is caught. This provides a better user experience than an application crash or a blank screen."}),"\n",(0,o.jsx)(r.li,{children:"Reset functionality: The library can reset the error state, allowing the application to recover from errors. This feature is particularly useful for transient errors that can be resolved without a full page reload."}),"\n",(0,o.jsxs)(r.li,{children:["Error reporting: Errors can be logged to an error reporting service through the ",(0,o.jsx)(r.code,{children:"onError"})," prop, providing valuable information for debugging and problem-solving."]}),"\n",(0,o.jsx)(r.li,{children:"Community and maintenance: The library is widely used in the React community and actively maintained, so regular updates and improvements can be expected."}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsxs)(r.p,{children:["Whether using class components or functional components, ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," has got you covered. Its flexible API includes components, higher-order components, and custom Hooks, providing multiple ways to integrate error handling into your components. Additionally, it supports custom fallback UIs, error reset functionality, and error reporting, ensuring a smooth user experience even when problems arise."]}),"\n",(0,o.jsxs)(r.p,{children:["Using ",(0,o.jsx)(r.code,{children:"react-error-boundary"})," in a React application can lead to more robust error handling and easier debugging. By employing this library, you can spend less time managing errors and more time focusing on building outstanding product features."]})]})}function h(e={}){const{wrapper:r}={...(0,t.a)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},7214:(e,r,n)=>{n.d(r,{Z:()=>s,a:()=>i});var o=n(959);const t={},a=o.createContext(t);function i(e){const r=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(a.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/f20664df.1577f94f.js b/assets/js/f20664df.1577f94f.js
deleted file mode 100644
index 7f0dde3839..0000000000
--- a/assets/js/f20664df.1577f94f.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[6355],{8804:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=t(1527),a=t(7214);const i={slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},l=void 0,s={permalink:"/illa-website/blog/internal-tool",source:"@site/blog/internal-tool/internal-tool.md",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.4,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},nextItem:{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",permalink:"/illa-website/blog/launch-flow"},relatedPosts:[{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"What ILLA Cloud Can Do",id:"what-illa-cloud-can-do",level:2},{value:"User Experience",id:"user-experience",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const o={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"Open-source tools are common, but it's rare to see one with 10,000 stars. I'm sharing a product that has seen a crazy growth of 10,000 stars overseas. There are many low-code tools, but few are truly useful. This tool is primarily used by developers in North America, and their Discord community is very active."}),"\n",(0,n.jsx)(o.p,{children:"The community indeed has some good reviews."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/good.png",alt:"good"})}),"\n",(0,n.jsx)(o.h2,{id:"what-illa-cloud-can-do",children:"What ILLA Cloud Can Do"}),"\n",(0,n.jsxs)(o.p,{children:["Github: ",(0,n.jsx)(o.a,{href:"https://illacloud.com/illacloud/illa-builder",children:"https://illacloud.com/illacloud/illa-builder"})]}),"\n",(0,n.jsxs)(o.p,{children:["Official Website: ",(0,n.jsx)(o.a,{href:"https://illa.cloud",children:"https://illa.cloud"})]}),"\n",(0,n.jsx)(o.p,{children:"The main users of ILLA Cloud are backend engineers, which might be different from what most people think. A large number of backend engineers have used ILLA Cloud to build numerous data panels and management backends. After all, web development has always been a headache for backend engineers. The tools built with ILLA Cloud are indeed quite aesthetically pleasing and fast."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/dashboard.png",alt:"dashboard"})}),"\n",(0,n.jsx)(o.p,{children:"ILLA also supports collaboration, allowing multiple people to edit a project together. Backend engineers no longer need to worry about building various internal backends. We all know the pain and tears of relying on front-end engineers."}),"\n",(0,n.jsx)(o.p,{children:"The official website also has some solutions, which currently seem to focus mainly on management backends, data panels, etc."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"AI text-to-image panel"}),"\n",(0,n.jsx)(o.li,{children:"AI voice processing panel"}),"\n",(0,n.jsx)(o.li,{children:"Data analysis panel"}),"\n",(0,n.jsx)(o.li,{children:"Content management CMS"}),"\n",(0,n.jsx)(o.li,{children:"Custom CRM"}),"\n",(0,n.jsx)(o.li,{children:"Management backend"}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/solution.png",alt:"solution"})}),"\n",(0,n.jsx)(o.p,{children:"They also support building workflows, and it seems they have done a lot of work in the low-code field, looking like a well-rounded product. It basically meets various common cases."}),"\n",(0,n.jsx)(o.p,{children:"For instance:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Sending a message to Slack when a new user registers"}),"\n",(0,n.jsx)(o.li,{children:"Daily reporting of the number of stars on GitHub"}),"\n",(0,n.jsx)(o.li,{children:"Daily booking of meeting rooms"}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"Engineers use ILLA Flow to automatically execute many tasks, such as:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"Reading business data from a database daily and sending it to Slack"}),"\n",(0,n.jsx)(o.li,{children:"Building CI/CD reporting systems"}),"\n",(0,n.jsx)(o.li,{children:"Sending emails when certain warnings occur"}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/flow.jpeg",alt:"flow"})}),"\n",(0,n.jsx)(o.h2,{id:"user-experience",children:"User Experience"}),"\n",(0,n.jsx)(o.p,{children:"I briefly experienced it, and they have really put a lot of effort into the editor's smoothness and overall experience. The overall editing experience is quite good. It includes smooth drag-and-drop capabilities and also supports collaboration."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/team.gif",alt:"collabration"})}),"\n",(0,n.jsx)(o.p,{children:"Various database integration capabilities are also supported, allowing quick data reading and writing from various data sources and databases. For backend engineers, integrating various services is indeed a nightmare. In this case, ILLA has already done the work. They also support integration with Huggingface, which seems like an official collaboration. It allows for quick use of the model capabilities on Huggingface, which is indeed interesting. You can quickly create some AI-driven tools."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/resource.png",alt:"resource"})}),"\n",(0,n.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(o.p,{children:'There are many low-code tools, but few can be practically used and implemented. ILLA seems to have been maintained for two years now, and their company is currently fully committed to this one thing. Unlike some low-code tools produced for certain purposes, they are directly addressing the needs of developers. Everyone can try it out!"'})]})}function u(e={}){const{wrapper:o}={...(0,a.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7214:(e,o,t)=>{t.d(o,{Z:()=>s,a:()=>l});var n=t(959);const a={},i=n.createContext(a);function l(e){const o=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function s(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/f20664df.8103dae9.js b/assets/js/f20664df.8103dae9.js
new file mode 100644
index 0000000000..4f8af9ee87
--- /dev/null
+++ b/assets/js/f20664df.8103dae9.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[6355],{8804:(e,o,n)=>{n.r(o),n.d(o,{assets:()=>r,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>s,toc:()=>c});var t=n(1527),a=n(7214);const l={slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},i=void 0,s={permalink:"/illa-website/blog/internal-tool",source:"@site/blog/internal-tool/internal-tool.md",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",date:"2024-01-05T10:00:00.000Z",formattedDate:"January 5, 2024",tags:[{label:"nvm",permalink:"/illa-website/blog/tags/nvm"},{label:"nodejs",permalink:"/illa-website/blog/tags/nodejs"},{label:"mac",permalink:"/illa-website/blog/tags/mac"},{label:"javascript",permalink:"/illa-website/blog/tags/javascript"}],readingTime:2.4,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"internal-tool",title:"Best Open-Source Low-Code Platform for Building Internal Tools",description:"Open-source tools are common, but it's rare to see one with 10,000 stars.",authors:["owen"],image:"https://cdn.illacloud.com/illa-website/blog/popular-tool/cover.png",tags:["nvm","nodejs","mac","javascript"],date:"2024-01-05T10:00"},unlisted:!1,prevItem:{title:"The Best Tools for Building Crud Applications in 2024",permalink:"/illa-website/blog/the-best-tools-for-build-crud-applications"},nextItem:{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",permalink:"/illa-website/blog/launch-flow"},relatedPosts:[{title:"2024 has arrived, should I choose MUI?",description:"Every company has its own exclusive online business, and as the business continues to update and iterate.",permalink:"/illa-website/blog/mui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.255,date:"2024-01-03T10:00:00.000Z"},{title:"Elegant Use of nvm for Node.js Management on Mac in 2024",description:'Node.js, as the foundation of frontend capabilities, is no longer just a "JS Server Runtime."',permalink:"/illa-website/blog/nvm-use-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:4.035,date:"2024-01-03T10:00:00.000Z"},{title:"2024 has arrived, should I choose Shadcn UI?",description:"2024 has arrived, and the ecosystem of React component libraries remains vibrant.",permalink:"/illa-website/blog/shadcn-ui-2024",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.96,date:"2024-01-03T10:00:00.000Z"}],authorPosts:[]},r={authorsImageUrls:[void 0]},c=[{value:"What ILLA Cloud Can Do",id:"what-illa-cloud-can-do",level:2},{value:"User Experience",id:"user-experience",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const o={a:"a",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.p,{children:"Open-source tools are common, but it's rare to see one with 10,000 stars. I'm sharing a product that has seen a crazy growth of 10,000 stars overseas. There are many low-code tools, but few are truly useful. This tool is primarily used by developers in North America, and their Discord community is very active."}),"\n",(0,t.jsx)(o.p,{children:"The community indeed has some good reviews."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/good.png",alt:"good"})}),"\n",(0,t.jsx)(o.h2,{id:"what-illa-cloud-can-do",children:"What ILLA Cloud Can Do"}),"\n",(0,t.jsxs)(o.p,{children:["Github: ",(0,t.jsx)(o.a,{href:"https://illacloud.com/illacloud/illa-builder",children:"https://illacloud.com/illacloud/illa-builder"})]}),"\n",(0,t.jsxs)(o.p,{children:["Official Website: ",(0,t.jsx)(o.a,{href:"https://illa.cloud",children:"https://illa.cloud"})]}),"\n",(0,t.jsx)(o.p,{children:"The main users of ILLA Cloud are backend engineers, which might be different from what most people think. A large number of backend engineers have used ILLA Cloud to build numerous data panels and management backends. After all, web development has always been a headache for backend engineers. The tools built with ILLA Cloud are indeed quite aesthetically pleasing and fast."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/dashboard.png",alt:"dashboard"})}),"\n",(0,t.jsx)(o.p,{children:"ILLA also supports collaboration, allowing multiple people to edit a project together. Backend engineers no longer need to worry about building various internal backends. We all know the pain and tears of relying on front-end engineers."}),"\n",(0,t.jsx)(o.p,{children:"The official website also has some solutions, which currently seem to focus mainly on management backends, data panels, etc."}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"AI text-to-image panel"}),"\n",(0,t.jsx)(o.li,{children:"AI voice processing panel"}),"\n",(0,t.jsx)(o.li,{children:"Data analysis panel"}),"\n",(0,t.jsx)(o.li,{children:"Content management CMS"}),"\n",(0,t.jsx)(o.li,{children:"Custom CRM"}),"\n",(0,t.jsx)(o.li,{children:"Management backend"}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/solution.png",alt:"solution"})}),"\n",(0,t.jsx)(o.p,{children:"They also support building workflows, and it seems they have done a lot of work in the low-code field, looking like a well-rounded product. It basically meets various common cases."}),"\n",(0,t.jsx)(o.p,{children:"For instance:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"Sending a message to Slack when a new user registers"}),"\n",(0,t.jsx)(o.li,{children:"Daily reporting of the number of stars on GitHub"}),"\n",(0,t.jsx)(o.li,{children:"Daily booking of meeting rooms"}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:"Engineers use ILLA Flow to automatically execute many tasks, such as:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"Reading business data from a database daily and sending it to Slack"}),"\n",(0,t.jsx)(o.li,{children:"Building CI/CD reporting systems"}),"\n",(0,t.jsx)(o.li,{children:"Sending emails when certain warnings occur"}),"\n"]}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/flow.jpeg",alt:"flow"})}),"\n",(0,t.jsx)(o.h2,{id:"user-experience",children:"User Experience"}),"\n",(0,t.jsx)(o.p,{children:"I briefly experienced it, and they have really put a lot of effort into the editor's smoothness and overall experience. The overall editing experience is quite good. It includes smooth drag-and-drop capabilities and also supports collaboration."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/team.gif",alt:"collabration"})}),"\n",(0,t.jsx)(o.p,{children:"Various database integration capabilities are also supported, allowing quick data reading and writing from various data sources and databases. For backend engineers, integrating various services is indeed a nightmare. In this case, ILLA has already done the work. They also support integration with Huggingface, which seems like an official collaboration. It allows for quick use of the model capabilities on Huggingface, which is indeed interesting. You can quickly create some AI-driven tools."}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{src:"https://cdn.illacloud.com/illa-website/blog/popular-tool/resource.png",alt:"resource"})}),"\n",(0,t.jsx)(o.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,t.jsx)(o.p,{children:'There are many low-code tools, but few can be practically used and implemented. ILLA seems to have been maintained for two years now, and their company is currently fully committed to this one thing. Unlike some low-code tools produced for certain purposes, they are directly addressing the needs of developers. Everyone can try it out!"'})]})}function u(e={}){const{wrapper:o}={...(0,a.a)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7214:(e,o,n)=>{n.d(o,{Z:()=>s,a:()=>i});var t=n(959);const a={},l=t.createContext(a);function i(e){const o=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function s(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(l.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/f7394536.0a767525.js b/assets/js/f7394536.0a767525.js
deleted file mode 100644
index 57b7a6e378..0000000000
--- a/assets/js/f7394536.0a767525.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9523],{4034:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var i=o(1527),s=o(7214);const a={slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},n=void 0,l={permalink:"/illa-website/blog/low-code-crm",source:"@site/blog/low-code-crm/low-code-crm.md",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code crm",permalink:"/illa-website/blog/tags/low-code-crm"}],readingTime:3.76,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},nextItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},relatedPosts:[],authorPosts:[{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"Low Code vs Traditional Development: Optimal Efficiency in Choice",description:"With the continuous evolution of development practices, the advent of low-code tools has introduced innovative solutions to various development scenarios.",permalink:"/illa-website/blog/lowcode-vs-traditional",formattedDate:"January 3, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:3.33,date:"2024-01-03T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"Why Build Your Own CRM?",id:"why-build-your-own-crm",level:2},{value:"Advantages of Low-Code Platforms",id:"advantages-of-low-code-platforms",level:2},{value:"Building CRM with ILLA Cloud",id:"building-crm-with-illa-cloud",level:2},{value:"Advantages of ILLA Cloud",id:"advantages-of-illa-cloud",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems. The main advantage of low-code platforms lies in their ability to rapidly iterate. This rapid iteration is key to swiftly responding to market changes, which in turn leads to quick market share acquisition. Gaining market share rapidly is essential for fast capital acquisition, and this swift capital influx fuels further rapid iteration. This cycle positions low-code platforms as the preferred choice for businesses to develop their operational systems in the coming years."}),"\n",(0,i.jsx)(t.p,{children:"Customer Relationship Management (CRM), a system essential for every business, stands as a significant application scenario for low-code platforms. This article will explore how to build a CRM system using a low-code platform."}),"\n",(0,i.jsx)(t.h2,{id:"why-build-your-own-crm",children:"Why Build Your Own CRM?"}),"\n",(0,i.jsx)(t.p,{children:"While every business requires a CRM system, the ones currently available in the market are either too complex or overly simplistic, making it hard to meet specific business needs. As a result, many businesses opt to build their own CRM systems."}),"\n",(0,i.jsx)(t.p,{children:"Using low-code tools to build a CRM system allows for rapid iteration and swift response to market changes. This cycle cements the future of low-code platforms as the go-to solution for businesses developing operational systems."}),"\n",(0,i.jsx)(t.p,{children:"The flexible capabilities of low-code allow for quick, from-the-ground-up construction of fully customized CRM tools tailored to a company's unique requirements."}),"\n",(0,i.jsx)(t.h2,{id:"advantages-of-low-code-platforms",children:"Advantages of Low-Code Platforms"}),"\n",(0,i.jsx)(t.p,{children:"The primary advantage of low-code platforms is their ability to facilitate rapid iteration. This rapid iteration is crucial for quick response to market changes, which leads to swift market share and capital acquisition, feeding back into more rapid iteration. This cycle ensures that low-code platforms will remain the preferred choice for businesses building operational systems in the near future."}),"\n",(0,i.jsx)(t.p,{children:"Building a CRM with low-code means focusing solely on business logic without worrying about operational costs or design styles. It empowers everyone to develop customized systems for their company and team."}),"\n",(0,i.jsx)(t.p,{children:"Moreover, these systems are aesthetically pleasing and easily modifiable."}),"\n",(0,i.jsx)(t.h2,{id:"building-crm-with-illa-cloud",children:"Building CRM with ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud is a low-code platform that helps businesses quickly build their operational systems. It offers a wide range of components, enabling the rapid construction of business systems."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/crm.webp",alt:"crm"})}),"\n",(0,i.jsx)(t.p,{children:"The system built with ILLA Cloud offers several features:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Customer management"}),"\n",(0,i.jsx)(t.li,{children:"Progress tracking"}),"\n",(0,i.jsx)(t.li,{children:"Data report management"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"As a low-code tool, ILLA Cloud allows for unlimited customization, enabling the creation of bespoke features unique to a company."}),"\n",(0,i.jsx)(t.p,{children:"With drag-and-drop simplicity, ILLA Cloud enables rapid construction of custom UIs, allowing users to create a fully-functional low-code CRM in just minutes. This platform boasts an extensive array of common components, coupled with the ability to pull data from any database or data source. Therefore, choosing ILLA Cloud for building a low-code CRM is an exceptionally sound decision."}),"\n",(0,i.jsx)(t.p,{children:"The platform's user-friendly interface simplifies the CRM creation process, making it accessible even to those with minimal technical expertise. The vast selection of components ensures that every necessary feature can be easily integrated into the CRM system, tailored to specific business requirements."}),"\n",(0,i.jsx)(t.p,{children:"Furthermore, the seamless integration with various databases and data sources empowers businesses to consolidate and utilize their data efficiently, enhancing the CRM's effectiveness. This capability is crucial for businesses aiming to maintain a comprehensive and up-to-date customer database, which is at the core of any successful CRM system."}),"\n",(0,i.jsx)(t.p,{children:"In summary, ILLA Cloud's combination of ease-of-use, comprehensive component selection, and robust data integration capabilities makes it a top-tier choice for businesses looking to implement a low-code CRM solution."}),"\n",(0,i.jsx)(t.h2,{id:"advantages-of-illa-cloud",children:"Advantages of ILLA Cloud"}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud enables quick Web UI construction through drag-and-drop, eliminating the need for complex web technology skills. This accessibility allows anyone to create their own business systems."}),"\n",(0,i.jsx)(t.p,{children:"It requires no operational skills, as all products are fully hosted on the ILLA Cloud, eliminating operational costs."}),"\n",(0,i.jsx)(t.p,{children:"ILLA Cloud supports collaborative team updates without any additional tools."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/team.gif",alt:"team"})}),"\n",(0,i.jsx)(t.p,{children:"ILLA also integrates complete AI capabilities. If there's a need to send text messages to customers, users can directly use the latest AI Agent within the product."}),"\n",(0,i.jsx)(t.p,{children:"We believe that building AI-Driven Business Tools is the future's preferred method."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/send.gif",alt:"send"})}),"\n",(0,i.jsx)(t.p,{children:"Flexibility has always been a strength of low-code tools, and we offer industry-leading solutions to help users quickly create their corresponding products. We hope that low-code can assist every developer in building their own low-code CRM."}),"\n",(0,i.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(t.p,{children:"Every company should have its own low-code CRM, as customized needs and capabilities are key to flexible operations. We hope everyone can rapidly build business tools using low-code tools."})]})}function u(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>n});var i=o(959);const s={},a=i.createContext(s);function n(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:n(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/f7394536.4c493f76.js b/assets/js/f7394536.4c493f76.js
new file mode 100644
index 0000000000..a11e83b152
--- /dev/null
+++ b/assets/js/f7394536.4c493f76.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[9523],{4034:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>n,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var s=o(1527),i=o(7214);const a={slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},n=void 0,l={permalink:"/illa-website/blog/low-code-crm",source:"@site/blog/low-code-crm/low-code-crm.md",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",date:"2024-01-04T10:00:00.000Z",formattedDate:"January 4, 2024",tags:[{label:"low code crm",permalink:"/illa-website/blog/tags/low-code-crm"}],readingTime:3.76,hasTruncateMarker:!1,authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],frontMatter:{slug:"low-code-crm",title:"How to build a custom low code CRM in 2024",description:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems.",authors:"owen",image:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/cover.png",tags:["low code crm"],date:"2024-01-04T10:00"},unlisted:!1,prevItem:{title:"How to list tables in PostgreSQL",permalink:"/illa-website/blog/list-tables-in-postgresql"},nextItem:{title:"Best product designed for backend engineers to create business tools",permalink:"/illa-website/blog/backend-create-web-ui"},relatedPosts:[],authorPosts:[{title:"Best tools for IT Support",description:"In ordinary companies, the IT department's Technical Support is responsible for managing the company's information system, database",permalink:"/illa-website/blog/it-support",formattedDate:"January 23, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:8.025,date:"2024-01-23T20:00:00.000Z"},{title:"How to list tables in PostgreSQL",description:"This article introduces two methods to list tables in a PostgreSQL database. PostgreSQL provides two ways to list all tables in a database.",permalink:"/illa-website/blog/list-tables-in-postgresql",formattedDate:"January 4, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:2.91,date:"2024-01-04T10:00:00.000Z"},{title:"ILLA Flow: A javascript-driven, developer-friendly product for creating automate workflow",description:"ILLA Flow is a workflow product that allows you to construct a complete workflow in a manner similar to mind mapping.",permalink:"/illa-website/blog/launch-flow",formattedDate:"January 5, 2024",authors:[{name:"Owen Chen",title:"CEO",url:"https://github.com/smallSohoSolo",imageURL:"https://avatars.githubusercontent.com/u/7929686?v=4",key:"owen"}],readingTime:1.91,date:"2024-01-05T10:00:00.000Z"}]},r={authorsImageUrls:[void 0]},c=[{value:"Why Build Your Own CRM?",id:"why-build-your-own-crm",level:2},{value:"Advantages of Low-Code Platforms",id:"advantages-of-low-code-platforms",level:2},{value:"Building CRM with ILLA Cloud",id:"building-crm-with-illa-cloud",level:2},{value:"Advantages of ILLA Cloud",id:"advantages-of-illa-cloud",level:2},{value:"Conclusion",id:"conclusion",level:2}];function d(e){const t={h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"With the evolution of low-code platforms, an increasing number of businesses are turning to these platforms to build their operational systems. The main advantage of low-code platforms lies in their ability to rapidly iterate. This rapid iteration is key to swiftly responding to market changes, which in turn leads to quick market share acquisition. Gaining market share rapidly is essential for fast capital acquisition, and this swift capital influx fuels further rapid iteration. This cycle positions low-code platforms as the preferred choice for businesses to develop their operational systems in the coming years."}),"\n",(0,s.jsx)(t.p,{children:"Customer Relationship Management (CRM), a system essential for every business, stands as a significant application scenario for low-code platforms. This article will explore how to build a CRM system using a low-code platform."}),"\n",(0,s.jsx)(t.h2,{id:"why-build-your-own-crm",children:"Why Build Your Own CRM?"}),"\n",(0,s.jsx)(t.p,{children:"While every business requires a CRM system, the ones currently available in the market are either too complex or overly simplistic, making it hard to meet specific business needs. As a result, many businesses opt to build their own CRM systems."}),"\n",(0,s.jsx)(t.p,{children:"Using low-code tools to build a CRM system allows for rapid iteration and swift response to market changes. This cycle cements the future of low-code platforms as the go-to solution for businesses developing operational systems."}),"\n",(0,s.jsx)(t.p,{children:"The flexible capabilities of low-code allow for quick, from-the-ground-up construction of fully customized CRM tools tailored to a company's unique requirements."}),"\n",(0,s.jsx)(t.h2,{id:"advantages-of-low-code-platforms",children:"Advantages of Low-Code Platforms"}),"\n",(0,s.jsx)(t.p,{children:"The primary advantage of low-code platforms is their ability to facilitate rapid iteration. This rapid iteration is crucial for quick response to market changes, which leads to swift market share and capital acquisition, feeding back into more rapid iteration. This cycle ensures that low-code platforms will remain the preferred choice for businesses building operational systems in the near future."}),"\n",(0,s.jsx)(t.p,{children:"Building a CRM with low-code means focusing solely on business logic without worrying about operational costs or design styles. It empowers everyone to develop customized systems for their company and team."}),"\n",(0,s.jsx)(t.p,{children:"Moreover, these systems are aesthetically pleasing and easily modifiable."}),"\n",(0,s.jsx)(t.h2,{id:"building-crm-with-illa-cloud",children:"Building CRM with ILLA Cloud"}),"\n",(0,s.jsx)(t.p,{children:"ILLA Cloud is a low-code platform that helps businesses quickly build their operational systems. It offers a wide range of components, enabling the rapid construction of business systems."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/crm.webp",alt:"crm"})}),"\n",(0,s.jsx)(t.p,{children:"The system built with ILLA Cloud offers several features:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Customer management"}),"\n",(0,s.jsx)(t.li,{children:"Progress tracking"}),"\n",(0,s.jsx)(t.li,{children:"Data report management"}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"As a low-code tool, ILLA Cloud allows for unlimited customization, enabling the creation of bespoke features unique to a company."}),"\n",(0,s.jsx)(t.p,{children:"With drag-and-drop simplicity, ILLA Cloud enables rapid construction of custom UIs, allowing users to create a fully-functional low-code CRM in just minutes. This platform boasts an extensive array of common components, coupled with the ability to pull data from any database or data source. Therefore, choosing ILLA Cloud for building a low-code CRM is an exceptionally sound decision."}),"\n",(0,s.jsx)(t.p,{children:"The platform's user-friendly interface simplifies the CRM creation process, making it accessible even to those with minimal technical expertise. The vast selection of components ensures that every necessary feature can be easily integrated into the CRM system, tailored to specific business requirements."}),"\n",(0,s.jsx)(t.p,{children:"Furthermore, the seamless integration with various databases and data sources empowers businesses to consolidate and utilize their data efficiently, enhancing the CRM's effectiveness. This capability is crucial for businesses aiming to maintain a comprehensive and up-to-date customer database, which is at the core of any successful CRM system."}),"\n",(0,s.jsx)(t.p,{children:"In summary, ILLA Cloud's combination of ease-of-use, comprehensive component selection, and robust data integration capabilities makes it a top-tier choice for businesses looking to implement a low-code CRM solution."}),"\n",(0,s.jsx)(t.h2,{id:"advantages-of-illa-cloud",children:"Advantages of ILLA Cloud"}),"\n",(0,s.jsx)(t.p,{children:"ILLA Cloud enables quick Web UI construction through drag-and-drop, eliminating the need for complex web technology skills. This accessibility allows anyone to create their own business systems."}),"\n",(0,s.jsx)(t.p,{children:"It requires no operational skills, as all products are fully hosted on the ILLA Cloud, eliminating operational costs."}),"\n",(0,s.jsx)(t.p,{children:"ILLA Cloud supports collaborative team updates without any additional tools."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/team.gif",alt:"team"})}),"\n",(0,s.jsx)(t.p,{children:"ILLA also integrates complete AI capabilities. If there's a need to send text messages to customers, users can directly use the latest AI Agent within the product."}),"\n",(0,s.jsx)(t.p,{children:"We believe that building AI-Driven Business Tools is the future's preferred method."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://cdn.illacloud.com/illa-website/blog/low-code-crm/send.gif",alt:"send"})}),"\n",(0,s.jsx)(t.p,{children:"Flexibility has always been a strength of low-code tools, and we offer industry-leading solutions to help users quickly create their corresponding products. We hope that low-code can assist every developer in building their own low-code CRM."}),"\n",(0,s.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(t.p,{children:"Every company should have its own low-code CRM, as customized needs and capabilities are key to flexible operations. We hope everyone can rapidly build business tools using low-code tools."})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7214:(e,t,o)=>{o.d(t,{Z:()=>l,a:()=>n});var s=o(959);const i={},a=s.createContext(i);function n(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/main.c4859acd.js b/assets/js/main.55d4a4cd.js
similarity index 62%
rename from assets/js/main.c4859acd.js
rename to assets/js/main.55d4a4cd.js
index add2672327..252f1acdf8 100644
--- a/assets/js/main.c4859acd.js
+++ b/assets/js/main.55d4a4cd.js
@@ -1,2 +1,2 @@
-/*! For license information please see main.c4859acd.js.LICENSE.txt */
-(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[179],{1422:(e,t,n)=>{var a={"./":1884};function o(e){var t=i(e);return n(t)}function i(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=i,e.exports=o,o.id=1422},6002:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(959);var a=n(7558),o=n.n(a),i=n(6887);const r={"0104b3a5":[()=>Promise.all([n.e(532),n.e(4692),n.e(1205)]).then(n.bind(n,2048)),"@site/src/pages/components/List/index.tsx",2048],"012c936c":[()=>n.e(1383).then(n.t.bind(n,383,19)),"~blog/default/illa-website-blog-tags-traditional-development-b40.json",383],"013bc832":[()=>n.e(8293).then(n.bind(n,573)),"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md?truncated=true",573],"01a85c17":[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(4013)]).then(n.bind(n,5602)),"@theme/BlogTagsListPage",5602],"01bd692b":[()=>Promise.all([n.e(532),n.e(4692),n.e(8550)]).then(n.bind(n,9451)),"@site/src/pages/components/Switch/index.tsx",9451],"0287bb30":[()=>n.e(5357).then(n.bind(n,5399)),"@site/src/pages/solutions-image-generator.mdx",5399],"03598c98":[()=>Promise.all([n.e(532),n.e(4692),n.e(4530)]).then(n.bind(n,406)),"@site/src/pages/components/Statistics/index.tsx",406],"03958142":[()=>n.e(5479).then(n.bind(n,9372)),"@site/blog/automate-send-to-slack/automate-send-to-slack.md?truncated=true",9372],"03d60dda":[()=>Promise.all([n.e(532),n.e(4692),n.e(1618)]).then(n.bind(n,489)),"@site/src/pages/components/Divider/index.tsx",489],"03dad041":[()=>n.e(3815).then(n.bind(n,7909)),"@site/blog/web-worker-tutorial/web-worker-tutorial.md?truncated=true",7909],"045d4d91":[()=>n.e(326).then(n.bind(n,1404)),"@site/blog/best-citizen-developer-tool/best-citizen-developer-tool.md",1404],"050ff1a7":[()=>n.e(4651).then(n.bind(n,3541)),"@site/blog/tooljet-vs-retool/tooljet-vs-retool.md?truncated=true",3541],"09e4ef32":[()=>n.e(4934).then(n.t.bind(n,546,19)),"~blog/default/illa-website-blog-tags-list-171-list.json",546],"0b153274":[()=>n.e(6591).then(n.bind(n,5858)),"@site/blog/web-worker-tutorial/web-worker-tutorial.md",5858],"0d8e277f":[()=>n.e(6394).then(n.t.bind(n,7618,19)),"~blog/default/illa-website-blog-tags-gui-0ae-list.json",7618],"0dbcbd61":[()=>n.e(6524).then(n.t.bind(n,1755,19)),"~blog/default/illa-website-blog-tags-citizen-development-4cc-list.json",1755],"1096d3fa":[()=>n.e(4314).then(n.t.bind(n,2931,19)),"~blog/default/illa-website-blog-tags-isnotnull-9a7-list.json",2931],"11f28d89":[()=>n.e(7228).then(n.bind(n,5922)),"@site/blog/internal-tool/internal-tool.md?truncated=true",5922],"125074f4":[()=>n.e(7919).then(n.t.bind(n,1782,19)),"~blog/default/illa-website-blog-tags-react-a30-list.json",1782],"12ea746a":[()=>n.e(4321).then(n.t.bind(n,9326,19)),"~blog/default/illa-website-blog-tags-workflow-866-list.json",9326],"136b15b7":[()=>n.e(3383).then(n.t.bind(n,7654,19)),"~blog/default/illa-website-blog-tags-postgres-93f.json",7654],"1704a5d7":[()=>Promise.all([n.e(532),n.e(4692),n.e(5055),n.e(7596)]).then(n.bind(n,3135)),"@site/src/pages/illa-flow/index.tsx",3135],"17fb53e2":[()=>Promise.all([n.e(532),n.e(4692),n.e(4893)]).then(n.bind(n,2439)),"@site/src/pages/integrations/OracleDB/index.tsx",2439],"1842627e":[()=>n.e(5037).then(n.bind(n,2640)),"@site/blog/mui-2024/mui.md",2640],"188c27a7":[()=>Promise.all([n.e(532),n.e(4692),n.e(6921)]).then(n.bind(n,7108)),"@site/src/pages/components/index.tsx",7108],"1a8a7a6e":[()=>n.e(4272).then(n.t.bind(n,533,19)),"~blog/default/illa-website-blog-tags-postgresql-fa9-list.json",533],"1b46aaf4":[()=>n.e(7663).then(n.bind(n,7856)),"@site/blog/it-support/it-support.md?truncated=true",7856],"1b97b52f":[()=>Promise.all([n.e(532),n.e(4692),n.e(2833)]).then(n.bind(n,7880)),"@site/src/pages/components/Input/index.tsx",7880],"1d9dae67":[()=>n.e(4630).then(n.t.bind(n,8064,19)),"~blog/default/illa-website-blog-tags-javascript-8bf-list.json",8064],"1df93b7f":[()=>Promise.all([n.e(532),n.e(4692),n.e(5708),n.e(3237)]).then(n.bind(n,7919)),"@site/src/pages/index.tsx",7919],"1e617043":[()=>n.e(5024).then(n.t.bind(n,5717,19)),"~blog/default/illa-website-blog-tags-mac-7c4.json",5717],"215a4d9d":[()=>n.e(6729).then(n.t.bind(n,2315,19)),"~blog/default/illa-website-blog-tags-slack-fd6.json",2315],"21c37781":[()=>n.e(7740).then(n.t.bind(n,8416,19)),"~blog/default/illa-website-blog-tags-automate-e37-list.json",8416],"22c43f24":[()=>n.e(2929).then(n.t.bind(n,6569,19)),"~blog/default/illa-website-blog-tags-upwork-ad3-list.json",6569],"25bbf118":[()=>Promise.all([n.e(532),n.e(4692),n.e(7277)]).then(n.bind(n,5013)),"@site/src/pages/components/Modal/index.tsx",5013],"25c2fb8d":[()=>n.e(2388).then(n.t.bind(n,2063,19)),"~blog/default/illa-website-blog-tags-gui-0ae.json",2063],"25ffa5da":[()=>Promise.all([n.e(532),n.e(4692),n.e(4417)]).then(n.bind(n,716)),"@site/src/pages/components/DateRange/index.tsx",716],"26b5cf84":[()=>n.e(3962).then(n.t.bind(n,7579,19)),"~blog/default/illa-website-blog-tags-library-35c.json",7579],"279770d6":[()=>Promise.all([n.e(532),n.e(4692),n.e(7654)]).then(n.bind(n,6829)),"@site/src/pages/pricing/index.tsx",6829],"2864c10f":[()=>Promise.all([n.e(532),n.e(4692),n.e(5923),n.e(3807)]).then(n.bind(n,3712)),"@theme/SolutionsPage",3712],"2937fddb":[()=>Promise.all([n.e(532),n.e(4692),n.e(7559)]).then(n.bind(n,5430)),"@site/src/pages/integrations/HuggingFaceInferenceEndpoint/index.tsx",5430],"295047b8":[()=>n.e(9282).then(n.t.bind(n,9725,19)),"~blog/default/illa-website-blog-tags-tables-53a-list.json",9725],"296b0df1":[()=>n.e(1328).then(n.t.bind(n,7516,19)),"~blog/default/illa-website-blog-tags-tables-53a.json",7516],"2a89cc7d":[()=>n.e(4131).then(n.t.bind(n,5333,19)),"~blog/default/illa-website-blog-tags-ui-library-318-list.json",5333],"2bab37f9":[()=>n.e(8563).then(n.t.bind(n,7859,19)),"~blog/default/illa-website-blog-tags-tags-0b0.json",7859],"2d1ec1f7":[()=>Promise.all([n.e(532),n.e(4692),n.e(4664)]).then(n.bind(n,9400)),"@site/src/pages/integrations/MicrosoftSQLServer/index.tsx",9400],"2f0deb5b":[()=>n.e(3988).then(n.t.bind(n,4916,19)),"~blog/default/illa-website-blog-tags-ui-library-318.json",4916],"302c1f6e":[()=>n.e(2338).then(n.t.bind(n,2996,19)),"~blog/default/illa-website-blog-tags-fiverr-37f-list.json",2996],30834002:[()=>Promise.all([n.e(532),n.e(4692),n.e(7949)]).then(n.bind(n,2150)),"@site/src/pages/components/Tabs/index.tsx",2150],"30da2238":[()=>Promise.all([n.e(532),n.e(4692),n.e(7906)]).then(n.bind(n,7201)),"@site/src/pages/integrations/Clickhouse/index.tsx",7201],31168439:[()=>n.e(7346).then(n.t.bind(n,925,19)),"~blog/default/illa-website-blog-tags-database-931-list.json",925],"31eafaf9":[()=>n.e(3581).then(n.bind(n,2040)),"@site/blog/shadcn-ui-vs-mui/shadcn-ui-vs-mui.md",2040],"3217f671":[()=>n.e(6455).then(n.t.bind(n,1795,19)),"~blog/default/illa-website-blog-tags-tooljet-356.json",1795],"32e52b4a":[()=>n.e(218).then(n.t.bind(n,7938,19)),"~blog/default/illa-website-blog-tags-isnotnull-9a7.json",7938],"3398d68b":[()=>n.e(4114).then(n.t.bind(n,2727,19)),"~blog/default/illa-website-blog-tags-crud-a07.json",2727],"34d0e50f":[()=>n.e(5385).then(n.t.bind(n,5745,19)),"/home/runner/work/illa-website/illa-website/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"354dfbd1":[()=>n.e(8248).then(n.bind(n,5209)),"@site/blog/top5-low-code-2024/top5-low-code-2024.md?truncated=true",5209],"35e17217":[()=>n.e(5290).then(n.bind(n,7680)),"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md?truncated=true",7680],"38806fe8":[()=>Promise.all([n.e(532),n.e(4692),n.e(9248)]).then(n.bind(n,7179)),"@site/src/pages/integrations/PostgreSQL/index.tsx",7179],"3ae00f65":[()=>n.e(916).then(n.t.bind(n,6083,19)),"~blog/default/illa-website-blog-tags-internal-tools-465.json",6083],"3c0acf44":[()=>n.e(9348).then(n.t.bind(n,6987,19)),"~blog/default/illa-website-blog-tags-psql-ade.json",6987],"3d113612":[()=>n.e(1819).then(n.bind(n,7102)),"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md",7102],"3d6ccfd0":[()=>Promise.all([n.e(532),n.e(4692),n.e(7543)]).then(n.bind(n,2667)),"@site/src/pages/components/Video/index.tsx",2667],"3dca0203":[()=>n.e(5694).then(n.bind(n,1077)),"@site/blog/top5-low-code-2024/top5-low-code-2024.md",1077],"3fee51a2":[()=>Promise.all([n.e(532),n.e(4692),n.e(7155)]).then(n.bind(n,2974)),"@site/src/pages/components/Form/index.tsx",2974],"40c20836":[()=>n.e(2391).then(n.bind(n,3490)),"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md?truncated=true",3490],41685197:[()=>Promise.all([n.e(532),n.e(4692),n.e(4610)]).then(n.bind(n,3608)),"@site/src/pages/integrations/TiDB/index.tsx",3608],"4486a1a1":[()=>n.e(2657).then(n.t.bind(n,3527,19)),"~blog/default/illa-website-blog-tags-traditional-development-b40-list.json",3527],"451bfe05":[()=>Promise.all([n.e(532),n.e(4692),n.e(5162)]).then(n.bind(n,780)),"@site/src/pages/integrations/Hydra/index.tsx",780],45267849:[()=>Promise.all([n.e(532),n.e(4692),n.e(2136)]).then(n.bind(n,7417)),"@site/src/pages/integrations/MySQL/index.tsx",7417],"46a49447":[()=>Promise.all([n.e(532),n.e(4692),n.e(4771)]).then(n.bind(n,2208)),"@site/src/pages/components/CircleProgress/index.tsx",2208],"474ec535":[()=>Promise.all([n.e(532),n.e(4692),n.e(1055)]).then(n.bind(n,3886)),"@site/src/pages/components/PDF/index.tsx",3886],49586834:[()=>Promise.all([n.e(532),n.e(4692),n.e(852)]).then(n.bind(n,8292)),"@site/src/pages/components/Button/index.tsx",8292],"4a61f11b":[()=>n.e(9699).then(n.bind(n,1483)),"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md",1483],"4a83e123":[()=>n.e(6137).then(n.bind(n,8506)),"@site/blog/shadcn-ui-vs-mui/shadcn-ui-vs-mui.md?truncated=true",8506],"4ac275c7":[()=>Promise.all([n.e(532),n.e(4692),n.e(1679)]).then(n.bind(n,9098)),"@site/src/pages/integrations/CouchDB/index.tsx",9098],"4bb82d9d":[()=>n.e(9728).then(n.t.bind(n,5920,19)),"~blog/default/illa-website-blog-tags-low-code-crm-d49-list.json",5920],"4c3a04f4":[()=>Promise.all([n.e(532),n.e(4692),n.e(2578)]).then(n.bind(n,8532)),"@site/src/pages/components/Chart/index.tsx",8532],"4d8b029c":[()=>n.e(7465).then(n.bind(n,2983)),"@site/blog/appsmith-vs-retool/appsmith-vs-retool.md?truncated=true",2983],"4fb9e68b":[()=>n.e(2361).then(n.bind(n,4133)),"@site/blog/core-app-dashboard/core-app-dashboard.md?truncated=true",4133],"50cfa8ab":[()=>Promise.all([n.e(532),n.e(4692),n.e(9788)]).then(n.bind(n,7779)),"@site/src/pages/components/BarProgress/index.tsx",7779],"521f732f":[()=>n.e(875).then(n.t.bind(n,4299,19)),"~blog/default/illa-website-blog-tags-crud-a07-list.json",4299],"53015dc5":[()=>Promise.all([n.e(532),n.e(4692),n.e(8962)]).then(n.bind(n,4118)),"@site/src/pages/components/Menu/index.tsx",4118],"557198aa":[()=>n.e(4682).then(n.bind(n,7877)),"@site/blog/typescript-most-practical-features-compilation/typescript-most-practical-features-compilation.md?truncated=true",7877],"55813e94":[()=>n.e(8135).then(n.bind(n,8847)),"@site/blog/postgresql-select/postgresql-select.md",8847],"55af2e26":[()=>n.e(4030).then(n.t.bind(n,139,19)),"~blog/default/illa-website-blog-tags-redis-1fd-list.json",139],"56108f26":[()=>n.e(2841).then(n.bind(n,2291)),"@site/src/pages/solutions-crm.mdx",2291],"56cbb393":[()=>Promise.all([n.e(532),n.e(4692),n.e(7050)]).then(n.bind(n,4515)),"@site/src/pages/components/Select/index.tsx",4515],"5758dffb":[()=>Promise.all([n.e(532),n.e(4692),n.e(9982)]).then(n.bind(n,5421)),"@site/src/pages/components/EditableText/index.tsx",5421],"577b6af3":[()=>n.e(4669).then(n.bind(n,7575)),"@site/blog/boost-freelancer/boost-freelancer.md?truncated=true",7575],"57bece99":[()=>n.e(3570).then(n.t.bind(n,813,19)),"~blog/default/illa-website-blog-tags-retool-7ff.json",813],"589eda2e":[()=>Promise.all([n.e(532),n.e(4692),n.e(4556)]).then(n.bind(n,1566)),"@site/src/pages/integrations/AmazonDynamoDB/index.tsx",1566],"5a2987c2":[()=>n.e(3906).then(n.t.bind(n,3234,19)),"~blog/default/illa-website-blog-page-3-8f1.json",3234],"5c73698d":[()=>n.e(3625).then(n.t.bind(n,451,19)),"~blog/default/illa-website-blog-tags-shadcn-ui-69b.json",451],"5ca6070c":[()=>Promise.all([n.e(532),n.e(4692),n.e(2056)]).then(n.bind(n,5462)),"@site/src/pages/components/Textarea Input/index.tsx",5462],"5cd65baf":[()=>n.e(9239).then(n.bind(n,9590)),"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md?truncated=true",9590],"5d55e09c":[()=>n.e(6939).then(n.bind(n,860)),"@site/blog/raect-markdown/react-markdown.md",860],"5da532a1":[()=>n.e(8176).then(n.t.bind(n,2471,19)),"~blog/default/illa-website-blog-tags-core-app-dashboard-d97.json",2471],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5f78ec6a":[()=>n.e(3096).then(n.bind(n,2369)),"@site/blog/nvm-use/nvm-use.md",2369],"65f8b696":[()=>n.e(6567).then(n.t.bind(n,1321,19)),"~blog/default/illa-website-blog-tags-freelancer-c9a-list.json",1321],"6632b8cf":[()=>Promise.all([n.e(532),n.e(4692),n.e(9090)]).then(n.bind(n,786)),"@site/src/pages/components/Icon/index.tsx",786],"663dba65":[()=>n.e(1457).then(n.t.bind(n,4171,19)),"~blog/default/illa-website-blog-tags-tools-9e4-list.json",4171],67346627:[()=>n.e(4423).then(n.bind(n,6082)),"@site/src/pages/solutions-dashboard.mdx",6082],"6875c492":[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(8610)]).then(n.bind(n,2304)),"@theme/BlogTagsPostsPage",2304],"68c10dd5":[()=>Promise.all([n.e(532),n.e(4692),n.e(2714)]).then(n.bind(n,5886)),"@site/src/pages/integrations/Neon/index.tsx",5886],"6b7903a8":[()=>Promise.all([n.e(532),n.e(4692),n.e(9324)]).then(n.bind(n,3564)),"@site/src/pages/components/NumberInput/index.tsx",3564],"6d69edbe":[()=>n.e(8876).then(n.bind(n,5391)),"@site/blog/nvm-use/nvm-use.md?truncated=true",5391],"6e91fee9":[()=>Promise.all([n.e(532),n.e(4692),n.e(856)]).then(n.bind(n,2368)),"@site/src/pages/integrations/S3/index.tsx",2368],"718613d7":[()=>n.e(5775).then(n.t.bind(n,2682,19)),"~blog/default/illa-website-blog-tags-postgres-93f-list.json",2682],"7213c8c2":[()=>Promise.all([n.e(532),n.e(4692),n.e(3045)]).then(n.bind(n,9219)),"@site/src/pages/components/Timeline/index.tsx",9219],"72d3bf7a":[()=>n.e(4808).then(n.bind(n,2685)),"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md",2685],"733df29f":[()=>Promise.all([n.e(532),n.e(4692),n.e(8151)]).then(n.bind(n,3538)),"@site/src/pages/integrations/Appwrite/index.tsx",3538],"745ae684":[()=>n.e(1027).then(n.bind(n,6122)),"@site/blog/launch-flow/launch-flow.md",6122],"79c71fe4":[()=>n.e(2581).then(n.bind(n,618)),"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md",618],"7ac2b19c":[()=>n.e(2223).then(n.t.bind(n,350,19)),"~blog/default/illa-website-blog-tags-webworker-ced-list.json",350],"7b91dc2c":[()=>Promise.all([n.e(532),n.e(4692),n.e(7448)]).then(n.bind(n,5764)),"@site/src/pages/integrations/MariaDB/index.tsx",5764],"7d02bed8":[()=>Promise.all([n.e(532),n.e(4692),n.e(7832)]).then(n.bind(n,9840)),"@site/src/pages/integrations/ElasticSearch/index.tsx",9840],"7d62b9db":[()=>n.e(8741).then(n.t.bind(n,7471,19)),"~blog/default/illa-website-blog-tags-open-source-184-list.json",7471],"7d74c426":[()=>n.e(4580).then(n.t.bind(n,2463,19)),"~blog/default/illa-website-blog-tags-component-29b.json",2463],"7dda7093":[()=>n.e(8518).then(n.bind(n,2860)),"@site/blog/low-code-crm/low-code-crm.md?truncated=true",2860],"7f0a0f20":[()=>Promise.all([n.e(532),n.e(4692),n.e(2377)]).then(n.bind(n,5092)),"@site/src/pages/components/CheckboxGroup/index.tsx",5092],"8044da51":[()=>n.e(9785).then(n.t.bind(n,9612,19)),"~blog/default/illa-website-blog-tags-slack-fd6-list.json",9612],"81c7ed4e":[()=>n.e(500).then(n.t.bind(n,9344,19)),"~blog/default/illa-website-blog-tags-react-a30.json",9344],"837d095b":[()=>Promise.all([n.e(532),n.e(4692),n.e(9211)]).then(n.bind(n,8824)),"@site/src/pages/components/RadioGroup/index.tsx",8824],"83d2f18d":[()=>Promise.all([n.e(532),n.e(4692),n.e(4638)]).then(n.bind(n,6398)),"@site/src/pages/components/Audio/index.tsx",6398],"85ec1940":[()=>n.e(5158).then(n.t.bind(n,5551,19)),"~blog/default/illa-website-blog-tags-ai-e58.json",5551],"867c6dae":[()=>n.e(7475).then(n.t.bind(n,9566,19)),"~blog/default/illa-website-blog-tags-redis-1fd.json",9566],"86953be1":[()=>Promise.all([n.e(532),n.e(4692),n.e(6510)]).then(n.bind(n,7072)),"@site/src/pages/components/Cascader/index.tsx",7072],"86a054dc":[()=>n.e(9847).then(n.bind(n,17)),"@site/blog/react-error-boundary/react-error-boundary.md",17],"882e85dd":[()=>n.e(6411).then(n.bind(n,4850)),"@site/blog/raect-markdown/react-markdown.md?truncated=true",4850],"88d8af9f":[()=>n.e(5038).then(n.bind(n,9129)),"@site/blog/mui-2024/mui.md?truncated=true",9129],"890684bb":[()=>Promise.all([n.e(532),n.e(4692),n.e(3883)]).then(n.bind(n,9917)),"@site/src/pages/integrations/Redis/index.tsx",9917],"8a494e53":[()=>n.e(2270).then(n.bind(n,3443)),"@site/blog/tooljet-vs-retool/tooljet-vs-retool.md",3443],"8aeb2ac2":[()=>n.e(2065).then(n.t.bind(n,5377,19)),"~blog/default/illa-website-blog-tags-tools-9e4.json",5377],"8b794ce4":[()=>n.e(6913).then(n.t.bind(n,9023,19)),"~blog/default/illa-website-blog-tags-select-a2f.json",9023],"8d9a9c02":[()=>Promise.all([n.e(532),n.e(4692),n.e(3265)]).then(n.bind(n,3893)),"@site/src/pages/components/RadioButton/index.tsx",3893],"8f1e5e50":[()=>n.e(8916).then(n.bind(n,2892)),"@site/blog/react-component-library/react-component-library.md",2892],"912dc06b":[()=>n.e(4501).then(n.bind(n,3507)),"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md?truncated=true",3507],"921028f2":[()=>Promise.all([n.e(532),n.e(4692),n.e(8922)]).then(n.bind(n,4108)),"@site/src/pages/integrations/RESTAPI/index.tsx",4108],"927b8026":[()=>Promise.all([n.e(532),n.e(4692),n.e(1414)]).then(n.bind(n,4882)),"@site/src/pages/integrations/GraphQL/index.tsx",4882],"94161ec7":[()=>Promise.all([n.e(532),n.e(4692),n.e(1845)]).then(n.bind(n,8521)),"@site/src/pages/integrations/Snowflake/index.tsx",8521],"94bc8583":[()=>n.e(9506).then(n.t.bind(n,6786,19)),"~blog/default/illa-website-blog-tags-postgresql-fa9.json",6786],"95cf3136":[()=>n.e(1774).then(n.t.bind(n,9251,19)),"~blog/default/illa-website-blog-tags-retool-7ff-list.json",9251],96447363:[()=>n.e(9713).then(n.bind(n,6100)),"@site/blog/build-dashboard/build-dashboard.md",6100],"9784bb0b":[()=>n.e(6057).then(n.t.bind(n,2759,19)),"~blog/default/illa-website-blog-tags-nodejs-05c-list.json",2759],"995fa2e5":[()=>n.e(4595).then(n.t.bind(n,1440,19)),"~blog/default/illa-website-blog-tags-nvm-1de.json",1440],"9b2435a1":[()=>n.e(2938).then(n.t.bind(n,1142,19)),"~blog/default/illa-website-blog-tags-component-29b-list.json",1142],"9c6dc03d":[()=>n.e(3327).then(n.bind(n,4441)),"@site/blog/automate-send-to-slack/automate-send-to-slack.md",4441],"9de45a08":[()=>Promise.all([n.e(532),n.e(4692),n.e(4640)]).then(n.bind(n,7582)),"@site/src/pages/integrations/SupabaseDB/index.tsx",7582],"9ee4bd2d":[()=>n.e(3986).then(n.t.bind(n,8601,19)),"~blog/default/illa-website-blog-tags-isnull-4d8.json",8601],"9f2e1456":[()=>n.e(5164).then(n.t.bind(n,2756,19)),"~blog/default/illa-website-blog-tags-select-a2f-list.json",2756],"9f91eb4c":[()=>Promise.all([n.e(532),n.e(4692),n.e(6290)]).then(n.bind(n,3668)),"@site/src/pages/components/DateTime/index.tsx",3668],"9f9623bc":[()=>n.e(451).then(n.t.bind(n,8337,19)),"~blog/default/illa-website-blog-tags-citizen-developer-tool-de7.json",8337],a13312d4:[()=>n.e(2354).then(n.t.bind(n,806,19)),"~blog/default/illa-website-blog-tags-appsmith-548.json",806],a15fa1d1:[()=>n.e(7956).then(n.t.bind(n,316,19)),"~blog/default/illa-website-blog-tags-fiverr-37f.json",316],a1d5db4a:[()=>n.e(4363).then(n.t.bind(n,252,19)),"~blog/default/illa-website-blog-9c2.json",252],a48c94eb:[()=>n.e(8347).then(n.bind(n,9261)),"@site/blog/postgresql-isnull/postgresql-isnull.md",9261],a4ae0aea:[()=>n.e(668).then(n.t.bind(n,8799,19)),"~blog/default/illa-website-blog-tags-core-app-dashboard-d97-list.json",8799],a6aa9e1f:[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(3089)]).then(n.bind(n,6336)),"@theme/BlogListPage",6336],a6b4f45f:[()=>Promise.all([n.e(532),n.e(4692),n.e(3102)]).then(n.bind(n,9967)),"@site/src/pages/components/Carousel/index.tsx",9967],a7999644:[()=>n.e(3481).then(n.t.bind(n,6863,19)),"~blog/default/illa-website-blog-tags-data-dashboard-0e2.json",6863],a828f322:[()=>Promise.all([n.e(532),n.e(4692),n.e(8891)]).then(n.bind(n,9216)),"@site/src/pages/integrations/HuggingFaceInferenceAPI/index.tsx",9216],a8a01fb0:[()=>n.e(470).then(n.t.bind(n,347,19)),"~blog/default/illa-website-blog-tags-admin-panel-26e-list.json",347],a936b21e:[()=>n.e(5832).then(n.t.bind(n,246,19)),"~blog/default/illa-website-blog-tags-workflow-866.json",246],a9372106:[()=>Promise.all([n.e(532),n.e(4692),n.e(1777)]).then(n.bind(n,7134)),"@site/src/pages/components/Text/index.tsx",7134],a9f9d9a3:[()=>n.e(5431).then(n.bind(n,4479)),"@site/src/pages/solutions-admin-panel.mdx",4479],aaf9fde8:[()=>n.e(2451).then(n.t.bind(n,5365,19)),"~blog/default/illa-website-blog-tags-typescript-9a3-list.json",5365],ac92cbdc:[()=>Promise.all([n.e(532),n.e(4692),n.e(5378)]).then(n.bind(n,5501)),"@site/src/pages/integrations/SMTP/index.tsx",5501],ae1f131a:[()=>n.e(208).then(n.t.bind(n,6297,19)),"~blog/default/illa-website-blog-tags-automate-e37.json",6297],aead6cc5:[()=>n.e(5994).then(n.t.bind(n,4572,19)),"~blog/default/illa-website-blog-tags-low-code-crm-d49.json",4572],b0677628:[()=>n.e(7844).then(n.bind(n,7074)),"@site/src/pages/solutions-ai-voice-generator.mdx",7074],b1a8b9de:[()=>n.e(3819).then(n.t.bind(n,4847,19)),"~blog/default/illa-website-blog-tags-typescript-9a3.json",4847],b3f0800c:[()=>n.e(4225).then(n.t.bind(n,5665,19)),"~blog/default/illa-website-blog-tags-nvm-1de-list.json",5665],b4cd1370:[()=>n.e(3927).then(n.t.bind(n,9471,19)),"~blog/default/illa-website-blog-tags-low-code-931-list.json",9471],b6eb34d2:[()=>n.e(5191).then(n.bind(n,5067)),"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md?truncated=true",5067],baa7cbb5:[()=>n.e(6697).then(n.t.bind(n,1655,19)),"~blog/default/illa-website-blog-tags-citizen-developer-tool-de7-list.json",1655],bac88092:[()=>n.e(912).then(n.t.bind(n,5829,19)),"~blog/default/illa-website-blog-tags-freelancer-c9a.json",5829],bb85b74d:[()=>n.e(5938).then(n.bind(n,576)),"@site/blog/build-dashboard/build-dashboard.md?truncated=true",576],bb9e3f22:[()=>Promise.all([n.e(532),n.e(4692),n.e(5118)]).then(n.bind(n,4980)),"@site/src/pages/components/Container/index.tsx",4980],bd532edd:[()=>n.e(6870).then(n.t.bind(n,2624,19)),"~blog/default/illa-website-blog-tags-tooljet-356-list.json",2624],bd8bbd45:[()=>n.e(2852).then(n.bind(n,2747)),"@site/blog/react-component-library/react-component-library.md?truncated=true",2747],be1d629d:[()=>Promise.all([n.e(532),n.e(4692),n.e(545)]).then(n.bind(n,3563)),"@site/src/pages/components/Rate/index.tsx",3563],be40e9ec:[()=>n.e(3157).then(n.bind(n,4654)),"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md",4654],bea50343:[()=>n.e(2934).then(n.t.bind(n,4758,19)),"~blog/default/illa-website-blog-tags-freelance-8d5-list.json",4758],bfab3385:[()=>n.e(7477).then(n.t.bind(n,7477,19)),"~blog/default/illa-website-blog-tags-citizen-development-4cc.json",7477],c133d0bc:[()=>Promise.all([n.e(532),n.e(4692),n.e(7746)]).then(n.bind(n,1814)),"@site/src/pages/components/Image/index.tsx",1814],c1d2b2d8:[()=>n.e(1316).then(n.bind(n,495)),"@site/blog/it-support/it-support.md",495],c2768d7e:[()=>n.e(7250).then(n.t.bind(n,8410,19)),"~blog/default/illa-website-blog-tags-ai-e58-list.json",8410],c3ae7b0b:[()=>n.e(8953).then(n.t.bind(n,8468,19)),"~blog/default/illa-website-blog-tags-citizen-developer-cb1-list.json",8468],c45d4b28:[()=>n.e(850).then(n.t.bind(n,5884,19)),"~blog/default/illa-website-blog-tags-low-code-931.json",5884],ca19ac91:[()=>Promise.all([n.e(532),n.e(4692),n.e(7612)]).then(n.bind(n,7690)),"@site/src/pages/integrations/GoogleSheets/index.tsx",7690],ca96679e:[()=>Promise.all([n.e(532),n.e(4692),n.e(2031)]).then(n.bind(n,5014)),"@site/src/pages/components/Tables/index.tsx",5014],cb84f714:[()=>n.e(8170).then(n.t.bind(n,3960,19)),"~blog/default/illa-website-blog-tags-webworker-ced.json",3960],cbbdd979:[()=>n.e(3228).then(n.bind(n,5173)),"@site/blog/best-low-code-platform/best-low-code-platform.md",5173],ccc49370:[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(5923),n.e(4809),n.e(6103)]).then(n.bind(n,9466)),"@theme/BlogPostPage",9466],cd038061:[()=>n.e(9993).then(n.bind(n,4122)),"@site/blog/build-ai-tools/build-ai-tools.md?truncated=true",4122],cd0cf34d:[()=>n.e(2904).then(n.t.bind(n,4381,19)),"~blog/default/illa-website-blog-tags-nodejs-05c.json",4381],ceb37023:[()=>n.e(4425).then(n.bind(n,8704)),"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md",8704],ceba9a17:[()=>n.e(5840).then(n.bind(n,5571)),"@site/blog/boost-freelancer/boost-freelancer.md",5571],cf2425b1:[()=>n.e(5330).then(n.bind(n,9393)),"@site/blog/postgresql-isnull/postgresql-isnull.md?truncated=true",9393],d37b0cd5:[()=>n.e(2075).then(n.bind(n,4565)),"@site/blog/core-app-dashboard/core-app-dashboard.md",4565],d3b7cf11:[()=>n.e(2525).then(n.bind(n,9551)),"@site/blog/postgresql-select/postgresql-select.md?truncated=true",9551],d3d78a2c:[()=>n.e(3934).then(n.bind(n,686)),"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md",686],d8096fab:[()=>Promise.all([n.e(532),n.e(4692),n.e(6828)]).then(n.bind(n,3769)),"@site/src/pages/integrations/index.tsx",3769],d87f99a5:[()=>n.e(5767).then(n.bind(n,4899)),"@site/blog/best-citizen-developer-tool/best-citizen-developer-tool.md?truncated=true",4899],da1593ee:[()=>Promise.all([n.e(532),n.e(4692),n.e(9321)]).then(n.bind(n,1086)),"@site/src/pages/components/Multiselect/index.tsx",1086],da530276:[()=>n.e(1012).then(n.t.bind(n,7274,19)),"~blog/default/illa-website-blog-tags-admin-panel-26e.json",7274],db07c19c:[()=>n.e(3008).then(n.t.bind(n,3380,19)),"~blog/default/illa-website-blog-tags-freelance-8d5.json",3380],db485666:[()=>n.e(7929).then(n.bind(n,3120)),"@site/blog/typescript-most-practical-features-compilation/typescript-most-practical-features-compilation.md",3120],dbd7c721:[()=>n.e(4179).then(n.bind(n,3671)),"@site/src/pages/solutions-cms.mdx",3671],dcf8da52:[()=>n.e(4851).then(n.t.bind(n,9969,19)),"~blog/default/illa-website-blog-tags-mac-7c4-list.json",9969],dd8552f0:[()=>n.e(1822).then(n.t.bind(n,113,19)),"~blog/default/illa-website-blog-tags-isnull-4d8-list.json",113],dd95d1fb:[()=>n.e(2987).then(n.t.bind(n,314,19)),"~blog/default/illa-website-blog-tags-open-source-184.json",314],deb5faec:[()=>Promise.all([n.e(532),n.e(4692),n.e(2224)]).then(n.bind(n,320)),"@site/src/pages/components/Date/index.tsx",320],df2cf251:[()=>n.e(3903).then(n.t.bind(n,8959,19)),"~blog/default/illa-website-blog-tags-citizen-developer-cb1.json",8959],dfe72411:[()=>n.e(8704).then(n.t.bind(n,8470,19)),"~blog/default/illa-website-blog-tags-javascript-8bf.json",8470],e015af33:[()=>Promise.all([n.e(532),n.e(4692),n.e(8595)]).then(n.bind(n,7818)),"@site/src/pages/integrations/MongoDB/index.tsx",7818],e0cd9918:[()=>Promise.all([n.e(532),n.e(4692),n.e(8155)]).then(n.bind(n,4855)),"@site/src/pages/components/Upload/index.tsx",4855],e20c763e:[()=>n.e(7599).then(n.bind(n,8311)),"@site/blog/backend-create-web-ui/backend-create-web-ui.md?truncated=true",8311],e4e1a4b6:[()=>Promise.all([n.e(532),n.e(4692),n.e(8296)]).then(n.bind(n,5586)),"@site/src/pages/integrations/Airtable/index.tsx",5586],e55440e4:[()=>n.e(3845).then(n.bind(n,3610)),"@site/blog/launch-flow/launch-flow.md?truncated=true",3610],e765f05a:[()=>n.e(7272).then(n.bind(n,26)),"@site/blog/backend-create-web-ui/backend-create-web-ui.md",26],eb5bf31c:[()=>n.e(757).then(n.bind(n,4339)),"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md?truncated=true",4339],ec7f9948:[()=>n.e(8987).then(n.bind(n,258)),"@site/blog/build-ai-tools/build-ai-tools.md",258],ed1472d5:[()=>n.e(2186).then(n.bind(n,7674)),"@site/blog/react-error-boundary/react-error-boundary.md?truncated=true",7674],ed70cb03:[()=>n.e(8431).then(n.t.bind(n,3494,19)),"~blog/default/illa-website-blog-tags-appsmith-548-list.json",3494],ee6f64f3:[()=>n.e(8345).then(n.t.bind(n,7925,19)),"~blog/default/illa-website-blog-tags-data-dashboard-0e2-list.json",7925],f20664df:[()=>n.e(6355).then(n.bind(n,8804)),"@site/blog/internal-tool/internal-tool.md",8804],f3cf1707:[()=>Promise.all([n.e(532),n.e(4692),n.e(3072)]).then(n.bind(n,109)),"@site/src/pages/integrations/Firebase/index.tsx",109],f4c983d1:[()=>n.e(9691).then(n.t.bind(n,7298,19)),"~blog/default/illa-website-blog-tags-psql-ade-list.json",7298],f5d8a60d:[()=>n.e(2772).then(n.t.bind(n,3836,19)),"~blog/default/illa-website-blog-tags-upwork-ad3.json",3836],f6bab244:[()=>n.e(2471).then(n.t.bind(n,6504,19)),"~blog/default/illa-website-blog-tags-database-931.json",6504],f7394536:[()=>n.e(9523).then(n.bind(n,4034)),"@site/blog/low-code-crm/low-code-crm.md",4034],f79a3b75:[()=>n.e(8767).then(n.t.bind(n,4215,19)),"~blog/default/illa-website-blog-tags-library-35c-list.json",4215],f8cc4e92:[()=>n.e(164).then(n.bind(n,5330)),"@site/blog/appsmith-vs-retool/appsmith-vs-retool.md",5330],f91124a1:[()=>n.e(7432).then(n.t.bind(n,6010,19)),"~blog/default/illa-website-blog-tags-shadcn-ui-69b-list.json",6010],f959b7ea:[()=>n.e(1287).then(n.t.bind(n,3188,19)),"~blog/default/illa-website-blog-page-2-e38.json",3188],f9d68572:[()=>n.e(8070).then(n.bind(n,8294)),"@site/blog/best-low-code-platform/best-low-code-platform.md?truncated=true",8294],fad6e022:[()=>n.e(4757).then(n.t.bind(n,7355,19)),"~blog/default/illa-website-blog-tags-internal-tools-465-list.json",7355],fc0df049:[()=>n.e(5315).then(n.t.bind(n,4469,19)),"/home/runner/work/illa-website/illa-website/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",4469],fd0dac06:[()=>n.e(7209).then(n.t.bind(n,3228,19)),"~blog/default/illa-website-blog-tags-list-171.json",3228]};var l=n(1527);function s(e){let{error:t,retry:n,pastDelay:a}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):a?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(4420),u=n(2762);function d(e,t){if("*"===e)return o()({loading:s,loader:()=>Promise.all([n.e(532),n.e(4692),n.e(8245)]).then(n.bind(n,8245)),modules:["@theme/NotFound"],webpack:()=>[8245],render(e,t){const n=e.default;return(0,l.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const a=i[`${e}-${t}`],d={},p=[],g=[],f=(0,c.Z)(a);return Object.entries(f).forEach((e=>{let[t,n]=e;const a=r[n];a&&(d[t]=a[0],p.push(a[1]),g.push(a[2]))})),o().Map({loading:s,loader:d,modules:p,webpack:()=>g,render(t,n){const o=JSON.parse(JSON.stringify(a));Object.entries(t).forEach((t=>{let[n,a]=t;const i=a.default;if(!i)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof i&&"function"!=typeof i||Object.keys(a).filter((e=>"default"!==e)).forEach((e=>{i[e]=a[e]}));let r=o;const l=n.split(".");l.slice(0,-1).forEach((e=>{r=r[e]})),r[l[l.length-1]]=i}));const i=o.__comp;delete o.__comp;const r=o.__context;return delete o.__context,(0,l.jsx)(u.z,{value:r,children:(0,l.jsx)(i,{...o,...n})})}})}const p=[{path:"/illa-website/admin-panel",component:d("/illa-website/admin-panel","090"),exact:!0},{path:"/illa-website/ai-voice-generator",component:d("/illa-website/ai-voice-generator","71b"),exact:!0},{path:"/illa-website/blog",component:d("/illa-website/blog","a39"),exact:!0},{path:"/illa-website/blog/appsmith-vs-retool",component:d("/illa-website/blog/appsmith-vs-retool","b40"),exact:!0},{path:"/illa-website/blog/automate-send-to-slack",component:d("/illa-website/blog/automate-send-to-slack","ba3"),exact:!0},{path:"/illa-website/blog/backend-create-web-ui",component:d("/illa-website/blog/backend-create-web-ui","e6d"),exact:!0},{path:"/illa-website/blog/best-citizen-developer-tool",component:d("/illa-website/blog/best-citizen-developer-tool","a65"),exact:!0},{path:"/illa-website/blog/best-low-code-platform",component:d("/illa-website/blog/best-low-code-platform","9b1"),exact:!0},{path:"/illa-website/blog/boost-freelancer",component:d("/illa-website/blog/boost-freelancer","c23"),exact:!0},{path:"/illa-website/blog/build-ai-tools",component:d("/illa-website/blog/build-ai-tools","c16"),exact:!0},{path:"/illa-website/blog/build-dashboard",component:d("/illa-website/blog/build-dashboard","fb1"),exact:!0},{path:"/illa-website/blog/core-app-dashboard-2",component:d("/illa-website/blog/core-app-dashboard-2","006"),exact:!0},{path:"/illa-website/blog/internal-tool",component:d("/illa-website/blog/internal-tool","0e6"),exact:!0},{path:"/illa-website/blog/it-support",component:d("/illa-website/blog/it-support","1b7"),exact:!0},{path:"/illa-website/blog/launch-flow",component:d("/illa-website/blog/launch-flow","116"),exact:!0},{path:"/illa-website/blog/list-tables-in-postgresql",component:d("/illa-website/blog/list-tables-in-postgresql","15e"),exact:!0},{path:"/illa-website/blog/low-code-crm",component:d("/illa-website/blog/low-code-crm","23f"),exact:!0},{path:"/illa-website/blog/lowcode-vs-traditional",component:d("/illa-website/blog/lowcode-vs-traditional","6ed"),exact:!0},{path:"/illa-website/blog/mui-2024",component:d("/illa-website/blog/mui-2024","5d5"),exact:!0},{path:"/illa-website/blog/nvm-use-2024",component:d("/illa-website/blog/nvm-use-2024","083"),exact:!0},{path:"/illa-website/blog/page/2",component:d("/illa-website/blog/page/2","71c"),exact:!0},{path:"/illa-website/blog/page/3",component:d("/illa-website/blog/page/3","293"),exact:!0},{path:"/illa-website/blog/postgresql-isnull",component:d("/illa-website/blog/postgresql-isnull","f7b"),exact:!0},{path:"/illa-website/blog/postgresql-select",component:d("/illa-website/blog/postgresql-select","6fb"),exact:!0},{path:"/illa-website/blog/react-component-library",component:d("/illa-website/blog/react-component-library","b6f"),exact:!0},{path:"/illa-website/blog/react-error-boundary",component:d("/illa-website/blog/react-error-boundary","77f"),exact:!0},{path:"/illa-website/blog/react-markdown",component:d("/illa-website/blog/react-markdown","f93"),exact:!0},{path:"/illa-website/blog/shadcn-ui-2024",component:d("/illa-website/blog/shadcn-ui-2024","b65"),exact:!0},{path:"/illa-website/blog/shadcn-vs-mui",component:d("/illa-website/blog/shadcn-vs-mui","2aa"),exact:!0},{path:"/illa-website/blog/tags",component:d("/illa-website/blog/tags","6c4"),exact:!0},{path:"/illa-website/blog/tags/admin-panel",component:d("/illa-website/blog/tags/admin-panel","ecb"),exact:!0},{path:"/illa-website/blog/tags/ai",component:d("/illa-website/blog/tags/ai","8dd"),exact:!0},{path:"/illa-website/blog/tags/appsmith",component:d("/illa-website/blog/tags/appsmith","61e"),exact:!0},{path:"/illa-website/blog/tags/automate",component:d("/illa-website/blog/tags/automate","436"),exact:!0},{path:"/illa-website/blog/tags/citizen-developer",component:d("/illa-website/blog/tags/citizen-developer","ca5"),exact:!0},{path:"/illa-website/blog/tags/citizen-developer-tool",component:d("/illa-website/blog/tags/citizen-developer-tool","be4"),exact:!0},{path:"/illa-website/blog/tags/citizen-development",component:d("/illa-website/blog/tags/citizen-development","6ea"),exact:!0},{path:"/illa-website/blog/tags/component",component:d("/illa-website/blog/tags/component","a30"),exact:!0},{path:"/illa-website/blog/tags/core-app-dashboard",component:d("/illa-website/blog/tags/core-app-dashboard","b49"),exact:!0},{path:"/illa-website/blog/tags/crud",component:d("/illa-website/blog/tags/crud","63d"),exact:!0},{path:"/illa-website/blog/tags/data-dashboard",component:d("/illa-website/blog/tags/data-dashboard","55e"),exact:!0},{path:"/illa-website/blog/tags/database",component:d("/illa-website/blog/tags/database","cd9"),exact:!0},{path:"/illa-website/blog/tags/fiverr",component:d("/illa-website/blog/tags/fiverr","aa5"),exact:!0},{path:"/illa-website/blog/tags/freelance",component:d("/illa-website/blog/tags/freelance","946"),exact:!0},{path:"/illa-website/blog/tags/freelancer",component:d("/illa-website/blog/tags/freelancer","ce7"),exact:!0},{path:"/illa-website/blog/tags/gui",component:d("/illa-website/blog/tags/gui","ade"),exact:!0},{path:"/illa-website/blog/tags/internal-tools",component:d("/illa-website/blog/tags/internal-tools","34b"),exact:!0},{path:"/illa-website/blog/tags/isnotnull",component:d("/illa-website/blog/tags/isnotnull","519"),exact:!0},{path:"/illa-website/blog/tags/isnull",component:d("/illa-website/blog/tags/isnull","62b"),exact:!0},{path:"/illa-website/blog/tags/javascript",component:d("/illa-website/blog/tags/javascript","ee2"),exact:!0},{path:"/illa-website/blog/tags/library",component:d("/illa-website/blog/tags/library","3d8"),exact:!0},{path:"/illa-website/blog/tags/list",component:d("/illa-website/blog/tags/list","1cf"),exact:!0},{path:"/illa-website/blog/tags/low-code",component:d("/illa-website/blog/tags/low-code","d00"),exact:!0},{path:"/illa-website/blog/tags/low-code-crm",component:d("/illa-website/blog/tags/low-code-crm","d64"),exact:!0},{path:"/illa-website/blog/tags/mac",component:d("/illa-website/blog/tags/mac","c15"),exact:!0},{path:"/illa-website/blog/tags/nodejs",component:d("/illa-website/blog/tags/nodejs","0ef"),exact:!0},{path:"/illa-website/blog/tags/nvm",component:d("/illa-website/blog/tags/nvm","54f"),exact:!0},{path:"/illa-website/blog/tags/open-source",component:d("/illa-website/blog/tags/open-source","f4a"),exact:!0},{path:"/illa-website/blog/tags/postgres",component:d("/illa-website/blog/tags/postgres","5f2"),exact:!0},{path:"/illa-website/blog/tags/postgresql",component:d("/illa-website/blog/tags/postgresql","38f"),exact:!0},{path:"/illa-website/blog/tags/psql",component:d("/illa-website/blog/tags/psql","b8a"),exact:!0},{path:"/illa-website/blog/tags/react",component:d("/illa-website/blog/tags/react","45c"),exact:!0},{path:"/illa-website/blog/tags/redis",component:d("/illa-website/blog/tags/redis","bc9"),exact:!0},{path:"/illa-website/blog/tags/retool",component:d("/illa-website/blog/tags/retool","170"),exact:!0},{path:"/illa-website/blog/tags/select",component:d("/illa-website/blog/tags/select","4fb"),exact:!0},{path:"/illa-website/blog/tags/shadcn-ui",component:d("/illa-website/blog/tags/shadcn-ui","459"),exact:!0},{path:"/illa-website/blog/tags/slack",component:d("/illa-website/blog/tags/slack","a62"),exact:!0},{path:"/illa-website/blog/tags/tables",component:d("/illa-website/blog/tags/tables","b62"),exact:!0},{path:"/illa-website/blog/tags/tooljet",component:d("/illa-website/blog/tags/tooljet","2bb"),exact:!0},{path:"/illa-website/blog/tags/tools",component:d("/illa-website/blog/tags/tools","adc"),exact:!0},{path:"/illa-website/blog/tags/traditional-development",component:d("/illa-website/blog/tags/traditional-development","f03"),exact:!0},{path:"/illa-website/blog/tags/typescript",component:d("/illa-website/blog/tags/typescript","824"),exact:!0},{path:"/illa-website/blog/tags/ui-library",component:d("/illa-website/blog/tags/ui-library","174"),exact:!0},{path:"/illa-website/blog/tags/upwork",component:d("/illa-website/blog/tags/upwork","0a0"),exact:!0},{path:"/illa-website/blog/tags/webworker",component:d("/illa-website/blog/tags/webworker","5a5"),exact:!0},{path:"/illa-website/blog/tags/workflow",component:d("/illa-website/blog/tags/workflow","ee0"),exact:!0},{path:"/illa-website/blog/the-best-tools-for-build-crud-applications",component:d("/illa-website/blog/the-best-tools-for-build-crud-applications","2aa"),exact:!0},{path:"/illa-website/blog/tooljet-vs-appsmith",component:d("/illa-website/blog/tooljet-vs-appsmith","055"),exact:!0},{path:"/illa-website/blog/tooljet-vs-retool",component:d("/illa-website/blog/tooljet-vs-retool","3e4"),exact:!0},{path:"/illa-website/blog/top-5-best-open-source-low-code-platforms-in-2024",component:d("/illa-website/blog/top-5-best-open-source-low-code-platforms-in-2024","263"),exact:!0},{path:"/illa-website/blog/top-7-database-guis-for-sql-databases",component:d("/illa-website/blog/top-7-database-guis-for-sql-databases","45f"),exact:!0},{path:"/illa-website/blog/top-7-redis-gui-tools-in-2023",component:d("/illa-website/blog/top-7-redis-gui-tools-in-2023","36e"),exact:!0},{path:"/illa-website/blog/typescript-most-practical-features-compilation",component:d("/illa-website/blog/typescript-most-practical-features-compilation","57f"),exact:!0},{path:"/illa-website/blog/web-worker-tutorial",component:d("/illa-website/blog/web-worker-tutorial","0d9"),exact:!0},{path:"/illa-website/cms",component:d("/illa-website/cms","026"),exact:!0},{path:"/illa-website/components/",component:d("/illa-website/components/","5b9"),exact:!0},{path:"/illa-website/components/Audio/",component:d("/illa-website/components/Audio/","f19"),exact:!0},{path:"/illa-website/components/BarProgress/",component:d("/illa-website/components/BarProgress/","771"),exact:!0},{path:"/illa-website/components/Button/",component:d("/illa-website/components/Button/","de8"),exact:!0},{path:"/illa-website/components/Carousel/",component:d("/illa-website/components/Carousel/","8c9"),exact:!0},{path:"/illa-website/components/Cascader/",component:d("/illa-website/components/Cascader/","f17"),exact:!0},{path:"/illa-website/components/Chart/",component:d("/illa-website/components/Chart/","d20"),exact:!0},{path:"/illa-website/components/CheckboxGroup/",component:d("/illa-website/components/CheckboxGroup/","2b3"),exact:!0},{path:"/illa-website/components/CircleProgress/",component:d("/illa-website/components/CircleProgress/","1f3"),exact:!0},{path:"/illa-website/components/Container/",component:d("/illa-website/components/Container/","d85"),exact:!0},{path:"/illa-website/components/Date/",component:d("/illa-website/components/Date/","cfa"),exact:!0},{path:"/illa-website/components/DateRange/",component:d("/illa-website/components/DateRange/","c94"),exact:!0},{path:"/illa-website/components/DateTime/",component:d("/illa-website/components/DateTime/","90f"),exact:!0},{path:"/illa-website/components/Divider/",component:d("/illa-website/components/Divider/","7f8"),exact:!0},{path:"/illa-website/components/EditableText/",component:d("/illa-website/components/EditableText/","77f"),exact:!0},{path:"/illa-website/components/Form/",component:d("/illa-website/components/Form/","4f5"),exact:!0},{path:"/illa-website/components/Icon/",component:d("/illa-website/components/Icon/","2b7"),exact:!0},{path:"/illa-website/components/Image/",component:d("/illa-website/components/Image/","81d"),exact:!0},{path:"/illa-website/components/Input/",component:d("/illa-website/components/Input/","d13"),exact:!0},{path:"/illa-website/components/List/",component:d("/illa-website/components/List/","b84"),exact:!0},{path:"/illa-website/components/Menu/",component:d("/illa-website/components/Menu/","17f"),exact:!0},{path:"/illa-website/components/Modal/",component:d("/illa-website/components/Modal/","bb5"),exact:!0},{path:"/illa-website/components/Multiselect/",component:d("/illa-website/components/Multiselect/","7cb"),exact:!0},{path:"/illa-website/components/NumberInput/",component:d("/illa-website/components/NumberInput/","549"),exact:!0},{path:"/illa-website/components/PDF/",component:d("/illa-website/components/PDF/","63e"),exact:!0},{path:"/illa-website/components/RadioButton/",component:d("/illa-website/components/RadioButton/","345"),exact:!0},{path:"/illa-website/components/RadioGroup/",component:d("/illa-website/components/RadioGroup/","988"),exact:!0},{path:"/illa-website/components/Rate/",component:d("/illa-website/components/Rate/","a88"),exact:!0},{path:"/illa-website/components/Select/",component:d("/illa-website/components/Select/","902"),exact:!0},{path:"/illa-website/components/Statistics/",component:d("/illa-website/components/Statistics/","6e4"),exact:!0},{path:"/illa-website/components/Switch/",component:d("/illa-website/components/Switch/","f6f"),exact:!0},{path:"/illa-website/components/Tables/",component:d("/illa-website/components/Tables/","5f6"),exact:!0},{path:"/illa-website/components/Tabs/",component:d("/illa-website/components/Tabs/","e90"),exact:!0},{path:"/illa-website/components/Text/",component:d("/illa-website/components/Text/","25a"),exact:!0},{path:"/illa-website/components/Textarea%20Input/",component:d("/illa-website/components/Textarea%20Input/","44d"),exact:!0},{path:"/illa-website/components/Timeline/",component:d("/illa-website/components/Timeline/","3ae"),exact:!0},{path:"/illa-website/components/Upload/",component:d("/illa-website/components/Upload/","9a0"),exact:!0},{path:"/illa-website/components/Video/",component:d("/illa-website/components/Video/","b95"),exact:!0},{path:"/illa-website/crm",component:d("/illa-website/crm","63f"),exact:!0},{path:"/illa-website/dashboard",component:d("/illa-website/dashboard","5ec"),exact:!0},{path:"/illa-website/illa-flow/",component:d("/illa-website/illa-flow/","b60"),exact:!0},{path:"/illa-website/image-generator",component:d("/illa-website/image-generator","2aa"),exact:!0},{path:"/illa-website/integrations/",component:d("/illa-website/integrations/","1e5"),exact:!0},{path:"/illa-website/integrations/Airtable/",component:d("/illa-website/integrations/Airtable/","d53"),exact:!0},{path:"/illa-website/integrations/AmazonDynamoDB/",component:d("/illa-website/integrations/AmazonDynamoDB/","c98"),exact:!0},{path:"/illa-website/integrations/Appwrite/",component:d("/illa-website/integrations/Appwrite/","5ea"),exact:!0},{path:"/illa-website/integrations/Clickhouse/",component:d("/illa-website/integrations/Clickhouse/","efd"),exact:!0},{path:"/illa-website/integrations/CouchDB/",component:d("/illa-website/integrations/CouchDB/","912"),exact:!0},{path:"/illa-website/integrations/ElasticSearch/",component:d("/illa-website/integrations/ElasticSearch/","697"),exact:!0},{path:"/illa-website/integrations/Firebase/",component:d("/illa-website/integrations/Firebase/","b8a"),exact:!0},{path:"/illa-website/integrations/GoogleSheets/",component:d("/illa-website/integrations/GoogleSheets/","ee9"),exact:!0},{path:"/illa-website/integrations/GraphQL/",component:d("/illa-website/integrations/GraphQL/","975"),exact:!0},{path:"/illa-website/integrations/HuggingFaceInferenceAPI/",component:d("/illa-website/integrations/HuggingFaceInferenceAPI/","4d1"),exact:!0},{path:"/illa-website/integrations/HuggingFaceInferenceEndpoint/",component:d("/illa-website/integrations/HuggingFaceInferenceEndpoint/","a72"),exact:!0},{path:"/illa-website/integrations/Hydra/",component:d("/illa-website/integrations/Hydra/","cc5"),exact:!0},{path:"/illa-website/integrations/MariaDB/",component:d("/illa-website/integrations/MariaDB/","53c"),exact:!0},{path:"/illa-website/integrations/MicrosoftSQLServer/",component:d("/illa-website/integrations/MicrosoftSQLServer/","933"),exact:!0},{path:"/illa-website/integrations/MongoDB/",component:d("/illa-website/integrations/MongoDB/","640"),exact:!0},{path:"/illa-website/integrations/MySQL/",component:d("/illa-website/integrations/MySQL/","59d"),exact:!0},{path:"/illa-website/integrations/Neon/",component:d("/illa-website/integrations/Neon/","fc8"),exact:!0},{path:"/illa-website/integrations/OracleDB/",component:d("/illa-website/integrations/OracleDB/","a32"),exact:!0},{path:"/illa-website/integrations/PostgreSQL/",component:d("/illa-website/integrations/PostgreSQL/","4b0"),exact:!0},{path:"/illa-website/integrations/Redis/",component:d("/illa-website/integrations/Redis/","acb"),exact:!0},{path:"/illa-website/integrations/RESTAPI/",component:d("/illa-website/integrations/RESTAPI/","8d2"),exact:!0},{path:"/illa-website/integrations/S3/",component:d("/illa-website/integrations/S3/","8f9"),exact:!0},{path:"/illa-website/integrations/SMTP/",component:d("/illa-website/integrations/SMTP/","d8d"),exact:!0},{path:"/illa-website/integrations/Snowflake/",component:d("/illa-website/integrations/Snowflake/","f29"),exact:!0},{path:"/illa-website/integrations/SupabaseDB/",component:d("/illa-website/integrations/SupabaseDB/","ea8"),exact:!0},{path:"/illa-website/integrations/TiDB/",component:d("/illa-website/integrations/TiDB/","cfd"),exact:!0},{path:"/illa-website/pricing/",component:d("/illa-website/pricing/","b2e"),exact:!0},{path:"/illa-website/",component:d("/illa-website/","113"),exact:!0},{path:"*",component:d("*")}]},7752:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,t:()=>r});var a=n(959),o=n(1527);const i=a.createContext(!1);function r(e){let{children:t}=e;const[n,r]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{r(!0)}),[]),(0,o.jsx)(i.Provider,{value:n,children:t})}},1136:(e,t,n)=>{"use strict";var a=n(959),o=n(4478),i=n(9500),r=n(387),l=n(6047);const s=[n(3852),n(89),n(6070),n(4329),n(962),n(1245)];var c=n(6002),u=n(8903),d=n(6920);function p(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var a=e.path?(0,u.LX)(t,e):n.length?n[n.length-1].match:u.F0.computeRootMatch(t);return a&&(n.push({route:e,match:a}),e.routes&&p(e.routes,t,n)),a})),n}var g=n(1527);function f(e){let{children:t}=e;return(0,g.jsx)(g.Fragment,{children:t})}var m=n(4491),b=n(2688),h=n(9925),y=n(2593),w=n(1610),v=n(8224),k=n(864);const _="default";var x=n(6771),L=n(7535);function C(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,b.Z)(),a=(0,v.l)(),o=n[e].htmlLang,i=e=>e.replace("-","_");return(0,g.jsxs)(m.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,g.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,g.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,g.jsx)("meta",{property:"og:locale",content:i(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,g.jsx)("meta",{property:"og:locale:alternate",content:i(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function S(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,b.Z)(),a=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,b.Z)(),{pathname:a}=(0,u.TH)();return e+(0,x.applyTrailingSlash)((0,h.Z)(a),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:a;return(0,g.jsxs)(m.Z,{children:[(0,g.jsx)("meta",{property:"og:url",content:o}),(0,g.jsx)("link",{rel:"canonical",href:o})]})}function A(){const{i18n:{currentLocale:e}}=(0,b.Z)(),{metadata:t,image:n}=(0,y.L)();return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsxs)(m.Z,{children:[(0,g.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,g.jsx)("body",{className:k.h})]}),n&&(0,g.jsx)(w.d,{image:n}),(0,g.jsx)(S,{}),(0,g.jsx)(C,{}),(0,g.jsx)(L.Z,{tag:_,locale:e}),(0,g.jsx)(m.Z,{children:t.map(((e,t)=>(0,g.jsx)("meta",{...e},t)))})]})}const P=new Map;function D(e){if(P.has(e.pathname))return{...e,pathname:P.get(e.pathname)};if(p(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return P.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return P.set(e.pathname,t),{...e,pathname:t}}var T=n(7752),I=n(6855),E=n(2827);function j(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a{const a=t.default?.[e]??t[e];return a?.(...n)}));return()=>o.forEach((e=>e?.()))}const R=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,E.Z)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const a=t.pathname===n.pathname,o=t.hash===n.hash,i=t.search===n.search;if(a&&o&&!i)return;const{hash:r}=t;if(r){const e=decodeURIComponent(r.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),j("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>p(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class F extends a.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?j("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=j("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,g.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,g.jsx)(u.AW,{location:t,render:()=>e})})}}const M=F,O="__docusaurus-base-url-issue-banner-container",B="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function q(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${O}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\n
We suggest trying baseUrl =
\n
\n`}(e)).replace(/{if("undefined"==typeof document)return void n();const a=document.createElement("link");a.setAttribute("rel","prefetch"),a.setAttribute("href",e),a.onload=()=>t(),a.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(a)}))}:function(e){return new Promise(((t,n)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.withCredentials=!0,a.onload=()=>{200===a.status?t():n()},a.send(null)}))};var K=n(4420);const X=new Set,J=new Set,ee=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,te={prefetch(e){if(!(e=>!ee()&&!J.has(e)&&!X.has(e))(e))return!1;X.add(e);const t=p(c.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(Q).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,K.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Y(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!ee()&&!J.has(e))(e)&&(J.add(e),N(e))},ne=Object.freeze(te),ae=Boolean(!0);if(l.Z.canUseDOM){window.docusaurus=ne;const e=document.getElementById("__docusaurus"),t=(0,g.jsx)(r.B6,{children:(0,g.jsx)(i.VK,{children:(0,g.jsx)(V,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},l=()=>{if(ae)a.startTransition((()=>{o.hydrateRoot(e,t,{onRecoverableError:n})}));else{const i=o.createRoot(e,{onRecoverableError:n});a.startTransition((()=>{i.render(t)}))}};N(window.location.pathname).then(l)}},6855:(e,t,n)=>{"use strict";n.d(t,{_:()=>d,M:()=>p});var a=n(959),o=n(6809);const i=JSON.parse('{"docusaurus-plugin-google-gtag":{"default":{"trackingID":["G-QW745VE33W"],"anonymizeIP":false,"id":"default"}}}'),r=JSON.parse('{"defaultLocale":"en","locales":["en","zh","ja","de"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"},"zh":{"label":"\u4e2d\u6587","direction":"ltr","htmlLang":"zh","calendar":"gregory","path":"zh"},"ja":{"label":"\u65e5\u672c\u8a9e","direction":"ltr","htmlLang":"ja","calendar":"gregory","path":"ja"},"de":{"label":"Deutsch","direction":"ltr","htmlLang":"de","calendar":"gregory","path":"de"}}}');var l=n(7529);const s=JSON.parse('{"docusaurusVersion":"3.0.1","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-google-gtag":{"type":"package","name":"@docusaurus/plugin-google-gtag","version":"3.0.1"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.0.1"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.0.1"},"prefix-svg-ids":{"type":"local"},"docusaurus-tailwindcss":{"type":"local"},"docusaurus-plugin-content-blog":{"type":"project"},"docusaurus-plugin-content-pages":{"type":"project"},"docusaurus-plugin-ILLA-linkedin":{"type":"project"},"docusaurus-plugin-ILLA-twitter":{"type":"project"},"docusaurus-plugin-ILLA-reddit-plugin":{"type":"project"},"docusaurus-plugin-ILLA-clearbit":{"type":"project"}}}');var c=n(1527);const u={siteConfig:o.default,siteMetadata:s,globalData:i,i18n:r,codeTranslations:l},d=a.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},1289:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Be});var a=n(959),o=n(6047),i=n(4491),r=n(6771),l=n(5341),s=n(1610),c=n(9920),u=n(421),d=n(864),p=n(7675),g=n(2593),f=n(4288),m=n(5374),b=n(1527);function h(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:i,...r}=e;return(0,b.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...r,children:(0,b.jsx)("g",{stroke:a,strokeWidth:o,children:(0,b.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const y={closeButton:"closeButton_r_Ma"};function w(e){return(0,b.jsx)("button",{type:"button","aria-label":(0,m.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,l.Z)("clean-btn close",y.closeButton,e.className),children:(0,b.jsx)(h,{width:14,height:14,strokeWidth:3.1})})}const v={content:"content_B3zk"};function k(e){const{announcementBar:t}=(0,g.L)(),{content:n}=t;return(0,b.jsx)("div",{...e,className:(0,l.Z)(v.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const _={announcementBar:"announcementBar_hbYq",announcementBarPlaceholder:"announcementBarPlaceholder_nNiq",announcementBarClose:"announcementBarClose_S8lM",announcementBarContent:"announcementBarContent__DAX"};function x(){const{announcementBar:e}=(0,g.L)(),{isActive:t,close:n}=(0,f.nT)();if(!t)return null;const{backgroundColor:a,textColor:o,isCloseable:i}=e;return(0,b.jsxs)("div",{className:_.announcementBar,style:{backgroundColor:a,color:o},role:"banner",children:[i&&(0,b.jsx)("div",{className:_.announcementBarPlaceholder}),(0,b.jsx)(k,{className:_.announcementBarContent}),i&&(0,b.jsx)(w,{onClick:n,className:_.announcementBarClose})]})}var L=n(5580),C=n(5508),S=n(3707);var A=n(1900);function P(e){let{header:t,primaryMenu:n,secondaryMenu:a}=e;const{shown:o}=(0,A.Y)();return(0,b.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,b.jsxs)("div",{className:(0,l.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":o}),children:[(0,b.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,b.jsx)("div",{className:"navbar-sidebar__item menu",children:a})]})]})}var D=n(1694),T=n(7111);function I(e){return(0,b.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,b.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function E(e){return(0,b.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,b.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const j={toggle:"toggle_Io7t",toggleButton:"toggleButton_C0po",darkToggleIcon:"darkToggleIcon_iyjK",lightToggleIcon:"lightToggleIcon__wwy",toggleButtonDisabled:"toggleButtonDisabled_IHuh"};function R(e){let{className:t,buttonClassName:n,value:a,onChange:o}=e;const i=(0,T.Z)(),r=(0,m.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===a?(0,m.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,m.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,b.jsx)("div",{className:(0,l.Z)(j.toggle,t),children:(0,b.jsxs)("button",{className:(0,l.Z)("clean-btn",j.toggleButton,!i&&j.toggleButtonDisabled,n),type:"button",onClick:()=>o("dark"===a?"light":"dark"),disabled:!i,title:r,"aria-label":r,"aria-live":"polite",children:[(0,b.jsx)(I,{className:(0,l.Z)(j.toggleIcon,j.lightToggleIcon)}),(0,b.jsx)(E,{className:(0,l.Z)(j.toggleIcon,j.darkToggleIcon)})]})})}const N=a.memo(R),F={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_jx_9"};function M(e){let{className:t}=e;const n=(0,g.L)().navbar.style,a=(0,g.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:i}=(0,D.I)();return a?null:(0,b.jsx)(N,{className:t,buttonClassName:"dark"===n?F.darkNavbarColorModeToggle:void 0,value:o,onChange:i})}var O=n(0),B=n(9925),z=n(2688);const q={themedComponent:"themedComponent_FXRw","themedComponent--light":"themedComponent--light_RIle","themedComponent--dark":"themedComponent--dark_gZs3"};function U(e){let{className:t,children:n}=e;const o=(0,T.Z)(),{colorMode:i}=(0,D.I)();return(0,b.jsx)(b.Fragment,{children:(o?"dark"===i?["dark"]:["light"]:["light","dark"]).map((e=>{const o=n({theme:e,className:(0,l.Z)(t,q.themedComponent,q[`themedComponent--${e}`])});return(0,b.jsx)(a.Fragment,{children:o},e)}))})}function $(e){const{sources:t,className:n,alt:a,...o}=e;return(0,b.jsx)(U,{className:n,children:e=>{let{theme:n,className:i}=e;return(0,b.jsx)("img",{src:t[n],alt:a,className:i,...o})}})}function H(e){let{logo:t,alt:n,imageClassName:a}=e;const o={light:(0,B.Z)(t.src),dark:(0,B.Z)(t.srcDark||t.src)},i=(0,b.jsx)($,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return a?(0,b.jsx)("div",{className:a,children:i}):i}function G(e){const{siteConfig:{title:t}}=(0,z.Z)(),{navbar:{title:n,logo:a}}=(0,g.L)(),{imageClassName:o,titleClassName:i,...r}=e,l=(0,B.Z)(a?.href||"/"),s=n?"":t,c=a?.alt??s;return(0,b.jsxs)(O.Z,{to:l,...r,...a?.target&&{target:a.target},children:[a&&(0,b.jsx)(H,{logo:a,alt:c,imageClassName:o}),null!=n&&(0,b.jsx)("b",{className:i,children:n})]})}function W(){return(0,b.jsx)(G,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Z(){const e=(0,L.e)();return(0,b.jsx)("button",{type:"button","aria-label":(0,m.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,b.jsx)(h,{color:"var(--ifm-color-emphasis-600)"})})}function V(){return(0,b.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,b.jsx)(W,{}),(0,b.jsx)(M,{className:"margin-right--md"}),(0,b.jsx)(Z,{})]})}var Q=n(6794);function Y(){const e=(0,L.e)(),t=(0,g.L)().navbar.items;return(0,b.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,a.createElement)(Q.Z,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function K(e){return(0,b.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,b.jsx)(m.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function X(){const e=0===(0,g.L)().navbar.items.length,t=(0,A.Y)();return(0,b.jsxs)(b.Fragment,{children:[!e&&(0,b.jsx)(K,{onClick:()=>t.hide()}),t.content]})}function J(){const e=(0,L.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,a.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,b.jsx)(P,{header:(0,b.jsx)(V,{}),primaryMenu:(0,b.jsx)(Y,{}),secondaryMenu:(0,b.jsx)(X,{})}):null}const ee={navbarHideable:"navbarHideable_QJhM",navbarHidden:"navbarHidden_JLKf"};function te(e){return(0,b.jsx)("div",{role:"presentation",...e,className:(0,l.Z)("navbar-sidebar__backdrop",e.className)})}function ne(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,g.L)(),i=(0,L.e)(),{navbarRef:r,isNavbarVisible:s}=function(e){const[t,n]=(0,a.useState)(e),o=(0,a.useRef)(!1),i=(0,a.useRef)(0),r=(0,a.useCallback)((e=>{null!==e&&(i.current=e.getBoundingClientRect().height)}),[]);return(0,S.RF)(((t,a)=>{let{scrollY:r}=t;if(!e)return;if(r=l?n(!1):r+c{if(!e)return;const a=t.location.hash;if(a?document.getElementById(a.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:r,isNavbarVisible:t}}(n);return(0,b.jsxs)("nav",{ref:r,"aria-label":(0,m.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,l.Z)("navbar","navbar--fixed-top",n&&[ee.navbarHideable,!s&&ee.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown}),children:[t,(0,b.jsx)(te,{onClick:i.toggle}),(0,b.jsx)(J,{})]})}var ae=n(809),oe=n(5160),ie=n(1603);function re(e){let{width:t=30,height:n=30,className:a,...o}=e;return(0,b.jsx)("svg",{className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,b.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function le(){const{toggle:e,shown:t}=(0,L.e)();return(0,b.jsx)("button",{onClick:e,"aria-label":(0,m.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,b.jsx)(re,{})})}var se=n(5243);const ce={colorModeToggle:"colorModeToggle_Kblj"};function ue(e){let{items:t}=e;return(0,b.jsx)(b.Fragment,{children:t.map(((e,t)=>(0,b.jsx)(ae.QW,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,b.jsx)(Q.Z,{...e})},t)))})}function de(e){let{left:t,right:n}=e;return(0,b.jsxs)("div",{className:"navbar__inner",children:[(0,b.jsx)("div",{className:"navbar__items",children:t}),(0,b.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function pe(){const e=(0,L.e)(),t=(0,g.L)().navbar.items,[n,a]=(0,oe.A)(t),o=t.find((e=>"search"===e.type));return(0,b.jsx)(de,{left:(0,b.jsxs)(b.Fragment,{children:[!e.disabled&&(0,b.jsx)(le,{}),(0,b.jsx)(W,{}),(0,b.jsx)(ue,{items:n})]}),right:(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(ue,{items:a}),(0,b.jsx)(M,{className:ce.colorModeToggle}),!o&&(0,b.jsx)(se.Z,{children:(0,b.jsx)(ie.Z,{})})]})})}function ge(){return(0,b.jsx)(ne,{children:(0,b.jsx)(pe,{})})}var fe=n(8295),me=n(3815);function be(e){let{item:t}=e;const{to:n,href:a,label:o,prependBaseUrlToHref:i,...r}=t,l=(0,B.Z)(n),s=(0,B.Z)(a,{forcePrependBaseUrl:!0});return(0,b.jsxs)(O.Z,{className:"footer__link-item",...a?{href:i?s:a}:{to:l},...r,children:[o,a&&!(0,fe.Z)(a)&&(0,b.jsx)(me.Z,{})]})}function he(e){let{item:t}=e;return t.html?(0,b.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,b.jsx)("li",{className:"footer__item",children:(0,b.jsx)(be,{item:t})},t.href??t.to)}function ye(e){let{column:t}=e;return(0,b.jsxs)("div",{className:"col footer__col",children:[(0,b.jsx)("div",{className:"footer__title",children:t.title}),(0,b.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,b.jsx)(he,{item:e},t)))})]})}function we(e){let{columns:t}=e;return(0,b.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,b.jsx)(ye,{column:e},t)))})}function ve(){return(0,b.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function ke(e){let{item:t}=e;return t.html?(0,b.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,b.jsx)(be,{item:t})}function _e(e){let{links:t}=e;return(0,b.jsx)("div",{className:"footer__links text--center",children:(0,b.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,b.jsxs)(a.Fragment,{children:[(0,b.jsx)(ke,{item:e}),t.length!==n+1&&(0,b.jsx)(ve,{})]},n)))})})}function xe(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,b.jsx)(we,{columns:t}):(0,b.jsx)(_e,{links:t})}const Le={footerLogoLink:"footerLogoLink_K6r0"};function Ce(e){let{logo:t}=e;const{withBaseUrl:n}=(0,B.C)(),a={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,b.jsx)($,{className:(0,l.Z)("footer__logo",t.className),alt:t.alt,sources:a,width:t.width,height:t.height,style:t.style})}function Se(e){let{logo:t}=e;return t.href?(0,b.jsx)(O.Z,{href:t.href,className:Le.footerLogoLink,target:t.target,children:(0,b.jsx)(Ce,{logo:t})}):(0,b.jsx)(Ce,{logo:t})}function Ae(e){let{copyright:t}=e;return(0,b.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Pe(e){let{style:t,links:n,logo:a,copyright:o}=e;return(0,b.jsx)("footer",{className:(0,l.Z)("footer",{"footer--dark":"dark"===t}),children:(0,b.jsxs)("div",{className:"container container-fluid",children:[n,(a||o)&&(0,b.jsxs)("div",{className:"footer__bottom text--center",children:[a&&(0,b.jsx)("div",{className:"margin-bottom--sm",children:a}),o]})]})})}function De(){const{footer:e}=(0,g.L)();if(!e)return null;const{copyright:t,links:n,logo:a,style:o}=e;return(0,b.jsx)(Pe,{style:o,links:n&&n.length>0&&(0,b.jsx)(xe,{links:n}),logo:a&&(0,b.jsx)(Se,{logo:a}),copyright:t&&(0,b.jsx)(Ae,{copyright:t})})}const Te=a.memo(De);var Ie=n(5299),Ee=n(2520);const je={mainWrapper:"mainWrapper_Xc8_"};function Re(e){const{children:t,noFooter:n,wrapperClassName:a,title:o,description:i}=e;return(0,d.t)(),(0,b.jsxs)(Ie.Z,{children:[(0,b.jsx)(s.d,{title:o,description:i}),(0,b.jsx)(p.Z,{}),(0,b.jsx)(x,{}),(0,b.jsx)(ge,{}),(0,b.jsx)("div",{id:c.u,className:(0,l.Z)(u.k.wrapper.main,je.mainWrapper,a),children:(0,b.jsx)(Be,{fallback:e=>(0,b.jsx)(Ee.Z,{...e}),children:t})}),!n&&(0,b.jsx)(Te,{})]})}function Ne(e){let{error:t,tryAgain:n}=e;return(0,b.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,b.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,b.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,b.jsx)(Fe,{error:t})]})}function Fe(e){let{error:t}=e;const n=(0,r.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,b.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function Me(e){let{error:t,tryAgain:n}=e;return(0,b.jsxs)(Be,{fallback:()=>(0,b.jsx)(Ne,{error:t,tryAgain:n}),children:[(0,b.jsx)(i.Z,{children:(0,b.jsx)("title",{children:"Page Error"})}),(0,b.jsx)(Re,{children:(0,b.jsx)(Ne,{error:t,tryAgain:n})})]})}const Oe=e=>(0,b.jsx)(Me,{...e});class Be extends a.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??Oe)(e)}return e??null}}},6047:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});const a="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:a,canUseEventListeners:a&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:a&&"IntersectionObserver"in window,canUseViewport:a&&"screen"in window}},4491:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(959);var a=n(387),o=n(1527);function i(e){return(0,o.jsx)(a.ql,{...e})}},3630:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r,s:()=>i});var a=n(959),o=n(1527);function i(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,a.isValidElement)(e)))?n.map(((e,t)=>(0,a.isValidElement)(e)?a.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}function r(e){let{children:t,values:n}=e;if("string"!=typeof t)throw new Error("The Docusaurus component only accept simple string values. Received: "+((0,a.isValidElement)(t)?"React element":typeof t));return(0,o.jsx)(o.Fragment,{children:i(t,n)})}},0:(e,t,n)=>{"use strict";n.d(t,{Z:()=>g});var a=n(959),o=n(9500),i=n(6771),r=n(2688),l=n(8295),s=n(6047),c=n(1527);const u=a.createContext({collectLink:()=>{}});var d=n(9925);function p(e,t){let{isNavLink:n,to:p,href:g,activeClassName:f,isActive:m,"data-noBrokenLinkCheck":b,autoAddBaseUrl:h=!0,...y}=e;const{siteConfig:{trailingSlash:w,baseUrl:v}}=(0,r.Z)(),{withBaseUrl:k}=(0,d.C)(),_=(0,a.useContext)(u),x=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,(()=>x.current));const L=p||g;const C=(0,l.Z)(L),S=L?.replace("pathname://","");let A=void 0!==S?(P=S,h&&(e=>e.startsWith("/"))(P)?k(P):P):void 0;var P;A&&C&&(A=(0,i.applyTrailingSlash)(A,{trailingSlash:w,baseUrl:v}));const D=(0,a.useRef)(!1),T=n?o.OL:o.rU,I=s.Z.canUseIntersectionObserver,E=(0,a.useRef)(),j=()=>{D.current||null==A||(window.docusaurus.preload(A),D.current=!0)};(0,a.useEffect)((()=>(!I&&C&&null!=A&&window.docusaurus.prefetch(A),()=>{I&&E.current&&E.current.disconnect()})),[E,A,I,C]);const R=A?.startsWith("#")??!1,N=!A||!C||R;return N||b||_.collectLink(A),N?(0,c.jsx)("a",{ref:x,href:A,...L&&!C&&{target:"_blank",rel:"noopener noreferrer"},...y}):(0,c.jsx)(T,{...y,onMouseEnter:j,onTouchStart:j,innerRef:e=>{x.current=e,I&&e&&C&&(E.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(E.current.unobserve(e),E.current.disconnect(),null!=A&&window.docusaurus.prefetch(A))}))})),E.current.observe(e))},to:A,...n&&{isActive:m,activeClassName:f}})}const g=a.forwardRef(p)},1603:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const a=()=>null},5374:(e,t,n)=>{"use strict";n.d(t,{I:()=>l,Z:()=>s});n(959);var a=n(3630),o=n(7529),i=n(1527);function r(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return o[t??n]??n??t}function l(e,t){let{message:n,id:o}=e;const i=r({message:n,id:o});return(0,a.s)(i,t)}function s(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const l=r({message:t,id:n});return(0,i.jsx)(i.Fragment,{children:(0,a.s)(l,o)})}},4684:(e,t,n)=>{"use strict";n.d(t,{m:()=>a});const a="default"},8295:(e,t,n)=>{"use strict";function a(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!a(e)}n.d(t,{Z:()=>o,b:()=>a})},9925:(e,t,n)=>{"use strict";n.d(t,{C:()=>r,Z:()=>l});var a=n(959),o=n(2688),i=n(8295);function r(){const{siteConfig:{baseUrl:e,url:t}}=(0,o.Z)(),n=(0,a.useCallback)(((n,a)=>function(e,t,n,a){let{forcePrependBaseUrl:o=!1,absolute:r=!1}=void 0===a?{}:a;if(!n||n.startsWith("#")||(0,i.b)(n))return n;if(o)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return r?e+l:l}(t,e,n,a)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=r();return n(e,t)}},2688:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var a=n(959),o=n(6855);function i(){return(0,a.useContext)(o._)}},7111:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var a=n(959),o=n(7752);function i(){return(0,a.useContext)(o._)}},2827:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var a=n(959);const o=n(6047).Z.canUseDOM?a.useLayoutEffect:a.useEffect},4420:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});const a=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[i,r]=n;const l=o?`${o}.${i}`:i;a(r)?e(r,l):t[l]=r}))}(e),t}},2762:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,z:()=>r});var a=n(959),o=n(1527);const i=a.createContext(null);function r(e){let{children:t,value:n}=e;const r=a.useContext(i),l=(0,a.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const a={...t.data,...n?.data};return{plugin:t.plugin,data:a}}({parent:r,value:n})),[r,n]);return(0,o.jsx)(i.Provider,{value:l,children:t})}},9384:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>f,_r:()=>u,zh:()=>d,yW:()=>g,gB:()=>p});var a=n(8903),o=n(2688),i=n(4684);function r(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=function(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,a.LX)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),o=n?.docs.find((e=>!!(0,a.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((a=>{a.id===t&&(n[e.name]=a)}))})),n}(o.id):{}}}const c={},u=()=>r("docusaurus-plugin-content-docs")??c,d=e=>function(e,t,n){void 0===t&&(t=i.m),void 0===n&&(n={});const a=r(e),o=a?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0});function p(e){return d(e).versions}function g(e){const t=d(e);return l(t)}function f(e){const t=d(e),{pathname:n}=(0,a.TH)();return s(t,n)}},3852:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});const a={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||setTimeout((()=>{window.gtag("set","page_path",t.pathname+t.search+t.hash),window.gtag("event","page_view")}))}}},7558:(e,t,n)=>{"use strict";function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(){return r=Object.assign||function(e){for(var t=1;t{"use strict";n.r(t),n.d(t,{default:()=>i});var a=n(9981),o=n.n(a);o().configure({showSpinner:!1});const i={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},6070:(e,t,n)=>{"use strict";n.r(t);var a=n(2425),o=n(6809);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:a}=t;globalThis.Prism=e,a.forEach((e=>{"php"===e&&n(1559),n(1422)(`./prism-${e}`)})),delete globalThis.Prism}(a.p1)},2520:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});n(959);var a=n(5374),o=n(809),i=n(6561),r=n(1527);function l(e){let{error:t,tryAgain:n}=e;return(0,r.jsx)("main",{className:"container margin-vert--xl",children:(0,r.jsx)("div",{className:"row",children:(0,r.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,r.jsx)(i.Z,{as:"h1",className:"hero__title",children:(0,r.jsx)(a.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,r.jsx)("div",{className:"margin-vert--lg",children:(0,r.jsx)(o.Cw,{onClick:n,className:"button button--primary shadow--lw"})}),(0,r.jsx)("hr",{}),(0,r.jsx)("div",{className:"margin-vert--md",children:(0,r.jsx)(o.aG,{error:t})})]})})})}},6561:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});n(959);var a=n(5341),o=n(5374),i=n(2593),r=n(0);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_dXVO",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_ZIVZ"};var s=n(1527);function c(e){let{as:t,id:n,...c}=e;const{navbar:{hideOnScroll:u}}=(0,i.L)();if("h1"===t||!n)return(0,s.jsx)(t,{...c,id:void 0});const d=(0,o.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof c.children?c.children:n});return(0,s.jsxs)(t,{...c,className:(0,a.Z)("anchor",u?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,c.className),id:n,children:[c.children,(0,s.jsx)(r.Z,{className:"hash-link",to:`#${n}`,"aria-label":d,title:d,children:"\u200b"})]})}},3815:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(959);const a={iconExternalLink:"iconExternalLink_ocOZ"};var o=n(1527);function i(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:a.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},5299:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(959);var a=n(7399),o=n(1694),i=n(4288),r=n(3707),l=n(1836),s=n(1610),c=n(5160),u=n(1527);const d=(0,a.Qc)([o.S,i.pl,r.OC,l.L5,s.VC,c.V]);function p(e){let{children:t}=e;return(0,u.jsx)(d,{children:t})}},5243:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});n(959);var a=n(5341);const o={navbarSearchContainer:"navbarSearchContainer_Pu8E"};var i=n(1527);function r(e){let{children:t,className:n}=e;return(0,i.jsx)("div",{className:(0,a.Z)(n,o.navbarSearchContainer),children:t})}},6612:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});n(959);var a=n(0),o=n(9925),i=n(8295),r=n(3535),l=n(3815),s=n(1527);function c(e){let{activeBasePath:t,activeBaseRegex:n,to:c,href:u,label:d,html:p,isDropdownLink:g,prependBaseUrlToHref:f,...m}=e;const b=(0,o.Z)(c),h=(0,o.Z)(t),y=(0,o.Z)(u,{forcePrependBaseUrl:!0}),w=d&&u&&!(0,i.Z)(u),v=p?{dangerouslySetInnerHTML:{__html:p}}:{children:(0,s.jsxs)(s.Fragment,{children:[d,w&&(0,s.jsx)(l.Z,{...g&&{width:12,height:12}})]})};return u?(0,s.jsx)(a.Z,{href:f?y:u,...m,...v}):(0,s.jsx)(a.Z,{to:b,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,r.F)(n,t.pathname):t.pathname.startsWith(h)},...m,...v})}},6794:(e,t,n)=>{"use strict";n.d(t,{Z:()=>v});n(959);var a=n(5341),o=n(6612),i=n(1527);function r(e){let{className:t,isDropdownItem:n=!1,...r}=e;const l=(0,i.jsx)(o.Z,{className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,i.jsx)("li",{children:l}):l}function l(e){let{className:t,isDropdownItem:n,...r}=e;return(0,i.jsx)("li",{className:"menu__list-item",children:(0,i.jsx)(o.Z,{className:(0,a.Z)("menu__link",t),...r})})}function s(e){let{mobile:t=!1,position:n,...a}=e;const o=t?l:r;return(0,i.jsx)(o,{...a,activeClassName:a.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var c=n(8784),u=n(7412),d=n(1603),p=n(5243);var g=n(9384),f=n(8068);var m=n(1836),b=n(5374),h=n(8903);const y=e=>e.docs.find((t=>t.id===e.mainDocId));const w={default:s,localeDropdown:u.Z,search:function(e){let{mobile:t,className:n}=e;return t?null:(0,i.jsx)(p.Z,{className:n,children:(0,i.jsx)(d.Z,{})})},dropdown:c.Z,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:r=!1}=e;const l=r?"li":"div";return(0,i.jsx)(l,{className:(0,a.Z)({navbar__item:!o&&!r,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:r}=(0,g.Iw)(a),l=(0,f.vY)(t,a),c=r?.path===l?.path;return null===l||l.unlisted&&!c?null:(0,i.jsx)(s,{exact:!0,...o,isActive:()=>c||!!r?.sidebar&&r.sidebar===l.sidebar,label:n??l.id,to:l.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:r}=(0,g.Iw)(a),l=(0,f.oz)(t,a).link;if(!l)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,i.jsx)(s,{exact:!0,...o,isActive:()=>r?.sidebar===t,label:n??l.label,to:l.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e;const r=(0,f.lO)(a)[0],l=t??r.label,c=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(r).path;return(0,i.jsx)(s,{...o,label:l,to:c})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:r,...l}=e;const{search:u,hash:d}=(0,h.TH)(),p=(0,g.Iw)(n),w=(0,g.gB)(n),{savePreferredVersionName:v}=(0,m.J)(n),k=[...o,...w.map((e=>{const t=p.alternateDocVersions[e.name]??y(e);return{label:e.label,to:`${t.path}${u}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>v(e.name)}})),...r],_=(0,f.lO)(n)[0],x=t&&k.length>1?(0,b.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):_.label,L=t&&k.length>1?void 0:y(_).path;return k.length<=1?(0,i.jsx)(s,{...l,mobile:t,label:x,to:L,isActive:a?()=>!1:void 0}):(0,i.jsx)(c.Z,{...l,mobile:t,label:x,to:L,items:k,isActive:a?()=>!1:void 0})}};function v(e){let{type:t,...n}=e;const a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=w[a];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,i.jsx)(o,{...n})}},7535:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(959);var a=n(4491),o=n(1527);function i(e){let{locale:t,version:n,tag:i}=e;const r=t;return(0,o.jsxs)(a.Z,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),i&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:i}),r&&(0,o.jsx)("meta",{name:"docsearch:language",content:r}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),i&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:i})]})}},7675:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});n(959);var a=n(9920);const o={skipToContent:"skipToContent_YRel"};var i=n(1527);function r(){return(0,i.jsx)(a.l,{className:o.skipToContent})}},4794:(e,t,n)=>{"use strict";n.d(t,{z:()=>h,u:()=>s});var a=n(959),o=n(6047),i=n(2827);var r=n(1527);const l="ease-in-out";function s(e){let{initialState:t}=e;const[n,o]=(0,a.useState)(t??!1),i=(0,a.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:i}}const c={display:"none",overflow:"hidden",height:"0px"},u={display:"block",overflow:"visible",height:"auto"};function d(e,t){const n=t?c:u;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function p(e){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}function g(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const i=(0,a.useRef)(!1);(0,a.useEffect)((()=>{const e=t.current;function a(){const t=function(){const t=e.scrollHeight;return{transition:`height ${o?.duration??p(t)}ms ${o?.easing??l}`,height:`${t}px`}}();e.style.transition=t.transition,e.style.height=t.height}if(!i.current)return d(e,n),void(i.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(a(),requestAnimationFrame((()=>{e.style.height=c.height,e.style.overflow=c.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{a()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function f(e){if(!o.Z.canUseDOM)return e?c:u}function m(e){let{as:t="div",collapsed:n,children:o,animation:i,onCollapseTransitionEnd:l,className:s,disableSSRStyle:c}=e;const u=(0,a.useRef)(null);return g({collapsibleRef:u,collapsed:n,animation:i}),(0,r.jsx)(t,{ref:u,style:c?void 0:f(n),onTransitionEnd:e=>{"height"===e.propertyName&&(d(u.current,n),l?.(n))},className:s,children:o})}function b(e){let{collapsed:t,...n}=e;const[o,l]=(0,a.useState)(!t),[s,c]=(0,a.useState)(t);return(0,i.Z)((()=>{t||l(!0)}),[t]),(0,i.Z)((()=>{o&&c(t)}),[o,t]),o?(0,r.jsx)(m,{...n,collapsed:s}):null}function h(e){let{lazy:t,...n}=e;const a=t?b:m;return(0,r.jsx)(a,{...n})}},4288:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>f});var a=n(959),o=n(7111),i=n(6340),r=n(7399),l=n(2593),s=n(1527);const c=(0,i.WA)("docusaurus.announcement.dismiss"),u=(0,i.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),g=a.createContext(null);function f(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,o.Z)(),[n,i]=(0,a.useState)((()=>!!t&&d()));(0,a.useEffect)((()=>{i(d())}),[]);const r=(0,a.useCallback)((()=>{p(!0),i(!0)}),[]);return(0,a.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const a=t!==n;u.set(t),a&&p(!1),!a&&d()||i(!1)}),[e]),(0,a.useMemo)((()=>({isActive:!!e&&!n,close:r})),[e,n,r])}();return(0,s.jsx)(g.Provider,{value:n,children:t})}function m(){const e=(0,a.useContext)(g);if(!e)throw new r.i6("AnnouncementBarProvider");return e}},1694:(e,t,n)=>{"use strict";n.d(t,{I:()=>h,S:()=>b});var a=n(959),o=n(6047),i=n(7399),r=n(6340),l=n(2593),s=n(1527);const c=a.createContext(void 0),u="theme",d=(0,r.WA)(u),p={light:"light",dark:"dark"},g=e=>e===p.dark?p.dark:p.light,f=e=>o.Z.canUseDOM?g(document.documentElement.getAttribute("data-theme")):g(e),m=e=>{d.set(g(e))};function b(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[o,i]=(0,a.useState)(f(e));(0,a.useEffect)((()=>{t&&d.del()}),[t]);const r=(0,a.useCallback)((function(t,a){void 0===a&&(a={});const{persist:o=!0}=a;t?(i(t),o&&m(t)):(i(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,a.useEffect)((()=>{document.documentElement.setAttribute("data-theme",g(o))}),[o]),(0,a.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&r(g(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,r]);const s=(0,a.useRef)(!1);return(0,a.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:r(null)};return e.addListener(a),()=>e.removeListener(a)}),[r,t,n]),(0,a.useMemo)((()=>({colorMode:o,setColorMode:r,get isDarkTheme(){return o===p.dark},setLightTheme(){r(p.light)},setDarkTheme(){r(p.dark)}})),[o,r])}();return(0,s.jsx)(c.Provider,{value:n,children:t})}function h(){const e=(0,a.useContext)(c);if(null==e)throw new i.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},1836:(e,t,n)=>{"use strict";n.d(t,{J:()=>w,L5:()=>h});var a=n(959),o=n(9384),i=n(4684),r=n(2593),l=n(8068),s=n(7399),c=n(6340),u=n(1527);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()}},g=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=a.createContext(null);function m(){const e=(0,o._r)(),t=(0,r.L)().docs.versionPersistence,n=(0,a.useMemo)((()=>Object.keys(e)),[e]),[i,l]=(0,a.useState)((()=>g(n)));(0,a.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:a}=e;function o(e){const t=p.read(e,n);return a[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[i,(0,a.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function b(e){let{children:t}=e;const n=m();return(0,u.jsx)(f.Provider,{value:n,children:t})}function h(e){let{children:t}=e;return l.cE?(0,u.jsx)(b,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function y(){const e=(0,a.useContext)(f);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function w(e){void 0===e&&(e=i.m);const t=(0,o.zh)(e),[n,r]=y(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,a.useCallback)((t=>{r.savePreferredVersion(e,t)}),[r,e])}}},5580:(e,t,n)=>{"use strict";n.d(t,{M:()=>b,e:()=>h});var a=n(959),o=n(5195),i=n(6047);const r={desktop:"desktop",mobile:"mobile",ssr:"ssr"},l=996;function s(){const[e,t]=(0,a.useState)((()=>"ssr"));return(0,a.useEffect)((()=>{function e(){t(function(){if(!i.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>l?r.desktop:r.mobile}())}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e}var c=n(8903),u=n(7399);function d(e){!function(e){const t=(0,c.k6)(),n=(0,u.zX)(e);(0,a.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var p=n(2593),g=n(1527);const f=a.createContext(void 0);function m(){const e=function(){const e=(0,o.HY)(),{items:t}=(0,p.L)().navbar;return 0===t.length&&!e.component}(),t=s(),n=!e&&"mobile"===t,[i,r]=(0,a.useState)(!1);d((()=>{if(i)return r(!1),!1}));const l=(0,a.useCallback)((()=>{r((e=>!e))}),[]);return(0,a.useEffect)((()=>{"desktop"===t&&r(!1)}),[t]),(0,a.useMemo)((()=>({disabled:e,shouldRender:n,toggle:l,shown:i})),[e,n,l,i])}function b(e){let{children:t}=e;const n=m();return(0,g.jsx)(f.Provider,{value:n,children:t})}function h(){const e=a.useContext(f);if(void 0===e)throw new u.i6("NavbarMobileSidebarProvider");return e}},5195:(e,t,n)=>{"use strict";n.d(t,{HY:()=>s,n2:()=>l});var a=n(959),o=n(7399),i=n(1527);const r=a.createContext(null);function l(e){let{children:t}=e;const n=(0,a.useState)({component:null,props:null});return(0,i.jsx)(r.Provider,{value:n,children:t})}function s(){const e=(0,a.useContext)(r);if(!e)throw new o.i6("NavbarSecondaryMenuContentProvider");return e[0]}},1900:(e,t,n)=>{"use strict";n.d(t,{P:()=>c,Y:()=>d});var a=n(959),o=n(7399),i=n(5580),r=n(5195),l=n(1527);const s=a.createContext(null);function c(e){let{children:t}=e;const n=function(){const e=(0,i.e)(),t=(0,r.HY)(),[n,l]=(0,a.useState)(!1),s=null!==t.component,c=(0,o.D9)(s);return(0,a.useEffect)((()=>{s&&!c&&l(!0)}),[s,c]),(0,a.useEffect)((()=>{s?e.shown||l(!0):l(!1)}),[e.shown,s]),(0,a.useMemo)((()=>[n,l]),[n])}();return(0,l.jsx)(s.Provider,{value:n,children:t})}function u(e){if(e.component){const t=e.component;return(0,l.jsx)(t,{...e.props})}}function d(){const e=(0,a.useContext)(s);if(!e)throw new o.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,i=(0,a.useCallback)((()=>n(!1)),[n]),l=(0,r.HY)();return(0,a.useMemo)((()=>({shown:t,hide:i,content:u(l)})),[i,l,t])}},864:(e,t,n)=>{"use strict";n.d(t,{h:()=>o,t:()=>i});var a=n(959);const o="navigation-with-keyboard";function i(){(0,a.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},421:(e,t,n)=>{"use strict";n.d(t,{k:()=>a});const a={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},8068:(e,t,n)=>{"use strict";n.d(t,{cE:()=>l,lO:()=>s,vY:()=>u,oz:()=>c});var a=n(959),o=n(9384),i=n(1836);function r(e){return Array.from(new Set(e))}const l=!!o._r;function s(e){const{activeVersion:t}=(0,o.Iw)(e),{preferredVersion:n}=(0,i.J)(e),l=(0,o.yW)(e);return(0,a.useMemo)((()=>r([t,n,l].filter(Boolean))),[t,n,l])}function c(e,t){const n=s(t);return(0,a.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),a=t.find((t=>t[0]===e));if(!a)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return a[1]}),[e,n])}function u(e,t){const n=s(t);return(0,a.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),a=t.find((t=>t.id===e));if(!a){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${r(t.map((e=>e.id))).join("\n- ")}`)}return a}),[e,n])}},809:(e,t,n)=>{"use strict";n.d(t,{aG:()=>c,Cw:()=>s,QW:()=>u});var a=n(959),o=n(5374),i=n(6771);const r={errorBoundaryError:"errorBoundaryError_t44J",errorBoundaryFallback:"errorBoundaryFallback_HTeJ"};var l=n(1527);function s(e){return(0,l.jsx)("button",{type:"button",...e,children:(0,l.jsx)(o.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function c(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,l.jsx)("p",{className:r.errorBoundaryError,children:n})}class u extends a.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}},1610:(e,t,n)=>{"use strict";n.d(t,{FG:()=>g,d:()=>d,VC:()=>f});var a=n(959),o=n(5341),i=n(4491),r=n(2762);function l(){const e=a.useContext(r._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(9925),c=n(2688);var u=n(1527);function d(e){let{title:t,description:n,keywords:a,image:o,children:r}=e;const l=function(e){const{siteConfig:t}=(0,c.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}(t),{withBaseUrl:d}=(0,s.C)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(i.Z,{children:[t&&(0,u.jsx)("title",{children:l}),t&&(0,u.jsx)("meta",{property:"og:title",content:l}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),a&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),r]})}const p=a.createContext(void 0);function g(e){let{className:t,children:n}=e;const r=a.useContext(p),l=(0,o.Z)(r,t);return(0,u.jsxs)(p.Provider,{value:l,children:[(0,u.jsx)(i.Z,{children:(0,u.jsx)("html",{className:l})}),n]})}function f(e){let{children:t}=e;const n=l(),a=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(g,{className:(0,o.Z)(a,i),children:t})}},5160:(e,t,n)=>{"use strict";n.d(t,{A:()=>s,V:()=>c});n(959);var a=n(5580),o=n(5195),i=n(1900),r=n(1527);const l="right";function s(e){function t(e){return"left"===(e.position??l)}return[e.filter(t),e.filter((e=>!t(e)))]}function c(e){let{children:t}=e;return(0,r.jsx)(o.n2,{children:(0,r.jsx)(a.M,{children:(0,r.jsx)(i.P,{children:t})})})}},7399:(e,t,n)=>{"use strict";n.d(t,{D9:()=>l,Qc:()=>u,Ql:()=>c,i6:()=>s,zX:()=>r});var a=n(959),o=n(2827),i=n(1527);function r(e){const t=(0,a.useRef)(e);return(0,o.Z)((()=>{t.current=e}),[e]),(0,a.useCallback)((function(){return t.current(...arguments)}),[])}function l(e){const t=(0,a.useRef)();return(0,o.Z)((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,a.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,i.jsx)(i.Fragment,{children:e.reduceRight(((e,t)=>(0,i.jsx)(t,{children:e})),n)})}}},3535:(e,t,n)=>{"use strict";function a(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>a})},3707:(e,t,n)=>{"use strict";n.d(t,{OC:()=>s,RF:()=>d});var a=n(959),o=n(6047),i=(n(7111),n(2827),n(7399)),r=n(1527);const l=a.createContext(void 0);function s(e){let{children:t}=e;const n=function(){const e=(0,a.useRef)(!0);return(0,a.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,r.jsx)(l.Provider,{value:n,children:t})}function c(){const e=(0,a.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const u=()=>o.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=c(),o=(0,a.useRef)(u()),r=(0,i.zX)(e);(0,a.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=u();r(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[r,n,...t])}},9920:(e,t,n)=>{"use strict";n.d(t,{l:()=>p,u:()=>s});var a=n(959),o=n(8903),i=n(5374),r=n(5508),l=n(1527);const s="__docusaurus_skipToContent_fallback";function c(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function u(){const e=(0,a.useRef)(null),{action:t}=(0,o.k6)(),n=(0,a.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(s);t&&c(t)}),[]);return(0,r.S)((n=>{let{location:a}=n;e.current&&!a.hash&&"PUSH"===t&&c(e.current)})),{containerRef:e,onClick:n}}const d=(0,i.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function p(e){const t=e.children??d,{containerRef:n,onClick:a}=u();return(0,l.jsx)("div",{ref:n,role:"region","aria-label":d,children:(0,l.jsx)("a",{...e,href:`#${s}`,onClick:a,children:t})})}},6340:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(959);const a="localStorage";function o(e){let{key:t,oldValue:n,newValue:a,storage:o}=e;if(n===a)return;const i=document.createEvent("StorageEvent");i.initStorageEvent("storage",!1,!1,t,n,a,window.location.href,o),window.dispatchEvent(i)}function i(e){if(void 0===e&&(e=a),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,r||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),r=!0),null}var t}let r=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=i(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const a=n.getItem(e);n.setItem(e,t),o({key:e,oldValue:a,newValue:t,storage:n})}catch(a){console.error(`Docusaurus storage error, can't set ${e}=${t}`,a)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),o({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const a=a=>{a.storageArea===n&&a.key===e&&t(a)};return window.addEventListener("storage",a),()=>window.removeEventListener("storage",a)}catch(a){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,a),()=>{}}}}}},8224:(e,t,n)=>{"use strict";n.d(t,{l:()=>r});var a=n(2688),o=n(8903),i=n(6771);function r(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:r,currentLocale:l}}=(0,a.Z)(),{pathname:s}=(0,o.TH)(),c=(0,i.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),u=l===r?e:e.replace(`/${l}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:a}=e;return`${a?t:""}${function(e){return e===r?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5508:(e,t,n)=>{"use strict";n.d(t,{S:()=>r});var a=n(959),o=n(8903),i=n(7399);function r(e){const t=(0,o.TH)(),n=(0,i.D9)(t),r=(0,i.zX)(e);(0,a.useEffect)((()=>{n&&t!==n&&r({location:t,previousLocation:n})}),[r,t,n])}},2593:(e,t,n)=>{"use strict";n.d(t,{L:()=>o});var a=n(2688);function o(){return(0,a.Z)().siteConfig.themeConfig}},6115:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:a}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[o]=e.split(/[#?]/),i="/"===o||o===a?o:(r=o,n?function(e){return e.endsWith("/")?e:`${e}/`}(r):function(e){return e.endsWith("/")?e.slice(0,-1):e}(r));var r;return e.replace(o,i)}},6901:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},6771:function(e,t,n){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var o=n(6115);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return a(o).default}});var i=n(6901);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},8784:(e,t,n)=>{"use strict";n.d(t,{Z:()=>b});var a=n(959),o=n(5341),i=n(3535),r=n(4794),l=(n(6002),n(2688));var s=n(8903);var c=n(6612),u=n(6794);const d={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_JUhd"};var p=n(1527);function g(e,t){return e.some((e=>function(e,t){return!!function(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}(e.to,t)||!!(0,i.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function f(e){let{items:t,position:n,className:i,onClick:r,...l}=e;const s=(0,a.useRef)(null),[d,g]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{const e=e=>{s.current&&!s.current.contains(e.target)&&g(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[s]),(0,p.jsxs)("div",{ref:s,className:(0,o.Z)("navbar__item","dropdown",{"dropdown--right":"right"===n,"dropdown--show":d}),onClick:()=>{g(!d)},children:[(0,p.jsx)(c.Z,{"aria-haspopup":"true","aria-expanded":d,role:"button",href:l.to?void 0:"#",className:(0,o.Z)("navbar__link",i),...l,onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),g(!d))},children:l.children??l.label}),(0,p.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,a.createElement)(u.Z,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function m(e){let{items:t,className:n,position:i,onClick:f,...m}=e;const b=function(){const{siteConfig:{baseUrl:e}}=(0,l.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),h=g(t,b),{collapsed:y,toggleCollapsed:w,setCollapsed:v}=(0,r.u)({initialState:()=>!h});return(0,a.useEffect)((()=>{h&&v(!h)}),[b,h,v]),(0,p.jsxs)("li",{className:(0,o.Z)("menu__list-item",{"menu__list-item--collapsed":y}),children:[(0,p.jsx)(c.Z,{role:"button",className:(0,o.Z)(d.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...m,onClick:e=>{e.preventDefault(),w()},children:m.children??m.label}),(0,p.jsx)(r.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:y,children:t.map(((e,t)=>(0,a.createElement)(u.Z,{mobile:!0,isDropdownItem:!0,onClick:f,activeClassName:"menu__link--active",...e,key:t})))})]})}function b(e){let{mobile:t=!1,...n}=e;const a=t?m:f;return(0,p.jsx)(a,{...n})}},7412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(959);var a=n(2688),o=n(8224),i=n(8903),r=n(8784),l=n(1527);function s(e){let{width:t=20,height:n=20,...a}=e;return(0,l.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...a,children:(0,l.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const c={iconLanguage:"iconLanguage_DSK9"};function u(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:u,queryString:d="",whiteTheme:p=!1,...g}=e;const{i18n:{currentLocale:f,locales:m,localeConfigs:b}}=(0,a.Z)(),h=(0,o.l)(),{search:y,hash:w}=(0,i.TH)(),v=[...n,...m.map((e=>{const n=`${`pathname://${h.createUrl({locale:e,fullyQualified:!1})}`}${y}${w}${d}`;return{label:b[e].label,lang:b[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===f?t?"menu__link--active":"dropdown__link--active":""}})),...u];return(0,l.jsx)(r.Z,{...g,mobile:t,label:(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{className:c.iconLanguage}),b[f].label]}),items:v})}},4047:(e,t,n)=>{"use strict";n.d(t,{lX:()=>v,q_:()=>S,ob:()=>g,PP:()=>P,Ep:()=>p});var a=n(6920);function o(e){return"/"===e.charAt(0)}function i(e,t){for(var n=t,a=n+1,o=e.length;a=0;p--){var g=r[p];"."===g?i(r,p):".."===g?(i(r,p),d++):d&&(i(r,p),d--)}if(!c)for(;d--;d)r.unshift("..");!c||""===r[0]||r[0]&&o(r[0])||r.unshift("");var f=r.join("/");return n&&"/"!==f.substr(-1)&&(f+="/"),f};var l=n(8624);function s(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,a=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),a&&"#"!==a&&(o+="#"===a.charAt(0)?a:"#"+a),o}function g(e,t,n,o){var i;"string"==typeof e?(i=function(e){var t=e||"/",n="",a="",o=t.indexOf("#");-1!==o&&(a=t.substr(o),t=t.substr(0,o));var i=t.indexOf("?");return-1!==i&&(n=t.substr(i),t=t.substr(0,i)),{pathname:t,search:"?"===n?"":n,hash:"#"===a?"":a}}(e),i.state=t):(void 0===(i=(0,a.Z)({},e)).pathname&&(i.pathname=""),i.search?"?"!==i.search.charAt(0)&&(i.search="?"+i.search):i.search="",i.hash?"#"!==i.hash.charAt(0)&&(i.hash="#"+i.hash):i.hash="",void 0!==t&&void 0===i.state&&(i.state=t));try{i.pathname=decodeURI(i.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+i.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(i.key=n),o?i.pathname?"/"!==i.pathname.charAt(0)&&(i.pathname=r(i.pathname,o.pathname)):i.pathname=o.pathname:i.pathname||(i.pathname="/"),i}function f(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,a,o){if(null!=e){var i="function"==typeof e?e(t,n):e;"string"==typeof i?"function"==typeof a?a(i,o):o(!0):o(!1!==i)}else o(!0)},appendListener:function(e){var n=!0;function a(){n&&e.apply(void 0,arguments)}return t.push(a),function(){n=!1,t=t.filter((function(e){return e!==a}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),a=0;at?n.splice(t,n.length-t,o):n.push(o),d({action:a,location:o,index:t,entries:n})}}))},replace:function(e,t){var a="REPLACE",o=g(e,t,m(),v.location);u.confirmTransitionTo(o,a,n,(function(e){e&&(v.entries[v.index]=o,d({action:a,location:o}))}))},go:w,goBack:function(){w(-1)},goForward:function(){w(1)},canGo:function(e){var t=v.index+e;return t>=0&&t{"use strict";var a=n(6237),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},r={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return a.isMemo(e)?r:l[e.$$typeof]||o}l[a.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[a.Memo]=r;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,g=Object.getPrototypeOf,f=Object.prototype;e.exports=function e(t,n,a){if("string"!=typeof n){if(f){var o=g(n);o&&o!==f&&e(t,o,a)}var r=u(n);d&&(r=r.concat(d(n)));for(var l=s(t),m=s(n),b=0;b{"use strict";e.exports=function(e,t,n,a,o,i,r,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,a,o,i,r,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},901:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},89:(e,t,n)=>{"use strict";n.r(t)},962:(e,t,n)=>{"use strict";n.r(t)},1245:(e,t,n)=>{"use strict";n.r(t)},9981:function(e,t,n){var a,o;a=function(){var e,t,n={version:"0.2.0"},a=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function o(e,t,n){return en?n:e}function i(e){return 100*(-1+e)}function r(e,t,n){var o;return(o="translate3d"===a.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(a[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,a.minimum,1),n.status=1===e?null:e;var i=n.render(!t),c=i.querySelector(a.barSelector),u=a.speed,d=a.easing;return i.offsetWidth,l((function(t){""===a.positionUsing&&(a.positionUsing=n.getPositioningCSS()),s(c,r(e,u,d)),1===e?(s(i,{transition:"none",opacity:1}),i.offsetWidth,setTimeout((function(){s(i,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),a.trickleSpeed)};return a.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*a.trickleRate)},e=0,t=0,n.promise=function(a){return a&&"resolved"!==a.state()?(0===t&&n.start(),e++,t++,a.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=a.template;var o,r=t.querySelector(a.barSelector),l=e?"-100":i(n.status||0),c=document.querySelector(a.parent);return s(r,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),a.showSpinner||(o=t.querySelector(a.spinnerSelector))&&g(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&g(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function a(t){var n=document.body.style;if(t in n)return t;for(var a,o=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((a=e[o]+i)in n)return a;return t}function o(e){return e=n(e),t[e]||(t[e]=a(e))}function i(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,a,o=arguments;if(2==o.length)for(n in t)void 0!==(a=t[n])&&t.hasOwnProperty(n)&&i(e,n,a);else i(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),a=n+t;c(n,t)||(e.className=a.substring(1))}function d(e,t){var n,a=p(e);c(e,t)&&(n=a.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function g(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(o="function"==typeof a?a.call(t,n,t,e):a)||(e.exports=o)},7720:(e,t,n)=>{var a=n(901);e.exports=g,e.exports.parse=i,e.exports.compile=function(e,t){return l(i(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=p;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function i(e,t){for(var n,a=[],i=0,r=0,l="",u=t&&t.delimiter||"/";null!=(n=o.exec(e));){var d=n[0],p=n[1],g=n.index;if(l+=e.slice(r,g),r=g+d.length,p)l+=p[1];else{var f=e[r],m=n[2],b=n[3],h=n[4],y=n[5],w=n[6],v=n[7];l&&(a.push(l),l="");var k=null!=m&&null!=f&&f!==m,_="+"===w||"*"===w,x="?"===w||"*"===w,L=n[2]||u,C=h||y;a.push({name:b||i++,prefix:m||"",delimiter:L,optional:x,repeat:_,partial:k,asterisk:!!v,pattern:C?c(C):v?".*":"[^"+s(L)+"]+?"})}}return r{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},1884:(e,t,n)=>{const a=n(1064),o=n(6474),i=new Set;function r(e){void 0===e?e=Object.keys(a.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...i,...Object.keys(Prism.languages)];o(a,e,t).load((e=>{if(!(e in a.languages))return void(r.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(2928).resolve(t)],delete Prism.languages[e],n(2928)(t),i.add(e)}))}r.silent=!1,e.exports=r},1559:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,o,i){if(n.language===a){var r=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof i&&!i(e))return e;for(var o,l=r.length;-1!==n.code.indexOf(o=t(a,l));)++l;return r[l]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var o=0,i=Object.keys(n.tokenStack);!function r(l){for(var s=0;s=i.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=i[o],d=n.tokenStack[u],p="string"==typeof c?c:c.content,g=t(a,u),f=p.indexOf(g);if(f>-1){++o;var m=p.substring(0,f),b=new e.Token(a,e.tokenize(d,n.grammar),"language-"+a,d),h=p.substring(f+g.length),y=[];m&&y.push.apply(y,r([m])),y.push(b),h&&y.push.apply(y,r([h])),"string"==typeof c?l.splice.apply(l,[s,1].concat(y)):c.content=y}}else c.content&&r(c.content)}return l}(n.tokens)}}}})}(Prism)},2928:(e,t,n)=>{var a={"./":1884};function o(e){var t=i(e);return n(t)}function i(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=i,e.exports=o,o.id=2928},6474:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,a=e.length;n "));var l={},s=e[a];if(s){function c(t){if(!(t in e))throw new Error(a+" depends on an unknown component "+t);if(!(t in l))for(var r in o(t,i),l[t]=!0,n[t])l[r]=!0}t(s.require,c),t(s.optional,c),t(s.modify,c)}n[a]=l,i.pop()}}return function(e){var t=n[e];return t||(o(e,a),t=n[e]),t}}function o(e){for(var t in e)return!0;return!1}return function(i,r,l){var s=function(e){var t={};for(var n in e){var a=e[n];for(var o in a)if("meta"!=o){var i=a[o];t[o]="string"==typeof i?{title:i}:i}}return t}(i),c=function(e){var n;return function(a){if(a in e)return a;if(!n)for(var o in n={},e){var i=e[o];t(i&&i.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+o+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+o+" because it is a component.");n[t]=o}))}return n[a]||a}}(s);r=r.map(c),l=(l||[]).map(c);var u=n(r),d=n(l);r.forEach((function e(n){var a=s[n];t(a&&a.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,g=a(s),f=u;o(f);){for(var m in p={},f){var b=s[m];t(b&&b.modify,(function(e){e in d&&(p[e]=!0)}))}for(var h in d)if(!(h in u))for(var y in g(h))if(y in u){p[h]=!0;break}for(var w in f=p)u[w]=!0}var v={getIds:function(){var e=[];return v.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,a,o){var i=o?o.series:void 0,r=o?o.parallel:e,l={},s={};function c(e){if(e in l)return l[e];s[e]=!0;var o,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)o=a(e);else{var p=r(u.map((function(e){var t=c(e);return delete s[e],t})));i?o=i(p,(function(){return a(e)})):a(e)}return l[e]=o}for(var u in n)c(u);var d=[];for(var p in s)d.push(l[p]);return r(d)}(g,u,t,n)}};return v}}();e.exports=t},4049:(e,t,n)=>{"use strict";var a=n(6257);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,r){if(r!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n}},507:(e,t,n)=>{e.exports=n(4049)()},6257:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},3746:(e,t,n)=>{"use strict";var a=n(959),o=n(2962);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;nt}return!1}(t,n,o,a)&&(n=null),a||null===o?function(e){return!!d.call(f,e)||!d.call(g,e)&&(p.test(e)?f[e]=!0:(g[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):o.mustUseProperty?e[o.propertyName]=null===n?3!==o.type&&"":n:(t=o.attributeName,a=o.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(o=o.type)||4===o&&!0===n?"":""+n,a?e.setAttributeNS(a,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(h,y);b[t]=new m(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(h,y);b[t]=new m(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(h,y);b[t]=new m(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){b[e]=new m(e,1,!1,e.toLowerCase(),null,!1,!1)})),b.xlinkHref=new m("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){b[e]=new m(e,1,!1,e.toLowerCase(),null,!0,!0)}));var v=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.element"),_=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),L=Symbol.for("react.strict_mode"),C=Symbol.for("react.profiler"),S=Symbol.for("react.provider"),A=Symbol.for("react.context"),P=Symbol.for("react.forward_ref"),D=Symbol.for("react.suspense"),T=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),E=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var j=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var R=Symbol.iterator;function N(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=R&&e[R]||e["@@iterator"])?e:null}var F,M=Object.assign;function O(e){if(void 0===F)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);F=t&&t[1]||""}return"\n"+F+e}var B=!1;function z(e,t){if(!e||B)return"";B=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(c){var a=c}Reflect.construct(e,[],t)}else{try{t.call()}catch(c){a=c}e.call(t.prototype)}else{try{throw Error()}catch(c){a=c}e()}}catch(c){if(c&&a&&"string"==typeof c.stack){for(var o=c.stack.split("\n"),i=a.stack.split("\n"),r=o.length-1,l=i.length-1;1<=r&&0<=l&&o[r]!==i[l];)l--;for(;1<=r&&0<=l;r--,l--)if(o[r]!==i[l]){if(1!==r||1!==l)do{if(r--,0>--l||o[r]!==i[l]){var s="\n"+o[r].replace(" at new "," at ");return e.displayName&&s.includes("")&&(s=s.replace("",e.displayName)),s}}while(1<=r&&0<=l);break}}}finally{B=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?O(e):""}function q(e){switch(e.tag){case 5:return O(e.type);case 16:return O("Lazy");case 13:return O("Suspense");case 19:return O("SuspenseList");case 0:case 2:case 15:return e=z(e.type,!1);case 11:return e=z(e.type.render,!1);case 1:return e=z(e.type,!0);default:return""}}function U(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return"Fragment";case _:return"Portal";case C:return"Profiler";case L:return"StrictMode";case D:return"Suspense";case T:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case A:return(e.displayName||"Context")+".Consumer";case S:return(e._context.displayName||"Context")+".Provider";case P:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case I:return null!==(t=e.displayName||null)?t:U(e.type)||"Memo";case E:t=e._payload,e=e._init;try{return U(e(t))}catch(n){}}return null}function $(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=t.render).displayName||e.name||"",t.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return U(t);case 8:return t===L?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"==typeof t)return t.displayName||t.name||null;if("string"==typeof t)return t}return null}function H(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function G(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function W(e){e._valueTracker||(e._valueTracker=function(e){var t=G(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),a=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var o=n.get,i=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return o.call(this)},set:function(e){a=""+e,i.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return a},setValue:function(e){a=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function Z(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),a="";return e&&(a=G(e)?e.checked?"true":"false":e.value),(e=a)!==n&&(t.setValue(e),!0)}function V(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function Q(e,t){var n=t.checked;return M({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Y(e,t){var n=null==t.defaultValue?"":t.defaultValue,a=null!=t.checked?t.checked:t.defaultChecked;n=H(null!=t.value?t.value:n),e._wrapperState={initialChecked:a,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function K(e,t){null!=(t=t.checked)&&w(e,"checked",t,!1)}function X(e,t){K(e,t);var n=H(t.value),a=t.type;if(null!=n)"number"===a?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===a||"reset"===a)return void e.removeAttribute("value");t.hasOwnProperty("value")?ee(e,t.type,n):t.hasOwnProperty("defaultValue")&&ee(e,t.type,H(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function J(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var a=t.type;if(!("submit"!==a&&"reset"!==a||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ee(e,t,n){"number"===t&&V(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var te=Array.isArray;function ne(e,t,n,a){if(e=e.options,t){t={};for(var o=0;o"+t.valueOf().toString()+"",t=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,a){MSApp.execUnsafeLocalFunction((function(){return ue(e,t)}))}:ue);function pe(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var ge={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},fe=["Webkit","ms","Moz","O"];function me(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||ge.hasOwnProperty(e)&&ge[e]?(""+t).trim():t+"px"}function be(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var a=0===n.indexOf("--"),o=me(n,t[n],a);"float"===n&&(n="cssFloat"),a?e.setProperty(n,o):e[n]=o}}Object.keys(ge).forEach((function(e){fe.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),ge[t]=ge[e]}))}));var he=M({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function ye(e,t){if(t){if(he[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(i(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(i(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(i(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(i(62))}}function we(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var ve=null;function ke(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var _e=null,xe=null,Le=null;function Ce(e){if(e=vo(e)){if("function"!=typeof _e)throw Error(i(280));var t=e.stateNode;t&&(t=_o(t),_e(e.stateNode,e.type,t))}}function Se(e){xe?Le?Le.push(e):Le=[e]:xe=e}function Ae(){if(xe){var e=xe,t=Le;if(Le=xe=null,Ce(e),t)for(e=0;e>>=0,0===e?32:31-(lt(e)/st|0)|0},lt=Math.log,st=Math.LN2;var ct=64,ut=4194304;function dt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function pt(e,t){var n=e.pendingLanes;if(0===n)return 0;var a=0,o=e.suspendedLanes,i=e.pingedLanes,r=268435455&n;if(0!==r){var l=r&~o;0!==l?a=dt(l):0!==(i&=r)&&(a=dt(i))}else 0!==(r=n&~o)?a=dt(r):0!==i&&(a=dt(i));if(0===a)return 0;if(0!==t&&t!==a&&0==(t&o)&&((o=a&-a)>=(i=t&-t)||16===o&&0!=(4194240&i)))return t;if(0!=(4&a)&&(a|=16&n),0!==(t=e.entangledLanes))for(e=e.entanglements,t&=a;0n;n++)t.push(e);return t}function ht(e,t,n){e.pendingLanes|=t,536870912!==t&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[t=31-rt(t)]=n}function yt(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var a=31-rt(n),o=1<=Nn),On=String.fromCharCode(32),Bn=!1;function zn(e,t){switch(e){case"keyup":return-1!==jn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function qn(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Un=!1;var $n={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Hn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!$n[e.type]:"textarea"===t}function Gn(e,t,n,a){Se(a),0<(t=Wa(t,"onChange")).length&&(n=new un("onChange","change",null,n,a),e.push({event:n,listeners:t}))}var Wn=null,Zn=null;function Vn(e){Oa(e,0)}function Qn(e){if(Z(ko(e)))return e}function Yn(e,t){if("change"===e)return t}var Kn=!1;if(u){var Xn;if(u){var Jn="oninput"in document;if(!Jn){var ea=document.createElement("div");ea.setAttribute("oninput","return;"),Jn="function"==typeof ea.oninput}Xn=Jn}else Xn=!1;Kn=Xn&&(!document.documentMode||9=t)return{node:a,offset:t-e};e=n}e:{for(;a;){if(a.nextSibling){a=a.nextSibling;break e}a=a.parentNode}a=void 0}a=ca(a)}}function da(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?da(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pa(){for(var e=window,t=V();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(a){n=!1}if(!n)break;t=V((e=t.contentWindow).document)}return t}function ga(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function fa(e){var t=pa(),n=e.focusedElem,a=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&da(n.ownerDocument.documentElement,n)){if(null!==a&&ga(n))if(t=a.start,void 0===(e=a.end)&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if((e=(t=n.ownerDocument||document)&&t.defaultView||window).getSelection){e=e.getSelection();var o=n.textContent.length,i=Math.min(a.start,o);a=void 0===a.end?i:Math.min(a.end,o),!e.extend&&i>a&&(o=a,a=i,i=o),o=ua(n,i);var r=ua(n,a);o&&r&&(1!==e.rangeCount||e.anchorNode!==o.node||e.anchorOffset!==o.offset||e.focusNode!==r.node||e.focusOffset!==r.offset)&&((t=t.createRange()).setStart(o.node,o.offset),e.removeAllRanges(),i>a?(e.addRange(t),e.extend(r.node,r.offset)):(t.setEnd(r.node,r.offset),e.addRange(t)))}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof n.focus&&n.focus(),n=0;n=document.documentMode,ba=null,ha=null,ya=null,wa=!1;function va(e,t,n){var a=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;wa||null==ba||ba!==V(a)||("selectionStart"in(a=ba)&&ga(a)?a={start:a.selectionStart,end:a.selectionEnd}:a={anchorNode:(a=(a.ownerDocument&&a.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset},ya&&sa(ya,a)||(ya=a,0<(a=Wa(ha,"onSelect")).length&&(t=new un("onSelect","select",null,t,n),e.push({event:t,listeners:a}),t.target=ba)))}function ka(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var _a={animationend:ka("Animation","AnimationEnd"),animationiteration:ka("Animation","AnimationIteration"),animationstart:ka("Animation","AnimationStart"),transitionend:ka("Transition","TransitionEnd")},xa={},La={};function Ca(e){if(xa[e])return xa[e];if(!_a[e])return e;var t,n=_a[e];for(t in n)if(n.hasOwnProperty(t)&&t in La)return xa[e]=n[t];return e}u&&(La=document.createElement("div").style,"AnimationEvent"in window||(delete _a.animationend.animation,delete _a.animationiteration.animation,delete _a.animationstart.animation),"TransitionEvent"in window||delete _a.transitionend.transition);var Sa=Ca("animationend"),Aa=Ca("animationiteration"),Pa=Ca("animationstart"),Da=Ca("transitionend"),Ta=new Map,Ia="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Ea(e,t){Ta.set(e,t),s(t,[e])}for(var ja=0;jaLo||(e.current=xo[Lo],xo[Lo]=null,Lo--)}function Ao(e,t){Lo++,xo[Lo]=e.current,e.current=t}var Po={},Do=Co(Po),To=Co(!1),Io=Po;function Eo(e,t){var n=e.type.contextTypes;if(!n)return Po;var a=e.stateNode;if(a&&a.__reactInternalMemoizedUnmaskedChildContext===t)return a.__reactInternalMemoizedMaskedChildContext;var o,i={};for(o in n)i[o]=t[o];return a&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=i),i}function jo(e){return null!=(e=e.childContextTypes)}function Ro(){So(To),So(Do)}function No(e,t,n){if(Do.current!==Po)throw Error(i(168));Ao(Do,t),Ao(To,n)}function Fo(e,t,n){var a=e.stateNode;if(t=t.childContextTypes,"function"!=typeof a.getChildContext)return n;for(var o in a=a.getChildContext())if(!(o in t))throw Error(i(108,$(e)||"Unknown",o));return M({},n,a)}function Mo(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Po,Io=Do.current,Ao(Do,e),Ao(To,To.current),!0}function Oo(e,t,n){var a=e.stateNode;if(!a)throw Error(i(169));n?(e=Fo(e,t,Io),a.__reactInternalMemoizedMergedChildContext=e,So(To),So(Do),Ao(Do,e)):So(To),Ao(To,n)}var Bo=null,zo=!1,qo=!1;function Uo(e){null===Bo?Bo=[e]:Bo.push(e)}function $o(){if(!qo&&null!==Bo){qo=!0;var e=0,t=wt;try{var n=Bo;for(wt=1;e>=r,o-=r,Ko=1<<32-rt(t)+o|n<m?(b=d,d=null):b=d.sibling;var h=g(o,d,l[m],s);if(null===h){null===d&&(d=b);break}e&&d&&null===h.alternate&&t(o,d),i=r(h,i,m),null===u?c=h:u.sibling=h,u=h,d=b}if(m===l.length)return n(o,d),ii&&Jo(o,m),c;if(null===d){for(;mb?(h=m,m=null):h=m.sibling;var w=g(o,m,y.value,c);if(null===w){null===m&&(m=h);break}e&&m&&null===w.alternate&&t(o,m),l=r(w,l,b),null===d?u=w:d.sibling=w,d=w,m=h}if(y.done)return n(o,m),ii&&Jo(o,b),u;if(null===m){for(;!y.done;b++,y=s.next())null!==(y=p(o,y.value,c))&&(l=r(y,l,b),null===d?u=y:d.sibling=y,d=y);return ii&&Jo(o,b),u}for(m=a(o,m);!y.done;b++,y=s.next())null!==(y=f(m,o,b,y.value,c))&&(e&&null!==y.alternate&&m.delete(null===y.key?b:y.key),l=r(y,l,b),null===d?u=y:d.sibling=y,d=y);return e&&m.forEach((function(e){return t(o,e)})),ii&&Jo(o,b),u}return function e(a,i,r,s){if("object"==typeof r&&null!==r&&r.type===x&&null===r.key&&(r=r.props.children),"object"==typeof r&&null!==r){switch(r.$$typeof){case k:e:{for(var c=r.key,u=i;null!==u;){if(u.key===c){if((c=r.type)===x){if(7===u.tag){n(a,u.sibling),(i=o(u,r.props.children)).return=a,a=i;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===E&&Qi(c)===u.type){n(a,u.sibling),(i=o(u,r.props)).ref=Zi(a,u,r),i.return=a,a=i;break e}n(a,u);break}t(a,u),u=u.sibling}r.type===x?((i=Fc(r.props.children,a.mode,s,r.key)).return=a,a=i):((s=Nc(r.type,r.key,r.props,null,a.mode,s)).ref=Zi(a,i,r),s.return=a,a=s)}return l(a);case _:e:{for(u=r.key;null!==i;){if(i.key===u){if(4===i.tag&&i.stateNode.containerInfo===r.containerInfo&&i.stateNode.implementation===r.implementation){n(a,i.sibling),(i=o(i,r.children||[])).return=a,a=i;break e}n(a,i);break}t(a,i),i=i.sibling}(i=Bc(r,a.mode,s)).return=a,a=i}return l(a);case E:return e(a,i,(u=r._init)(r._payload),s)}if(te(r))return m(a,i,r,s);if(N(r))return b(a,i,r,s);Vi(a,r)}return"string"==typeof r&&""!==r||"number"==typeof r?(r=""+r,null!==i&&6===i.tag?(n(a,i.sibling),(i=o(i,r)).return=a,a=i):(n(a,i),(i=Oc(r,a.mode,s)).return=a,a=i),l(a)):n(a,i)}}var Ki=Yi(!0),Xi=Yi(!1),Ji={},er=Co(Ji),tr=Co(Ji),nr=Co(Ji);function ar(e){if(e===Ji)throw Error(i(174));return e}function or(e,t){switch(Ao(nr,t),Ao(tr,e),Ao(er,Ji),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:se(null,"");break;default:t=se(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}So(er),Ao(er,t)}function ir(){So(er),So(tr),So(nr)}function rr(e){ar(nr.current);var t=ar(er.current),n=se(t,e.type);t!==n&&(Ao(tr,e),Ao(er,n))}function lr(e){tr.current===e&&(So(er),So(tr))}var sr=Co(0);function cr(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(128&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var ur=[];function dr(){for(var e=0;en?n:4,e(!0);var a=gr.transition;gr.transition={};try{e(!1),t()}finally{wt=n,gr.transition=a}}function el(){return Ar().memoizedState}function tl(e,t,n){var a=nc(e);if(n={lane:a,action:n,hasEagerState:!1,eagerState:null,next:null},al(e))ol(t,n);else if(null!==(n=Di(e,t,n,a))){ac(n,e,a,tc()),il(n,t,a)}}function nl(e,t,n){var a=nc(e),o={lane:a,action:n,hasEagerState:!1,eagerState:null,next:null};if(al(e))ol(t,o);else{var i=e.alternate;if(0===e.lanes&&(null===i||0===i.lanes)&&null!==(i=t.lastRenderedReducer))try{var r=t.lastRenderedState,l=i(r,n);if(o.hasEagerState=!0,o.eagerState=l,la(l,r)){var s=t.interleaved;return null===s?(o.next=o,Pi(t)):(o.next=s.next,s.next=o),void(t.interleaved=o)}}catch(c){}null!==(n=Di(e,t,o,a))&&(ac(n,e,a,o=tc()),il(n,t,a))}}function al(e){var t=e.alternate;return e===mr||null!==t&&t===mr}function ol(e,t){wr=yr=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function il(e,t,n){if(0!=(4194240&n)){var a=t.lanes;n|=a&=e.pendingLanes,t.lanes=n,yt(e,n)}}var rl={readContext:Si,useCallback:_r,useContext:_r,useEffect:_r,useImperativeHandle:_r,useInsertionEffect:_r,useLayoutEffect:_r,useMemo:_r,useReducer:_r,useRef:_r,useState:_r,useDebugValue:_r,useDeferredValue:_r,useTransition:_r,useMutableSource:_r,useSyncExternalStore:_r,useId:_r,unstable_isNewReconciler:!1},ll={readContext:Si,useCallback:function(e,t){return Sr().memoizedState=[e,void 0===t?null:t],e},useContext:Si,useEffect:$r,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,qr(4194308,4,Zr.bind(null,t,e),n)},useLayoutEffect:function(e,t){return qr(4194308,4,e,t)},useInsertionEffect:function(e,t){return qr(4,2,e,t)},useMemo:function(e,t){var n=Sr();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var a=Sr();return t=void 0!==n?n(t):t,a.memoizedState=a.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},a.queue=e,e=e.dispatch=tl.bind(null,mr,e),[a.memoizedState,e]},useRef:function(e){return e={current:e},Sr().memoizedState=e},useState:Or,useDebugValue:Qr,useDeferredValue:function(e){return Sr().memoizedState=e},useTransition:function(){var e=Or(!1),t=e[0];return e=Jr.bind(null,e[1]),Sr().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var a=mr,o=Sr();if(ii){if(void 0===n)throw Error(i(407));n=n()}else{if(n=t(),null===Ts)throw Error(i(349));0!=(30&fr)||jr(a,t,n)}o.memoizedState=n;var r={value:n,getSnapshot:t};return o.queue=r,$r(Nr.bind(null,a,r,e),[e]),a.flags|=2048,Br(9,Rr.bind(null,a,r,n,t),void 0,null),n},useId:function(){var e=Sr(),t=Ts.identifierPrefix;if(ii){var n=Xo;t=":"+t+"R"+(n=(Ko&~(1<<32-rt(Ko)-1)).toString(32)+n),0<(n=vr++)&&(t+="H"+n.toString(32)),t+=":"}else t=":"+t+"r"+(n=kr++).toString(32)+":";return e.memoizedState=t},unstable_isNewReconciler:!1},sl={readContext:Si,useCallback:Yr,useContext:Si,useEffect:Hr,useImperativeHandle:Vr,useInsertionEffect:Gr,useLayoutEffect:Wr,useMemo:Kr,useReducer:Dr,useRef:zr,useState:function(){return Dr(Pr)},useDebugValue:Qr,useDeferredValue:function(e){return Xr(Ar(),br.memoizedState,e)},useTransition:function(){return[Dr(Pr)[0],Ar().memoizedState]},useMutableSource:Ir,useSyncExternalStore:Er,useId:el,unstable_isNewReconciler:!1},cl={readContext:Si,useCallback:Yr,useContext:Si,useEffect:Hr,useImperativeHandle:Vr,useInsertionEffect:Gr,useLayoutEffect:Wr,useMemo:Kr,useReducer:Tr,useRef:zr,useState:function(){return Tr(Pr)},useDebugValue:Qr,useDeferredValue:function(e){var t=Ar();return null===br?t.memoizedState=e:Xr(t,br.memoizedState,e)},useTransition:function(){return[Tr(Pr)[0],Ar().memoizedState]},useMutableSource:Ir,useSyncExternalStore:Er,useId:el,unstable_isNewReconciler:!1};function ul(e,t){try{var n="",a=t;do{n+=q(a),a=a.return}while(a);var o=n}catch(i){o="\nError generating stack: "+i.message+"\n"+i.stack}return{value:e,source:t,stack:o,digest:null}}function dl(e,t,n){return{value:e,source:null,stack:null!=n?n:null,digest:null!=t?t:null}}function pl(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}var gl="function"==typeof WeakMap?WeakMap:Map;function fl(e,t,n){(n=Ri(-1,n)).tag=3,n.payload={element:null};var a=t.value;return n.callback=function(){Gs||(Gs=!0,Ws=a),pl(0,t)},n}function ml(e,t,n){(n=Ri(-1,n)).tag=3;var a=e.type.getDerivedStateFromError;if("function"==typeof a){var o=t.value;n.payload=function(){return a(o)},n.callback=function(){pl(0,t)}}var i=e.stateNode;return null!==i&&"function"==typeof i.componentDidCatch&&(n.callback=function(){pl(0,t),"function"!=typeof a&&(null===Zs?Zs=new Set([this]):Zs.add(this));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}function bl(e,t,n){var a=e.pingCache;if(null===a){a=e.pingCache=new gl;var o=new Set;a.set(t,o)}else void 0===(o=a.get(t))&&(o=new Set,a.set(t,o));o.has(n)||(o.add(n),e=Sc.bind(null,e,t,n),t.then(e,e))}function hl(e){do{var t;if((t=13===e.tag)&&(t=null===(t=e.memoizedState)||null!==t.dehydrated),t)return e;e=e.return}while(null!==e);return null}function yl(e,t,n,a,o){return 0==(1&e.mode)?(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,1===n.tag&&(null===n.alternate?n.tag=17:((t=Ri(-1,1)).tag=2,Ni(n,t,1))),n.lanes|=1),e):(e.flags|=65536,e.lanes=o,e)}var wl=v.ReactCurrentOwner,vl=!1;function kl(e,t,n,a){t.child=null===e?Xi(t,null,n,a):Ki(t,e.child,n,a)}function _l(e,t,n,a,o){n=n.render;var i=t.ref;return Ci(t,o),a=Lr(e,t,n,a,i,o),n=Cr(),null===e||vl?(ii&&n&&ti(t),t.flags|=1,kl(e,t,a,o),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,Gl(e,t,o))}function xl(e,t,n,a,o){if(null===e){var i=n.type;return"function"!=typeof i||jc(i)||void 0!==i.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Nc(n.type,null,a,t,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=i,Ll(e,t,i,a,o))}if(i=e.child,0==(e.lanes&o)){var r=i.memoizedProps;if((n=null!==(n=n.compare)?n:sa)(r,a)&&e.ref===t.ref)return Gl(e,t,o)}return t.flags|=1,(e=Rc(i,a)).ref=t.ref,e.return=t,t.child=e}function Ll(e,t,n,a,o){if(null!==e){var i=e.memoizedProps;if(sa(i,a)&&e.ref===t.ref){if(vl=!1,t.pendingProps=a=i,0==(e.lanes&o))return t.lanes=e.lanes,Gl(e,t,o);0!=(131072&e.flags)&&(vl=!0)}}return Al(e,t,n,a,o)}function Cl(e,t,n){var a=t.pendingProps,o=a.children,i=null!==e?e.memoizedState:null;if("hidden"===a.mode)if(0==(1&t.mode))t.memoizedState={baseLanes:0,cachePool:null,transitions:null},Ao(Rs,js),js|=n;else{if(0==(1073741824&n))return e=null!==i?i.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,Ao(Rs,js),js|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},a=null!==i?i.baseLanes:n,Ao(Rs,js),js|=a}else null!==i?(a=i.baseLanes|n,t.memoizedState=null):a=n,Ao(Rs,js),js|=a;return kl(e,t,o,n),t.child}function Sl(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function Al(e,t,n,a,o){var i=jo(n)?Io:Do.current;return i=Eo(t,i),Ci(t,o),n=Lr(e,t,n,a,i,o),a=Cr(),null===e||vl?(ii&&a&&ti(t),t.flags|=1,kl(e,t,n,o),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,Gl(e,t,o))}function Pl(e,t,n,a,o){if(jo(n)){var i=!0;Mo(t)}else i=!1;if(Ci(t,o),null===t.stateNode)Hl(e,t),Hi(t,n,a),Wi(t,n,a,o),a=!0;else if(null===e){var r=t.stateNode,l=t.memoizedProps;r.props=l;var s=r.context,c=n.contextType;"object"==typeof c&&null!==c?c=Si(c):c=Eo(t,c=jo(n)?Io:Do.current);var u=n.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof r.getSnapshotBeforeUpdate;d||"function"!=typeof r.UNSAFE_componentWillReceiveProps&&"function"!=typeof r.componentWillReceiveProps||(l!==a||s!==c)&&Gi(t,r,a,c),Ii=!1;var p=t.memoizedState;r.state=p,Oi(t,a,r,o),s=t.memoizedState,l!==a||p!==s||To.current||Ii?("function"==typeof u&&(qi(t,n,u,a),s=t.memoizedState),(l=Ii||$i(t,n,l,a,p,s,c))?(d||"function"!=typeof r.UNSAFE_componentWillMount&&"function"!=typeof r.componentWillMount||("function"==typeof r.componentWillMount&&r.componentWillMount(),"function"==typeof r.UNSAFE_componentWillMount&&r.UNSAFE_componentWillMount()),"function"==typeof r.componentDidMount&&(t.flags|=4194308)):("function"==typeof r.componentDidMount&&(t.flags|=4194308),t.memoizedProps=a,t.memoizedState=s),r.props=a,r.state=s,r.context=c,a=l):("function"==typeof r.componentDidMount&&(t.flags|=4194308),a=!1)}else{r=t.stateNode,ji(e,t),l=t.memoizedProps,c=t.type===t.elementType?l:hi(t.type,l),r.props=c,d=t.pendingProps,p=r.context,"object"==typeof(s=n.contextType)&&null!==s?s=Si(s):s=Eo(t,s=jo(n)?Io:Do.current);var g=n.getDerivedStateFromProps;(u="function"==typeof g||"function"==typeof r.getSnapshotBeforeUpdate)||"function"!=typeof r.UNSAFE_componentWillReceiveProps&&"function"!=typeof r.componentWillReceiveProps||(l!==d||p!==s)&&Gi(t,r,a,s),Ii=!1,p=t.memoizedState,r.state=p,Oi(t,a,r,o);var f=t.memoizedState;l!==d||p!==f||To.current||Ii?("function"==typeof g&&(qi(t,n,g,a),f=t.memoizedState),(c=Ii||$i(t,n,c,a,p,f,s)||!1)?(u||"function"!=typeof r.UNSAFE_componentWillUpdate&&"function"!=typeof r.componentWillUpdate||("function"==typeof r.componentWillUpdate&&r.componentWillUpdate(a,f,s),"function"==typeof r.UNSAFE_componentWillUpdate&&r.UNSAFE_componentWillUpdate(a,f,s)),"function"==typeof r.componentDidUpdate&&(t.flags|=4),"function"==typeof r.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!=typeof r.componentDidUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof r.getSnapshotBeforeUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),t.memoizedProps=a,t.memoizedState=f),r.props=a,r.state=f,r.context=s,a=c):("function"!=typeof r.componentDidUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof r.getSnapshotBeforeUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),a=!1)}return Dl(e,t,n,a,i,o)}function Dl(e,t,n,a,o,i){Sl(e,t);var r=0!=(128&t.flags);if(!a&&!r)return o&&Oo(t,n,!1),Gl(e,t,i);a=t.stateNode,wl.current=t;var l=r&&"function"!=typeof n.getDerivedStateFromError?null:a.render();return t.flags|=1,null!==e&&r?(t.child=Ki(t,e.child,null,i),t.child=Ki(t,null,l,i)):kl(e,t,l,i),t.memoizedState=a.state,o&&Oo(t,n,!0),t.child}function Tl(e){var t=e.stateNode;t.pendingContext?No(0,t.pendingContext,t.pendingContext!==t.context):t.context&&No(0,t.context,!1),or(e,t.containerInfo)}function Il(e,t,n,a,o){return fi(),mi(o),t.flags|=256,kl(e,t,n,a),t.child}var El,jl,Rl,Nl,Fl={dehydrated:null,treeContext:null,retryLane:0};function Ml(e){return{baseLanes:e,cachePool:null,transitions:null}}function Ol(e,t,n){var a,o=t.pendingProps,r=sr.current,l=!1,s=0!=(128&t.flags);if((a=s)||(a=(null===e||null!==e.memoizedState)&&0!=(2&r)),a?(l=!0,t.flags&=-129):null!==e&&null===e.memoizedState||(r|=1),Ao(sr,1&r),null===e)return ui(t),null!==(e=t.memoizedState)&&null!==(e=e.dehydrated)?(0==(1&t.mode)?t.lanes=1:"$!"===e.data?t.lanes=8:t.lanes=1073741824,null):(s=o.children,e=o.fallback,l?(o=t.mode,l=t.child,s={mode:"hidden",children:s},0==(1&o)&&null!==l?(l.childLanes=0,l.pendingProps=s):l=Mc(s,o,0,null),e=Fc(e,o,n,null),l.return=t,e.return=t,l.sibling=e,t.child=l,t.child.memoizedState=Ml(n),t.memoizedState=Fl,e):Bl(t,s));if(null!==(r=e.memoizedState)&&null!==(a=r.dehydrated))return function(e,t,n,a,o,r,l){if(n)return 256&t.flags?(t.flags&=-257,zl(e,t,l,a=dl(Error(i(422))))):null!==t.memoizedState?(t.child=e.child,t.flags|=128,null):(r=a.fallback,o=t.mode,a=Mc({mode:"visible",children:a.children},o,0,null),(r=Fc(r,o,l,null)).flags|=2,a.return=t,r.return=t,a.sibling=r,t.child=a,0!=(1&t.mode)&&Ki(t,e.child,null,l),t.child.memoizedState=Ml(l),t.memoizedState=Fl,r);if(0==(1&t.mode))return zl(e,t,l,null);if("$!"===o.data){if(a=o.nextSibling&&o.nextSibling.dataset)var s=a.dgst;return a=s,zl(e,t,l,a=dl(r=Error(i(419)),a,void 0))}if(s=0!=(l&e.childLanes),vl||s){if(null!==(a=Ts)){switch(l&-l){case 4:o=2;break;case 16:o=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:o=32;break;case 536870912:o=268435456;break;default:o=0}0!==(o=0!=(o&(a.suspendedLanes|l))?0:o)&&o!==r.retryLane&&(r.retryLane=o,Ti(e,o),ac(a,e,o,-1))}return bc(),zl(e,t,l,a=dl(Error(i(421))))}return"$?"===o.data?(t.flags|=128,t.child=e.child,t=Pc.bind(null,e),o._reactRetry=t,null):(e=r.treeContext,oi=co(o.nextSibling),ai=t,ii=!0,ri=null,null!==e&&(Vo[Qo++]=Ko,Vo[Qo++]=Xo,Vo[Qo++]=Yo,Ko=e.id,Xo=e.overflow,Yo=t),t=Bl(t,a.children),t.flags|=4096,t)}(e,t,s,o,a,r,n);if(l){l=o.fallback,s=t.mode,a=(r=e.child).sibling;var c={mode:"hidden",children:o.children};return 0==(1&s)&&t.child!==r?((o=t.child).childLanes=0,o.pendingProps=c,t.deletions=null):(o=Rc(r,c)).subtreeFlags=14680064&r.subtreeFlags,null!==a?l=Rc(a,l):(l=Fc(l,s,n,null)).flags|=2,l.return=t,o.return=t,o.sibling=l,t.child=o,o=l,l=t.child,s=null===(s=e.child.memoizedState)?Ml(n):{baseLanes:s.baseLanes|n,cachePool:null,transitions:s.transitions},l.memoizedState=s,l.childLanes=e.childLanes&~n,t.memoizedState=Fl,o}return e=(l=e.child).sibling,o=Rc(l,{mode:"visible",children:o.children}),0==(1&t.mode)&&(o.lanes=n),o.return=t,o.sibling=null,null!==e&&(null===(n=t.deletions)?(t.deletions=[e],t.flags|=16):n.push(e)),t.child=o,t.memoizedState=null,o}function Bl(e,t){return(t=Mc({mode:"visible",children:t},e.mode,0,null)).return=e,e.child=t}function zl(e,t,n,a){return null!==a&&mi(a),Ki(t,e.child,null,n),(e=Bl(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function ql(e,t,n){e.lanes|=t;var a=e.alternate;null!==a&&(a.lanes|=t),Li(e.return,t,n)}function Ul(e,t,n,a,o){var i=e.memoizedState;null===i?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:a,tail:n,tailMode:o}:(i.isBackwards=t,i.rendering=null,i.renderingStartTime=0,i.last=a,i.tail=n,i.tailMode=o)}function $l(e,t,n){var a=t.pendingProps,o=a.revealOrder,i=a.tail;if(kl(e,t,a.children,n),0!=(2&(a=sr.current)))a=1&a|2,t.flags|=128;else{if(null!==e&&0!=(128&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&ql(e,n,t);else if(19===e.tag)ql(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}a&=1}if(Ao(sr,a),0==(1&t.mode))t.memoizedState=null;else switch(o){case"forwards":for(n=t.child,o=null;null!==n;)null!==(e=n.alternate)&&null===cr(e)&&(o=n),n=n.sibling;null===(n=o)?(o=t.child,t.child=null):(o=n.sibling,n.sibling=null),Ul(t,!1,o,n,i);break;case"backwards":for(n=null,o=t.child,t.child=null;null!==o;){if(null!==(e=o.alternate)&&null===cr(e)){t.child=o;break}e=o.sibling,o.sibling=n,n=o,o=e}Ul(t,!0,n,null,i);break;case"together":Ul(t,!1,null,null,void 0);break;default:t.memoizedState=null}return t.child}function Hl(e,t){0==(1&t.mode)&&null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2)}function Gl(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Ms|=t.lanes,0==(n&t.childLanes))return null;if(null!==e&&t.child!==e.child)throw Error(i(153));if(null!==t.child){for(n=Rc(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Rc(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Wl(e,t){if(!ii)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var a=null;null!==n;)null!==n.alternate&&(a=n),n=n.sibling;null===a?t||null===e.tail?e.tail=null:e.tail.sibling=null:a.sibling=null}}function Zl(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,a=0;if(t)for(var o=e.child;null!==o;)n|=o.lanes|o.childLanes,a|=14680064&o.subtreeFlags,a|=14680064&o.flags,o.return=e,o=o.sibling;else for(o=e.child;null!==o;)n|=o.lanes|o.childLanes,a|=o.subtreeFlags,a|=o.flags,o.return=e,o=o.sibling;return e.subtreeFlags|=a,e.childLanes=n,t}function Vl(e,t,n){var a=t.pendingProps;switch(ni(t),t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Zl(t),null;case 1:case 17:return jo(t.type)&&Ro(),Zl(t),null;case 3:return a=t.stateNode,ir(),So(To),So(Do),dr(),a.pendingContext&&(a.context=a.pendingContext,a.pendingContext=null),null!==e&&null!==e.child||(pi(t)?t.flags|=4:null===e||e.memoizedState.isDehydrated&&0==(256&t.flags)||(t.flags|=1024,null!==ri&&(lc(ri),ri=null))),jl(e,t),Zl(t),null;case 5:lr(t);var o=ar(nr.current);if(n=t.type,null!==e&&null!=t.stateNode)Rl(e,t,n,a,o),e.ref!==t.ref&&(t.flags|=512,t.flags|=2097152);else{if(!a){if(null===t.stateNode)throw Error(i(166));return Zl(t),null}if(e=ar(er.current),pi(t)){a=t.stateNode,n=t.type;var r=t.memoizedProps;switch(a[go]=t,a[fo]=r,e=0!=(1&t.mode),n){case"dialog":Ba("cancel",a),Ba("close",a);break;case"iframe":case"object":case"embed":Ba("load",a);break;case"video":case"audio":for(o=0;o<\/script>",e=e.removeChild(e.firstChild)):"string"==typeof a.is?e=s.createElement(n,{is:a.is}):(e=s.createElement(n),"select"===n&&(s=e,a.multiple?s.multiple=!0:a.size&&(s.size=a.size))):e=s.createElementNS(e,n),e[go]=t,e[fo]=a,El(e,t,!1,!1),t.stateNode=e;e:{switch(s=we(n,a),n){case"dialog":Ba("cancel",e),Ba("close",e),o=a;break;case"iframe":case"object":case"embed":Ba("load",e),o=a;break;case"video":case"audio":for(o=0;o$s&&(t.flags|=128,a=!0,Wl(r,!1),t.lanes=4194304)}else{if(!a)if(null!==(e=cr(s))){if(t.flags|=128,a=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),Wl(r,!0),null===r.tail&&"hidden"===r.tailMode&&!s.alternate&&!ii)return Zl(t),null}else 2*Ke()-r.renderingStartTime>$s&&1073741824!==n&&(t.flags|=128,a=!0,Wl(r,!1),t.lanes=4194304);r.isBackwards?(s.sibling=t.child,t.child=s):(null!==(n=r.last)?n.sibling=s:t.child=s,r.last=s)}return null!==r.tail?(t=r.tail,r.rendering=t,r.tail=t.sibling,r.renderingStartTime=Ke(),t.sibling=null,n=sr.current,Ao(sr,a?1&n|2:1&n),t):(Zl(t),null);case 22:case 23:return pc(),a=null!==t.memoizedState,null!==e&&null!==e.memoizedState!==a&&(t.flags|=8192),a&&0!=(1&t.mode)?0!=(1073741824&js)&&(Zl(t),6&t.subtreeFlags&&(t.flags|=8192)):Zl(t),null;case 24:case 25:return null}throw Error(i(156,t.tag))}function Ql(e,t){switch(ni(t),t.tag){case 1:return jo(t.type)&&Ro(),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return ir(),So(To),So(Do),dr(),0!=(65536&(e=t.flags))&&0==(128&e)?(t.flags=-65537&e|128,t):null;case 5:return lr(t),null;case 13:if(So(sr),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(i(340));fi()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return So(sr),null;case 4:return ir(),null;case 10:return xi(t.type._context),null;case 22:case 23:return pc(),null;default:return null}}El=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},jl=function(){},Rl=function(e,t,n,a){var o=e.memoizedProps;if(o!==a){e=t.stateNode,ar(er.current);var i,r=null;switch(n){case"input":o=Q(e,o),a=Q(e,a),r=[];break;case"select":o=M({},o,{value:void 0}),a=M({},a,{value:void 0}),r=[];break;case"textarea":o=ae(e,o),a=ae(e,a),r=[];break;default:"function"!=typeof o.onClick&&"function"==typeof a.onClick&&(e.onclick=Ja)}for(u in ye(n,a),n=null,o)if(!a.hasOwnProperty(u)&&o.hasOwnProperty(u)&&null!=o[u])if("style"===u){var s=o[u];for(i in s)s.hasOwnProperty(i)&&(n||(n={}),n[i]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(l.hasOwnProperty(u)?r||(r=[]):(r=r||[]).push(u,null));for(u in a){var c=a[u];if(s=null!=o?o[u]:void 0,a.hasOwnProperty(u)&&c!==s&&(null!=c||null!=s))if("style"===u)if(s){for(i in s)!s.hasOwnProperty(i)||c&&c.hasOwnProperty(i)||(n||(n={}),n[i]="");for(i in c)c.hasOwnProperty(i)&&s[i]!==c[i]&&(n||(n={}),n[i]=c[i])}else n||(r||(r=[]),r.push(u,n)),n=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,s=s?s.__html:void 0,null!=c&&s!==c&&(r=r||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(r=r||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(l.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&Ba("scroll",e),r||s===c||(r=[])):(r=r||[]).push(u,c))}n&&(r=r||[]).push("style",n);var u=r;(t.updateQueue=u)&&(t.flags|=4)}},Nl=function(e,t,n,a){n!==a&&(t.flags|=4)};var Yl=!1,Kl=!1,Xl="function"==typeof WeakSet?WeakSet:Set,Jl=null;function es(e,t){var n=e.ref;if(null!==n)if("function"==typeof n)try{n(null)}catch(a){Cc(e,t,a)}else n.current=null}function ts(e,t,n){try{n()}catch(a){Cc(e,t,a)}}var ns=!1;function as(e,t,n){var a=t.updateQueue;if(null!==(a=null!==a?a.lastEffect:null)){var o=a=a.next;do{if((o.tag&e)===e){var i=o.destroy;o.destroy=void 0,void 0!==i&&ts(t,n,i)}o=o.next}while(o!==a)}}function os(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var a=n.create;n.destroy=a()}n=n.next}while(n!==t)}}function is(e){var t=e.ref;if(null!==t){var n=e.stateNode;e.tag,e=n,"function"==typeof t?t(e):t.current=e}}function rs(e){var t=e.alternate;null!==t&&(e.alternate=null,rs(t)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(t=e.stateNode)&&(delete t[go],delete t[fo],delete t[bo],delete t[ho],delete t[yo])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function ls(e){return 5===e.tag||3===e.tag||4===e.tag}function ss(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||ls(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(2&e.flags)continue e;if(null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}function cs(e,t,n){var a=e.tag;if(5===a||6===a)e=e.stateNode,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Ja));else if(4!==a&&null!==(e=e.child))for(cs(e,t,n),e=e.sibling;null!==e;)cs(e,t,n),e=e.sibling}function us(e,t,n){var a=e.tag;if(5===a||6===a)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==a&&null!==(e=e.child))for(us(e,t,n),e=e.sibling;null!==e;)us(e,t,n),e=e.sibling}var ds=null,ps=!1;function gs(e,t,n){for(n=n.child;null!==n;)fs(e,t,n),n=n.sibling}function fs(e,t,n){if(it&&"function"==typeof it.onCommitFiberUnmount)try{it.onCommitFiberUnmount(ot,n)}catch(l){}switch(n.tag){case 5:Kl||es(n,t);case 6:var a=ds,o=ps;ds=null,gs(e,t,n),ps=o,null!==(ds=a)&&(ps?(e=ds,n=n.stateNode,8===e.nodeType?e.parentNode.removeChild(n):e.removeChild(n)):ds.removeChild(n.stateNode));break;case 18:null!==ds&&(ps?(e=ds,n=n.stateNode,8===e.nodeType?so(e.parentNode,n):1===e.nodeType&&so(e,n),Ut(e)):so(ds,n.stateNode));break;case 4:a=ds,o=ps,ds=n.stateNode.containerInfo,ps=!0,gs(e,t,n),ds=a,ps=o;break;case 0:case 11:case 14:case 15:if(!Kl&&(null!==(a=n.updateQueue)&&null!==(a=a.lastEffect))){o=a=a.next;do{var i=o,r=i.destroy;i=i.tag,void 0!==r&&(0!=(2&i)||0!=(4&i))&&ts(n,t,r),o=o.next}while(o!==a)}gs(e,t,n);break;case 1:if(!Kl&&(es(n,t),"function"==typeof(a=n.stateNode).componentWillUnmount))try{a.props=n.memoizedProps,a.state=n.memoizedState,a.componentWillUnmount()}catch(l){Cc(n,t,l)}gs(e,t,n);break;case 21:gs(e,t,n);break;case 22:1&n.mode?(Kl=(a=Kl)||null!==n.memoizedState,gs(e,t,n),Kl=a):gs(e,t,n);break;default:gs(e,t,n)}}function ms(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new Xl),t.forEach((function(t){var a=Dc.bind(null,e,t);n.has(t)||(n.add(t),t.then(a,a))}))}}function bs(e,t){var n=t.deletions;if(null!==n)for(var a=0;ao&&(o=l),a&=~r}if(a=o,10<(a=(120>(a=Ke()-a)?120:480>a?480:1080>a?1080:1920>a?1920:3e3>a?3e3:4320>a?4320:1960*Cs(a/1960))-a)){e.timeoutHandle=ao(_c.bind(null,e,qs,Hs),a);break}_c(e,qs,Hs);break;default:throw Error(i(329))}}}return oc(e,Ke()),e.callbackNode===n?ic.bind(null,e):null}function rc(e,t){var n=zs;return e.current.memoizedState.isDehydrated&&(gc(e,t).flags|=256),2!==(e=hc(e,t))&&(t=qs,qs=n,null!==t&&lc(t)),e}function lc(e){null===qs?qs=e:qs.push.apply(qs,e)}function sc(e,t){for(t&=~Bs,t&=~Os,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0e?16:e,null===Qs)var a=!1;else{if(e=Qs,Qs=null,Ys=0,0!=(6&Ds))throw Error(i(331));var o=Ds;for(Ds|=4,Jl=e.current;null!==Jl;){var r=Jl,l=r.child;if(0!=(16&Jl.flags)){var s=r.deletions;if(null!==s){for(var c=0;cKe()-Us?gc(e,0):Bs|=n),oc(e,t)}function Ac(e,t){0===t&&(0==(1&e.mode)?t=1:(t=ut,0==(130023424&(ut<<=1))&&(ut=4194304)));var n=tc();null!==(e=Ti(e,t))&&(ht(e,t,n),oc(e,n))}function Pc(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),Ac(e,n)}function Dc(e,t){var n=0;switch(e.tag){case 13:var a=e.stateNode,o=e.memoizedState;null!==o&&(n=o.retryLane);break;case 19:a=e.stateNode;break;default:throw Error(i(314))}null!==a&&a.delete(t),Ac(e,n)}function Tc(e,t){return Ze(e,t)}function Ic(e,t,n,a){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=a,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Ec(e,t,n,a){return new Ic(e,t,n,a)}function jc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Rc(e,t){var n=e.alternate;return null===n?((n=Ec(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=14680064&e.flags,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Nc(e,t,n,a,o,r){var l=2;if(a=e,"function"==typeof e)jc(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case x:return Fc(n.children,o,r,t);case L:l=8,o|=8;break;case C:return(e=Ec(12,n,t,2|o)).elementType=C,e.lanes=r,e;case D:return(e=Ec(13,n,t,o)).elementType=D,e.lanes=r,e;case T:return(e=Ec(19,n,t,o)).elementType=T,e.lanes=r,e;case j:return Mc(n,o,r,t);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case S:l=10;break e;case A:l=9;break e;case P:l=11;break e;case I:l=14;break e;case E:l=16,a=null;break e}throw Error(i(130,null==e?e:typeof e,""))}return(t=Ec(l,n,t,o)).elementType=e,t.type=a,t.lanes=r,t}function Fc(e,t,n,a){return(e=Ec(7,e,a,t)).lanes=n,e}function Mc(e,t,n,a){return(e=Ec(22,e,a,t)).elementType=j,e.lanes=n,e.stateNode={isHidden:!1},e}function Oc(e,t,n){return(e=Ec(6,e,null,t)).lanes=n,e}function Bc(e,t,n){return(t=Ec(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zc(e,t,n,a,o){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=bt(0),this.expirationTimes=bt(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=bt(0),this.identifierPrefix=a,this.onRecoverableError=o,this.mutableSourceEagerHydrationData=null}function qc(e,t,n,a,o,i,r,l,s){return e=new zc(e,t,n,l,s),1===t?(t=1,!0===i&&(t|=8)):t=0,i=Ec(3,null,null,t),e.current=i,i.stateNode=e,i.memoizedState={element:a,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ei(i),e}function Uc(e){if(!e)return Po;e:{if(Ue(e=e._reactInternals)!==e||1!==e.tag)throw Error(i(170));var t=e;do{switch(t.tag){case 3:t=t.stateNode.context;break e;case 1:if(jo(t.type)){t=t.stateNode.__reactInternalMemoizedMergedChildContext;break e}}t=t.return}while(null!==t);throw Error(i(171))}if(1===e.tag){var n=e.type;if(jo(n))return Fo(e,n,t)}return t}function $c(e,t,n,a,o,i,r,l,s){return(e=qc(n,a,!0,e,0,i,0,l,s)).context=Uc(null),n=e.current,(i=Ri(a=tc(),o=nc(n))).callback=null!=t?t:null,Ni(n,i,o),e.current.lanes=o,ht(e,o,a),oc(e,a),e}function Hc(e,t,n,a){var o=t.current,i=tc(),r=nc(o);return n=Uc(n),null===t.context?t.context=n:t.pendingContext=n,(t=Ri(i,r)).payload={element:e},null!==(a=void 0===a?null:a)&&(t.callback=a),null!==(e=Ni(o,t,r))&&(ac(e,o,r,i),Fi(e,o,r)),r}function Gc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Wc(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n{"use strict";var a=n(422);t.createRoot=a.createRoot,t.hydrateRoot=a.hydrateRoot},422:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(3746)},5154:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,a="function"==typeof Set,o="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function i(e,r){if(e===r)return!0;if(e&&r&&"object"==typeof e&&"object"==typeof r){if(e.constructor!==r.constructor)return!1;var l,s,c,u;if(Array.isArray(e)){if((l=e.length)!=r.length)return!1;for(s=l;0!=s--;)if(!i(e[s],r[s]))return!1;return!0}if(n&&e instanceof Map&&r instanceof Map){if(e.size!==r.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!r.has(s.value[0]))return!1;for(u=e.entries();!(s=u.next()).done;)if(!i(s.value[1],r.get(s.value[0])))return!1;return!0}if(a&&e instanceof Set&&r instanceof Set){if(e.size!==r.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!r.has(s.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(r)){if((l=e.length)!=r.length)return!1;for(s=l;0!=s--;)if(e[s]!==r[s])return!1;return!0}if(e.constructor===RegExp)return e.source===r.source&&e.flags===r.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof r.valueOf)return e.valueOf()===r.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof r.toString)return e.toString()===r.toString();if((l=(c=Object.keys(e)).length)!==Object.keys(r).length)return!1;for(s=l;0!=s--;)if(!Object.prototype.hasOwnProperty.call(r,c[s]))return!1;if(t&&e instanceof Element)return!1;for(s=l;0!=s--;)if(("_owner"!==c[s]&&"__v"!==c[s]&&"__o"!==c[s]||!e.$$typeof)&&!i(e[c[s]],r[c[s]]))return!1;return!0}return e!=e&&r!=r}e.exports=function(e,t){try{return i(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},387:(e,t,n)=>{"use strict";n.d(t,{B6:()=>G,ql:()=>J});var a=n(959),o=n(507),i=n.n(o),r=n(5154),l=n.n(r),s=n(3670),c=n.n(s),u=n(631),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}var b={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},h={rel:["amphtml","canonical","alternate"]},y={type:["application/ld+json"]},w={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},v=Object.keys(b).map((function(e){return b[e]})),k={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},_=Object.keys(k).reduce((function(e,t){return e[k[t]]=t,e}),{}),x=function(e,t){for(var n=e.length-1;n>=0;n-=1){var a=e[n];if(Object.prototype.hasOwnProperty.call(a,t))return a[t]}return null},L=function(e){var t=x(e,b.TITLE),n=x(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var a=x(e,"defaultTitle");return t||a||void 0},C=function(e){return x(e,"onChangeClientState")||function(){}},S=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},A=function(e,t){return t.filter((function(e){return void 0!==e[b.BASE]})).map((function(e){return e[b.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var a=Object.keys(n),o=0;o/g,">").replace(/"/g,""").replace(/'/g,"'")},N=function(e){return Object.keys(e).reduce((function(t,n){var a=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+a:a}),"")},F=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[k[n]||n]=e[n],t}),t)},M=function(e,t){return t.map((function(t,n){var o,i=((o={key:n})["data-rh"]=!0,o);return Object.keys(t).forEach((function(e){var n=k[e]||e;"innerHTML"===n||"cssText"===n?i.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:i[n]=t[e]})),a.createElement(e,i)}))},O=function(e,t,n){switch(e){case b.TITLE:return{toComponent:function(){return n=t.titleAttributes,(o={key:e=t.title})["data-rh"]=!0,i=F(n,o),[a.createElement(b.TITLE,i,e)];var e,n,o,i},toString:function(){return function(e,t,n,a){var o=N(n),i=T(t);return o?"<"+e+' data-rh="true" '+o+">"+R(i,a)+"":"<"+e+' data-rh="true">'+R(i,a)+""}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return F(t)},toString:function(){return N(t)}};default:return{toComponent:function(){return M(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,a){var o=Object.keys(a).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var o=void 0===a[t]?t:t+'="'+R(a[t],n)+'"';return e?e+" "+o:o}),""),i=a.innerHTML||a.cssText||"",r=-1===j.indexOf(e);return t+"<"+e+' data-rh="true" '+o+(r?"/>":">"+i+"")}),"")}(e,t,n)}}}},B=function(e){var t=e.baseTag,n=e.bodyAttributes,a=e.encode,o=e.htmlAttributes,i=e.noscriptTags,r=e.styleTags,l=e.title,s=void 0===l?"":l,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,g={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var f=function(e){var t=e.linkTags,n=e.scriptTags,a=e.encode,o=I(e.metaTags,w),i=I(t,h),r=I(n,y);return{priorityMethods:{toComponent:function(){return[].concat(M(b.META,o.priority),M(b.LINK,i.priority),M(b.SCRIPT,r.priority))},toString:function(){return O(b.META,o.priority,a)+" "+O(b.LINK,i.priority,a)+" "+O(b.SCRIPT,r.priority,a)}},metaTags:o.default,linkTags:i.default,scriptTags:r.default}}(e);g=f.priorityMethods,u=f.linkTags,d=f.metaTags,p=f.scriptTags}return{priority:g,base:O(b.BASE,t,a),bodyAttributes:O("bodyAttributes",n,a),htmlAttributes:O("htmlAttributes",o,a),link:O(b.LINK,u,a),meta:O(b.META,d,a),noscript:O(b.NOSCRIPT,i,a),script:O(b.SCRIPT,p,a),style:O(b.STYLE,r,a),title:O(b.TITLE,{title:s,titleAttributes:c},a)}},z=[],q=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?z:n.instances},add:function(e){(n.canUseDOM?z:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?z:n.instances).indexOf(e);(n.canUseDOM?z:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=B({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},U=a.createContext({}),$=i().shape({setHelmet:i().func,helmetInstances:i().shape({get:i().func,add:i().func,remove:i().func})}),H="undefined"!=typeof document,G=function(e){function t(n){var a;return(a=e.call(this,n)||this).helmetData=new q(a.props.context,t.canUseDOM),a}return g(t,e),t.prototype.render=function(){return a.createElement(U.Provider,{value:this.helmetData.value},this.props.children)},t}(a.Component);G.canUseDOM=H,G.propTypes={context:i().shape({helmet:i().shape()}),children:i().node.isRequired},G.defaultProps={context:{}},G.displayName="HelmetProvider";var W=function(e,t){var n,a=document.head||document.querySelector(b.HEAD),o=a.querySelectorAll(e+"[data-rh]"),i=[].slice.call(o),r=[];return t&&t.length&&t.forEach((function(t){var a=document.createElement(e);for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&("innerHTML"===o?a.innerHTML=t.innerHTML:"cssText"===o?a.styleSheet?a.styleSheet.cssText=t.cssText:a.appendChild(document.createTextNode(t.cssText)):a.setAttribute(o,void 0===t[o]?"":t[o]));a.setAttribute("data-rh","true"),i.some((function(e,t){return n=t,a.isEqualNode(e)}))?i.splice(n,1):r.push(a)})),i.forEach((function(e){return e.parentNode.removeChild(e)})),r.forEach((function(e){return a.appendChild(e)})),{oldTags:i,newTags:r}},Z=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var a=n.getAttribute("data-rh"),o=a?a.split(","):[],i=[].concat(o),r=Object.keys(t),l=0;l=0;d-=1)n.removeAttribute(i[d]);o.length===i.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==r.join(",")&&n.setAttribute("data-rh",r.join(","))}},V=function(e,t){var n=e.baseTag,a=e.htmlAttributes,o=e.linkTags,i=e.metaTags,r=e.noscriptTags,l=e.onChangeClientState,s=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;Z(b.BODY,e.bodyAttributes),Z(b.HTML,a),function(e,t){void 0!==e&&document.title!==e&&(document.title=T(e)),Z(b.TITLE,t)}(u,d);var p={baseTag:W(b.BASE,n),linkTags:W(b.LINK,o),metaTags:W(b.META,i),noscriptTags:W(b.NOSCRIPT,r),scriptTags:W(b.SCRIPT,s),styleTags:W(b.STYLE,c)},g={},f={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,a=t.oldTags;n.length&&(g[e]=n),a.length&&(f[e]=p[e].oldTags)})),t&&t(),l(e,g,f)},Q=null,Y=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o elements are self-closing and can not contain children. Refer to our API for more information.")}},n.flattenArrayTypeChildren=function(e){var t,n=e.child,a=e.arrayTypeChildren;return p({},a,((t={})[n.type]=[].concat(a[n.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(n,e.nestedChildren))]),t))},n.mapObjectTypeChildren=function(e){var t,n,a=e.child,o=e.newProps,i=e.newChildProps,r=e.nestedChildren;switch(a.type){case b.TITLE:return p({},o,((t={})[a.type]=r,t.titleAttributes=p({},i),t));case b.BODY:return p({},o,{bodyAttributes:p({},i)});case b.HTML:return p({},o,{htmlAttributes:p({},i)});default:return p({},o,((n={})[a.type]=p({},i),n))}},n.mapArrayTypeChildrenToProps=function(e,t){var n=p({},t);return Object.keys(e).forEach((function(t){var a;n=p({},n,((a={})[t]=e[t],a))})),n},n.warnOnInvalidChildren=function(e,t){return c()(v.some((function(t){return e.type===t})),"function"==typeof e.type?"You may be attempting to nest components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+v.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``} ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,o={};return a.Children.forEach(e,(function(e){if(e&&e.props){var a=e.props,i=a.children,r=m(a,K),l=Object.keys(r).reduce((function(e,t){return e[_[t]||t]=r[t],e}),{}),s=e.type;switch("symbol"==typeof s?s=s.toString():n.warnOnInvalidChildren(e,i),s){case b.FRAGMENT:t=n.mapChildrenToProps(i,t);break;case b.LINK:case b.META:case b.NOSCRIPT:case b.SCRIPT:case b.STYLE:o=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:o,newChildProps:l,nestedChildren:i});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:l,nestedChildren:i})}}})),this.mapArrayTypeChildrenToProps(o,t)},n.render=function(){var e=this.props,t=e.children,n=m(e,X),o=p({},n),i=n.helmetData;return t&&(o=this.mapChildrenToProps(t,o)),!i||i instanceof q||(i=new q(i.context,i.instances)),i?a.createElement(Y,p({},o,{context:i.value,helmetData:void 0})):a.createElement(U.Consumer,null,(function(e){return a.createElement(Y,p({},o,{context:e}))}))},t}(a.Component);J.propTypes={base:i().object,bodyAttributes:i().object,children:i().oneOfType([i().arrayOf(i().node),i().node]),defaultTitle:i().string,defer:i().bool,encodeSpecialCharacters:i().bool,htmlAttributes:i().object,link:i().arrayOf(i().object),meta:i().arrayOf(i().object),noscript:i().arrayOf(i().object),onChangeClientState:i().func,script:i().arrayOf(i().object),style:i().arrayOf(i().object),title:i().string,titleAttributes:i().object,titleTemplate:i().string,prioritizeSeoTags:i().bool,helmetData:i().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},198:(e,t)=>{"use strict";var n="function"==typeof Symbol&&Symbol.for,a=n?Symbol.for("react.element"):60103,o=n?Symbol.for("react.portal"):60106,i=n?Symbol.for("react.fragment"):60107,r=n?Symbol.for("react.strict_mode"):60108,l=n?Symbol.for("react.profiler"):60114,s=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,g=n?Symbol.for("react.suspense"):60113,f=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,b=n?Symbol.for("react.lazy"):60116,h=n?Symbol.for("react.block"):60121,y=n?Symbol.for("react.fundamental"):60117,w=n?Symbol.for("react.responder"):60118,v=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case a:switch(e=e.type){case u:case d:case i:case l:case r:case g:return e;default:switch(e=e&&e.$$typeof){case c:case p:case b:case m:case s:return e;default:return t}}case o:return t}}}function _(e){return k(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=s,t.Element=a,t.ForwardRef=p,t.Fragment=i,t.Lazy=b,t.Memo=m,t.Portal=o,t.Profiler=l,t.StrictMode=r,t.Suspense=g,t.isAsyncMode=function(e){return _(e)||k(e)===u},t.isConcurrentMode=_,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===a},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===i},t.isLazy=function(e){return k(e)===b},t.isMemo=function(e){return k(e)===m},t.isPortal=function(e){return k(e)===o},t.isProfiler=function(e){return k(e)===l},t.isStrictMode=function(e){return k(e)===r},t.isSuspense=function(e){return k(e)===g},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===d||e===l||e===r||e===g||e===f||"object"==typeof e&&null!==e&&(e.$$typeof===b||e.$$typeof===m||e.$$typeof===s||e.$$typeof===c||e.$$typeof===p||e.$$typeof===y||e.$$typeof===w||e.$$typeof===v||e.$$typeof===h)},t.typeOf=k},6237:(e,t,n)=>{"use strict";e.exports=n(198)},9500:(e,t,n)=>{"use strict";n.d(t,{OL:()=>w,VK:()=>u,rU:()=>b});var a=n(8903),o=n(2666),i=n(959),r=n(4047),l=n(6920),s=n(3804),c=n(8624),u=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o{"use strict";n.d(t,{AW:()=>L,F0:()=>w,LX:()=>x,TH:()=>j,k6:()=>E,rs:()=>T,s6:()=>y});var a=n(2666),o=n(959),i=n(507),r=n.n(i),l=n(4047),s=n(8624),c=n(6920),u=n(7720),d=n.n(u),p=(n(6237),n(3804)),g=(n(2535),1073741823),f="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:{};var m=o.createContext||function(e,t){var n,i,l="__create-react-context-"+function(){var e="__global_unique_id__";return f[e]=(f[e]||0)+1}()+"__",s=function(e){function n(){for(var t,n,a,o=arguments.length,i=new Array(o),r=0;r{"use strict";var a=n(959),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),r=Object.prototype.hasOwnProperty,l=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var a,i={},c=null,u=null;for(a in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)r.call(t,a)&&!s.hasOwnProperty(a)&&(i[a]=t[a]);if(e&&e.defaultProps)for(a in t=e.defaultProps)void 0===i[a]&&(i[a]=t[a]);return{$$typeof:o,type:e,key:c,ref:u,props:i,_owner:l.current}}t.Fragment=i,t.jsx=c,t.jsxs=c},5257:(e,t)=>{"use strict";var n=Symbol.for("react.element"),a=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),g=Symbol.iterator;var f={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,b={};function h(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||f}function y(){}function w(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||f}h.prototype.isReactComponent={},h.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},h.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},y.prototype=h.prototype;var v=w.prototype=new y;v.constructor=w,m(v,h.prototype),v.isPureReactComponent=!0;var k=Array.isArray,_=Object.prototype.hasOwnProperty,x={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};function C(e,t,a){var o,i={},r=null,l=null;if(null!=t)for(o in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(r=""+t.key),t)_.call(t,o)&&!L.hasOwnProperty(o)&&(i[o]=t[o]);var s=arguments.length-2;if(1===s)i.children=a;else if(1{"use strict";e.exports=n(5257)},1527:(e,t,n)=>{"use strict";e.exports=n(3354)},5568:(e,t)=>{"use strict";function n(e,t){var n=e.length;e.push(t);e:for(;0>>1,o=e[a];if(!(0>>1;ai(s,n))ci(u,s)?(e[a]=u,e[c]=n,a=c):(e[a]=s,e[l]=n,a=l);else{if(!(ci(u,n)))break e;e[a]=u,e[c]=n,a=c}}}return t}function i(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if("object"==typeof performance&&"function"==typeof performance.now){var r=performance;t.unstable_now=function(){return r.now()}}else{var l=Date,s=l.now();t.unstable_now=function(){return l.now()-s}}var c=[],u=[],d=1,p=null,g=3,f=!1,m=!1,b=!1,h="function"==typeof setTimeout?setTimeout:null,y="function"==typeof clearTimeout?clearTimeout:null,w="undefined"!=typeof setImmediate?setImmediate:null;function v(e){for(var t=a(u);null!==t;){if(null===t.callback)o(u);else{if(!(t.startTime<=e))break;o(u),t.sortIndex=t.expirationTime,n(c,t)}t=a(u)}}function k(e){if(b=!1,v(e),!m)if(null!==a(c))m=!0,j(_);else{var t=a(u);null!==t&&R(k,t.startTime-e)}}function _(e,n){m=!1,b&&(b=!1,y(S),S=-1),f=!0;var i=g;try{for(v(n),p=a(c);null!==p&&(!(p.expirationTime>n)||e&&!D());){var r=p.callback;if("function"==typeof r){p.callback=null,g=p.priorityLevel;var l=r(p.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?p.callback=l:p===a(c)&&o(c),v(n)}else o(c);p=a(c)}if(null!==p)var s=!0;else{var d=a(u);null!==d&&R(k,d.startTime-n),s=!1}return s}finally{p=null,g=i,f=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var x,L=!1,C=null,S=-1,A=5,P=-1;function D(){return!(t.unstable_now()-Pe||125r?(e.sortIndex=i,n(u,e),null===a(c)&&e===a(u)&&(b?(y(S),S=-1):b=!0,R(k,i-r))):(e.sortIndex=l,n(c,e),m||f||(m=!0,j(_))),e},t.unstable_shouldYield=D,t.unstable_wrapCallback=function(e){var t=g;return function(){var n=g;g=t;try{return e.apply(this,arguments)}finally{g=n}}}},2962:(e,t,n)=>{"use strict";e.exports=n(5568)},631:e=>{e.exports=function(e,t,n,a){var o=n?n.call(a,e,t):void 0;if(void 0!==o)return!!o;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(var l=Object.prototype.hasOwnProperty.bind(t),s=0;s{"use strict";n.r(t),n.d(t,{default:()=>a});const a={title:"ILLA Cloud",tagline:"Dinosaurs are cool",favicon:"img/public/favicon.ico",url:"https://illacloud.github.io",baseUrl:"/illa-website/",organizationName:"illacloud",projectName:"illa-website",staticDirectories:["public","static"],onBrokenLinks:"warn",onBrokenMarkdownLinks:"warn",i18n:{defaultLocale:"en",locales:["en","zh","ja","de"],path:"i18n",localeConfigs:{}},presets:[["classic",{docs:!1,blog:!1,pages:!1,theme:{customCss:["./src/ILLATheme/css/custom.css","./src/css/custom.css"]},gtag:{trackingID:"G-QW745VE33W"}}]],themeConfig:{image:"img/social-card-large.png",colorMode:{defaultMode:"dark",disableSwitch:!1,respectPrefersColorScheme:!1},metadata:[{name:"og:type",content:"website"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:site",content:"@illaCloudHQ"},{name:"twitter:creator",content:"@illaCloudHQ"},{name:"keywords",content:"illa,illacloud,illa cloud,\u827e\u62c9\u4e91\u79d1,Retool,Budibase,Tooljet,UIBakery, Low-code,open-source, developers, developer tool, internal, rust,illa, illabuilder, illa-builder, retool alternative, Appsmith, Appsmith alternative, open-source alternative, budibase alternative,\u30ed\u30fc\u30b3\u30fc\u30c9,\u4f4e\u4ee3\u7801,\u5f00\u53d1\u8005\u5de5\u5177,\ub0ae\uc740 \ucf54\ub4dc,\uc624\ud508 \uc18c\uc2a4,\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9"}],prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},navbar:{hideOnScroll:!1,items:[]},tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},plugins:[null,null,["./plugins/blog-plugin.js",{blogTitle:"Blog",blogDescription:"A resource for ILLA, front-end ecosystem, and web development",routeBasePath:"/blog",postsPerPage:12,blogSidebarTitle:"All posts",blogSidebarCount:0,feedOptions:{type:"all",copyright:"Copyright \xa9 2024 ILLA."}}],"./plugins/solution-plugin.js","./plugins/linkedin.js","./plugins/twitter.js","./plugins/reddit-plugin.js","./plugins/clearbit-plugin.js"],baseUrlIssueBanner:!0,onDuplicateRoutes:"warn",customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},6920:(e,t,n)=>{"use strict";function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;ta})},2666:(e,t,n)=>{"use strict";function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)}n.d(t,{Z:()=>o})},3804:(e,t,n)=>{"use strict";function a(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a=0||(o[n]=e[n]);return o}n.d(t,{Z:()=>a})},5341:(e,t,n)=>{"use strict";function a(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;to});const o=function(){for(var e,t,n=0,o="";n{"use strict";n.d(t,{p1:()=>A,y$:()=>ee});var a,o,i,r,l,s,c,u=n(959),d=n(5341),p=Object.create,g=Object.defineProperty,f=Object.defineProperties,m=Object.getOwnPropertyDescriptor,b=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,w=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,_=(e,t,n)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,x=(e,t)=>{for(var n in t||(t={}))v.call(t,n)&&_(e,n,t[n]);if(y)for(var n of y(t))k.call(t,n)&&_(e,n,t[n]);return e},L=(e,t)=>f(e,b(t)),C=(e,t)=>{var n={};for(var a in e)v.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&y)for(var a of y(e))t.indexOf(a)<0&&k.call(e,a)&&(n[a]=e[a]);return n},S=(a={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},a={util:{encode:function e(t){return t instanceof o?new o(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);x+=_.value.length,_=_.next){var L=_.value;if(t.length>e.length)return;if(!(L instanceof o)){var C,S=1;if(y){if(!(C=i(k,x,e,h))||C.index>=e.length)break;var A=C.index,P=C.index+C[0].length,D=x;for(D+=_.value.length;A>=D;)D+=(_=_.next).value.length;if(x=D-=_.value.length,_.value instanceof o)continue;for(var T=_;T!==t.tail&&(Dd.reach&&(d.reach=R);var N=_.prev;if(E&&(N=s(t,N,E),x+=E.length),c(t,N,S),_=s(t,N,new o(p,b?a.tokenize(I,b):I,w,I)),j&&s(t,_,j),S>1){var F={cause:p+","+f,reach:R};r(e,t,n,_.prev,x,F),d&&F.reach>d.reach&&(d.reach=F.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var a=t.next,o={value:n,prev:t,next:a};return t.next=o,a.prev=o,e.length++,o}function c(e,t,n){for(var a=t.next,o=0;o"+i.content+""},a}();t.exports=n,n.default=n}},function(){return o||(0,a[h(a)[0]])((o={exports:{}}).exports,o),o.exports}),A=((e,t,n)=>(n=null!=e?p(w(e)):{},((e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of h(t))v.call(e,o)||o===n||g(e,o,{get:()=>t[o],enumerable:!(a=m(t,o))||a.enumerable});return e})(!t&&e&&e.__esModule?n:g(n,"default",{value:e,enumerable:!0}),e)))(S());A.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},A.languages.markup.tag.inside["attr-value"].inside.entity=A.languages.markup.entity,A.languages.markup.doctype.inside["internal-subset"].inside=A.languages.markup,A.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(A.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:A.languages[t]},n.cdata=/^$/i,{"included-cdata":{pattern://i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:A.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},A.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(A.languages.markup.tag,"addAttribute",{value:function(e,t){A.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:A.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),A.languages.html=A.languages.markup,A.languages.mathml=A.languages.markup,A.languages.svg=A.languages.markup,A.languages.xml=A.languages.extend("markup",{}),A.languages.ssml=A.languages.xml,A.languages.atom=A.languages.xml,A.languages.rss=A.languages.xml,i=A,r={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},s="(?:[^\\\\-]|"+(l=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",s=RegExp(s+"-"+s),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},i.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:s,inside:{escape:l,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":r,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:l}},"special-escape":r,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:l,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},A.languages.javascript=A.languages.extend("clike",{"class-name":[A.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),A.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,A.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:A.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:A.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:A.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:A.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:A.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),A.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:A.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),A.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),A.languages.markup&&(A.languages.markup.tag.addInlined("script","javascript"),A.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),A.languages.js=A.languages.javascript,A.languages.actionscript=A.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),A.languages.actionscript["class-name"].alias="function",delete A.languages.actionscript.parameter,delete A.languages.actionscript["literal-property"],A.languages.markup&&A.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:A.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(A),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var a=function(e){e.inside||(e.inside={}),e.inside.rest=n},o="doc-comment";if(i=e.languages[t]){var i,r=i[o];if((r=r||(i=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(r=i[o]={pattern:r}),Array.isArray(r))for(var l=0,s=r.length;l|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(A),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,a="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",o=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),i=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function r(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return a})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return a}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return a})).replace(/<>/g,(function(){return"(?:"+o+"|"+i+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:r(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:r(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:r(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:r(i),lookbehind:!0,greedy:!0},number:{pattern:r(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(A),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var a=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return a})),i=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,r=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+i+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+i+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(a),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+i+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(a),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,a=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(A),A.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:A.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},A.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,a=t.inside.interpolation,o=a.inside["interpolation-punctuation"],i=a.pattern.source;function r(t,a){if(e.languages[t])return{pattern:RegExp("((?:"+a+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(t,n,a){return t={code:t,grammar:n,language:a},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function s(t,n,r){var s=e.tokenize(t,{interpolation:{pattern:RegExp(i),lookbehind:!0}}),c=0,u={},d=(s=l(s.map((function(e){if("string"==typeof e)return e;var n,a;for(e=e.content;-1!==t.indexOf((a=c++,n="___"+r.toUpperCase()+"_"+a+"___")););return u[n]=e,n})).join(""),n,r),Object.keys(u));return c=0,function t(n){for(var i=0;i=d.length)return;var r,s,p,g,f,m,b,h=n[i];"string"==typeof h||"string"==typeof h.content?(r=d[c],-1!==(b=(m="string"==typeof h?h:h.content).indexOf(r))&&(++c,s=m.substring(0,b),f=u[r],p=void 0,(g={})["interpolation-punctuation"]=o,3===(g=e.tokenize(f,g)).length&&((p=[1,1]).push.apply(p,l(g[1],e.languages.javascript,"javascript")),g.splice.apply(g,p)),p=new e.Token("interpolation",g,a.alias,f),g=m.substring(b+r.length),f=[],s&&f.push(s),f.push(p),g&&(t(m=[g]),f.push.apply(f,m)),"string"==typeof h?(n.splice.apply(n,[i,1].concat(f)),i+=f.length-1):h.content=f)):(b=h.content,Array.isArray(b)?t(b):t([b]))}}(s),new e.Token(r,s,"language-"+r,t)}e.languages.javascript["template-string"]=[r("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),r("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),r("svg",/\bsvg/.source),r("markdown",/\b(?:markdown|md)/.source),r("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),r("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var a=0,o=n.length;a]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(A),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,a="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(a+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(a+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(A),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(A),A.languages.n4js=A.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),A.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),A.languages.n4jsd=A.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],a=0;a*\.{3}(?:[^{}]|)*\})/.source;function i(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return a})).replace(//g,(function(){return o})),RegExp(e,t)}function r(t){for(var n=[],a=0;a"!==o.content[o.content.length-1].content&&n.push({tagName:l(o.content[0].content[1]),openedBraces:0}):0+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:i(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:i(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var l=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(l).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||r(e.tokens)}))}(A),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(A),A.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},A.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=A.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(A),A.languages.c=A.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),A.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),A.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},A.languages.c.string],char:A.languages.c.char,comment:A.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:A.languages.c}}}}),A.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete A.languages.c.boolean,A.languages.objectivec=A.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete A.languages.objectivec["class-name"],A.languages.objc=A.languages.objectivec,A.languages.reason=A.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),A.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete A.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|)*\*\//.source,n=0;n<2;n++)t=t.replace(//g,(function(){return t}));t=t.replace(//g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(A),A.languages.go=A.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),A.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete A.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(A),A.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern://,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},A.languages.python["string-interpolation"].inside.interpolation.inside.rest=A.languages.python,A.languages.py=A.languages.python;((e,t)=>{for(var n in t)g(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>P,duotoneDark:()=>D,duotoneLight:()=>T,github:()=>I,jettwaveDark:()=>H,jettwaveLight:()=>G,nightOwl:()=>E,nightOwlLight:()=>j,oceanicNext:()=>F,okaidia:()=>M,oneDark:()=>W,oneLight:()=>Z,palenight:()=>O,shadesOfPurple:()=>B,synthwave84:()=>z,ultramin:()=>q,vsDark:()=>U,vsLight:()=>$});var P={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},D={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},T={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},I={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},E={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},j={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},R="#c5a5c5",N="#8dc891",F={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:R}},{types:["attr-value"],style:{color:N}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:N}},{types:["punctuation"],style:{color:N}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:R}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},M={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},O={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},B={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},z={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},q={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},U={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},$={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},H={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},G={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},W={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},Z={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},V=(e,t)=>{const{plain:n}=e,a=e.styles.reduce(((e,n)=>{const{languages:a,style:o}=n;return a&&!a.includes(t)||n.types.forEach((t=>{const n=x(x({},e[t]),o);e[t]=n})),e}),{});return a.root=n,a.plain=L(x({},n),{backgroundColor:void 0}),a},Q=/\r\n|\r|\n/,Y=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},K=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},X=e=>{const t=[[]],n=[e],a=[0],o=[e.length];let i=0,r=0,l=[];const s=[l];for(;r>-1;){for(;(i=a[r]++)0?c:["plain"],e=u):(c=K(c,u.type),u.alias&&(c=K(c,u.alias)),e=u.content),"string"!=typeof e){r++,t.push(c),n.push(e),a.push(0),o.push(e.length);continue}const d=e.split(Q),p=d.length;l.push({types:c,content:d[0]});for(let t=1;t{const i=t.toLowerCase(),r=((e,t)=>{const[n,a]=(0,u.useState)(V(t,e)),o=(0,u.useRef)(),i=(0,u.useRef)();return(0,u.useEffect)((()=>{t===o.current&&e===i.current||(o.current=t,i.current=e,a(V(t,e)))}),[e,t]),n})(i,a),l=(e=>(0,u.useCallback)((t=>{var n=t,{className:a,style:o,line:i}=n,r=C(n,["className","style","line"]);const l=L(x({},r),{className:(0,d.Z)("token-line",a)});return"object"==typeof e&&"plain"in e&&(l.style=e.plain),"object"==typeof o&&(l.style=x(x({},l.style||{}),o)),l}),[e]))(r),s=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:a,className:o,style:i}=n,r=C(n,["token","className","style"]);const l=L(x({},r),{className:(0,d.Z)("token",...a.types,o),children:a.content,style:t(a)});return null!=i&&(l.style=x(x({},l.style||{}),i)),l}),[t])})(r),c=(({prism:e,code:t,grammar:n,language:a})=>{const o=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==n)return X([t]);const e={code:t,grammar:n,language:a,tokens:[]};return o.current.hooks.run("before-tokenize",e),e.tokens=o.current.tokenize(t,n),o.current.hooks.run("after-tokenize",e),X(e.tokens)}),[t,n,a])})({prism:o,language:i,code:n,grammar:o.languages[i]});return e({tokens:c,className:`prism-code language-${i}`,style:null!=r?r.root:{},getLineProps:l,getTokenProps:s})},ee=e=>(0,u.createElement)(J,L(x({},e),{prism:e.prism||A,theme:e.theme||U,code:e.code,language:e.language}))},8624:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var a=!0,o="Invariant failed";function i(e,t){if(!e){if(a)throw new Error(o);var n="function"==typeof t?t():t,i=n?"".concat(o,": ").concat(n):o;throw new Error(i)}}},7529:e=>{"use strict";e.exports=JSON.parse('{"footer.status":"Status","footer.roadmap":"Roadmap","footer.changelog":"Changelog","footer.media":"Media Kit","ai_header.solutions_title.image_generator":"AI Image Generator","ai_header.solutions_title.ai_voice_generator":"AI Voice Generator","ai_header.solutions_title.dashboard":"Data Analysis Dashboard","ai_header.solutions_title.cms":"Content Management","ai_header.solutions_title.crm":"Sales CRM","ai_header.solutions_title.admin_panel":"Admin Panel","footer.table":"Table","footer.chart":"Chart","footer.upload":"Upload","footer.switch":"Switch","footer.select":"Select","footer.radio_group":"Radio Group","footer.checkbox_group":"Checkbox Group","footer.pdf":"PDF","footer.video":"Video","footer.mysql":"MySQL","footer.postgre":"PostgreSQL","footer.mongodb":"MongoDB","footer.firebase":"Firebase","footer.elasticsearch":"Elastic Search","footer.mssql":"Microsoft SQL Server","footer.supabase":"Supabase","footer.dynamo":"DynamoDB","footer.hf":"Hugging Face Inference API","footer.components":"Components","footer.integrations":"Integrations","ai_header.solutions_title.solutions":"Solutions","footer.company":"Company","footer.community":"Community","slogan-1":"Create business apps like assembling blocks","footer.privacy-policy":"Privacy policy","footer.terms-of-service":"Terms of service","ai_header.solutions_sub_title.solutions_by_use_case":"Solutions by use case","ai_header.solutions_description.image_generator":"Generate images with AI. Make the communication of ideas more efficient.","ai_header.solutions_description.ai_voice_generator":"Translation and redubbing, enabling efficient production of video content for diverse language regions.","ai_header.solutions_description.dashboard":"Build comprehensive data analysis dashboards and drive your business growth with minimal investment.","ai_header.solutions_description.cms":"Deliver consistent content experiences across any platform, web or mobile app","ai_header.solutions_description.crm":"Better sales CRM solution to close deals faster","ai_header.solutions_description.admin_panel":"Build admin panels at 10x speed to manage data or perform operations","nav.resource":"Products","sub_nav.resource.illa_flow":"ILLA Flow","sub_nav.resource.integrations":"Integrations","sub_nav.resource.components":"Components","nav.templates":"Templates","nav.pricing":"Pricing","nav.doc":"Doc","nav.blog":"Blog","nav.contact":"Contact us","nav.login":"Login","nav.signup":"Get started for free","blog.scroll_down":"Create business apps like assembling blocks with ILLA Cloud","blog.blog_desc_left_title":"Struggling with internal tools?","blog.blog_desc_left_desc":"Start building CRUD apps, Dashboards, Admin panels, Sales CRM, AI image generator, etc with ILLA Cloud in minutes!","new_pricing.team_pricing.team":"Team","new_pricing.team_pricing.only_1_member_for_personal_use":"Only 1 member for personal use","new_pricing.team_pricing.unlimited_editors":"Unlimited editors","new_pricing.team_pricing.an_editor_refers":"An editor refers to a user with editing privileges, including administrators, owners, and editors. They have the ability to modify and create apps, AI agents, flows, and other items. They can also use the published apps and AI agents.","new_pricing.team_pricing.build_apps":"Build apps","new_pricing.team_pricing.release_public_apps":"Release public apps","new_pricing.team_pricing.you_can_set_an_app":"You can set an app as public, allowing anyone with the link to access it.","new_pricing.team_pricing.remove_watermark":"Remove watermark","new_pricing.team_pricing.branding":"Branding","new_pricing.team_pricing.custom_domain":"Custom domain","new_pricing.team_pricing.custom_branding":"Custom branding appearence\uff08Coming soon\uff09","new_pricing.team_pricing.custom_sso":"Custom SSO\uff08Coming soon\uff09","new_pricing.team_pricing.security":"Security & support","new_pricing.team_pricing.community_support":"Community support","new_pricing.team_pricing.audit_logs":"Audit logs","new_pricing.team_pricing.keep_edit":"Keep edit history and restore","new_pricing.team_pricing.free_for_unlimited_viewers":"FREE for unlimited viewers","new_pricing.team_pricing.a_viewer_has_read":"A viewer has read-only access and cannot modify the apps, AI agents, flows, or other items you have created. However, they can use the apps and AI agents that you have published.","new_pricing.team_pricing.dedicated_support":"Dedicated support","new_pricing.team_pricing.free":"Free","new_pricing.team_pricing.free_member":"Only one editor","new_pricing.team_pricing.build_apps_for_free":"Build apps for free","new_pricing.team_pricing.premium":"Premium","new_pricing.team_pricing.most_popular":"Most popular","new_pricing.team_pricing.per_editor":"per editor","new_pricing.team_pricing.per_viewer":"per viewer","new_pricing.team_pricing.get_started":"Get started","new_pricing.team_pricing.enterprise":"Enterprise","new_pricing.team_pricing.coming_soon":"Coming soon","new_pricing.compare.free":"Free","new_pricing.compare.oss":"OSS","new_pricing.compare.try_now":"Try now","new_pricing.compare.premium":"Premium","new_pricing.compare.enterprise":"Enterprise","new_pricing.compare.coming_soon":"Coming soon","new_pricing.compare.team":"Team","new_pricing.compare.free_for_unlimited_viewers":"FREE for unlimited viewers","new_pricing.compare.only_1_member_for_personal_use":"Only 1 member for personal use","new_pricing.compare.unlimited_editors":"Unlimited editors","new_pricing.compare.colla":"Colla","new_pricing.compare.free_colla":"Free Colla","new_pricing.compare.opensource_free_colla":"0","new_pricing.compare.cloud_free_colla":"1,000","new_pricing.compare.premium_free_colla":"2,500/seats/month","new_pricing.compare.enterprise_free_colla":"10,000/seats/month","new_pricing.compare.build_apps":"Build apps","new_pricing.compare.all_components":"All components","new_pricing.compare.all_resources":"All resources","new_pricing.compare.unlimited_apps":"Unlimited apps","new_pricing.compare.ai_sql_generation":"AI SQL Generation","new_pricing.compare.integrate_with_ai_agent":"Integrate with AI Agent","new_pricing.compare.integrate_with_illa_flow":"Integrate with ILLA Flow","new_pricing.compare.integrate_with_illa_drive":"Integrate with ILLA Drive","new_pricing.compare.release_public_apps":"Release public apps","new_pricing.compare.remove_watermark":"Remove watermark","new_pricing.compare.illa_flow":"ILLA Flow","new_pricing.compare.unlimited_flows":"Unlimited Flows","new_pricing.compare.ai_agent":"AI Agent","new_pricing.compare.unlimited_ai_agents":"Unlimited AI Agents","new_pricing.compare.illa_drive":"ILLA Drive","new_pricing.compare.store_and_distribute_files":"Store and distribute files","new_pricing.compare.branding":"Branding","new_pricing.compare.custom_domain":"Custom domain","new_pricing.compare.custom_branding_appearence":"Custom branding appearence\uff08Coming soon\uff09","new_pricing.compare.custom_sso":"Custom SSO\uff08Coming soon\uff09","new_pricing.compare.security":"Security & support","new_pricing.compare.audit_logs":"Audit logs","new_pricing.compare.keep_edit_history_and_restore":"Keep edit history and restore","new_pricing.compare.dedicated_support":"Dedicated support","new_pricing.team_pricing.only_pay_for_editors":"Only pay for editors\u270c\ufe0f","new_pricing.team_pricing.monthly":"Monthly","new_pricing.team_pricing.annually":"Annually","new_pricing.team_pricing.save_up_to":"(Save up to 16%)","new_pricing.team_pricing.buy_and_get":"Buy 10 months, get 2 free!","new_pricing.team_pricing.month":"/mo","blog.meta.title":"ILLA Blogs","blog.meta.description":"A stellar repository of knowledge for developers, encompassing a wide spectrum of subjects such as frontend and backend development, AI, low-code, and ILLA Cloud, etc. Here, you can immerse yourself in cutting-edge technologies, delve into emerging trends, and engage in a vibrant exchange of experiences.","illa_flow.meta_title.illa_flow":"ILLA Flow","illa_flow.meta_description.surpassing_developers":"Surpassing developers\' expectations, effortlessly automating workflows","meta.title":"Create business apps like assembling blocks","meta.description":"Empower your team with AI Agent and advanced low-code tools to create business apps","faq.title":"Frequently Asked Questions","faq.content.0.question":"What kind of content can I build with ILLA Cloud?","faq.content.0.answer":"You can build any internal application or AI tool you need, and you can also integrate AI with internal applications. For example, a dashboard, an admin panel, file content management, customer management system, text generation tool, image generation tool, email generation tool, and so on.","faq.content.1.question":"Who can use ILLA Cloud?","faq.content.1.answer":"Whether you are a product manager, full-stack developer, project manager, data analyst...anyone can use ILLA Cloud to build tools: From designing front-end interfaces with drag-and-drop components to integrating with data sources and generating queries using AI assistance, ILLA provides a streamlined experience that removes unnecessary complexities. You don\'t need to be a tech expert to create your own applications.","faq.content.2.question":"How can I benefit from ILLA Cloud?","faq.content.2.answer":"ILLA AI not only reduces the cost of building your tools but also integrates any AI capabilities you desire, making your work more efficient and enabling you to generate more valuable content in less time.","faq.content.3.question":"Can I customize the AI Agent for my specific business needs?","faq.content.3.answer":"Yes, you can! AI Agent is based on a large language model and can be customized to perform specific tasks. You can define the behavior of the AI Agent based on your business requirements. By using ILLA Builder, you can feed data into the AI Agent and train it to accomplish designated tasks such as text processing, image recognition, and natural language processing.","faq.content.4.question":"What data sources does ILLA support?","faq.content.4.answer":"ILLA supports integration with a variety of data sources, including PostgreSQL, MongoDB, REST API, GraphQL, Google Sheets, and more. You can swiftly connect to any data source without writing code, enabling seamless access to your desired data.","faq.content.5.question":"Is there any technical support available for ILLA Cloud users?","faq.content.5.answer":"Yes, ILLA Cloud offers technical support to its users. If you encounter any issues or have questions about the platform\'s features, you can reach out to our support team for assistance. We are dedicated to helping you have a seamless experience with ILLA Cloud.","pricing.title":"Pricing","pricing.meta-desc":"Start free with all the features individual developers or small teams need to build internal applications.","pricing.billing.pricing.premium.feature.builder.viewer":"FREE for unlimited viewers","pricing.billing.pricing.premium.feature.builder.audit_log":"Audit logs","pricing.billing.pricing.premium.feature.builder.public":"App public","pricing.billing.pricing.premium.feature.builder.sql":"AI SQL Generation","pricing.billing.pricing.premium.feature.builder.history":"Backup editing history & restore","pricing.billing.pricing.premium.feature.builder.theme":"Custom themes for your apps ( coming soon )","pricing.billing.pricing.premium.feature.builder.multi_environment":"Multi-environment ( coming soon )","pricing.billing.pricing.premium.feature.builder.deployed_version":"Keep deployed versions & revert ( coming soon )","pricing.billing.pricing.premium.feature.agent.gpt":"Access to more models such as GPT-4, \\nGPT-3.5-turbo-16k","pricing.billing.pricing.colla.feature.storage":"Storage","pricing.billing.pricing.colla.feature.traffic":"Traffic","pricing.billing.pricing.colla.feature.token":"AI Agent","pricing.faq.title":"Frequently Asked Questions","pricing.faq.content.0.question":"Who are the users that are charged for the product?","pricing.faq.content.0.answer":"Users with editing permissions (editor) are charged for the product.","pricing.faq.content.1.question":"What are the different types of editors?","pricing.faq.content.1.answer":"The different types of editors are owner, admin, and editor.","pricing.faq.content.2.question":"Are viewers charged for using the product?","pricing.faq.content.2.answer":"No, viewers are not charged for using the product.","pricing.faq.content.3.question":"How to invite a viewer?","pricing.faq.content.3.answer":"To invite a viewer, you need to upgrade the team to any of the Plus, Premium, or Enterprise plans and invite the user via email or link.","pricing.faq.content.4.question":"What services does ILLA Cloud provide?","pricing.faq.content.4.answer":"ILLA Builder, ILLA Drive and AI Agent.","pricing.faq.content.5.question":"What is ILLA Drive?","pricing.faq.content.5.answer":"ILLA Drive is a CDN (Content Delivery Network) that allows storing any files and distributing them to users through the company\'s websites or other products. Usage of storage and traffic is billed separately.","pricing.faq.content.6.question":"What is AI Agent?","pricing.faq.content.6.answer":"We provide an open-source AI Agent community with thousands of AI Agents provided by prompt experts and enthusiasts. Everyone can run or modify these AI Agents.","pricing.faq.content.7.question":"How is billing done for AI Agent usage?","pricing.faq.content.7.answer":"Billing for AI Agent usage is based on Colla, which is a billing concept within ILLA. Colla measures the resources consumed during the runtime of AI Agents.","landingPage.components.meta.title":"ILLA Cloud Components","landingPage.components.meta.description":"Learn how to use the prebuilt components to customize your app in ILLA Cloud.","landingPage.components.headerContent.title":"Library of built-in components","landingPage.components.headerContent.description":"ILLA provides a range of commonly used front-end development components, enabling users to easily build front-end interfaces and respond to user actions and display data through simple drag-and-drop operations. Users can construct complex components such as tables, charts, forms, lists, and more through ILLA.","landingPage.components.headerContent.btnText":"Try for Free","landingPage.components.classify.inputs.title":"Inputs","landingPage.components.classify.inputs.upload.title":"Upload","landingPage.components.classify.inputs.upload.description":"The \'Upload\' component in ILLA Cloud provides a way for users to upload any type of files to their application.","landingPage.components.classify.inputs.switch.title":"Switch","landingPage.components.classify.inputs.switch.description":"The \'Switch\' component in ILLA Cloud provides a toggle switch that allows users to turn on or turn off a particular setting or feature.","landingPage.components.classify.inputs.select.title":"Select","landingPage.components.classify.inputs.select.description":"The \'Select\' component in ILLA Cloud is a drop-down selector that allows users to choose from a list of options, providing a user-friendly and space-efficient way to input data.","landingPage.components.classify.inputs.radioGroup.title":"Radio group","landingPage.components.classify.inputs.radioGroup.description":"The \'Radio Group\' component in ILLA Cloud is a radio selector that allows users to choose one option from a list of choices, providing a simple and clear way to input and manage data.","landingPage.components.classify.inputs.checkboxGroup.title":"CheckboxGroup","landingPage.components.classify.inputs.checkboxGroup.description":"The \'Checkbox Group\' component in ILLA Cloud is a checkbox selector that allows users to select multiple options from a list, providing a simple and efficient way to manage data.","landingPage.components.classify.data.title":"Data","landingPage.components.classify.inputs.chart.title":"Chart","landingPage.components.classify.inputs.chart.description":"The \'Chart\' component in ILLA Cloud displays multiple types of charts based on linked data, providing users with clear and visually appealing representations of complex data.","landingPage.components.classify.inputs.tables.title":"Tables","landingPage.components.classify.inputs.tables.description":"The \'Table\' component in ILLA Cloud displays data from a database in a tabular format, making it easy for users to view, sort, and analyze large amounts of information at a glance.","landingPage.components.classify.Presentation.title":"Presentation","landingPage.components.classify.inputs.pdf.title":"PDF","landingPage.components.classify.inputs.pdf.description":"The \'PDF\' component in ILLA Cloud is a display element that allows users to view and interact with PDF files within the application.","landingPage.components.classify.inputs.video.title":"Video","landingPage.components.classify.inputs.video.description":"The \'Video\' component in ILLA Cloud is a display element that allows users to play and interact with videos within the application.","landingPage.integrations.meta.title":"ILLA Cloud Integrations","landingPage.integrations.meta.description":"Learn how to use the integrations to access and work with data resource.","landingPage.integrations.headerContent.title":"Connect to any data source","landingPage.integrations.headerContent.description":"With the ability to connect to mainstream databases or any data connected through APIs, ILLA Cloud allows developers to tightly integrate data obtained from the back-end with front-end components. This enables developers to easily write data calls and achieve extensive information interaction by adding resources and actions to response to user events.","landingPage.integrations.headerContent.btnText":"Try for Free","landingPage.integrations.classify.database.title":"Database Integrations","landingPage.integrations.classify.database.mysql.description":"An open-source relational database management system that enables efficient storage and retrieval of data.","landingPage.integrations.classify.database.postgreSQL.description":"An advanced open-source relational database management system known for its stability and reliability.","landingPage.integrations.classify.database.mariadb.description":"A community-driven open-source fork of MySQL with enhanced features and performance improvements.","landingPage.integrations.classify.database.tidb.description":"A distributed SQL database that supports both SQL and NoSQL workloads with horizontal scalability and fault tolerance.","landingPage.integrations.classify.database.redis.description":"An in-memory data structure store often used as a database, cache, and message broker.","landingPage.integrations.classify.database.appwrite.description":"An open-source backend server platform that provides authentication, database, and storage services for web and mobile applications.","landingPage.integrations.classify.database.mongodb.description":"A NoSQL document database that stores data in flexible, JSON-like documents.","landingPage.integrations.classify.database.oracleDB.description":"A high-performance, scalable relational database management system that offers a comprehensive set of features and tools.","landingPage.integrations.classify.database.elasticSearch.description":"A distributed, RESTful search and analytics engine capable of handling large volumes of data.","landingPage.integrations.classify.database.couchDB.description":"A NoSQL document-oriented database that provides a distributed architecture with incremental replication and conflict detection.","landingPage.integrations.classify.database.firebase.description":"A platform that offers backend services, including a real-time database, authentication, cloud messaging, and more, for mobile and web applications.","landingPage.integrations.classify.database.mssql.description":"A relational database management system developed by Microsoft that supports transaction processing, business intelligence, and analytics applications.","landingPage.integrations.classify.database.supabaseDB.description":"An open-source column-oriented database management system designed for online analytical processing (OLAP) workloads.","landingPage.integrations.classify.database.neon.description":"The fully managed multi-cloud Postgres with a generous free tier. We separated storage and compute to offer autoscaling, branching, and bottomless storage.","landingPage.integrations.classify.database.hydra.description":"An open source, column-oriented RDBMS built on Postgres","landingPage.integrations.classify.database.dynamoDB.description":"A fully managed NoSQL database service that offers high performance, scalability, and reliability.","landingPage.integrations.classify.database.snowflake.description":"A cloud-based data warehousing platform designed for large-scale data storage and analysis.","landingPage.integrations.classify.api.title":"API Integrations","landingPage.integrations.classify.api.hfAPI.description":"An API that offers easy-to-use pre-trained natural language processing models for inference tasks.","landingPage.integrations.classify.api.hfEndpoint.description":"An endpoint that allows for easy deployment and scaling of Hugging Face models for inference tasks.","landingPage.integrations.classify.api.restAPI.description":"A web-based architectural style for building web services that use HTTP protocols to exchange data between client and server.","landingPage.integrations.classify.api.s3.description":"A cloud-based object storage service that provides scalable, secure, and durable data storage for various use cases.","landingPage.integrations.classify.api.smtp.description":"A protocol used for sending and receiving email messages over the internet.","landingPage.integrations.classify.api.graphQL.description":"A query language for APIs that provides a more efficient, powerful, and flexible alternative to traditional REST APIs.","landingPage.integrations.classify.api.googleSheets.description":"A cloud-based spreadsheet software that enables users to create and edit spreadsheets online while collaborating with others in real-time.","landingPage.integrations.classify.api.airtable.description":"A flexible and collaborative platform for managing projects, data, and teams seamlessly.","theme.blog.paginator.navAriaLabel":"Blog list page navigation","theme.blog.paginator.newerEntries":"Newer Entries","theme.blog.paginator.olderEntries":"Older Entries","blog.all_posts":"All Posts","blog.all_posts_desc_bold":"ILLA Blogs","blog.all_posts_desc":"\uff5cA stellar repository of knowledge for developers, encompassing a wide spectrum of subjects such as frontend and backend development, AI, low-code, and ILLA Cloud, etc. Here, you can immerse yourself in cutting-edge technologies, delve into emerging trends, and engage in a vibrant exchange of experiences.","theme.blog.post.plurals":"One post|{count} posts","theme.blog.tagTitle":"{nPosts} tagged with \\"{tagName}\\"","theme.blog.posts_tagged_with":"Posts tagged with","theme.NotFound.title":"Page Not Found","website_4.solution.use_this_template":"Try now","blog.feature_posts":"Featured Posts","theme.blog.post.readingTime.plurals":"One min read|{readingTime} min read","call-to-action.title":"Start Building Apps with ILLA Cloud","call-to-action.desc":"Any internal tool you need can be built using ILLA Cloud in 1 minute.","call-to-action.button-1":"Try Cloud for free","call-to-action.button-2":"sign in with GitHub","title.github":"Github","title.stars":"Stars","title.star-us":"Star us","illa_flow.how_it_works.how_it_works":"How it works","illa_flow.how_it_works.automate_anything":"Automate anything","illa_flow.how_it_works.illa_flow_allow_to_integrate":"ILLA Flow allow to integrate with any databases or apis to automate any task you need.","illa_flow.image_alt.send_data":"Effortlessly automate your daily data analysis and reporting with our tool. Simply set up scheduled tasks to retrieve data, generate reports, and seamlessly deliver them to your Slack workspace.","illa_flow.how_it_works_automate.send_data":"Send sales report to {everyDay}","illa_flow.image_alt.send_marketing_email":"Streamline your marketing efforts with our AI-powered tool. Generate compelling marketing emails and effortlessly send them to your customers\' inbox.","illa_flow.how_it_works_automate.send_marketing_email":"Send {marketing} emails","illa_flow.image_alt.ecommercial":"Easily retrieve all product information from your data table, and efficiently generate descriptive details for each product using a looping task. Keep your data table up-to-date with the latest product descriptions.","illa_flow.how_it_works_code.transformer":"E-commerial: bulk update product description","illa_flow.how_it_works_automate.every_day":"Every day","illa_flow.how_it_works_automate.ecommercial":"Marketing","illa_flow.how_it_works.code_anywhere":"Code Anywhere","illa_flow.how_it_works.write_javascript":"Write JavaScript to customize the format of data and implement more functions.","illa_flow.image_alt.code.left":"Enhance flexibility by coding the definition of data input and output. With custom code, you can tailor data handling to your specific needs, ensuring greater adaptability and control.","illa_flow.how_it_works_code.transformer_desc":"Transformer","illa_flow.how_it_works_code.js":"Write JavaScript to manipulate data","illa_flow.image_alt.code.right":"Increase adaptability and control by customizing data input and output definitions through coding. This allows for greater flexibility in handling data to meet your specific requirements.","illa_flow.how_it_works_code.js_color_schema":"Write {jsCode}","illa_flow.how_it_works_code.js_desc":"in any type of resources","illa_flow.how_it_works_code.js_code":"JS Code","illa_flow.how_it_works.customize_your_business_automation":"Unlock Team\'s Potential with ILLA Product Hub","illa_flow.how_it_works.customize_your_business_automation_effortlessly,_unleash_productivity,_accelerate_business_growth.":"Customize Your Business Automation Effortlessly, Unleash Productivity, Accelerate Business Growth.","illa_flow.image_alt.centralize":"Centralize your resources with us by seamlessly connecting to your database, building applications, creating automated workflows, and integrating AI capabilities all in one place. Streamline your operations for maximum efficiency","illa_flow.how_it_works.centralize_resources":"Centralize resources","illa_flow.how_it_works.centralize_your_resources":"Centralize your resources and address your business needs in one place.","illa_flow.image_alt.more_intelligent":"Integrate with AI effortlessly and customize AI behavior without the need for coding skills. Tailor AI performance to your specific requirements with ease.","illa_flow.how_it_works.more_intelligent":"More intelligent","illa_flow.how_it_works.integration_with_ai_agent":"Integration with AI Agent, make the workflow more intelligent.","illa_flow.image_alt.integrate":"Enhance the capabilities of your internal tools by seamlessly connecting with ILLA Builder\'s App. Unlock new functionalities and features to optimize your internal processes.","illa_flow.how_it_works.integrate_with_illa_builder":"Integrate with ILLA Builder","illa_flow.how_it_works.enhance_the_power_of_your_internal_tools":"Enhance the power of your internal tools.","illa_flow.first_screen.illa_flow":"ILLA Flow","illa_flow.first_screen.surpassing_developers":"Surpassing developers\' expectations, effortlessly automating workflows","illa_flow.first_screen.get_started_for_free":"Get started for free","illa_flow.how_it_works.coming_soon":"Coming soon","learn_more":"Learn more","pricing.billing.pricing.premium.desc":"Upgrade your team to access advanced features","pricing.billing.pricing.premium.price":"/month/editor","pricing.billing.pricing.colla.desc":"Used to pay for value-added services in ILLA Cloud","pricing.billing.pricing.colla.price":"/month/5k Colla","new_pricing.colla.colla":"Colla","new_pricing.colla.fees_for_ai_agent_runtime":"Fees for AI Agent runtime, file storage and downloads, and ILLA Flow execution.","new_pricing.colla.compare.colla_price":"/5,000 Colla/month","new_pricing.colla.compare.storage":"File storage and download","new_pricing.colla.compare.storage_pricing":"5GB","execution\\tnew_pricing.colla.compare.ai_agent_execution":"AI Agent","new_pricing.colla.compare.approximately":"Approximately 100,000 words","new_pricing.colla.compare.illa_flow_execution":"ILLA Flow execution","new_pricing.colla.compare.flow":"5,000 minutes*blocks","new_pricing.colla.compare.get_started":"Get started","new_pricing.compare.compare":"Compare","pricing.billing.plus-btn":"Upgrade","landingPageDetail.audio.name":"Audio","landingPageDetail.audio.title":"Use the Audio Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.audio.description":"The \'Video\' component in ILLA Cloud allows users to play and interact with videos and audio within the application, providing an efficient and convenient way to access multimedia content.For example, a user can use the Video component to watch a tutorial video while working on a project, saving time and increasing productivity by having all necessary information readily available within the application.","landingPageDetail.audio.metaTitle":"ILLA Cloud | Audio Component","landingPageDetail.audio.metaDescription":"Learn how to use the Audio component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.barProgress.name":"Bar progress","landingPageDetail.barProgress.title":"Use the Bar Progress Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.barProgress.description":"The Bar Progress component in ILLA Cloud visually represents progress on a bar with a 100% scale, making it easy for users to track their progress quickly and efficiently. By providing a clear and concise visual representation of progress, users can easily understand how far along they are on a particular task or project without having to spend time calculating the percentage of completion, saving valuable time and allowing them to focus on more important tasks.","landingPageDetail.barProgress.metaTitle":"ILLA Cloud Bar Progress Component - Visualize Data Progress","landingPageDetail.barProgress.metaDescription":"Learn how to use Bar progress component to create dashboards, reports, surveys, and more with ILLA Cloud.","landingPageDetail.button.name":"Button","landingPageDetail.button.title":"Use the Button Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.button.description":"The Button component in ILLA Cloud is a versatile tool that can be used to trigger actions and enhance user experience by providing a clear and intuitive way to interact with the application. For example, a user can create a \'Save\' button that triggers a database update when clicked, streamlining the workflow and saving the user time in manually updating the database.","landingPageDetail.button.metaTitle":"ILLA Cloud | Button Component","landingPageDetail.button.metaDescription":"Learn how to use the Button component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.carousel.name":"Carousel","landingPageDetail.carousel.title":"Use the Carousel Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.carousel.description":"The \'Carousel\' component in ILLA Cloud displays multiple images or media in a single interface, saving users time by eliminating the need to navigate through separate pages or windows. Users can interact with the carousel to view and engage with the displayed content, such as images or videos, all within the same interface, providing a seamless and efficient user experience.","landingPageDetail.carousel.metaTitle":"ILLA Cloud | Carousel Component","landingPageDetail.carousel.metaDescription":"Learn how to use the Carousel component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.cascader.name":"Cascader","landingPageDetail.cascader.title":"Use the Cascader Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.cascader.description":"The Cascader component in ILLA Cloud enables users to select one option from multiple layers of choices, providing a hierarchical and efficient approach to data input and management. For example, a user can create a form for product selection and use the \'Cascader\' component to allow users to choose their preferred product category, brand, and model, improving the accuracy and efficiency of data collection.","landingPageDetail.cascader.metaTitle":"ILLA Cloud Cascader Component | ILLA Cloud","landingPageDetail.cascader.metaDescription":"Learn how to use Cascader component in ILLA Cloud to select options from cascading menus.","landingPageDetail.chart.name":"Chart","landingPageDetail.chart.title":"Use the Chart Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.chart.description":"The \'Chart\' component in ILLA Cloud displays various chart types based on linked data, providing a clear and visually appealing way to analyze complex information. Users can easily compare data points and identify trends, making it an efficient tool for decision-making. For example, a sales team can use a chart to visualize their revenue and identify areas for improvement. Overall, the Chart component can save users time by simplifying the process of data analysis and presenting information in an easily understandable format.","landingPageDetail.chart.metaTitle":"ILLA Cloud Chart Component - Visualize Data as Graphs and Charts","landingPageDetail.chart.metaDescription":"Learn how to use chart component to create dashboards, reports, surveys, and more with ILLA Cloud.","landingPageDetail.checkboxGroup.name":"Checkbox Group","landingPageDetail.checkboxGroup.title":"Use the Checkbox Group Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.checkboxGroup.description":"The Checkbox Group component in ILLA Cloud provides users with a convenient and efficient way to select multiple options from a list, saving time and effort. For example, a user can create a form for product preferences and use the \'Checkbox Group\' component to allow users to select multiple options, such as color or size, streamlining the data collection process.","landingPageDetail.checkboxGroup.metaTitle":"ILLA Cloud | Checkbox Group Component","landingPageDetail.checkboxGroup.metaDescription":"Learn how to use the Checkbox Group component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.circleProgress.name":"Circle Progress","landingPageDetail.circleProgress.title":"Use the Circle Progress Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.circleProgress.description":"The Circle Progress component in ILLA Cloud is designed to show progress on a circular shape, providing users with a visually appealing way to track progress. This component can save users time by allowing them to quickly and easily see the progress of a task or project without having to manually calculate the percentage, helping them to identify areas that may need additional attention or resources and communicate progress to team members and stakeholders in a clear and concise manner.","landingPageDetail.circleProgress.metaTitle":"ILLA Cloud Circle Progress Component - Display and Manage Data Progress in a Circular Bar","landingPageDetail.circleProgress.metaDescription":"Learn how to use Circular progress component in ILLA Cloud to displays the progress of data in a circular bar.","landingPageDetail.container.name":"Container","landingPageDetail.container.title":"Use the Container Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.container.description":"The \'Container\' component in ILLA Cloud groups multiple components together, making it easier for users to organize and manage content. For example, a user can group a set of input fields together in a container, simplifying the process of collecting and submitting data. This can save time by streamlining workflows and improving overall efficiency.","landingPageDetail.container.metaTitle":"ILLA Cloud | Container Component","landingPageDetail.container.metaDescription":"Learn how to use the Container component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.date.name":"Date","landingPageDetail.date.title":"Use the Date Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.date.description":"The Date component in ILLA Cloud simplifies date selection by providing a calendar-based interface, improving the efficiency and accuracy of date-related data management. For example, a user can create a form for event registration and use the Date component to allow users to select the event date, reducing the potential for date-related errors and streamlining the registration process.","landingPageDetail.date.metaTitle":"ILLA Cloud | Date Component","landingPageDetail.date.metaDescription":"Learn how to use the Date component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.dateRange.name":"Date Range","landingPageDetail.dateRange.title":"Use the Date Range Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.dateRange.description":"The \'Date Range\' component in ILLA Cloud streamlines the selection of date ranges by providing a calendar-based interface, saving users\' time and effort. For example, a user can create a report and use the \'Date Range\' component to allow users to select a date range for data analysis, simplifying the process and increasing efficiency.","landingPageDetail.dateRange.metaTitle":"ILLA Cloud | Date Range Component","landingPageDetail.dateRange.metaDescription":"Learn how to use the Date Range component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.dateTime.name":"Date Time","landingPageDetail.dateTime.title":"Use the Date Time Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.dateTime.description":"The Date Time component in ILLA Cloud simplifies date and time selection by providing a calendar-based interface, improving the efficiency and accuracy of data management. For example, a user can create a form for appointment scheduling and use the \'Date Time\' component to allow users to select the specific date and time, reducing the potential for scheduling errors and streamlining the process.","landingPageDetail.dateTime.metaTitle":"ILLA Cloud Date Time Component - Select and Display Date and Time","landingPageDetail.dateTime.metaDescription":"Learn how to use date time component to create forms, surveys, dashboards, and more with ILLA Cloud.","landingPageDetail.divider.name":"Divider","landingPageDetail.divider.title":"Use the Divider Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.divider.description":"The \'Divider\' component in ILLA Cloud is a visual element that creates clear distinctions between different sections of content, improving navigation and organization. By using dividers, users can save time by quickly finding the information they need without having to search through cluttered or disorganized content, improving the user experience.","landingPageDetail.divider.metaTitle":"ILLA Cloud | Divider Component","landingPageDetail.divider.metaDescription":"Learn how to use the Divider component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.editableText.name":"Editable text","landingPageDetail.editableText.title":"Use the Editable Text Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.editableText.description":"The Editable Text component in ILLA Cloud allows users to input and edit text in a one line text input box, and the input text can be shown as hovered. This component can save users\' time by providing a quick and easy way to edit text. For example, a user can create a form that collects user feedback and use the \'Editable Text\' component to allow users to edit their comments before submitting. This can help businesses improve their efficiency by reducing the need for back-and-forth communication.","landingPageDetail.editableText.metaTitle":"ILLA Cloud | Editable Text Component","landingPageDetail.editableText.metaDescription":"Learn how to use the Editable Text component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.form.name":"Form","landingPageDetail.form.title":"Use the Form Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.form.description":"The \'Form\' component in ILLA Cloud lets users input and submit required information, providing an efficient way to collect and process data. It can save time by standardizing the data entry process, reducing errors, and making it easier to organize and analyze the data. For example, a company can use a Form component to collect employee information, such as contact details and job position, and easily organize the data for HR purposes.","landingPageDetail.form.metaTitle":"ILLA Cloud | Form Component","landingPageDetail.form.metaDescription":"Learn how to use the Form component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.icon.name":"Icon","landingPageDetail.icon.title":"Use the Icon Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.icon.description":"The Icon component in ILLA Cloud provides a quick and easy way for users to insert pre-built icons, improving the visual appeal and usability of the application. For example, a user can insert a shopping cart icon to represent a shopping cart feature in an e-commerce application, saving time and effort in creating a custom icon and improving the user experience.","landingPageDetail.icon.metaTitle":"ILLA Cloud | Icon Component","landingPageDetail.icon.metaDescription":"Learn how to use the Icon component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.image.name":"Image","landingPageDetail.image.title":"Use the Image Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.image.description":"The Image component in ILLA Cloud provides a straightforward way for users to display images, enhancing the visual appeal and accessibility of information. For example, a user can use the \'Image\' component to display product images in an e-commerce application, saving time and effort in providing a clear and attractive representation of products.","landingPageDetail.image.metaTitle":"ILLA Cloud Image Component - Display and Manage Images within Your App","landingPageDetail.image.metaDescription":"Learn how to use image component to create galleries, sliders, thumbnails, and more with ILLA Cloud.","landingPageDetail.input.name":"Input","landingPageDetail.input.title":"Use the Input Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.input.description":"In ILLA Cloud, the Input component with a left label eliminates manual data entry, saving time and increasing efficiency. It allows users to easily provide the required information for further processing. For example, it can be used to collect customer contact information, streamlining data collection and processing workflows. The collected data can be utilized for customer segmentation, targeted marketing campaigns, and customer support, providing an efficient and time-saving solution.","landingPageDetail.input.metaTitle":"ILLA Cloud | Input Component ","landingPageDetail.input.metaDescription":"Learn how to use the Input component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.list.name":"List","landingPageDetail.list.title":"Use the List Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.list.description":"The List component provides an organized and efficient way to view and manage data, saving users time by allowing them to quickly access and manipulate information. For example, a sales manager can use the List component to view and track customer orders, quickly identifying trends and making data-driven decisions. Overall, the List component can improve productivity and enhance data analysis.","landingPageDetail.list.metaTitle":"ILLA Cloud List Component - Create Repeatable Rows of Data","landingPageDetail.list.metaDescription":"Learn how to use list component to create galleries, sliders, tables, and more with ILLA Cloud.","landingPageDetail.menu.name":"Menu","landingPageDetail.menu.title":"Use the Menu Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.menu.description":"By utilizing the Menu component, users can quickly access different options without having to navigate through multiple pages, saving time and increasing efficiency. For example, a user can use the Menu component to access various features of a software application, allowing them to easily access frequently used functions and streamline their workflow.","landingPageDetail.menu.metaTitle":"ILLA Cloud Menu Component - Display and Manage Page Structure","landingPageDetail.menu.metaDescription":"Learn how to use menu component to create navigation bars, sidebars, dropdown menus, and more with ILLA Cloud.","landingPageDetail.modal.name":"Modal","landingPageDetail.modal.title":"Use the Modal Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.modal.description":"The \'Modal\' component in ILLA Cloud is a user interface element that enables the display of content or prompts for user interaction without navigating away from the current page or interrupting the user\'s workflow. It creates a floating layer on top of the existing page to gather user feedback, display information, or prompt for input. This allows for a more seamless and streamlined user experience, as users can stay within the same context while still being able to interact with the application.","landingPageDetail.modal.metaTitle":"ILLA Cloud | Modal Component","landingPageDetail.modal.metaDescription":"Learn how to use the Modal component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.multiselect.name":"Multiselect","landingPageDetail.multiselect.title":"Use the MultiSelect Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.multiselect.description":"The Multi Select component in ILLA Cloud provides users with a convenient and efficient way to select multiple options from a list, saving time and effort. For example, a user can create a survey form and use the \'Multi Select\' component to allow users to select multiple options, such as their preferred products or services, streamlining the data collection process.","landingPageDetail.multiselect.metaTitle":"ILLA Cloud | Multiselect Component","landingPageDetail.multiselect.metaDescription":"Learn how to use the Multiselect component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.numberInput.name":"Number input","landingPageDetail.numberInput.title":"Use the Number Input Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.numberInput.description":"In ILLA Cloud, the Number Input component with a left label allows users to enter numerical values, providing a streamlined interface for quick and easy input. This component can save users\' time by eliminating the need for manual data entry. For example, a user can create an order form that includes a \'Number Input\' component to collect the quantity and price of each item. This can help businesses save time and reduce errors when processing orders.","landingPageDetail.numberInput.metaTitle":"ILLA Cloud | Number Input Component","landingPageDetail.numberInput.metaDescription":"Learn how to use the Number Input component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.pdf.name":"PDF","landingPageDetail.pdf.title":"Use the PDF Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.pdf.description":"The \'PDF\' component in ILLA Cloud allows users to view and interact with PDF files within the app, saving time and streamlining document management. For example, a user can easily access and annotate PDF documents without having to switch between different software or applications, improving productivity and workflow efficiency.","landingPageDetail.pdf.metaTitle":"ILLA Cloud | PDF Component","landingPageDetail.pdf.metaDescription":"Learn how to use the PDF component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.radioButton.name":"Radio Button","landingPageDetail.radioButton.title":"Use the Radio Button Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.radioButton.description":"The Radio Button component is a quick and efficient way for users to select one option from multiple choices, avoiding confusion and streamlining the decision-making process. For example, a survey form could use the Radio Button component to allow users to select their age group, gender, or preferred method of contact, saving time by simplifying the data input process.","landingPageDetail.radioButton.metaTitle":"ILLA Cloud | Radio Button Component","landingPageDetail.radioButton.metaDescription":" Learn how to use the Radio Button component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.radioGroup.name":"Radio group","landingPageDetail.radioGroup.title":"Use the Radio Group Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.radioGroup.description":"The Radio Group component in ILLA Cloud provides a straightforward and efficient way for users to select one option from a list, saving time and reducing errors. For example, a user can create a form for event registration and use the \'Radio Group\' component to allow users to select their preferred event, simplifying the registration process and improving efficiency.","landingPageDetail.radioGroup.metaTitle":"ILLA Cloud Radio Group Component - Build Internal Tools with Ease","landingPageDetail.radioGroup.metaDescription":"Learn how to use this component to create forms, surveys, dashboards, and more with ILLA Cloud.","landingPageDetail.rate.name":"Rate","landingPageDetail.rate.title":"Use the Rate Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.rate.description":"The \'Rate\' component in ILLA Cloud provides a quick and easy way for users to rate products, services or experiences, saving time in providing feedback. For example, a user can use the Rate component to rate a recent purchase or experience, helping businesses improve their products and services based on customer feedback.","landingPageDetail.rate.metaTitle":"ILLA Cloud | Rate Component","landingPageDetail.rate.metaDescription":"Learn how to use the Rate component in ILLA Cloud, a low-code platform for building internal tools. ","landingPageDetail.select.name":"Select","landingPageDetail.select.title":"Use the Select Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.select.description":"The Select component in ILLA Cloud allows users to select from a list of options, providing a user-friendly and space-efficient way to input data, which can save users\' time and increase efficiency. For example, a user can create a survey form and use the \'Select\' component to provide a range of options for users to choose from, simplifying the process and ensuring accurate data collection.","landingPageDetail.select.metaTitle":"ILLA Cloud Select Component - Select One Option from a List of Choices with Ease","landingPageDetail.select.metaDescription":"Learn how to use select component in ILLA Cloud to choose from a list of options.","landingPageDetail.statistics.name":"Statistics","landingPageDetail.statistics.title":"Use the Statistics Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.statistics.description":"The \'Statistics\' component in ILLA Cloud is designed to help users display numerical data in a visually appealing and easy-to-understand way, improving data analysis and decision-making. For example, a user can use the Statistics component to create a dashboard that displays sales data in various visual formats such as bar charts, pie charts, and line charts, saving time in creating customized visualizations and providing a quick and clear overview of the data.","landingPageDetail.statistics.metaTitle":"ILLA Cloud | Statistics Component","landingPageDetail.statistics.metaDescription":"Learn how to use the Statistics component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.switch.name":"Switch","landingPageDetail.switch.title":"Use the Switch Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.switch.description":"The Switch component in ILLA Cloud provides an intuitive and user-friendly way for users to turn on or turn off specific settings or features, saving time and increasing efficiency. For example, a user can create a notification system and use the \'Switch\' component to allow users to turn on or turn off notifications for specific events, such as new messages or updates, reducing unnecessary interruptions.","landingPageDetail.switch.metaTitle":"ILLA Cloud | Switch Component","landingPageDetail.switch.metaDescription":"Learn how to use the Switch component in ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.tables.name":"Tables","landingPageDetail.tables.title":"Use the Table Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.tables.description":"The \'Table\' component in ILLA Cloud displays database data in a tabular format, allowing users to quickly analyze large amounts of information. With features like sorting, searching, and filtering, the Table component can save users time by enabling them to easily find and manipulate the data they need. Additionally, tables can be customized with different column types, colors, and formatting options, making it possible to create visually appealing and easy-to-understand representations of complex data.","landingPageDetail.tables.metaTitle":"ILLA Cloud | Tables Component","landingPageDetail.tables.metaDescription":"Learn how to use the Tables component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.tabs.name":"Tabs","landingPageDetail.tabs.title":"Use the Tab Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.tabs.description":"The \'Tab\' component in ILLA Cloud saves users time by allowing them to easily switch between different sections of content without the need for extensive scrolling. For example, a user can use Tabs to switch between different views or modes in a software application, improving usability and productivity.","landingPageDetail.tabs.metaTitle":"ILLA Cloud Tabs Component - Categorize and Display Content","landingPageDetail.tabs.metaDescription":"Learn how to use tabs component to create dashboards, reports, forms, and more with ILLA Cloud.","landingPageDetail.text.name":"Text","landingPageDetail.text.title":"Use the Text Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.text.description":"The Text component in ILLA Cloud provides a straightforward way for users to display text, improving the readability and accessibility of information. For example, a user can use the \'Text\' component to display important instructions or information, such as contact details or product descriptions, saving time and effort in conveying important information.","landingPageDetail.text.metaTitle":"ILLA Cloud | Text Component","landingPageDetail.text.metaDescription":"Learn how to use the Text component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.textareaInput.name":"Textarea input","landingPageDetail.textareaInput.title":"Use the Textarea Input Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.textareaInput.description":"The Textarea Input component in ILLA Cloud is a user-friendly tool that enables users to input and edit multiple lines of text with ease. For example, a user can create a contact form that includes a \'Textarea Input\' component to allow users to enter detailed messages, saving time and streamlining the communication process.","landingPageDetail.textareaInput.metaTitle":"ILLA Cloud | Textarea Input Component","landingPageDetail.textareaInput.metaDescription":"Learn how to use the Textarea Input component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.timeline.name":"Timeline","landingPageDetail.timeline.title":"Use the Timeline Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.timeline.description":"The Timeline component in ILLA Cloud can save users time by providing a clear and organized visual representation of a project\'s progress or history. For example, a project manager can use the Timeline component to create a visual representation of a project\'s milestones, deadlines, and deliverables, saving time in creating and communicating a project\'s timeline to team members and stakeholders.","landingPageDetail.timeline.metaTitle":"ILLA Cloud | Timeline Component","landingPageDetail.timeline.metaDescription":"Learn how to use the Timeline component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.upload.name":"Upload","landingPageDetail.upload.title":"Use the Upload Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.upload.description":"The Upload component in ILLA Cloud enables users to easily upload any type of files to their application, providing a convenient and streamlined approach to data management. For example, a user can create an online store and use the \'Upload\' component to allow customers to upload images or other files when submitting orders, saving time and increasing efficiency.","landingPageDetail.upload.metaTitle":"ILLA Cloud | Upload Component","landingPageDetail.upload.metaDescription":"Learn how to use the Upload component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.video.name":"Video","landingPageDetail.video.title":"Use the Video Component in ILLA Cloud to build internal tools in just a few clicks.","landingPageDetail.video.description":"The \'Video\' component in ILLA Cloud plays and interacts with videos within the application, saving time by allowing users to easily view and interact with video content without the need to switch to an external video player. For example, a user can use the Video component to watch training videos or product demos within the application, improving productivity and efficiency.","landingPageDetail.video.metaTitle":"ILLA Cloud Video Component - Interact with Videos in Your App","landingPageDetail.video.metaDescription":"Learn how to use video component to create training videos, product demos, tutorials, and more with ILLA Cloud.","landingPage.build_with":"Build with {name}","landingPage.back_to_components":"Back to components","landingPageDetail.airtable.name":"Airtable","landingPageDetail.airtable.title":"Connect to Airtable with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.airtable.description":"\\"With ILLA Cloud\'s Airtable integration, you can quickly and easily connect to the open-source backend server platform to optimize your data management and streamline your workflows. The integration simplifies data management by leveraging Airtable\'s API endpoints, allowing you to easily manipulate data from your Airtable databases, storage and authentication services. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks. For example, you can retrieve data from an Airtable database and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s Airtable integration, you can streamline your data management process and leverage the powerful capabilities of Airtable to enhance your productivity.\\"","landingPageDetail.airtable.metaTitle":"Airtable","landingPageDetail.airtable.metaDescription":"A flexible and collaborative platform for managing projects, data, and teams seamlessly.","landingPageDetail.appwrite.name":"Appwrite","landingPageDetail.appwrite.title":"Connect to Appwrite with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.appwrite.description":"With ILLA Cloud\'s Appwrite integration, you can quickly and easily connect to the open-source backend server platform to optimize your data management and streamline your workflows.The integration simplifies data management by leveraging Appwrite\'s API endpoints, allowing you to easily manipulate data from your Appwrite databases, storage and authentication services. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.For example, you can retrieve data from an Appwrite database and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s Appwrite integration, you can streamline your data management process and leverage the powerful capabilities of Appwrite to enhance your productivity.","landingPageDetail.appwrite.metaTitle":"ILLA Cloud Appwrite Integration - Connect and Manage Your Appwrite Data","landingPageDetail.appwrite.metaDescription":"Learn how to use Appwrite integration to create applications that leverage the power of Appwrite with ILLA Cloud.","landingPageDetail.clickhouse.name":"Clickhouse","landingPageDetail.clickhouse.title":"Connect to Clickhouse with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.clickhouse.description":"With ILLA Cloud\'s ClickHouse integration, you can quickly configure and connect to your ClickHouse database to optimize your data management and streamline your workflows.The integration simplifies data management using ClickHouse queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a ClickHouse table and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s ClickHouse integration, you can streamline your data management process and leverage the powerful capabilities of ClickHouse to enhance your productivity.","landingPageDetail.clickhouse.metaTitle":"ILLA Cloud | ClickHouse Integration","landingPageDetail.clickhouse.metaDescription":"Learn how to connect and interact with any ClickHouse database using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.couchdb.name":"CouchDB","landingPageDetail.couchdb.title":"Connect to CouchDB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.couchdb.description":"With ILLA Cloud\'s CouchDB integration, you can quickly configure and connect to your CouchDB database to optimize your data management and streamline your workflows.The integration simplifies data management using CouchDB queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a CouchDB database and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s CouchDB integration, you can streamline your data management process and leverage the powerful capabilities of CouchDB to enhance your productivity.","landingPageDetail.couchdb.metaTitle":"ILLA Cloud | CouchDB Integration","landingPageDetail.couchdb.metaDescription":"Learn how to connect your CouchDB database to ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.dynamodb.name":"Amazon DynamoDB","landingPageDetail.dynamodb.title":"Connect to Amazon DynamoDB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.dynamodb.description":"With ILLA Cloud\'s Amazon DynamoDB integration, you can quickly configure and connect to your DynamoDB database to optimize your data management and streamline your workflows.The integration simplifies data management using DynamoDB queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a DynamoDB table and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s Amazon DynamoDB integration, you can streamline your data management process and leverage the powerful capabilities of DynamoDB to enhance your productivity.","landingPageDetail.dynamodb.metaTitle":"ILLA Cloud | Amazon DynamoDB Integration","landingPageDetail.dynamodb.metaDescription":"Learn how to connect your Amazon DynamoDB database to ILLA Cloud, a low-code platform for building internal tools. ","landingPageDetail.elasticsearch.name":"Elastic Search","landingPageDetail.elasticsearch.title":"Connect to Elastic Search with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.elasticsearch.description":"With ILLA Cloud\'s Elastic Search integration, you can quickly configure and connect to your Elastic Search cluster to optimize your data management and enhance your workflows.The integration simplifies data management using Elastic Search queries, allowing you to search and retrieve data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from an Elastic Search index and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s Elastic Search integration, you can streamline your data management process and leverage the powerful capabilities of Elastic Search to enhance your productivity.","landingPageDetail.elasticsearch.metaTitle":"ILLA Cloud | Elastic Search Integration","landingPageDetail.elasticsearch.metaDescription":"Learn how to connect and interact with your Elastic Search database using ILLA Cloud, the open-source low-code platform for building internal tools. ","landingPageDetail.firebase.name":"Firebase","landingPageDetail.firebase.title":"Connect to Firebase with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.firebase.description":"With ILLA Cloud\'s Firebase integration, you can quickly configure and connect to your Firebase database to optimize your data management and streamline your workflows.The integration simplifies data management using Firebase queries and API calls, allowing you to easily manipulate data and perform complex operations. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a Firebase collection and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s Firebase integration, you can streamline your data management process and leverage the powerful capabilities of Firebase to enhance your productivity.","landingPageDetail.firebase.metaTitle":"ILLA Cloud | Firebase Integration","landingPageDetail.firebase.metaDescription":"Learn how to connect your Firebase database to ILLA Cloud, a low-code platform for building internal tools. ","landingPageDetail.googlesheets.name":"Google Sheets","landingPageDetail.googlesheets.title":"Connect to Google Sheets with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.googlesheets.description":"With ILLA Cloud\'s Google Sheets integration, you can quickly and easily connect to your Google Sheets spreadsheets to optimize your data management and streamline your workflows.The integration simplifies data management by allowing you to read, write and manipulate data from your Google Sheets spreadsheets using Google Sheets API. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.For example, you can retrieve data from a Google Sheets spreadsheet and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s Google Sheets integration, you can streamline your data management process and leverage the powerful capabilities of Google Sheets to enhance your productivity.","landingPageDetail.googlesheets.metaTitle":"ILLA Cloud Google Sheets Integration - Connect and Manage Your Google Sheets Data","landingPageDetail.googlesheets.metaDescription":"Learn how to use Google sheet integration to create dashboards, reports, forms, and more with ILLA Cloud.","landingPageDetail.graphql.name":"GraphQL","landingPageDetail.graphql.title":"Connect to GraphQL with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.graphql.description":"With ILLA Cloud\'s GraphQL integration, you can quickly and easily configure and connect to your GraphQL APIs to optimize your data management and streamline your workflows.The integration simplifies data management by allowing you to easily retrieve and manipulate data from your GraphQL APIs. You can safely add or write data by providing input, including necessary GraphQL queries, and incorporating app-based validation checks.For example, you can retrieve data from a GraphQL API and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s GraphQL integration, you can streamline your data management process and leverage the powerful capabilities of GraphQL to enhance your productivity.","landingPageDetail.graphql.metaTitle":"ILLA Cloud | GraphQL Integration","landingPageDetail.graphql.metaDescription":"Learn how to connect your GraphQL API to ILLA Cloud, a low-code platform for building internal tools. ","landingPageDetail.huggingface.name":"Hugging Face Inference API","landingPageDetail.huggingface.title":"Connect to Hugging Face Inference API with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.huggingface.description":"With ILLA Cloud\'s Hugging Face Inference API integration, you can quickly and easily connect to Hugging Face\'s powerful natural language processing models to optimize your data management and streamline your workflows.The integration simplifies data management by leveraging Hugging Face\'s API endpoints, allowing you to retrieve and manipulate data with ease. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.For example, you can retrieve text data from an external source and pass it through a Hugging Face API call to perform sentiment analysis or language translation. With ILLA Cloud\'s Hugging Face Inference API integration, you can streamline your data management process and leverage the powerful capabilities of Hugging Face\'s natural language processing models to enhance your productivity.","landingPageDetail.huggingface.metaTitle":"ILLA Cloud Hugging Face Inference API Integration - Connect and Use ML Models","landingPageDetail.huggingface.metaDescription":"The Hugging Face Inference API integration in ILLA Cloud allows users to connect and use over 130,000 machine learning models. ","landingPageDetail.huggingfaceendpoint.name":"Hugging Face Inference Endpoint","landingPageDetail.huggingfaceendpoint.title":"Connect to Hugging Face Inference Endpoint with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.huggingfaceendpoint.description":"With ILLA Cloud\'s Hugging Face Inference Endpoint integration, you can quickly and easily configure and connect to Hugging Face\'s powerful natural language processing models to optimize your data management and streamline your workflows.The integration simplifies data management by leveraging Hugging Face\'s API endpoints, allowing you to retrieve and manipulate data with ease. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.For example, you can retrieve text data from an external source and pass it through a Hugging Face inference endpoint to perform sentiment analysis or language translation. With ILLA Cloud\'s Hugging Face Inference Endpoint integration, you can streamline your data management process and leverage the powerful capabilities of Hugging Face\'s natural language processing models to enhance your productivity.","landingPageDetail.huggingfaceendpoint.metaTitle":"ILLA Cloud | Hugging Face Inference Endpoint Integration","landingPageDetail.huggingfaceendpoint.metaDescription":"Learn how to connect and interact with any Hugging Face Inference Endpoint using ILLA Cloud, the open-source low-code platform for building internal tools. ","landingPageDetail.hydra.name":"Hydra","landingPageDetail.hydra.title":"Connect to Hydra with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.hydra.description":"\\"With ILLA Cloud\'s Hydra integration, you can quickly and easily connect to the open-source backend server platform to optimize your data management and streamline your workflows.\\r\\nThe integration simplifies data management by leveraging Hydra\'s API endpoints, allowing you to easily manipulate data from your Hydra databases, storage and authentication services. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.\\r\\nFor example, you can retrieve data from an Hydra database and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s Hydra integration, you can streamline your data management process and leverage the powerful capabilities of Hydra to enhance your productivity.\\"","landingPageDetail.hydra.metaTitle":"Hydra","landingPageDetail.hydra.metaDescription":"An open source, column-oriented RDBMS built on Postgres","landingPageDetail.mariadb.name":"MariaDB","landingPageDetail.mariadb.title":"Connect to MariaDB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.mariadb.description":"With ILLA Cloud\'s MariaDB integration, you can quickly and easily configure and connect to your MariaDB database to optimize your data management and streamline your workflows.The integration simplifies data management using SQL, allowing you to manipulate tables, retrieve data and perform complex queries with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can fetch data for an employee from a MariaDB table and add a button that, when clicked, runs an SQL query to update the employee\'s information or approve a request. With ILLA Cloud\'s MariaDB integration, you can maximize the potential of your data source and enhance your productivity with minimal effort.","landingPageDetail.mariadb.metaTitle":"ILLA Cloud | MariaDB Integration","landingPageDetail.mariadb.metaDescription":"Learn how to connect and interact with your MariaDB database using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.mongodb.name":"MongoDB","landingPageDetail.mongodb.title":"Connect to MongoDB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.mongodb.description":"With ILLA Cloud\'s MongoDB integration, you can quickly configure and connect to your MongoDB database to optimize your data management and streamline your workflows.The integration simplifies data management using MongoDB queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a MongoDB collection and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s MongoDB integration, you can streamline your data management process and leverage the powerful capabilities of MongoDB to enhance your productivity.","landingPageDetail.mongodb.metaTitle":"ILLA Cloud | MongoDB Integration","landingPageDetail.mongodb.metaDescription":"Learn how to connect and interact with your MongoDB database using ILLA Cloud, the open-source low-code platform for building internal tools. ","landingPageDetail.mssql.name":"Microsoft SQL Server","landingPageDetail.mssql.title":"Connect to Microsoft SQL Server with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.mssql.description":"With ILLA Cloud\'s Microsoft SQL Server integration, you can quickly configure and connect to your SQL Server database to optimize your data management and streamline your workflows.The integration simplifies data management using SQL queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a SQL Server table and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s Microsoft SQL Server integration, you can streamline your data management process and leverage the powerful capabilities of SQL Server to enhance your productivity.","landingPageDetail.mssql.metaTitle":"ILLA Cloud | Microsoft SQL Server Integration","landingPageDetail.mssql.metaDescription":"Learn how to connect your Microsoft SQL Server database to ILLA Cloud, a low-code platform for building internal tools. ","landingPageDetail.mysql.name":"MySQL","landingPageDetail.mysql.title":"Connect to MySQL with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.mysql.description":"Integrating ILLA Cloud with MySQL can greatly enhance your workflow and streamline your processes. With just a few simple steps, you can connect ILLA Cloud to your MySQL databases, enabling you to create user interfaces that interact with your data in powerful new ways. Whether you need to read data into a table grid, create dashboards, or add custom actions that run SQL queries to write to your database, ILLA Cloud makes it easy to do so safely and efficiently.By connecting to your MySQL data with ILLA Cloud, you can avoid unintentional deletes and other costly errors. For example, if you\'re managing employee expenses with a MySQL table, you can use ILLA Cloud to read your data into a dashboard and even add an action that writes back to your database to update the approval status for each expense. And with ILLA Cloud\'s simple interface, you can define the actions you want to take in a clear and systematic way, making it easy to optimize your workflow and streamline your processes.","landingPageDetail.mysql.metaTitle":"ILLA Cloud | MySQL Integration","landingPageDetail.mysql.metaDescription":"Learn how to connect your MySQL database to ILLA Cloud, a low-code platform for building internal tools. ","landingPageDetail.neon.name":"Neon","landingPageDetail.neon.title":"Connect to Neon with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.neon.description":"The fully managed multi-cloud Postgres with a generous free tier. We separated storage and compute to offer autoscaling, branching, and bottomless storage.","landingPageDetail.neon.metaTitle":"ILLA Cloud Neon Integration - Connect to the multi-cloud Postgres","landingPageDetail.neon.metaDescription":"Learn how to connect your Neon database to ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.oracledb.name":"Oracle DB","landingPageDetail.oracledb.title":"Connect to Oracle DB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.oracledb.description":"With ILLA Cloud\'s Oracle DB integration, you can quickly configure and connect to your Oracle database to optimize your data management and streamline your workflows.The integration simplifies data management using SQL queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from an Oracle database table and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s Oracle DB integration, you can streamline your data management process and leverage the powerful capabilities of Oracle DB to enhance your productivity.","landingPageDetail.oracledb.metaTitle":"ILLA Cloud | Oracle DB Integration","landingPageDetail.oracledb.metaDescription":"Learn how to use the Oracle DB integration in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.postgresql.name":"PostgreSQL","landingPageDetail.postgresql.title":"Connect to PostgreSQL with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.postgresql.description":"With ILLA Cloud\'s PostgreSQL integration, you can quickly configure and connect to your PostgreSQL database to optimize your data source with reliable performance.The integration simplifies data management with SQL, allowing you to easily manipulate tables and perform complex queries. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For instance, suppose you want to retrieve employee data from a PostgreSQL table and approve a leave request with a single click. In that case, you can create a button that runs an SQL query, marking the employee\'s request as approved. With ILLA Cloud\'s PostgreSQL integration, you can streamline your data management process with ease and confidence.","landingPageDetail.postgresql.metaTitle":"ILLA Cloud | PostgreSQL Database Integration","landingPageDetail.postgresql.metaDescription":"Learn how to connect and interact with any PostgreSQL database using ILLA Cloud, the open-source low-code platform for building internal tools. ","landingPageDetail.redis.name":"Redis","landingPageDetail.redis.title":"Connect to Redis with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.redis.description":"With ILLA Cloud\'s Redis integration, you can quickly configure and connect to your Redis database to optimize your data management and enhance your workflows.The integration simplifies data management using Redis commands, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary commands, and incorporating app-based validation checks.For example, you can retrieve data from a Redis database and add a button that, when clicked, performs a Redis command to update the data or approve a request. With ILLA Cloud\'s Redis integration, you can streamline your data management process and leverage the powerful capabilities of Redis to enhance your productivity.","landingPageDetail.redis.metaTitle":"ILLA Cloud Redis Integration - Connect and Manage Your Redis Database","landingPageDetail.redis.metaDescription":"Learn how to use Redis integration to manipulate data using Redis commands, create dashboards, reports, forms, and more with ILLA Cloud.","landingPageDetail.restapi.name":"REST API","landingPageDetail.restapi.title":"Connect to Any RESTful API and Build Custom Tools with ILLA Cloud in Minutes","landingPageDetail.restapi.description":"With ILLA Cloud\'s REST API integration, you can quickly and easily connect to any RESTful API to optimize your data management and streamline your workflows.The integration simplifies data management using RESTful API endpoints, allowing you to retrieve and manipulate data with ease. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.For example, you can retrieve data from an external RESTful API and add a button that, when clicked, performs a call to update the data or approve a request. With ILLA Cloud\'s REST API integration, you can streamline your data management process and leverage the powerful capabilities of RESTful APIs to enhance your productivity.","landingPageDetail.restapi.metaTitle":"ILLA Cloud | REST API Integration","landingPageDetail.restapi.metaDescription":"Learn how to connect and interact with any REST API endpoint using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.s3.name":"S3","landingPageDetail.s3.title":"Connect to Amazon S3 with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.s3.description":"With ILLA Cloud\'s Amazon S3 integration, you can quickly and easily configure and connect to your Amazon S3 storage to optimize your data management and streamline your workflows.The integration simplifies data management by leveraging S3 API endpoints, allowing you to read, write and manipulate data from your S3 buckets with ease. You can safely add or write data by providing input, including necessary API calls, and incorporating app-based validation checks.For example, you can retrieve data from an S3 bucket and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s Amazon S3 integration, you can streamline your data management process and leverage the powerful capabilities of Amazon S3 storage to enhance your productivity.","landingPageDetail.s3.metaTitle":"ILLA Cloud | S3 Integration","landingPageDetail.s3.metaDescription":"Learn how to use the S3 component in ILLA Cloud, a low-code platform for building internal tools.","landingPageDetail.smtp.name":"SMTP","landingPageDetail.smtp.title":"Connect to SMTP with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.smtp.description":"With ILLA Cloud\'s SMTP integration, you can quickly and easily configure and connect to your SMTP server to optimize your email management and streamline your workflows.The integration simplifies email management by allowing you to send and receive emails directly from your ILLA Cloud application. You can safely send emails by providing input, including necessary SMTP parameters, and incorporating app-based validation checks.For example, you can send automated emails to users when a certain event is triggered in your application. With ILLA Cloud\'s SMTP integration, you can streamline your email management process and leverage the powerful capabilities of SMTP to enhance your productivity.","landingPageDetail.smtp.metaTitle":"ILLA Cloud | SMTP Integration","landingPageDetail.smtp.metaDescription":"Learn how to connect and interact with any SMTP server using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.snowflake.name":"Snowflake","landingPageDetail.snowflake.title":"Connect to Snowflake with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.snowflake.description":"With ILLA Cloud\'s Snowflake integration, you can quickly configure and connect to your Snowflake data warehouse to optimize your data management and streamline your workflows.The integration simplifies data management using Snowflake SQL queries, allowing you to manipulate data with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a Snowflake table and add a button that, when clicked, performs a query to update the data or approve a request. With ILLA Cloud\'s Snowflake integration, you can streamline your data management process and leverage the powerful capabilities of Snowflake to enhance your productivity.","landingPageDetail.snowflake.metaTitle":"ILLA Cloud | Snowflake Integration","landingPageDetail.snowflake.metaDescription":"Learn how to connect and interact with your Snowflake database using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.supabaseDB.name":"Supabase DB","landingPageDetail.supabaseDB.title":"Connect to SupabaseDB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.supabaseDB.description":"With ILLA Cloud\'s SupabaseDB integration, you can quickly configure and connect to your SupabaseDB database to optimize your data management and streamline your workflows.The integration simplifies data management using SupabaseDB queries and API calls, allowing you to easily manipulate data and perform complex operations. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For example, you can retrieve data from a SupabaseDB table and add a button that, when clicked, performs an API call to update the data or approve a request. With ILLA Cloud\'s SupabaseDB integration, you can streamline your data management process and leverage the powerful capabilities of SupabaseDB to enhance your productivity.","landingPageDetail.supabaseDB.metaTitle":"ILLA Cloud | Supabase DB Integration","landingPageDetail.supabaseDB.metaDescription":"Learn how to connect and interact with any Supabase DB using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPageDetail.tiDB.name":"TiDB","landingPageDetail.tiDB.title":"Connect to TiDB with ILLA Cloud and build internal tools in just a few clicks.","landingPageDetail.tiDB.description":"With ILLA Cloud\'s TiDB integration, you can seamlessly configure and connect to your TiDB database to optimize your data management and enhance your workflows.The integration simplifies data management using SQL, allowing you to manipulate tables, retrieve data and perform complex queries with ease. You can safely add or write data by providing input, including necessary queries, and incorporating app-based validation checks.For instance, you can retrieve data for an employee from a TiDB table and add a button that runs an SQL query to update the employee\'s information or approve a request. With ILLA Cloud\'s TiDB integration, you can streamline your data management process and unlock the full potential of your data source with confidence.","landingPageDetail.tiDB.metaTitle":"ILLA Cloud | TiDB Integration","landingPageDetail.tiDB.metaDescription":"Learn how to connect and interact with your TiDB database using ILLA Cloud, the open-source low-code platform for building internal tools.","landingPage.back_to_integrations":"Back to integrations","theme.NotFound.p1":"We could not find what you were looking for.","theme.NotFound.p2":"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.","footer.less":"Show less","footer.more":"Show more","content.all.title":"ILLA Cloud integrates everything","how_to_use.title.3_steps_to_customize":"steps to customize your business apps","how_to_use.description.build_tools_through":"Build tools through drag-and-drop components, customize your AI Agent, connect to your data sources, and make AI a smart tool tailored to your needs and data, making your work more intelligent.","how_to_use.step1_title.create_ai_agent_for":"Drag and drop components to design UI","how_to_use.step1_description.you_can_create_an_ai":"By dragging and dropping components, you can quickly build the UI of the apps and implement any functionality you desire.","how_to_use.step1_button.ai_agent_marketplace":"Start building UI with ILLA","how_to_use.step2_title.build_the_frontend_p":"Connect to your data sources","how_to_use.step2_description.by_dragging_and_drop":"Connect to your own data sources, including MySQL, PostgreSQL, and other databases, REST APIs, GraphQL, etc. Build CRUD apps in just one minute.","how_to_use.step2_button.illa_app_marketplace":"Start building Apps with your data sources","how_to_use.step3_title.connect_to_your_data":"Configure and connect to AI agents","how_to_use.step3_description.enable_data_integrat":"Integrating AI agents into your app and empower it with AI capabilities such as intelligent analysis, content generation, and more, without AI development skills.","how_to_use.step3_button.supported_data_sourc":"Start building AI driven apps","how_to_use.step4_alt.flow":"Use ILLA Flow to automate your workflow and streamline your tasks. With ILLA Flow, you can ensure that you always have the most up-to-date data at your fingertips, eliminating the need for manual updates. By automating repetitive tasks, ILLA Flow saves you time and effort, allowing you to focus on more important aspects of your work.","how_to_use.step4_title.flow":"Automate your Workflow","how_to_use.step4_description.flow":"Use ILLA Flow to automate your workflow to ensure you always have the latest data and reduce repetitive tasks. ","how_to_use.step4_button.flow":"Learn more about ILLA Flow","testimonial.title.user_testimonials":"User Testimonials","testimonial.testimonial1_content.illa_cloud_has_been":"ILLA Cloud has been a game-changer for me. It helps me generate highly efficient content in less time. The customized AI Agent and App perfectly cater to my business needs.","testimonial.testimonial1_username.christopher":"Christopher","testimonial.testimonial1_usertitle.seo_specialist":"SEO Specialist","testimonial.testimonial2_content.i_think_i_become_a_b":"I think I become a BlogMaster now! This tool has revolutionized my content generation process, saving me valuable time. Whether it\'s generating blog ideas or structuring articles, the AI Agents have been a tremendous asset to me and my team.","testimonial.testimonial2_username.lucas":"Lucas","testimonial.testimonial2_usertitle.content_strategist":"Content Strategist","testimonial.testimonial3_content.it_empowers_me_to_pr":"It empowers me to provide exceptional customer support with minimal effort. The pre-built AI Agent and App, along with the ability to customize them for our specific needs, have significantly enhanced our team\'s effectiveness.","testimonial.testimonial3_username.harper":"Harper","testimonial.testimonial3_usertitle.customer_service_man":"Customer Service Manager","testimonial.testimonial4_content.ai_agent_low_code":"AI Agent & low-code has transformed my email writing process. It streamlines the creation of impactful emails, enabling me to craft engaging and persuasive messages effortlessly. ILLA Cloud has elevated our email communication to new heights.","testimonial.testimonial4_username.abigail":"Abigail","testimonial.testimonial4_usertitle.communication_specia":"Communication Specialist","testimonial.testimonial5_content.i_need_to_oversee_va":"I need to oversee various aspects of my company. ILLA Cloud provides me with a comprehensive solution. It not only saves me time and effort in development and design but also allows me to manage and monitor my business better. ","testimonial.testimonial5_username.matthew":"Matthew","testimonial.testimonial5_usertitle.business_founder":"Business Founder","testimonial.testimonial6_content.using_illa_cloud_to":"Using ILLA Cloud to build a management dashboard has been incredibly easy. After just one day of work, we were able to accomplish tasks such as monitoring project progress and allocating resources within this dashboard.","testimonial.testimonial6_username.samuel":"Samuel","testimonial.testimonial6_usertitle.website_administrato":"Website Administrator","customer.title":"Trusted by thousands of teams","description":"Build {businessApp} with low code, make automated {flow}, create {AIAgent} easily","website_4.description.ai_agent":"AI Agent","website_4.description.business_app":"website&app","website_4.description.flow":"flow","first_button":"Get started","join-community":"Join Discord","theme.blog.post.readMore":"Read More","theme.blog.post.readMoreLabel":"Read more about {title}","new_pricing.compare.open_source":"Open source","new_pricing.compare.cloud":"Cloud version","theme.ErrorPageContent.title":"This page crashed.","theme.BackToTopButton.buttonAriaLabel":"Scroll back to top","theme.blog.archive.title":"Archive","theme.blog.archive.description":"Archive","theme.blog.post.paginator.navAriaLabel":"Blog post page navigation","theme.blog.post.paginator.newerPost":"Newer Post","theme.blog.post.paginator.olderPost":"Older Post","theme.tags.tagsPageLink":"View All Tags","theme.colorToggle.ariaLabel":"Switch between dark and light mode (currently {mode})","theme.colorToggle.ariaLabel.mode.dark":"dark mode","theme.colorToggle.ariaLabel.mode.light":"light mode","theme.docs.breadcrumbs.navAriaLabel":"Breadcrumbs","theme.docs.DocCard.categoryDescription":"{count} items","theme.docs.paginator.navAriaLabel":"Docs pages","theme.docs.paginator.previous":"Previous","theme.docs.paginator.next":"Next","theme.docs.tagDocListPageTitle.nDocsTagged":"One doc tagged|{count} docs tagged","theme.docs.tagDocListPageTitle":"{nDocsTagged} with \\"{tagName}\\"","theme.docs.versionBadge.label":"Version: {versionLabel}","theme.docs.versions.unreleasedVersionLabel":"This is unreleased documentation for {siteTitle} {versionLabel} version.","theme.docs.versions.unmaintainedVersionLabel":"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.","theme.docs.versions.latestVersionSuggestionLabel":"For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).","theme.docs.versions.latestVersionLinkLabel":"latest version","theme.common.editThisPage":"Edit this page","theme.common.headingLinkTitle":"Direct link to {heading}","theme.lastUpdated.atDate":" on {date}","theme.lastUpdated.byUser":" by {user}","theme.lastUpdated.lastUpdatedAtBy":"Last updated{atDate}{byUser}","theme.navbar.mobileVersionsDropdown.label":"Versions","theme.tags.tagsListLabel":"Tags:","theme.admonition.caution":"caution","theme.admonition.danger":"danger","theme.admonition.info":"info","theme.admonition.note":"note","theme.admonition.tip":"tip","theme.admonition.warning":"warning","theme.AnnouncementBar.closeButtonAriaLabel":"Close","theme.blog.sidebar.navAriaLabel":"Blog recent posts navigation","theme.CodeBlock.copied":"Copied","theme.CodeBlock.copyButtonAriaLabel":"Copy code to clipboard","theme.CodeBlock.copy":"Copy","theme.CodeBlock.wordWrapToggle":"Toggle word wrap","theme.DocSidebarItem.expandCategoryAriaLabel":"Expand sidebar category \'{label}\'","theme.DocSidebarItem.collapseCategoryAriaLabel":"Collapse sidebar category \'{label}\'","theme.NavBar.navAriaLabel":"Main","theme.navbar.mobileLanguageDropdown.label":"Languages","theme.TOCCollapsible.toggleButtonLabel":"On this page","theme.docs.breadcrumbs.home":"Home page","theme.docs.sidebar.collapseButtonTitle":"Collapse sidebar","theme.docs.sidebar.collapseButtonAriaLabel":"Collapse sidebar","theme.docs.sidebar.navAriaLabel":"Docs sidebar","theme.docs.sidebar.closeSidebarButtonAriaLabel":"Close navigation bar","theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel":"\u2190 Back to main menu","theme.docs.sidebar.toggleSidebarButtonAriaLabel":"Toggle navigation bar","theme.docs.sidebar.expandButtonTitle":"Expand sidebar","theme.docs.sidebar.expandButtonAriaLabel":"Expand sidebar","theme.ErrorPageContent.tryAgain":"Try again","theme.common.skipToMainContent":"Skip to main content","theme.tags.tagsPageTitle":"Tags","theme.unlistedContent.title":"Unlisted page","theme.unlistedContent.message":"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."}')},6887:e=>{"use strict";e.exports=JSON.parse('{"/illa-website/admin-panel-090":{"__comp":"2864c10f","__context":{"plugin":"34d0e50f"},"content":"a9f9d9a3"},"/illa-website/ai-voice-generator-71b":{"__comp":"2864c10f","__context":{"plugin":"34d0e50f"},"content":"b0677628"},"/illa-website/blog-a39":{"__comp":"a6aa9e1f","__context":{"plugin":"fc0df049"},"items":[{"content":"ed1472d5"},{"content":"882e85dd"},{"content":"d3b7cf11"},{"content":"cf2425b1"},{"content":"bd8bbd45"},{"content":"03dad041"},{"content":"557198aa"},{"content":"1b46aaf4"},{"content":"4d8b029c"},{"content":"40c20836"},{"content":"050ff1a7"},{"content":"cd038061"},{"content":"d87f99a5"},{"content":"4fb9e68b"},{"content":"e20c763e"},{"content":"5cd65baf"}],"metadata":"a1d5db4a","tags":"2bab37f9"},"/illa-website/blog/appsmith-vs-retool-b40":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"f8cc4e92"},"/illa-website/blog/automate-send-to-slack-ba3":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"9c6dc03d"},"/illa-website/blog/backend-create-web-ui-e6d":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"e765f05a"},"/illa-website/blog/best-citizen-developer-tool-a65":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"045d4d91"},"/illa-website/blog/best-low-code-platform-9b1":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"cbbdd979"},"/illa-website/blog/boost-freelancer-c23":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"ceba9a17"},"/illa-website/blog/build-ai-tools-c16":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"ec7f9948"},"/illa-website/blog/build-dashboard-fb1":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"96447363"},"/illa-website/blog/core-app-dashboard-2-006":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"d37b0cd5"},"/illa-website/blog/internal-tool-0e6":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"f20664df"},"/illa-website/blog/it-support-1b7":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"c1d2b2d8"},"/illa-website/blog/launch-flow-116":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"745ae684"},"/illa-website/blog/list-tables-in-postgresql-15e":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"be40e9ec"},"/illa-website/blog/low-code-crm-23f":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"f7394536"},"/illa-website/blog/lowcode-vs-traditional-6ed":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"72d3bf7a"},"/illa-website/blog/mui-2024-5d5":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"1842627e"},"/illa-website/blog/nvm-use-2024-083":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"5f78ec6a"},"/illa-website/blog/page/2-71c":{"__comp":"a6aa9e1f","__context":{"plugin":"fc0df049"},"items":[{"content":"03958142"},{"content":"577b6af3"},{"content":"35e17217"},{"content":"912dc06b"},{"content":"11f28d89"},{"content":"e55440e4"},{"content":"f9d68572"},{"content":"013bc832"},{"content":"7dda7093"},{"content":"88d8af9f"},{"content":"6d69edbe"},{"content":"b6eb34d2"}],"metadata":"f959b7ea","tags":"2bab37f9"},"/illa-website/blog/page/3-293":{"__comp":"a6aa9e1f","__context":{"plugin":"fc0df049"},"items":[{"content":"4a83e123"},{"content":"354dfbd1"},{"content":"bb85b74d"},{"content":"eb5bf31c"}],"metadata":"5a2987c2","tags":"2bab37f9"},"/illa-website/blog/postgresql-isnull-f7b":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"a48c94eb"},"/illa-website/blog/postgresql-select-6fb":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"55813e94"},"/illa-website/blog/react-component-library-b6f":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"8f1e5e50"},"/illa-website/blog/react-error-boundary-77f":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"86a054dc"},"/illa-website/blog/react-markdown-f93":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"5d55e09c"},"/illa-website/blog/shadcn-ui-2024-b65":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"4a61f11b"},"/illa-website/blog/shadcn-vs-mui-2aa":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"31eafaf9"},"/illa-website/blog/tags-6c4":{"__comp":"01a85c17","__context":{"plugin":"fc0df049"},"tags":"2bab37f9"},"/illa-website/blog/tags/admin-panel-ecb":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"e20c763e"}],"tag":"da530276","tags":"2bab37f9","listMetadata":"a8a01fb0"},"/illa-website/blog/tags/ai-8dd":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"cd038061"}],"tag":"85ec1940","tags":"2bab37f9","listMetadata":"c2768d7e"},"/illa-website/blog/tags/appsmith-61e":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"4d8b029c"},{"content":"40c20836"},{"content":"050ff1a7"}],"tag":"a13312d4","tags":"2bab37f9","listMetadata":"ed70cb03"},"/illa-website/blog/tags/automate-436":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"03958142"}],"tag":"ae1f131a","tags":"2bab37f9","listMetadata":"21c37781"},"/illa-website/blog/tags/citizen-developer-ca5":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"d87f99a5"}],"tag":"df2cf251","tags":"2bab37f9","listMetadata":"c3ae7b0b"},"/illa-website/blog/tags/citizen-developer-tool-be4":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"d87f99a5"}],"tag":"9f9623bc","tags":"2bab37f9","listMetadata":"baa7cbb5"},"/illa-website/blog/tags/citizen-development-6ea":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"d87f99a5"}],"tag":"bfab3385","tags":"2bab37f9","listMetadata":"0dbcbd61"},"/illa-website/blog/tags/component-a30":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"ed1472d5"},{"content":"bd8bbd45"}],"tag":"7d74c426","tags":"2bab37f9","listMetadata":"9b2435a1"},"/illa-website/blog/tags/core-app-dashboard-b49":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"4fb9e68b"}],"tag":"5da532a1","tags":"2bab37f9","listMetadata":"a4ae0aea"},"/illa-website/blog/tags/crud-63d":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"912dc06b"}],"tag":"3398d68b","tags":"2bab37f9","listMetadata":"521f732f"},"/illa-website/blog/tags/data-dashboard-55e":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"e20c763e"},{"content":"bb85b74d"}],"tag":"a7999644","tags":"2bab37f9","listMetadata":"ee6f64f3"},"/illa-website/blog/tags/database-cd9":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"35e17217"},{"content":"013bc832"}],"tag":"f6bab244","tags":"2bab37f9","listMetadata":"31168439"},"/illa-website/blog/tags/fiverr-aa5":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"577b6af3"}],"tag":"a15fa1d1","tags":"2bab37f9","listMetadata":"302c1f6e"},"/illa-website/blog/tags/freelance-946":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"577b6af3"}],"tag":"db07c19c","tags":"2bab37f9","listMetadata":"bea50343"},"/illa-website/blog/tags/freelancer-ce7":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"577b6af3"}],"tag":"bac88092","tags":"2bab37f9","listMetadata":"65f8b696"},"/illa-website/blog/tags/gui-ade":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"35e17217"},{"content":"eb5bf31c"}],"tag":"25c2fb8d","tags":"2bab37f9","listMetadata":"0d8e277f"},"/illa-website/blog/tags/internal-tools-34b":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"e20c763e"}],"tag":"3ae00f65","tags":"2bab37f9","listMetadata":"fad6e022"},"/illa-website/blog/tags/isnotnull-519":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"cf2425b1"}],"tag":"32e52b4a","tags":"2bab37f9","listMetadata":"1096d3fa"},"/illa-website/blog/tags/isnull-62b":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"cf2425b1"}],"tag":"9ee4bd2d","tags":"2bab37f9","listMetadata":"dd8552f0"},"/illa-website/blog/tags/javascript-ee2":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"03dad041"},{"content":"11f28d89"},{"content":"5cd65baf"},{"content":"88d8af9f"},{"content":"6d69edbe"},{"content":"b6eb34d2"}],"tag":"dfe72411","tags":"2bab37f9","listMetadata":"1d9dae67"},"/illa-website/blog/tags/library-3d8":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"ed1472d5"},{"content":"bd8bbd45"}],"tag":"26b5cf84","tags":"2bab37f9","listMetadata":"f79a3b75"},"/illa-website/blog/tags/list-1cf":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"013bc832"}],"tag":"fd0dac06","tags":"2bab37f9","listMetadata":"09e4ef32"},"/illa-website/blog/tags/low-code-d00":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"f9d68572"},{"content":"4fb9e68b"},{"content":"5cd65baf"},{"content":"354dfbd1"}],"tag":"c45d4b28","tags":"2bab37f9","listMetadata":"b4cd1370"},"/illa-website/blog/tags/low-code-crm-d64":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"7dda7093"}],"tag":"aead6cc5","tags":"2bab37f9","listMetadata":"4bb82d9d"},"/illa-website/blog/tags/mac-c15":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"11f28d89"},{"content":"6d69edbe"}],"tag":"1e617043","tags":"2bab37f9","listMetadata":"dcf8da52"},"/illa-website/blog/tags/nodejs-0ef":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"11f28d89"},{"content":"6d69edbe"}],"tag":"cd0cf34d","tags":"2bab37f9","listMetadata":"9784bb0b"},"/illa-website/blog/tags/nvm-54f":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"11f28d89"},{"content":"6d69edbe"}],"tag":"995fa2e5","tags":"2bab37f9","listMetadata":"b3f0800c"},"/illa-website/blog/tags/open-source-f4a":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"354dfbd1"}],"tag":"dd95d1fb","tags":"2bab37f9","listMetadata":"7d62b9db"},"/illa-website/blog/tags/postgres-5f2":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"013bc832"}],"tag":"136b15b7","tags":"2bab37f9","listMetadata":"718613d7"},"/illa-website/blog/tags/postgresql-38f":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"882e85dd"},{"content":"d3b7cf11"},{"content":"cf2425b1"},{"content":"013bc832"}],"tag":"94bc8583","tags":"2bab37f9","listMetadata":"1a8a7a6e"},"/illa-website/blog/tags/psql-b8a":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"013bc832"}],"tag":"3c0acf44","tags":"2bab37f9","listMetadata":"f4c983d1"},"/illa-website/blog/tags/react-45c":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"ed1472d5"},{"content":"bd8bbd45"},{"content":"88d8af9f"},{"content":"b6eb34d2"},{"content":"4a83e123"}],"tag":"81c7ed4e","tags":"2bab37f9","listMetadata":"125074f4"},"/illa-website/blog/tags/redis-bc9":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"eb5bf31c"}],"tag":"867c6dae","tags":"2bab37f9","listMetadata":"55af2e26"},"/illa-website/blog/tags/retool-170":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"4d8b029c"},{"content":"40c20836"},{"content":"050ff1a7"}],"tag":"57bece99","tags":"2bab37f9","listMetadata":"95cf3136"},"/illa-website/blog/tags/select-4fb":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"882e85dd"},{"content":"d3b7cf11"}],"tag":"8b794ce4","tags":"2bab37f9","listMetadata":"9f2e1456"},"/illa-website/blog/tags/shadcn-ui-459":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"88d8af9f"},{"content":"b6eb34d2"},{"content":"4a83e123"}],"tag":"5c73698d","tags":"2bab37f9","listMetadata":"f91124a1"},"/illa-website/blog/tags/slack-a62":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"03958142"}],"tag":"215a4d9d","tags":"2bab37f9","listMetadata":"8044da51"},"/illa-website/blog/tags/tables-b62":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"013bc832"}],"tag":"296b0df1","tags":"2bab37f9","listMetadata":"295047b8"},"/illa-website/blog/tags/tooljet-2bb":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"4d8b029c"},{"content":"40c20836"},{"content":"050ff1a7"}],"tag":"3217f671","tags":"2bab37f9","listMetadata":"bd532edd"},"/illa-website/blog/tags/tools-adc":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"cd038061"},{"content":"35e17217"},{"content":"912dc06b"},{"content":"eb5bf31c"}],"tag":"8aeb2ac2","tags":"2bab37f9","listMetadata":"663dba65"},"/illa-website/blog/tags/traditional-development-f03":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"5cd65baf"}],"tag":"012c936c","tags":"2bab37f9","listMetadata":"4486a1a1"},"/illa-website/blog/tags/typescript-824":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"557198aa"}],"tag":"b1a8b9de","tags":"2bab37f9","listMetadata":"aaf9fde8"},"/illa-website/blog/tags/ui-library-174":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"88d8af9f"},{"content":"4a83e123"}],"tag":"2f0deb5b","tags":"2bab37f9","listMetadata":"2a89cc7d"},"/illa-website/blog/tags/upwork-0a0":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"577b6af3"}],"tag":"f5d8a60d","tags":"2bab37f9","listMetadata":"22c43f24"},"/illa-website/blog/tags/webworker-5a5":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"03dad041"}],"tag":"cb84f714","tags":"2bab37f9","listMetadata":"7ac2b19c"},"/illa-website/blog/tags/workflow-ee0":{"__comp":"6875c492","__context":{"plugin":"fc0df049"},"items":[{"content":"1b46aaf4"},{"content":"03958142"},{"content":"e55440e4"}],"tag":"a936b21e","tags":"2bab37f9","listMetadata":"12ea746a"},"/illa-website/blog/the-best-tools-for-build-crud-applications-2aa":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"ceb37023"},"/illa-website/blog/tooljet-vs-appsmith-055":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"d3d78a2c"},"/illa-website/blog/tooljet-vs-retool-3e4":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"8a494e53"},"/illa-website/blog/top-5-best-open-source-low-code-platforms-in-2024-263":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"3dca0203"},"/illa-website/blog/top-7-database-guis-for-sql-databases-45f":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"3d113612"},"/illa-website/blog/top-7-redis-gui-tools-in-2023-36e":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"79c71fe4"},"/illa-website/blog/typescript-most-practical-features-compilation-57f":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"db485666"},"/illa-website/blog/web-worker-tutorial-0d9":{"__comp":"ccc49370","__context":{"plugin":"fc0df049"},"content":"0b153274"},"/illa-website/cms-026":{"__comp":"2864c10f","__context":{"plugin":"34d0e50f"},"content":"dbd7c721"},"/illa-website/components/-5b9":{"__comp":"188c27a7","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Audio/-f19":{"__comp":"83d2f18d","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/BarProgress/-771":{"__comp":"50cfa8ab","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Button/-de8":{"__comp":"49586834","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Carousel/-8c9":{"__comp":"a6b4f45f","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Cascader/-f17":{"__comp":"86953be1","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Chart/-d20":{"__comp":"4c3a04f4","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/CheckboxGroup/-2b3":{"__comp":"7f0a0f20","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/CircleProgress/-1f3":{"__comp":"46a49447","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Container/-d85":{"__comp":"bb9e3f22","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Date/-cfa":{"__comp":"deb5faec","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/DateRange/-c94":{"__comp":"25ffa5da","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/DateTime/-90f":{"__comp":"9f91eb4c","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Divider/-7f8":{"__comp":"03d60dda","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/EditableText/-77f":{"__comp":"5758dffb","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Form/-4f5":{"__comp":"3fee51a2","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Icon/-2b7":{"__comp":"6632b8cf","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Image/-81d":{"__comp":"c133d0bc","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Input/-d13":{"__comp":"1b97b52f","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/List/-b84":{"__comp":"0104b3a5","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Menu/-17f":{"__comp":"53015dc5","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Modal/-bb5":{"__comp":"25bbf118","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Multiselect/-7cb":{"__comp":"da1593ee","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/NumberInput/-549":{"__comp":"6b7903a8","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/PDF/-63e":{"__comp":"474ec535","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/RadioButton/-345":{"__comp":"8d9a9c02","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/RadioGroup/-988":{"__comp":"837d095b","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Rate/-a88":{"__comp":"be1d629d","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Select/-902":{"__comp":"56cbb393","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Statistics/-6e4":{"__comp":"03598c98","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Switch/-f6f":{"__comp":"01bd692b","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Tables/-5f6":{"__comp":"ca96679e","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Tabs/-e90":{"__comp":"30834002","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Text/-25a":{"__comp":"a9372106","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Textarea%20Input/-44d":{"__comp":"5ca6070c","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Timeline/-3ae":{"__comp":"7213c8c2","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Upload/-9a0":{"__comp":"e0cd9918","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/components/Video/-b95":{"__comp":"3d6ccfd0","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/crm-63f":{"__comp":"2864c10f","__context":{"plugin":"34d0e50f"},"content":"56108f26"},"/illa-website/dashboard-5ec":{"__comp":"2864c10f","__context":{"plugin":"34d0e50f"},"content":"67346627"},"/illa-website/illa-flow/-b60":{"__comp":"1704a5d7","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/image-generator-2aa":{"__comp":"2864c10f","__context":{"plugin":"34d0e50f"},"content":"0287bb30"},"/illa-website/integrations/-1e5":{"__comp":"d8096fab","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Airtable/-d53":{"__comp":"e4e1a4b6","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/AmazonDynamoDB/-c98":{"__comp":"589eda2e","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Appwrite/-5ea":{"__comp":"733df29f","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Clickhouse/-efd":{"__comp":"30da2238","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/CouchDB/-912":{"__comp":"4ac275c7","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/ElasticSearch/-697":{"__comp":"7d02bed8","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Firebase/-b8a":{"__comp":"f3cf1707","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/GoogleSheets/-ee9":{"__comp":"ca19ac91","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/GraphQL/-975":{"__comp":"927b8026","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/HuggingFaceInferenceAPI/-4d1":{"__comp":"a828f322","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/HuggingFaceInferenceEndpoint/-a72":{"__comp":"2937fddb","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Hydra/-cc5":{"__comp":"451bfe05","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/MariaDB/-53c":{"__comp":"7b91dc2c","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/MicrosoftSQLServer/-933":{"__comp":"2d1ec1f7","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/MongoDB/-640":{"__comp":"e015af33","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/MySQL/-59d":{"__comp":"45267849","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Neon/-fc8":{"__comp":"68c10dd5","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/OracleDB/-a32":{"__comp":"17fb53e2","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/PostgreSQL/-4b0":{"__comp":"38806fe8","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Redis/-acb":{"__comp":"890684bb","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/RESTAPI/-8d2":{"__comp":"921028f2","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/S3/-8f9":{"__comp":"6e91fee9","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/SMTP/-d8d":{"__comp":"ac92cbdc","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/Snowflake/-f29":{"__comp":"94161ec7","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/SupabaseDB/-ea8":{"__comp":"9de45a08","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/integrations/TiDB/-cfd":{"__comp":"41685197","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/pricing/-b2e":{"__comp":"279770d6","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"},"/illa-website/-113":{"__comp":"1df93b7f","__context":{"plugin":"34d0e50f"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[532],(()=>{return t=1136,e(e.s=t);var t}));e.O()}]);
\ No newline at end of file
+/*! For license information please see main.55d4a4cd.js.LICENSE.txt */
+(self.webpackChunkilla_website=self.webpackChunkilla_website||[]).push([[179],{1422:(e,t,n)=>{var a={"./":1884};function o(e){var t=i(e);return n(t)}function i(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=i,e.exports=o,o.id=1422},6002:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(959);var a=n(7558),o=n.n(a),i=n(6887);const r={"0104b3a5":[()=>Promise.all([n.e(532),n.e(4692),n.e(1205)]).then(n.bind(n,2048)),"@site/src/pages/components/List/index.tsx",2048],"012c936c":[()=>n.e(1383).then(n.t.bind(n,383,19)),"~blog/default/illa-website-blog-tags-traditional-development-b40.json",383],"013bc832":[()=>n.e(8293).then(n.bind(n,573)),"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md?truncated=true",573],"01a85c17":[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(4013)]).then(n.bind(n,5602)),"@theme/BlogTagsListPage",5602],"01bd692b":[()=>Promise.all([n.e(532),n.e(4692),n.e(8550)]).then(n.bind(n,9451)),"@site/src/pages/components/Switch/index.tsx",9451],"0287bb30":[()=>n.e(5357).then(n.bind(n,5399)),"@site/src/pages/solutions-image-generator.mdx",5399],"03598c98":[()=>Promise.all([n.e(532),n.e(4692),n.e(4530)]).then(n.bind(n,406)),"@site/src/pages/components/Statistics/index.tsx",406],"03958142":[()=>n.e(5479).then(n.bind(n,9372)),"@site/blog/automate-send-to-slack/automate-send-to-slack.md?truncated=true",9372],"03d60dda":[()=>Promise.all([n.e(532),n.e(4692),n.e(1618)]).then(n.bind(n,489)),"@site/src/pages/components/Divider/index.tsx",489],"03dad041":[()=>n.e(3815).then(n.bind(n,7909)),"@site/blog/web-worker-tutorial/web-worker-tutorial.md?truncated=true",7909],"045d4d91":[()=>n.e(326).then(n.bind(n,1404)),"@site/blog/best-citizen-developer-tool/best-citizen-developer-tool.md",1404],"050ff1a7":[()=>n.e(4651).then(n.bind(n,3541)),"@site/blog/tooljet-vs-retool/tooljet-vs-retool.md?truncated=true",3541],"09e4ef32":[()=>n.e(4934).then(n.t.bind(n,546,19)),"~blog/default/illa-website-blog-tags-list-171-list.json",546],"0b153274":[()=>n.e(6591).then(n.bind(n,5858)),"@site/blog/web-worker-tutorial/web-worker-tutorial.md",5858],"0d8e277f":[()=>n.e(6394).then(n.t.bind(n,7618,19)),"~blog/default/illa-website-blog-tags-gui-0ae-list.json",7618],"0dbcbd61":[()=>n.e(6524).then(n.t.bind(n,1755,19)),"~blog/default/illa-website-blog-tags-citizen-development-4cc-list.json",1755],"1096d3fa":[()=>n.e(4314).then(n.t.bind(n,2931,19)),"~blog/default/illa-website-blog-tags-isnotnull-9a7-list.json",2931],"11f28d89":[()=>n.e(7228).then(n.bind(n,5922)),"@site/blog/internal-tool/internal-tool.md?truncated=true",5922],"125074f4":[()=>n.e(7919).then(n.t.bind(n,1782,19)),"~blog/default/illa-website-blog-tags-react-a30-list.json",1782],"12ea746a":[()=>n.e(4321).then(n.t.bind(n,9326,19)),"~blog/default/illa-website-blog-tags-workflow-866-list.json",9326],"136b15b7":[()=>n.e(3383).then(n.t.bind(n,7654,19)),"~blog/default/illa-website-blog-tags-postgres-93f.json",7654],"1704a5d7":[()=>Promise.all([n.e(532),n.e(4692),n.e(5055),n.e(7596)]).then(n.bind(n,3135)),"@site/src/pages/illa-flow/index.tsx",3135],"17fb53e2":[()=>Promise.all([n.e(532),n.e(4692),n.e(4893)]).then(n.bind(n,2439)),"@site/src/pages/integrations/OracleDB/index.tsx",2439],"1842627e":[()=>n.e(5037).then(n.bind(n,2640)),"@site/blog/mui-2024/mui.md",2640],"188c27a7":[()=>Promise.all([n.e(532),n.e(4692),n.e(6921)]).then(n.bind(n,7108)),"@site/src/pages/components/index.tsx",7108],"1a8a7a6e":[()=>n.e(4272).then(n.t.bind(n,533,19)),"~blog/default/illa-website-blog-tags-postgresql-fa9-list.json",533],"1b46aaf4":[()=>n.e(7663).then(n.bind(n,7856)),"@site/blog/it-support/it-support.md?truncated=true",7856],"1b97b52f":[()=>Promise.all([n.e(532),n.e(4692),n.e(2833)]).then(n.bind(n,7880)),"@site/src/pages/components/Input/index.tsx",7880],"1d9dae67":[()=>n.e(4630).then(n.t.bind(n,8064,19)),"~blog/default/illa-website-blog-tags-javascript-8bf-list.json",8064],"1df93b7f":[()=>Promise.all([n.e(532),n.e(4692),n.e(5708),n.e(3237)]).then(n.bind(n,7919)),"@site/src/pages/index.tsx",7919],"1e617043":[()=>n.e(5024).then(n.t.bind(n,5717,19)),"~blog/default/illa-website-blog-tags-mac-7c4.json",5717],"215a4d9d":[()=>n.e(6729).then(n.t.bind(n,2315,19)),"~blog/default/illa-website-blog-tags-slack-fd6.json",2315],"21c37781":[()=>n.e(7740).then(n.t.bind(n,8416,19)),"~blog/default/illa-website-blog-tags-automate-e37-list.json",8416],"22c43f24":[()=>n.e(2929).then(n.t.bind(n,6569,19)),"~blog/default/illa-website-blog-tags-upwork-ad3-list.json",6569],"25bbf118":[()=>Promise.all([n.e(532),n.e(4692),n.e(7277)]).then(n.bind(n,5013)),"@site/src/pages/components/Modal/index.tsx",5013],"25c2fb8d":[()=>n.e(2388).then(n.t.bind(n,2063,19)),"~blog/default/illa-website-blog-tags-gui-0ae.json",2063],"25ffa5da":[()=>Promise.all([n.e(532),n.e(4692),n.e(4417)]).then(n.bind(n,716)),"@site/src/pages/components/DateRange/index.tsx",716],"26b5cf84":[()=>n.e(3962).then(n.t.bind(n,7579,19)),"~blog/default/illa-website-blog-tags-library-35c.json",7579],"279770d6":[()=>Promise.all([n.e(532),n.e(4692),n.e(7654)]).then(n.bind(n,6829)),"@site/src/pages/pricing/index.tsx",6829],"2864c10f":[()=>Promise.all([n.e(532),n.e(4692),n.e(5923),n.e(3807)]).then(n.bind(n,3712)),"@theme/SolutionsPage",3712],"2937fddb":[()=>Promise.all([n.e(532),n.e(4692),n.e(7559)]).then(n.bind(n,5430)),"@site/src/pages/integrations/HuggingFaceInferenceEndpoint/index.tsx",5430],"295047b8":[()=>n.e(9282).then(n.t.bind(n,9725,19)),"~blog/default/illa-website-blog-tags-tables-53a-list.json",9725],"296b0df1":[()=>n.e(1328).then(n.t.bind(n,7516,19)),"~blog/default/illa-website-blog-tags-tables-53a.json",7516],"2a89cc7d":[()=>n.e(4131).then(n.t.bind(n,5333,19)),"~blog/default/illa-website-blog-tags-ui-library-318-list.json",5333],"2bab37f9":[()=>n.e(8563).then(n.t.bind(n,7859,19)),"~blog/default/illa-website-blog-tags-tags-0b0.json",7859],"2d1ec1f7":[()=>Promise.all([n.e(532),n.e(4692),n.e(4664)]).then(n.bind(n,9400)),"@site/src/pages/integrations/MicrosoftSQLServer/index.tsx",9400],"2f0deb5b":[()=>n.e(3988).then(n.t.bind(n,4916,19)),"~blog/default/illa-website-blog-tags-ui-library-318.json",4916],"302c1f6e":[()=>n.e(2338).then(n.t.bind(n,2996,19)),"~blog/default/illa-website-blog-tags-fiverr-37f-list.json",2996],30834002:[()=>Promise.all([n.e(532),n.e(4692),n.e(7949)]).then(n.bind(n,2150)),"@site/src/pages/components/Tabs/index.tsx",2150],"30da2238":[()=>Promise.all([n.e(532),n.e(4692),n.e(7906)]).then(n.bind(n,7201)),"@site/src/pages/integrations/Clickhouse/index.tsx",7201],31168439:[()=>n.e(7346).then(n.t.bind(n,925,19)),"~blog/default/illa-website-blog-tags-database-931-list.json",925],"31eafaf9":[()=>n.e(3581).then(n.bind(n,2040)),"@site/blog/shadcn-ui-vs-mui/shadcn-ui-vs-mui.md",2040],"3217f671":[()=>n.e(6455).then(n.t.bind(n,1795,19)),"~blog/default/illa-website-blog-tags-tooljet-356.json",1795],"32e52b4a":[()=>n.e(218).then(n.t.bind(n,7938,19)),"~blog/default/illa-website-blog-tags-isnotnull-9a7.json",7938],"3398d68b":[()=>n.e(4114).then(n.t.bind(n,2727,19)),"~blog/default/illa-website-blog-tags-crud-a07.json",2727],"34d0e50f":[()=>n.e(5385).then(n.t.bind(n,5745,19)),"/home/runner/work/illa-website/illa-website/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"354dfbd1":[()=>n.e(8248).then(n.bind(n,5209)),"@site/blog/top5-low-code-2024/top5-low-code-2024.md?truncated=true",5209],"35e17217":[()=>n.e(5290).then(n.bind(n,7680)),"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md?truncated=true",7680],"38806fe8":[()=>Promise.all([n.e(532),n.e(4692),n.e(9248)]).then(n.bind(n,7179)),"@site/src/pages/integrations/PostgreSQL/index.tsx",7179],"3ae00f65":[()=>n.e(916).then(n.t.bind(n,6083,19)),"~blog/default/illa-website-blog-tags-internal-tools-465.json",6083],"3c0acf44":[()=>n.e(9348).then(n.t.bind(n,6987,19)),"~blog/default/illa-website-blog-tags-psql-ade.json",6987],"3d113612":[()=>n.e(1819).then(n.bind(n,7102)),"@site/blog/top-7-database-guis-for-sql-databases/top-7-database-guis-for-sql-databases.md",7102],"3d6ccfd0":[()=>Promise.all([n.e(532),n.e(4692),n.e(7543)]).then(n.bind(n,2667)),"@site/src/pages/components/Video/index.tsx",2667],"3dca0203":[()=>n.e(5694).then(n.bind(n,1077)),"@site/blog/top5-low-code-2024/top5-low-code-2024.md",1077],"3fee51a2":[()=>Promise.all([n.e(532),n.e(4692),n.e(7155)]).then(n.bind(n,2974)),"@site/src/pages/components/Form/index.tsx",2974],"40c20836":[()=>n.e(2391).then(n.bind(n,3490)),"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md?truncated=true",3490],41685197:[()=>Promise.all([n.e(532),n.e(4692),n.e(4610)]).then(n.bind(n,3608)),"@site/src/pages/integrations/TiDB/index.tsx",3608],"4486a1a1":[()=>n.e(2657).then(n.t.bind(n,3527,19)),"~blog/default/illa-website-blog-tags-traditional-development-b40-list.json",3527],"451bfe05":[()=>Promise.all([n.e(532),n.e(4692),n.e(5162)]).then(n.bind(n,780)),"@site/src/pages/integrations/Hydra/index.tsx",780],45267849:[()=>Promise.all([n.e(532),n.e(4692),n.e(2136)]).then(n.bind(n,7417)),"@site/src/pages/integrations/MySQL/index.tsx",7417],"46a49447":[()=>Promise.all([n.e(532),n.e(4692),n.e(4771)]).then(n.bind(n,2208)),"@site/src/pages/components/CircleProgress/index.tsx",2208],"474ec535":[()=>Promise.all([n.e(532),n.e(4692),n.e(1055)]).then(n.bind(n,3886)),"@site/src/pages/components/PDF/index.tsx",3886],49586834:[()=>Promise.all([n.e(532),n.e(4692),n.e(852)]).then(n.bind(n,8292)),"@site/src/pages/components/Button/index.tsx",8292],"4a61f11b":[()=>n.e(9699).then(n.bind(n,1483)),"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md",1483],"4a83e123":[()=>n.e(6137).then(n.bind(n,8506)),"@site/blog/shadcn-ui-vs-mui/shadcn-ui-vs-mui.md?truncated=true",8506],"4ac275c7":[()=>Promise.all([n.e(532),n.e(4692),n.e(1679)]).then(n.bind(n,9098)),"@site/src/pages/integrations/CouchDB/index.tsx",9098],"4bb82d9d":[()=>n.e(9728).then(n.t.bind(n,5920,19)),"~blog/default/illa-website-blog-tags-low-code-crm-d49-list.json",5920],"4c3a04f4":[()=>Promise.all([n.e(532),n.e(4692),n.e(2578)]).then(n.bind(n,8532)),"@site/src/pages/components/Chart/index.tsx",8532],"4d8b029c":[()=>n.e(7465).then(n.bind(n,2983)),"@site/blog/appsmith-vs-retool/appsmith-vs-retool.md?truncated=true",2983],"4fb9e68b":[()=>n.e(2361).then(n.bind(n,4133)),"@site/blog/core-app-dashboard/core-app-dashboard.md?truncated=true",4133],"50cfa8ab":[()=>Promise.all([n.e(532),n.e(4692),n.e(9788)]).then(n.bind(n,7779)),"@site/src/pages/components/BarProgress/index.tsx",7779],"521f732f":[()=>n.e(875).then(n.t.bind(n,4299,19)),"~blog/default/illa-website-blog-tags-crud-a07-list.json",4299],"53015dc5":[()=>Promise.all([n.e(532),n.e(4692),n.e(8962)]).then(n.bind(n,4118)),"@site/src/pages/components/Menu/index.tsx",4118],"557198aa":[()=>n.e(4682).then(n.bind(n,7877)),"@site/blog/typescript-most-practical-features-compilation/typescript-most-practical-features-compilation.md?truncated=true",7877],"55813e94":[()=>n.e(8135).then(n.bind(n,8847)),"@site/blog/postgresql-select/postgresql-select.md",8847],"55af2e26":[()=>n.e(4030).then(n.t.bind(n,139,19)),"~blog/default/illa-website-blog-tags-redis-1fd-list.json",139],"56108f26":[()=>n.e(2841).then(n.bind(n,2291)),"@site/src/pages/solutions-crm.mdx",2291],"56cbb393":[()=>Promise.all([n.e(532),n.e(4692),n.e(7050)]).then(n.bind(n,4515)),"@site/src/pages/components/Select/index.tsx",4515],"5758dffb":[()=>Promise.all([n.e(532),n.e(4692),n.e(9982)]).then(n.bind(n,5421)),"@site/src/pages/components/EditableText/index.tsx",5421],"577b6af3":[()=>n.e(4669).then(n.bind(n,7575)),"@site/blog/boost-freelancer/boost-freelancer.md?truncated=true",7575],"57bece99":[()=>n.e(3570).then(n.t.bind(n,813,19)),"~blog/default/illa-website-blog-tags-retool-7ff.json",813],"589eda2e":[()=>Promise.all([n.e(532),n.e(4692),n.e(4556)]).then(n.bind(n,1566)),"@site/src/pages/integrations/AmazonDynamoDB/index.tsx",1566],"5a2987c2":[()=>n.e(3906).then(n.t.bind(n,3234,19)),"~blog/default/illa-website-blog-page-3-8f1.json",3234],"5c73698d":[()=>n.e(3625).then(n.t.bind(n,451,19)),"~blog/default/illa-website-blog-tags-shadcn-ui-69b.json",451],"5ca6070c":[()=>Promise.all([n.e(532),n.e(4692),n.e(2056)]).then(n.bind(n,5462)),"@site/src/pages/components/Textarea Input/index.tsx",5462],"5cd65baf":[()=>n.e(9239).then(n.bind(n,9590)),"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md?truncated=true",9590],"5d55e09c":[()=>n.e(6939).then(n.bind(n,860)),"@site/blog/raect-markdown/react-markdown.md",860],"5da532a1":[()=>n.e(8176).then(n.t.bind(n,2471,19)),"~blog/default/illa-website-blog-tags-core-app-dashboard-d97.json",2471],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5f78ec6a":[()=>n.e(3096).then(n.bind(n,2369)),"@site/blog/nvm-use/nvm-use.md",2369],"65f8b696":[()=>n.e(6567).then(n.t.bind(n,1321,19)),"~blog/default/illa-website-blog-tags-freelancer-c9a-list.json",1321],"6632b8cf":[()=>Promise.all([n.e(532),n.e(4692),n.e(9090)]).then(n.bind(n,786)),"@site/src/pages/components/Icon/index.tsx",786],"663dba65":[()=>n.e(1457).then(n.t.bind(n,4171,19)),"~blog/default/illa-website-blog-tags-tools-9e4-list.json",4171],67346627:[()=>n.e(4423).then(n.bind(n,6082)),"@site/src/pages/solutions-dashboard.mdx",6082],"6875c492":[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(8610)]).then(n.bind(n,2304)),"@theme/BlogTagsPostsPage",2304],"68c10dd5":[()=>Promise.all([n.e(532),n.e(4692),n.e(2714)]).then(n.bind(n,5886)),"@site/src/pages/integrations/Neon/index.tsx",5886],"6b7903a8":[()=>Promise.all([n.e(532),n.e(4692),n.e(9324)]).then(n.bind(n,3564)),"@site/src/pages/components/NumberInput/index.tsx",3564],"6d69edbe":[()=>n.e(8876).then(n.bind(n,5391)),"@site/blog/nvm-use/nvm-use.md?truncated=true",5391],"6e91fee9":[()=>Promise.all([n.e(532),n.e(4692),n.e(856)]).then(n.bind(n,2368)),"@site/src/pages/integrations/S3/index.tsx",2368],"718613d7":[()=>n.e(5775).then(n.t.bind(n,2682,19)),"~blog/default/illa-website-blog-tags-postgres-93f-list.json",2682],"7213c8c2":[()=>Promise.all([n.e(532),n.e(4692),n.e(3045)]).then(n.bind(n,9219)),"@site/src/pages/components/Timeline/index.tsx",9219],"72d3bf7a":[()=>n.e(4808).then(n.bind(n,2685)),"@site/blog/lowcode-vs-traditional/lowcode-vs-traditional.md",2685],"733df29f":[()=>Promise.all([n.e(532),n.e(4692),n.e(8151)]).then(n.bind(n,3538)),"@site/src/pages/integrations/Appwrite/index.tsx",3538],"745ae684":[()=>n.e(1027).then(n.bind(n,6122)),"@site/blog/launch-flow/launch-flow.md",6122],"79c71fe4":[()=>n.e(2581).then(n.bind(n,618)),"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md",618],"7ac2b19c":[()=>n.e(2223).then(n.t.bind(n,350,19)),"~blog/default/illa-website-blog-tags-webworker-ced-list.json",350],"7b91dc2c":[()=>Promise.all([n.e(532),n.e(4692),n.e(7448)]).then(n.bind(n,5764)),"@site/src/pages/integrations/MariaDB/index.tsx",5764],"7d02bed8":[()=>Promise.all([n.e(532),n.e(4692),n.e(7832)]).then(n.bind(n,9840)),"@site/src/pages/integrations/ElasticSearch/index.tsx",9840],"7d62b9db":[()=>n.e(8741).then(n.t.bind(n,7471,19)),"~blog/default/illa-website-blog-tags-open-source-184-list.json",7471],"7d74c426":[()=>n.e(4580).then(n.t.bind(n,2463,19)),"~blog/default/illa-website-blog-tags-component-29b.json",2463],"7dda7093":[()=>n.e(8518).then(n.bind(n,2860)),"@site/blog/low-code-crm/low-code-crm.md?truncated=true",2860],"7f0a0f20":[()=>Promise.all([n.e(532),n.e(4692),n.e(2377)]).then(n.bind(n,5092)),"@site/src/pages/components/CheckboxGroup/index.tsx",5092],"8044da51":[()=>n.e(9785).then(n.t.bind(n,9612,19)),"~blog/default/illa-website-blog-tags-slack-fd6-list.json",9612],"81c7ed4e":[()=>n.e(500).then(n.t.bind(n,9344,19)),"~blog/default/illa-website-blog-tags-react-a30.json",9344],"837d095b":[()=>Promise.all([n.e(532),n.e(4692),n.e(9211)]).then(n.bind(n,8824)),"@site/src/pages/components/RadioGroup/index.tsx",8824],"83d2f18d":[()=>Promise.all([n.e(532),n.e(4692),n.e(4638)]).then(n.bind(n,6398)),"@site/src/pages/components/Audio/index.tsx",6398],"85ec1940":[()=>n.e(5158).then(n.t.bind(n,5551,19)),"~blog/default/illa-website-blog-tags-ai-e58.json",5551],"867c6dae":[()=>n.e(7475).then(n.t.bind(n,9566,19)),"~blog/default/illa-website-blog-tags-redis-1fd.json",9566],"86953be1":[()=>Promise.all([n.e(532),n.e(4692),n.e(6510)]).then(n.bind(n,7072)),"@site/src/pages/components/Cascader/index.tsx",7072],"86a054dc":[()=>n.e(9847).then(n.bind(n,17)),"@site/blog/react-error-boundary/react-error-boundary.md",17],"882e85dd":[()=>n.e(6411).then(n.bind(n,4850)),"@site/blog/raect-markdown/react-markdown.md?truncated=true",4850],"88d8af9f":[()=>n.e(5038).then(n.bind(n,9129)),"@site/blog/mui-2024/mui.md?truncated=true",9129],"890684bb":[()=>Promise.all([n.e(532),n.e(4692),n.e(3883)]).then(n.bind(n,9917)),"@site/src/pages/integrations/Redis/index.tsx",9917],"8a494e53":[()=>n.e(2270).then(n.bind(n,3443)),"@site/blog/tooljet-vs-retool/tooljet-vs-retool.md",3443],"8aeb2ac2":[()=>n.e(2065).then(n.t.bind(n,5377,19)),"~blog/default/illa-website-blog-tags-tools-9e4.json",5377],"8b794ce4":[()=>n.e(6913).then(n.t.bind(n,9023,19)),"~blog/default/illa-website-blog-tags-select-a2f.json",9023],"8d9a9c02":[()=>Promise.all([n.e(532),n.e(4692),n.e(3265)]).then(n.bind(n,3893)),"@site/src/pages/components/RadioButton/index.tsx",3893],"8f1e5e50":[()=>n.e(8916).then(n.bind(n,2892)),"@site/blog/react-component-library/react-component-library.md",2892],"912dc06b":[()=>n.e(4501).then(n.bind(n,3507)),"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md?truncated=true",3507],"921028f2":[()=>Promise.all([n.e(532),n.e(4692),n.e(8922)]).then(n.bind(n,4108)),"@site/src/pages/integrations/RESTAPI/index.tsx",4108],"927b8026":[()=>Promise.all([n.e(532),n.e(4692),n.e(1414)]).then(n.bind(n,4882)),"@site/src/pages/integrations/GraphQL/index.tsx",4882],"94161ec7":[()=>Promise.all([n.e(532),n.e(4692),n.e(1845)]).then(n.bind(n,8521)),"@site/src/pages/integrations/Snowflake/index.tsx",8521],"94bc8583":[()=>n.e(9506).then(n.t.bind(n,6786,19)),"~blog/default/illa-website-blog-tags-postgresql-fa9.json",6786],"95cf3136":[()=>n.e(1774).then(n.t.bind(n,9251,19)),"~blog/default/illa-website-blog-tags-retool-7ff-list.json",9251],96447363:[()=>n.e(9713).then(n.bind(n,6100)),"@site/blog/build-dashboard/build-dashboard.md",6100],"9784bb0b":[()=>n.e(6057).then(n.t.bind(n,2759,19)),"~blog/default/illa-website-blog-tags-nodejs-05c-list.json",2759],"995fa2e5":[()=>n.e(4595).then(n.t.bind(n,1440,19)),"~blog/default/illa-website-blog-tags-nvm-1de.json",1440],"9b2435a1":[()=>n.e(2938).then(n.t.bind(n,1142,19)),"~blog/default/illa-website-blog-tags-component-29b-list.json",1142],"9c6dc03d":[()=>n.e(3327).then(n.bind(n,4441)),"@site/blog/automate-send-to-slack/automate-send-to-slack.md",4441],"9de45a08":[()=>Promise.all([n.e(532),n.e(4692),n.e(4640)]).then(n.bind(n,7582)),"@site/src/pages/integrations/SupabaseDB/index.tsx",7582],"9ee4bd2d":[()=>n.e(3986).then(n.t.bind(n,8601,19)),"~blog/default/illa-website-blog-tags-isnull-4d8.json",8601],"9f2e1456":[()=>n.e(5164).then(n.t.bind(n,2756,19)),"~blog/default/illa-website-blog-tags-select-a2f-list.json",2756],"9f91eb4c":[()=>Promise.all([n.e(532),n.e(4692),n.e(6290)]).then(n.bind(n,3668)),"@site/src/pages/components/DateTime/index.tsx",3668],"9f9623bc":[()=>n.e(451).then(n.t.bind(n,8337,19)),"~blog/default/illa-website-blog-tags-citizen-developer-tool-de7.json",8337],a13312d4:[()=>n.e(2354).then(n.t.bind(n,806,19)),"~blog/default/illa-website-blog-tags-appsmith-548.json",806],a15fa1d1:[()=>n.e(7956).then(n.t.bind(n,316,19)),"~blog/default/illa-website-blog-tags-fiverr-37f.json",316],a1d5db4a:[()=>n.e(4363).then(n.t.bind(n,252,19)),"~blog/default/illa-website-blog-9c2.json",252],a48c94eb:[()=>n.e(8347).then(n.bind(n,9261)),"@site/blog/postgresql-isnull/postgresql-isnull.md",9261],a4ae0aea:[()=>n.e(668).then(n.t.bind(n,8799,19)),"~blog/default/illa-website-blog-tags-core-app-dashboard-d97-list.json",8799],a6aa9e1f:[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(3089)]).then(n.bind(n,6336)),"@theme/BlogListPage",6336],a6b4f45f:[()=>Promise.all([n.e(532),n.e(4692),n.e(3102)]).then(n.bind(n,9967)),"@site/src/pages/components/Carousel/index.tsx",9967],a7999644:[()=>n.e(3481).then(n.t.bind(n,6863,19)),"~blog/default/illa-website-blog-tags-data-dashboard-0e2.json",6863],a828f322:[()=>Promise.all([n.e(532),n.e(4692),n.e(8891)]).then(n.bind(n,9216)),"@site/src/pages/integrations/HuggingFaceInferenceAPI/index.tsx",9216],a8a01fb0:[()=>n.e(470).then(n.t.bind(n,347,19)),"~blog/default/illa-website-blog-tags-admin-panel-26e-list.json",347],a936b21e:[()=>n.e(5832).then(n.t.bind(n,246,19)),"~blog/default/illa-website-blog-tags-workflow-866.json",246],a9372106:[()=>Promise.all([n.e(532),n.e(4692),n.e(1777)]).then(n.bind(n,7134)),"@site/src/pages/components/Text/index.tsx",7134],a9f9d9a3:[()=>n.e(5431).then(n.bind(n,4479)),"@site/src/pages/solutions-admin-panel.mdx",4479],aaf9fde8:[()=>n.e(2451).then(n.t.bind(n,5365,19)),"~blog/default/illa-website-blog-tags-typescript-9a3-list.json",5365],ac92cbdc:[()=>Promise.all([n.e(532),n.e(4692),n.e(5378)]).then(n.bind(n,5501)),"@site/src/pages/integrations/SMTP/index.tsx",5501],ae1f131a:[()=>n.e(208).then(n.t.bind(n,6297,19)),"~blog/default/illa-website-blog-tags-automate-e37.json",6297],aead6cc5:[()=>n.e(5994).then(n.t.bind(n,4572,19)),"~blog/default/illa-website-blog-tags-low-code-crm-d49.json",4572],b0677628:[()=>n.e(7844).then(n.bind(n,7074)),"@site/src/pages/solutions-ai-voice-generator.mdx",7074],b1a8b9de:[()=>n.e(3819).then(n.t.bind(n,4847,19)),"~blog/default/illa-website-blog-tags-typescript-9a3.json",4847],b3f0800c:[()=>n.e(4225).then(n.t.bind(n,5665,19)),"~blog/default/illa-website-blog-tags-nvm-1de-list.json",5665],b4cd1370:[()=>n.e(3927).then(n.t.bind(n,9471,19)),"~blog/default/illa-website-blog-tags-low-code-931-list.json",9471],b6eb34d2:[()=>n.e(5191).then(n.bind(n,5067)),"@site/blog/shadcn-ui-2024/shadcn-ui-2024.md?truncated=true",5067],baa7cbb5:[()=>n.e(6697).then(n.t.bind(n,1655,19)),"~blog/default/illa-website-blog-tags-citizen-developer-tool-de7-list.json",1655],bac88092:[()=>n.e(912).then(n.t.bind(n,5829,19)),"~blog/default/illa-website-blog-tags-freelancer-c9a.json",5829],bb85b74d:[()=>n.e(5938).then(n.bind(n,576)),"@site/blog/build-dashboard/build-dashboard.md?truncated=true",576],bb9e3f22:[()=>Promise.all([n.e(532),n.e(4692),n.e(5118)]).then(n.bind(n,4980)),"@site/src/pages/components/Container/index.tsx",4980],bd532edd:[()=>n.e(6870).then(n.t.bind(n,2624,19)),"~blog/default/illa-website-blog-tags-tooljet-356-list.json",2624],bd8bbd45:[()=>n.e(2852).then(n.bind(n,2747)),"@site/blog/react-component-library/react-component-library.md?truncated=true",2747],be1d629d:[()=>Promise.all([n.e(532),n.e(4692),n.e(545)]).then(n.bind(n,3563)),"@site/src/pages/components/Rate/index.tsx",3563],be40e9ec:[()=>n.e(3157).then(n.bind(n,4654)),"@site/blog/list-tables-in-postgresql/list-tables-in-postgresql.md",4654],bea50343:[()=>n.e(2934).then(n.t.bind(n,4758,19)),"~blog/default/illa-website-blog-tags-freelance-8d5-list.json",4758],bfab3385:[()=>n.e(7477).then(n.t.bind(n,7477,19)),"~blog/default/illa-website-blog-tags-citizen-development-4cc.json",7477],c133d0bc:[()=>Promise.all([n.e(532),n.e(4692),n.e(7746)]).then(n.bind(n,1814)),"@site/src/pages/components/Image/index.tsx",1814],c1d2b2d8:[()=>n.e(1316).then(n.bind(n,495)),"@site/blog/it-support/it-support.md",495],c2768d7e:[()=>n.e(7250).then(n.t.bind(n,8410,19)),"~blog/default/illa-website-blog-tags-ai-e58-list.json",8410],c3ae7b0b:[()=>n.e(8953).then(n.t.bind(n,8468,19)),"~blog/default/illa-website-blog-tags-citizen-developer-cb1-list.json",8468],c45d4b28:[()=>n.e(850).then(n.t.bind(n,5884,19)),"~blog/default/illa-website-blog-tags-low-code-931.json",5884],ca19ac91:[()=>Promise.all([n.e(532),n.e(4692),n.e(7612)]).then(n.bind(n,7690)),"@site/src/pages/integrations/GoogleSheets/index.tsx",7690],ca96679e:[()=>Promise.all([n.e(532),n.e(4692),n.e(2031)]).then(n.bind(n,5014)),"@site/src/pages/components/Tables/index.tsx",5014],cb84f714:[()=>n.e(8170).then(n.t.bind(n,3960,19)),"~blog/default/illa-website-blog-tags-webworker-ced.json",3960],cbbdd979:[()=>n.e(3228).then(n.bind(n,5173)),"@site/blog/best-low-code-platform/best-low-code-platform.md",5173],ccc49370:[()=>Promise.all([n.e(532),n.e(4692),n.e(2316),n.e(5923),n.e(4809),n.e(6103)]).then(n.bind(n,9466)),"@theme/BlogPostPage",9466],cd038061:[()=>n.e(9993).then(n.bind(n,4122)),"@site/blog/build-ai-tools/build-ai-tools.md?truncated=true",4122],cd0cf34d:[()=>n.e(2904).then(n.t.bind(n,4381,19)),"~blog/default/illa-website-blog-tags-nodejs-05c.json",4381],ceb37023:[()=>n.e(4425).then(n.bind(n,8704)),"@site/blog/the-best-tools-for-build-crud-applications/the-best-tools-for-build-crud-applications.md",8704],ceba9a17:[()=>n.e(5840).then(n.bind(n,5571)),"@site/blog/boost-freelancer/boost-freelancer.md",5571],cf2425b1:[()=>n.e(5330).then(n.bind(n,9393)),"@site/blog/postgresql-isnull/postgresql-isnull.md?truncated=true",9393],d37b0cd5:[()=>n.e(2075).then(n.bind(n,4565)),"@site/blog/core-app-dashboard/core-app-dashboard.md",4565],d3b7cf11:[()=>n.e(2525).then(n.bind(n,9551)),"@site/blog/postgresql-select/postgresql-select.md?truncated=true",9551],d3d78a2c:[()=>n.e(3934).then(n.bind(n,686)),"@site/blog/tooljet-vs-appsmith/tooljet-vs-appsmith.md",686],d8096fab:[()=>Promise.all([n.e(532),n.e(4692),n.e(6828)]).then(n.bind(n,3769)),"@site/src/pages/integrations/index.tsx",3769],d87f99a5:[()=>n.e(5767).then(n.bind(n,4899)),"@site/blog/best-citizen-developer-tool/best-citizen-developer-tool.md?truncated=true",4899],da1593ee:[()=>Promise.all([n.e(532),n.e(4692),n.e(9321)]).then(n.bind(n,1086)),"@site/src/pages/components/Multiselect/index.tsx",1086],da530276:[()=>n.e(1012).then(n.t.bind(n,7274,19)),"~blog/default/illa-website-blog-tags-admin-panel-26e.json",7274],db07c19c:[()=>n.e(3008).then(n.t.bind(n,3380,19)),"~blog/default/illa-website-blog-tags-freelance-8d5.json",3380],db485666:[()=>n.e(7929).then(n.bind(n,3120)),"@site/blog/typescript-most-practical-features-compilation/typescript-most-practical-features-compilation.md",3120],dbd7c721:[()=>n.e(4179).then(n.bind(n,3671)),"@site/src/pages/solutions-cms.mdx",3671],dcf8da52:[()=>n.e(4851).then(n.t.bind(n,9969,19)),"~blog/default/illa-website-blog-tags-mac-7c4-list.json",9969],dd8552f0:[()=>n.e(1822).then(n.t.bind(n,113,19)),"~blog/default/illa-website-blog-tags-isnull-4d8-list.json",113],dd95d1fb:[()=>n.e(2987).then(n.t.bind(n,314,19)),"~blog/default/illa-website-blog-tags-open-source-184.json",314],deb5faec:[()=>Promise.all([n.e(532),n.e(4692),n.e(2224)]).then(n.bind(n,320)),"@site/src/pages/components/Date/index.tsx",320],df2cf251:[()=>n.e(3903).then(n.t.bind(n,8959,19)),"~blog/default/illa-website-blog-tags-citizen-developer-cb1.json",8959],dfe72411:[()=>n.e(8704).then(n.t.bind(n,8470,19)),"~blog/default/illa-website-blog-tags-javascript-8bf.json",8470],e015af33:[()=>Promise.all([n.e(532),n.e(4692),n.e(8595)]).then(n.bind(n,7818)),"@site/src/pages/integrations/MongoDB/index.tsx",7818],e0cd9918:[()=>Promise.all([n.e(532),n.e(4692),n.e(8155)]).then(n.bind(n,4855)),"@site/src/pages/components/Upload/index.tsx",4855],e20c763e:[()=>n.e(7599).then(n.bind(n,8311)),"@site/blog/backend-create-web-ui/backend-create-web-ui.md?truncated=true",8311],e4e1a4b6:[()=>Promise.all([n.e(532),n.e(4692),n.e(8296)]).then(n.bind(n,5586)),"@site/src/pages/integrations/Airtable/index.tsx",5586],e55440e4:[()=>n.e(3845).then(n.bind(n,3610)),"@site/blog/launch-flow/launch-flow.md?truncated=true",3610],e765f05a:[()=>n.e(7272).then(n.bind(n,26)),"@site/blog/backend-create-web-ui/backend-create-web-ui.md",26],eb5bf31c:[()=>n.e(757).then(n.bind(n,4339)),"@site/blog/top-7-redis-gui-tools-in-2023/top-7-redis-gui-tools-in-2023.md?truncated=true",4339],ec7f9948:[()=>n.e(8987).then(n.bind(n,258)),"@site/blog/build-ai-tools/build-ai-tools.md",258],ed1472d5:[()=>n.e(2186).then(n.bind(n,7674)),"@site/blog/react-error-boundary/react-error-boundary.md?truncated=true",7674],ed70cb03:[()=>n.e(8431).then(n.t.bind(n,3494,19)),"~blog/default/illa-website-blog-tags-appsmith-548-list.json",3494],ee6f64f3:[()=>n.e(8345).then(n.t.bind(n,7925,19)),"~blog/default/illa-website-blog-tags-data-dashboard-0e2-list.json",7925],f20664df:[()=>n.e(6355).then(n.bind(n,8804)),"@site/blog/internal-tool/internal-tool.md",8804],f3cf1707:[()=>Promise.all([n.e(532),n.e(4692),n.e(3072)]).then(n.bind(n,109)),"@site/src/pages/integrations/Firebase/index.tsx",109],f4c983d1:[()=>n.e(9691).then(n.t.bind(n,7298,19)),"~blog/default/illa-website-blog-tags-psql-ade-list.json",7298],f5d8a60d:[()=>n.e(2772).then(n.t.bind(n,3836,19)),"~blog/default/illa-website-blog-tags-upwork-ad3.json",3836],f6bab244:[()=>n.e(2471).then(n.t.bind(n,6504,19)),"~blog/default/illa-website-blog-tags-database-931.json",6504],f7394536:[()=>n.e(9523).then(n.bind(n,4034)),"@site/blog/low-code-crm/low-code-crm.md",4034],f79a3b75:[()=>n.e(8767).then(n.t.bind(n,4215,19)),"~blog/default/illa-website-blog-tags-library-35c-list.json",4215],f8cc4e92:[()=>n.e(164).then(n.bind(n,5330)),"@site/blog/appsmith-vs-retool/appsmith-vs-retool.md",5330],f91124a1:[()=>n.e(7432).then(n.t.bind(n,6010,19)),"~blog/default/illa-website-blog-tags-shadcn-ui-69b-list.json",6010],f959b7ea:[()=>n.e(1287).then(n.t.bind(n,3188,19)),"~blog/default/illa-website-blog-page-2-e38.json",3188],f9d68572:[()=>n.e(8070).then(n.bind(n,8294)),"@site/blog/best-low-code-platform/best-low-code-platform.md?truncated=true",8294],fad6e022:[()=>n.e(4757).then(n.t.bind(n,7355,19)),"~blog/default/illa-website-blog-tags-internal-tools-465-list.json",7355],fc0df049:[()=>n.e(5315).then(n.t.bind(n,4469,19)),"/home/runner/work/illa-website/illa-website/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",4469],fd0dac06:[()=>n.e(7209).then(n.t.bind(n,3228,19)),"~blog/default/illa-website-blog-tags-list-171.json",3228]};var l=n(1527);function s(e){let{error:t,retry:n,pastDelay:a}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):a?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(4420),u=n(2762);function d(e,t){if("*"===e)return o()({loading:s,loader:()=>Promise.all([n.e(532),n.e(4692),n.e(8245)]).then(n.bind(n,8245)),modules:["@theme/NotFound"],webpack:()=>[8245],render(e,t){const n=e.default;return(0,l.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const a=i[`${e}-${t}`],d={},p=[],g=[],f=(0,c.Z)(a);return Object.entries(f).forEach((e=>{let[t,n]=e;const a=r[n];a&&(d[t]=a[0],p.push(a[1]),g.push(a[2]))})),o().Map({loading:s,loader:d,modules:p,webpack:()=>g,render(t,n){const o=JSON.parse(JSON.stringify(a));Object.entries(t).forEach((t=>{let[n,a]=t;const i=a.default;if(!i)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof i&&"function"!=typeof i||Object.keys(a).filter((e=>"default"!==e)).forEach((e=>{i[e]=a[e]}));let r=o;const l=n.split(".");l.slice(0,-1).forEach((e=>{r=r[e]})),r[l[l.length-1]]=i}));const i=o.__comp;delete o.__comp;const r=o.__context;return delete o.__context,(0,l.jsx)(u.z,{value:r,children:(0,l.jsx)(i,{...o,...n})})}})}const p=[{path:"/illa-website/admin-panel",component:d("/illa-website/admin-panel","090"),exact:!0},{path:"/illa-website/ai-voice-generator",component:d("/illa-website/ai-voice-generator","71b"),exact:!0},{path:"/illa-website/blog",component:d("/illa-website/blog","a39"),exact:!0},{path:"/illa-website/blog/appsmith-vs-retool",component:d("/illa-website/blog/appsmith-vs-retool","b40"),exact:!0},{path:"/illa-website/blog/automate-send-to-slack",component:d("/illa-website/blog/automate-send-to-slack","ba3"),exact:!0},{path:"/illa-website/blog/backend-create-web-ui",component:d("/illa-website/blog/backend-create-web-ui","e6d"),exact:!0},{path:"/illa-website/blog/best-citizen-developer-tool",component:d("/illa-website/blog/best-citizen-developer-tool","a65"),exact:!0},{path:"/illa-website/blog/best-low-code-platform",component:d("/illa-website/blog/best-low-code-platform","9b1"),exact:!0},{path:"/illa-website/blog/boost-freelancer",component:d("/illa-website/blog/boost-freelancer","c23"),exact:!0},{path:"/illa-website/blog/build-ai-tools",component:d("/illa-website/blog/build-ai-tools","c16"),exact:!0},{path:"/illa-website/blog/build-dashboard",component:d("/illa-website/blog/build-dashboard","fb1"),exact:!0},{path:"/illa-website/blog/core-app-dashboard-2",component:d("/illa-website/blog/core-app-dashboard-2","006"),exact:!0},{path:"/illa-website/blog/internal-tool",component:d("/illa-website/blog/internal-tool","0e6"),exact:!0},{path:"/illa-website/blog/it-support",component:d("/illa-website/blog/it-support","1b7"),exact:!0},{path:"/illa-website/blog/launch-flow",component:d("/illa-website/blog/launch-flow","116"),exact:!0},{path:"/illa-website/blog/list-tables-in-postgresql",component:d("/illa-website/blog/list-tables-in-postgresql","15e"),exact:!0},{path:"/illa-website/blog/low-code-crm",component:d("/illa-website/blog/low-code-crm","23f"),exact:!0},{path:"/illa-website/blog/lowcode-vs-traditional",component:d("/illa-website/blog/lowcode-vs-traditional","6ed"),exact:!0},{path:"/illa-website/blog/mui-2024",component:d("/illa-website/blog/mui-2024","5d5"),exact:!0},{path:"/illa-website/blog/nvm-use-2024",component:d("/illa-website/blog/nvm-use-2024","083"),exact:!0},{path:"/illa-website/blog/page/2",component:d("/illa-website/blog/page/2","71c"),exact:!0},{path:"/illa-website/blog/page/3",component:d("/illa-website/blog/page/3","293"),exact:!0},{path:"/illa-website/blog/postgresql-isnull",component:d("/illa-website/blog/postgresql-isnull","f7b"),exact:!0},{path:"/illa-website/blog/postgresql-select",component:d("/illa-website/blog/postgresql-select","6fb"),exact:!0},{path:"/illa-website/blog/react-component-library",component:d("/illa-website/blog/react-component-library","b6f"),exact:!0},{path:"/illa-website/blog/react-error-boundary",component:d("/illa-website/blog/react-error-boundary","77f"),exact:!0},{path:"/illa-website/blog/react-markdown",component:d("/illa-website/blog/react-markdown","f93"),exact:!0},{path:"/illa-website/blog/shadcn-ui-2024",component:d("/illa-website/blog/shadcn-ui-2024","b65"),exact:!0},{path:"/illa-website/blog/shadcn-vs-mui",component:d("/illa-website/blog/shadcn-vs-mui","2aa"),exact:!0},{path:"/illa-website/blog/tags",component:d("/illa-website/blog/tags","6c4"),exact:!0},{path:"/illa-website/blog/tags/admin-panel",component:d("/illa-website/blog/tags/admin-panel","ecb"),exact:!0},{path:"/illa-website/blog/tags/ai",component:d("/illa-website/blog/tags/ai","8dd"),exact:!0},{path:"/illa-website/blog/tags/appsmith",component:d("/illa-website/blog/tags/appsmith","61e"),exact:!0},{path:"/illa-website/blog/tags/automate",component:d("/illa-website/blog/tags/automate","436"),exact:!0},{path:"/illa-website/blog/tags/citizen-developer",component:d("/illa-website/blog/tags/citizen-developer","ca5"),exact:!0},{path:"/illa-website/blog/tags/citizen-developer-tool",component:d("/illa-website/blog/tags/citizen-developer-tool","be4"),exact:!0},{path:"/illa-website/blog/tags/citizen-development",component:d("/illa-website/blog/tags/citizen-development","6ea"),exact:!0},{path:"/illa-website/blog/tags/component",component:d("/illa-website/blog/tags/component","a30"),exact:!0},{path:"/illa-website/blog/tags/core-app-dashboard",component:d("/illa-website/blog/tags/core-app-dashboard","b49"),exact:!0},{path:"/illa-website/blog/tags/crud",component:d("/illa-website/blog/tags/crud","63d"),exact:!0},{path:"/illa-website/blog/tags/data-dashboard",component:d("/illa-website/blog/tags/data-dashboard","55e"),exact:!0},{path:"/illa-website/blog/tags/database",component:d("/illa-website/blog/tags/database","cd9"),exact:!0},{path:"/illa-website/blog/tags/fiverr",component:d("/illa-website/blog/tags/fiverr","aa5"),exact:!0},{path:"/illa-website/blog/tags/freelance",component:d("/illa-website/blog/tags/freelance","946"),exact:!0},{path:"/illa-website/blog/tags/freelancer",component:d("/illa-website/blog/tags/freelancer","ce7"),exact:!0},{path:"/illa-website/blog/tags/gui",component:d("/illa-website/blog/tags/gui","ade"),exact:!0},{path:"/illa-website/blog/tags/internal-tools",component:d("/illa-website/blog/tags/internal-tools","34b"),exact:!0},{path:"/illa-website/blog/tags/isnotnull",component:d("/illa-website/blog/tags/isnotnull","519"),exact:!0},{path:"/illa-website/blog/tags/isnull",component:d("/illa-website/blog/tags/isnull","62b"),exact:!0},{path:"/illa-website/blog/tags/javascript",component:d("/illa-website/blog/tags/javascript","ee2"),exact:!0},{path:"/illa-website/blog/tags/library",component:d("/illa-website/blog/tags/library","3d8"),exact:!0},{path:"/illa-website/blog/tags/list",component:d("/illa-website/blog/tags/list","1cf"),exact:!0},{path:"/illa-website/blog/tags/low-code",component:d("/illa-website/blog/tags/low-code","d00"),exact:!0},{path:"/illa-website/blog/tags/low-code-crm",component:d("/illa-website/blog/tags/low-code-crm","d64"),exact:!0},{path:"/illa-website/blog/tags/mac",component:d("/illa-website/blog/tags/mac","c15"),exact:!0},{path:"/illa-website/blog/tags/nodejs",component:d("/illa-website/blog/tags/nodejs","0ef"),exact:!0},{path:"/illa-website/blog/tags/nvm",component:d("/illa-website/blog/tags/nvm","54f"),exact:!0},{path:"/illa-website/blog/tags/open-source",component:d("/illa-website/blog/tags/open-source","f4a"),exact:!0},{path:"/illa-website/blog/tags/postgres",component:d("/illa-website/blog/tags/postgres","5f2"),exact:!0},{path:"/illa-website/blog/tags/postgresql",component:d("/illa-website/blog/tags/postgresql","38f"),exact:!0},{path:"/illa-website/blog/tags/psql",component:d("/illa-website/blog/tags/psql","b8a"),exact:!0},{path:"/illa-website/blog/tags/react",component:d("/illa-website/blog/tags/react","45c"),exact:!0},{path:"/illa-website/blog/tags/redis",component:d("/illa-website/blog/tags/redis","bc9"),exact:!0},{path:"/illa-website/blog/tags/retool",component:d("/illa-website/blog/tags/retool","170"),exact:!0},{path:"/illa-website/blog/tags/select",component:d("/illa-website/blog/tags/select","4fb"),exact:!0},{path:"/illa-website/blog/tags/shadcn-ui",component:d("/illa-website/blog/tags/shadcn-ui","459"),exact:!0},{path:"/illa-website/blog/tags/slack",component:d("/illa-website/blog/tags/slack","a62"),exact:!0},{path:"/illa-website/blog/tags/tables",component:d("/illa-website/blog/tags/tables","b62"),exact:!0},{path:"/illa-website/blog/tags/tooljet",component:d("/illa-website/blog/tags/tooljet","2bb"),exact:!0},{path:"/illa-website/blog/tags/tools",component:d("/illa-website/blog/tags/tools","adc"),exact:!0},{path:"/illa-website/blog/tags/traditional-development",component:d("/illa-website/blog/tags/traditional-development","f03"),exact:!0},{path:"/illa-website/blog/tags/typescript",component:d("/illa-website/blog/tags/typescript","824"),exact:!0},{path:"/illa-website/blog/tags/ui-library",component:d("/illa-website/blog/tags/ui-library","174"),exact:!0},{path:"/illa-website/blog/tags/upwork",component:d("/illa-website/blog/tags/upwork","0a0"),exact:!0},{path:"/illa-website/blog/tags/webworker",component:d("/illa-website/blog/tags/webworker","5a5"),exact:!0},{path:"/illa-website/blog/tags/workflow",component:d("/illa-website/blog/tags/workflow","ee0"),exact:!0},{path:"/illa-website/blog/the-best-tools-for-build-crud-applications",component:d("/illa-website/blog/the-best-tools-for-build-crud-applications","2aa"),exact:!0},{path:"/illa-website/blog/tooljet-vs-appsmith",component:d("/illa-website/blog/tooljet-vs-appsmith","055"),exact:!0},{path:"/illa-website/blog/tooljet-vs-retool",component:d("/illa-website/blog/tooljet-vs-retool","3e4"),exact:!0},{path:"/illa-website/blog/top-5-best-open-source-low-code-platforms-in-2024",component:d("/illa-website/blog/top-5-best-open-source-low-code-platforms-in-2024","263"),exact:!0},{path:"/illa-website/blog/top-7-database-guis-for-sql-databases",component:d("/illa-website/blog/top-7-database-guis-for-sql-databases","45f"),exact:!0},{path:"/illa-website/blog/top-7-redis-gui-tools-in-2023",component:d("/illa-website/blog/top-7-redis-gui-tools-in-2023","36e"),exact:!0},{path:"/illa-website/blog/typescript-most-practical-features-compilation",component:d("/illa-website/blog/typescript-most-practical-features-compilation","57f"),exact:!0},{path:"/illa-website/blog/web-worker-tutorial",component:d("/illa-website/blog/web-worker-tutorial","0d9"),exact:!0},{path:"/illa-website/cms",component:d("/illa-website/cms","026"),exact:!0},{path:"/illa-website/components/",component:d("/illa-website/components/","5b9"),exact:!0},{path:"/illa-website/components/Audio/",component:d("/illa-website/components/Audio/","f19"),exact:!0},{path:"/illa-website/components/BarProgress/",component:d("/illa-website/components/BarProgress/","771"),exact:!0},{path:"/illa-website/components/Button/",component:d("/illa-website/components/Button/","de8"),exact:!0},{path:"/illa-website/components/Carousel/",component:d("/illa-website/components/Carousel/","8c9"),exact:!0},{path:"/illa-website/components/Cascader/",component:d("/illa-website/components/Cascader/","f17"),exact:!0},{path:"/illa-website/components/Chart/",component:d("/illa-website/components/Chart/","d20"),exact:!0},{path:"/illa-website/components/CheckboxGroup/",component:d("/illa-website/components/CheckboxGroup/","2b3"),exact:!0},{path:"/illa-website/components/CircleProgress/",component:d("/illa-website/components/CircleProgress/","1f3"),exact:!0},{path:"/illa-website/components/Container/",component:d("/illa-website/components/Container/","d85"),exact:!0},{path:"/illa-website/components/Date/",component:d("/illa-website/components/Date/","cfa"),exact:!0},{path:"/illa-website/components/DateRange/",component:d("/illa-website/components/DateRange/","c94"),exact:!0},{path:"/illa-website/components/DateTime/",component:d("/illa-website/components/DateTime/","90f"),exact:!0},{path:"/illa-website/components/Divider/",component:d("/illa-website/components/Divider/","7f8"),exact:!0},{path:"/illa-website/components/EditableText/",component:d("/illa-website/components/EditableText/","77f"),exact:!0},{path:"/illa-website/components/Form/",component:d("/illa-website/components/Form/","4f5"),exact:!0},{path:"/illa-website/components/Icon/",component:d("/illa-website/components/Icon/","2b7"),exact:!0},{path:"/illa-website/components/Image/",component:d("/illa-website/components/Image/","81d"),exact:!0},{path:"/illa-website/components/Input/",component:d("/illa-website/components/Input/","d13"),exact:!0},{path:"/illa-website/components/List/",component:d("/illa-website/components/List/","b84"),exact:!0},{path:"/illa-website/components/Menu/",component:d("/illa-website/components/Menu/","17f"),exact:!0},{path:"/illa-website/components/Modal/",component:d("/illa-website/components/Modal/","bb5"),exact:!0},{path:"/illa-website/components/Multiselect/",component:d("/illa-website/components/Multiselect/","7cb"),exact:!0},{path:"/illa-website/components/NumberInput/",component:d("/illa-website/components/NumberInput/","549"),exact:!0},{path:"/illa-website/components/PDF/",component:d("/illa-website/components/PDF/","63e"),exact:!0},{path:"/illa-website/components/RadioButton/",component:d("/illa-website/components/RadioButton/","345"),exact:!0},{path:"/illa-website/components/RadioGroup/",component:d("/illa-website/components/RadioGroup/","988"),exact:!0},{path:"/illa-website/components/Rate/",component:d("/illa-website/components/Rate/","a88"),exact:!0},{path:"/illa-website/components/Select/",component:d("/illa-website/components/Select/","902"),exact:!0},{path:"/illa-website/components/Statistics/",component:d("/illa-website/components/Statistics/","6e4"),exact:!0},{path:"/illa-website/components/Switch/",component:d("/illa-website/components/Switch/","f6f"),exact:!0},{path:"/illa-website/components/Tables/",component:d("/illa-website/components/Tables/","5f6"),exact:!0},{path:"/illa-website/components/Tabs/",component:d("/illa-website/components/Tabs/","e90"),exact:!0},{path:"/illa-website/components/Text/",component:d("/illa-website/components/Text/","25a"),exact:!0},{path:"/illa-website/components/Textarea%20Input/",component:d("/illa-website/components/Textarea%20Input/","44d"),exact:!0},{path:"/illa-website/components/Timeline/",component:d("/illa-website/components/Timeline/","3ae"),exact:!0},{path:"/illa-website/components/Upload/",component:d("/illa-website/components/Upload/","9a0"),exact:!0},{path:"/illa-website/components/Video/",component:d("/illa-website/components/Video/","b95"),exact:!0},{path:"/illa-website/crm",component:d("/illa-website/crm","63f"),exact:!0},{path:"/illa-website/dashboard",component:d("/illa-website/dashboard","5ec"),exact:!0},{path:"/illa-website/illa-flow/",component:d("/illa-website/illa-flow/","b60"),exact:!0},{path:"/illa-website/image-generator",component:d("/illa-website/image-generator","2aa"),exact:!0},{path:"/illa-website/integrations/",component:d("/illa-website/integrations/","1e5"),exact:!0},{path:"/illa-website/integrations/Airtable/",component:d("/illa-website/integrations/Airtable/","d53"),exact:!0},{path:"/illa-website/integrations/AmazonDynamoDB/",component:d("/illa-website/integrations/AmazonDynamoDB/","c98"),exact:!0},{path:"/illa-website/integrations/Appwrite/",component:d("/illa-website/integrations/Appwrite/","5ea"),exact:!0},{path:"/illa-website/integrations/Clickhouse/",component:d("/illa-website/integrations/Clickhouse/","efd"),exact:!0},{path:"/illa-website/integrations/CouchDB/",component:d("/illa-website/integrations/CouchDB/","912"),exact:!0},{path:"/illa-website/integrations/ElasticSearch/",component:d("/illa-website/integrations/ElasticSearch/","697"),exact:!0},{path:"/illa-website/integrations/Firebase/",component:d("/illa-website/integrations/Firebase/","b8a"),exact:!0},{path:"/illa-website/integrations/GoogleSheets/",component:d("/illa-website/integrations/GoogleSheets/","ee9"),exact:!0},{path:"/illa-website/integrations/GraphQL/",component:d("/illa-website/integrations/GraphQL/","975"),exact:!0},{path:"/illa-website/integrations/HuggingFaceInferenceAPI/",component:d("/illa-website/integrations/HuggingFaceInferenceAPI/","4d1"),exact:!0},{path:"/illa-website/integrations/HuggingFaceInferenceEndpoint/",component:d("/illa-website/integrations/HuggingFaceInferenceEndpoint/","a72"),exact:!0},{path:"/illa-website/integrations/Hydra/",component:d("/illa-website/integrations/Hydra/","cc5"),exact:!0},{path:"/illa-website/integrations/MariaDB/",component:d("/illa-website/integrations/MariaDB/","53c"),exact:!0},{path:"/illa-website/integrations/MicrosoftSQLServer/",component:d("/illa-website/integrations/MicrosoftSQLServer/","933"),exact:!0},{path:"/illa-website/integrations/MongoDB/",component:d("/illa-website/integrations/MongoDB/","640"),exact:!0},{path:"/illa-website/integrations/MySQL/",component:d("/illa-website/integrations/MySQL/","59d"),exact:!0},{path:"/illa-website/integrations/Neon/",component:d("/illa-website/integrations/Neon/","fc8"),exact:!0},{path:"/illa-website/integrations/OracleDB/",component:d("/illa-website/integrations/OracleDB/","a32"),exact:!0},{path:"/illa-website/integrations/PostgreSQL/",component:d("/illa-website/integrations/PostgreSQL/","4b0"),exact:!0},{path:"/illa-website/integrations/Redis/",component:d("/illa-website/integrations/Redis/","acb"),exact:!0},{path:"/illa-website/integrations/RESTAPI/",component:d("/illa-website/integrations/RESTAPI/","8d2"),exact:!0},{path:"/illa-website/integrations/S3/",component:d("/illa-website/integrations/S3/","8f9"),exact:!0},{path:"/illa-website/integrations/SMTP/",component:d("/illa-website/integrations/SMTP/","d8d"),exact:!0},{path:"/illa-website/integrations/Snowflake/",component:d("/illa-website/integrations/Snowflake/","f29"),exact:!0},{path:"/illa-website/integrations/SupabaseDB/",component:d("/illa-website/integrations/SupabaseDB/","ea8"),exact:!0},{path:"/illa-website/integrations/TiDB/",component:d("/illa-website/integrations/TiDB/","cfd"),exact:!0},{path:"/illa-website/pricing/",component:d("/illa-website/pricing/","b2e"),exact:!0},{path:"/illa-website/",component:d("/illa-website/","113"),exact:!0},{path:"*",component:d("*")}]},7752:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,t:()=>r});var a=n(959),o=n(1527);const i=a.createContext(!1);function r(e){let{children:t}=e;const[n,r]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{r(!0)}),[]),(0,o.jsx)(i.Provider,{value:n,children:t})}},1136:(e,t,n)=>{"use strict";var a=n(959),o=n(4478),i=n(9500),r=n(387),l=n(6047);const s=[n(3852),n(89),n(6070),n(4329),n(962),n(1245)];var c=n(6002),u=n(8903),d=n(6920);function p(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var a=e.path?(0,u.LX)(t,e):n.length?n[n.length-1].match:u.F0.computeRootMatch(t);return a&&(n.push({route:e,match:a}),e.routes&&p(e.routes,t,n)),a})),n}var g=n(1527);function f(e){let{children:t}=e;return(0,g.jsx)(g.Fragment,{children:t})}var m=n(4491),b=n(2688),h=n(9925),y=n(2593),w=n(1610),v=n(8224),k=n(864);const _="default";var x=n(6771),L=n(7535);function C(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,b.Z)(),a=(0,v.l)(),o=n[e].htmlLang,i=e=>e.replace("-","_");return(0,g.jsxs)(m.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,g.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,g.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,g.jsx)("meta",{property:"og:locale",content:i(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,g.jsx)("meta",{property:"og:locale:alternate",content:i(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function S(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,b.Z)(),a=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,b.Z)(),{pathname:a}=(0,u.TH)();return e+(0,x.applyTrailingSlash)((0,h.Z)(a),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:a;return(0,g.jsxs)(m.Z,{children:[(0,g.jsx)("meta",{property:"og:url",content:o}),(0,g.jsx)("link",{rel:"canonical",href:o})]})}function A(){const{i18n:{currentLocale:e}}=(0,b.Z)(),{metadata:t,image:n}=(0,y.L)();return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsxs)(m.Z,{children:[(0,g.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,g.jsx)("body",{className:k.h})]}),n&&(0,g.jsx)(w.d,{image:n}),(0,g.jsx)(S,{}),(0,g.jsx)(C,{}),(0,g.jsx)(L.Z,{tag:_,locale:e}),(0,g.jsx)(m.Z,{children:t.map(((e,t)=>(0,g.jsx)("meta",{...e},t)))})]})}const P=new Map;function D(e){if(P.has(e.pathname))return{...e,pathname:P.get(e.pathname)};if(p(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return P.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return P.set(e.pathname,t),{...e,pathname:t}}var T=n(7752),I=n(6855),E=n(2827);function j(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a{const a=t.default?.[e]??t[e];return a?.(...n)}));return()=>o.forEach((e=>e?.()))}const R=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,E.Z)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const a=t.pathname===n.pathname,o=t.hash===n.hash,i=t.search===n.search;if(a&&o&&!i)return;const{hash:r}=t;if(r){const e=decodeURIComponent(r.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),j("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>p(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class F extends a.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?j("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=j("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,g.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,g.jsx)(u.AW,{location:t,render:()=>e})})}}const M=F,O="__docusaurus-base-url-issue-banner-container",B="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function q(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${O}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
