استفاده از پایتون برای فرانت اند (frontend)
تقریبا برای سه دهه زبان جاوا اسکریپت برای توسعه فرانت اند پیشتاز بوده است. برای back-end، زبان‌های بی شماری ایجاد شدند و مورد استفاده قرار گرفتند؛ اما اکنون فراموش شده اند. اما جاوا اسکریپت نه تنها به عنوان زبان اول، دوم و سوم طراحی فرانت اند (frontend) باقی مانده است، بلکه برای فراهم کردن ویژگی های مورد نیاز برای وب مدرن نیز بهبود یافته است.
با این حال این موضوع شاید برای همیشه پایدار نماند. جاوا اسکریپت یک رقیب جدی دارد. شاید شما با این رقیب که در حال تلاش برای معروف کردن خود است آشنا باشید: پایتون
بله، این مسئله که می‌توانیم از پایتون برای طراحی فرانت اند (frontend ) استفاده کنیم بسیار پیچیده به نظر میرسد. درست مانند جاوا اسکریپت. در هر صورت، برنامه نویسان مفسرهای کاملا کاربردی پایتون را برای فرانت اند به جای جاوا اسکریپت ایجاد کرده اند.
در حال حاضر سه کتابخانه برای انتخاب وجود دارد که می توانید با استفاده از آنها، همه‌ی برنامه های کاربردی وب خودرا از ابتدا با پایتون طراحی کنید.
هم رویش منتشر کرده است:
آموزش فرانت اند پروژه محور __ طراحی سایت با HTML و CSS و Bootstrap
skulpt
بله، skulpt یک اشتباه تایپی نیست، بلکه اسم یک کتابخانه می‌باشد .
skulpt یک ابزار زمان اجرای کامل در مرورگر برای پایتون است که با پایتون 3 سازگار است.
نکات جالب
Sculpt تحت توسعه ی فعال است، که این موضوع مهمی است. بعضی از این پروژه ها از نگاه بیرونی گاهی اوقات خوب به نظر می رسند. اما سازندگان آنها را ترک می کنند زیرا هیچ جذابیتی برای آنها ندارد.
با این حال، اگر نگاهی سریع به مخزن skulpt داشته باشید، متوجه می‌شوید که این یک کتابخانه در حال پیشرفت از 5 سال گذشته است. آخرین بروزرسانی آن کمتر از یک هفته پیش بوده است (در زمان نگارش این متن). بنابراین، به صورت فعال بازبینی می‌شود و توسعه می‌یابد.
همچنین با کمی کمتر از 3k ستاره تا حدودی محبوب است. تعداد زیادی issue فعال و بسته دارد که به این معنی است که جامعه کاربران متعددی در پشت سر خود دارد. بنابراین، مورد استفاده و تا حدی محبوب است.
چه کسی از آن استفاده می کند ؟
اینجا جایی بود که نا امید شدم. من هیچ مدرکی پیدا نکردم که Skulpt در پروژه های روزمره مانند جاوا اسکریپت مورد استفاده قرار گیرد. در واقع، بیشتر پروژه های ذکر شده در صفحه خود توسعه دهندگان اسکالپت فقط سایت های آموزشی هستند. یعنی مکان هایی که تعامل با پایتون می تواند یک امتیاز مثبت برای آنها باشد. چون این وبسایت های آموزشی پایتون را آموزش می دهند.
قسمت نه چندان جالب
با توجه به تجربهی بنده در این زمینه برای اینکه بتوانید از پایتون در پروژه اصلی خود استفاده کنید، به میزان زیادی تسلط در جاوا اسکریپت نیاز دارید. اساساً، جدا از فراخوانی کردن ابزارهای مورد انتظار، شما باید راهی برای گرفتن کد پایتون برای نیازهای مختلف پیدا کنید. سپس روش‌های مورد نیاز را برای تجزیه و اجرای آن فراخوانی کنید.
در مقاله اصلی مثالی است که از وب آنها گرفته شده است:
<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>
و خروجی آن به این شکل است:
هنگام کلیک بر روی دکمه “Run” ، پیام “Hello World” ظاهر می شود. و پیکان رسم می شود. توجه کنید که کد جاوا اسکریپت برای گرفتن و سپس اجرای کد پایتون لازم است. این موضوع تنها مشکلی است که از skulpt کشف کرده ام.
البته، این ابزار هنوز به شدت تحت توسعه است. و اگر فکر می کنید می توانید به بهبود تجربه توسعه دهنده کمک کنید، می‌توانید با تیم توسعه دهنده آن همکاری کنید.
Brython
Brython بااستفاده از پایتون 3 برای طراحی وب بکار می‌رود. این کتابخانه دقیقاً مانند Skulpt روی مرورگر قابل اجرا است. اما روش اجرای آن کمی متفاوت است.
به جای اینکه یک Runtime در جاوا اسکریپت نوشته شود، به نظر می رسد، ابزار Brython در حال انتقال پایتون به جاوا اسکریپت است. این بدان معنی است که شما از طریق API توسعه یافته اضافه شده به زبان به DOM دسترسی مستقیم دارید (از آنجا که پایتون هیچ مفهومی از DOM ندارد).
هم رویش منتشر کرده است:
آموزش Brython __ برنامه نویسی فرانت اند با پایتون
نکات جالب
یکی از جالب ترین قسمت‌های Brython تجربهی توسعه دهنده آن است. برخلاف Skulpt، که برای اجرای پایتون خود به کد جاوا اسکریپت زیادی احتیاج داشتید. Brython به شما امکان می دهد اسکریپت های پایتون خود را بنویسید. و آنها را درست مانند آنچه که در جاوا اسکریپت خود دارید وارد کنید.
کافیست از صفحه اصلی آنها کد منبع را مشاهده کنید:
این یک تگ <type type = “text / python”> برای نوشتن دستورات پایتون است. برای شناسایی کد به مرورگر باید تگ body را به روش زیر پیاده سازی کنیم و مابقی دستورات به زبان پایتون مینویسیم:
تعامل با ابزارهای موجود
این موضوع که شما پایتون را به جاوا اسکریپت تبدیل می‌کنید، به شما این امکان را می دهد که مستقیماً از طریق کد پایتون خود با ابزارهای موجود جاوا اسکریپت تعامل داشته باشید. که این مساله یک امتیاز بزرگ برای این کتابخانه محسوب می شود. زیرا به شما امکان می دهد که بدون نیاز به ایجاد نسخه های پایتون خود، راه حل های پیشرفته برای توسعه را پایان دهید.
برای مثال، در اینجا می‌توانید ببینید که چگونه Vue.js می‌تواند به طور مستقیم از Brython استفاده کند:
روش مور استفاده در Brython برای ارائه پایتون در مرورگر بسیار شفاف و واضح است. به طوری که قطعا برای پروژه بعدی خودم ازین ابزار استفاده خواهم کرد. و اگر در این مورد کنجکاو هستید، پیشنهاد می‌کنم که ویرایشگر آنلاین آن را بررسی کنید. که نه تنها به شما امکان می دهد همه چیز را امتحان کنید بلکه جاوا اسکریپت حاصل را نیز به شما نشان می دهد.
از زاویه ای دیگر می‌توان این گونه گفت که، Brython همان کاری را که Node.js برای جاوا اسکریپت انجام داده برای پایتون انجام می دهد. این امکان را برای توسعه دهندگان فراهم می کند تا از یک زبان برای استفاده در یک پروژه استفاده کنند. با مزیت اضافه شده از به اشتراک گذاشتن اجزای منطقی بین محیط ها. ویرایشگر آنلاین که نه تنها به شما اجازه می‌دهد همه چیز را امتحان کنید بلکه نتایج جاوا اسکریپت را نیز به شما نشان می‌دهد.
Anvil
در انتها، قصد دارم در مورد Anvil کمی صحبت کنم. که شما می توانید در مورد آن به عنوان تکامل نهایی Brython و Skulpt فکر کنید.
اساساً، Anvil یک محیط توسعه کامل برای برنامه های وب شما است. که در آن می توانید فقط از پایتون برای طراحی back-end و فرانت اند (frontend) استفاده کنید. نه تنها این، بلکه به شما امکان می دهد رابط کاربری را با استفاده از ابزارهای کشیدن و رها کردن طراحی کنید. و خود برنامه های خود را میزبانی کند.
Anvil از پایتون 3.7 را برای طراحی فرانت اند (frontend) استفاده می‌کند. که دقیقاً مانند Brython به جاوا اسکریپت منتقل می شود.
Anvil یک پایگاه داده یکپارچه بنام Postgres را برای استفاده شما فراهم کرده، که احتیاج به تنظیمات خاصی ندارد.
چه چیزی درمورد آن جالب است ؟
همانطور که گفتم، anvil یک محیط توسعه‌ی یکپارچه است. و هدف آن این است که هر آنچه برای ایجاد برنامه های پایتون خود نیاز دارید را در اختیار شما قرار دهد. نه تنها این، بلکه با ارائه گزینه های میزبانی خود، یکپارچه سازی داخلی با سرویس های Google (به عنوان مثال google docs ، drive و غیره)، Microsoft (Azure REST APIs و غیره)، Microsoft Auth ، Stripe یک قدم جلوتر می روند. (به عنوان مثال پرداخت ها) وسایر چیز ها.
استقرار آن با یک کلیک نیز بسیار جالب به نظر می رسد. رفع مشکلات احتمالی لازم برای تولید برنامه شما. و حتی اگر بخواهید آن روند را طی کنید، سرور برنامه آنها متن باز است. به این معنی که می توانید کد خود را خروجی بگیرید و از سرور آنها در محیط خود استفاده کنید.
مشکل آن چیست؟
خوب، گرچه آنها بخش هایی ازین ابزار را رایگان در اختیار شما قرار می‌دهند. اما برای استفاده از تمامی امکانات آن شما باید مبلغی بپردازید.
ارزان ترین گزینه که به شما امکان می دهد از لوگو‌ی تجاری آنها خلاص شوید. و از برخی ویژگی های مناسب برخوردار شوید 49 دلار در ماه است. بنابراین استفاده از آن، برای یک شخص توسعه دهنده تقریبا گران است. البته شما می‌توانید فقط از بخش های رایگان آن استفاده کنید.
و این مساله تنها مشکل anvil می‌باشد. به غیر از این ، اسناد و مدارک به خودی خود گسترده است. و مثال‌های زیادی را نشان می دهد. بنابراین شما برای شروع هر آنچه لازم دارید را در اختیار دارید.
چه کسی از آن استفاده می کند؟
گرچه مخزن github انچه مخزن Brython نمایش می‌دهد را نشان نمی‌دهد. اما بسیاری از شرکت‌ها از نسخه سازمانی Anvil برای راه اندازی سریع تجارت خود استفاده کرده اند.
شرکت LightthingAI : برای ایجاد سریع اولین نسخه UI در ابتدا استفاده کرد.
شرکت RiskTV از Anvil برای ایجاد یک سیستم پشتیبانی مشتری در بالای داده های موجود خود در کمتر از یک ماه استفاده کرد.
می‌توانید از این دو مثال ایده بگیرید. این شرکت‌ها به هیچ مشکل بزرگی در کار خود برنخوردند. به نظر میرسد Anvil مناسب برای شرکت‌های نوپا یا شرکت هایی است که به دنبال ابزاری برای نمونه سازی سریع یک راه حل هستند. با توجه به ابزارهای طراحی UI و نیازمندی های شما، اگر با پایتون اشنا باشيد با Anvil می‌توانید شروع به کار کنید. و در نهایت نسخه نهایی را با استفاده از توانایی فنی خود پیاده سازی کنید.
پایتون یک زبان بسیار قدرتمند است. زبانی که در حال حاضر در زمینه هایی مانند هوش مصنوعی و یادگیری ماشین جای خود را به خوبی باز کرده است. با این وجود، از قبل جاوا اسکریپت برای توسعه استفاده میشده است و اکنون به لطف ابزاری مانند موارد ذکر شده در اینجا و تسلط به آنها فرانت اند (frontend) وب خود را پیاده سازی کنید.
آیا این بدان معنی است که جاوا اسکریپت به آخر راه رسیده است ؟ گفتن این موضوع بسیار سخت است اما، با این حال فکر می‌کنم اگر افراد بیشتری در مورد ابزار هایی مانند Brython و Anvil ( با عرض پوزش از Skulpt) اطلاعاتی داشتند، افراد بیشتری از پایتون برای طراحی فرانت اند (frontend) استفاده میکردند.
شما چطور ؟ آیا استفاده از پایتون را نسبت به جاوا اسکریپت ترجیح می‌دهید ؟ آیا حاضرید آن را امتحان کنید ؟
برای ساخت برنامه های ماژولار با اجزای مستقل از Bit استفاده کنید
Bit ابزاری فوق العاده قابل توسعه است که به شما امکان می دهد برنامه های کاملاً ماژولار با مولفه های تألیفی، نسخه ای و نگهداری شده را به طور مستقل ایجاد کنید.
از Bit می‌توانید برای ساخت برنامه های ماژولار و سیستم های طراحی، نویسندگی و تحویل پیشخوان های میکرو یا به اشتراک گذاری ساده اجزای مختلف بین برنامه ها استفاده کنید.
کلید واژگان
پایتون برای فرانت اند – پایتون در فرانت اند – بهترین زبان فرانت اند – زبان فرانت اند – فرانت اند پایتون – پایتون در فرانت اند – ui در پایتون – طراحی رابط کاربری با پایتون – طراحی فرانت اند با پایتون – کتابخانه پایتون برای طراحی رابط کاربری
منبع :
5 دیدگاه برای “استفاده از پایتون برای فرانت اند (frontend) — طراحی فرانت اند با پایتون ”
با سلام …فقط وب هست یا خروجی فرانت اندروید هم داره؟
جالب بود
با سپاس از شما که نظرتون رو با ما به اشتراک گذاشتید.
خیلی جالب بود ولی کاش به همین راحتی که در backend از آن استفاده می کنیم در frontend هم میشد از آن استفاده کرد و نیاز به زبان دبگری نباشه
جالب بود