فریم ورک های جاوا اسکریپت touch به جای طراحی ریسپانسیو

X
اگر این مطلب را مفید میدانید، لطفا برای حمایت از ما روی این دکمه کلیک کنید.

فریم ورک های جاوا اسکریپت :

با رشد روز افزون اپلیکیشن های تحت وب و به قولی Ajax ای و همچنین استفاده از قابلیت های منحصر به فرد html5 امکانات بسیاری در اختیار برنامه نویسان وب قرار گرفته است, اما همانطور که خود شما هم تجربه کرده اید پیاده سازی و ایجاد اپلیکیشن های بزرگ تحت وب بسیار عذاب آور است, از معماری وب اپلیکیشن گرفته تا هسته ی کار که باید تعداد زیادی view را پشتیبانی کند, آیا دستگاه های جانبی مثل موبایل را هم باید وب اپلیکیشن را پشتیبانی کند یا خیر , کم حجم شدن فایل های وب اپلیکیشن برای زمان لود کمتر , قابلیت توسعه پذیری ,مطابقت داشتن با theme های مختلف, زمان کم برای تولید وب اپلیکیشن و … مواردی هستند که همیشه در زمان ایجاد و ساخت اپلیکیشن های بزرگ تحت وب مشکل ایجاد کرده اند . خدا را شکر به خاطر وجود جاوا اسکریپت. نسل جدید فریم ورک های جاوااسکریپت به تمام نیازها پاسخ می دهند , کارهای تکراری در پروسه ی تولید یک وب اپلیکیشن مثل validate کردن یک فرم , ارسال درخواست های Ajax, کار با Dom, حتی طراحی و نقاشی در وب , انیمیشن و حتی هماهنگی با event های دستگاه هایtouch و …را برای ما انجام می دهند.بنابراین باعث صرفه جویی در وقت و هزینه می شوند و خروجی آنها اپلیکیشن تحت وب حرفه ای تریست. ما دراین وب سایت می خواهیم به معرفی تعدادی ازآنها بپردازیم و در نهایت اثبات کنیم که هم اکنون فریم ورک ExtJS در کلاس کاری خود حرفه ای ترین و کامل ترین آنهاست و چرا تا مدت های طولانی هم این برتری را حفظ میکند.

فریم ورک چیست ؟

فریم ورک مجموعع از توابع مجتمع و ابزارهاییست که شما را کمک میکنند وب اپلیکیشن خود را به سرعت و با کمترین درگیری با سختی های جاوا اسکریپت بوجود آورید. اغلب فریم ورک های تحت وب رایگان هستند و داکیومنت ها و راهنماهای زیادی هم در وبسایت خودشان ارائه داده اند.

ویژگیهای یک فریم ورک حرفه ای جاوا اسکریپت چیست ؟

همان طور که می دانید تعداد زیاد فریم ورک های جاوا اسکریپت تحت وب باعث سردرگمی و مواجه شدن با انتخاب های زیادی می شود لذا در هنگام انتخاب یک فریم ورک جاوا اسکریپت برای تولید وب اپلیکیشنتان به موارد زیر حتما دقت کنید:

داکیومنت خیلی خوب ,زیاد و واضح

کامیونیتی فعال و فرومهای پر کاربر

ارائه ی کامپوننت های UI فراوان

پشتیبانی از معماری های مختلف

گسترش ساده وراحت قسمت های مختلف

توسعه یافته بر پایه ی شی گرایی

ابزار تست توکار

قابلیت بهینه شدن

عدم مشکل و تداخل با سایر فریم ورک ها

پشتیبانی از امکانات به روز و مدرن Html5

پشتیبانی از دستگاه های مختلف با ارائه package ها یا فریم ورک های مخصوص

نمودار یادگیری منظم

پشتیبانی از طراحی ظاهری Responsive

ابزاری مانند CMD برای ایجاد سریع قسمت های تکراری

برخی امکانات برنامه نویسی مانند (توابع کار با DOM , و …)

ارائه ی design pattern های خوب و کاربردی

حل مشکلات نمایشی روی مرورگرهای مختلف

امروزه فریم ورک های زیادی با پایه ی جاوا اسکریپت به وجود آمده اند که هر کدام هم هدف خاصی دارند و نیاز خاصی را برآورده می کنند.

