你还在前端使用 JavaScript 吗?将 Python 用于您的前端项目
近三年来,JavaScript 一直是前端开发的事实上的语言。对于后端,无数其他语言被创造、普及,然后在被遗忘的语言的角落里腐烂。但是 JavaScript 不仅仍然是第一、第二和第三前端语言,它已经发展到为现代 Web 提供所需的功能。
然而,情况已不再如此,JavaScript 有一个竞争者,它的领域不再安全,而且你可能已经熟悉这种试图在前端世界中为自己命名的新语言:Python。
没错,我说 Python 可以用于前端开发,就像 JavaScript 一样,这是一种过于复杂的说法。不是因为浏览器决定为它包含一个运行时,而是因为用户已经在 JavaScript 中创建了功能齐全的 Python 解释器 — 哦,具有讽刺意味!
因此,事不宜迟,这里有三个选项供您选择,以使用 Python 的强大功能从头开始启动所有 Web 应用程序。
雕刻
是的,这不是拼写错误,这就是这个库的拼写方式。
Skulpt是 Python 的完整浏览器内运行时,与 Python 3 兼容。
它目前位于 0.10 版本(如果您考虑一下,我早在 2013 年就开始在生产环境中使用 Node.js,它也位于 0.10 版本)。
有趣的地方
Skulpt 肯定正在积极开发中,这不是一个小壮举。其中一些“外在”项目有时听起来不错,但由于没有吸引力,它们被创造者抛在了后面。
然而,快速浏览一下 Skulpt 的存储库就会发现,它在过去 5 年里一直在进行中,最近一次提交是在不到一周前。所以,主动:check。
它也被证明有点受欢迎,只有不到 3k 颗星(在撰写本文时为 2.9k)。还有很多活跃和封闭的问题,这往往意味着它背后有一个用户社区。所以,被使用并且有点流行:check.
谁在用?
这就是我泡沫破灭的地方,我找不到任何证据表明它被用于日常项目,例如 JavaScript。事实上,在他们的画廊页面上列出的大多数项目都是教育网站。意思是,与 Python 交互的地方可能是一个加分项,因为他们教 Python。
这不是一件坏事,事实上,它很好地证明了它按预期工作。它只需要更广泛的采用。
不太酷的部分
据我所知,为了能够在前端项目中使用 Python,您需要大量的 JavaScript。本质上,除了导入所需的预期库之外,您还需要找到一种方法来捕获 Python 代码并调用所需的方法来解析和执行它。
以下是取自他们网站的一个工作示例:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://www.skulpt.org/js/skulpt.min.js" type="text/javascript"></script>
<script src="http://www.skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// output functions are configurable. This one just appends some text
// to a pre element.
function outf(text) {
var mypre = document.getElementById("output");
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
var prog = document.getElementById("yourcode").value;
var mypre = document.getElementById("output");
mypre.innerHTML = '';
Sk.pre = "output";
Sk.configure({output:outf, read:builtinRead});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
</script>
<h3>Try This</h3>
<form>
<textarea id="yourcode" cols="40" rows="10">import turtle
t = turtle.Turtle()
t.forward(100)
print "Hello World"
</textarea><br />
<button type="button" onclick="runit()">Run</button>
</form>
<pre id="output" ></pre>
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas"></div>
</body>
</html>
它的输出如下所示:

单击“运行”按钮时,会出现“Hello World”消息并绘制箭头。注意需要多少 JS 代码来捕获然后运行 Python 代码。这是我在 Skulpt 中发现的唯一问题。
当然,这个库还在大量开发中,如果你认为你可以帮助改善开发者体验,去帮助他们!
布莱顿
Brython是用于 Web 的 Python 3 实现。它直接在浏览器上运行,就像 Skulpt 一样,但它的方法有点不同。
Brython 库不是用 JavaScript 编写运行时,而是将 Python 转换为 JavaScript,这意味着您可以通过添加到语言中的扩展 API 直接访问 DOM(因为 Python 没有 DOM 的概念,当然)。
有趣的地方
Brython 最酷的部分之一是它的开发者体验。与 Skulpt 不同,您需要大量 JS 代码来运行 Python,Brython 允许您编写 Python 脚本并像使用 JS 脚本一样导入它们。
只需查看他们主页上的源代码:

那是一个<script type="text/python">标签!这是完整的 Python 代码,就在浏览器上。运行所有 Python 所需的唯一样板代码只是body标签上的单个函数调用:

这是您唯一需要的 JavaScript。
与现有库交互
您将 Python 转换为 JavaScript 的事实还允许您直接从 Python 代码与现有的 JavaScript 库进行交互,这也是一个巨大的优势,因为它使您可以访问最先进的前端解决方案-结束开发,而无需创建自己的 Python 版本。
例如这里你可以从 Brython 直接看到 Vue.js 是如何使用的:

Brython 在浏览器上提供 Python 的方法非常透明,这真的让我想在我的下一个项目中尝试一下。如果您对此感到好奇,可以查看他们的在线编辑器,它不仅可以让您尝试一切,还可以向您展示生成的 JavaScript。
如果你仔细想想,Brython 为 Python 所做的就像 Node.js 为 JavaScript 所做的一样。它为开发人员提供了在项目中端到端使用相同语言的能力。具有在环境之间共享逻辑组件的额外好处。如果您是一名 Python 开发人员,那么您应该研究他的项目。
铁砧
最后,我想介绍Anvil,您可以将其视为 Brython 和 Skulpt 的最终演变。
从本质上讲,Anvil 是一个完整的 Web 应用程序开发环境,您可以只使用 Python 来编写后端和前端代码。不仅如此,它还允许您使用拖放工具设计 UI,并且它可以自托管您的应用程序。

图片取自 anvil.work
Anvil 为您的前端需求提供了 Python 3.7,就像 Brython 一样,它被转换为 JavaScript。
他们甚至提供了一个集成的 Postgres 数据库供您使用,而无需进行任何设置。
它有什么有趣的地方?
就像我说的,Anvil 是一个集成开发环境。他们旨在为您提供创建 Python 应用程序所需的一切。不仅如此,他们还通过提供自托管选项、与 Google(即 google 文档、驱动器等)、Microsoft(Azure REST API 等)、Facebook 的 Auth、Stripe 的服务的内置集成更进一步(以付款为例)等。
他们的一键式部署听起来也很有趣,解决了将您的应用程序投入生产所需的任何潜在麻烦。即使您确实想完成该过程,他们的应用服务器也是开源的,这意味着您可以导出代码,并在您自己的环境中使用他们的服务器。
有什么问题吗?
好吧,这不一定是_错误_,但正如您可以想象的那样,虽然他们提供免费套餐,但如果您打算使用全套服务,那么您需要付费。
最便宜的选择,可以让你摆脱他们的品牌并获得一些不错的功能,每月 49 美元。所以,对于一个单独的开发者来说,测试东西是相当昂贵的。但是,如果您要测试一些东西,您可以使用免费套餐进行测试。
这是我能找到的关于 Anvil 的唯一骗局。除此之外,文档本身非常庞大,并提供了很多示例,因此您拥有入门所需的一切。
如果您喜欢到目前为止所读到的内容,请考虑订阅我的免费通讯“老开发者的漫谈”,并直接在您的收件箱中获得有关 IT 行业的定期建议
谁在用?
虽然他们的 Github 存储库确实没有表现出 Brython 的存储库所显示的爱,但许多公司已经使用 Anvil 的企业版来快速启动自己的业务。
-
LighthingAI使用它们在创纪录的时间内快速创建了他们的 UI 的第一个版本。
-
RiskTV使用 Anvil 在不到一个月的时间内在其现有数据的基础上创建了一个客户支持系统。
你可以明白,他们没有展示任何使用他们的系统的大人物,但相反,看起来 Anvil 非常适合寻求快速原型解决方案的工具的初创公司或公司。之所以如此,是因为考虑到他们的 UI 工具和单一编程语言要求,如果您了解 Python,您将拥有所需的所有工具。使用 Anvil,您可以起步,然后使用您需要的技术堆栈慢慢构建最终版本。
Python 是一种非常强大的语言,目前在人工智能和机器学习等领域获得了广泛的应用。然而,在 JavaScript 出现之前,它就被用于后端 Web 开发,现在,借助此处列出的工具,您还可以将这些知识应用到您的前端。
这是否意味着 JavaScript 已经计算了它的天数?我几乎不怀疑这一点,但是,我确实认为,如果更多的人知道像 Brython 和 Anvil(抱歉 Skulpt)这样的解决方案,将会有更多的人使用 Python 作为前端。
那你呢?您是否看到在浏览器上使用 Python 优于 JavaScript 的好处?你愿意试一试吗?
更多推荐

所有评论(0)