Posts Tagged ‘ajax’
GWT (Google Web Toolkit)
اردیبهشت ۴م, ۱۳۸۸
برگرفته از knol.google.com
چکیده فارسی
ماموریت GWT بهبود ریشه ای کیفیت appهای تحت وب, با قادر ساختن توسعه گرها به استفاده از ابزارهای فعلی جاوا در تولید appهای Ajax با کیفیت بالا برای تمام مرورگرهای مدرن است.GWT گام بزرگی جهت کم کردن فاصله appهای وب با appهای ویندوز است. GWT انتخاب مناسبی برای تولید Enterprise application ی تحت اینترانت و اینترنت است.
کلمات کلیدی GWT – Google Web Toolkit – Ajax Java Framework – Google Ajax Compiler
متن کامل
مقدمه
از اوایل سال ۲۰۰۵, که Ajax توسط یک معمار اطلاعات معرفی شد تا بحال تکنولوژی ها و ابزارهای زیادی مبتنی بر آن ارائه شده است و جالب است که پس از گذشت ۲۰سال, برنامه نویس های Ajax با مشکلاتی دست و پنجه نرم می کنند که برنامه نویسهای آن زمان در برنامه های TSR تحت DOS با آن روبرو بودند. البته خیلی از این مشکلات توسط framework ها مختلفی که برای Ajax ارائه شده است , برطرف شده است. مثلا در ATLAS که مایکروسافت ارئه کرده است, برنامه نویسی Ajax بسیار ساده شده است ولی جالب است که خود مایکروسافت تمایل زیادی به استفاده از آن ندارد! مایکروسافت در واقع به همان اندازه که کار را ساده کرده است, از کیفیت و کارایی آن نیز کاسته است به نحوی که برنامه نویسها در حین کار با Atlas بزودی متوجه می شوند که اساسا خیلی از کارها را با Atlas نمی توانند انجام بدهند و در مواردی که انجام می شود سرعت و قابلیت اطمینان آن رضایتبخش نیست. از بین تمام پیاده سازیهایی که از Ajax شده شاید بتوان Gmail و Google Map را جز بهترین به حساب آورد, به نحوی که شرکت های معظمی مانند یاهو و مایکروسافت هنوز نتوانسته اند محصولات قابل رقابتی با آنها ارائه کنند.
در اقدامی غیر منتظره در ماه می ۲۰۰۶, گوگل اقدام به ارائه frameworkی برای تولید appهای Ajax, مبتنی بر تجربه موفق gamil و google map نمود.همان گونه که از گوگل انتظار می رود, GWT کاری بزرگ , باکیفیت و سرشار از ایده های نو است, که انتظار می رود تحول بزرگی را در تولید نرم افزار ایجاد کند و در بسیاری از موارد, انتخاب بهتری از appهای معمولی ویندوز(rich client) و یا وب باشد.
GWT
Google web toolkit یک framework سورس باز جاوا است که به شما امکان می دهد که از تکنولوژهایی که تولید appهای Ajax را دشوار و مستعد باگ می کنند, رهایی یابید. با GWT می توانید appهای java را با ابزارهای دلخواه java توسعه و دیباگ کنید. زمانی که کار شما آماده ارائه به تولید شد, کامپایلر GWT آن را به javascript و html ی که با انواع مرورگرها سازگاری دارد, ترجمه می کند.
تفاوت GWT با frameworkهای دیگر این است که شما کد سمت مرورگر را بجای javascript با java می نویسید. و این به این معنی است که شما از منابع و ابزارهای بسیار زیادی که هم اکنون در java موجود است, در طرف مرورگر(client side) استفاده کنید. همچنین شما می توانید از مزایای OOP مانند encapsulation و ارث بری در طرف مرور گر بهره مند شوید و همچنین می توانید کد طرف مرورگر را به صورت واقعی دیباگ کنید. هسته GWT یک کامپایلر java به javascript است که کد جاوا اسکریپت سازگار با مرورگرهای Internet Explorer, Firefox, Mozilla, Safari و Opera را تولید می کند. به همراه GWT یک کتابخانه از کنترلهای متدوال مانند منو, پنل, کلید, درخت و …. عرضه شده است.
ساختار GWT
GWT ابزارهای جامعی را درخور چالشهایی که برای تولید rich internet application وجود دارد, گرد هم آورده است.
Java to js compiler
در طرف مرورگر کدهای جاوا را به جاوا اسکریپت تبدیل می کند.
JSNI
کار فراخوانی مستقیم کد جاوا اسکریپت از جاوا را انجام می دهد.
JRE Emulation
یک زیر مجموعه از Java runtime library که برای برنامه نویسی سمت Client استفاده می شود.
Widgets and Panels
مجموعه ای از کنترلها که در GWT برای ساختن UI از آن استفاده می شود.
I18N
چند تکنیک برای بین المللی کردن app و تنظمیات مرتبط با آن ارائه می کند.
RPC
پیاده سازی گوگل از remote procedure call برای ارتباط برقرار کردن کدهای client با کدهای سمت سرور.
XML Parser
با توجه با اهمیت و گسترش روز افزون XML, GWT کلاسهایی را برای کار با آن فراهم آورده است.
Managing the browser history
یکی از اشکالات موجهی که به rich internet application ها گرفته می شود این است که آنها کلید برگشت مرورگر(back button) را نقض می کنند. این از آنجا ناشی می شود که وقتی شما با جاوااسکریپت محتوای صفحه را به صورت داینامیک عوض می کنید, کاربر انتظار دارد که با زدن کلید برگشت به حالت قبل بازگردد, ولی این اتفاق می افتد چونکه مرورگر متوجه تغییرات داینامیک شما نمی شود. GWT این مشکل را برطرف نموده است.
JUnit Integration
همیشه نوشتن کدهایی برای تست برنامه به صورت اتوماتیک, تکنیک خوبی محسوب می شود. در حال حاضر frameworkهای متعددی سالهاست که این پروسه را ساده تر کرده اند, JUnit یکی از بهترین آنها برای توسعه گرهای جاوا است. GWT بجای نوشتن این framework از ابتدا, از JUint پشتیبانی می کند.
مزایا
زمان توسعه
GWT با فراهم آوردن امکان استفاده از جاوا در سمت کلاینت و سرور, امکان دیباگ واقعی هر دو طرف, استفاده از OOP در سمت UI , بعهده گرفته سازگار بودن کد تولید شده با انواع مرورگرها, فراهم آوردن امکان استفاده از ابزارها و frameworkهای موجود جاوا, صرفه جویی بسیار زیادی را در زمان توسعه و پشتیبانی appهای Ajax به همراه دارد.
سرعت و کیفیت اجرا
appهای GWT همیشه به اندازه appهایی javascript که با دست نوشته می شوند, سریع اجرا می شوند. تیم GWT وسواس بسیار زیادی در این زمینه به خرج داده است مثلا تمام تصاویر صفحه را در سمت سرور به یک تصویر تبدیل می کند و در سمت کلاینت فقط بایک request آن را دریافت, و به تصاویر اصلی می شکند.GWT همچنین در انتخاب اسم متغیرها و حتی فضای خالی بین کدها بهینه عمل کرده است. در نسخه اخیر GWT(1.4), برای دریافت جاوا اسکریپت و CSS ها از طرف از سرور, از متد PKZip استفاده شده است.
اندازه جاوا اسکریپت تولید شده
اندازه جاوااسکریپت تولید شده برای یک برنامه کاربردی معمولیGWT با تمام امکانات حدود ۱۰۰ کیلوبایت خواهد بود, که قابل cache شدن بوسیله مرورگر نیز می باشد, بعد از آن فقط تکه های کوچک اطلاعات هستند که رد و بدل می شوند.
پهنای باند مورد استفاده
GWT مانند appهای معمولی وب postback ندارد و فقط اطلاعات مورد نیاز هستند که رد و بدل می شوند, در مقایسه با appهای معمولی وب که حتی با تیک زدن یک checkbox کل صفحه postback می شود و دوباره load می گردد, پهنای باند و ترافیک شبکه به طور قابل توجه ای صرفه جویی می شود.
امنیت
GWT اطلاعات کمتری را در سمت کلاینت باقی می گذارد که به صورت javascript فشرده شده است و قابلیت خوانایی ندارد, در نتیجه امنیت بهتری حاصل می شود
حل مشکلات پرداخت online
GWT برای مشکلاتی که به هنگام پرداخت آنلاین پیش می آید, راه حلهای قطعی ارائه می دهد(حداقل در تئوری).
عدم وابستگی به platform
GWT مبتنی بر جاوا است و کد تولید شده توسط آن جاوااسکریپت و HTML معمولی است که باعث می شود به plateform وابسته نباشد.
سورس باز
GWT سورس باز(Open source) است که کمک زیادی به توسعه اجزاء و درک مکانیزمهای آن می کند. همچنین تجربه نشان داده است که پروژهای سورس باز به دلیل داشتن توسعه گرها یی که در تمام جهان پراکنده هستند, بهتر پیشرفت می کنند و پشتیبانی بهتری دارند.
معایب
SEO
شرکتهایی که از GWT برای پیاده سازی وب سایت ها استفاده می کنند ممکن است با این مشکل روبرو شوند که موتورهای جستجو محتوای صفحات آنها را اندیکس نمی کند. این مشکل در واقع مربوط به تمام وب سایتهای داینامیک می گردد و از آنجا ناشی می شود که وقتی محتوای صفحات بوسیله javascript تغییر می کند, آدرس آن ثابت می ماند بنابراین موتورهای جستجو شاخصی برای دسترسی به صفحه جدید را ندارند.برای این مشکل راه حل های متعددی ارائه شده است مثلا یک وب سایت موازی استاتیک با وب سایت داینامیک وجود داشته باشد, که تاحدی مشکل را برطرف نموده اند.
نتیجه گیری
GWT قدرت appهای ویندوز را به appهای وب می دهد و به شما امکان می دهد که نرم افزارهای تحت اینترانت و اینترنت غنی تر را در زمان کمتری تولید کنید. هزینه نگهداری آنها نبز به مراتب پایین تر خواهد بود. GWT نیز مانند جاوا دارای منابع فراوان به صورت وب سایت, کتاب, مقاله, ویدئو, کد آماده و ابزارهای ۳rd party مانند GWT Designer است. GWT محصول زیربنایی شرکت گوگل است در مدت کوتاهی که عرضه شده رشد قابل توجهی داشته است و انتظار می رود که platform عمده برای تولید appهای داینامیک باشد.(برای مشاهده آهنگ رشد GWT و همچنین مقایسه بین فراگیر بودن java نسبت به c#, به www.google.com/trends مراجعه کنید و عبارت gwt یا java,c# را تایپ کنید)
Tags: ajax, googlw web toolkit, gwt, javascript
Posted in Java, gwt, javascript | Comments (۰)
Firebug
دی ۶م, ۱۳۸۷
بعید میدونم که شما طراح و برنامه نویس وب باشین اما با Firebug آشنا نباشید. در واقع FireBug علاوه بر مزیت هایی که در کار با کدهای HTML و CSS داره دارای خط فرمان جاوا اسکریپت نیز هست. وجود خط فرمان javascript در firebug به شما این امکان رو میده که کدهای خودتون رو به صفحه جاری الصاق کنید. انگار که اونها از اول توی صفحه جاری نوشته شده بودند!!
شاید در نگاه اول این چیز خیلی جالبی نباشه اما وقتی یکم دقیق بشین متوجه میشین که چی میگم. بذارین یک مثال بزنم. اگه شما Ajax کار کرده باشید باید بدونید که آژاکس Cross-Domain نیست. یعنی اینکه شما نمیتونید درخواست (request) هایی رو از دامین های دیگه داشته باشین. (البته حالت های خاصی داره ازجمله JSON و CSSHTTPREQUEST) اما مهم اینه که در حالت معمولی چنین امکانی وجود ندارد. خب حالا به شما از طریق FireBug این امکان داده شده که وارد یک سایت بشید و کدهای جاوا اسکریپت خودتون و خصوصا” آژاکستون رو اجرا کنید. شاید بهتر باشه یک مثال بزنم. چند وقت پیش یکی از دوستام یک آدرسی به من داد که اجازه میداد sms رایگان بفرستین. بدون هیچ محدودیتی. البته من نیدونم اون صفحه شخصی بود یا هرچیز دیگه ای! مهم فارسی بودنش بود که خیلی تعجب برانگیزناک آلود بود!
خب بر طبق طبع من چندتا اس ام اس تست ارسال کردم و بعد از ایکه صحتش برام معلوم شد، جرقه ای در سرم زده شد! اومدم کد ساده ای مثل زیر نوشتم :
var xmlhttp= new XMLHttpRequest();
var msg = 'My message will be here!';
var sms = function(){
xmlhttp.open("POST", 'send.php');
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
sms();
}
};
i = Math.round( Math.random()*10000 );
xmlhttp.send('phone=98913333'+i+'&message='+escape(msg));
}
و این کد رو اجرا توی فایرباگ مرورگرم اجرا کردم!! جالبه بدونین که تقریبا” ثانیه ای ۲تا sms ارسال میشد و این بود که من در هزینه تبلیغاتم کمی صرفهجویی کردم! بگذریم که این فقط یک روز جواب داد و اون سایت چندروزی میشه که از کار افتاده!!!
مثال دیگه این هم بزنم اینکه یک دایرکتوری بود که من یکی از سایت هام رو بهش اضافه کرده بودم. این دایرکتوری یک rank فرضی بر اساس ورودی هایی که از سایت من به اون دایرکتوری باضافه خروجی های اون دایرکتوری به سایت من ایجاد میکرد و جلو اسم هر سایت نمایش میداد. خب سایت من rank بالایی نداشت. تقریبا” جز ۴۰-۵۰ تا سایت اولش بود که خوب با اجرای کدی شبیه کد بالا هم به سایت خودم ورودی دادم هم خروجی!! و این بود که سایتم از حدود ۵۰ام در یک روز به ۳ام ارتقاء یافت!!!
در واقع از سایت هایی که باگ دارند میتونین به خوبی استفاده کنید. فقط باید یکم حواستون جمع باشه!!! :D
راستی اگر نمیدونید که Firebug چیه، فقط این رو بگم که میتونید با استفاده از گزینه Add-ons در منوی Tools در مرورگر فایرفاکس (Firefox) آنرا به مرورگر خود اضافه کنید.
موفق تر باشید.
Tags: ajax, firebug, firefox, javascript, آژاکس, جاوا اسکریپت, فایرباگ, فایرفاکس
Posted in Mozilla FireFox, javascript | Comments (۰)
jQuery History Plugin
آذر ۲۹م, ۱۳۸۷
چند وقت پیش روی پروژه ای کار میکردم که نیاز به یک پلاگین jQuery برای bookmark شدن لینک هایی که بصورت آژاکس (Ajax) باز میشدند داشتم. درواقع میخواستم که History مرورگر رو شبیه سازی کنه. چندتا پلاگین پیدا کردم که خوب هرکدوم یک کار متفاوت انجام میدادند. مثلا” یکی از اونها همون اول با بارگزاری صفحه شروع میکرد تمام لینک ها رو از اول تا آخر پیمایش میکرد و برای هرکدوم href (مسیر) اونها رو ذخیره میکرد و بجای اونها چیزی شبیه “#text-12″ می گذاشت که عدد آخرش شماره لینک پیمایش شده بود (مثلا” اگر شما ۱۲تا لینک توی صفحه جاری داشتین، این میشد href آخریش).
اما خب این کد مشکلش این بود که اگه شما لینک رو Open Link in New Tab میکردین اونوقت دوازهمین لینک اون صفحه رو باز میکرد نه چیزی که شما میخواستین!!!
و نهایتا” اینها یک سری عیب هایی مثل این داشتن که باعث شدند من خودم بر حسب نیازم کدهایی بنویسم که دقیقا” کاری رو که نیاز داشتم انجام بده. چیزی که من نیاز داشتم این بود که اگه کاربر روی یک لینک کلیک کرد (بطور عادی)، اون لینک بصورت آژاکس باز بشه و در ضمن یک پارمتر اضافی هم ارسال بشه به صفحه بعدی. (مثلا” در اینجا ajax_check هست)
در ضمن، ممکن بود کاربر اون لینک رو توی صفحه دیگه باز کنه. در این حالت هم نباید مشکلی پیش میومد. نکته مهم دیگه هم Back و Forward و حتی Refresh مرورگر بود که باید دقیقا” درست عمل میکرد. راستی نباید این حات رو هم فراموش میکردیم که امکان داره جاوا اسکریپت (javascript) کاربر هم غیر فعال باشه! خلاصه بگم چیزی باشه که کاربر اصلا” خطا نبینه و بهترین امکانات رو هم براش فراهم کنه.
کدی که نوشتم سه قسمت داره (دوتا تابع (function) و یک تکه کد). تابع اول به نام history هست که وظیفه تبدیل مسیر لینک کلیک شده به نوعی هش مخصوص هست که این باعث میشه Back و Forward درست عمل کنند. این تابع هش ساخته شده را در url قرار میده. تابع بعدی هم getHash هست که وظیفه تبدیل هش مخصوص موجود در url رو به آدرس کامل و درخواست این آدرس از سرور و بارگذاری اون رو داره. تکه کد هم وظیفه این رو داره که هر لحظه url و Hash رو در اون تست کنه که اگه تغییر کرده باشه، تابع getHash رو فراخوانی کنه و ادامه داستان…!!
فکر کنم کدهایی که نوشتم واضح باشند. اگه کسی سوالی داشت بپرسه یا بگین تا خط به خط توضیحش بدم.
۲ تا نکته مهم:
۱ . این کدها برای صفحاتی نوشته شدند که پسوند PHP دارند. اما میتونین با یه تغییر ساده در متغیر fileExt اون رو به هرچیزی که میخواین تغییر بدین.
۲ . اگه صفحه شما دارای لینکی باشه که href اون “” باشه، بطور پیشفرض index.fileExt رو باز میکنه که شما میتونین با یک تغییر کوچک اون رو حذف کنید.
منتظر اشکالاتی که توی کد پیدا میکنین هستم!! ;)
var fileExt = 'php';
var history = function(path){
//Question Mark Position
var qmp = (path.indexOf('?') > 0 ) ? path.indexOf('?') + 1 : path.length + 1;
//End of Path Position (Last Position)
var lp = path.length;
var fileNameP1 = path.indexOf('.'+fileExt) + 1;
var fileNameP2 = (qmp > 1) ? qmp-1 : path.length;
var params = path.substring(qmp,lp);
var newPath = '';
var fileName = path.substring( path.substring(0,fileNameP2).lastIndexOf('/')+1 , fileNameP2 ).replace('.'+fileExt,'');
if (params.length > 0 ){
var a = explodeArray(params,"&");
for (var i=0, j=a.length; i<j; i++)
newPath += a[i] + '/';
newPath = '#' + fileName + ':' + newPath;
} else {
newPath = '#' + fileName;
}
if ($.browser.msie) {
var iframe = _historyIframe.contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = newPath;
}
location.hash = newPath;
_loadedHash = newPath;
};
var getHash = function(myHash){
h = myHash;
if ( h.length < 1) h = 'index';
if ( h.indexOf(':') > 0 ){
h = h.replace(/^#/,'').replace(':','.'+fileExt+'?');
while( h.indexOf('/') > 0 )
h = h.replace('/','&');
} else {
h = h.replace(/^#/,''); h += '.'+fileExt;
}
$.get(h,{'ajax_check':'true'},function(data){
$body.html('<center>' + data + '</center>');
});
if($.browser.msie)
_loadedHash = _historyIframe.contentWindow.document.location.hash;
else
_loadedHash = myHash;
};
if ($.browser.msie) {
var _historyIframe = $('<iframe style="display: none"></iframe>').appendTo("BODY").get(0);
var iframe = _historyIframe.contentWindow.document;
iframe.open();
iframe.close();
setInterval(function(){
checkScrollbarPosition();
var h = _historyIframe.contentWindow.document.location.hash;
if ( (_loadedHash != null) && ( _loadedHash != h) ) getHash(h);
}, 500);
} else if ($.browser.mozilla) {
setInterval(function(){
checkScrollbarPosition();
if ( (_loadedHash != null) && ( _loadedHash != location.hash) ) getHash(location.hash);
}, 500);
}
try{
if(location.hash.length > 0 && !$.browser.msie)
getHash(location.hash);
}catch(e){}
//Example for use:
$(document).ready(function(){
var $body = $("#content");
$("a").livequery('click',function(){
var h = $(this).attr("href");
$.get(h, {'ajax_check':'true'} , function(response){
$body.html(response);
});
history(h);
return false;
});
});
Tags: ajax, back, bookmark, code, forward, history, jQuery, plugin, refresh
Posted in jQuery, javascript | Comments (۱)