استفاده از پایتون برای فرانت‌اند

شکل ۱. برنامه‌نویسی
شکل ۱. برنامه‌نویسی
منتشر‌شده در blog.bitsrc.io به تاریخ ۲ آوریل ۲۰۲۱
لینک منبع Using Python for Frontend

برای تقریبا سه دهه، JavaScript زبان غیررسمی برای توسعه فرانت‌اند بوده است. در نهایت، زبان‌های بی‌شماری خلق، مشهور و سپس به حال پوسیدگی در گوشه زبان‌های فراموش‌شده رها شده‌اند. اما JavaScript نه تنها به عنوان زبان اول، دوم و سوم فرانت‌اند باقی مانده است، بلکه برای فراهم کردن ویژگی‌های مورد نیاز برای وب مدرن تکامل‌یافته است. با این حال، این مورد دیگر صادق نیست، JavaScript مدعی است، دامنه آن دیگر امن نیست، و شما ممکن است با این زبان جدید آشنا باشید که سعی دارد نامی برای خود در جهان فرانت‌اند بسازد: پایتون.

درست است، این یک روش پیچیده من بود که گفتم پایتون را می‌توان برای توسعه فرانت‌اند، مانند JavaScript استفاده کرد. نه به این دلیل که مرورگرها تصمیم گرفته‌اند زمان اجرای آن را در نظر بگیرند، بلکه به این دلیل که کاربران به طور کامل مفسر پایتون را در JavaScript ایجاد کرده‌اند! بنابراین، بدون تلاش بیشتر، سه گزینه برای شما وجود دارد که می‌توانید از بین آن‌ها تمام برنامه‌های کاربردی وب خود را از ابتدا با استفاده از قدرت پایتون انتخاب کنید.

کتابخانه Skulpt

بله، این یک اشتباه تایپی نیست، این کتابخانه به این شکل هجی می‌شود. Skulpt یک مرورگر کامل برای اجرای پایتون است، که با پایتون ۳سازگار است. در حال حاضر روی نسخه ۰.۱۰ نشسته است (که اگر در موردش فکر کنید، من شروع به استفاده از Node.js در سال ۲۰۱۳ در محیط‌های تولید کردم، و آن هم روی نسخه ۰.۱۰ هم نشسته بود).

نکات جالب

کتابخانه Skulpt قطعا تحت توسعه فعال است، که یک شاهکار کوچک نیست. برخی از این پروژه‌های «بیرونی» گاهی اوقات خوب به نظر می‌رسند، اما سازندگان آن‌ها را رها کرده‌اند، زیرا هیچ کششی ندارند. با این حال، نگاهی سریع به مخزن Skulpt نشان می‌دهد که این مخزن در ۵ سال گذشته یک کار در حال پیشرفت بوده است و آخرین تعهد آن کم‌تر از یک هفته پیش بوده است. خب، فعال است: آن را بررسی کنید.

همچنین نشان‌داده شده است که تا حدودی محبوب است و تنها کم‌تر از ۳ k ستاره دارد (۲.۹k در زمان نوشتن این مقاله). و بسیاری از مسائل فعال و بسته، که به این معنی است که جامعه‌ای از کاربران در پشت آن وجود دارد. بنابراین، مورد استفاده قرار گرفته و تا حدی محبوب: چک کنید.

چه کسانی از آن استفاده می‌کنند؟

اینجا جاییست که حباب برای من ترکید، من نمی‌توانستم هیچ مدرکی پیدا کنم که نشان دهد در پروژه‌های روزمره مانندJavaScript از آن استفاده می‌شد. در واقع، بسیاری از پروژه‌های ذکر شده در صفحه گالری، سایت‌های آموزشی هستند. به این معنا، مکان‌هایی که در آن‌ها تعامل با پایتون می‌تواند یک مزیت باشد، زیرا آن‌ها پایتون را آموزش می‌دهند.

این چیز بدی نیست، در واقع، این مدرک خوبی است که آن طور که انتظار می‌رود عمل می‌کند. این کار فقط نیاز به پذیرش گسترده‌تری دارد.

قسمت نه چندان جذاب

