وب سایت ها همه جا هستند و توسعه دهندگان فرانت اند هیچوقت با کمبود فرصت مواجه نمی شوند. از آنجاییکه همه چیز به سرعت در حال تغییر است یادگرفتن همه مهارتها با این سرعت تغییر، مخصوصاً برای تازه کارها دشوار است. بعلاوه مسیر یک حرفه جدید همیشه هموار نبوده و گزینه های در دسترس برای یادگیری در وب فراوانند.
در این متن ما مهارتهای مهم توسعه دهندگان فرانت اند برای سطوح ابتدایی، میانی، پیشرفته و حرفه ای را جمع آوری کرده ایم. چه شما یک تازه کار باشید یا یک حرفه ای احتمالاً با استفاده از بعضی از این نکات حرفه توسعه فرانت اند شما پیشرفت خواهد کرد. اکنون باید به جزئیات برسیم.
توسعه فرانت اند دقیقا چیست و توسعه دهنده فرانت اند چه کسی است؟
آیا تا کنون وقتی به وب سایت مورد علاقه تان نگاه می کنید این سوال برایتان پیش آمده است که این وبسایت چطور کار می کند؟ به نحوه چیدمان اجزاء آن دقت کرده اید؟ که چطور با کلیک کردن روی یک دکمه یا هر جای دیگر دستور شما انجام می شود؟ و آیا تا بحال به این فکر افتاده اید «ای کاش من هم می توانستم چنین وب سایتی درست کنم» و یا «ساختن چنین وب سایت کارآمدی چقدر سخت است»؟
در واقع همه مطالب گفته شده در پاراگراف بالا توسعه فرانت اند نامیده می شوند. طراحی وب سایت
، ظاهر وب سایت است در حالیکه توسعه فرانت اند نحوه اجرای این طراحی در وب سایت است. و توسعه دهنده فرانت اند شخص مسئول این اجراست.
طبق تحقیق انجام شده، در سال 2014 حدود 150 هزار توسعه دهنده فرانت اند در ایالات متحده وجود دارد و در دسترس هستند. و تا سال 2024 تعداد توسعه دهندگان وب به حدود 190 هزار نفر خواهد رسید. این ارقام رقابت موجود در این زمینه را نشان می دهد و حاکی از آن است که توسعه دهندگان نیاز دارند با تکنولوژی های رایج همراه باشند و همیشه به روز باشند.
برای به دست آوردن موفقیت مطلوب، مهارت های ضروری برای توسعه دهندگان فرانت اند در سطوح مختلف در زیر آورده شده است. به منظور کمک به شما برای شروع حرفه توسعه فرانت اند eBook های مهم نیز معرفی شده اند.
بدیهی است که مهارت های مختلفی برای سطوح مختلف توسعه فرانت اند مورد نیاز است و این مهارت ها به 4 فاز تقسیم بندی می شوند:
1. مهارت های توسعه دهنده فرانت اند برای سطح مبتدی
• HTML+CSS
HTML (مخفف Hyper Text Markup Language به معنی زبان اشاره گذاری متنی) و CSS می توانند بنیادی ترین قسمت توسعه وب فرانت اند باشند. HTML «استخوان بندی» صفحه وب است در حالیکه CSS طراحی رنگی به صفحه وب اضافه می کند و ظاهر وب را می سازد. متن، تصاویر و طراحی رنگی که در صفحات وب می بینیم از طریق HTML+CSS اجرا شده اند. تسلط داشتن بر HTML و CSS برای مبتدی ها ضروری است.
مهارت های توسعه فرانت اند – HTML
به شکل ساده HTML برای طرح بندی به کار می رود و شما باید در زمینه div، جدول ساختن، ul، li، span، فونت و غیره مهارت داشته باشید. در این ضمن CSS برای تکمیل طراحی و نمایش HTML به کار می رود که به آن «استایل CSS » می گوییم.
به این منظور شما باید با موارد زیر آشنا باشید: float، position، height، width، overflow، margin، padding و سایر اصطلاحات. یادگیری این دو زبان نسبتاً آسان است و آنها ارتباط نزدیکی به سبک طرح بندی دارند.
مهارت های توسعه فرانت اند – CSS
• جاوااسکریپت
جاوااسکریپت یکی دیگر از مهارت های بنیادی است که توسعه دهندگان فرانت اند باید بر آن تسلط داشته باشند. از این مهارت در زبان سمت کاربر برای اضافه کردن پویایی به صفحات HTML استفاده می شود که باعث ایجاد تجربه جستجوی بی دردسر و عالی از طریق افزودن برخی افکت ها از قبیل افکت های جابجایی تبلیغات، افکت های شناور شدن تبلیغات، افکت های blinds، افکت های یکپارچه اسکرول شدن و ... برای کاربران می شود.
طبق بررسی استک اوورفلو ، جاوااسکریپت محبوب ترین و پیشگام ترین زبان در میان توسعه دهندگان است و با در دست داشتن 62.5% سهام در بخش زبان برنامه نویسی بازار را زیر سلطه خود دارد.
مهارت های توسعه فرانت اند – جاوااسکریپت
• jQuery
اساساً jQuery یک کتابخانه JS سبک وزن است که با CSS3 و موتورهای جستجوی وب از قبیل Safari 2.0+، IE6.0+ و Opera 9.0+و غیره سازگار است. jQuery باعث می شود HTML، EVENTS و افکتهای انیمیشن به روش خیلی راحتی کنترل شوند. تعامل AJAX معادل مجموعه ای از پلانگین ها و اکستنشن هایی است که اجرای JS را خیلی سریعتر و راحت تر می کنند.
نمونه اولیه سریعتر، هوشمندتر و ساده تر با ماکپلاس
به صورت رایگان شروع کنید.
مهارت های توسعه فرانت اند – jQuery
• CSS و چهارچوب های جاوااسکریپت
همانطور که می دانید CSS و جاوااسکریپت بخش اعظمی از توسعه فرانت اند هستند و نیازمند مهارت های زیاد دیگری هستند تا از طریق آنها اجرا شوند، بنابراین این جایی است که CSS و چهارچوب های جاوااسکریپت به درد می خورند. مجموعه CSS و فایلهای JS کارهای زیادی انجام می دهند تا شما عملکرد معمولی به دست بیاورید. به جای این که با یک فایل تکست خالی کارتان را شروع کنید می توانید با یک کد فایل که در آن JS شگفت انگیزی زیادی وجود دارد کارتان را شروع کنید.
هم چنین جفت کردن بوت استرپ با یک چهارچوب جاوااسکریپت دیگر مثل Angular.js رایج است. اگر این چهارچوب ها را بشناسید و از مبانی طراحی مشابه و کد درونشان استفاده کنید، توسعه فرانت اند برای شما تا جای ممکن از لحاظ زمانی کارآمد خواهد بود.
چطور خیلی سریع شروع به توسعه فرانت اند بنماییم؟
1. HTML+CSS
• HTML+CSS اولین بار در سال 2011 منتشر شد. درک آن ساده است و یک تازه کار می تواند با کدها بعد از خواندن این متن وب سایتش را طراحی کند.
• HTML5: دستورالعمل گمشده، جمعاً در 518 صفحه همه جدیدترین ویژگی های HTML5 ارائه می کند.
• CSS3: دستورالعمل گمشده، در بیش از 600 صفحه اطلاعات فوق العاده ای برای کمک به ایجاد طراحی های مدرن شگفت انگیز ارائه می کند.
• رازهای CSS ویژگی های پیشرفته را دربردارد که به ما کمک می کند طراحی صفحه را تنظیم کنیم تا حروف چینی، تصویر پس زمینه و حتی شکل های CSS بی نظیر ایجاد کنیم.
2. جاوااسکریپت
• رازهای نینجا جاوااسکریپت، که به شما نحوه نوشتن کدهای جاوااسکریپت می آموزد. این کدها خیلی کارآمد هستند و حافظه کمی استفاده می کنند.
• جاوااسکریپت: قسمت خوب، یکی از بهترین کتابها یرای مطالعه الگوهای طراحی و بهترین تمرین هاست.
• الگوهای جاوااسکریپت، که در حدود 230 صفحه راهکارها و کلک هایی برای توسعه JS حرفه ای ارائه می دهد و همچنین مفاهیم مفصلی مثل متغییرهای جهانی، وراثت، یادداشت الفبایی را نیز دربردارد.
3. jQuery
• جاوااسکریپت و jQuery، درباره اصول پایه برای اسکریپت کردن و نوشتن اسکریپت برای وب است.
• jQuery در عمل، درباره کامپس (برنامه ای که برای نوشتن Sass استفاده می شود ) است و پر از تمرین و سورس کدهایی است که برای مسلط شدن در زمینه کتابخانه Sass به کمک می کند.
4. توسعه وب
• طراحی سایت شرکتی واکنش گرا با HTML5 و CSS3، همه چیز را به شما آموزش می دهد از تشکیل گروه گرفته تا یادگیری نحوه ساخت HTML کاملا واکنش گرا.
• وب سایت های با کارایی عالی، سرشار از تکنیک های مفید برای کاهش درخواست های HTTP، اندازه های فایل و کتابخانه های خارجی است. هم چنین دربردارنده تکنیکهای پیشرفته برای بهبود کیفیت کد می باشد.
2. مهارت های توسعه فرانت اند برای سطح میانی
• ES6
پیدایش ES6 (یعنی اسکریپت ECMA 2015) بی شک شگفتی های جدیدی به توسعه دهندگان فرانت اند بخشیده است. ES6 یک زبان اسکریپت کردن جاوااسکریپت است که توسط Netscape ایجاد شده و از ES1 به ES6 تکامل یافته است که در این روند تکامل از زمان انتشار ویژگی های جدید فوق العاده ای به آن افزوده شده است.
• ابزار توسعه Chrome
این مورد به ابزار توسعه Chrome مربوط می شود که برای تکرارکردن، اشکال زدایی و تجزیه و تحلیل کردن وب سایت به Google Chrome اضافه شده است و آن شامل بخش های زیر است:
• نوار ابزاری که به ساخت وب سایت کاملاً سازگار پذیر کمک می کند که ساخت سایت های سازگار با موبایل برای آن در اولویت است.
• عناصری که برای مدیریت مستقل DOM و CSS به کار می روند تا طراحی و طرح بندی صفحات را تکرار کند.
• پنل کنسول که اطلاعات تشخیصی ثبت شده را جمع می کند و یا با جاوااسکریپت بعنوان لایه ای بر صفحه تعامل برقرار می کند.
• منابعی که نقطه انفصال برای اشکال زدایی جاوااسکریپت تعیین می کنند و یا از طریق ورک اسپیس به فایل های محلی وصل می شوند تا از تدوین کننده بی درنگ ابزار توسعه استفاده کنند.
بعلاوه این ابزار شامل شبکه، اجرا، حافظه، کاربرد، امنیت، تغییر دادن و ابزار توسعه کنترل و غیره می باشد. مستندات ابزار توسعه گوگل به شرح ذیل می باشد.
• Angular، React و Vue
به عنوان محبوب ترین چهارچوب توسعه Angular، React و Vueخصوصیات و سناریوهای کاربری متفاوتی دارند:
• Angular یک چهارچوبی است که توسط تایپ اسکریپت برپایه گوگل پشتیبانی می شود که برای توسعه اپلیکیشن های محلی و دوگانه و تحت وب استفاده می شود.
• React یک کتابخانه جاوااسکریپت است که توسط فیسبوک پشتیبانی می شود و برای ساخت کامپوننت های UI اپلیکیشن تحت وب به منظور توسعه و رندر کردن محلی اپلیکیشن های iOS و اندروید به کار می رود.
• Vueیکی از بحث برانگیزترین چهارچوب های جاوااسکریپت است که برای توسعه وب و اپلیکیشن های تک صفحه ای از آن استفاده می شود.
در ادامه به جدول مقایسه چهارچوب های عنوان شده می پردازیم:
• پردازش CSS
• پردازش CSS ابزار دیگری است که سرعت کد کردن CSS را به شدت بهبود می بخشد و به CSS کمک می کند ویژگی های دیگری را بیفزاید تا اندازه پذیری بیشتری داشته باشد. همانطور که از اسمش می توان دریافت، پردازش CSS کد را قبل از انتشار در سایت پیش پردازش خواهد کرد و با کمک به پردازش سورس کد، آن را به یک کد CSS خوش ساختار تبدیل خواهد کرد. در میان آنها SASS و LESS هر دو از محبوب ترین پیش پردازنده های استفاده شده در توسعه فرانت اند هستند.
3. مهارت های توسعه فرانت اند برای سطح پیشرفته
• توسعه ساده Node.js
از زمان ایجاد آن در سال 2009 تا کنون Node.jsبر روی Ruby/Rails تکامل یافته است. آن یک زبان یا چهارچوب نیست بلکه محیطی است که اپلیکیشن های تحت جاوااسکریپت در آن اجرا می شوند. Node.js یک مهارت توسعه بک اند ضروری است که می توان گفت یکی از ملزومات اصلی برای تبدیل شدن به یک توسعه دهنده فرانت اند تمام عیار می باشد. چون Node.js رویداد گرا و انعطاف پذیر است برای کنترل درخواستهای همزمان بسیار مناسب است و روی سرورها بهتر از Ruby اجرا می شود.
مهارت های توسعه فرانت اند - Node.js
• RESTful API
اسم کامل REST نمایانگر حالت انتقال (Representational State Transfer) است که راهی برای جدا کردن توسعه فرانت اند و بک اند می باشد. فرانت اند مسئول رندر کردن و پردازش منطق های نسبتاً ساده و تعامل با بک اند از طریق API می باشد. REST به ویژگی رایج API برای توسعه وب تبدیل شده است. راهنمایی های بیشتر درباره RESTful API را اینجا می توانید پیدا کنید.
• طرح بندی واکنش گرا و طراحی موبایل
از آنجاییکه افراد بیشتری از تلفن های موبایل خود برای جستجو در اینترنت استفاده می کنند، طرح بندی واکنش گرا و طراحی موبایل برای توسعه دهندگان سطح میانی الزامی شده است. طرح بندی واکنش گرا به این معناست که صفحه مطابق با اندازه صفحه موبایل و نوع دستگاه موبایل طرح بندی می شود و مطالب برای آن صفحه در زمان باز شدن سایت تنظیم می شوند. طراحی موبایل به این معناست که ترمینال موبایل جداگانه ای باید طراحی شود و چیزی که کاربر در صفحه موبایل می بیند از آنچه که در کامپیوتر می بیند کاملاً متفاوت است. این یک راهنمایی درباره نحوه طراحی وب واکنش گراست.
• توسعه cross-browser
کد فرانت اند در نهایت در جستجوگر اجرا خواهد شد، و جستجوگرهای رایج زیادی در بازار وجوددارند. مکانیسم رندر کردن هر جستجوگر متفاوت است و کد یکسان را به روشهای متفاوت نشان می دهند. گرچه جستجوگرهای رایج در نمایش روش یکپارچه صفحات وب بهتر عمل می کنند، یادگیری شناخت جستجوگرهای سازگار مهارت مهم دیگری است که قبل از نمایش دائم باید در نظر گرفت. درباره توسعه cross-browser بیشتر بخوانید.
4. مهارت های توسعه فرانت اند برای سطح حرفه ای
• تست کردن و اشکال زدایی
باگ ها در توسعه وب اجتناب ناپذیرند، پس تست کردن و اشکال زدایی ماهرانه خیلی مهم است. یکی از راههای موثر، تست واحد است. در این روش بلوک های سورس کد، تکی تست می شوند. چهارچوب تست واحد، روشها و ساختارهای خاصی برای تست واحد ارائه می کند. روش دیگر تست UI است. این روش به چک کردن صفحه وب کمک می کند. باید صفحه وب برای واکنش صحیح نشان دادن به تعامل کاربر چک شود. برای مثال اگر کاربر فرم وب اشتباهی را ارسال کند باکس اعلام خطا به شکل درست باید سریع نشان داده شود. خیلی ساده می توان گفت باید علت باگ را پیدا کرد و پروسه را تصحیح کرد.
• Git و کنترل نسخه
کنترل نسخه مخصوصاً در طول فرایند توسعه خیلی مهم است. این سیستم هم به دنبال رکورد تغییر کد می گردد و هم نسخه هایی که تصادفاً پاک نشده اند را بازیابی می کند. Git و SVN رایج ترین سیستم های کنترل نسخه هستند که امروزه در دسترس اند.
کار گروهی و همکاری
برای یک مهندس واجد شرایط کارگروهی نباید در لیست مهارتهایش نادیده گرفته شود. همکاری و ارتباط آرام با سایر دپارتمانهای مربوط در زمان نیاز الزامی است، مخصوصاً با مدیران تولید، طراحان و مدیران پروژه. تا حدودی آرامی کارگروهی، کارآمدی تیم و پیشرفت توسعه پروژه را تحت تاثیر قرار خواهد داد.
در واقع یک ابزار خوب مثل ماکپلاس آی داک می تواند راه حل فوق العاده ای برای گردش کاری خسته کننده باشد. این ابزار کل گردش کاری طراحی محصول شما را به تعدادی از ویژگی های جالب و مفید وصل می کند.
مکپلاس آی داک
• این ابزار به طراحان کمک می کند که با یک کلیک طرح هایشان را از Sketch، Adobe XD و Adobe Photoshop صادر کنند. مورد دیگری هم هست که با این ابزار طراحان می توانند طرح هایشان را با داشته ها ، مشخصات، قطعه کد های دقیق تر بدون دخالت داده کاربر، هندآف کنند. هم چنین ما می توانیم به طور خودکار راهنماهای طراحی را جمع آوری و مدیریت کنیم تا منابع طراحی تیم را بسازیم.
• این ابزار به مدیران محصول کمک می کند تا ارتباط برقرار کنند و رابطه هر صفحه را با استفاده از استوری بورد فول ویو نشان دهند. هم چنین به کاربران اجازه می دهد نظراتشان را در زمینه طراحی بنویسند و تسک ها را بر اساس رنگ طبقه بندی کنند. با استفاده از این ابزار ما می توانیم نمونه های اولیه های-فای تعاملی بسازیم و هم چنین می توانیم انواع مختلفی از مدارک مربوط به محصول را آپلود کنیم (شامل Axure/Justinmind/Mockplus).
• این ابزار به توسعه دهندگان کمک می کند تا منابع توسعه را به صورت خودکار ایجاد کنند و همه یا تعدادی از داشته های انتخاب شده را دانلود کنند. مهم تر از همه کاربران می توانند از قطعه کدهای آماده استفاده کنند و فقط با یک کلیک عناصر طراحی کپی شده را ببینند.
طرح هزینه ماکپلاس آی داک به شرح زیر است:
طرح هزینه ماکپلاس آی داک
به یادگیری ادامه دهید و سعی کنید عملکرد خودتان را بهتر و بهتر کنید.
معیار مهمی که ما را از سایر توسعه دهندگان معمولی جدا می کند، توانایی ما در حل بهتر مشکلات و نوشتن کدهای تمیز و ظریف است. ضمناً برای عقب نیفتادن از توسعه تکنولوژی که با سرعت بالایی در حال رشد است و هم چنین استفاده از فرصت هایمان، باید همواره به یادگیری و تلاشمان ادامه دهیم. جمله استیو جابز را که در دانشگاه استانفورد در سال 2015 گفت همیشه به خاطر داشته باشید: «گرسنه بمان، احمق بمان»
