undefined
021 33328750 © THE ART OF PROGRAMMING -
بخش نهم : برنامه های تک صفحه ای

اصطلاح "برنامه تک صفحه ای" یا (SPA) معمولاً جهت توصیف برنامه هایی که برای وب ساخته شده اند اتلاق می شود. این برنامه ها همانند وبسایت ها از طریق یک مرورگر وب قابل دسترسی هستند، اما تعاملات پویا تری را شبیه به برنامه های بومی موبایل و دسکتاپ ارائه می دهند.

 تفاوت قابل ملاحظه بین یک وب سایت مرتب و SPA مقدار کم تر به روز رسانی های صفحه  است. SPA ها استفاده بیشتری از AJAX (راهی برای برقراری ارتباط با برنامه های سمت سرور بدون انجام به روز رسانی کامل و مداوم صفحه) جهت دریافت و تهیه داده های مورد نیاز ما می کنند. در نتیجه، روند تفسیر صفحات عمدتاً در سمت کاربر اتفاق می افتد.

مضرات SPA

در حالی که ساختن SPA ها مرسوم است و به عنوان یک ابزار توسعه مد نظر قرار می گیرد، مهم است که از مضرات آن آگاهی داشته باشید، از جمله:

  •    مرورگر بیشترین بارگیری سنگین را دارد که به این معنی است که می تواند در عملکرد آن مشکل ایجاد کند، به ویژه در موبایلهای با ظرفیت کمتر.
  •    تفکر دقیق باید در جهت بهینه سازی موتورهای جستجو (SEO) باشد تا محتوای شما بتوانند توسط موتورهای جستجو و وب سایت های شبکه های اجتماعی که می توانند پیش نمایش لینکتان را فراهم آورند، قابل شناسایی باشند.

رفع مشکلات از طریق تفسیرهای سمت سرور

 اکثر فریم ورکهای مدرن جاوا اسکریپت در حال کار بر روی راهکارهایی هستند که بتوانند از تفسیر و تحلیل سرورها از  SPA، پشتیبانی کنند - به این معنی که وقتی برای اولین بار SPA بارگذاری می شود، به عنوان مثال، به جای دیدن یک نشانگر بارگیری، کاربر یک صفحه کاملاً پر ازدحام را دریافت میکند.

 تفسیر سمت سرور می تواند برخی از بار مرورگرها را هنگام تفسیر صفحه ها کاهش دهد و در مشکل بهینه سازی موتور جستجو و قابلیت کشف محتوا نیز کمک کند.

فریم ورکهای محبوب جاوااسکریپت برای ایجاد SPAها

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

بسیاری از فریم ورک های متن باز جاوا اسکریپت که می توانند برای ساختن SPA استفاده شوند، وجود دارند:

        Angular-

    React-

    Ember-

    Aurelia-

    Vue.js-

    Cycle.js-

- Backbone

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

Angular

 Angular یک فریم ورک سمت کاربر است که از آنجایی که همه چیز را قابل تست و سازماندهی می کند، باعث کاهش بار نوشتن برنامه های پیچیده می شود. اولین نسخه از Angular در سال 2009 ایجاد شد که بسیار از آن زمان، جلوتر بود. هنگامی که Angular در ابتدا نوشته شد، بسیاری از مشکلاتی که در حال حاضر در سطح زبان جاوا اسکریپت با انتشار ES2015 حل شده است را در آن زمان رفع کرد. به عنوان مثال، در حالی که Angular 1 مجبور بود راه حل خود را برای ماژول ها ایجاد کند، ES2015  اکنون یک راه حل برای ماژول های جاوااسکریپت را در سطح کل زبان فراهم می کند.

 با وجود چنین چالشی در ذهن، تیم Angular در گوگل این فریم ورک را از ابتدا بازنویسی کرد. نسخه جدید و پیشرفته Angular به نام (Angular 2) بسیار امیدوار کننده است. رویکرد کلی Angular تغییر نکرده است و یک راه حل جامع برای نوشتن برنامه ها است. در فریم ورک ساخته شده راهکارهایی برای مسیریابی برنامه، برقراری ارتباط با سرورهای وب و موارد دیگر وجود دارد. برای تکمیل یک برنامه پایه ولی کاملاً کاربردی وب، به هیچ بسته اضافی نیاز ندارید.

Angular  همچنین یک اکوسیستم کامل (CLI) برای ساخت برنامه های کاربردی فراهم می کند که شامل ابزارهایی برای کاربردهای کلیدی است و همچنین راه حلی برای ساخت برنامه های وب موبایل با کارایی درجه یک(Angular Mobile)  است.

React

React
یک فریم ورک در نظر گرفته نمی شود؛ بلکه خود را به عنوان یک کتابخانه برای قسمت بصری می بیند. اما گول نخورید، زیرا React برای حل مشکلات رابط کاربر در مقیاس بسیار بزرگ ساخته شده است.