از آنچه می‌توانم بگویم، برای اینکه بتوانید از پایتون در پروژه فرانت‌اند خود استفاده کنید، به مقدار زیادیJavaScript نیاز دارید. اساسا، جدا از وارد کردن کتابخانه‌های مورد نیاز، شما باید راهی برای گرفتن کد پایتون پیدا کنید و روش‌های مورد نیاز برای تجزیه و اجرای آن را فراخوانی کنید.

در زیر یک مثال کاری از وب آن‌ها آورده شده است:

<html>
<head>
<script src=&quothttp://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&quot type=&quottext/javascript&quot></script>
<script src=&quothttp://www.skulpt.org/js/skulpt.min.js&quot type=&quottext/javascript&quot></script>
<script src=&quothttp://www.skulpt.org/js/skulpt-stdlib.js&quot type=&quottext/javascript&quot></script>
</head>
<body>
<script type=&quottext/javascript&quot>
// output functions are configurable. This one just appends some text
// to a pre element.
function outf(text)   {
var mypre = document.getElementById(&quotoutput&quot);
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles[&quotfiles&quot][x]   === undefined)
throw &quotFile not found: '&quot + x + &quot'"
return Sk.builtinFiles[&quotfiles&quot][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(&quotyourcode&quot).value;
var mypre = document.getElementById(&quotoutput&quot);
mypre.innerHTML = '';
Sk.pre = &quotoutput"
Sk.configure({output:outf, read:builtinRead});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody(&quot<stdin>&quot,   false,   prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err)   {
console.log(err.toString());
});
}
</script>
<h3>Try This</h3>
<form>
<textarea id=&quotyourcode&quot cols=&quot40&quot rows=&quot10&quot>import turtle
t = turtle.Turtle()
t.forward(100)
print &quotHello World&quot
</textarea><br />
<button type=&quotbutton&quot onclick=&quotrunit()&quot>Run</button>
</form>
<pre id=&quotoutput&quot ></pre>
<!-- If you want turtle graphics include   a canvas -->
<div id=&quotmycanvas&quot></div>
</body>
</html>

و خروجی آن به این شکل است:

شکل ۲. خروجی
شکل ۲. خروجی

هنگام کلیک بر روی دکمه «Run»، پیام «Hello World» ظاهر می‌شود و فلش کشیده می‌شود. توجه داشته باشید که برای ثبت و سپس اجرای کد پایتون به چه مقدار کد JS نیاز است. این تنها مشکلیست که با Skulpt پیدا کردم. البته، این کتابخانه هنوز هم به شدت در حال توسعه است و اگر فکر می‌کنید می‌توانید به بهبود تجربه توسعه‌دهنده کمک کنید، بروید و کمک کنید!

کتابخانه Brython

کتابخانه Brython یک پیاده‌سازی پایتون ۳ برای وب است. درست مانند Skulpt مستقیما بر روی مرورگر اجرا می‌شود، اما رویکرد آن کمی متفاوت است. کتابخانه Brython به جای نوشتن زمان اجرا در JavaScript، از طریق آن، پایتون را به JavaScript منتقل می‌کند، که بدین معنی است که شما دسترسی مستقیم به DOM از طریق API توسعه‌یافته به زبان اضافه کرده‌اید (البته، پایتون هیچ مفهومی از DOM ندارد).

نکات جالب

یکی از جالب‌ترین بخش‌های Brython تجربه توسعه‌دهنده آن است. بر‌خلاف Skulpt، که در آن شما به کد JS زیادی برای اجرای پایتون خود نیاز داشتید، Brython به شما این امکان را می‌دهد که کدنوشته‌های پایتون خود را بنویسید و آن‌ها را درست مانند آنچه که با JS خود دارید، وارد کنید.

فقط به کد مبدا صفحه اصلی آن‌ها نگاه کنید:

شکل ۳. کدهای مبدا صفحه اصلی
شکل ۳. کدهای مبدا صفحه اصلی

این یک برچسب <script type="text/python"> است! و این کد کامل پایتون است، درست روی مرورگر. تن‌ها کد صفحه نمایش که برای اجرای همه پایتون مورد نیاز است، یک فراخوانی تک منظوره بر روی برچسب بدنه است:

