توسعه وب اپلیکیشن به روش بهبود پیشرونده (Progressive Enhancement) — به زبان ساده

«بهبود پیشرونده» (Progressive Enhancement) یا به اختصار PE یک روش قدرتمند برای توسعه وب اپلیکیشن‌ها محسوب می‌شود. توسعه وب اپلیکیشن یکی از زمینه‌های کلیدی برنامه نویسی وب به حساب می‌آید.

تعریف رسمی آن بر اساس اطلاعات ویکی‌پدیا چنین است:

بهبود پیش‌رونده یک راهبرد برای طراحی وب است که تأکید دارد ابتدا عناصر اصلی صفحه وب بارگذاری شوند. در این راهبرد متعاقباً لایه‌های فرعی‌تر و از نظر فنی کم‌اهمیت‌تر مربوط به ارائه و نمایش محتوای صفحه تا حدی که اتصال مرورگر/اینترنت کاربر اجازه می‌دهد، ‌اضافه می‌شوند.

مزیت‌های این راهبرد این است که همه افراد می‌توانند به محتوا و کارکردهای مقدماتی یک صفحه وب دسترسی داشته باشند و از هر نوع مرورگر یا اتصال اینترنتی استفاده کنند. همچنین نسخه بهبودیافته‌ای از صفحه برای افرادی که از نرم‌افزارهای مرورگر پیشرفته‌تر یا پهنای باند بالاتر استفاده می‌کنند عرضه می‌شود.

به طور خلاصه،‌ راهبرد بهبود پیش‌رونده موجب می‌شود که تجربه کاربری مقدماتی و پشتیبانی متقابل از چند مرورگر ارائه شود و بدین ترتیب پایداری بیشتری به دست آید.

راهبرد PE شامل مفاهیم اصلی زیر است:

• محتوای اصلی باید روی همه مرورگرهای وب در دسترس باشد.
• کارکردهای اولیه باید روی همه مرورگرهای وب در دسترس باشد.
• با بهره‌گیری اندک و از نوع معناشناختی از زبان نشانه‌گذاری،‌ همه محتوا پوشش می‌یابد.
• لایه بهبود یافته به صورت CSS های لینک شده خارجی عرضه می‌شود.
• رفتار بهبود یافته صفحه وب توسط فایل‌های جاوا اسکریپت ساده و لینک شده خارجی عرضه می‌شود.
• به ترجیح‌های کاربر نهایی در مورد مرورگر وب احترام گذارده می‌شود.

بنابراین در مواردی که بخواهیم یک وب‌سایت را با استفاده از فریمورک‌های پیشرفته JavaScript / CSS بسازیم که تنها در شرایط خاصی کار می‌کنند و در غیر این صورت از کار می‌افتند، ‌باید بدانیم که این روش از راهبرد بهبود پیش‌رونده متمایز است.

در راهبرد بهبود پیش‌رونده هدف اصلی این است که توسعه کد باید با ارائه ویژگی‌های اصلی و پایداری روی همه مرورگرها و دستگاه‌ها آغاز شود و پیش از ارائه موارد پیچیده‌تر،‌ تجربه کاربری روانی ایجاد شود.

مثال‌هایی از روش توسعه بهبود پیشرونده (Progressive Enhancement)

در ادامه برخی از مثال‌ها را ارائه می‌کنیم که طرز کار راهبرد PE را نشان می‌دهند.

فونت‌های وب

فونت‌های وب جذاب و زیبا هستند؛ اما هنگامی که کاربر از یک شبکه کُند برای بارگذاری وب‌سایت سنگینی استفاده می‌کند، ‌بدیهی است که این فونت‌ها موجب بر هم خوردن تجربه کاربر می‌شوند. حتی در این موقعیت‌ها نیز فونت سیستم باید به عنوان گزینه اولیه برای نمایش محتوا استفاده شود و می‌توان متعاقباً زمانی که فونت وب بارگذاری شد از آن برای نمایش دادن مطالب استفاده کرد. نمایش محتوا بهتر از انتظار برای بارگذاری فونت وب یعنی مشاهده یک صفحه خالی است.