همانطور که میدانید فلسفه ی فریم ورک ها ارائه ی design pattern ها یا همان راه حل های مورد نیاز در اپلیکیشن های وب است. و به علت اینکه برنامه سازی در وب بسیار مبحث گسترده و بزرگی است فریم ورک های متعدد هم در این زمینه نیازهای متفاوتی را برآورده می سازند.

Design pattern یا الگوی طراحی دروب یکی از مباحث فلسفی وب محسوب می شود و در واقع عبارت است از علم پاسخ دادن به مشکلات و مسائل موجود در برنامه های وب.از مسائل ساده و پیش پا افتاده تا مسائل سخت.

به عنوان مثال, یکی از design pattern های قدیمی برای نمایش لیست های طولانی این بود که آنها را صفحه بندی می کردند که به این تکنیک هم pagination میگفتند. راه حلی که هم اکنون موتورهای جستجو از آن برای صفحه بندی نمایش نتایج انجام می دهند. در مقابل این تکنیک, سبک جدید آن با نام lazy load ارائه شده است. بدین ترتیب که در یک وب اپلیکیشن حرفه ای این گونه نظر گرفته می شود که قبل از اینکه کاربر به انتهای صفحه برسد رکوردهای جدید برایش لود می شوند.

مسائل بسیاری از این قبیل در برنامه سازی به وجود می آیند که در علم Design pattern می توان آنها را به طور کامل بررسی نمود. علت اصلی برتری فریم ورک ExtJS هم در ارائه ی Design pattern های فوق العاده به نسبت سایرین بوده است.

برگردیم به مبحث اصلی خودمان و فریم ورک ها :

البته در این بین هم اشتباه نباید کرد و اینکه هر مجموعه کد جاوااسکریپتی را نمی توان فریم ورک جاوا اسکریپت نامید .

به عنوان مثال jquery را نمی توان به طور کامل یک فریم ورک جاوا اسکریپت تحت وب نامید حتی خود تولید کننده ی این محصول هم آن را library یا کتابخانه نامیده است ولی به عنوان مثال در بحث به هنگام ExtJS ما در مورد یک فریم ورک کامل تحت وب صحبت می کنیم که تمام نیازها را برای ساخت یک وب اپلیکیشن حرفه ای تحت وب شامل معماری, کامپوننت های UI و دستورات و ساختارهای متعدد, ابزار تست و… را پیش روی توسعه دهنده قرار می دهد.

بنابراین به این فکر نکنید که اگر در پروژه ای از ExtJS استفاده کردید دیگر نیازی به کتابخانه ی Jquery نیست.به دلیل اینکه تقریبا کارهای متفاوتی را انجام می دهند در این وب سایت می خواهیم تعدادی از فریم ورک ها یا کتابخانه های متفاوت جاوااسکریپت قدرتمند و مفید را نام ببریم که در پروژه های متعدد استفاده می شوند و پیشنهاد می شود از آنها هم در پروژه هایی که به آنها نیاز دارند استفاده کنید.

نکته :

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

به طور قطع شما هم در مورد طراحی ریسپانسیو یا واکنش گرا مطالبی را شنیده یا مطالعه کرده اید, و یا دسته ای از خوانندگان محترم حتی پروژه هایی را به این روش انجام داده اند.پس نقطه ی اشتراک ما با هم اینست که حداقل می دانیم طراحی ریسپانسیو چیست و کاربردهایش کجاهاست, بنابراین نمی خواهیم به طور خاص در مورد طراحی ریسپانسیو توضیح بدهیم و بحثی داشته باشیم. دراین مقاله می خواهیم به این نتیجه برسیم که طراحی ریسپانسیو با تمام خوبیهایی که دارد در بعضی موارد کارساز نیست. ما به طور خاص و نکته به نکته امکانات طراحی ریسپانسیو را با امکانات یک فریم ورک جاوا اسکریپتی touch که مخصوص دستگاه های موبایل و تبلت است مقایسه می کنیم و نتیجه گیری خواهیم کرد که استفاده از فریم ورک جاوا اسکریپتی مخصوص موبایل و تبلت به نسبت طراحی responsive انتخاب بهتری است, در موارد زیر برتری های فریم ورک جاوا اسکریپتی را نسبت به این مدل طراحی مشاهده می کنید:

