Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

Blog - Page 8

Interactive plots for your apps
26th of July 2017

New: Graphs and charts for your Anvil app

Python is the world’s favourite language for data processing and visualisation – and when you use Anvil, Python is all you need to build web apps. Today, we’re making it even easier to present your data on the web.

You can now offer interactive charts right inside your Anvil apps, built and customised in just a few lines of code. The new Plot component is powered by the Plotly Python API, so you have a wealth of examples already online to get you started.

Plots like this are simple to create, and simple to customise:

You can open this example in Anvil right now, or read the docs to learn more.

You can also find more examples in the Plotly library docs .


Try this demo now




HTTP endpoints for your apps
17th of July 2017

New: Make an API for your Anvil app

Sometimes we want to connect other programs with our Anvil apps. Whether it’s a native mobile app, a shell script, or a web service like Twilio, most things expect to make REST or plain HTTP requests.

As of today, this is all it takes to publish an HTTP API that returns some JSON:

@anvil.server.http_endpoint("/greet/:name")
def greet(name, **qs):
  return {'message': 'Hello, ' + name + '!'}

We can demonstrate it with the curl command-line program:

$ curl https://http-endpoint-demo.anvilapp.net/_/api/greet/Joanne
{"message":"Hello, Joanne!"}

You can open this example in Anvil right now, or read the docs to learn more.


Try this demo now




Make the world better? Remove some Javascript.
27th June 2017

Compiling Python to Javascript

To write full-stack web apps in nothing but Python, you need to run Python code in the browser. Watch my talk at PyCon 2017, or scroll down for a transcript:

For more information about Skulpt, check out skulpt.org.

Or you can check out the pull request that implemented these changes.

Transcript:

Back when my friend Ian and I were idealistic students, we sat down and decided to make the world a better place, as you do. And we decided that the best way two developers could make the world a better place was to remove some Javascript from it.

The web is the greatest application delivery platform on Earth, and frankly it’s a stain on our profession that you need to know five different programming languages and three different frameworks if you want to make it do anything. Really, all you should need is to be able to code - ideally, in a friendly, readable language that’s easy to learn and isn’t full of unpleasant surprises.

There was an obvious candidate.

So, we built a tool for building full-stack web applications with nothing but Python.

We built a graphical interface builder for designing your pages, and let you write your client-side code in Python - so all the buttons, text fields etc you put on your page are just Python objects. We built a back-end server environment, also in Python, and a database with a pure Python API, all deployed in the cloud in one click.

But today I want to talk about this front-end code.

If you want to drive the items on your web page as pure Python objects, you’re going to need to run Python in the browser. If you’re going to run something in the browser, it’s going to have to be in Javascript.

Thankfully, there’s a great open-source project called Skulpt, that compiles Python to Javascript. So you can write Python to drive your app, and we can compile it to Javascript so that when you publish it online, your code actually runs in a user’s browser. We give Skulpt Python objects, it represents them as Javascript objects. We give it a Python function, and it produces a Javascript function for the browser to run.

There is a problem, though. Javascript, in its infinite wisdom, is 100% non-blocking. If you kick off a process that finishes later, you’d better provide a callback.

Here’s some code you might write in Python. Go get a record from the database, and if it’s not there, throw an error.

And here’s how you’d do it in Javascript. I count three separate callbacks here. I’m not exaggerating - this is an example straight from the documentation of the postgres library!

OK, so we have a Python-to-Javascript compiler, and it’s open source. What if we could turn this into this, automatically?

So, we go "git clone", and start exploring. It turns out that Skulpt has a classic compiler architecture, modeled quite closely on CPython: There’s a parser that turns Python code into a parse tree (these are all the files in the Skulpt source tree, by the way, if you want to follow along).
Then it walks over this parse tree and makes an abstract syntax tree, which is made of elements you might recognise - like variable assignments, function definitions, function calls, and so on. Then there’s a compiler that then walks this syntax tree and spits out Javascript.

So, this is what we need to modify to implement blocking code. We invent a new Javascript class that a function can return, to say “hey, I’m returning, but I’m not done yet; I’ve just blocked”. We call this a suspension.

