{"id":13141,"date":"2022-07-20T12:27:20","date_gmt":"2022-07-20T12:27:20","guid":{"rendered":"https:\/\/blog.cloudthat.com\/?p=13141"},"modified":"2024-06-25T10:57:08","modified_gmt":"2024-06-25T10:57:08","slug":"pyscript-the-evolution-of-python-from-backend-to-frontend-scripting-language","status":"publish","type":"blog","link":"https:\/\/www.cloudthat.com\/resources\/blog\/pyscript-the-evolution-of-python-from-backend-to-frontend-scripting-language","title":{"rendered":"PyScript: The Evolution of Python from Backend to Frontend Scripting Language"},"content":{"rendered":"<table style=\"height: 234px;\" border=\"0\" width=\"281\">\n<tbody>\n<tr>\n<td>\n<h2><span style=\"color: #000080;\"><strong>TABLE OF CONTENT<\/strong><\/span><\/h2>\n<\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#overview\">1. Overview<\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#pyscript\">2. Introducing PyScript<\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#coreelements\">3. Core Elements of PyScript<\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#pyscriptarchitecture\">4. PyScript Architecture<\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#pyscriptcomponents\">5. PyScript Components<\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#conclusion\">6. Conclusion<\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#aboutcloudthat\">7. About CloudThat <\/a><\/td>\n<\/tr>\n<tr>\n<td><a style=\"margin-left: 20px;\" href=\"#faqs\">8. FAQs<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 id=\"overview\"><strong>Overview<\/strong><\/h2>\n<p><span style=\"color: #000000;\">Traditionally, Python is used as a backend programming language in web development. To use Python in web applications, we need to depend on Python software which is hosted on the server but now we can directly run python code from the HTML file itself.<\/span><\/p>\n<p><span style=\"color: #000000;\">Do you work as a Python developer or a data scientist? Are you envious of coders that write JavaScript code and create sophisticated browser-based websites? Don&#8217;t you think it would be great if we could develop websites in Python? Surprisingly, Anaconda&#8217;s CEO Peter Wang introduced a dazzling new technology called PyScript at PyCon US 2022, allowing users to write Python and other languages in the browser.<\/span><\/p>\n<h2 id=\"pyscript\"><strong>Introducing PyScript<\/strong><\/h2>\n<p><span style=\"color: #000000;\">PyScript is a JavaScript framework for building Python applications in the browser. That is right, just like any JavaScript developer, we can now embed Python code straight in HTML files. This project allows us to execute Python in our browser.<\/span><\/p>\n<p><span style=\"color: #000000;\">PyScript&#8217;s concept is simple: data scientists may use their chosen language to construct websites based on their models, as long as they have a basic understanding of HTML.<\/span><\/p>\n<p><span style=\"color: #000000;\">We can even host HTML files containing PyScript in the AWS cloud S3 bucket, making the HTML file dynamic instead of static. This Pyscript helps render dynamic HTML pages from the AWS Lambda service, making HTML files more robust.<\/span><\/p>\n<h2 id=\"coreelements\"><strong>Core Elements of PyScript:<\/strong><\/h2>\n<ul>\n<li><span style=\"color: #000000;\">Python in the browser: This allows us to host drop-in content, external files, and applications without requiring server-side settings<\/span><\/li>\n<li><span style=\"color: #000000;\">Python Ecosystem: Use NumPy, pandas, scikit-learn, and other popular Python and scientific stack packages<\/span><\/li>\n<li><span style=\"color: #000000;\">Environment management: Allow users to choose which packages and files should be included in order for the page code to run<\/span><\/li>\n<\/ul>\n<h2 id=\"pyscriptarchitecture\">PyScript Architecture:<\/h2>\n<p><span style=\"color: #000000;\">PyScript is written in Pyodide, which is a CPython-WebAssembly bridge.<\/span><\/p>\n<p><span style=\"color: #000000;\">CPython is a fast Python implementation developed in both Python and C.<\/span><\/p>\n<p><span style=\"color: #000000;\">WebAssembly is a low-level language that, as the name suggests, is very similar to Assembly and has incredible performance. It runs in binary format. It acts as a trans piler for the Python code you create. It comprises a human-readable.wat text format language, which is then translated to a binary.wasm format that browsers can read. We can now create code in any language, compile it to WebAssembly, and run it in a web browser.<\/span><\/p>\n<p><a href=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13142\" src=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript1.png\" alt=\"PyScript\" width=\"756\" height=\"461\" \/><\/a><\/p>\n<h2 id=\"pyscriptcomponents\">PyScript Components:<\/h2>\n<p><span style=\"color: #000000;\">PyScript uses three key components to allow us to write Python in HTML:<\/span><\/p>\n<ol>\n<li><span style=\"color: #000000;\">py-env is a Python environment variable specifying the Python packages required to run your Python code. This tag is placed in Html &lt;head&gt; tag.<\/span><br \/>\n<span style=\"color: #000000;\">Syntax:\u00a0<\/span><\/p>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true\">&lt;py-env&gt; #To declare the packages you need &lt;\/py-env&gt;<\/pre>\n<p>Example:<br \/>\n<a href=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13143\" src=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript2.png\" alt=\"PyScript\" width=\"336\" height=\"125\" \/><\/a><\/li>\n<li><span style=\"color: #000000;\">We write Python code in py-script, which is then performed within the web page.<\/span>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true \">&lt;py-script&gt; #To insert Python logic into HTML &lt;\/py-script&gt;<\/pre>\n<p><span style=\"color: #000000;\">If we like to use some python code in an external file, then we can use the syntax below:<\/span><\/p>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true \">&lt;py-script src=\u201d\/python_file.py\u201d&gt; &lt;\/py-script&gt;<\/pre>\n<\/li>\n<li><span style=\"color: #000000;\">py-repl generates a REPL (Read-Eval-Print-Loop) component that evaluates and displays the code entered by the user.<\/span>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true \">&lt;py-repl&gt; #Creates a REPL shell, where user can execute interactive python code &lt;\/py-repl&gt;<\/pre>\n<\/li>\n<\/ol>\n<h3><strong>Example 1:\u00a0<\/strong><\/h3>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/pyscript.net\/alpha\/pyscript.css\" \/&gt;\r\n&lt;script defer src=\"https:\/\/pyscript.net\/alpha\/pyscript.js\"&gt;&lt;\/script&gt;\r\n&lt;title&gt;Page Title&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;This is a Heading in HTML&lt;\/h1&gt;\r\n\r\n&lt;py-script&gt; \r\ndef hello():\r\n    print('Now you can in Python!')\r\n    a=10\r\n    b=20\r\n    return(a*b)\r\nprint(hello())\r\n&lt;\/py-script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"color: #000000;\">In the above example, we have included python related links in the head tag, and in the body, we have directly used the &lt;py-script&gt; tag to write code in Python. It will get executed, and the output will be displayed in UI.<\/span><\/p>\n<p><a href=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13144\" src=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript3.png\" alt=\"PyScript\" width=\"425\" height=\"119\" \/><\/a><\/p>\n<h3><strong>Example 2:\u00a0<\/strong><\/h3>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true\">&lt;html&gt;\r\n    &lt;head&gt;\r\n      &lt;link rel=\"stylesheet\" href=\"https:\/\/pyscript.net\/alpha\/pyscript.css\" \/&gt;\r\n      &lt;script defer src=\"https:\/\/pyscript.net\/alpha\/pyscript.js\"&gt;&lt;\/script&gt;\r\n      &lt;py-env&gt;\r\n        - numpy\r\n        - matplotlib\r\n      &lt;\/py-env&gt;\r\n    &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n    &lt;h1&gt;Plotting a histogram of Standard Normal distribution&lt;\/h1&gt;\r\n    &lt;div id=\"plot\"&gt;&lt;\/div&gt;\r\n    &lt;py-script output=\"plot\"&gt;\r\nimport matplotlib.pyplot as plt\r\nimport numpy as np\r\n\r\nnp.random.seed(42)\r\n\r\nrv = np.random.standard_normal(1000)\r\n\r\nfig, ax = plt.subplots()\r\nax.hist(rv, bins=30)\r\nfig\r\n\r\n    &lt;\/py-script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"color: #000000;\">In this example, we are using numpy and matplotlib. So we need to declare them in &lt;py-env&gt; tag and then we can import and use them directly from our &lt;py-script&gt; tag. This way, we can use this to display statistical data on the screen, as shown below output.<\/span><\/p>\n<p><a href=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13145\" src=\"https:\/\/d1f7lmxeo98xps.cloudfront.net\/resources\/wp-content\/uploads\/2022\/11\/PyScript4.png\" alt=\"PyScript\" width=\"711\" height=\"574\" \/><\/a><\/p>\n<h3 id=\"conclusion\"><strong>Conclusion:<\/strong><\/h3>\n<p><span style=\"color: #000000;\">PyScript is still in the early stages of development. Several documented concerns range from usability to loading times and expect things to change frequently. We can use this to experiment with statistical data using PyScript to display charts directly in UI, but it is not suggested that utilize it for production at this time.<\/span><\/p>\n<h3 id=\"aboutcloudthat\"><strong>About CloudThat<\/strong><\/h3>\n<p><span style=\"color: #000000;\"><a href=\"https:\/\/www.cloudthat.com\/\"><strong>CloudThat\u00a0<\/strong><\/a>is\u00a0the official AWS Advanced Consulting Partner, Microsoft Gold Partner, and Training partner helping people develop knowledge on the cloud and help their businesses aim for higher goals using best in industry cloud computing practices and expertise. We are on a mission to build\u00a0a robust\u00a0cloud computing ecosystem by disseminating\u00a0knowledge on technological intricacies within the cloud space.\u00a0Our blogs, webinars,\u00a0case studies, and white papers\u00a0enable all the stakeholders in the cloud computing sphere.<\/span><\/p>\n<p><span style=\"color: #000000;\">If you have any queries about PyScript, Python Language, or anything related to Javascript, feel free to drop in a comment. We will get back to you quickly. Visit our\u00a0<a href=\"https:\/\/www.cloudthat.com\/consulting\/\" target=\"_blank\" rel=\"noopener\"><strong>Consulting Page<\/strong><\/a>\u00a0for more updates on our customer offerings, expertise, and cloud services.<\/span><\/p>\n<h3 id=\"faqs\"><strong>FAQs:<\/strong><\/h3>\n<ol>\n<li><span style=\"text-decoration: underline; color: #000000;\"><strong>Do we need to install Python in our System\/hosted server?<\/strong><\/span><\/li>\n<\/ol>\n<p><span style=\"color: #000000;\">No, we do not need Python to be installed in our application-hosted platform. We only need to include the script link in our HTML code, and that&#8217;s it.\u00a0<\/span><\/p>\n<pre class=\"theme:dark-terminal nums:false nums-toggle:false lang:default decode:true \">&lt;link rel=\"stylesheet\" href=\"https:\/\/pyscript.net\/alpha\/pyscript.css\" \/&gt;\r\n&lt;script defer src=\"https:\/\/pyscript.net\/alpha\/pyscript.js\"&gt;&lt;\/script&gt;<\/pre>\n<p><span style=\"color: #000000;\">The link will act as a CDN, and our Python code gets executed from the browser directly without installing Python software.<\/span><\/p>\n<ol start=\"2\">\n<li><span style=\"text-decoration: underline; color: #000000;\"><strong>How to install a package to import it in Py Script?<\/strong><\/span><\/li>\n<\/ol>\n<p><span style=\"color: #000000;\">We can mention all the packages that are required in the &lt;py-env&gt; tag in HTML, which loads the package in our environment so that we can directly import it into PyScript.<\/span><\/p>\n<ol start=\"3\">\n<li><span style=\"text-decoration: underline; color: #000000;\"><strong>Can we use JavaScript besides PyScript in our HTML code?<\/strong><\/span><\/li>\n<\/ol>\n<p><span style=\"color: #000000;\">Yes, we can use JS and PyScript code in our HTML file in their script tags.<\/span><\/p>\n","protected":false},"author":281,"featured_media":13535,"parent":0,"comment_status":"open","ping_status":"open","template":"","blog_category":[3606,3607],"user_email":"pattan.i@cloudthat.com","published_by":"324","primary-authors":"","secondary-authors":"","acf":[],"_links":{"self":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog\/13141"}],"collection":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/users\/281"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/comments?post=13141"}],"version-history":[{"count":1,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog\/13141\/revisions"}],"predecessor-version":[{"id":43417,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog\/13141\/revisions\/43417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/media?parent=13141"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.cloudthat.com\/resources\/wp-json\/wp\/v2\/blog_category?post=13141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}