مدیریت رویداد :

رویداد ها یا event های بسیار زیادی در یک فریم ورک جاوا اسکریپتی تحت وب وجود دارند که هیچ کدام از آنها در طراحی ریسپانسیو وجود ندارند و کتابخانه یا ابزار دیگری هم نداریم که این قابلیت را به اپلیکیشن بدهد, به عنوان مثال در فریم ورک sencha touch رویداد هایی همچون tap,double tap,tapstart,drag,pinch,taphold,و… وجود دارند که باعث حرفه ای شدن اپلیکیشن مورد نظر میشوند ولی در طراحی ریسپانسیو باید تک تک این موارد راساخت که تقریبا هیچ کسی این کار را نمی کند بنابراین یکی از نکاتی که باعث برتری فریم ورک های تحت وب touch به این نوع طراحی و در واقع html می شود اینست که در یک فریم ورک touch تمام رویداد ها از قبل ساخته شده اند و شما می توانید برنامه ای را به کاربر بدهید که همه گونه تعامل را می تواند با کاربر انجام دهد.

کامپوننت های آماده :

در طراحی ریسپانسیو(واکنشگرا) کامپوننت های UI وجود ندارد و برنامه نویس مجبور به ساختن آنهاست در حالی که در فریم ورک های touch تحت وب المان های UI بسیار با ارزشی وجود دارند, که خیال برنامه نویس و توسعه دهنده را از بابت ساخت آنها راحت می کند, ممکن است بگویید می توان با استفاده از کتابخانه هایی همچونbootstrap می توان کامپوننت های UI را استفاده کرد, حرف درستی است اما این فریم ورک فقط برای حل مشکلات عمومی html است که در کنار این امکاناتش استفاده از طراحی ریسپانسیو را فراهم کرده است و بحث ما در مورد خود طراحی ریسپانسیو و معایب بیشمار آن در مقابل مزایای محدودش می باشد. به عنوان نمونه فریم ورک تحت وب sencha touch به عنوان قویترین فریم ورک تحت وب به جهت ایجاد وب اپلیکیشن روی موبایل ها و تبلت ها مجموعه ای از کامپوننت های UI را ارئه می دهد که در کمتر فریم ورک دیگری می توان آنها را یافت.

cross browser یا اجرای هماهنگ روی تمام مرورگرها:

دوستان html کار بهتر می دانند و این نکته را حس می کنند که یکی از دغدغه های آنان در بخش html هماهنگ کردن خروجی در مرورگرهای مختلف می باشد, زمان زیادی صرف این کار می شود اعصاب html کار خراب می شود, هزینه ای صرف ساعات از دست رفته میشود ودر نهایت آن طورکه باید نتیجه نمی دهد. اما در مقابل یکی از برتری ها و امکانات فریم ورک های تحت وب touch اینست که از پیش این خروجی را تنظیم کرده اند و در هنگام تست برنامه روی مرورگر ها و پلت فرم های مختلف نمایش یکسانی از html دارند. یکی از بهترین فریم ورک ها در این زمینه فریم ورک قدرتمند sencha touch محصول شرکت sencha می باشد.

تغییر قالب بندی و CSS در هر زمان دلخواه:

یکی از امکانات مورد نیاز در پروژه های نیمه تجاری, داشتن امکان تعویض قالب و تم کار می باشد که در هر پروژه ای فازی برای این قسمت تعیین می شود, خوبی کار با فریم ورک های JavaScript مدرن و علی الخصوص فریم ورک Ext JS و یا sencha touch استفاده ی داخلی آنها از یک موتور مدیریت تمپلت قوی است که با استفاده از تکنولوژی sass ایجاد و ویرایش تمپلت های متنوع را فراهم کرده اند بنابراین خروجی کار یک وب اپلیکیشن با رابط کاربری خوب و زیباست.

IDE اختصاصی :

در حال حاضر این امکان را تنها فریم ورک های JavaScript محصول شرکت سنچا دارا می باشند. نرم افزار و محیط کدنویسی ای با نام sencha architect مختص توسعه و کدنویسی برای فریم ورک های sencha touch و Ext JS می باشد. علت اینکه از این گزینه با عنوان برتری نسبت به مدل طراحی ریسپانسیو (واکنش گرا) نام بردیم اینست که در این محیط توسعه ی کد, قابلیت تست خروجی برنامه در رزولوشن های مختلف وجود دارد و به راحتی می توانید المان مختلف UI موجود در اپلیکیشنتان را در سایز ها و مقیاس مختلف تنظیم کنید.

