12 Reasons to use Python, not JS, for Front End Web Development
Tags: python, webdev
Published: 2021-02-16 16:51:56

# Why Python Beats HTML+JS for Web Development

Web development is pretty unwieldy. You need to master JS _and_ HTML _and_ CSS _and_ Python (or Rails or Node) _and_ a [ton of frameworks](https://github.com/kamranahmedse/developer-roadmap#frontend-roadmap).

We love Python because of its motto: [Simple is better than complex](https://zen-of-python.info/). **So what would web development look like, if it were 100% Python -- even the front end?** We built it, and it's called [Anvil](https://anvil.works/?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development).

Here are 12 reasons why building your front-end _and_ back-end in Python is so great:

---

### 1. Your UI components are all Python objects.

[Running Python in the browser](https://anvil.works/python-browser?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) means you can modify your UI components in Python. Drag and drop them onto the page to build the user interface, then set their properties and call events on them from Python code. 

![](https://anvil.works/learn/tutorials/img/feedback-form/add-button.gif)
*Building the UI for a feedback form. Check out the [tutorial](https://anvil.works/learn/tutorials/feedback-form?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)!*

<br>

---

### 2. Call server-side functions from the browser

In traditional web-dev, calling from the browser to the web server is a pain. You have to set up a URL route, smush all your data into JSON, set up the AJAX request, asynchronously get a response...so much work!

With Anvil, you **just call a function.** [Add a decorator](https://anvil.works/docs/server/quickstart?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) to any function, then just call the function from browser code. Pass Python objects as arguments; return Python objects. Job done.

![](https://anvil.works/blog/img/11-reasons-python-front-end-web-development/drake.jpg)

<br>

---

### 3. The database is built-in

Setting up and maintaining a database is a drag. So Anvil has a built-in database. Design your [data tables](https://anvil.works/docs/data-tables?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) graphically, then query or update rows with Python. (Can you return a lazy paginated query response to the browser, as a Python object? Of course you can! That would be _dozens_ of lines of code in most web frameworks.)

![](https://anvil.works/blog/img/dashboard/data-table.png)
*A Data Table in Anvil*

<br>

---

### 4. Connect your code running _anywhere_

Anvil is "serverless" - your code is automatically hosted in the cloud. But what if you want to run code on your computer? Just use the [Uplink](https://anvil.works/docs/uplink?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)!

**Got a Jupyter notebook?** [Call it from the web](https://anvil.works/learn/tutorials/jupyter-notebook-to-web-app?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)!<br>**Got a local database?** [Write a local script](https://anvil.works/learn/tutorials/external-database?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) to query it, then call it from the web!

![](https://anvil.works/learn/tutorials/img/google-colab-notebook-to-web-app/google_colab_demo.gif)
*Connecting a [Google Colab notebook to a web app](https://anvil.works/learn/tutorials/google-colab-to-web-app?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)*

<br>

---

### 5. Binary data is easier to handle

"Uploading a file" is basic functionality. So it must be simple in every web framework. Right? **Surprise!** Handling binary data -- like files, images, or PDFs -- is remarkably difficult in a traditional JS app. (If you're feeling mean, try saying '[`enctype="multipart/form-data"`](https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean)' to a seasoned web developer. Watch them shiver.)

But Anvil makes it easy. All binary data (pictures, uploaded files, etc.) is represented as [a Python object](https://anvil.works/docs/media?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)! You can pass binary data as an argument to a server function. You can store it in a Data Table. You can use it with Anvil components. For example, [rendering and downloading a PDF](https://anvil.works/learn/tutorials/pdfs?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) is literally this simple:

```python
# In a server module:
@anvil.server.callable
def get_pdf():
  return anvil.pdf.render_form('Form1')
```

```python
# In the browser:
pdf = anvil.server.call('get_pdf')
download(pdf)
```

<br>

---

### 6. User authentication comes built-in

Building user authentication is tedious, but _deadly_ if you get it wrong! Half of the [OWASP](https://owasp.org) vulnerabilities are "ways you can get authentication wrong".

Anvil's built in [User Service](https://anvil.works/docs/users?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) handles signup, login, and user permissions for you, out of the box. It takes one line of Python code to present your users with a signup form with email validation -- just call `anvil.users.login_with_form()`.

As well as email login, Anvil supports [Google](https://anvil.works/docs/integrations/google?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development), [Microsoft](https://anvil.works/docs/integrations/microsoft?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development), [Facebook](https://anvil.works/docs/integrations/facebook?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development), and [SAML SSO](https://anvil.works/docs/integrations/saml?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development). (What about two-factor authentication? [Of course it works.](https://anvil.works/docs/users/two_factor_authentication?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development))

![](https://anvil.works/learn/tutorials/img/multi-user-apps/thumbnail.png)

<br>

---


### 7. Email support is built-in too

Send an email with one line of code. _Receive_ emails with one line of code! It's all built in with Anvil's [Email service](https://anvil.works/docs/email?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development).

Building an app to receive email is so simple, we did it in a **4-minute video**:

{% youtube GoLRmSKWySU %}

<br>

---


### 8. PDF generation is _also_ built-in

Did someone say "batteries included"? Create PDF documents with our drag-n-drop editor, then render and download them with a Python call.

[![](https://anvil.works/learn/tutorials/img/pdfs/pdfs-thumbnail.png)
*Tutorial: How to Create a PDF in Python*](https://anvil.works/learn/tutorials/pdfs?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)

<br>

---

### 9. Use your favorite Python packages

One of the best features of Python is the numerous packages available. With the [Full Python runtime](https://anvil.works/docs/server/packages?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development), you have access to a [long list](https://anvil.works/docs/server/packages?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) of your favorite Python libraries to build your web apps.

![](https://media2.giphy.com/media/j2wpZyLy2s70ul4TKo/giphy.gif?cid=ecf05e47az6uq49bv7hh2c2a78dzih2ed57fkmyelbbtc9lg&rid=giphy.gif)

<br>

---

### 10. You can still build HTTP APIs

Want to build an HTTP API, so non-Anvil apps can interface with your service? [Creating HTTP endpoints](https://anvil.works/docs/http-apis/creating-http-endpoints?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) is _nearly_ as simple as making functions you can call from the browser. Check out [this tutorial](https://anvil.works/learn/tutorials/http-apis-in-python?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development).

Or just watch Bridget build and deploy a JSON API in 20 seconds:

![](https://anvil.works/img/features/http-demo.gif)
*Creating and deploying a working JSON API in 20 seconds.*

<br>

---

### 11. One-click integrations

Your Anvil app can [easily connect](https://anvil.works/docs/integrations?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) to services from Google, Microsoft, Facebook, Stripe and more. Log your users in using Google, Microsoft and Facebook Single Sign-Ons, [take payments](https://anvil.works/docs/integrations/stripe?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) with Stripe, or display interactive [Google Maps](https://anvil.works/docs/client/components/maps?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development).

![Google Maps, integrated into a Python web app](https://anvil.works/img/features/map3.gif)

<br>

---

### 12. Easy encrypted storage

You don't want to leave passwords lying around in your source code. The [App Secrets](https://anvil.works/docs/security/encrypting-secret-data?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) service provides easy-to-use encrypted storage of sensitive data, like passwords or encryption keys.
    
*Learn to store encrypted data with another [4-minute tutorial](https://anvil.works/learn/tutorials/app-secrets?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development):*
{% youtube UEdLxZDglY0 %}

---

### Get Simple. Keep the Power.

Anvil gives you all the power of Python, and none of the complexity of traditional web frameworks. If you're a Python developer, you can build full-stack web apps without needing anything else.

And if you _do_ want to tweak something with HTML, CSS or JavaScript, there's always an [escape hatch](https://anvil.works/blog/escape-hatches-and-ejector-seats?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)! Use a [Javascript library](https://anvil.works/docs/client/javascript?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) from Python code, or [style your app with HTML CSS](https://anvil.works/docs/client/themes-and-styling?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development).


### Don't get locked in.

Anvil's runtime is [open source](https://anvil.works/open-source?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development), so you can take your app and deploy it anywhere. You don't even need our editor to create an Anvil app!

---

## Start Building

Anvil is free is to use, so you can start building right away! Start with [a tutorial](https://anvil.works/learn/tutorials?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) to get acquainted with Anvil or check out the [documentation](https://anvil.works/docs/overview?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development) to learn about some of Anvil's other features. 


## [Try Anvil >>](https://anvil.works/build?utm_source=crosspost:dev.to:/blog/reasons-python-front-end-web-development)