اگر در طی سال‌های اخیر در توسعه Frontend درگیر بوده‌اید، می‌دانید که انجام «فلج تجزیه و تحلیلی» (تجزیه و تحلیل بیش از حد که معمولا هم بدون صورت گرفتن هیچ‌گونه عمل انجام می‌شود) برای یک شخص، از کافی هم بیشتر است. فریم‌وورک‌ها و کتابخانه‌های جدید همه روزه در حال پدید آمدن هستند. شرکت‌های مختلفی در دور دنیا، با عمل دلهره آور انتخاب اساس مناسب برای پیاده‌سازی بخش‌های دیجیتال خود مواجه هستند. این مسئله در کنار کار کردن برای بروز ماندن به صورت همزمان، یک چالش بزرگ است.
حتی برای برخی توسعه دهندگان Frontend کهنه‌کار، زمانی فرا می‌رسد که زمینه فناوری تبدیل به یک انتخاب شخصی می‌شود. این می‌تواند اولویتی بر روی این مسئله که فناوری متد صحیح یا غلط برای برطرف کردن مشکلات است، باشد.
همینطور که مسابقه پیش می‌رود تا این فریم‌وورک‌ها تبدیل به سریع‌ترین، پرکارایی‌ترین و ساده‌ترین فریم‌وورک یا کتابخانه شوند، همه تعجب می‌کنند که دنیای JavaScript چه زمانی در قالب چند پشتوانه اصلی تحکیم خواهد شد؟ آینده JavaScript چه ظاهری دارد؟ و هوش مصنوعی چگونه سهم خود را در این فناوری بازی خواهد کرد؟
پس‌زمینه و شیوع JavaScript
JavaScript از زمان آغازش در سال 1995، تبدیل به معروف‌ترین، و زبان غالب بر روی وب شده است. در طی دهه اخیر، پذیرش آن بدون نشانه‌ای از کاهش سرعت، همینطور افزایش یافته است.
با توجه به بررسی‌های سالانه وبسایت StackOverFlow، ۶۰.۸ درصد پاسخ‌دهندگان و ۷۱.۵ درصد توسعه دهندگان حرفه‌ای، امروزه در حال استفاده از JavaScript هستند. با شیوع دستگاه‌های بیشتری که قابلیت وب را دارند، رقابت برای رسیدن به بهترین مورد سخت‌تر می‌شود. این مسئله برای توسعه دهندگانی که JavaScript را بلدند، یا این که می‌خواهند یاد بگیرند عالی است. برای کسانی که از دنیای Frontend دور هستند، پیشنهاد می‌شود که سعی کنند در آن تجربه کسب کنند.
فریم‌وورک‌ها و وب کامپوننت‌ها - آینده قابل پیش‌بینی
پس از جنگ میان فریم‌وورک‌ها در دهه اخیر، سه مورد برتر در حال پیشروی به سمت آینده‌ای باثبات‌تر و تعریف شده‌تر هستند. React، Vue و Angular تا به اینجا برجسته‌ترین فریم‌وورک‌ها و کتابخانه‌های JavaScript هستند. در این مقاله، آن‌ها را به ترتیب رواج توضیح خواهم داد.
React
React که ساخته شده و پشتیبانی شده توسط Facebook می‌باشد، یک مورد برتر در میان توسعه دهندگان برای ساخت و نگهداری محصولات است. چه یک POC سریع، یا چه یک نرم‌افزار حرفه‌ای. این مورد در حال حاضر مورد استفاده بسیاری از شرکت‌های برتر مانند Instagram، Netflix، Walmart، Whatapp و... است. منافع React شامل معماری بر پایه کامپوننت، DOM مجازی برای کارایی عالی، چرخه یادگیری بسیار سریع و معروفیت در میان توسعه‌دهندگان است.
Vue
Vue که توسط Evan You ساخته شد و سپس توسط Alibaba گرفته شد، به سرعت در حال محبوب شدن میان کسانی است که آن را پیدا می‌کنند. علت آن این است که Vue در ابتدا طراحی شده بود تا به طراحانی کمک کند که مقداری تجربه برنامه‌نویسی داشتند. هدف این بود که به آن‌ها کمک شود تا به جای این که کدنویسی کنند، رابط‌های عملکردی‌ای بسازند. این باعث شد که با داشتن یک آستانه ورودی حداقلی، یادگیری آن ساده‌تر شود. به علاوه، Evan که یک کارمند سابق گوگل است، مواردی که سنگین بوده، و یا می‌توانستند در Angular ارتقا یافته و در Vue اعمال شوند را مشاهده کرد. او همین کار را در هنگام انتشار React نیز انجام داد، و توانست به رسانه‌ای برسد که حال تبدیل به یکی از امیدوار کننده‌ترین فریم‌وورک‌ها برای یادگیری و وقف‌یابی شده است. به علاوه، Vue.js از رندر کردن اعلانی، بروزرسانی DOM ناهمگام، اتصال داده دو طرفه، تبعیت سختگیرانه به مشخصات وب کامپوننت و ادغام ساده با الگوهای HTML پشتیبانی می‌کند.
Angular
Angular که توسط گوگل ساخته شده و پشتیبانی شد، و توسط YouTube، Paypal، Google Maps و... استفاده شد، تا به اینجا بهترین انتخاب برای پیاده‌سازی شرکتی بوده است. آخرین نسخه آن یعنی Angular 6، دو مورد برجسته اصلی را به جلو آورد. یک قول با رندر کننده Ivy آن برای تسریع رندر کردن در برنامه و عناصر Angular که شما را قادر می‌سازد تا از عناصر Angular در خارج از آن، مانند Vue یا React استفاده کنید. با استفاده از پکیج عناصر، می‌توانید کامپوننت‌های Angular را بسازید و آن‌ها را به عنوان وب کامپوننت منتشر کنید، که بعدا هم می‌توانند در هر صفحه HTMLای استفاده شوند. برای کسانی که با پس‌زمینه‌ای از OOP یا Java می‌آیند، یادگیری Angular آسان‌تر است.
جدا از فریم‌وورک‌ها، اخیرا خیزشی در وب کامپوننت‌ها دیده‌ایم؛ اما آن‌ها چه هستند و چرا مهم هستند؟
از جامعه‌ای که از خستگی فریم‌وورک رنج می‌برد، وب کامپوننت‌ها مورد بزرگ بعدی هستند که از زمان HTML 5 در حال کشش می‌باشند. اما آن‌ها چه هستند؟ «وب کامپوننت‌ها یک استاندارد W3C قدرتمند و جدید هستند که در حال حاضر نیز توسط مرورگرهای اصلی تقبل شده‌اند و می‌توانند در برنامه‌های ما (با استفاده از Polyfill) استفاده شود. این‌ها ضمیمه‌ای بر DOM هستند که قابلیت تبدیل کردن وب به کامپوننت‌های کوچک، با قابلیت استفاده مجدد و ماژولار را دارند. وب کامپوننت‌ها به هیچ فریم‌وورکی وابسته نیستند، اما به طور خالص با استفاده از HTML، CSS و JavaScript ساخته شده‌اند.»
وب کامپوننت‌ها حجم کوچکی دارند، و در نتیجه نیازی به پیاده‌سازی کامپوننت سفارشی وجود ندارد. آن‌ها برای قابلیت استفاده مجددی که دارند، ستوده می‌شوند. زیرا وب کامپوننت‌ها به طور بومی در مرورگر پشتیبانی شده‌اند و می‌توانند در هر جایی و در هر فریم‌وورکی، بدون نیاز به هیچ‌گونه فریم‌وورک دیگر استفاده شوند. در آخر، وب کامپوننت‌ها به خاطر سادگیشان هم معروف هستند. اگر نمی‌خواهید، نیازی به یادگیری یک فریم‌وورک خاص وجود ندارد. اگر از قبل JavaScript ساده و APIهای DOM پایه را بلدید، می‌توانید با یک وب کامپوننت در تعامل باشید.
lonic/Stencil
lonic یک کتابخانه فریم‌وورک آگوستیک برای ساخت وب‌اپلیکیشن‌های قابل حمل و پیش‌رونده، که دسترسی مستقیم به امکانات بومی دستگاه دارند می‌باشد. با انتشار lonic 4، معرفی Stencil نه تنها آن‌ها قدرتمندتر کرده، بلکه توسعه دهندگان را قادر می‌سازد تا از آن در خارج از Angular استفاده کنند. چگونه؟ Stencil یک کمپایلر وب کامپوننت است که وب کامپوننت‌هایی بسیار سریع و کوچک می‌سازد. با ساخت کامپوننت‌های رابط کاربری خود با استفاده Web Components به جای کامپوننت‌های مخصوص فریبم‌وورک مانند React یا Angular، می‌توانیم از این کامپوننت‌ها در هر فریم‌وورکی که آن‌ها را پشتیبانی می‌کنند استفاده کنیم.
Polymer
Polymer یک کتابخانه JavaScript است که توسط Google توسعه داده شده و توسط Google Earth و YouTube استفاده می‌شود. Polymer از وب کامپوننت‌ها برای ساخت وب‌اپلیکیشن‌ها استفاده می‌کند و قابلیت ساخت JavaScript، CSS و HTML محصور را به عنوان عناصر سفارشی فراهم می‌کند، در حالیکه به جای تکیه کردن به کتابخانه‌های JavaScript، از فناوری‌های بومی مرورگر استفاده می‌کند.
گرچه، Polymer هنوز به بلوغ نرسیده است و با برخی چالش‌ها مواجه است. در ابتدا از آنجایی که DOM تولید می‌کند، هرگونه تعامل یا دستکاری DOM در JavaScript پایه خواهد بود، که کد boilerplate بیشتری اضافه می‌کند و در نتیجه سازمان‌دهی و مدیریت برنامه‌های بزرگ چالش برانگیزتر می‌شود. دوما، Polymer جانگه‌دارهایی برای متغیرها ساخت تا کارایی را بهبود بخشد و مشکلات تبدیل داده‌ها به رشته، فقط برای تبدیل مجدد آن‌ها به یک آبجکت را حل کرد. اما با استفاده از این جانگه‌دارها، شما به طور خارجی برنامه خود را به Polymer گره زده‌اید، زیرا جانگه‌دار یک وب کامپوننت نیست. آخرین چالش‌ها هم دانلود کردن کل کتابخانه و Polyfills، و کمبود رندر کردن سمت سرور است.
هوش مصنوعی، توسعه Frontend را در آینده دور (یا نزدیک) چگونه تغییر شکل خواهد داد؟
فراتر از کتابخانه‌ها و فریم‌وورک‌ها، هوش مصنوعی و یادگیری ماشین چگونه آینده توسعه Frontend را شکل خواهد داد؟ این سوال توسط افراد زیادی پرسیده شده است، اما شرکت‌های زیادی به طور جدی در آن فعالیت می‌کنند. این شرکت‌ها از تکنیک‌های مختلفی با امید توزیع زمینه‌ای که از حلقه‌های فریم‌وورک‌ها و کتابخانه‌ها می‌گذرد، استفاده می‌کنند. روش‌های موجود، به دو دسته تقسیم می‌شوند.
یک سمت، هدفش این است که با تولید کد آغازین از wireframeها و sketch-fileها یا ساخت یک خروجی Frontend کلی، به توسعه دهندگان کمک کند. این به توسعه دهندگان کمک می‌کند تا بر روی بخش‌هایی از توسعه که مهم‌تر هستند تمرکز کنند؛ مانند منطق برنامه و ساخت امکانات. این کار، سرعت فازهای طراحی و تغییرات را افزایش می‌دهد. شرکت‌هایی که به آن‌ها اشاره شد، شرکت‌هایی مانند Airbnd که اخیرا یک هوش مصنوعی ساخت که فایل‌های Sketch را تبدیل به کد خام می‌کند، و Uizard که از یک یادگیری عمیق / ML (شبکه عصبی) که آموزش داده شده بود تا از رابط‌های گرافیکی عکس برداری کند و آن را تبدیل به چند خط کد بنماید، هستند. نکته شگفت‌انگیز درباره Uizard، یک رندر کننده متن به رابط کاربری گرافیکی تکی است که میان پلتفرم‌های مختلفی مانند iOS، اندروید و رابط‌های بر پایه وب کار می‌کند، که تا به اینجا دقت ۷۷ درصدی را در کار خود دارد.
بعد هم برنامه Ink to Code مایکروسافت، که تلاشی در این زمینه کرد و نرم‌افزار خود را به صورت رایگان در Windows Store برای دانلود قرار داد. و در نهایت، Supernova که شروعی برای یک ماموریت در تسریع توسعه برنامه برای طراحان و توسعه دهندگان موبایل است. این برنامه قول می‌دهد که بتواند طراحی‌هایی که در Sketch کشیده شده‌اند را تبدیل به کد رابط کاربری کند، و مرز میان نمونه‌سازی و طراحی، و توسعه Frontend را از بین ببرد.
سمت دیگر، هوش مصنوعی را یک قدم جلوتر برده، و در حال استفاده از ماشین‌ها برای انجام کل کدنویسی Frontend هستند. BAYOU، که پروژه‌ای است که ارتش و گوگل در خارج از دانشگاه Rice بر روی آن سرمایه گذاری کردند، از یک ابزار یادگیری عمیق استفاده می‌کند که عملا به مانند یک موتور جستجو برای کدنویسی کار می‌کند. شبکه عصبی BAYOU، با خواندن کد 1500 برنامه اندروید، حال یک هوش مصنوعی است که می‌تواند نرم‌افزارهای دیگری بنویسد.
Web-Assembly در کل این مسئله در کجا قرار دارد؟ یک آینده احتمالی
Web-Assembly یک قالب باینری است که می‌تواند در تمام مرورگرها و بسیار سریع‌تر از آنچه که JavaScript می‌تواند parse شود، decode شود. این اصطلاحی است که در جامعه توسعه در حال گردش بوده است. در واقع این اصطلاح می‌تواند در مکمل با JavaScript، تبدیل به تصویب شده‌ترین اصطلاح شود.
چرا؟ زیرا با کاهش زمان مورد نیاز برای تعامل، کارایی را افزایش می‌دهد، و همچنین زبان‌هایی که توسعه Frontend می‌تواند در آن‌ها نوشته شود را افزایش می‌دهد. این مسئله توسعه دهندگان را قادر می‌سازد تا از زبان مورد علاقه خود استفاده کنند، یا بتوانند برخی از بخش‌های وب‌اپلیکیشن را با Web-Assembly بسازند، در حالیکه سرعت کار را افزایش می‌دهند و باقی برنامه را در JavaScript باقی می‌گذارند.
نتیجه گیری
دنیای Frontend که امروزه می‌شناسیم، توسط سه فریم‌وورک بزرگ حکمرانی می‌شود: React، Vue و Angular. (که Vue امیدوارکننده‌ترین آن‌ها است) گرچه، با شناختی که از چرخه گذشته فریم‌وورک‌ها داریم، اگر یک فریم‌وورک جدید به میدان بیاید که سریع‌تر است، کارایی بهتری دارد و مشکلاتی که در حال حاضر با آن‌ها رو به رو هستیم را حل می‌کند، جای تعجب ندارد.
آینده‌ای که من تصور می‌کنم، یک فریم‌وورک دورگه از مواردی است که امروزه در دسترس هستند. جایی که یک فریم‌وورک آسان‌ترین مورد برای یادگیری توسعه دهندگان است، و یک راه حل کامل را فراهم می‌کند و از تکنیک‌های مکمل مانند وب کامپوننت‌ها، Web-Assembly و هوش مصنوعی استفاده می‌کند تا یک راه حل کامل برای توسعه برنامه‌ها باشد.
بخش‌های هسته‌ای برنامه با استفاده از وب کامپوننت‌ها ساخته می‌شوند تا بتوانند به راحتی استفاده شده، و به اشتراک گذاشته شوند.
Web-Assembly به عنوان یک تسریع دهنده استفاده خواهد شد تا برنامه را سریع‌تر و کارایی‌تر کند.
هوش مصنوعی با هدف تسریع روند توسعه به کار گرفته خواهد شد؛ چه برای ساخت کد آغازین و کاهش boilerplate، یا چه برای اعتبارسنجی کیفیت کد ساخته شده.
آموزش‌های راکت
وبسایت راکت در زمینه Frontend آموزش‌هایی طراحی کرده است که می‌توانید برخی از آن‌ها را در لینک‌های زیر مشاهده کرده، و بگذرانید:
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید