۱۰ ابزار و کتابخانه مطرح مرتبط با فریم‌ورک Vue.js

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

اگر به آگهی‌های استخدامی در ایران یا سایر کشورها نگاه کنید، مشاهده می‌کنید که Vue در بیشتر آگهی‌های مرتبط با توسعه وب قید شده است. چرا Vue.js به چنین سطح از موفقیتی دست پیدا کرد؟ یادگیری راحت، ساختار عملکردی شفاف و مستندات عالی باعث شده‌اند افراد تازه‌وارد به دنیای وب فریم‌ورک فوق را انتخاب کرده و توسعه‌دهندگان با تجربه‌تر نیز به تدریج فریمورک فوق را جایگزین React یا Angular کنند. در این مقاله با ده نمونه از معروف‌ترین ابزارها و کتابخانه‌هایی که در پروژه‌های Vue.js استفاده می‌شوند آشنا خواهید شد.

رابط خط فرمان (CLI)

به نظر می‌رسد این روزها داشتن نوعی ابزار رابط خط فرمان (CLI) برای فریم‌ورک‌های اپلیکیشن جاوااسکریپت ضروری است. Vue نیز از این قائده مستثنا نیست. (/Vue CLI (https://cli.vuejs.org یک مجموعه ابزار کامل برای توسعه سریع Vue است. علاوه بر فریم‌ورک معمول ساخت یک پروژه، این ابزار اجازه می‌دهد تا ایده‌های تازه خود را با استفاده از قابلیت نمونه‌سازی فوری حتا بدون ساخت یک پروژه کامل به اجرا بگذارید. به‌طور پیش‌فرض، Vue CLI پشتیبانی از ابزارهای توسعه وب و فناوری‌هایی نظیر Babel، TypeScript، ESLint، PostCSS، PWA، Jest، Mocha، Cypress و Nightwatch را امکان‌پذیر می‌کند. چنین امکاناتی به پشتوانه سیستم پلاگین گسترش‌پذیر این ابزار میسر شده است. توسعه‌‌دهندگان می‌توانند پلاگین‌های قابل استفاده مجدد را ایجاد کرده و با سایرین به‌اشتراک بگذارند. یکی دیگر از ویژگی‌های برجسته این ابزار رابط کاربری گرافیکی (GUI) قدرتمند آن است که اجازه می‌دهد پروژه خود را به راحتی ایجاد کرده و بدون نیاز به کار اضافه آن‌را پیکربندی و مدیریت کنید.

ویوپرس (VuePress)

بازیگر مطرح بعدی در اکوسیستم Vue ابزار ایجاد سایت ایستا (https://v1.vuepress.vuejs.org) یا همان VuePress است که در ابتدا به‌عنوان یک ابزار برای نوشتن مستندات فنی ساخته شد. اکنون ابزار فوق به یک سامانه مدیریت محتوا (CMS) کوچک و قدرتمند تبدیل شده است. از نسخه ۱.x امکاناتی برای ساخت وبلاگ و یک سیستم پلاگین قدرتمند به آن اضافه شده است. این CMS یک قالب پیش‌فرض (متناسب با مستندات فنی) دارد، اما می‌توانید قالب‌های سفارشی خود را ایجاد کنید یا گزینه‌های ساخته شده توسط دیگران را استفاده کنید. در VuePress محتوا را در قالب Markdown می‌نویسید که بعدا به فایل‌های ایستا HTML تغییر شکل می‌دهد. بعد از این‌که فایل‌ها بارگیری شدند، سایت به عنوان یک برنامه تک صفحه‌ای نیرو گرفته از Vue، Vue Router و Webpack اجرا می‌شود. یکی از مزایای اصلی VuePress این است که می‌توانید کدهای Vue را به فایل‌های Markdown ضمیمه تا سایت را شبیه به یک برنامه عادیVue طراحی کرده و از تمام مزایای موجود استفاده کنید.

گریدسام (Gridsome)

گریدسام (https://gridsome.org) شباهت زیادی به VuePress دارد، اما در زمان کار با منابع داده‌ای عملکرد بهتری دارد. این ابزار اجازه می‌دهد انواع مختلفی از داده‌ها را به یک برنامه متصل کرده و از آن‌ها به عنوان یک لایهGraphQL واحد استفاده کنید. در حالت کلی Gridsome از Vue در ارتباط با فرانت‌اند و از GraphQL برای مدیریت داده استفاده می‌کند. عملکرد این ابزار را می‌توان در سه مرحله خلاصه کرد:

محتوا را با فرمت داده Markdown، JSON، YAML یا CVS فراهم می‌کنید یا آن‌را از یک سامانه مدیریت محتوا مثل وردپرس یا دروپال وارد می‌کنید.
این محتوا به لایه GraphQL تبدیل می‌شود که امکان مدیریت متمرکز داده را فراهم می‌کند. سپس از این داده‌ها برای ساخت اپلیکیشن خود با Vue استفاده می‌کنید.
فایل‌های HTML از پیش رندر شده را به میزبان وب ایستا یا شبکه‌های تحویل محتوا شبیه به Netlify، Amazon S3، Now.sh، Surge.sh و غیره منتقل می‌کنید.
قابلیت‌ها و امکانات جالب توجه دیگری همچون تقسیم کد، بهینه‌سازی اجزای تشکیل‌دهنده و پیش‌نمایش لینک توسط Gridsome ارائه شده که به خوبی استانداردهای بهینه‌سازی موتورهای جستجو (SEO) را رعایت می‌کند.

ویواکس (Vuex)

مدیریت وضعیت یک یا چند کنترل رابط کاربری یکی از عمده‌ترین مشکلاتی است که توسعه‌دهندگان در ساخت اپلیکیشن‌های وب با آن مواجه هستند. برای برطرف کردن این مشکل Vue یک سیستم مدیریت وضعیت به‌نام (/Vuex (https://vuex.vuejs.org دارد که به عنوان یک محل ذخیره‌سازی برای تمام اجزای یک برنامه استفاده می‌شود. یک store نوعی شی ویژه است که به چهار بخش تقسیم می‌شود:

شی State – یک شی که داده‌های اپلیکیشن را ذخیره می‌کند.
شی Getters – یک شی شامل متدهای استفاده شده برای دسترسی به state
شی Mutations – یک شی شامل متدهایی که مستقیما روی state تاثیر می‌گذارند
شی Actions – یک شی شامل متدهای استفاده شده برای فعال کردن تغییرات و اجرای کد غیر همزمان
برای استفاده ساده‌تر از این store می‌توان آن‌را به چند ماژول تقسیم‌بندی و با توجه به نیاز پروژه یکی از آن‌ها را انتخاب کرد.

برای استفاده ساده‌تر از این store می‌توان آن‌را به چند ماژول تقسیم‌بندی و با توجه به نیاز پروژه یکی از آن‌ها را انتخاب کرد.

ناکس Nuxt

وقتی درباره استفاده از رندرینگ سمت سرور (SSR) صحبت می‌کنیم، (/Nuxt (https://nuxtjs.org یک ابزار مفید و کاربردی است. یک فریم‌ورک ساده و سر راست که برای ساخت برنامه‌های عمومی‌ استفاده می‌شود. Nuxt ماژولار هست، بنابراین می‌توانید تنها ماژول‌هایی که برای برنامه خود نیاز دارید را استفاده کنید. با Nuxt می‌توانید برنامه‌های سمت سرور، برنامه‌های تک صفحه‌ای (SPA) و برنامه‌های وب پیش‌رونده (PWA) را تولید کنید یا تنها از Nuxt برای ساخت یک سایت ایستا استفاده کنید. به‌طور خلاصه، Nuxt شما را از کار خسته کننده در ساخت و بهینه‌سازی برنامه‌ها نجات می‌دهد و یک تجربه توسعه ساده و لذت‌بخش ارائه می‌کند.

ویوتیفای (Vuetify)

ویوتیفای (https://vuetifyjs.com/en) یکی از بهترین کتابخانه‌های رابط کاربری است که مجموعه بزرگی از مولفه‌های از پیش ساخته شده (بیشتر از ۸۰ عدد) مبتنی بر طراحی Material Design را ارائه می‌کند و می‌تواند تقریبا نیاز هر نوع اپلیکیشنی را برآورده کند. شما می‌توانید از این کتابخانه برای ساخت اپلیکیشن‌های سمت سرور، اپلیکیشن‌های تک صفحه‌ای (SPA)، اپلیکیشن وب‌پیش‌رونده (PWA) و اپلیکیشن‌های موبایل استفاده کنید. قالب‌های همراه این کتابخانه به صورت رایگان و حرفه‌ای و غیر رایگان ارائه می‌شوند، هر چند می‌توانید قالب‌های اختصاصی خود را ایجاد کنید.
Vuetify همچنین از یک سیستم انتخاب و استفاده از مولفه‌های خاص برخوردار است که حجم نهایی یک برنامه را به میزان قابل ملاحظه‌ای کاهش می‌دهد.

کواسار (Quasar)

کواسار(https://quasar.dev) نسخه‌ای از جاوا اسکریپت با فلسفه یکبار بنویس، همه جا اجرا کن است. یک فریم‌ورک عمومی‌ و نیرو گرفته از Vue که اجازه می‌دهد اپلیکیشن‌های خود را برای پلتفرم‌های مختلف با یک کد مبنا ایجاد کنید. این فریم‌ورک امکان ساخت اپلیکیشن‌های سمت سرور، اپلیکیشن‌های تک صفحه‌ای (SPA)، اپلیکیشن وب پیش‌رونده (PWA) و اپلیکیشن‌های موبایل و حتا اپلیکیشن‌های چند پلتفرمی‌ دسکتاپ را نیز فراهم می‌کند.
مستندات و راهنمای کار با Quasar جامع و کامل است و مجموعه عظیمی‌ از مولفه‌های مفید و کاربردی همراه این فریم‌ورک عرضه می‌شود. همچنین یک ابزار CLI برای کمک به ساخت بی دردسر پروژه‌های جدید همراه این فریم‌ورک است.

استوری بوک (StoryBook)

استوری بوک (https://storybook.js.org) به شما اجازه می‌دهد تا مولفه‌های رابط کاربری را در یک محیط ساده و راحت توسعه داده، مدیریت کرده یا آزمایش کنید.
Storybook توسعه‌دهندگان را قادر می‌سازد تا مولفه‌های مختلف را مستقل از اپلیکیشن اصلی ایجاد کرده و بدون نگرانی در مورد وابستگی‌ها و الزامات خاص یک اپلیکیشن آن‌ها را به صورت تعاملی در یک محیط توسعه مجزا به نمایش بگذارند. Storybook تعداد زیادی افزونه به علاوه یک API انعطاف‌پذیر برای سفارشی‌سازی محیط ارائه می‌کند. شما می‌توانید از پروژه خود به صورت یک اپلیکیشن وب ایستا خروجی گرفته و آن‌را روی هر نوع سرور HTTP مستقر کنید.

ویو آپولو (Vue Apollo)

اخیرا سرو صدای زیادی پیرامون GraphQL به راه افتاده است. این فناوری از یک زبان Schema برای سرور و یک Query Language برای کلاینت تشکیل شده و تعامل بین فرانت‌اند و بک‌اند را ساده می‌کند. بنابراین اگر از قبل با آن آشنا هستید و می‌خواهید آن‌را با Vue یکپارچه کنید، بهتر است نگاهی به Vue Apollo https://vue-apollo.netlify.com بیاندازید. این کتابخانه استفاده همزمان از Vue و GraphQL/Apollo را سریع و آسان می‌کند.

ایگل جی اس (Eagle.js)

ایگل جی اس (https://github.com/zulko/eagle.js) یک ابزار قدرتمند، انعطاف‌پذیر و منحصر به فرد است که توسط Vue ساخته شده است. این ابزار اجازه می‌دهد مولفه‌های رابط کاربری، اسلایدها و عناصر مورد نیاز برای ارائه پروژه‌های خود را آماده‌ کرده و به دفعات از آن استفاده کنید. Eagle همچنین از انیمیشن‌ها، قالب‌‌ها و ابزارک‌های تعاملی پشتیبانی می‌کند که برای ساخت نسخه‌های نمایشی وب عالی هستند. این سیستم یک API ساده و قابل ویرایش دارد که آزادی عمل کامل برای ساخت اسلایدشوها را ارائه می‌کند.
یکی از بزرگ‌ترین کارهایی که با این کتابخانه می‌توانید انجام دهید قرار دادن یک اسلاید در یک فایل جداگانه و استفاده مجدد از آن در سایر اسلایدشوها است.

منبع: https://bit.ly/2PNa9Sb

ترندهای برنامه نویسی در سال ۲۰۲۰

اندرک لاسن، بتر پروگرمینگ — باورش سخت است، اما کم‌کم داریم به سال ۲۰۲۰ می‌رسیم. آدم فکر می‌کند سال ۲۰۲۰ از درون یک داستان علمی‌تخیلی درآمده است؛ داستانی که در آن ماشین‌ها پرواز می‌کنند و ربات‌های هوشمند ما را با موشک‌های شخصی‌ برای هواخوری به مریخ می‌برند. بنظر می‌رسد سال ۲۰۲۰ واقعی ما اینقدرها هم پیشرفته نیست، اما من معتقدم که قطعاً چیزهای هیجان‌انگیزی برای ما در چنته خواهد داشت‌! امروز می‌خواهم برایتان بگویم که به نظر من این سال و سال‌های بعد از آن چه دستاوردهایی برای جهان برنامه نویسی خواهند داشت و چه ترندهایی را برایمان به همراه خواهد آورد.

قطعاً من پیشگو نیستم؛ شاید سال ۲۰۲۱ برگردیم و به این مطلب حسابی بخندیم! اما می‌توانم بر اساس تجربه‌‌، حدس‌هایی در مورد آینده بزنم. بنابراین، این شما و این پیش‌بینی‌های من در مورد ترندهای سال ۲۰۲۰ در دنیای برنامه‌نویسی.

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

ترند ۱. راست (Rust) همه‌گیر خواهد شد

راست (Rust) زبان برنامه‌نویسی‌ای با سیستم چند پارادایمی است که روی امنیت تمرکز دارد؛ به ویژه امنیت در هم‌روندی (Concurrency). به لحاظ سینتکس می‌توان گفت که Rust شبیه به ++C است، ولی طوری طراحی شده که امنیت حافظه بیشتری داشته باشد و در عین حال بازدهی بالای خود را حفظ کند.

در چهار سال گذشته شاهد رشد سریع و پوسته‌ای در Rust بوده‌ایم و من باور دارم که در سال ۲۰۲۰، Rust دیگر به شکل رسمی به یکی از مهره‌های اصلی میدان تبدیل خواهد شد. البته این که «مهره اصلی» چه معنایی دارد به تفسیر خود افراد بستگی دارد، اما من فکر می‌کنم که از ۲۰۲۰ دانشگاه‌ها زبان راست را وارد برنامه‌های درسی‌شان می‌کنند و موج جدیدی از مهندسان متخصص Rust وارد بازار کار خواهند شد.

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

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

ترند ۲. محبوبیت GraphQL از حالا هم بیشتر می‌شود.

هرچه برنامه‌های ما پیچیده‌تر می‌شوند، استفاده از داده هم شکل پیچیده‌تری پیدا می‌کند. من از طرفداران سرسخت GraphQL هستم و بار‌ها از آن استفاده کرده‌ام. به نظر من در مقایسه با راهکارهای قدیمی مثل APIهای REST، گرف‌کیواِل راه بسیار مناسب‌تری برای گرفتن داده (Fetch) است. در حالی که ‌APIهای REST لازم است داده را از چند URL بگیرند، APIهای گرف‌کیواِل میتوانند کل داده مورد نیاز برنامه شما را فقط با یک درخواست بگیرند.

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

ترند ۳. وب اپلیکیشن‌های پیش‌رونده (یا PWAها) را دست کم نگیرید

وب اپلیکیشن‌های پیش‌رونده (Progressive Web Apps) رویکرد جدیدی برای ساخت برنامه‌ها هستند که بهترین مزایای وب را با برترین ویژگی‌های برنامه‌های موبایلی ترکیب می‌کنند. تعداد توسعه‌دهندگان وب در دنیا خیلی بیشتر از توسعه دهندگان پلتفرم‌های خاص است. به گمان من، زمانی که شرکت‌های بزرگ متوجه بشوند که می‌توانند از توسعه‌دهندگان وب خود برای ساخت برنامه‌های پیشرفته تحت وب استفاده کنند، موجی عظیم از PWA‌ها را خواهیم دید.

البته برای شرکت‌های بزرگ‌تر مدتی زمان خواهد برد تا خودشان را با این شرایط جدید وفق بدهند؛ اما این در دنیای فناوری کاملاً طبیعی است. بخش پیش‌رونده (Progressive) عموماً مرتبط با توسعه سمت فرانت (Front-end) است؛ چرا که بیشتر با تبادل با APIهای مختص مرورگر (Web Workers API) سر و کار دارد.

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

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

ترند ۴. وب‌اسمبلی (Web Assembly) مطرح‌تر خواهد شد

وب‌اسمبلی (Wasm به طور خلاصه) یک فرمت دستوری دودویی‌ برای یک ماشین مجازی بر پایه پشته (Stack-oriented) است. وب‌اسمبلی طوری طراحی شده که راهکاری Portable برای کامپایل کردن زبان‌های سطح بالا مانند C و ++C و Rust باشد. وب‌اسمبلی امکان Deploy کردن روی وب را هم برای برنامه‌های کلاینت و سرور فراهم می‌کند. PWAها هم می‌توانند از وب‌اسمبلی استفاده کنند.

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

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

ترند ۵. ری‌اکت (React) به فرمانروایی خود ادامه خواهد داد.

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

من با ویو (Vue)، انگولار (Angular)، و ری‌اکت (React) کار کرده‌ام و به نظرم همه آنها فریم‌ورک‌هایی عالی‌ هستند. به خاطر داشته باشید که هدف یک کتابخانه این است که بتوان کار‌ها را با آن به اتمام رساند؛ بنابراین جزئیات را رها کنید و تمرکزتان را روی انجام دادن کارها بگذارید. بحث درباره این که کدام فریم‌ورک «بهترین» است، کاملاً بی‌فایده است. پس یکی را انتخاب کنید و انرژی‌تان را روی ساختن برنامه بگذارید.

ترند ۶. همیشه روی جاوا اسکریپت شرط ببندید

با اطمینان می‌توانیم بگوییم که دهه‌ی فعلی، دهه‌ی جاوا اسکریپت بوده است. جاوا اسکریپت همچون گدازه‌های یک آتشفشان در حال فوران کردن است، دارد همه جا را در بر می‌گیرد و به نظر قرار هم نیست که از حرکت بایستد. بعضی‌ها توسعه‌دهندگان جاوا اسکریپت را «توسعه‌دهند‌های قلابی» می‌نامند و آنها را تحویل نمی‌گیرند؛ اما جاوا اسکریپت قلب تپنده همه شرکت‌های بزرگ فناوری مثل گوگل، فیس‌بوک، نت‌فلیکس و خیلی شرکت‌های دیگر است. بنابراین جاوا اسکریپت همانقدر مهم است که همه زبان‌های برنامه‌نویسی دیگر. به توسعه‌دهنده جاوا اسکریپت بودن خودتان افتخار کنید؛ هرچه که باشد، برخی از جالب‌ترین و خلاقانه‌ترین چیز‌ها را جامعه جاوا اسکریپت ساخته‌اند! تقریباً همه وبسایت‌ها تا حدی از قدرت جاوا اسکریپت بهره می‌برند. چند تا وبسایت در دنیا داریم؟ بله، میلیون‌ها!

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

پروژه جذابی بوده که جا افتاده باشد؟ در کامنت‌ها نظرتان را با ما به اشتراک بگذارید.

ترجمه بر اساس:

“۲۰۲۰ Programming Trend Predictions” by Indrek Lasn @ Better Programming

منبع: https://bit.ly/31ySvUC

نقشه راه تبدیل شدن به یک برنامه نویس فرانت اند مدرن

گام اول: کار آماده است!

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

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

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

– یک صفحه وب ایجاد کنید که از GitHub Repositories API برای مشخص کردن ۱۰ ریسورس برتر هفته استفاده کند.

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

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

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

گام دوم: CSS را به شکل بهتری بنویسید!

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

اقداماتی که می‌توانید انجام دهید:

– یادگیری بوت استرپ را به پروژه‌هایی که باید می‌آموختید اضافه کنید.

– پروژه‌هایی که در مرحله اول ساخته‌اید را با استفاده از این ابزارها دوباره نویسی کنید و پروژه‌هایی با کیفیت تر را تولید کنید.

– بهتر است CSS را درون SASS بنویسید.

گام سوم: بخش‌های سخت کار

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

اقداماتی که می‌توانید انجام دهید:

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

یک اپلیکیشن لیست فعالیت‌های روزانه بنویسید که از SASS برای CSS استفاده کند. استایل‌های بوت استرپ را به آن اضافه کنید. از BEM استفاده کنید. زبان برنامه نویسی جاوا اسکریپت را با استفاده از babel بارگذاری کنید و آن را با وب پک بسازید. صفحات بهینه سازی شده را ایجاد کنید و از آن در صفحه شخصی خود در گیت هاب استفاده کنید. تمامی این کارها برای تبدیل شدن به یک برنامه نویس فرانت اند مدرن مورد نیاز می‌باشد.

گام چهارم: اپلیکیشن‌های مدرن فرانت اند

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

اول از همه شروع به یادگیری React کنید، سپس نگاهی به Redux بیندازید و بعد از آن نیز استفاده کردن از CSS در جاوا اسکریپت را بیاموزید که البته این مورد خیلی نیاز نیست، اما اگر بخواهید حرفه ای شوید حتما باید نگاهی به styled components در CSS داشته باشید.

هنگامی که شما React را به خوبی آموختید باز هم پیش بروید و درباره اپلیکیشن‌های پیشرفته‌ای که وجود دارند مطالعه کنید، اکنون که فریم‌ورک‌های فرانت اند را به خوبی می‌شناسید در این مسیر نباید برای شما مشکلی پیش بیاید. نگاهی به چک لیست PWA بیندازید، درباره سرویس‌های مختلف مطالعه کنید، عملکرد وب سایت خود را مورد بررسی قرار دهید و آن را اندازه گیری کنید، به API‌های مختلف مرورگرها نگاهی بیندازید و سعی کنید که از مزایای استفاده از آن ها نهایت بهره را ببرید. به عنوان مثال شما می‌توانید درباره نحوه ذخیره سازی در آن ها و … و همینطور مدل‌های RAIL و الگوی PRPL مطالعه کنید.

اقداماتی که می‌توانید انجام دهید:

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

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

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

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

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

یاد گرفتن نوشتن تست‌های خودکار یکی دیگر از مراحل مهمی است که برای تبدیل شدن به یک برنامه نویس فرانت اند به آن نیاز دارید. این موضوع باعث می‌شود تا در آینده از بسیاری از دردسرهایی که برای یک برنامه نویس فرانت اند وجود دارد رها شده و موقعیت شغلی بهتری را برای خود پیدا کنید. بهترین کاری که می‌توانید انجام دهید این است که رو به جلو حرکت کنید و تمامی انواع مختلف تست‌هایی که برای یک برنامه نویس فرانت اند نیاز دارد را یاد بگیرید و با مفاهیم اولیه و پیشرفته آن نیز به خوبی آشنا شوید و بتوانید برای اپلیکیشن‌های خود تست بنویسید. بعد از آن باز هم جلوتر بروید و با jest، Enzyme و Cypress بیشتر آشنا شوید و همچنین یاد بگیرید که test coverage را به خوبی محاسبه کنید تا آینده‌ی خوبی به عنوان یک برنامه نویس فرانت اند مدرن داشته باشید.

اقداماتی که می‌توانید انجام دهید:

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

گام ششم: استفاده از بررسی کننده نوع داده استاتیک

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

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

گام هفتم: رندر کردن سمت سرور

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

اقداماتی که می‌توانید انجام دهید:

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

گام هشتم: فراتر بروید!

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

نقشه‌ی راه کامل

ترجمه‌ای از:

Learn to become a modern Frontend Developer in 2019. Medium

منبع: https://bit.ly/2ARrDnR

Create A product first!

Create a product first please!