شکل ۴. کد یک فراخوانی تک منظوره بر روی تگ body
شکل ۴. کد یک فراخوانی تک منظوره بر روی تگ body

این تنها JavaScript است که شما نیاز دارید.

تعامل با کتابخانه‌های موجود

این واقعیت که شما پایتون را بهJavaScript انتقال می‌دهید، به شما این امکان را می‌دهد که با کتابخانه‌های JavaScript موجود مستقیما از کد پایتون خود که یک مزیت بزرگ نیز است، تعامل کنید، زیرا به شما امکان دسترسی به راه‌حل‌های پیشرفته برای توسعه فرانت‌اند را بدون نیاز به ایجاد نسخه‌های پایتون می‌دهد.

برای مثال، در اینجا می‌توانید ببینید که چگونهVue.js می‌تواند مستقیما ازBrython استفاده شود:

شکل ۵. Vue.js می‌تواند مستقیما ازBrython استفاده کند
شکل ۵. Vue.js می‌تواند مستقیما ازBrython استفاده کند

رویکرد Brython در ارائه پایتون در مرورگر بسیار شفاف است، که باعث می‌شود بخواهم آن را برای پروژه بعدی‌ام امتحان کنم. و اگر شما در مورد آن کنجکاو هستید، می‌توانید ویراستار آنلاین آن‌ها را بررسی کنید، که نه تنها به شما اجازه می‌دهد همه چیز را امتحان کنید، بلکه JavaScript حاصله را نیز به شما نشان می‌دهد.

اگر در این باره فکر کنید، Brython برای پایتون همان کاری را می‌کند که Node.js برای JavaScript انجام داد. این کار به توسعه‌دهندگان این امکان را می‌دهد که از یک زبان end-to-end در یک پروژه استفاده کنند. با مزیت اضافه‌شده به اشتراک‌گذاری مولفه‌های منطقی بین محیط‌ها. اگر شما یک توسعه‌دهنده پایتون هستید، پروژه او پروژه‌ای است که باید به دنبالش باشید.

کتابخانه Anvil

در نهایت، من می‌خواستم آنویل را پوشش دهم، که شما می‌توانید در مورد آن به عنوان تکامل نهایی Brython و Skulpt فکر کنید. اساسا، Anvil یک محیط توسعه کامل برای برنامه‌های کاربردی وب شما است که در آن شما تنها می‌توانید از پایتون برای هر دو کد پشتیبانی و فرانت‌اند استفاده کنید. نه تنها این، بلکه به شما اجازه می‌دهد تا رابط کاربری را با استفاده از ابزارهای درگ و دراپ طراحی کنید و این رابط کاربری را به صورت خودکار میزبانی می‌کند.

شکل ۶. آنویل
شکل ۶. آنویل

کتابخانه Anvil پایتون ۳. ۳ را برای فرانت‌اند شما فراهم می‌کند، که مانندBrython به JavaScript منتقل می‌شود. آن‌ها حتی یک پایگاه‌داده جامع Postgres برای شما فراهم می‌کنند تا از آن استفاده کنید، بدون اینکه لازم باشد چیزی را تنظیم کنید.

نکات جالب

همانطور که گفتم، آنویل یک محیط توسعه یکپارچه است. هدف آن‌ها فراهم کردن هر چیزی است که شما برای ایجاد برنامه‌های پایتون خود نیاز دارید. نه تنها این، بلکه آن‌ها آن را یک گام فراتر می‌برند با ارائه گزینه‌های خود هاستینگ، ادغام داخلی با خدمات گوگل (مانند گوگل داکز، درایو، و غیره) ، مایکروسافت (آژور ست ای پی آی اس، و غیره)، اوت، اعتصاب فیسبوک (پرداخت برای مثال) و دیگران.

استقرار یک کلیکی آن‌ها نیز بسیار جالب به نظر می‌رسد، حل هرگونه عجله بالقوه مورد نیاز برای قرار دادن برنامه کاربردی‌تان در تولید. و حتی اگر شما می‌خواهید این فرآیند را انجام دهید، سرور برنامه آن‌ها، منبع باز است، که به این معنی است که شما می‌توانید کد خود را صادر کنید، و از سرور آن‌ها در محیط خودتان استفاده کنید.

