طراحی سایت - توسعه دهنده فرانت اند

آیا تا به حال به وب سایت مورد علاقه خود نگاه کرده اید و از خود پرسیده اید که چرا اینگونه به نظر می رسد، چگونه دکمه ها کار می کنند یا فکر می کنید، "من تعجب می کنم که چقدر پیچیده است؟" یا " کاش می توانستم این کار را انجام دهم "؟ در حالی که طراحی وب نحوه نگاه یک وب سایت را تعیین می کند، توسعه فرانت اند نحوه پیاده سازی آن طراحی در وب است.

 

یک توسعه‌دهنده وب، توسعه‌دهنده نرم‌افزار یا مهندس نرم‌افزاری است که به شکل تخصصی به توسعه نرم‌افزارهای کاربردی وب یا نرم‌افزارهای شبکه توزیع‌شده می‌پردازد.

هر آنچه که در یک وب سایت مشاهده می کنید با توسعه فرانت اند ساخته شده است و افراد پشت آن یک نام دارند: توسعه دهندگان فرانت اند.

توسعه دهنده فرانت اند یک مهندس نرم افزار است که طراحی های وب را از طریق زبان های برنامه نویسی مانند HTML، CSS و JavaScript پیاده سازی می کند. اگر به هر سایتی سر بزنید، می توانید کارهای یک توسعه دهنده جلویی را در پیمایش، طرح بندی ها (از جمله این مقاله) و به روشی که سایت در تلفن شما متفاوت جلوه می کند (به لطف طراحی موبایل اول یا واکنشگرا) مشاهده کنید.

اما صبر کنید، آیا توسعه دهندگان فرانت اند در سال 2021 تقاضای شغلی دارند؟

مشاغل توسعه دهنده فرانت اند (که بعضاً به آنها مشاغل مهندسی فرانت اند نیز گفته می شود) از بیشترین تقاضای شغل ها هستند و به همین دلیل خوب، بدون آنها از سیاهچاله های اینترنت لذت نخواهیم برد!

ما تمام مهارت هایی را که توسعه دهندگان استفاده می کنند و به آنها نیاز داریم، تجزیه می کنیم تا بتوانید در زمینه توسعه فرانت اند شروع به یادگیری و کار کنید.

بنابراین، چگونه در سال 2021 به یک توسعه دهنده فرانت اند تبدیل می شوید؟

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

مهارتهای کلیدی

توسعه دهندگان وب فرانت اند از سه زبان اصلی برای کدگذاری وب سایت و طراحی برنامه های وب ایجاد شده توسط طراحان وب استفاده می کنند:

- HTML

- CSS

- JavaScript

توسعه دهندگان فرانت اند کد جلویی که در داخل مرورگر وب کاربر اجرا می شوند را میزنند. در مقابل یک توسعه دهنده بک اند، که کد آن در سمت سرور با استفاده از محیط های زمان اجرا منبع باز مانند Node.js یا با زبان های برنامه نویسی مانند Python اجرا می شود را میزند. توسعه دهندگان فول استک با هر دو زبان جلو و عقب برنامه نویسی ارتباط دارند.

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

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

HTML و CSS

HTML (Hyper Text Markup Language) و CSS (Cascading Style Sheets) اساسی ترین عناصر سازنده کد نویسی وب هستند. بدون این دو مهارت، شما نمی توانید یک وب سایت ایجاد کنید. تمام آنچه که شما دارید متن ساده قالب بندی نشده روی صفحه است. در واقع، شما حتی نمی توانید تصاویر را بدون HTML به یک صفحه اضافه کنید!

قبل از اینکه در هر مسیر شغلی توسعه وب شروع به یادگیری و کار کنید، باید بر روی کدگذاری با HTML و CSS تسلط داشته باشید . خبر خوب این است که کسب دانش کافی از هر یک از اینها فقط در عرض چند هفته قابل انجام است.

دانش HTML و CSS به تنهایی به شما امکان ایجاد وب سایت های اساسی را می دهد.

جاوا اسکریپت

جاوا اسکریپت به شما امکان می دهد تعداد بیشتری قابلیت به وب سایت های خود اضافه کنید. می توانید بسیاری از برنامه های اصلی وب را با استفاده از HTML، CSS و JavaScript (به اختصار JS) ایجاد کنید.

در ابتدایی ترین سطح، JS برای ایجاد و کنترل مواردی مانند نقشه هایی که در زمان واقعی به روز می شوند، فیلم های تعاملی و بازی های آنلاین استفاده می شود. سایتهایی مانند Pinterest از JavaScript زیادی استفاده میکند تا رابط کاربری آنها به راحتی قابل استفاده باشد. این واقعیت که صفحه هر زمان که چیزی را سنجاق می کنید بارگیری نمی شود به لطف جاوا اسکریپت است!

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

جی کوئری

jQuery یک کتابخانه جاوا اسکریپت است. مجموعه ای از افزونه ها که توسعه با جاوا اسکریپت را سریعتر و آسان تر می کند. به جای اینکه همه چیز را از ابتدا کدگذاری کنید، جی کوئری به یک توسعه دهنده وب فرانت اند اجازه می دهد تا عناصر آماده را به پروژه ها اضافه کند، سپس در صورت لزوم سفارشی سازی کند (یکی از دلایل مهم دانستن JavaScript). برای مواردی مانند تایمر شمارش معکوس می توانید از jQuery استفاده کنید، فرم تکمیل خودکار را جستجو کنید، و حتی به طور خودکار ترتیب مجدد و تغییر اندازه طرح های شبکه را می دهد.

چارچوب های جاوا اسکریپت

