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

در بخش اول این پست، با مهارت‌های اساسی برای کار در دنیای فرانت‌اند (Front-End) آشنا شدیم. اگر تازه اول راه باشید، آشنایی با CSS ،HTML و جاوا اسکریپت کارتان را راه می‌اندازد. اما اگر می‌خواهید یک توسعه‌دهنده فرانت‌اند حرفه‌ای باشید، این مهارت‌ها به هیچ‌‌وجه کافی نیستند. در این پست می‌خواهیم سراغ مهارت‌های تکمیلی برویم که کیفیت کارتان را بالا می‌برند و متخصص خبره‌تری از شما می‌سازند. مهارت‌هایی مثل تست کد، کنترل نسخه، طراحی واکنش‌گرا، بهینه‌سازی دیزاین و آشنایی با ابزارهای جانبی.

اگر در پایان این مطلب به یادگیری یک‌جای همه این تکنولوژی‌ها علاقمند شدید، سری به دوره «آموزش پروژه‌محور طراحی وب (Front-End) کوئرا کالج» بزنید. در این دوره صفر تا صد مفاهیم jQuery ،JavaScript Bootstrap ،CSS ،HTML و Ajax را با تمرین‌ها و پروژه‌های کاربردی می‌آموزید و فرصت این را دارید که برای استخدام در اسنپ‌فود و اسنپ به مصاحبه دعوت شوید.

آزمونِ کد (Testing Code)

چه وب‌سایتی برای فروش بافتنی‌های مادرتان بسازید و چه سایتی جهانی برای بانکداری آنلاین، باگ‌ها همیشه بخشی از فرایند برنامه‌نویسی هستند. اگر می‌خواهید کد تمیز، بدون باگ و راحت‌فهمی بنویسید که به سادگی بشود در وقت لزوم تغییرش داد، حتما باید کدتان را به طور مداوم و در طول مسیر تست کنید. نوشتن آزمونِ کد شاید زمان‌بر باشد، اما ارزش‌اش در بلندمدت معلوم می‌شود. چند سال که گذشت، با خودتان فکر می‌کنید که عجب کار خوبی کردم آن موقع کدم را تست کردم! تست‌هایی که می‌توانید بنویسید انواع مختلفی دارند؛ مثلا:

• آزمون واحد (Unit Test) که در آن ریزترین اجزای کدتان را مستقل و و جدا از بقیه کد می‌سنجید. در این نوع تست به وابستگی‌ها (Dependencies) توجهی نمی‌کنید و فقط آن ماژول خاص را مورد سنجش قرار می‌دهید.
• آزمون یکپارچه‌سازی (Integration Test) که در آن ماژول‌هایی که قبلاً از آزمونِ واحد با موفقیت خارج شده‌اند را می‌گیرید و عملکردشان را با هم و در کنار یکدیگر بررسی می‌کنید.
• آزمون عملکردی (Functional Test) که کارکرد یک بخش به‌خصوص از سایت‌تان را بررسی می‌کند تا مطمئن شوید که آن قسمت همان کاری را انجام می‌دهد که شما می‌خواهید.

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

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

• جست (Jest) که توسط فیسبوک ساخته شده، یکی از محبوب‌ترین فریم‌ورک‌های تستینگ است. با اپلیکیشن‌های ری‌اکت خیلی خوب کار می‌کند، اما در عین حال می‌توان آن را برای هر فریم‌ورک مدرنی در جاوا اسکریپت به کار برد.
• موکا (Mocha) فیچر‌های خیلی زیادی دارد، روی Node.js و در مرورگر اجرا می‌شود و تست ناهمگام را برایتان ساده و مفرح می‌کند.
• آنزیم (Enzyme) ابزاری برای تست کامپوننت در ری‌اکت است و بررسی (Assert)، دستکاری و پیمایش (Traverse) خروجی کامپوننت‌های ری‌اکت را برایتان آسان می‌کند. آنزیم آزمون واحد نیست، بلکه چرخه عمر کامپوننت را می‌سنجد.

این سه فریم‌ورک از محبوب‌ترین‌‌ها برای تست کد جاوا اسکریپت هستند، اما گزینه‌های شما به همین‌جا ختم نمی‌شود. نظرسنجی وضعیت جاوا اسکریپت در سال ۲۰۱۹، لیستی از چندین فریم‌ورک محبوب دیگر برای آزمون کد دارد که می‌توانید میزان رضایت، علاقه و آگاهی برنامه‌نویسان از هرکدام را با هم مقایسه کنید و بعد تصمیم بگیرید که با کدام جلو بروید.

