diff --git a/blog/2023-10-22-vs-anvil-works.md b/blog/2023-10-22-vs-anvil-works.md new file mode 100644 index 00000000..c04817b9 --- /dev/null +++ b/blog/2023-10-22-vs-anvil-works.md @@ -0,0 +1,106 @@ +--- +slug: vs-anvil-works-2023 +title: Anvil vs. MecSimCalc +authors: [wqiu] +tags: [Compare] +--- + +![Banner](/blog/compare/vs_anvil_banner.jpg) + +In today's fast-paced digital world, the ability to develop web applications quickly and efficiently can make a significant difference for businesses and developers alike. Anvil and MecSimCalc are two tools that aim to simplify web app development, offering the power of Python without the complexity of traditional web development. In this article, we will compare Anvil and MecSimCalc across various dimensions to help you choose the one that best suits your needs. + +## Overview + +Before diving into the technical details, let's take a look at the basic information. + +| Feature | Anvil | MecSimCalc | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | +| Website | [Anvil Works](https://anvil.works/) | [MecSimCalc](https://mecsimcalc.com/) | +| Description | "Build web apps with nothing but Python. Build seriously powerful web apps with all the flexibility of Python. No web development experience required." | "The simplest way to build and share computational tools. Create and share your Python web apps in minutes for free." | +| Target Audience | Enterprise | Designed for non-technical users | +| Required Knowledge | Python, Anvil library | Python | +| Ideal Use Case | Business websites with database | Computational simulation and calculation | +| Cost | Free | Free | + +## Features Comparison + +Now, let's dive into the specific features and functionalities of both Anvil and MecSimCalc. + +| Feature | Anvil | MecSimCalc | +| ------------------------------ | ------------------------------------------------------ | ------------------------------------------------------------ | +| Documentation | [anvil.works/docs](https://anvil.works/docs) | [docs.mecsimcalc.com](https://docs.mecsimcalc.com) | +| Blog | [anvil.works/blog](https://anvil.works/blog) | [docs.mecsimcalc.com/blog](https://docs.mecsimcalc.com/blog) | +| Discourse Forum | [anvil.works/community](https://anvil.works/community) | [community.mecsimcalc.com](https://community.mecsimcalc.com) | +| Drag-and-drop interface | :white_check_mark: | :white_check_mark: | +| Cloud Deployment | :white_check_mark: | :white_check_mark: | +| Self-Host | :white_check_mark: | :white_check_mark: | +| Github Integration | :white_check_mark: | :x: | +| Built-in Database | :white_check_mark: Postgres DB | :x: | +| Built-in External Integrations | :white_check_mark: Stripe, OAuth, Jupyter, Email, etc. | :x: | +| In-Browser Editor | :white_check_mark: No intellisense | :white_check_mark: | +| Run in Background | :white_check_mark: | :white_check_mark: | +| Custom Domain | :white_check_mark: | :x: | +| App Marketplace | :x: | :white_check_mark: | + +## The Workflow + +Creating web applications should be a straightforward process. Let's explore how Anvil and MecSimCalc facilitate the app building and deploying process. + +### Anvil + +Anvil runs a web server that communicates with a database and other processes. + +**Step 1:** Create a new app by selecting from one of the Anvil templates +![Create page](/blog/compare/anvil_create.jpg) + +**Step 2:** On the inputs page, use the side menu on the right to configure each input settings and drag-and-drop in more inputs. +![Inputs page](/blog/compare/anvil_inputs.png) +![New component](/blog/compare/anvil_new_component.png) + +**Step 3:** On the code page, use custom anvil functions to write the Python code that uses the input values to execute commands, such as database executions. +![Code page](/blog/compare/anvil_code.png) + +**Step 4:** Finally, to deploy the app, open the Publish popup and click on Publish +![Publish](/blog/compare/anvil_publish.png) + +**Step 5:** The app is now deployed and accessible at an Anvil url: +Keep in mind that Anvil apps on the free tier come with a banner at the top. + +![Anvil app](/blog/compare/anvil_app.png) + +### MecSimCalc + +Internally, MecSimCalc uses serverless functions to run Python functions, make it suitable for computational simulation and calculation, which may require more computing power and longer runtimes. + +Here is a simplified workflow for creating and deploying a basic MecSimCalc app: + +**Step 1:** Visit https://mecsimcalc.com/create and select one of the templates to create a new app. +![Create page](/blog/compare/mecsimcalc_create.png) + +**Step 2:** On the inputs step, use the drag and drop interface to add, delete, and position the inputs. Edit the each input by clicking on it. +![Inputs step](/blog/compare/mecsimcalc_inputs.png) +![Edit inputs](/blog/compare/mecsimcalc_edit_inputs.png) + +**Step 3:** On the code step, write the Python code that uses the `inputs` to calculate the output. No need for custom functions nor installations. The toolbar on the right allows for installing Python packages, debugging the code, and seeing the input variables. +![Code step](/blog/compare/mecsimcalc_code.png) + +**Step 4:** On the outputs step, use the rich text editor to stylize the outputs and embed the outputs variables from the code. +![Outputs step](/blog/compare/mecsimcalc_outputs.png) + +**Step 5:** Finally, to deploy the app, simply click on the _Publish_ button at the bottom of the Preview step and the app will be accessible at a MecSimCalc url within a few seconds. +![Publish](/blog/compare/mecsimcalc_publish.png) + +This is the final app: +![MecSimCalc app](/blog/compare/mecsimcalc_app.png) + +## Conclusion + +Both Anvil and MecSimCalc aim to simplify web application development, enabling users to leverage the power of Python without the need for extensive web development experience. While Anvil is designed for building full-fledged websites and offers more features, MecSimCalc is geared towards non-technical users and simplifies complex computations. + +### Key Takeaways + +- MecSimCalc offers a solution for simplifying complex calculations with Python. +- Anvil's extensive feature set can create complexity, but it is more suitable for building full-fledged websites. +- MecSimCalc excels at simplifying the app-building process for non-technical users. + +In summary, the choice between Anvil and MecSimCalc depends on your specific needs and the complexity of the web applications you intend to develop. Both tools offer the power of Python, but with different target audiences and features. diff --git a/blog/2023-10-23-vs-streamlit.md b/blog/2023-10-23-vs-streamlit.md new file mode 100644 index 00000000..d6c49ac7 --- /dev/null +++ b/blog/2023-10-23-vs-streamlit.md @@ -0,0 +1,138 @@ +--- +slug: vs-streamlit-2023 +title: Streamlit vs. MecSimCalc +authors: [wqiu] +tags: [Compare] +--- + +![Banner](/blog/compare/vs_streamlit_banner.jpg) + +Streamlit and MecSimCalc both offer solutions to simplify app development and data visualization with Python. However, they cater to different user bases and provide unique features. In this article, we'll delve into a detailed comparison between Streamlit and MecSimCalc. + +## Overview + +Let's start with an overview of both platforms. + +| Feature | Streamlit | MecSimCalc | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | +| Website | [Streamlit](https://streamlit.io/) | [MecSimCalc](https://mecsimcalc.com/) | +| Description | "A faster way to build and share data apps. Streamlit turns data scripts into shareable web apps in minutes. All in pure Python. No front‑end experience required." | "The simplest way to build and share computational tools. Create and share your Python web apps in minutes for free." | +| Target Audience | Python developers | Python developers and non-technical users | +| Required Knowledge | Python, Terminal, GitHub, Markdown, Streamlit library | Python | +| Ideal Use Case | Data visualization | Computational simulation and calculation | +| Cost | Free | Free | + +## Features Comparison + +Now, let's explore the specific features and functionalities of both Streamlit and MecSimCalc. + +| Feature | Streamlit | MecSimCalc | +| -------------------------- | -------------------------------------------------------- | ------------------------------------------------------------ | +| Documentation | [docs.streamlit.io](https://docs.streamlit.io) | [docs.mecsimcalc.com](https://docs.mecsimcalc.com) | +| Blog | [blog.streamlit.io](https://blog.streamlit.io) | [docs.mecsimcalc.com/blog](https://docs.mecsimcalc.com/blog) | +| Discourse Forum | [streamlit.io/community](https://streamlit.io/community) | [community.mecsimcalc.com](https://community.mecsimcalc.com) | +| Download Required | Yes | No | +| Custom Code Syntax | Yes, requires custom `streamlit` functions | No, works with plain Python | +| Resource Limits | 1 GB RAM, sleeps after 7 days of inactivity | 7 days, 16 vCPUs, 120 GB RAM, 200GB disk space | +| Monetize Apps | :x: | :white_check_mark: | +| Conditional Inputs | :white_check_mark: | :white_check_mark: | +| Dynamic Tables | :white_check_mark: | :white_check_mark: | +| Interactivity & Animations | :white_check_mark: | :x: | +| Plotting | :white_check_mark: | :white_check_mark: | +| Maps | :white_check_mark: | :white_check_mark: | +| Embeddable | :white_check_mark: | :white_check_mark: | +| Drag-and-drop interface | :x: | :white_check_mark: | +| Run in Background | :x: | :white_check_mark: | + +## The Workflow + +Next, we will briefly explore the workflow of both Streamlit and MecSimCalc, from creating an app to deploying it. + +### Streamlit + +Internally, Streamlit uses Tornado as its web server. Streamlit runs on websockets, making it suitable for interactive real-time applications. + +Here is a simplified workflow for creating and deploying a basic Streamlit app: + +**Step 1:** Download and start streamlit via the terminal: + +```bash +# Prerequisite: download Python and pip, if not already installed +pip install streamlit +touch my_app.py +streamlit run my_app.py +``` + +After running `streamlit run`, a new tab will open in your browser with the app running at a `localhost` url. All the coding will be done locally on your computer and edits in `my_app.py` will automatically be reflected in the browser. + +**Step 2:** Write the Streamlit code inside `my_app.py`. Refer to Streamlit docs for custom `st` functions required to build the interface and layout. + +```python +# my_app.py + +import streamlit as st + +st.write("# a+b") + +col1, col2, col3 = st.columns([6, 1, 6]) +with col1: + a = st.number_input("a", value=12) +with col2: + st.write("# +") +with col3: + b = st.number_input("b", value=34) + +sum = a + b +product = a * b + +st.write("The sum of the two numbers is " + str(sum)) +st.write("The product of the two numbers is " + str(product)) +``` + +**Step 3:** The inputs, code, and outputs are all handled in the single Python file. The localhost webpage looks like this: +![Streamlit app](/blog/compare/streamlit_app.png) + +**Step 4:** Before deploying the app, first create a [Github](https://github.com/) account and a new Github repository. Then save the code to the repository by downloading and using the Github desktop app or using the terminal: + +```bash +git add . +git commit -m "saving my_app.py" +git push +``` + +**Step 4:** Finally, to deploy the app to Streamlit cloud, create a streamlit cloud account and fill out the _Deploy an app_ form with the Github repository link. Once submitted, the app will build for a few minutes before becoming accessible at a streamlit url. + +
+ +
+ +### MecSimCalc + +Internally, MecSimCalc uses serverless functions to run Python functions, make it suitable for computational simulation and calculation, which may require more computing power and longer runtimes. + +Here is a simplified workflow for creating and deploying a basic MecSimCalc app: + +**Step 1:** Visit https://mecsimcalc.com/create and select one of the templates to create a new app. +![Create page](/blog/compare/mecsimcalc_create.png) + +**Step 2:** On the inputs step, use the drag and drop interface to add, delete, and position the inputs. Edit the each input by clicking on it. +![Inputs step](/blog/compare/mecsimcalc_inputs.png) +![Edit inputs](/blog/compare/mecsimcalc_edit_inputs.png) + +**Step 3:** On the code step, write the Python code that uses the `inputs` to calculate the output. No need for custom functions nor installations. The toolbar on the right allows for installing Python packages, debugging the code, and seeing the input variables. +![Code step](/blog/compare/mecsimcalc_code.png) + +**Step 4:** On the outputs step, use the rich text editor to stylize the outputs and embed the outputs variables from the code. +![Outputs step](/blog/compare/mecsimcalc_outputs.png) + +**Step 5:** Finally, to deploy the app, simply click on the _Publish_ button at the bottom of the Preview step and the app will be accessible at a MecSimCalc url within a few seconds. +![Publish](/blog/compare/mecsimcalc_publish.png) + +This is the final app: +![MecSimCalc app](/blog/compare/mecsimcalc_app.png) + +## Conclusion + +Streamlit and MecSimCalc offer solutions to different segments of users. Streamlit is designed for developers who want to create interactive data apps rapidly but may require familiarity with custom Streamlit functions and terminal/Github integration. On the other hand, MecSimCalc is tailored for non-technical users, eliminating the need to change existing Python codes and works in-browser. diff --git a/static/blog/compare/anvil_app.png b/static/blog/compare/anvil_app.png new file mode 100644 index 00000000..3e48f0ef Binary files /dev/null and b/static/blog/compare/anvil_app.png differ diff --git a/static/blog/compare/anvil_code.png b/static/blog/compare/anvil_code.png new file mode 100644 index 00000000..1e3c7e0f Binary files /dev/null and b/static/blog/compare/anvil_code.png differ diff --git a/static/blog/compare/anvil_create.jpg b/static/blog/compare/anvil_create.jpg new file mode 100644 index 00000000..f3798a65 Binary files /dev/null and b/static/blog/compare/anvil_create.jpg differ diff --git a/static/blog/compare/anvil_inputs.png b/static/blog/compare/anvil_inputs.png new file mode 100644 index 00000000..9eb9b5dd Binary files /dev/null and b/static/blog/compare/anvil_inputs.png differ diff --git a/static/blog/compare/anvil_new_component.png b/static/blog/compare/anvil_new_component.png new file mode 100644 index 00000000..2226b84a Binary files /dev/null and b/static/blog/compare/anvil_new_component.png differ diff --git a/static/blog/compare/anvil_publish.png b/static/blog/compare/anvil_publish.png new file mode 100644 index 00000000..a352732d Binary files /dev/null and b/static/blog/compare/anvil_publish.png differ diff --git a/static/blog/compare/mecsimcalc_app.png b/static/blog/compare/mecsimcalc_app.png new file mode 100644 index 00000000..0d798638 Binary files /dev/null and b/static/blog/compare/mecsimcalc_app.png differ diff --git a/static/blog/compare/mecsimcalc_code.png b/static/blog/compare/mecsimcalc_code.png new file mode 100644 index 00000000..e8e6567b Binary files /dev/null and b/static/blog/compare/mecsimcalc_code.png differ diff --git a/static/blog/compare/mecsimcalc_create.png b/static/blog/compare/mecsimcalc_create.png new file mode 100644 index 00000000..7fa9f764 Binary files /dev/null and b/static/blog/compare/mecsimcalc_create.png differ diff --git a/static/blog/compare/mecsimcalc_edit_inputs.png b/static/blog/compare/mecsimcalc_edit_inputs.png new file mode 100644 index 00000000..aff3dceb Binary files /dev/null and b/static/blog/compare/mecsimcalc_edit_inputs.png differ diff --git a/static/blog/compare/mecsimcalc_inputs.png b/static/blog/compare/mecsimcalc_inputs.png new file mode 100644 index 00000000..2edbefbe Binary files /dev/null and b/static/blog/compare/mecsimcalc_inputs.png differ diff --git a/static/blog/compare/mecsimcalc_outputs.png b/static/blog/compare/mecsimcalc_outputs.png new file mode 100644 index 00000000..b47c1933 Binary files /dev/null and b/static/blog/compare/mecsimcalc_outputs.png differ diff --git a/static/blog/compare/mecsimcalc_publish.png b/static/blog/compare/mecsimcalc_publish.png new file mode 100644 index 00000000..a171df07 Binary files /dev/null and b/static/blog/compare/mecsimcalc_publish.png differ diff --git a/static/blog/compare/streamlit_app.png b/static/blog/compare/streamlit_app.png new file mode 100644 index 00000000..6f51f336 Binary files /dev/null and b/static/blog/compare/streamlit_app.png differ diff --git a/static/blog/compare/vs_anvil_banner.jpg b/static/blog/compare/vs_anvil_banner.jpg new file mode 100644 index 00000000..50c82a91 Binary files /dev/null and b/static/blog/compare/vs_anvil_banner.jpg differ diff --git a/static/blog/compare/vs_streamlit_banner.jpg b/static/blog/compare/vs_streamlit_banner.jpg new file mode 100644 index 00000000..26a54889 Binary files /dev/null and b/static/blog/compare/vs_streamlit_banner.jpg differ