Running Python in the Browser with WebAssembly

The Python community has been discussing the best way to make Python a first-class citizen in the modern web browser for a long time. The biggest challenge is the fact that web browsers really only support one programming language: JavaScript. However, as web technologies have advanced, we have pushed more and more applications to the web like games, scientific visualizations, and audio and video editing software. This means that we have brought heavy computations to the web -- something that JavaScript wasn't designed for. All these challenges raised the need for a low-level language for the web that can offer fast, portable, compact, and secure execution. As result, major browser vendors worked on this idea and introduced WebAssembly to the world, back in 2017.

In this tutorial, we'll look at how WebAssembly can help you run Python code in the browser.

To be clear JavaScript is a powerful programming language in itself. It's just not meant for certain things. For more on this, check out From ASM.JS to WebAssembly by Brendan Eich, the creator of JavaScript.

What We're Building

Let's say you want to teach a Python course. To make your course more interesting and fun, after each lesson you want to include an exercise for your students, so they can practice what they've learned.

The issue here is that the students need to prepare a development environment by installing a specific version of Python, creating and activating a virtual environment, and installing all the necessary packages. This can consume a lot of time and effort. It's also difficult to provide exact instructions on this since every machine is different.

While you could create a back-end to run the submitted code in a Docker container or perhaps an AWS Lambda function, you opt to keep the stack simple and add a Python editor in the course content that can run Python code on the client-side, in the web browser, and show the result to the users. This is exactly what you'll be building in this tutorial:

Final WASM App

Check out the live demo here. You can also see a React version of it at wasmeditor.com.

WebAssembly

Based on the definition from the Mozilla Developer Network (MDN) Docs, WebAssembly (WASM) is:

A new type of code that can be run in modern web browsers and provides new features and major gains in performance. It is not primarily intended to be written by hand, rather it is designed to be an effective compilation target for source languages like C, C++, Rust, etc.

So WASM let's us run code written in different languages (not only JavaScript) in the browser with the following benefits:

  1. It's fast, efficient, and portable.
  2. It's secure since the code is run in a safe sandbox execution environment.
  3. It can be run on the client-side.

So, in our example above, we don't need to worry if the users run the code on our server and we don't need to be worried if thousands of students try the practice code since the code execution happens on the client-side, in the web browser.

WebAssembly wasn't designed to kill JavaScript. It's complementary to JavaScript. It can be used when JavaScript isn't the right tool, like for games, image recognition, and image/video editing, to name a few.

See Use Cases from WebAssembly.org for more on when you may want to leverage WebAssembly.

Pyodide

This tutorial uses the Pyodide library to run Python code, which compiles the CPython interpreter to WebAssembly and runs the binary in the browser's JavaScript environment. It comes with a number of pre-installed Python packages. You can also use Micropip to use even more packages that don't come by default.

Hello World

Create a new HTML file with the following code:

<head>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
  <script>
    async function main() {
      let pyodide = await loadPyodide({
        indexURL : "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/"
      });
      console.log(pyodide.runPython("print('Hello, world from the browser!')"));
    };
    main();
  </script>
</head>

Open the file in your browser. Then, within the console in your browser's developer tools, you should do something like:

Loading distutils
Loading distutils from https://cdn.jsdelivr.net/pyodide/v0.20.0/full/distutils.js
Loaded distutils
Python initialization complete
Hello, world from the browser!

As you can see, the last line is the result of the Python code execution in the browser.

Let's take a quick look at the code above:

  1. First, you can download and install Pyodide using either a CDN or directly from GitHub releases.
  2. loadPyodide loads and initializes the Pyodide wasm module.
  3. pyodide.runPython takes Python code as a string and returns the result of the code.

Pyodide Advantages

In the previous example, you saw how easy it is to install Pyodide and start using it. You just need to import pyodide.js from the CDN and initialize it via loadPyodide. After that, you can use pyodide.runPython("Your Python Code Here") to run your Python code in the browser.

When you first download Pyodide, the download size is big since you're downloading the full CPython interpreter, but your browser will cache it and you don't need to download it again.

There's also a large, active community of folks working on Pyodide:

  1. Pyodide roadmap
  2. Open Issues on GitHub
  3. Gitter Community

Pyodide Limitations

To load Pyodide the first time, it will take four or five seconds (depending on your connection) since you have to download ~10MB. Also, Pyodide code runs around 3x to 5x slower than native Python.

Other Options

In general, if you want to run Python in the browser, you have two approaches available:

  1. Use a transpiler to convert Python to JavaScript. Brython, Transcrypt, and Skulpt all use this approach.
  2. Convert the Python runtime for use in the browser. Pyodide and PyPy.js use this approach.