کنترل نسخه (Version Control) و کار با گیت (Git)

در طول همه آن نشانه‌گذاری‌ها با HTML، زیباسازی‌ها با CSS و برنامه‌نویسی‌ها با JavaScript، احتمالاً چندین و چند بار کدتان را بازبینی خواهید کرد. فرض کنیم زد و یک جای کار اشتباهی پیش آمد. در این مواقع وحشتناک‌ترین چیزی که می‌تواند پیش بیاید این است که مجبور شوید همه چیز را از اول شروع کنید! کنترلِ نسخه فرایندی برای تعقیب و کنترل تغییرات ایجاد شده در کدِ منبع شما است تا لازم نباشد به چنین داستان‌های ترسناکی فکر کنید!

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

طراحی واکنش‌گرا (Responsive) و بهینه‌سازی دیزاین

آن روزها را یادتان می‌آید که فقط از یک دستگاه برای سر زدن وبسایت‌ها استفاده می‌کردیم؟ نه، من هم یادم نمی‌آید. آن روزها که پی‌سی یا حتی لپ‌تاپ تنها راه سایت دیدن بود آن‌قدر تاریخ گذشته است که نمی‌خواهم با حرف زدن در موردشان سن خودم را بالا ببرم!

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

اما کار یک وب‌سایت ایده‌آل همین‌جا تمام نمی‌شود. شما شاید بهترین و جذاب‌ترین وبسایت جهان را بسازید، اما اگر لود شدن آن هزار سال طول بکشد، تلاش شما کوچک‌ترین اهمیتی برای کاربر ندارد. برای بهبود سرعت وب‌سایت کارهای خیلی زیادی می‌توان انجام داد؛ مثلاً بهینه‌سازی عکس‌ها و تغییر اندازه آن‌ها، Lazy Load، حذف لودهای غیرضروری و بهینه‌سازی کدهای CSS ،HTML و جاوا اسکریپت.

مقاله پیشنهادی از کوئرا مگ: راهکارهای مبتنی بر فرانت‌اند برای بهبود کارایی اپلیکیشن

آشنایی با دیگر ابزارهای جانبی

ابزارهای Build

این ابزارها برای خروجی‌گرفتن (Building) و دسته‌کردن (Bundling) کد کمک شایانی به شما می‌کنند. بهترین ابزارهای Build عبارت‌اند از وب‌پک (Webpack) و رول‌آپ (Rollup). وب‌پک یک ماژول Bundle ایستا برای اپلیکیشن‌های مدرن جاوا اسکریپت است. رول‌آپ هم قطعات کوچک کد را در یک قالب بزرگ‌تر و پیچیده‌تر مثل کتابخانه یا اپلیکیشن، کامپایل می‌کند. هم‌چنین رول‌آپ فرمت استاندارد جدید نسخه ES6 جاوا اسکریپت را برای ماژول‌های کد به کار می‌برد.

ابزارهای خودکارسازی

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

پکیج‌منیجرها (مدیریت بسته)

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

لینترها و فرمترها

تا زمانی که پروژه‌تان هنوز کوچک است، IDE محبوبتان به خوبی خطاها و مشکلات کدتان را شناسایی می‌کند و به شما نشان می‌دهد. اما وقتی با یک تیم بزرگ کار می‌کنید که هر کس در آن ابزار خودش را استفاده می‌کند و پروژه هم زیادی بزرگ شده، دیگر استفاده از IDE برای خطایابی جوابگو نیست. در اینجا است که باید سراغ لینترها بروید. لینترها ابزار شناسایی خطاها هستند که اتفاقا IDEها با کمک آن‌ها خطاها را شناسایی می‌کنند.

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

به یادگیری برنامه‌نویسی فرانت‌اند علاقمند شدید؟ برای ثبت نام در دوره فرانت‌اند کوئرا کالج کلیک کنید.

ترجمه، اقتباس و تخلیص از:

"5 Essential Skills Every Front End Developer Must Learn in 2019" by Adhithi Ravichandran @ Programmingwithmosh

"The 10 Skills You Need to Land Your First Front End Developer Job" by Scott Morris @ Skillcrush

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