基於python詳解PyScript到底是什麼

前言:

最近 Anaconda 開大會發佈瞭 PyScript ,它允許我們將 Python 代碼嵌入到 HTML 中,並在瀏覽器中允許。PyScript 旨在為用戶提供一流的編程語言,該語言具有一致的樣式規則、更具表現力且更易於學習。

熟悉前端的朋友應該馬上就可以反應到:這就是替代 JavaScript 啊!

確實,這個功能就類似於 JavaScript,如果後面發展得好的話,我們完全可以不寫 JavaScript,直接寫 Python 也能實現一樣的效果。

這個項目出來之後,馬上躥升到 GitHub 趨勢榜榜首,短短20天已經有 10K+ 的 star 瞭,可見其熱度之高。

我們不知道 anaconda 有沒有這個野心,但是 PyScript 的出現,確實是一件振奮人心的事情,意味著你會 Python 的話,再加上前端知識,就可以寫出漂亮的前端頁面瞭。對於 Pythoner 來說,我們可以用 Python 和 HTML前端知識做全棧工程師瞭。

作用

PyScript 核心特性:

  • Python in the browser:啟用 drop-in content、外部文件托管(基於 Pyodide 項目),以及不依賴服務器端配置的應用程序托管。
  • Python 生態:提供流行的 Python 和科學計算軟件包(例如 numpy, pandas, scikit-learn 等)。
  • Python with JavaScript:在 Python 和 JavaScript 對象和命名空間之間進行雙向通信。
  • 環境管理:開發者可定義要引入哪些包和文件,以便頁面代碼的運行。
  • 可視化應用開發:開發者可使用現成的 UI 組件,如按鈕、容器、文本框等。
  • 靈活的框架:開發者可以利用它在 Python 中直接創建和分享新的可插拔和可擴展的組件。

PyScript 目標:

  • 提供幹凈簡單的 API。
  • 支持標準 HTML。
  • 擴展 HTML 以讀取穩定且可靠的自定義組件。
  • 提供可插拔、可擴展的組件系統。

使用方法

下面,我們來體驗一下這個新生事物吧!

我們可以使用 CDN 來安裝 PyScript:

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

接著,我們來看看一個簡單的頁面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 PyScript -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>First PyScript Application</title>
    <style>
        py-script {
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            position: absolute;
        }
    </style>
</head>
<body>
    <py-script>
        print('Hello PyScript!')
    </py-script>
</body>
</html>

運行這個程序,你就可以在瀏覽器頁面上看到這個結果瞭:

這就是我們著名的Hello式問候!

這段前端代碼裡面,我們直接使用py-script標簽包裹 Python 代碼,就實現前端腳本控制功能瞭。

我這裡是在 vscode 裡面運行的,運行代碼之前需要安裝Live Server這個插件,然後就可以直接瀏覽器訪問瞭。

我們再來看一個復雜一點的例子:

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" crossorigin="anonymous">
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <br>
    <div id="pi" class="alert alert-primary"></div>
    <py-script>
        import datetime as dt
        pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))

        def compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi

        pi = compute_pi(100000)
        pyscript.write('pi', f'π is approximately {pi:.3f}')
    </py-script>
  </body>
</html>

這個例子中,我們使用<py-script>標簽,在裡面提供.write()方法,將字符串寫到頁面的標簽中。

運行這段代碼,我們會看到瀏覽器頁面的結果:

我們還可以在頁面中引入 Python 的包,來實現一些簡便的操作。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>
  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
        import matplotlib.pyplot as plt
        import numpy as np
        x = np.random.randn(1000)
        y = np.random.randn(1000)

        fig, ax = plt.subplots()
        ax.scatter(x, y)
        fig
    </py-script>
  </body>
</html>

在這裡,我們引用瞭numpymatplotlib這兩個包,引用包是在<head>標簽內部通過<py-env>標簽來實現。

運行這個程序,我的頁面始終處於加載狀態:

現階段,運行帶有 PyScript 的頁面加載速度還是有點感人的,好像一下子回到瞭原始年代。所以,想要被大傢廣泛使用還有很長的路要走。

目前階段,我們還隻能繼續等待,想要嘗鮮的話,可以在去 GitHub 上看看。在公眾號後臺留言PyScript獲取項目的 GitHub 地址。

總結

項目現在還在完善階段,許多功能還沒有支持,但是從其熱度和參與貢獻的人數來看,前途還是光明的,畢竟 Python 有著這麼多的應用基礎,學會 Python 就可以寫前端, Python 的那些便捷操作庫都可以在頁面直接使用的話,會大大提高大傢的效率,我們也不用去學習現在越來越復雜的那一套前端技術瞭。

到此這篇關於基於python詳解PyScript到底是什麼的文章就介紹到這瞭,更多相關python PyScript內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: