طراحی نرم افزار اندروید
طراحی اپلیکیشن موبایل
بررسی دقیق سه فریمورک اصلی جاوا اسکریپت
در سال 2020 هستیم. امروزه مسیر طراحی وب با سال‌های گذشته بسیار فرق کرده. دیگه خبری از یک صفحه HTML ساده و یک فایل استایل CSS نیست. از جاواسکریپت تنها برای انیمیشن‌ها و یا اسکریپت نویسی ساده استفاده نمیشه. امروزه به لطف پیشرفت NodeJS، ابزارهای متعدد و community بزرگ جاوااسکریپت، این زبان به بخش مهم و جدایی ناپذیری از دنیای وب تبدیل شده است. بخشی که ما بیشتر تحت عنوان فرانت‌اند وب میشناسیم و روز به روز اهمیتش بیشتر برای همه آشکار میشود.
در این مقاله قصد داریم به صورت مختصر درباره سه فریمورک (یا به فارسی چارچوب) محبوب فرانت‌اند برای ساخت SPA (Single Page Application) که در دنیا بیشترین استفاده و محبوبیت رو دارن صحبت کنیم و مزایا و معایبشون رو بررسی کنیم. البته در اینجا منظور از مزایا این نیست که یک فریمورک بر دیگری برتری دارد! بررسی‌های ما فقط از نظر راحتی کار و سطح دشواری در یادگیری خواهد بود و سعی ما این هست که syntax هر کدوم رو تا جای ممکن با هم بررسی کنیم. در ابتدا یک معرفی ساده از هر فریمورک خواهیم داشت. سپس، مزایا و معایب کلی هر فریمورک رو بررسی خواهیم کرد. در ادامه محبوبیت و بازار کار هر فریمورک رو زیر ذره‌بین میبریم و در نهایت ساختارفایل ها و فولدرهای هر فریمورک بررسی میشود.
برای شروع بیاین هر کدوم از این فریمورک‌ها رو به صورت جداگانه معرفی کنیم.
:React.JS
اگر از حق نگذریم میشه گفت که React.JS بین تمامی فریمورک‌های موجود برای جاوااسکریپت عنوان محبوب‌ترین رو به خودش اختصاص داده. این کتابخونه با بیش از 145 هزار ستاره در گیت‌هاب و 7 میلیون دانلود هفتگی در NPM (Node Package Management) از محبوب‌ترین فریمورک‌ها در جاوااسکریپت هست که توسط فیسبوک توسعه داده شده. اولین نسخه React.JS در سال 2011 ارائه شد و آخرین نسخه این کتابخونه (در زمان نگارش این مقاله)، نسخه 16.13.0 هست که حجمش به همراه React-DOM (که برای وب اپلیکیشن‌هایی که با React.JS ساخته میشن نیاز هست) حدود 109 کیلوبایت هست.
مزایای React.JS:
• React.JS ماژولار است. به این صورت که میتونیم کامپوننت‌های خودمون رو به صورت جدا دسته بندی کنیم و با تنها یک بار نوشتن کامپوننت چندین بار از آن استفاده کنیم.
• React.JS مسیر ساده‌ای برای یادگیری دارد. در حالت ساده نیازی به دونستن عمیق جاوااسکریپت ندارید و با دانش ابتدایی از جاوااسکریپت میتونید کار با React.JS رو شروع کنید.
• React.JS از مفهومی به نام JSX استفاده میکند. با این قابلیت میتونید در کدهای جاوااسکریپت از HTML استفاده کنید. بنابراین داشتن تنها دانش HTML برای فرد کافیه تا با React.JS کار خودش رو شروع کنه.
• React.JS از class های ES6 (Ecma Script 2015) برای ساخت کامپوننت‌ها استفاده میکند. بنابراین به توسعه دهنده‌هایی که با برنامه‌نویس Object Oriented آشنایی دارن کمک میکنه تا دانش خودشون رو تو نوشتن کامپوننت‌های خودشون استفاده کنند و از این سبک برنامه نویسی لذت ببرن.
• React.JS از function های جاوااسکریپت هم برای ساخت کامپوننت استفاده میکند. بنابراین اگر برنامه‌نویس مبتدی هم باشید و با ES6 آشنایی نداشته باشید به راحتی میتونید از این فریمورک استفاده کنید.
• کار کردن با React.JS بسیار راحت است. در حالت ساده کافیه این فریمورک رو با یک CDN وارد پروژه‌تون کنید و کامپوننت‌های خودتون رو بسازید. هیچ نیازی به ابزار دیگه‌ای برای ساخت ندارید. به همین دلیل خود React.JS از خودش به عنوان یک کتابخانه ساده یاد میکنه نه یک فریمورک پیچیده!
• React.JS دارای یک community بسیار بزرگ است. این مورد بدون شک یکی از بزرگترین مزایای React.JS به حساب میاد. چه زمانی که بخواین به جواب یک سوال در مورد React.JS برسید. چه زمانی که به فرصت‌های شغلی موجود در بازار نگاه بندازید.
• React.JS از Virtual DOM استفاده میکند که باعث سرعت زیاد این فریمورک میشود. چرا که فقط تغییراتی رو که لازم هست در DOM اعمال میکنه و تمامی DOM رو از ابتدا نمیسازه.
• تغییر بین نسخه‌های React.JS بسیار ساده است. چرا که توسعه دهندگان React.JS همیشه طوری نسخه‌ها رو ارتقا میدن که برای پروژه‌های فعلی که با این فریمورک نوشته شده مشکلی پیش نیاد.
• React.JS از تمامی ویژگی‌های ES6 پشتیبانی میکند.
• React.JS دارای یک فریمورک خاص موبایل به نام React native هست که به شما اجازه میده با دانش React.JS ای خودتون برنامه‌هایی برای سیستم‌عامل های موبایل Android و IOS بسازید.
• React.JS مستندات نسبتا خوب و روانی داره که در سایت خودش میتونید به مستندات دسترسی داشته باشید.
• به دلیل محبوبیت زیاد این فریمورک، آموزش‌های فراوانی هم به صورت فارسی و هم به صورت انگلیسی وجود داره.
معایب React.JS:
• وجود راه‌ها و روش‌های بسیار زیاد برای توسعه در React.JS برخی اوقات باعث سردرگمی افراد در زمان توسعه میشود.
• React.JS نسبت به رقیب‌های خودش یعنی Vue.JS و Angular ، syntax نامرتب تری دارد. به طور مثال برای نوشتن شرط‌ها، حلقه‌ها، و ... در JSX ، شاید فریمورک‌های دیگه عملکرد زیباتری در syntax دارند.
:Vue.JS
Vue.JS نسبت به React.JS جدیدتر و جوان‌تره. اما اگر نگاهی به سرعت رشد این فریمورک کوچک بندازیم میبینیم که در دنیا بین کاربران محبوب‌تر واقع شده. به طور مثال اگر فقط به آمار عددی نگاه کنیم این کتابخونه دارای 159 هزار ستاره در گیت‌هاب و 1.5 میلیون دانلود هفتگی در NPM هست.این کتابخونه بر خلاف Angular و React.JS توسط هیچ کمپانی بزرگی توسعه داده نشده و به لطف community خودش تا این حد پیش رفته. اولین release رسمی Vue.JS در سال 2014 بود و توسط Evan you توسعه داده شده. نسخه فعلی این کتابخونه 2.6.1 هست اما نسخه 3 در حال ساخته. جالبه بدونید این کتابخونه تنها 30 کیلوبایت حجم داره.
مزایای Vue.JS:
• بزرگترین مزیت Vue.JS سادگی در یادگیری هست که نسبت به رقیب‌های خودش یعنی React.JS و Angular بسیار ساده‌ست. یادگیری Vue.JS حتی در سطوح بالا هم نسبتا آسونه!
• حجم این فریمورک تنها 30 کیلوبایته و برای شروع به هیچ وابستگی خارجی دیگه‌ای احتیاج نداره.
• برای شروع کار با Vue.JS و ساخت یک اپلیکیشن ساده خیلی راحت فقط کافیه CDN این فریمورک رو داخل صفحه HTML خودتون وارد کنید و شروع به کدنویسی کنید.
• اپلیکیشن‌هایی که با Vue.JS نوشته میشن سرعت توسعه بسیار بالایی نسبت به بقیه‌ی فریمورک‌ها دارن.
• شباهت Vue.JS به دو فریمورک رقیب خودش یعنی React.JS و Angular این امکان رو به برنامه‌نویسان میده که به راحتی از دیگر فریمورک‌ها به این فریمورک مهاجرت کنند.
• سرعت اپلیکیشن هایی که با Vue.JS توسعه داده میشن بسیار زیاده. به گفته توسعه دهندگان این فریمورک، سرعت در نسخه بعدی (که در حال ساخته) بیشتر از نسخه فعلی هم خواهد بود.
• طراحی ماژولار در Vue.JS به خوبی مشهوده. شما همه‌ی کدهای HTML، CSS و JavaScript خودتون رو به صورت یکجا در یک فایل با پسوند .vue میتونید داشته باشید. این موضوع باعث میشه بتونید یک کامپوننت رو به صورت کاملا مجزا بدون نیاز به ساختن فایل‌های متعدد طراحی کنید.
• Vue.JS هم مثل React.JS از Virtual-DOM استفاده میکنه که باعث میشه سرعت زیادی داشته باشه.
• مستندات Vue.JS بسیار کامل و روان هستن. در سایت خودش میتونید به مستندات دسترسی داشته باشین.
• Vue.JS از template engine بسیار ساده و خوانایی استفاده میکنه که باعث میشه هنگام نوشتن کدهای HTML ، syntax بسیار تمیز و خوانایی داشته باشیم.
معایب Vue.JS:
• Vue.JS نسبت به دیگر فریمورک‌های موجود جوان‌تر هست. به همین دلیل، تعداد کتابخانه‌های موجود برای آن نسبت به فریمورک‌های دیگه کمه.
• اگر اپلیکیشن‌هایی که با Vue.JS توسعه داده میشن بیش از حد بزرگ بشن حجم کدهای نوشته شده زیاد و مدیریتشون سخت میشه.
• Vue.JS نسبت به فریمورک‌های React.JS و Angular دارای فریمورک‌های خارجی خوبی برای توسعه اپلیکیشن‌های موبایلی نیست.
:Angular
Angular که نسخه جدید AngularJS به حساب میاد توسط گوگل در سال 2016 ارائه شد.Angular دارای 58 هزار ستاره در گیت‌هاب و 1.5 میلیون دانلود هفتگی در NPM هست و از رقبای خودش یعنی React و Vue در جایگاه پایین‌تری (از نظر محبوبیت) قرار داره اما باز هم از فریمورک‌های محبوب جاوااسکریپت به حساب میاد. با این که Angular، نسخه‌ی آپدیت شده AngularJS به حساب میاد اما این دو شباهت زیادی به هم ندارن و کسانی که با AngularJS آشنا بودن برای مهاجرت به Angular نیاز دارند که از ابتدا با این فریمورک آشنا بشن (بنابراین باید دقت کنیم که Angular با AngularJS تفاوت داره). Angular از typescript استفاده میکنه و به همین دلیل syntax منسجم‌تر و خواناتری نسبت به فریمورک‌های دیگه داره و از یک ساختار بسیار با انضباط استفاده میکنه. نسخه فعلی این فریمورک Angular 9 هست.
مزایای استفاده از Angular:
• Angular از typescript استفاده میکنه که باعث انسجام بیشتر اپلیکیشن‌های ساخته شده با این فریمورک میشه و احتمال خطا رو پایین میاره.
• Angular دارای اتصال داده دو طرفه هست که احتمال خطا رو در اپلیکیشن‌هایی که با این فریمورک نوشته میشن پایین میاره.
• ساختار کامپوننت‌ها در Angular به صورت کاملا ماژولار هست و میتونید ماژول‌های خودتون رو به صورت مجزا توسعه بدید.
• در Angular نوشتن تست بسیار ساده هست.
• در Angular به هیچ وابستگی و کتابخانه خارجی نیاز ندارید. تمامی مواردی که لازم دارین در این فریمورک قرار دارند.
• Angular دارای یک سیستم Routing قوی در درون خودش هست.
• اپلیکیشن‌هایی که با Angular نوشته میشن سرعت بالایی دارن.
معایب استفاده از Angular:
• به دلیل اینکه Angular از typescript استفاده میکنه پیچیدگی syntax بیشتری نسبت به بقیه رقبای خودش داره. برای شروع کار با Angular اکثرا افرا دچار مشکل میشوند.
• Angular حجم بالاتری نسبت به بقیه رقبای خودش دارد.
• Angular انسجامی در نسخه‌های خودش ندارد. به طور مثال مهاجرت از AngularJS به Angular کار ساده‌ای نیست!
• ساختار Angular پیچیدگی بیشتری نسبت به بقیه فریمورک‌ها دارد. به همین دلیل برای پروژه‌های کوچک مناسب نیست و پیشنهاد نمیشه.
طراحی اپلیکیشن اندروید | طراحی وب سایت | شرکت ایده پردازان پاراکس