So, when we’re compiling the AST, wherever we’re compiling a function call, we generate Javascript code that calls the function, and looks at the return value, and says, "is it a Suspension?". Because if it returned a Suspension, we’re blocking - and I'm going to have to suspend myself. We save all our variables and temporary values, our exception state, and where we are in the function, and then we return our own suspension with all that information in it.

And so our caller will recognise that we have suspended, and so it's going to have to suspend as well, and so on all the way back to the Javascript runtime.

When that operation completes - say the database gives us a response - we resume the Suspension. We call our function with the suspension, which then restores all our variables, jumps to the right place and resumes the original suspension, which restores all of its variables, and so on, until we can resume execution as normal.

So, that’s how we take simple blocking Python, and compile it into non-blocking Javascript so you don’t have to.

This has been a quick overview; if you’re interested you can check out Skulpt at skulpt.org - I’m one of the maintainers now, and we’re always looking for new contributors.

And if you're fed up to the back teeth with all this Javascript, and you want to forget it all and write full-stack web apps with nothing but Python, please check us out at www.anvil.works.

Thank you very much!




Smart Python Code Completion
15th of February 2017

That's right. It's here.

Every coder knows the pain: You know what you need to do, but you can’t remember the name of that function, or what order it takes its parameters. It’s time to fix that problem.

We are excited to announce that from today, the Anvil web IDE includes smart code completion. Anvil knows about your forms, your components, your variables - even your data tables. Now we’re giving that information to you in real-time, as you type. Our API documentation is great, but the best docs are the ones you never have to look at. Code completion means the options are always at your fingertips.

Smart code completion is available right now - just log in and start creating!


Start Now




Python widgets in HTML layouts
5th October 2016

Speed, meet beauty.

Building a web page with drag and drop is much faster than fighting with HTML, CSS and Javascript. When we set out to build Anvil, we wanted to make it as easy to design a web app as it is to lay out a Powerpoint slide. We’ve combined drag-and-drop design with a library of prebuilt components, a built-in database and a simple Python programming environment. So far, we’re making web app development quicker and easier for people all over the world, from entrepreneurs to doctors. (Want to know more about Anvil? Read our introduction here.)

But sometimes, you need to put your best foot forward. You want to re-use your existing page design and brand assets. Or if you’re building those assets from scratch, you want pixel-perfect control over your page header. In short, you want the flexibility of traditional web design.

So, we asked: What if you could have both?

Introducing HTML templates

We’re excited to announce support for HTML templates in Anvil. You can choose from our menu of ready-to-go templates, or use your existing web design assets. Once you’ve loaded your template, development is as easy as ever: just drag and drop Anvil components into the page, and arrange them how you like. And you can drive all these components with Anvil’s straightforward Python APIs. (No Javascript required.)

Custom HTML

Anvil’s built-in templates make it easier than ever to produce a beautiful web app in record time. But if you know HTML, or have existing web assets, you can go beyond our built-in templates.

If you’re an Anvil Pro user, you can control your page down to the pixel, with any HTML or CSS you like. All you need is a couple of special attributes to tell Anvil where you can drag and drop components.

I can code my web app in Python, and employ a web designer to help me with the HTML/CSS. Anvil is without a doubt the easiest and fastest way to bring my app to life!
— Peter, Startup founder
(Yes, he actually said this)

Here’s all you need to build a drag-and-drop layout. You just need to specify where each group of components goes, and where to drag-and-drop them:

<link rel="stylesheet" href="https://anvil.works/template-assets/flower-card.css">

<div class="header" anvil-drop-slot="title">
    <div anvil-slot-repeat="title"></div>
</div>

<div class="card" anvil-slot-repeat="default" anvil-drop-here>
</div>

(Want to know how that works? Check out our documentation.)

And here’s how it looks in action:

Available now

To build an app with Anvil templates, sign up and try some of our examples, or start from scratch. We’ve got lots of video tutorials to help you out. If you’re into DIY, our reference documentation describes how to use your own HTML and CSS with Anvil.

Try it out

We’d love to hear what you think. Drop us a line at contact@anvil.works, or you can use my personal address: meredydd@anvil.works.

Learn More

Get the best out of Anvil with our free email course.