One main difference between option one and two is that the mentioned libraries in option one don't support Python packages. That said, their download size is much smaller than the libraries in option two and, consequently, they're faster.

We went with Pyodide for this tutorial because it has easier syntax and it supports Python packages. If you're interested in other options feel free to check their documentation.

Python Code Editor

In this section, we'll create a simple Python editor that can run code in the browser using:

  1. Pyodide
  2. CodeMirror
  3. Flask

Create a new project:

$ mkdir python_editor_wasm
$ cd python_editor_wasm

Create and activate a virtual environment:

$ python3.10 -m venv env
$ source env/bin/activate
(env)$

Install Flask:

(env)$ pip install Flask

In the root of the project create a file called app.py and add the following code:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

Create a "templates" folder at the root of our project, and under it add index.html file.

templates/index.html:

<!doctype html>
<html class="h-full bg-slate-900">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- install tailwindcss from cdn, don't do this for production application -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- install pyodide version 0.20.0 -->
  <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
  <!-- import codemirror stylings -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
  <!-- install codemirror.js version /5.63.3 from cdn -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/codemirror.min.js"
  integrity="sha512-XMlgZzPyVXf1I/wbGnofk1Hfdx+zAWyZjh6c21yGo/k1zNC4Ve6xcQnTDTCHrjFGsOrVicJsBURLYktVEu/8vQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- install codemirror python language support -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/mode/python/python.min.js"
  integrity="sha512-/mavDpedrvPG/0Grj2Ughxte/fsm42ZmZWWpHz1jCbzd5ECv8CB7PomGtw0NAnhHmE/lkDFkRMupjoohbKNA1Q=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- import codemirror dracula theme styles from cdn -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/theme/dracula.css"/>
  <style>
    /* set codemirror ide height to 100% of the textarea */
    .CodeMirror {
      height: 100%;
    }
  </style>
</head>
<body class="h-full overflow-hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
  <p class="text-slate-200 text-3xl my-4 font-extrabold mx-2 pt-8">Run Python in your browser</p>
  <div class="h-3/4 flex flex-row">
    <div class="grid w-2/3 border-dashed border-2 border-slate-500 mx-2">
      <!-- our code editor, where codemirror renders it's editor -->
      <textarea id="code" name="code" class="h-full"></textarea>
    </div>
    <div class="grid w-1/3 border-dashed border-2 border-slate-500 mx-2">
      <!-- output section where we show the stdout of the python code execution -->
      <textarea readonly class="p-8 text-slate-200 bg-slate-900" id="output" name="output"></textarea>
    </div>
  </div>
  <!-- run button to pass the code to pyodide.runPython() -->
  <button onclick="evaluatePython()" type="button" class="mx-2 my-4 h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-green-700 hover:bg-green-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-700 text-slate-300">Run</button>
  <!-- clean the output section -->
  <button onclick="clearHistory()" type="button" class="mx-2 my-4 h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-red-700 hover:bg-red-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-700 text-slate-300">Clear History</button>
  <script src="/static/js/main.js"></script>
</body>
</html>

In the head of the index.html file, we imported Tailwind CSS for styling, Pyodide.js version 0.20.0, and CodeMirror and its dependencies.

The UI has three important components:

  1. Editor: Where users can write Python code. It's a textarea HTML element with the id of code. When we initialized codemirror, we let it know that we want to use this element as a code editor.
  2. Output: Where the output of the code will be displayed. It's a textarea element with the id of output. When Pyodide executes Python code, it will output the result to this element. We displayed an error messages in this element as well.
  3. Run button: When users click on this button, we grab the value of the editor element and pass it as a string to pyodide.runPython. When pyodide.runPython returns the result we display it in the output element.

Now in the root of the project, create "static/js" folders. Then, under the "js" folder, create a new file called main.js.

static/js/main.js:

// find the output element
const output = document.getElementById("output");

// initialize codemirror and pass configuration to support Python and the dracula theme
const editor = CodeMirror.fromTextArea(
  document.getElementById("code"), {
    mode: {
      name: "python",
      version: 3,
      singleLineStringErrors: false,
    },
    theme: "dracula",
    lineNumbers: true,
    indentUnit: 4,
    matchBrackets: true,
  }
);
// set the initial value of the editor
editor.setValue("print('Hello world')");
output.value = "Initializing...\n";

// add pyodide returned value to the output
function addToOutput(stdout) {
  output.value += ">>> " + "\n" + stdout + "\n";
}

// clean the output section
function clearHistory() {
  output.value = "";
}

