۱۰ چیزی که توسعه دهندگان فرانت اند باید در سال ۲۰۲۰ یاد بگیرند

مقدمه

شکی نیست که توسعه‌ی فرانت اند یکی از داغ‌ترین رشته‌های فناوری در سال ۲۰۲۰ خواهد بود. قبلا برای توسعه دهندگان فرانت اند کافی بود تا HTML، CSS و شاید jQuery را برای ایجاد وب‌سایت‌های تعاملی بشناسند، اما امروزه آن‌ها با یک اکوسیستم گسترده و متغیر که شامل ابزارها، کتابخانه‌ها و فریمورک‌ها می‌شود، مواجه هستند و می‌توانند مهارت‌های خود را تغییر دهند.

چند سال گذشته، کتابخانه‌ها و فریمورک‌های جدید بسیار خوبی مانند ReactJS، VueJS و Svelte را با استفاده از جاوا اسکریپت که برای تامین برنامه‌های اصلی وب است را برای ما به ارمغان آورد.

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

۱. Frameworks (فریمورک‌ها)

احتمالا در سال ۲۰۲۰، یک دوئل بین ReactJS فیس‌بوک و VueJS جامعه محور مشاهده خواهیم کرد. در حال حاضر React حدود ۱۴۰ هزار ستاره و Vue بیش از ۱۵۳ هزار ستاره در گیت‌هاب دارد. برای مثال، Angular فقط ۵۳ هزار ستاره دارد.

میزان جستجو در سال ۲۰۱۹ را برای React (خط آبی)، برای Vue (خط قرمز)، برای Angular (خط زرد) و برای Svelte (خط سبز) نشان داده‌ایم که از این فرضیه پشتیبانی می‌کند: میزان جستجوی Vue کمی بیشتر از React است. Angular نمی‌تواند از نظر میزان جستجو با آن‌ها برابری کند و Svelte هم در این مقایسه کاملا بدون نقش است.

بنابراین برای سال ۲۰۲۰، توسعه دهندگان فرانت اند که با فریمورک‌های جاوااسکریپت کار می‌کنند یا می‌خواهند که با ﺁن‌ها کار کنند باید بر روی React و Vue بعنوان گزینه‌های اصلی تمرکز کنند. اگر بر روی پروژه‌های بزرگ تجاری کار می‌کنید، Angular گزینه‌ی مناسبی است.

اگر می‌خواهید در مورد این فریمورک‌ها بیشتر بدانید، این منابع عالی را بررسی کنید:

- ReactJS

- VueJS

۲. Static Site Generators

ژنراتورهای سایت استاتیک هم قدرت رندر سمت سرور ( برای سئو بسیار مهم است،البته در اولین بارگذاری) و هم برنامه‌های تک صفحه‌ای را ترکیب می‌کنند. این روزها بسیاری از پروژه‌ها SSG را انتخاب می‌کنند حتی اگر نیازی به رندر سمت سرور ندارند، زیرا راه‌حل‌هایی مانند Next یا Nuxt دارای ویژگی‌های مفیدی مانند پشتیبانی از markdown، ماژول باندلر، آزمون یکپارچگی و غیره هستند.

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

- Next (بر پایه‌ی React)

- Nuxt (بر پایه‌ی Vue)

- Gatsby (بر پایه‌ی React)

- Gridsome (بر پایه‌ی Vue)

۳. JAMstack

اصلاح JAMstack مخفف JavaScript، API و Markup است. این یک روش برای ساختن وبسایت‌ها و برنامه‌ها برای عملکرد بهتر از قبیل: کاهش هزینه‌ها، فراهم کردن امنیت بالاتر و ارائه‌ی تجربه‌ای بهتر برای توسعه دهنده است. در حالی که این اصطلاحات به خودی خود چیز جدیدی نیستند، ولی همه‌ی ﺁن‌ها یک چیز مشترک دارند: ﺁن‌ها به سرور وب وابسته نیستند.

بنابراین یک برنامه‌ی یکپارچه که متکی به بک-اند Ruby و Node.js باشد یا سایتی که با یک CMS در سمت سروری مانند Drupal و WordPress ایجاد شده باشد، با JAMstack ساخته نشده است.

اگر می‌خواهید با JAMstack کار کنید، بهترین راهکارها در ادامه‌ی این مقاله ذکر شده است:

کل پروژه در یک CDN ارائه شده است

