از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای مقدماتی برایتون
سرفصلهای مطلب
معرفی
هنگام توسعه برنامه های کاربردی وب – ما معمولاً از چندین فناوری و زبان استفاده می کنیم. یک بکاند به راحتی میتواند در جاوا (Spring Boot)، پایتون (Django یا Flask) یا جاوا اسکریپت (Node.js) ساخته شود، اگرچه قسمت جلویی معمولاً در جاوا اسکریپت (React، Angular و غیره) انجام میشود. گاهی اوقات، ما حتی از رویکرد ترکیبی استفاده از صفحات رندر شده در سمت سرور، با آخرین تاچ آپ ها در فریم ورک های فرانت اند مانند React استفاده می کنیم.
در طول سالها، با توجه به شیوع آن روی وب – جامعه جاوا اسکریپت عملکرد اصلی را برای فعال کردن بکاندهای مبتنی بر جاوا اسکریپت، از جمله قسمتهای جلویی، گسترش داد. رایج ترین راه برای کدنویسی برنامه های کاربردی وب در جاوا اسکریپت استفاده از آن است منظور داشتن پشته. یک پایگاه داده MongoDB، Node.js با Express.js برای back-end و Angular (یا اخیراً React) برای front-end.
اما اگر شما واقعا ترجیح می دهند برای توسعه برنامه های خود با استفاده از پایتون؟ در حالی که به شدت متمرکز است روی یک زبان برنامه نویسی توصیه نمی شود – زبان ها ابزار هستند و ثابت می شوند روی یک ابزار شما را کمتر انعطاف پذیر می کند – هنوز فضایی برای برنامه های تک زبانه وجود دارد.
برایتون شاید راه حل باشد! این یک کتابخانه جاوا اسکریپت است که به شما امکان می دهد کدهای پایتون را در مرورگر خود اجرا کنید.
احتمالا حدس زدید، برایتون مخفف برادرمالک Python
همانطور که از نام آن پیداست، هدف اصلی برایتون جایگزینی جاوا اسکریپت و فشار دادن پایتون به عنوان زبان برنامه نویسی اولیه برای مرورگرهای وب، برای برنامه شما است:
<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
import browser
browser.document <= "Hello world!"
</script>
</body>
</html>
این <script>
که معمولا پشتیبانی نمی کند text/python
نوع می تواند تفسیر کند پایتون کدی که نوشته ایم در اینجا، ما یک چاپ کرده ایم سلام دنیا پیام به browser.document
، که مشابه جاوا اسکریپت است document
.
در این راهنمای مقدماتی برایتون – ما نگاهی به روش نصب Brython، روش مقداردهی اولیه پروژه Brython، روش استایل دادن به صفحات و همچنین مقایسه آن با برخی از گزینه ها خواهیم داشت.
روش نصب Brython
استفاده از شبکه های تحویل محتوا
احتمالا راحت ترین راه برای نصب بریتون، در واقع، نصب نکردن آن است. اگر نیازی به نصب آن به صورت محلی روی رایانه شخصی خود ندارید و فقط برای بارگیری به آن نیاز دارید روی یک وب ثابت page برای افزودن برخی عملکردهای پویا به page، باید به سادگی یک منبع خارجی وارد کنید.
ایده این است که بارگذاری کنید brython.js
کتابخانه در <head>
بخش HTML page. به این ترتیب، مشتری کتابخانه را همزمان با HTML دانلود می کند page بارها روی کامپیوتر آنها
برای دستیابی به این رفتار، کتابخانه خود را از برخی از موارد بارگیری می کنیم CDN ها (شبکه های تحویل محتوا) که آخرین نسخه پایدار برایتون را به صورت آنلاین میزبانی می کنند.
یک شبکه تحویل محتوا، در اصطلاح اولیه، گروهی از سرورهای توزیع شده است که میزبان برخی از داده ها (کد، محتوای ویدیویی، تصاویر…) هستند. این نوع شبکه ها بسیار قابل اعتماد هستند و تقریباً هیچ خرابی ندارند. این آنها را برای میزبانی کتابخانه های کد ایده آل می کند.
چندین CDN وجود دارد که می توانید از بین آنها انتخاب کنید، اما سه مورد محبوب عبارتند از:
<script src="https://cdn.jsdelivr.net/npm/(email protected)/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/(email protected)/brython_stdlib.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython_stdlib.min.js"></script>
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js"></script>
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js"></script>
نصب Brython از طریق Pip
اگر میخواهید انعطافپذیری بیشتری با Brython داشته باشید، میتوانید آن را به صورت محلی نصب کنید:
$ pip3 install brython
pip
بسته را دانلود و نصب خواهد کرد روی دستگاه محلی شما بدون عرق کردن. بیایید بررسی کنیم که Brython با موفقیت نصب شده است:
$ pip show brython
این نسخه، و همچنین برخی از اطلاعات اولیه را چاپ می کند روی بسته برایتون:
Name: brython
Version: 3.9.2
Summary: Brython is an implementation of Python 3 running in the browser
Home-page: http://brython.info
Author: Pierre Quentel
Author-email: (email protected)
License: BSD
چگونه یک پروژه برایتون را راه اندازی کنیم
پس از نصب بریتون، گام بعدی بدیهی ایجاد یک پروژه ساده برای آزمایش قابلیت های آن است. برای ایجاد پروژه، یک پوشه جدید ایجاد کنید و به آن بروید:
$ mkdir brython-project
$ cd brython-project
اکنون می توانید دستور زیر را برای مقداردهی اولیه یک پروژه Brython اجرا کنید:
$ brython-cli --install
این یک پروژه Brython را ایجاد و مقداردهی اولیه میکند، از جمله فهرست راهاندازی پروژه و سلسله مراتب فایل:
brython-project
| brython.js
| brython_stdlib.js
| demo.html
| index.html
| README.md
| unicode.txt
ابتدا اجازه دهید توضیح دهیم که همه این فایل ها برای چیست:
brython.js
– موتور هسته بریتون، شامل متداول ترین ماژول های مانندbrowser
،browser.html
،javascript
… این فایل در HTML موجود است page با استفاده از<script>
اگر تصمیم گرفتیم Brython را به صورت محلی نصب نکنیم، تگ کنید.brython_stdlib.js
– شامل تمام بسته ها و ماژول های کتابخانه استاندارد پایتون است که توسط Brython پشتیبانی می شوند.demo.html
– یک HTML ساده page اجرای Brython، موارد استفاده جالب و مثال هایی را نشان می دهد که چگونه می توانیم از Brython برای اصلاح صفحات HTML ایستا استفاده کنیم.index.html
– سادهHello World
HTML page.
امکان باز کردن وجود دارد demo.html
فقط با استفاده از یک مرورگر وب ساده، اما این رویکرد با محدودیتهایی همراه است، بنابراین توصیه میشود که شروع کنید localhost ابتدا سرور
اگر قبلاً آن را ندارید http
ماژول نصب شده است، همچنین می توانید آن را از طریق نصب کنید pip
:
$ pip3 install http
پس از نصب، میتوانیم سرور را بچرخانیم:
$ python3 -m http.server
در حال حاضر، شما باید داشته باشید localhost آغاز شده روی a (پیش فرض) port 8000
و باید بتوانید به آن دسترسی داشته باشید demo.html
page با پیمایش به http://localhost:8000/demo.html
(یا http://0.0.0.0:8000/demo.html
) در نوار آدرس مرورگر وب انتخابی شما.
اگر پورت 8000 در حال حاضر توسط برخی دیگر استفاده می شود process، باید پورت دیگری را برای استفاده تعریف کنید (به عنوان مثال 8080):
$ python3 -m http.server 8080
برای ایجاد یک HTML جدید page این فقط می تواند پایتون را اجرا کند ، شما فقط نیاز دارید import را brython.js
و brython_stdlib.js
فایل ها در head
بخش فایل سپس می توانید حرکت کنید روی برای نوشتن پایتون در خود فایل HTML:
<script src="brython.js"></script>
<script src="brython_stdlib.js.js"></script>
چگونه برایتون کار می کند
Brython ما را قادر می سازد تا کد پایتون را در مرورگر بنویسیم و اجرا کنیم انتقال دادن آن را به جاوا اسکریپت. این کد میتواند در تمام مرورگرهای مدرنی که جاوا اسکریپت را پشتیبانی میکنند اجرا شود، زیرا Brython عمداً از تولید جاوا اسکریپت با نحو جدید و پشتیبانینشده اجتناب میکند.
می توانید ترانسپایلینگ را به عنوان زیرمجموعه ای از کامپایل در نظر بگیرید.
این process کامپایل معمولا کد منبع نوشته شده در برخی از زبان های برنامه نویسی سطح بالا (مانند C) را به زبان های سطح پایین تر (مثلاً کد ماشین) تبدیل می کند.
از طرف دیگر، ترانسپیلاسیون یک است process تبدیل یک زبان سطح بالا به زبان سطح بالا دیگر (مثلا پایتون به جاوا اسکریپت).
Transpilation در Brython همزمان با HTML اتفاق می افتد page بارگذاری شده است. در اینجا، ما به brython()
عملکرد در body
تگ سند HTML:
<body onload="brython()">
این brython()
تابع ترانویسی کد پایتون را انجام می دهد که در آن نوشته شده است <script type="text/python">
برچسب های سند HTML تمام کدهای پایتون باید با کد احاطه شوند <script type="text/python">
برچسب:
<script type="text/python"></script>
از طرف دیگر، میتوانیم کد خارجی پایتون را با استفاده از دستور زیر برای بارگذاری آن در سند HTML اضافه کنیم:
<script type="text/python" src="test.py"></script>
همه مرورگرهای وب مدرن از جاوا اسکریپت به عنوان زبان برنامه نویسی اصلی پشتیبانی می کنند اما از پایتون پشتیبانی نمی کنند. بنابراین، تمام کدهای پایتون باید به جاوا اسکریپت ترجمه شود و سپس در مدت زمانی که لازم است برای بارگذاری HTML اجرا شود. page.
اول، brython()
تابع تمام کدهای پایتون را در HTML جستجو می کند page با بازرسی تمام اسکریپت هایی که دارای یک نوع هستند text/python
و سپس تمام آن کد را به جاوا اسکریپت ترجمه می کند:
نتیجه این ترجمه یک نمایش رشته ای ساده از کد جاوا اسکریپت است. آن رشته باید به عنوان کد جاوا اسکریپت در یک مرورگر اجرا شود.
برایتون از جاوا اسکریپت استفاده می کند eval()
تابع اجرای تمام کدهای ترجمه شده است. از طرف دیگر، می تواند از دستور جاوا اسکریپت استفاده کند new Function(function_name, source)(module)
برای اجرای کد روی برخی از مرورگرها
این روش ترجیحی برای اجرای جاوا اسکریپت نیست. استفاده کردن
eval()
می تواند خطرناک باشد زیرا می تواند برنامه را در معرض کدهای بالقوه مخرب شخص ثالث قرار دهد. همچنین،eval()
نسبت به جایگزین ها بسیار کند است.
اگر کد پایتون از طریق سند HTML بارگذاری شود <script type="text/python" src="url">
، برایتون یک فراخوانی Ajax برای دریافت محتوای فایل بارگذاری شده انجام می دهد. آن کد به جاوا اسکریپت ترجمه شده و به همان روشی که در بالا توضیح داده شد اجرا می شود.
کار با برایتون – مثال ها
اکنون، اجازه دهید چند مثال ساده را مرور کنیم تا ایده ای از روش کار Brython و توانایی های آن بدست آورید:
سلام دنیا
<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
import browser
browser.document <= "Hello world!"
</script>
</body>
</html>
تمرکز خواهیم کرد روی کد پایتون بین <script type="text/python"></script>
برچسب ها:
import browser
بارگیری می کندbrowser
بسته به اسکریپت این بستهای است که همه نامها و ماژولهای مخصوص Brython را گروهبندی میکند، که عمدتاً برای نمایش عناصر DOM و رویدادهای مورد استفاده در جاوا اسکریپت استفاده میشوند.browser.document
یک شی است که نشان دهنده سند HTML در حال حاضر نشان داده شده است.browser.document <= "Hello world!"
– استفاده می کنیم<=
علامت گذاری به جای=
. اینdocument
عنصر جدید حاوی رشته را “دریافت” می کندHello world!
. یک روش جایگزین استفاده از نحو زیر است:browser.document.attach("Hello world!")
.
در سمت کلاینت، هنگامی که این کد رندر می شود – به این نتیجه می رسد:
<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
Hello world!
</body>
</html>
افزودن عناصر و ویژگی ها
بیایید مثال قبلی را اصلاح کنیم و چند پاراگراف و قالب بندی متن را به آن اضافه کنیم. این browser
رابط کاربری را در اختیار ما قرار می دهد html
ماژول، که تگ های HTML را نشان می دهد که می توانیم از آنها برای ایجاد پویا یک ساختار HTML از کد پایتون استفاده کنیم. نحو برای ایجاد یک شی به شرح زیر است:
browser.html.TAG("content", (attributes))
کدام خروجی ها:
<TAG (attributes)>content</TAG>
browser.html.H2("Hello world!")
را می پیچدHello world
رشته با<h2>
برچسب زدنbrowser.html.A("link", href="rasanegar.com")
ایجاد می کند<a href="rasanegar.com">
برچسب زدن
لانه سازی همچنین با این نوع نحو، به سادگی با گنجاندن یک امکان پذیر است html.element
در یک عنصر دیگر بیایید چند عنصر را به خود اضافه کنیم page:
<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
import browser
title = browser.html.H2("Hello world!")
bold = browser.html.B("bold text")
url = browser.html.A("link", href="rasanegar.com")
paragraph = browser.html.P("This is a paragraph. This is " + bold + ", and this is a " + url)
browser.document <= title
browser.document <= paragraph
</script>
</body>
</html>
روش دیگر، به جای ایجاد یک شی با آرگومان هایی مانند url = browser.html.A("link", href="rasanegar.com")
، می توانید آن را بدون هیچ استدلالی ایجاد کنید و آن را بسازید:
url = browser.html.A()
url <= "Url Text"
url.href = "rasanegar.com"
وقتی کد پایتون تمام شد و کد را باز می کنیم page در یک مرورگر – HTML تولید شده page باید شبیه این باشد:
<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
<h2>Hello world!</h2>
<p>
This is a paragraph. This is <b>bold text</b>, and this is a
<a href="rasanegar.com">link</a>.
</p>
</body>
</html>
ما یک <p>
عنصری که در داخل آن از a استفاده کرده ایم <b>
و <a>
عنصر، از قبل ساخته شده است.
ساخت جداول با برایتون
جداول را می توان با همان منطقی که تا به حال اعمال کرده ایم ایجاد کرد:
table = browser.html.TABLE()
حالا بیایید چندین ردیف با داده های ساختگی ایجاد کنیم و آنها را به آن اضافه کنیم table
:
row = browser.html.TR()
row <= browser.html.TH("Header1")
row <= browser.html.TH("Header2")
table <= row
row = browser.html.TR()
row <= browser.html.TD("Data 1")
row <= browser.html.TD("Data 2")
table <= row
در نهایت، ما تصمیم می گیریم که جدول را در بانک نشان دهیم <div id="table-zone">
عنصر ایجاد شده است روی HTML page:
tableZone = browser.document("table-zone")
tableZone <= table
این منجر به یک جدول HTML می شود روی ما page:
<div id="table-zone">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
اضافه کردن سبک به عناصر موجود
بیایید یک ظاهر طراحی را به آن اضافه کنیم <div id="table-zone">
و table
عناصر:
tableZone.style = {
"background-color": "#dedfdd",
"width": "50%",
"min-height": "100px",
"margin": "auto"
}
table.style = {
"border": "1px solid #333",
"margin": "auto"
}
این منجر به تغییر تگ های HTML با style
ویژگی اضافه شده:
<div id="table-zone" style="background-color: rgb(222, 223, 221); width: 50%; min-height: 100px; margin: auto;">
<table style="border: 1px solid rgb(51, 51, 51); margin: auto;">
اقدامات الزام آور و خواندن محتوا از عناصر
صفحات وب فقط برای نمایش داده ها نیستند، بلکه برای گرفتن داده نیز هستند. فرم ها یکی از اساسی ترین راه هایی هستند که می توانیم کاربران را برای ارسال داده ترغیب کنیم. بیایید با استفاده از FORM()
تابع، همراه با سایر عناصر HTML مانند INPUT()
و LABEL()
:
formDiv = browser.html.DIV(id="form-div")
form = browser.html.FORM()
input = browser.html.INPUT()
input.type = "text"
input.id = "input-name"
form <= browser.html.LABEL("Enter your name: ") + input
button = browser.html.INPUT()
button.type = "button"
button.value = "Submit"
button.id = "submit-button"
form <= button
formDiv <= form
formDiv <= browser.html.H4("Your name is: ", id="form-response")
browser.document <= formDiv
فرمی که هیچ کاری انجام نمی دهد خیلی مفید نیست. ما می توانیم از توابع سفارشی در Brython نیز استفاده کنیم. بیایید یک تابع پایتون بسازیم که با کلیک کردن روی آن فراخوانی می شود submit
دکمه. به کاربر هشدار می دهد که دکمه کلیک شده است و مقدار آن را به روز می کند <h4 id="form-response">
عنصر:
def onSubmit(ev):
name = browser.document("input-name").value
browser.document("form-response") <= name
browser.alert("The Submit Button is Clicked")
در نهایت، ما را محدود کردیم click
رویداد submit-button
با ایجاد شده onSubmit()
عملکرد، به طوری که ما رفتار مطلوب را داشته باشیم روی دکمه کلیک کنید:
browser.document("submit-button").bind("click", onSubmit)
چگونه Brython با جایگزین ها مقایسه می شود
چندین راه حل دیگر برای اجرای کد پایتون در مرورگر وب به جز برایتون وجود دارد، بنابراین کدام یک را باید انتخاب کنید؟
سیستم | زمان تدوین | مکانیزم دویدن |
---|---|---|
بریتون | بر page بار | Python به JavaScript transpiles |
ترانس | جلوتر از زمان | Python به JavaScript transpiles |
باتاویا | جلوتر از زمان | زمان اجرا پایتون در یک مرورگر |
در حال حرکت | بعد از page بار | Python به JavaScript transpiles |
pypy.js | بعد از page بار | زمان اجرا پایتون در یک مرورگر |
پیودید | بعد از page بار | زمان اجرا پایتون در یک مرورگر |
برخی از آنها تمایل دارند به طور کامل جاوا اسکریپت را جایگزین کنند و برخی فقط یک محیط Python مفید برای مرورگرهای وب ایجاد می کنند، به عنوان جایگزینی ممکن برای جاوا اسکریپت. در مقابل، برخی از راه حل ها مانند Brython، Skulpt و Transcrypt کد پایتون را به جاوا اسکریپت انتقال می دهند.
تا آنجا که به زمان کامپایل مربوط می شود، قبل، بعد یا در زمان بارگذاری یک سند HTML انجام می شود.
هنگام بنچمارک کردن سرعت اجرای کد پایتون در مرورگر، برایتون به طور کلی است روی پایان سریعتر طیف. تمایل دارد بین اجرای سریع راه حل هایی که پایتون را پیش از موعد به جاوا اسکریپت کامپایل (ترانسپایل) می کنند و فایل های بزرگ حاوی کد ترجمه شده که باید توسط مشتری بارگیری شود تا اسکریپت ها در “پیش” بارگیری شوند. رویکرد-زمان “.
به نظر می رسد که برایتون به آن نقطه شیرین بسیار نزدیک است.
بدیهی است که معیارها همیشه نمی توانند معرف موقعیت های دنیای واقعی باشند، زیرا نتایج ممکن است بر اساس آن متفاوت باشد روی کد اجرا شده است، اما آنها می توانند مقایسه خوبی بین عملکرد راه حل های مختلف ارائه دهند.
توجه داشته باشید: طبق تعریف، برایتون همیشه کندتر از استفاده از جاوا اسکریپت برای همان کد است. این به دلیل اضافه شدن مرحله ترانسپیلاسیون است که هرگز 0 میلی ثانیه نیست و پس از آن جاوا اسکریپت کد اجرا می شود.
نتیجه
اگر به دنبال جایگزینی برای جاوا اسکریپت به عنوان یک زبان برنامه نویسی برای وب هستید و به عملکرد خیلی اهمیت نمی دهید، Brython می تواند راه حل بسیار خوبی باشد.
رویکرد متعادل آن به مبادله اجتناب ناپذیر بین سرعت اجرا و استفاده از حافظه اضافی مورد نیاز برای بارگذاری کتابخانه، آن را به یکی از بهترین راه حل ها برای اجرای پایتون در مرورگر تبدیل می کند.
از سوی دیگر، Brython جامعه بزرگی ندارد و به طور گسترده مورد پذیرش یا استفاده قرار نمی گیرد. منابع آموزشی بسیار محدود هستند و شما به اسناد و مدارک رسمی بدون بسیاری از پروژههای در مقیاس بزرگ در دنیای واقعی محدود میشوید تا به دنبال راهنمایی باشید.
در نهایت، سوال اصلی این است که آیا اصلاً ارزش جایگزینی جاوا اسکریپت را دارد؟ حتی پروژه های Brython در مقیاس کوچک در مقایسه با پروژه های مشابه نوشته شده در جاوا اسکریپت می توانند تا 2 برابر کندتر اجرا شوند. برخلاف بریتون، جاوا اسکریپت دارای یک جامعه توسعهدهنده بزرگ، منابع و پروژههای واقعی است که پتانسیل کامل آن را نشان میدهند.
بیایید تمام چارچوب های جاوا اسکریپت را فراموش نکنیم، آنها ستون فقرات محبوبیت جاوا اسکریپت هستند. بدون کمک آنها، جاوا اسکریپت فقط یک زبان برنامه نویسی دیگر خواهد بود که توانایی تغییر پویا محتوای صفحات HTML ایستا را در اختیار ما قرار می دهد. به عنوان مثال، کدنویسی منطق پیچیده سمت سرور را در جاوا اسکریپت خالص تصور کنید. حتی اگر این امکان پذیر باشد، مطمئناً تجربه چندان خوشایندی نخواهد بود.
متأسفانه، برایتون هیچ چارچوبی برای آن ایجاد نشده است، بنابراین شما محدود به کدهای پایتون خالص هستید که برای هیچ چیز غیر از موارد استفاده ساده منطقی نیست. شما به احتمال زیاد قادر به ایجاد یکپارچه پیچیده نخواهید بودpage برنامه وب با استفاده از Brython، همانطور که می توانید با استفاده از JavaScript و Angular. Brython یک ابزار عالی برای توسعه دهندگانی است که می خواهند فقط از Python برای برنامه نویسی سمت سرور و سمت کلاینت استفاده کنند، اما احتمالاً تا جایگزینی جاوا اسکریپت فاصله زیادی دارد.
(برچسبها به ترجمه)# python(T)# JavaScript
منتشر شده در 1403-01-10 13:01:05