توسعه Frontend در سال 2021

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

معرفی

ما این مقاله را به 4 بخش زیر تقسیم می‌کنیم تا هضم کردن آن برای همه آسان باشد:

1. بخش «دانش پایه‌ای توسعه نرم‌افزار» شامل موضوعاتی پایه و معمول است که توسعه‌دهندگان نرم‌افزار باید آن‌ها را بدانند.

2. بخش «دانش پایه‌ای توسعه Frontend» شامل موضوعاتی است که توسعه‌دهندگان فرانت‌اند باید برای ساخت اپلیکیشن‌هایی باکیفیت از آن‌ها مطلع باشند.

3. بخش «دانش متوسط» شامل فریمورک‌های جاوااسکریپت خواهد بود.

4. بخش «دانش پیشرفته» حاوی موضوعات پیشرفته‌ای است که دانستن آن‌ها به نفع توسعه‌دهندگان است. هرچند شما می‌توانید این موضوعات را بعدها نیز یاد بگیرید. بنابراین بیایید در کنار یکدیگر با توسعه Frontend در سال 2021 آشنا شویم.

دانش پایه‌ای توسعه نرم‌افزار

به نظر من این بخش شامل مسائلی است که تمام توسعه‌دهندگان باید از آن مطلع باشند.

اینترنت: اینترنت شبکه‌ی بزرگی از کامپیوترهاست که همه با یکدیگر در ارتباط هستند. اینترنت را می‌توان ستون اصلی وب دانست.

سیستم‌های کنترل نسخه: به سیستمی گفته می‌شود که تغییرات اعمال شده در فایل‌ها را دائماً ذخیره می‌کند. با استفاده از این سیستم‌ها می‌توانید نسخه‌های خاصی را در زمان دلخواه فراخوانی کنید. ما در سازمان خود از TFS و Github به عنوان خدمات میزبان استفاده می‌کنیم.

Agile

یک رویکرد تکراری در توسعه نرم‌افزار است. بسیاری از مردم Agile را با فریمورک Scrum استفاده می‌کنند. Scrum روی شیوه‌های مدیریتی تمرکز دارد، به همین دلیل تیم توسعه برای ارائه دادن نرم‌افزارهای عالی به شیوه‌های فنیِ قدرتمندتری نیاز دارد. ما باور داریم که آن‌ها می‌توانند از متدولوژی XP استفاده کنند.

کد تمیز: شما با خواندن مقاله‌ی «خلاصه کتاب کد تمیز» می‌توانید با اصول، الگوها و شیوه‌های کدنویسی تمیز آشنا شوید.

دانش پایه‌ای توسعه Frontend

توسعه‌دهندگان Frontend باید برای ساخت وبسایت‌ها با اطلاعات مهم موجود در این بخش آشنا باشند. زبان‌های CSS، HTML و جاوااسکریپت، بخش‌های اصلی این قسمت به شمار می‌آیند.

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

CSS: CSS مخفف عبارت «Cascading Style Sheets» است. CSS یک زبان stylesheet بوده که برای توصیف ظاهری اسناد به کار گرفته می‌شود. هسته اصلی این زبان، HTML است. CSS نحوه‌ی به نمایش در آمدن المان‌ها را در صفحه مشخص می‌کند.

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

پیش‌پردازنده‌ی CSS برنامه‌هایی هستند که قابلیت‌های اضافی مانند Mixin و سلکتورهای Nesting یا Inheritance را در اختیار توسعه‌دهندگان قرار می‌دهد. با این حال در آخر به CSS کامپایل خواهد شد. این موضوع باعث خواناتر شدن ساختار کدها شده و نحوه‌ی نگهداشت آن‌ها را آسان‌تر می‌کند. از جمله پیش‌پردازنده‌های محبوب CSS میتوان به Sass، LESS و SCSS اشاره داشت. سینتکس SCSS شباهت زیادی به سینتکس CSS دارد، به همین خاطر ما این گزینه را بیشتر ترجیح می‌دهیم.

معماری CSS

معماری CSS در مورد نحوه‌ی سازماندهی CSS است. ما با این کار می‌خواهیم آن را ماژولار و قابل درک نگه داریم. در ادامه به 3 متد رایج در این زمینه خواهیم پرداخت:

• BEM: این متد روی نامگذاری کلاس‌های CSS تمرکز دارد.
• OOCSS: روشی برای بکارگیری مفاهیم طراحی شی‌گرا در توسعه CSS است تا کدها ماژولارتر و چندبار مصرف شوند.
• SMACC: این متد بیشتر شبیه به یک راهنمای استایل برای دسته‌بندی کردن CSS است.