مشکل آنویل

خوب، این لزوما اشتباه نیست، اما همانطور که می‌توانید تصور کنید، اگرچه آن‌ها یک لایه رایگان فراهم می‌کنند، اگر قصد دارید از مجموعه کامل خدمات استفاده کنید، پس باید پول پرداخت کنید. ارزان‌ترین گزینه، که به شما اجازه می‌دهد تا از نام تجاری‌شان خلاص شوید و برخی از ویژگی‌های مناسب را به دست آورید، ۴۹ دلار در ماه است. بنابراین، برای تست همه چیز برای یک توسعه‌دهنده انفرادی بسیار گران تمام می‌شود. با این حال، اگر چند چیز را آزمایش می‌کنید، می‌توانید این کار را با ردیف رایگان انجام دهید.

و این تنها چیزی بود که می‌توانستم در مورد Anvil پیدا کنم. به غیر از آن، خود اسناد و مدارک گسترده هستند و مثال‌های زیادی را نشان می‌دهند، بنابراین شما هر چیزی که برای شروع نیاز دارید را دارید.

چه کسی از آن استفاده می‌کند؟

اگرچه درست است که Github این علاقه را نشان نمی‌دهد که رپو Brython نشان می‌دهد، اما بسیاری از شرکت‌ها برای راه‌اندازی کسب‌وکار خود از نسخه سازمانی Anvil استفاده کرده‌اند.

  • شرکت LighthingAI از آن‌ها برای ایجاد سریع اولین نسخه رابط کاربری کاربری خود در زمان ثبت استفاده کرد.
  • شرکت RiskTV از آنویل برای ایجاد یک سیستم پشتیبانی از مشتری در بالای داده‌های موجود خود در کم‌تر از یک ماه استفاده کرد.

شما می‌توانید این ایده را به دست آورید، آن‌ها هیچ طراح بزرگی را با استفاده از سیستم‌های خود نشان نمی‌دهند، اما در عوض، به نظر می‌رسد که آنویل یک تناسب عالی برای شرکت‌های نوبنیان یا شرکت‌هایی است که به دنبال ابزاری برای نمونه‌برداری سریع از یک راه‌حل هستند. این مسیر را دنبال می‌کند، زیرا با توجه به ابزارهای رابط کاربری و نیاز به زبان برنامه‌نویسی، شما تمام ابزارهایی که نیاز دارید را دارید اگر پایتون را بدانید. با استفاده از Anvil می‌توانید از زمین بلند شوید و سپس نسخه نهایی را به آرامی و با استفاده از دسته فن‌آوری که نیاز دارید، بسازید.

پایتون یک زبان بسیار قدرتمند است، زبانی که در حال حاضر در حال کسب جایگاه زیادی در مناطقی مانند AI و یادگیری ماشینی است. با این حال، از قبل ازJavaScript، از آن برای توسعه وب انتهایی استفاده می‌شد و اکنون، به لطف ابزارهایی مانند ابزارهایی که در اینجا ذکر شده‌اند، می‌توانید این دانش را بگیرید و آن را در فرانت‌اند خود به کار ببرید.

آیا این به این معنی است کهJavaScript روزهای آخر خود را می گذراند؟ با این حال، من شک ندارم که اگر مردم بیشتری در مورد راه‌حل‌هایی مانندBrython و Skulpt بدانند، مردم بیشتری برای فرانت‌اند از پایتون استفاده می‌کنند. شما چطور؟ آیا مزیت استفاده از پایتون روی مرورگر خود روی JavaScript را می‌بینید؟

این متن با استفاده از ربات مترجم مقاله برنامه نویسی ترجمه شده و به صورت محدود مورد بازبینی انسانی قرار گرفته است.در نتیجه می‌تواند دارای برخی اشکالات ترجمه باشد.
مقالات لینک‌شده در این متن می‌توانند به صورت رایگان با استفاده از مقاله‌خوان ترجمیار به فارسی مطالعه شوند.