// init pyodide and show sys.version when it's loaded successfully
async function main() {
  let pyodide = await loadPyodide({
    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/",
  });
  output.value = pyodide.runPython(`
    import sys
    sys.version
  `);
  output.value += "\n" + "Python Ready !" + "\n";
  return pyodide;
}

// run the main function
let pyodideReadyPromise = main();

// pass the editor value to the pyodide.runPython function and show the result in the output section
async function evaluatePython() {
  let pyodide = await pyodideReadyPromise;
  try {
    pyodide.runPython(`
      import io
      sys.stdout = io.StringIO()
    `);
    let result = pyodide.runPython(editor.getValue());
    let stdout = pyodide.runPython("sys.stdout.getvalue()");
    addToOutput(stdout);
  } catch (err) {
    addToOutput(err);
  }
}

Here, we:

  1. Initialized CodeMirror with support for Python and the Dracula theme.
  2. Initialized Pyodide.
  3. Added a function called evaluatePython that executes when the user clicks on the Run button. It passes the value of the code element to pyodide.runPython and displays the results in the output element via addToOutput.
  4. Added a function called clearHistory that clears the output element when the user clicks on the Clear History button.

To run the Flask development server locally, run:

(env)$ flask run

The server should now be running on port 5000. Navigate to http://127.0.0.1:5000 in your browser to test out the code editor.

Conclusion

In this tutorial, we barely touched the tip of the iceberg with both Pyodide and WebAssembly. We saw how we can use WebAssembly to run Python code in the browser, but WebAssembly, in general, covers broader use cases.

Our deployment platforms are more varied than ever and we simply cannot afford the time and money to rewrite software for multiple platforms constantly. WebAssembly can impact the worlds of client-side web development, server-side development, games, education, cloud computing, mobile platforms, IoT, serverless, and many more.

The goal of WebAssembly is to deliver software that is fast, safe, portable, and compact.

You can find the code repo here.

Original article source at: https://testdriven.io/blog/python-webassembly/

#python #webassembly #browser 

What is GEEK

Buddha Community

Running Python in the Browser with WebAssembly
Ray  Patel

Ray Patel

1619510796

Lambda, Map, Filter functions in python

Welcome to my Blog, In this article, we will learn python lambda function, Map function, and filter function.

Lambda function in python: Lambda is a one line anonymous function and lambda takes any number of arguments but can only have one expression and python lambda syntax is

Syntax: x = lambda arguments : expression

Now i will show you some python lambda function examples:

#python #anonymous function python #filter function in python #lambda #lambda python 3 #map python #python filter #python filter lambda #python lambda #python lambda examples #python map

Shardul Bhatt

Shardul Bhatt

1626775355

Why use Python for Software Development

No programming language is pretty much as diverse as Python. It enables building cutting edge applications effortlessly. Developers are as yet investigating the full capability of end-to-end Python development services in various areas. 

By areas, we mean FinTech, HealthTech, InsureTech, Cybersecurity, and that's just the beginning. These are New Economy areas, and Python has the ability to serve every one of them. The vast majority of them require massive computational abilities. Python's code is dynamic and powerful - equipped for taking care of the heavy traffic and substantial algorithmic capacities. 

Programming advancement is multidimensional today. Endeavor programming requires an intelligent application with AI and ML capacities. Shopper based applications require information examination to convey a superior client experience. Netflix, Trello, and Amazon are genuine instances of such applications. Python assists with building them effortlessly. 

5 Reasons to Utilize Python for Programming Web Apps 

Python can do such numerous things that developers can't discover enough reasons to admire it. Python application development isn't restricted to web and enterprise applications. It is exceptionally adaptable and superb for a wide range of uses.

Robust frameworks 

Python is known for its tools and frameworks. There's a structure for everything. Django is helpful for building web applications, venture applications, logical applications, and mathematical processing. Flask is another web improvement framework with no conditions. 

Web2Py, CherryPy, and Falcon offer incredible capabilities to customize Python development services. A large portion of them are open-source frameworks that allow quick turn of events. 

Simple to read and compose 

Python has an improved sentence structure - one that is like the English language. New engineers for Python can undoubtedly understand where they stand in the development process. The simplicity of composing allows quick application building. 

The motivation behind building Python, as said by its maker Guido Van Rossum, was to empower even beginner engineers to comprehend the programming language. The simple coding likewise permits developers to roll out speedy improvements without getting confused by pointless subtleties. 

Utilized by the best 

Alright - Python isn't simply one more programming language. It should have something, which is the reason the business giants use it. Furthermore, that too for different purposes. Developers at Google use Python to assemble framework organization systems, parallel information pusher, code audit, testing and QA, and substantially more. Netflix utilizes Python web development services for its recommendation algorithm and media player. 