JavaScript

جاوااسکریپت یکی دیگر از زبان‌های برنامه‌نویسی بوده که تعامل را به وبسایت شما اضافه می‌کند. قطعاً تعامل مهم‌ترین المان در توسعه وب است. شما باید سینتکس جاوااسکریپت، تنظیمات DOM، closure، hoisting، ES2015، shadow DOM و fetch API را یاد بگیرید.

امنیت وب

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

• HTTPS: HTTPS نسخه‌ی رمزگذاری شده‌ی پروتکل HTTP است و برای رمزگذاری تمام ارتباطات بین مشتری و سرور از SSL یا TLS استفاده می‌کند. مشتریان با وجود این اتصال امن می‌توانند داده‌های حساس خود را بدون هیچ نگرانی با یک سرور در میان بگذارند.
• CORS: یک مکانیزم امنیتی بوده که مبتنی بر سربرگ HTTP است. CORS به ما در مدیریت درخواست های cross-origin کمک می‌کند.
• سیاست امنیت محتوا:  سیاست امنیت محتوا یا به اختصار CSP یک لایه امنیتی است که به شناسایی و کاهش انواع خاصی از حملات تزریق و XSS کمک می‌کند.
• کوکی: یک کوکی HTTP (کوکی وب و مرورگر) بخش کوچکی از داده است که سرور به مرورگر کاربر ارسال می‌کند. مرورگر این کوکی را ذخیره کرده و کوکی را دوباره با درخواست‌های بعدی به همان سرور ارسال می‌کند.
• AuthN/AuthZ: Authentication (احزار هویت) به فرآیند تایید هویت کاربر گفته می‌شود اما Authorization (مجوز) به پروسه‌ی تایید آنچه که کاربر به آن دسترسی داشته اطلاق می‌شود.
• مدیریتSecret Key : به ابزارها و متدهایی برای مدیریت اعتبارنامه‌های احزار هویت دیجیتال اشاره دارد.
• خطرات امنیتی OWASP: یک سازمان غیرانتفاعی که در حیطه امنیت اپلیکیشن‌های وب تخصص دارد.

پکیج منیجرها: این ابزارها قابلیت‌هایی را برای نصب وابستگی‌های جدید، مدیریت محل ذخیره پکیج‌ها و غیره ارائه می‌دهند. Yarn و Npm جزو پکیج منیجرهای محبوب هستند. هر دوی این منیجرها عملکرد فوق‌العاده‌ای دارند و می‌توانید بسته به سلیقه خود یکی از آن‌ها را انتخاب کنید.

UX/UI به صورت پایه‌ای: توسعه‌دهندگان فرانت‌اند خوب باید به فکر کاربران باشند. ما در شرکت خود یک دوره آموزشی به نام UCD 101 داریم که مطالب پایه‌ای مربوط به UX و UI را به افراد تازه‌وارد یاد می‌دهد. کاربرپژوهی یکی از مهارت‌های لازم برای استخدام شدن به عنوان یک توسعه‌دهنده فرانت‌اند است.

دانش متوسط – فریمورک‌های جاوااسکریپت

Angular و React دو فریمورک مدرن در جاوااسکریپت هستند که در سازمان ما بکار گرفته می‌شوند. معمولاً Angular به خاطر ساختاری که دارد، نسبت به React کاربرپسندتر است. ما در ادامه به هر کدام از این دو فریمورک خواهیم پرداخت. بیایید این بخش را به دو مسیر Angular و React تقسیم کنیم:

• آبی برای React
• قرمز برای Angular
• هر دو خط به معنای استفاده شدن این ابزار در هر دو فریمورک است.

Angular

Angular یک فریمورک جاوااسکریپت بوده که در ساخت اپلیکیشن‌های تک صفحه‌ای بکار گرفته می‌شود. این فریمورک دارای کتابخانه‌های مفیدی است که روند توسعه را برای افراد آسان‌تر خواهد کرد.

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

کتابخانه‌های شخص ثالث اساسی: کتابخانه‌های RxJS و TypeScript جزو کتابخانه‌های اصلی در این فریمورک به حساب می‌آیند.

کامپوننت‌های UI/فریمورک‌های CSS: ما در این زمینه Bootstrap و Material Design را داریم. ما برای متریال دیزاین فقط Angular Design را در اختیار داریم، به همین خاطر انتخاب کردن آن آسان‌تر خواهد بود. اما برای Bootstrap از NG Bootstrap استفاده می‌کنیم چون محبوب بوده و از نسخه‌های جدیدتر Bootstrap هم پشتیبانی می‌کند. محبوبیت Tailwind نیز به مرور زمان در حال افزایش است. Angular v11.2 به طور بومی از Tailwind پشتیبانی می‌کند.

مدیریت State: طراحی همیشه باید ساده باشد به همین خاطر برای اشتراک‌گذاری داده‌ها بین کامپوننت‌های فرزند و والد، می‌توانید از @Input() و @Output() استفاده کنید. بیشتر کتابخانه‌های مدیریت State، تحت تاثیر الگوی Flux/Redux قرار گرفته‌اند. قبل از اینکه به دنبال چنین راهکارهای پیشرفته‌ای باشید، پیشنهاد می‌کنم که ابتدا NGRX  (مزایا و معایب آن) را به درستی درک کنید.

Formatter: Angular دارای یک فورمتر پیش‌فرض نیست. توسعه‌دهندگان می‌توانند برای این کار Prettier را به پروژه‌های خود اضافه کنند. این ترفند زمانی فوق‌العاده است که چندین توسعه‌دهنده مشغول کار کردن روی یک پروژه باشند.

Linter: TSLint در سال 2019 منسوخ شد. Angular فعلی (نسخه 12) به طور پیش‌فرض دارای linter نیست. اگر می‌خواهید با Angular یک اپلیکیشن جدید را خلق کنید، افزودن ESLint به پروژه را نیز مد نظر داشته باشید.

تست کردن

• تست یونیت: Karma و Jasmine به طور پیش‌فرض در Angular گنجانده شده‌اند. با این حال مردم در کنار این قابلیت‌ها، از ابزارهای دیگری نیز استفاده می‌کنند. به عنوان مثال Nx از سال 2018 امکان استفاده از Jest را برای اجرای یونیت تست‌ها فراهم آورده است. ما در شرکت خود از Jest و Angular Testing Library برای ساخت یونیت تست‌ها استفاده می‌کنیم. اگر می‌خواهید از Jest استفاده کنید، باید ابتدا از مزایا و معایب آن مطلع باشید.
• تست End-to-End: ما با تحقیقات خود متوجه شدیم که مردم به مرور زمان از Protractor دور شده اند. Angular از نسخه v.12 خود دیگر دارای Protractor نیست. اگرچه مردم به عنوان جایگزین، Cypress را انتخاب کردند. Nx از سال 2018 توانسته امکان استفاده از Cypress را در Angular فراهم کند.

Bundler: Angular به طور پیش‌فرض با Webpack به بیرون عرضه می‌شود. اگرچه این قابلیت به طور آماده در اختیار کاربران قرار می‌گیرد، اما گاهی اوقات ممکن است به کمی تنظیمات نیاز داشته باشد. دانستن نحوه‌ی کارکرد Webpack در بین توسعه‌دهندگان یک مزیت به حساب می‌آید.

ابزارهای توسعه‌دهندگان: Angular برای بررسی کردن و اشکال‌زدایی اپلیکیشن‌ها، قابلیت Angular DevTools را در اختیار شما قرار خواهد داد. اگر از نسخه‌های 9 یا بالاتر استفاده می‌کنید، حتماً این افزونه‌ی کروم را نصب داشته باشید.

موضوعات پیشرفته: این موضوعات در مستندات Angular ذکر شده‌اند و ما باور داریم که توسعه‌دهندگان می‌توانند در صورت لزوم آن‌ها را یاد بگیرند.

موبایل: فریمورک Ionic به توسعه‌دهندگان کمک می‌کند تا بتوانند اپلیکیشن‌هایی با قابلیت اجرا در چند پلتفرم را خلق کنند. مثلاً شما با این فریمورک می‌توانید اپلیکیشن‌هایی را بسازید که در iOS، اندروید، دسکتاپ و وب به خوبی کار کنند. ما می‌توانیم از NativeScript برای توسعه بخشیدن به اپلیکیشن‌های موبایل Angular استفاده کنیم. فریمورک Ionic برای ساخت اپلیکیشن‌های هیبریدی با Angular، HTML5 و CSS است. اپلیکیشن‌های ساخته شده با Ionic برای ارتباط برقرار کردن با Native API به wrapper نیاز دارد. این در حالی است که ما با کمک NativeScript می‌توانیم اپلیکیشن‌های موبایلی بسازیم که به طور مستقیم با Native API ارتباط برقرار می‌کنند.

SSR: Angular Universal یک تکنولوژی برای رندر گرفتن اپلیکیشن‌های Angular در سرور است.

SSG: Scull یک ژنراتور سایت استاتیک برای پروژه‌های Angular است.

React

React یک کتابخانه‌ی جاوااسکریپت بوده که در زمینه ساخت رابط‌های کاربری از آن استفاده می‌شود. این فریمورک تنها روی UI تمرکز دارد، به همین خاطر انعطاف‌پذیرتر شده اما در مقایسه با Angular کمتر مورد توجه قرار می‌گیرد.

اگر مشغول یادگرفتن React هستید، پیشنهاد می‌کنم در ماشین محلی خود از پکیج create-react-app استفاده کنید. البته گزینه‌های آنلاین دیگری نیز مثل CodeSandbox، CodePen یا Stackblitz وجود دارد که می‌تواند کمک بسیاری به شما کند.

موضوعات اساسی: این مفاهیم جزو موضوعات اساسی React بوده و در مستندات مربوط به آن ذکر شده است.

• JSX: یک افزونه‌ی جاوااسکریپتی است که ظاهر UI را توضیح می‌دهد.
• کامپوننت: لایه‌های UI در React از کامپوننت(هایی) تشکیل شده که می‌تواند تابعی یا کلاسی باشد.
• چرخه حیات (Life Cycle)
• هوک‌های پایه‌ای (useState، useEffect) 

کتابخانه‌های اساسی شخص ثالث: React برای دیتابیس‌های بزرگ، گزینه‌های Flow و TypeScript را پیشنهاد می‌دهد. پکیج Create React App به طور آماده از TypeScript پشتیبانی می‌کند.

کامپوننت‌های UI / فریمورک‌های CSS: همانطور که قبلاً هم گفته شد، ما از 2 سیستم Bootstrap و Material Design برای طراحی استفاده می‌کنیم. بین موارد متعددی که در این زمینه وجود دارد، React-Bootstrap و Material-UI جزو سیستم‌های برتر طراحی در React هستند. شما با استفاده از فریمورک Tailwind می‌توانید سیستم طراحی خاص خودتان را خلق کنید.

مدیریت State: ما همیشه از طراحی‌های ساده حمایت می‌کنیم، بنابراین قبل از روی آوردن به کتابخانه‌های مدیریت State، باید ابتدا پیشنهادات خود React را بررسی کنید. این فریمورک دو گزینه‌ی useState API و Lifting State Up را به کاربران خود پیشنهاد می‌دهد. حتی در صورت مواجه شدن با مشکل Prop Drilling می‌توانید استفاده از پیکربندی کامپوننت‌ها یا Context API React را مد نظر داشته باشید. طبق اطلاعات ذکر شده در مستندات این فریمورک، پیکربندی کامپوننت‌ها راهکار آسان‌تری نسبت به Context است. اگر تمام گزینه‌های گفته شده نتوانست جوابگوی مشکلات پیچیده‌ی شما باشد، می‌توانید از کتابخانه‌های مدیریت State استفاده کنید. Redux یکی از کتابخانه‌های معروف در این زمینه به شمار می‌آید.

Formatter و Linter: ما برای انجام این کار می‌توانیم از ابزارهای Prettier و ESLint استفاده کنیم. معمولاً توسعه‌دهندگان این دو ابزار را در کنار هم نیز استفاده می‌کنند اما گاهی اوقات می‌تواند مسبب یک سری مشکلات شود. به منظور جلوگیری کردن از بروز هرگونه اتفاقات غیرمنتظره‌ای، باید ابتدا نحوه‌ی کار کردن با Prettier و Linterها را در یک پروژه بررسی کرد.

تست کردن

• تست یونیت: این فریمورک استفاده از Jest را به کاربران پیشنهاد می‌کند. شما به عنوان ابزار کمکی می‌توانید از React Testing Library هم استفاده کنید.
• تست End-to-End: برای انجام دادن این تست‌ها می‌توانید از فریمورک Cypress یا کتابخانه‌ی Puppeteer استفاده کنید.

کامپایلر: مرورگرها نمی‌توانند JSX را درک کنند، به همین خاطر ما برای تبدیل کردن سینتکس JSX به ECMAScript از Babel استفاده خواهیم کرد. اطلاعات در مرورگرهای قدیمی به صورت ECMAScript2015 و در مرورگرهای مدرن به صورت ECMAScript تبدیل خواهد شد.

Bundler: Webpack یک باندلر بوده که به صورت آماده در ابزارهای Gatsby، Next.js و Create React App به کاربران داده خواهد شد. 

ابزارهای توسعه‌دهندگان: فریمورک React برای بررسی و اشکال‌زدایی اپلیکیشن‌های خود، ابزار React DevTools را در اختیار کاربران قرار می‌دهد. این قابلیت به صورت افزونه در مرورگرهای کروم و فایرفاکس موجود است. واقعاً نصب کردن این افزونه را به شما پیشنهاد می‌کنم.

موضوعات پیشرفته: موارد گفته شده در پایین، جزو موضوعات پیشرفته‌ای است که در مستندات رسمی React ذکر شده است.

موبایل: کاربران با کمک React Native می‌توانند اپلیکیشن‌های React را برای سیستم عامل‌های اندروید و iOS خلق کنند.

SSR: Next.js فریمورکی برای ساخت یک وبسایتِ رندرینگ سمت سرور است.

SSG: Gatsby فریمورکی برای ساخت وبسایت های استاتیک و محتوا محور است.

دانش پیشرفته

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

تکنیک‌ها

• بارگذاری تنبل: این تکنیک بارگذاری منابع غیرضروری را هنگام بارگذاری شدن صفحه‌ی وب به تعویق می‌اندازد. شما می‌توانید این تکنیک را روی تصاویر، فونت‌ها و حتی کدهای جاوااسکریپت (مثل ماژول Angular) اعمال کنید.
• میکرو فرانت‌اند: یک سبک معماری است که در آن اپلیکیشن‌های آماده و مستقل، در کنار یکدیگر قرار گرفته و یک پروژه کامل را تشکیل می‌‌دهند. شما می‌توانید با روش‌های مختلفی این معماری را پیاده‌سازی کنید.
• چک‌لیست‌های عملکرد: این موضوع در مورد مجموعه‌ای از تکنیک‌ها و ابزارهایی است که برای بهبود عملکرد وب و بهینه‌سازی تجربیات کاربر انجام داده می‌شود. من واقعاً استفاده از این چک‌لیست را به شما پیشنهاد می‌کنم چون با کمک آن می‌توانید کارهای خود را خیلی بهتر پیش ببرید.
• اپلیکیشن‌های وب پیش‌رونده: ما داریم در مورد آوردن قابلیت‌های برنامه‌های بومی به اپلیکیشن‌های وب صحبت می‌کنیم. برای انجام این کار نیز از APIهای وب مدرن، Monifest اپلیکیشن و غیره استفاده خواهیم کرد.

کامپوننت‌های وب: روشی است که در آن با کپسوله‌سازی HTML، CSS و جاوااسکریپت می‌توانیم ویجت‌هایی language-agostic و چندبار مصرف را ایجاد کنیم. با این کار به تگ‌های سفارشی HTML دست پیدا خواهیم کرد؛ تگ‌هایی که می‌توان در هر کجا از آن‌ها استفاده کرد.

ابزارهای نظارت بر عملکرد و کیفیت وب: Lighthouse ابزاری است که ما به صورت دوره‌ای از آن استفاده می‌کنیم تا عملکرد، قابلیت دسترسی، سئو و سایر مسائل مربوط به اپلیکیشن را مورد بررسی قرار دهیم. PageSpeed Insight یکی دیگر از این ابزارهاست اما تنها روی سرعت صفحه تمرکز دارد.

ژنراتور اپلیکیشن: تیم ما به توسعه‌دهندگان یک استارتر کیت را ارائه می‌دهد که به کمک آن می‌توانند ساخت اپلیکیشن‌های خود را آغاز کنند. نتیجه‌ی کار آن‌ها نیز ساخت اپلیکیشن‌های Angular با چندین قابلیت اضافی خواهد بود.

تجزیه و تحلیل: توسعه‌دهندگان معمولا از دو سرویس Azure Application Insights و Google Analytics برای آنالیز کردن استفاده می‌کنند. سرویس Google Analytics در درجه اول روی درک کردن کاربران تمرکز می‌کند اما Azure Application Insights بیشتر روی نظارت داشتن بر اپلیکیشن، شناسایی اشکالات و پی بردن به فعالیت‌های کاربران در اپلیکیشن دقت دارد. شما می‌توانید با در نظر داشتن نیازهای خود، یکی از این دو سرویس فوق‌العاده را انتخاب کنید.

GraphQL: در شرکت ما علاقه‌ی چندانی به این ابزار دیده نشد اما به نظرم داشتن ابزارهای بیشتر در جعبه‌ابزار می‌تواند یک عملکرد مطمئن باشد.

نتیجه‌گیری

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

منبع