HTML اولیه

سایت‌ها به وسیله اسکریپت بارگذاری می‌شوند. این اسکریپت‌ها ممکن است در فریمورک‌های انگولار، ری‌اکت یا موارد دیگر نوشته شده باشند. زمانی که این اسکریپت‌ها مسئول نمایش محتوای اولیه هستند، اگر چیزی در مورد اسکریپت‌ها از کار بیفتد یا کاربر از شبکه‌ای کُند استفاده نماید، با صفحه‌ای خالی را روی مرورگر یا دستگاه خود مواجه می‌شود.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

همواره بهتر است سعی کنید بارگذاری اولیه محتوا از HTML صورت بگیرد تا تجربه کاربری بهتری داشته باشید؛ تا این که به طور کامل به اسکریپت‌هایی متکی باشید که هنوز بارگذاری نشده‌اند.

بررسی ویژگی‌های جدید

سایت‌های خوب همواره هنگام استفاده از یک ویژگی‌های جدید که در برخی مرورگرها یا دستگاه‌ها پشتیبانی نمی‌شوند، پیش از استفاده از آن در جاوا اسکریپت ‌اطمینان حاصل می‌کنند که آن ویژگی روی مرورگر در دسترس است. Modernizr یک کتابخانه محبوب برای تشخیص ویژگی است که به این مسئله کمک می‌کند.

شما می‌توانید اسکریپت‌های اضافی برای پشتیبانی از حالت‌هایی که یک ویژگی در مرورگر یا دستگاهی پشتیبانی نمی‌شود استفاده کنید. بدین ترتیب از بارگذاری اسکریپت‌های اضافی در مواردی که استفاده‌ای ندارند جلوگیری می‌شود.

چرا باید از PE استفاده کنیم؟

در ادامه برخی از دلایل این که چرا باید از راهبرد PE استفاده کنید را ارائه کرده‌ایم.

پایه قوی

PE روی آغاز پروژه با استفاده از فناوری‌های بسیار ابتدایی وب تا پیش از ارائه ویژگی‌های پیچیده‌تر تأکید دارد. بنابراین در همه موارد، یک پایه قوی برای پشتیبانی از ویژگی‌های پیچیده داریم که به ما کمک می‌کند.

زمانی که تیم توسعه مطمئن شدند که تجربه ابتدایی سایت پایدار است و بدون وابستگی به سرعت شبکه،‌ نوع مرورگر و یا دستگاه به صورت پایداری بارگذاری می‌شود، متعاقباً می‌توانند شروع به وارد کردن لایه‌های ویژگی‌های پیچیده‌تر بکنند.

پایداری

به مکالمه فرضی زیر بین اعضای تیم کنترل کیفیت و تیم توسعه وب‌سایت توجه کنید:

• تیم کنترل کیفیت: آیکون جستجو در مرورگر سافاری برای صفحه Offers کار نمی‌کند.
  • تیم توسعه: این آیکون در سیستم ما کار می‌کند، ‌بنابراین باید کش را پاک کرده و صفحه را مجدداً بارگذاری کنید.
• تیم کیفیت: پس از انجام کارهای فوق،‌‌ آیکون همچنان کار نمی‌کند،‌ شاید شما روی کروم بررسی کرده‌اید، چون صرفاً روی سافاری کار نمی‌کند.
  • تیم توسعه: ما از چه زمانی پشتیبانی از مرورگر سافاری را آغاز کرده‌ایم؟ ... در این صورت به وصله نیازمند هستیم.

if(getBrowsers() == 'safari') {
Patch.magicHelpers.searchIconMagic()
}

Patch.magicHelpers = {
searchIconMagic: function() {
// Can't share magic, doing something
}
};

پس از گذشت یک ساعت تیم توسعه می‌خواهد که تیم کیفیت نتیجه را بررسی کند.