چون نیازی به سرور نیست، کل پروژه می‌تواند با آزاد کردن سرعت و عملکرد غیر قابل شکست از یک CDN اجرا شود.

همه چیز در Git قرار دارد

هر کسی باید قادر باشد که کل پروژه را از یک Git repo بدون نیاز به یک پایگاه داده یا یک تنظیم پیچیده شبیه‌سازی کند.

ساخت خودکار

شما می‌توانید به صورت خودکار Markupهای از قبل ساخته شده را ایجاد کنید. به عنوان مثال: (وب‌هوک‌ها و سرویس‌های ابری)

Atomic Deploy

به منظور اجتناب از حالت‌های متناقض با استفاده مجدد از صدها یا هزاران فایل در پروژه‌های بزرگ، Atomic Deploy منتظر آپلود شدن همه‌ی فایل‌ها قبل از شروع تغییرات است.

ناپایداری Cache

هنگامی که یک سایت شروع به کار می‌کند، باید اطمینان حاصل کنید که CDN شما قادر به پاکسازی سریع Cache برای تغییرات است.

میزبانان شناخته شده مانند Netlify یا Zeit از برنامه‌های JAMstack پشتیبانی می‌کنند و شرکت‌های بزرگ از آن‌ها برای ارائه‌ی تجربیات عالی به کاربران خود استفاده می‌کنند.

این قطعا همان چیزی است که شما می‌خواهید ذهنتان را به عنوان یک توسعه دهنده‌ی فرانت اند در سال ۲۰۲۰ مشغول کنید. اگر می‌خواهید در مورد JAMstacks بیشتر بدانید، در ادامه منابع بسیار خوبی ارائه شده است:

- JAMstack

- JAMstack WTF

- در JAMstack مبتدی هستید؟ هر چیزی که برای شروع کار باید بدانید در اینجا قرار دارد.