فریم ورک های JS (از جمله Angular، Backbone، Ember، Vue.js و React) یک ساختار آماده به کد JavaScript شما می دهند. انواع مختلفی از چارچوب های جاوا اسکریپت برای نیازهای مختلف وجود دارد، اگرچه پنج مورد ذکر شده در لیست محبوب ترین هستند.

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

چارچوبهای فرانت اند

CSS و فریم ورک های فرانت اند (محبوب ترین فریم ورک Bootstrap است) همان کاری را که JS Frameworks برای جاوا اسکریپت انجام می دهد برای CSS انجام می دهند. آنها برای رمزگذاری سریعتر یک نقطه پرش به شما می دهند. از آنجا که CSS بسیار دقیقاً با همان عناصر از یک پروژه به پروژه دیگر شروع می شود، چارچوبی که همه این موارد را از قبل برای شما تعریف می کند بسیار ارزشمند است. اکثر لیست های شغلی توسعه دهندگان فرانت اند انتظار دارند که شما با نحوه کار این چارچوب ها و نحوه استفاده از آنها آشنا شوید. بنابراین اگر می خواهید یک برنامه نویس فرانت اند باشید یا فقط برای تقویت مهارت های خود، قطعاً باید شروع به یادگیری این موارد کنید.

پیش پردازنده های CSS

پیش پردازنده عنصر دیگری است که یک توسعه دهنده فرانت اند می تواند برای سرعت بخشیدن به کدگذاری CSS استفاده کند. پیش پردازنده CSS قابلیت های اضافی به CSS اضافه می کند تا CSS ما مقیاس پذیر و کار با آن راحت تر باشد. این، کد شما را قبل از انتشار در وب سایت پردازش می کند و آن را به CSS مناسب قالب بندی و مرورگر تبدیل می کند. Sass و LESS دو پیش پردازنده بیشترین تقاضا را دارند.

خدمات و API های RESTful

بدون اینکه در این مورد خیلی فنی شوید، REST مخفف نمایندگی انتقال دولت است. در اصطلاحات اساسی، این یک معماری سبک وزن است که ارتباط شبکه را در وب ساده می کند و سرویس ها و API های RESTful سرویس های وب هستند که به معماری REST پایبند هستند.

بیایید بگوییم شما می خواستید برنامه ای بنویسید که همه دوستانتان در شبکه های اجتماعی را به ترتیب دوست شدن به شما نشان دهد. شما می توانید با RESTful API فیس بوک تماس بگیرید تا لیست دوستان خود را بخوانید و داده ها را برگردانید. به عنوان یک توسعه دهنده وب قزانت اند، می توانید با API توییتر نیز تماس بگیرید (توییتر همچنین از API های RESTful استفاده می کند). روند کلی برای هر سرویسی که از API های RESTful استفاده می کند یکسان است، فقط داده های برگشتی متفاوت خواهند بود.

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

طراحی پاسخگو و موبایل

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

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

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

در این موارد منطقی است که سایت موبایل کاملاً متفاوت باشد. یک وب سایت بانکی با بانکداری آنلاین از یک سایت تلفن همراه جداگانه بهره مند می شود که به کاربران امکان می دهد مواردی مانند نزدیکترین مکان بانک و نمای حساب ساده (از آنجا که صفحه های موبایل کوچکتر هستند) را مشاهده کنند.

توسعه مرورگر متقابل

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

سیستم های مدیریت محتوا و سیستم عامل های تجارت الکترونیکی

تقریباً همه وب سایت های موجود بر روی سیستم مدیریت محتوا (CMS) ساخته شده اند. (سیستم عامل های تجارت الکترونیکی نوع خاصی از CMS است.) محبوب ترین CMS در سراسر جهان WordPress است که در پشت صحنه میلیون ها وب سایت (از جمله Skillcrush!) قرار دارد. در واقع، تقریباً 60٪ وب سایت ها که از CMS استفاده می کنند از وردپرس استفاده می کنند.

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

به عنوان یک توسعه دهنده مشتاق فرانت اند، مهارت های CMS به طور بالقوه می توانند در هنگام رسیدن به یک کار، به شما کمک کنند.

تست و اشکال زدایی

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

تست واحد فرآیند آزمایش بلوک های جداگانه کد منبع است (دستورالعمل هایی که به وب سایت می گوید که چگونه باید کار کند) و چارچوب های تست واحد روش و ساختار خاصی را برای انجام این کار ارائه می دهند (برای هر زبان برنامه نویسی موارد مختلفی وجود دارد).

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

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

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

از آنجا که آزمایش و اشکال زدایی تا حد زیادی به تجربه کاربر مثبت کمک می کند، مهارت های ارزشمندی است که یک توسعه دهنده فرانت اند می تواند بشناسد.

سیستم های کنترل Git و نسخه

سیستم های کنترل نسخه به شما امکان می دهند تغییراتی را که به مرور کدگذاری شده اند، پیگیری کنید. همچنین اگر موضوعی را پیچیده کنید، بازگشت به نسخه قبلی آسان است.

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

Git بیشترین کاربرد را در بین این سیستم های مدیریت کنترل نسخه دارد و با استفاده از خط فرمان قابل نصب است. دانستن چگونگی استفاده از Git تقریباً برای هر شغل توسعه ای ضروری است، اعم از توسعه فرانت اند، توسعه بک اند یا توسعه فول استک. این یکی از مهارتهای شغلی حیاتی است که توسعه دهندگان باید داشته باشند اما تعداد کمی از آنها در مورد آن صحبت می کنند.

مهارت حل مسئله

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

به عنوان مثال: شما فرانت اند وب سایت کاملاً کارآمدی را ایجاد کرده و آن را به توسعه دهندگان بک اند تحویل می دهید تا آنها بتوانند آن را با سیستم مدیریت محتوا (CMS) ادغام کنند. ناگهان نیمی از ویژگی های جذاب شما کار نمی کنند.

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