• تیم توسعه: این آیکون روی کروم و سافاری به خوبی کار می‌کند؛‌ ‌اما اکنون روی فایرفاکس از کار افتاده است.

اگر تجربه توسعه وب‌سایت داشته باشید، احتمالاً بارها با چنین مواردی روبرو شده‌اید. هزینه ‌ایجاد پایداری و نگهداری یک پروژه به شیوه راه‌اندازی اولیه آن نیز وابسته است. راه‌اندازی یک پروژه با فریمورک و وصله دادن متوالی در بلندمدت پاسخ‌گو نیست.

راهبرد PE، به ساخت یک پایه قوی برای پروژه کمک می‌کند و همزمان کدهای HTML ،CSS و JS همسو خواهند شد. بدین ترتیب این اطمینان حاصل می‌شود که شما به میزان زیادی به ویژگی‌های خاص یک مرورگر وابسته نیستید.

سئو و دسترسی‌پذیری

همه افراد می‌خواهند اپلیکیشنشان در صفحه نخست موتور جستجو ظاهر شود؛ ‌اما این وضعیت به کار مداوم و برنامه‌ریزی برای ساخت اپلیکیشن‌های جذاب نیاز دارد. ساخت یک پایه قوی برای پروژه باعث می‌شود که اپلیکیشن شما روی رویکرد «اول-محتوا» (یعنی ارائه محتوا در وهله اول) تمرکز کند.

صفحه‌هایی که با راهبرد PE ساخته می‌شوند، این اطمینان را ایجاد می‌کنند که محتوای پایه همواره در دسترس موتور جستجو است و عنکبوت موتورهای جستجو می‌تواند این صفحه‌ها را به راحتی ایندکس کند. به این ترتیب باید از ارائه هر گونه محتوای دینامیک که موجب کند شدن خزش عنکبوت موتور جستجو روی محتوای وب‌سایت می‌شود اجتناب کرد.

وب اپلیکیشن‌های پیش‌رونده (PWA) طوری طراحی می‌شوند که همه کاربران صرف نظر از نوع مرورگر، بتوانند استفاده کنند، چون این صفحه‌ها با استفاده از راهبرد بهبود پیش‌رونده به عنوان مفهوم اساسی خود ساخته می‌شوند.

سخن پایانی

راهبرد PE روی ارائه یک پایه قوی برای پروژه‌ها متمرکز است. این پایه قوی کمک می‌کند که بتوانید ایده‌ای از طرح بلندمدت توسعه اپلیکیشن خود به دست آورید.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

استفاده از یک فریمورک جدید جاوا اسکریپت / CSS برای یک پروژه تازه و آغاز کدنویسی آن کار ساده‌ای است؛‌ اما این وضعیت منجر به تنزل تدریجی می‌شود. در ادامه مجبور خواهید بود شروع به ارائه وصله‌هایی برای کد خود بکنید تا اپلیکیشنتان روی مرورگرها یا دستگاه‌هایی که از آن فریمورک‌ها پشتیبانی نمی‌کنند،‌ نیز بارگذاری شوند.

با این که راهبرد PE به برنامه‌ریزی بیشتری در مراحل اولیه نیاز دارد؛ اما این اطمینان را می‌دهد که کاربر می‌تواند در بدترین حالت نیز دست کم کارکرد اولیه اپلیکیشن شما را داشته باشد. PE در موقعیت‌هایی که به میزان زیادی از جاوا اسکریپت برای رسیدن به برخی ارائه‌ها یا رفتارهای رابط کاربری نیاز دارند، عملی نیست؛‌ اما در یک پروژه بلندمدت می‌ارزد که دست کم برخی جنبه‌های راهبرد PE رعایت شوند.

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• گنجینه آموزش های طراحی وب
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش پیاده سازی یک پروژه وب کامل و ساده
• چگونه برنامه‌نویسی وب را شروع کنم؟
• آموزش تکمیلی طراحی وب با CSS3) CSS)
• درس مهندسی اینترنت — مفاهیم پایه به زبان ساده | منابع، کتاب و فیلم آموزشی

==