ایجاد برنامه های قابل اجرا در چند سیستم عامل و محیط (cross platform):

چه کسی بدش می آید یکبار برنامه ای را بنویسد و آن را در تمام محیط ها از وب گرفته تا سیستم عامل لینوکس همان را اجرا کند؟! و این قابلیتی است که فریم ورک قدرتمند جاوا اسکریپتی sencha فراهم می کند (همان sencha touch). حتی sencha touch (سنچا تاچ) بخشی با عنوان پروفایلر دارد که برنامه نویس با استفاده از می تواند یک برنامه را بنویسد و آن را در چند سایز و چند view مختلف به اجرا دراورد. به عنوان نمونه برنامه ای که روی یک مانیتور لمسی ۴۲ اینچی اجرا می شود مسلما امکانات بیشتری باید نسبت به اجرای برنامه روی یک تبلت کوچک داشته باشد.سنچا تاچ در معماری MVC می تواند قسمت view را تقسیم کند و برای هر مانیتور با هر سایزی یک view ارائه دهد. در فریم ورک جاوا اسکرپتی sencha touch این کار از طریق یک middle ware با عنوان cordova انجام میشود که محصول شرکت apache می باشد.

کارایی (performance):

با توجه به اینکه محصول فریم ورک تحت وب دقیقا برای دستگاه های لمسی وبا توجه به امکانات آنها ساخته می شود لذا تیم سازنده از قبل فکر همه چیز را می کند, تیم سازنده می داند نباید فریم ورکی بسازد که فایل اصلی آن زمان زیادی را برای لود و بارگذاری روی تبلت صرف کند. میداند نهایتا چه میزان RAM باید بکار ببرد و افکت های انیمیشنی که مهیا کرده است چند فریم در ثانیه می تواند روی مرورگر اجرا شود, همچنین میداند کاربران در اسمارت فون های مختلف از مرورگرهای مختلفی از IE گرفته تا chrome ویا opera بهره می گیرند لذا یکنواخت سازی خروجی را هم به طور کامل انجام میدهند.

Design pattern:

هنگام استفاده از یک فریم ورک به جهت تولید اپلیکیشن تحت وب خیال برنامه نویس از همه بابت راحت است! این جمله چه معنی می دهد؟

آیا تا به حال هنگام کد نویسی به مشکل در هنگام تصمیم گیری برای انتخاب یک کامپوننت مناسب در طراحی برخورده اید؟مثلا آیا پیش امده است که برای نمایش محتویات هم کامپوننت listbox مناسب باشد هم combobox وهم tab panel؟؟

مسلما این امر بارها و بارها پیش آمده است برای خود من که این مسئله کلافه کننده است چرا که من به عنوان برنامه نویس باید به فکر تولید کد مناسب باشم نه انتخاب و تصمیم گیری برای رابط کاربری.

این مسئله به هنگام کار با ابزار sencha architect بسیار ساده می شود, به علت اینکه تمام ابزارهای UI در پنجره ای در اختیار کاربر هستند می تواند با درگ دراپ به راحتی و در چند ثانیه تصمیم خود را بگیرد.

و این یعنی علم design pattern (الگوی طراحی), فریم ورک ها از قبل تصمیمات لازم را برای کارهای ماگرفته اند یعنی design patternهای مورد نظر برای برنامه نویس مهیا می باشد و نیازی به خلق کامپوننت جدید نیست.

لینک منبع

دیدگاه‌ها

سئوال

تصویر moein313

با سلام و تشکر میخواستم بپرسم میشه محصولات آموزشی را بصورت پکیج دی وی دی بخریم نمیخاستم دانلود کنم؟

سلام

تصویر امیر چابک

با سلام در حال حاضر امکان خرید پستی وجود ندارد.

با درود بسيار

تصویر ajirak

با درود بسيار

و تشکر از زحمات و مطالبي که در اختيار دوستان قرار مي دهيد.

مجموعه هاي آموزشي شما هم خيلي عالي هستند.
با آرزوي موفقيت و بهروزي