توسعه سمت کاربر وب - ویکی‌پدیا، دانشنامهٔ آزاد

توسعه سمت کاربرِ وب (به انگلیسی: Front End web development) عمل برنامه‌نویسی اچ‌تی‌ام‌ال(HTML)، سی‌اس‌اس(CSS) و جاوااسکریپت(JavaScript) برای تولید یک سایت یا یک برنامه کاربردی وب است که به‌طور مستقیم یک کاربر می‌تواند آن را ببیند و با آن در تعامل باشد. به موجب چالشی که در توسعه سمت کاربر وجود دارد توسعه دهنده همیشه نیاز دارد تا از تغییرات ابزارها و تکنیک‌هایی که در ساخت سمت کاربر یک سایت استفاده می‌شود آگاه باشد.

هدف از طراحی سمتِ کاربر آن است که تضمینی وجود داشته باشد تا زمانی که کاربران سایت را باز می‌کنند بتوانند اطلاعات را در یک قالب ساده، خوانا و مرتبط مشاهده کنند. پیچیدگی این موضوع به این حقیقت بازمی‌گردد که در دنیای مدرن و تکنولوژی، کاربران از دستگاه‌های مختلف با نمایشگر مختلف استفاده می‌کنند که توسعه دهنده را مجاب می‌کند معقول‌ترین تجربه کاربری را برای کاربر به وجود آورد که به همین جهت توسعه دهنده باید از اجرا شدن سایت در مرورگرهای مختلف(Cross-browser) و سکوهای مختلف(Cross-platform) اطمینان حاصل کند و همچنین این موضوع اهمیت توسعه در سمت کاربر را متذکر می‌شود.^[۱]

همچنین کسی که توسعه سمت کاربرِ وب را انجام می‌دهد توسعه دهنده سمت کاربر یا توسعه دهنده فرانت‌اند(Front End Developer) می‌نامند.^[۲]

ابزارهای مورد استفاده در توسعه سمت کاربر[ویرایش]

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

زبان نشانه‌گذاری ابرمتنی (HTML)[ویرایش]

اچ‌تی‌ام‌ال اساس فرایند توسعه یک سایت است که در صورت وجود نداشتن هیچ سایتی وجود ندارد. کدهای اچ‌تی‌ام‌ال هستند که موجب می‌شوند یک چارچوب کلی برای نمایش وجود داشته باشد. اچ‌تی‌ام‌ال توسط تیم برنرز لی توسعه داده شده‌است. بعد از توسعه اچ‌تی‌ام‌ال نسخه‌های مختلفی در وب(WWW) پدیدار شدند. آخرین نسخه اچ‌تی‌ام‌ال را اچ‌تی‌ام‌ال۵ (HTML5) می‌نامند که در تاریخ ۲۸ اکتبر، ۲۰۱۴ توسط کنسرسیوم وب یا به اختصار انگلیسی W3 ارائه و انتشار یافت. این نسخه دارای راه‌های تازه و کارآمدی بود که می‌توان به کنترل کردن فایل‌های چند رسانه‌ای (صوت و ویدیو) اشاره کرد. در حال حاضر اچ‌تی‌ام‌ال۵ در میان توسعه دهندگان سمت کاربر از محبوبیت خاصی برخوردار است. اچ‌تی‌ام‌ال۵ دارای ویژگی‌های بسیاری نسبت به نسخه‌های پیشین خود است.

شیوه‌نامه آبشاری (CSS)[ویرایش]

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

جاوااسکریپت (JavaScript)[ویرایش]

جاوااسکریپت یک زبان برنامه‌نویسی دستوری رویدادگرا (برخلاف برنامه‌نویسی اعلانی اچ‌تی‌ام‌ال) است که برای یک صفحهٔ اچ‌تی‌ام‌ال ایستا(Static) یک رابط پویا(Dynamic) به وجود می‌آورد. سند اچ‌تی‌ام‌ال براساس یک مدل شیءگرا که به آن DOM گویند نمایش داده می‌شوند که کدهای جاوااسکریپت از این مدل استفاده می‌کنند و به موجب آن می‌توانند سند را دستکاری و رویدادهای که توسط کاربر اجرا می‌شوند را زیر نظر بگیرند.

وانیلا جاوااسکریپت[ویرایش]

یا وانیلا جی اس (Vanilla JS) اصطلاحی است که به همان زبان جاوااسکریپت اطلاق می‌شود. در حقیقت، وانیلا جی اس هیچ سکو (framework) یا کتابخانهٔ خاصی نیست. این اصطلاح بیشتر برای کسانی ساخته شده‌است که گمان می‌کنند برای استفاده از جاوااسکریپت، حتماً باید از کتابخانه‌های موجود یا سکوی خاصی استفاده بکنند.

چارچوب‌های جاوااسکریپت[ویرایش]

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

برخی از معروفترین چارچوب‌ها عبارتند از

• انگولارجی‌اس
• ReactJS
• ویو جی‌اس
• Meteor.js
• Node.js
• Ember.js
• چارچوب جاوااسکریپت پروتوتایپ

کتابخانه جاوااسکریپت[ویرایش]

علاوه بر چارچوب‌ها کتابخانه‌های جاواسکریپت هم وجود دارند.

برخی از محبوبترین کتابخانه‌ها عبارتند از

• ریکو (آژاکس)
• جی‌کوئری
• دوجو
• امبر جی‌اس

کتابخانه جی‌کوئری(jquery)[ویرایش]

جی‌کوئری یک کتابخوانه قدرتمند جاوااسکریپت می‌باشد که عملیات بر روی اسناد صفحه و اجکس را بسیار راحت‌تر می‌کند

امروزه استفاده بسیار وسیعی از این کتابخوانه متن باز بعمل می‌آید

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

جاوااسکریپت این امکان را می‌دهد که به کمک تکنیکی به نام اِی‌جَکس اطلاعاتی را از دیگر سایت‌ها دریافت کند و حتی با رویدادهای سمت سرور تعامل داشته، آن‌ها را زیر نظر بگیرد و در حقیقت یک محیط پویا برای وب ایجاد کند.

اهداف توسعه[ویرایش]

یک توسعه دهنده سمت کاربر علاوه بر ابزارها و تکنیک‌هایی که استفاده می‌کند سعی دارد نکات زیر را در فرایند توسعه اعمال کند.^[۳]

دسترس پذیری[ویرایش]

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

کارایی[ویرایش]

یکی از اهداف توسعه دهندگان به گونه‌ای است که باید از نظر سرعت زمان بارگذاری، حجیم نبودن فایل‌ها، استاندارد بودن کدها برای بارگذاری سریع صفحات اطمینان حاصل کنند.

پیوند به بیرون[ویرایش]

• کنسرسیوم جهانی وب (W3)
• وبگاه اچ‌تی‌ام‌ال در کنسرسیوم جهانی وب
• وبگاه سی‌اس‌اس در کنسرسیوم جهانی وب

جستارهای وابسته[ویرایش]

• اسکریپت‌نویسی سمت سرور
• طراحی وب
• چارچوب نرم‌افزاری تحت وب
• بهینه‌سازی موتور جستجو (SEO)
• تایپوگرافی
• تئوری رنگ
• تجربه کاربری

پانویس[ویرایش]