Massive community support 

Python has a steadily developing community that offers enormous help. From amateurs to specialists, there's everybody. There are a lot of instructional exercises, documentation, and guides accessible for Python web development solutions. 

Today, numerous universities start with Python, adding to the quantity of individuals in the community. Frequently, Python designers team up on various tasks and help each other with algorithmic, utilitarian, and application critical thinking. 

Progressive applications 

Python is the greatest supporter of data science, Machine Learning, and Artificial Intelligence at any enterprise software development company. Its utilization cases in cutting edge applications are the most compelling motivation for its prosperity. Python is the second most well known tool after R for data analytics.

The simplicity of getting sorted out, overseeing, and visualizing information through unique libraries makes it ideal for data based applications. TensorFlow for neural networks and OpenCV for computer vision are two of Python's most well known use cases for Machine learning applications.

Summary

Thinking about the advances in programming and innovation, Python is a YES for an assorted scope of utilizations. Game development, web application development services, GUI advancement, ML and AI improvement, Enterprise and customer applications - every one of them uses Python to its full potential. 

The disadvantages of Python web improvement arrangements are regularly disregarded by developers and organizations because of the advantages it gives. They focus on quality over speed and performance over blunders. That is the reason it's a good idea to utilize Python for building the applications of the future.

#python development services #python development company #python app development #python development #python in web development #python software development

Art  Lind

Art Lind

1602968400

Python Tricks Every Developer Should Know

Python is awesome, it’s one of the easiest languages with simple and intuitive syntax but wait, have you ever thought that there might ways to write your python code simpler?

In this tutorial, you’re going to learn a variety of Python tricks that you can use to write your Python code in a more readable and efficient way like a pro.

Let’s get started

Swapping value in Python

Instead of creating a temporary variable to hold the value of the one while swapping, you can do this instead

>>> FirstName = "kalebu"
>>> LastName = "Jordan"
>>> FirstName, LastName = LastName, FirstName 
>>> print(FirstName, LastName)
('Jordan', 'kalebu')

#python #python-programming #python3 #python-tutorials #learn-python #python-tips #python-skills #python-development

Art  Lind

Art Lind

1602666000

How to Remove all Duplicate Files on your Drive via Python

Today you’re going to learn how to use Python programming in a way that can ultimately save a lot of space on your drive by removing all the duplicates.

Intro

In many situations you may find yourself having duplicates files on your disk and but when it comes to tracking and checking them manually it can tedious.

Heres a solution

Instead of tracking throughout your disk to see if there is a duplicate, you can automate the process using coding, by writing a program to recursively track through the disk and remove all the found duplicates and that’s what this article is about.

But How do we do it?

If we were to read the whole file and then compare it to the rest of the files recursively through the given directory it will take a very long time, then how do we do it?

The answer is hashing, with hashing can generate a given string of letters and numbers which act as the identity of a given file and if we find any other file with the same identity we gonna delete it.

There’s a variety of hashing algorithms out there such as

  • md5
  • sha1
  • sha224, sha256, sha384 and sha512

#python-programming #python-tutorials #learn-python #python-project #python3 #python #python-skills #python-tips

How To Compare Tesla and Ford Company By Using Magic Methods in Python

Magic Methods are the special methods which gives us the ability to access built in syntactical features such as ‘<’, ‘>’, ‘==’, ‘+’ etc…

You must have worked with such methods without knowing them to be as magic methods. Magic methods can be identified with their names which start with __ and ends with __ like init, call, str etc. These methods are also called Dunder Methods, because of their name starting and ending with Double Underscore (Dunder).

Now there are a number of such special methods, which you might have come across too, in Python. We will just be taking an example of a few of them to understand how they work and how we can use them.

1. init

class AnyClass:
    def __init__():
        print("Init called on its own")
obj = AnyClass()

The first example is _init, _and as the name suggests, it is used for initializing objects. Init method is called on its own, ie. whenever an object is created for the class, the init method is called on its own.

The output of the above code will be given below. Note how we did not call the init method and it got invoked as we created an object for class AnyClass.

Init called on its own

2. add

Let’s move to some other example, add gives us the ability to access the built in syntax feature of the character +. Let’s see how,

class AnyClass:
    def __init__(self, var):
        self.some_var = var
    def __add__(self, other_obj):
        print("Calling the add method")
        return self.some_var + other_obj.some_var
obj1 = AnyClass(5)
obj2 = AnyClass(6)
obj1 + obj2

#python3 #python #python-programming #python-web-development #python-tutorials #python-top-story #python-tips #learn-python