۴. (PWA (Progressive Web App

برنامه‌های پیشرفته وب (PWA) قطعا در سال ۲۰۲۰ یک مسئله‌ی مهم خواهند بود. تعداد بیشتری از شرکت‌ها PWA را از طریق برنامه‌های بومی برای ارائه‌ی تجربیات غنی موبایل در اختیار کاربران خود قرار می‌دهند.

PWAها قابل اعتماد، سریع و جذاب هستند که به ترتیب دارای ویژگی‌هایی از قبیل: بارگذاری سریع، کار کردن بدون اتصال به اینترنت، پاسخ سریع به واکنش کاربر و تجربه‌ی کاربری عالی هستند.

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

برای مثال، دلایلی که برای ساختن یک برنامه‌ی وب پیشرفته وجود دارد در ادامه ذکر شده است.

- از طریق مرورگر می‌تواند به صفحه اصلی کاربر اضافه شود

- بدون اتصال به اینترنت هم کار می‌کند

- از اعلان‌های وب برای مشارکت کاربر پیشرفته پشتیبانی می‌کند

- از ویژگی‌های Lighthouse گوگل استفاده می‌کند

۵. GraphQL

یکی از داغ‌ترین موضوعات حال حاضر و آن چیزی که شما در سال ۲۰۲۰ می‌توانید یاد بگیرید یا در آن پیشرفت کنید، GraphQL است.

در حالی که REST مدت‌هاست که با ارائه‌ی مفاهیم فوق‌العاده‌ای مانند سرورهای بدون تابعیت، استاندارد de facto را برای طراحی APIهای وب در نظر گرفته است، APIهای RESTful بیش از پیش انعطاف‌پذیر به نظر می‌رسند.

GraphQL توسط فیس‌بوک برای مقابله با مسائل دقیق توسعه دهندگان هنگام برخورد با APIهای Restful توسعه داده شده است.

با استفاده از APIهای REST، توسعه دهندگان داده‌ها را با گرفتن آن از چندین اِندپوینت که با یک هدف خاص ایجاد شده‌اند جمع‌آوری می‌کنند؛ برای مثال: اِندپوینت /user/<id> یا اِندپوینت /tours/<id>/location.

با استفاده از GraphQL، این کار متفاوت خواهد بود. توسعه دهندگان با data requirementها، یک query را به سرور GraphQL ارسال می‌کنند. سپس سرور یک آبجکت JSON را با تمام داده‌های مربوطه باز می‌گرداند.

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

۶. ویرایشگران کد/ IDEها

دقیقاً مانند سال ۲۰۱۹، VS Code مایکروسافت ویرایشگر شماره یک اکثر مهندسان فرانت اند در سال ۲۰۲۰ خواهد شد. این مجموعه ویژگی‌هایی تقریبا شبیه به IDE را مانند تکمیل کد و هایلایت کردن ارائه می‌دهد و می‌توان ﺁن را به طور نامحدود از طریق بازار گسترش داد. همچنین VS Code را بسیار جذاب می‌کند.

در ادامه چندین افزودنه‌ی عالی برای شما به عنوان یک توسعه دهنده‌ی فرانت اند ارائه شده است:

- (JavaScript (ES6

- npm

- Prettier

- CSS Peek

- Vetur

- ESLint

- Live Sass Compiler

- Debugger for Chrome

- Live Server

- Beautify

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

۷. Testing

اگرچه ممکن است در پروژه‌های شخصی خود تستی وجود نداشته باشد، اما انجام آن‌ها هنگام کار در محیط‌های تجاری و سازمانی اجباری است. پس برای هر توسعه دهنده بهتر است تا در هر زمان ممکن تست‌ها را در workflow توسعه ادغام کند.

Unit Tests

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

Integration Tests

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

End-To-End Tests

یک روش متداول برای آزمایش کردن است تا بفهمیم که آیا جریان یک برنامه همانطور که طراحی شده است از آغاز تا پایان اجرا می‌شود یا خیر!

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

۸. Clean Code (کد تمیز)

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

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

برخی از کارهایی که یک توسعه دهنده‌ی Clean Code باید انجام دهد این است:

۱. برای متغیرها، کلاس‌ها، روش‌ها و توابع نام‌های معنی‌دار انتخاب کنید.

۲. توابع باید کوچک و تا حد امکان استدلال کمتری داشته باشند.

۳. به هیچ‌وجه نیازی نیست که از کامنت‌ها استفاده کنید، کد باید به خودی خود صحبت کند.

اگر می‌خواهید در مورد کدنویسی تمیز اطلاعات بیشتری کسب کنید، کتاب‌ها و پست‌های Robert C.Martin را بررسی کنید.

۹. Git

بدون تردید، امروزه گیت استاندارد کنترل ورژن در توسعه‌ی وب محسوب می‌شود. برای هر مهندس فرانت اند بسیار مهم است که مفاهیم اساسی گیت و workflow را یاد بگیرد تا به طور موثر در تیم‌هایی با اندازه‌های مختلف کار کند.

در ادامه چند دستورالعمل محبوب گیت وجود دارد که باید بدانید:

- git config

- git init

- git clone

- git status

- git add

- git commit

- git push

- git pull

- git branch

اگرچه همیشه دانستن این دستورات برای افزایش بهره‌وری شما خوب است، اما مهندسان فرانت اند باید مفاهیم اساسی گیت را بیاموزند. در ادامه چند منبع برای شما قرار می‌گیرد:

- توضیح مفاهیم اساسی گیت و نحوه‌ی استفاده از گیت‌هاب

- نحوه‌ی استفاده و همکاری توسعه دهندگان از گیت‌هاب

- گیت‌هاب

۱۰. Soft Skills (مهارت‌های نرم)

این موضوع اغلب نادیده گرفته می‌شود، اما کسب مهارت‌های نرم برای توسعه دهندگان بسیار مهم است.

با این‌که به درک جنبه‌ی فنی مسائل کمک می‌کند، اما به همان اندازه مهم است که بدانیم چگونه در یک تیم ارتباط برقرار کنیم. اگر شما در مورد شغلی در تکنولوژی و یا برنامه‌ریزی برای رسیدن به مقام ارشد جدی هستید، باید بر روی مهارت‌های زیر متمرکز شوید:

- یک‌دلی

- آداب معاشرت

- همکاری تیمی

- در دسترس و مفید بودن

- صبور بودن

- باز اندیشی

- حل مساله

- مسئولیت پذیری

- خلاقیت

- مدیریت زمان

همیشه به خاطر داشته باشید: مهم‌ترین دستاورد یک توسعه دهنده‌ی ارشد، توسعه دهندگان ارشد بیشتر است.

نتیجه گیری

در این مقاله، من ۱۰ نکته‌ی مهم را به شما نشان دادم که توسعه دهندگان فرانت اند باید سعی کنند آن‌ها را در سال ۲۰۲۰ یاد بگیرند.

این یک لیست کامل نیست، اما امیدوارم که برای سال آینده الهام بخش باشد. انتخاب با شماست.

منبع