چرا JQuery را به Ext JS ترجیح میدم

چند وقت پیش یکی از دوستان (آقای زنگنه) که الان مدیر پروژه شرکت ساختمان کالا هستن به من گفتن که از Ext JS تجربه خوبی ندارن و گفتن که این لایبراری سنگینه و یک کار ناموفق رو باهاش تجربه کردن.

فعلاً تصمیم گرفتم واسه طراحی UI از همون JQuery  استفاده کنم .

مگه میشه جواب نده آخه کلی قیمتشه . برنامه نویس های قدری پشتشن .

ولی فعلاً امکان تست این مساله وجود نداره از طرفی نمیتونم ریسک کنم .

Sencha Cmd - (سانچا)

اکثر برنامه نویس هایی که دارن واسه وب کد میزنن . فرقی نمیکنه asp.net و php و یا jsp . عادت دارن که واسه هر موجودیت جدید یه پیج جدید ایجاد کنن مثلاً واسه موجودیت پرسنل یه فرم پرسنلی درست میکنن . تازه بعضی ها واسه هر کدوم از عملیات CRUD یک پیج درست میکنن .

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

 

Create & build Sencha ExtJS project using Sencha Cmd

In a typical Sencha ExtJS based enterprise project, we create various JS+CSS files and it becomes cumbersome to manage them during the development because they need to be listed in the proper order in the index.html file and for every addition of a file, we need to add it to the index.html, as well. After the development is done, we minify all the JS and CSS files to have better loading performance, and go back and modify the index.html file to use the minified files rather than individual files. After introduction of the new Class System in ExtJS this tedious task has been taken care by the framework and the developer is not required to do all that, anymore. This is a big relief. However, the new Class System expects a specific folder structure so that it can load the classes, dynamically, and is based on the MVC architecture. To make this managing of folder structure effortless and leverage the same for the minification, Sencha has provided a tool – Sencha Cmd. So, as long as you plan to use the MVC architecture offered by Sencha ExtJS, Sencha Cmd is a must tool to create, build and package your application.

مطابق متن بالا , Sencha Cmd یک ابزار ضروری برای تولید UI مبتنی بر فریم ورک Ext JS می باشد و در مراحل مختلف تولید UI به ما کمک میکنه :

بعنوان مثال با کمک دستور زیر میتوانیم یک پروژه جدید ایجاد کنیم که سایز پروژه ایی که ایجاد میشه بیش از 100 مگابایت می باشد:

sencha -sdk /path/to/ExtJssdkFolder generate app MyAppName /path/to/MyAppFolder

 

و با کمک دستور زیر میتونیم فایلهای Javascript رو فشرده کنیم و پروژه رو آماده تحویل (Deployment) نماییم که سایز پروژه ای که آماده تحویل میشه فقط 5 مگابایت می باشد :

sencha app build production

Sencha Cmd یه ابزاره که تویه همه سیستم عامل ها کار میکنه . برای نصبش تویه ویندوز :

1.باید JRE یا JDK  نسخه 6 به بالا در سیستمتون نصب باشه .

2.باید نسخه 1.8 و یا 1.9 Ruby در سیستم تون نصب باشه و مسیر روبی در Path ویندوزتون اضافه شده باشه.

3.باید نسخه 4 به بالاتر Ext JS بر روی سیستمتون موجود باشه .

4.البته نصب خود Sencha Cmd یک نکته کوچیک تویه ویندوز داره و اون اینه: یوزری که باهاش به ویندوز لاگین کردین نباید ادمین باشه تا بعداً وقتی دارین با Sencha Cmd کار میکنید به error بر نخورین . من خودم این مشکل رو در فروم سایت Sencha مطرح کردم و خودم هم راه حلش رو پیدا کردم و بهش جواب دادم.

بنظر من ایده تولید UI وب با استفاده از ابزارهای کامند (Command Tools) , خیلی جالبه . حتماً سعی کنید تستش کنید. ارزشش رو داره . جالبه بگم شرکت Sencha یک ابزار دیگه هم داره که اسمش هست Sencha Touch که مخصوص تولید UI وب در موبایل می باشد.

پیاده سازی MVC در سمت کلاینت با استفاده از ExtJS 4

همه میدونیم MVC چیه .

فریم ورک Struts از MVC استفاده میکنه.

فریم ورک Spring هم از MVC استفاده میکنه.

ASP.net هم از نسخه 4 به بعدش از MVC حمایت میکنه.

تکنولوژی ها بالا در سمت سرور هستن ولی امروز یک مثال تویه مستندات ExtJS 4.2 دیدم که خیلی جالب بود و می اومد MVC رو در سمت کلاینت پیاده سازی میکرد و ما رو از نوشتن کدهای اضافی راحت میکرد .

پس از دانلود کردن ExtJS 4.2 SDK  آن را در سرور آپاچی (xampp) نصب کنید. در فولدر examples/app/simple نمونه این کار را مشاهده می کنید.

ExtJS 4 چیست ؟

ExtJS 4 یک لایبراری جاوا اسکریپت پولیه.کلی ویجت و پلاگین برای طراحی UI وب داره.

همانطور که در لینک زیر مشاهده میکنید از RTL بطور کامل پشتیبانی میکنه. البته این ویژگی از نسخه 4.2 بهش اظافه شده .

http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/rtl/rtl.html?theme=classic

یکی از برنامه های خوبی که با این لایبراری ساخته شده Aero SQL می باشد که شبیهphpMyAdmin خودمونه که واسه مدیریت بانک MySQL ازش استفاده میشه.

چیزی که واقعا من رو مجذوب خودش کرد مستندات و فروم قوی این لایبراری میباشد که پس از دانلود کردن SDK در دسترس می باشد. یک پاراگراف در ابتدای مستندات هست که من دقیقاً همون رو اینجا کپی میکنم و بیان میکنه که فشارهایی که در ابتدای پروژه ایجاد میشه باعث میشه که ما بطور مهندسی و حساب شده عمل نکنیم و کدهایی از این ور و اون ور اینترنت جمع می کنیم و به پروژه مون اضافه میکنیم باعث میشه که در روزهای اول پروژه خوب جلو میریم ولی بعدا هزینه نگهداری سیستم افزایش پیدا میکنه.

The scalability, maintainability and flexibility of an application is mostly determined by the quality of the application’s architecture. Unfortunately, it’s often treated as an afterthought. Proofs of concept and prototypes turn into massive applications, and example code is copied and pasted into the foundations of many applications. You may be tempted to do this because of the quick progress that you see at the start of a project.

However, the time saved will be relatively low compared to the time spent on having to maintain, scale and often refactor your application later in the project. One way to better prepare for writing a solid architecture is to follow certain conventions and define application views, models, stores and controllers before actually implementing them. In this article, we’ll take a look at a popular application and discuss how we might architect the user interface to create a solid foundation.