React زمانی که برای اولین بار معرفی شد، شدیداً از هم گسیخته بود. ایده "بازنگری بهترین تجربیات" به دلایل مناسبی با آن همراه بود و پیشنهاد React بسیار متفاوت از روندهایی بود که بقیه جامعه جاوا اسکریپت در آن زمان به سمت آن حرکت می کردند. در حالیکه دیگر نویسندگان فریم ورک تمرکز بر استفاده از الگوی MVC  برای نوشتن برنامه ها و داشتن جدایی کامل کد قسمتهای بصری از سایر قسمت های برنامه را داشتند، React  پیشنهاد می کرد که آنها را با هم ترکیب کرده و کد را از طریق ترکیب با سایر پارادایم های عملکردی اجزاء، ساده تر بنویسند.

در زمان انتشار React ، دیگر فریم ورک های محبوب مانند Angular و Ember نیز به سوی معماری بیشتر مبتنی بر جزء حرکت کرده اند و همچنین ایده های مشابه React مانند DOM مجازی، که شامل چگونگی تغییرات React در شکل و قیافه است، را به کار برده اند.

رویکرد کلی React به ساخت برنامه ها متفاوت از Angular و Ember است، زیرا فقط یک کتابخانه نمایش است؛ این روش راهی برای انجام مسیریابی در سمت کاربر نیست و حتی راهی برای بارگیری داده ها از سمت سرور مرتبط با کتابخانه نیز نیست. این بدان معنی است که برای به دست آوردن یک برنامه ساده و در عین حال کاملاً کارآمد (که نیاز به ویژگی های از دست رفته فوق دارد)، شما نیاز به کتابخانه های دیگر دارید که توسط تیم اصلی فیس بوک که React را نیز نگه می دارد، پشتیبانی نمی شود.

 با این حال، با ایده تکیه بر کتابخانه های خارجی درگیر نشوید. بسیاری از کتابخانه های محبوب حمایت شده توسط جامعه برنامه نویس مانند react-router وجود دارند که حتی توسط تیم های داخل فیس بوک پذیرفته شده اند و راه را برای مسیریابی در سمت کاربر فراهم می کند، مانند  axios، که دارای یک سیستم برای فراخوانی AJAX است و به راحتی در برنامه های React ادغام می شود و  redux، که حاوی وضعیت جاری در خود است و به توسعه دهندگان کمک می کند جریان داده ها را در برنامه های React اداره کنند.

پیدا کردن فریم ورک مناسب

در حال حاضر این مباحثه وجود دارد که بهترین فریم ورک برای ساخت برنامه ها چیست. در واقع، هر یک دارای نقاط قوت و ضعف خود است که ما در این مبحث نمی توانیم به آن دست یابیم. با این وجود همه آنها یک چیز مشترک دارند: جاوا اسکریپت.

 این چیزی است که قابل توصیه است : یادگیری خوب جاوا اسکریپت و اکوسیستم مدرنش. فراگیری Node.js، حتی برای توسعه سمت کاربر، به عنوان ابزاری بسیار خوب برای کمک به بسته بندی منظم کد. اجرایlinters  برای جلوگیری از اشتباهات نحوی معمول، تست قسمتها و ... . پس از افزودن  Node.js، مطمئن شوید تمام وابستگی های خود را از طریق NPMاضافه کرده اید، از جمله وابستگی های CSS مانند Font Awesome، Twitter Bootstrap و غیره. از ES2015 که همچنین به عنوان ES6 نیز شناخته می شود، استفاده کنید و تمام ویژگی های آن را از طریق Babel ، که کد ES6 را به جاوا اسکریپت ES5 بر می گرداند که تا کامل شدن آخرین ویژگی های جاوا اسکریپت، مرورگرها بتوانند آن را درک و تفسیر کنند، بیفزایید. همچنین، اگر طرفدار زبانهای ماشینی هستید، توجه کنید که به Flow و / یا TypeScript نگاه کنید.

هنگامی که ابزار و اکوسیستم جاوا اسکریپت را انتخاب کرده و مشخص کردید که کدام قسمتهای مورد علاقه شما بیشتر است، فریم ورکی را انتخاب کنید که متناسب با انتخاب شما باشد. در نهایت، هدف هر یک از فریم ورک ها یکسان است: ساخت یک برنامه بسیار جذاب. بنابراین اگر شما بخواهید، مثلا یک رویکرد شی گرا یا یک رویکرد کارآمدتر در هنگام ساخت برنامه داشته باشید، این کار (انتخاب فریم ورک مناسب) می تواند به کمک شما بیاید.

 همچنین باید تصمیم بگیرید که چقدر کنترل بر روی معماری برنامه تان می خواهید. اگر می خواهید بیشترین تصمیمات درباره معماری را خودتان اتخاذ کنید، ممکن است بیشتر به گردآوری کتابخانه های مختلف علاقه مند شوید، که بیشتر با  React سازگاریدارد. اما اگر ترجیح می دهید بیشترین تصمیمات دیگران برای شما بگیرند و با داشتن کمی انعطاف کنار بیایید، ممکن است Angular یا Ember بهترین انتخاب شما باشد زیرا آنها هر دو روشهای ایمگونه بیشتری را برای نوشتن برنامه ها دارند.

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