Daniel Adeboye

Full Stack Web Development With Python

Full Stack Web Development With Python

Daniel Adeboye's photo
Daniel Adeboye
·

2 min read

The era of using JavaScript alongside Python to create a full stack web application is slowly coming to an end, With the introduction of PyScript Python developers now can run python code in the browser 😲, read further to know more about PyScript.

What is PyScript ?

PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface. PyScript aims to give users a first-class programming language that has consistent styling rules, is more expressive, and is easier to learn.

Features that PyScript provide

  • Python in the browser: Enable drop-in content, external file hosting (made possible by the Pyodide project, thank you!), and application hosting without the reliance on server-side configuration.
  • Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more).
  • Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces. - Environment management: Allow users to define what packages and files to include for the page code to run
  • Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
  • Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

How to use PyScript

For you to use PyScript you need to download the PyScript zip file or use the PyScript CDN link, in this article we would be utilizing the CDN link since it's faster, below are the CDN links that PyScript provides 

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Now you have the CDN links let's run our python code in the browser

<html>
   <head>
     <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
     <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   </head>

   <body>
     <py-script> print('Now you can!') </py-script>
   </body>
</html>

Result:

Screenshot 2022-05-04 155826.png You might be wondering how i came about the <py-script> tag, it's a tag which PyScript provides can find out more about the tag here.

Now that you have seen how PyScript is about to take over the world, quickly check it out and let me know about your experience playing around with it.

PythonWeb DevelopmentJavaScriptwebdevweb