9 پروژه دیگر برای تقویت مهارت های مقدماتی شما

معرفی

چه در برنامه نویسی تازه کار باشید یا یک توسعه دهنده با تجربه، در این صنعت، یادگیری مفاهیم و زبان ها/چارچوب های جدید برای همگام شدن با روندها ضروری است.

به عنوان مثال React را در نظر بگیرید که تنها چهار سال پیش توسط فیس بوک منبع باز بود و در حال حاضر به انتخاب شماره یک توسعه دهندگان جاوا اسکریپت در سراسر جهان تبدیل شده است.

البته Vue و Angular نیز طرفداران قانونی خود را دارند. و سپس Svelte و سایر فریم ورک های هدف عمومی مانند Next.js یا Nuxt.js وجود دارد. و گتسبی، و گریدسوم، و کوازار... و خیلی چیزهای دیگر.

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

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

این مقاله با پشتیبانی نرم افزار EDISON ترجمه شده است که اتاق های اتصال مجازی را برای فروشگاه های چند برند ایجاد می کندو نرم افزار تست.

برنامه جستجوی فیلم با React (با قلاب)

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

چه چیزی یاد خواهید گرفت
با ساخت این اپلیکیشن، مهارت های React خود را با استفاده از Hooks API نسبتاً جدید بهبود خواهید داد. پروژه نمونه از کامپوننت‌های React، تعداد زیادی هوک، یک API خارجی و البته سبک CSS استفاده می‌کند.

پشته فنی و ویژگی ها

• با قلاب واکنش نشان دهید
• ایجاد-واکنش-برنامه
• Jsx
• CSS

بدون استفاده از هیچ کلاسی، این پروژه ها نقطه ورود عالی به React عملکردی را به شما می دهند و قطعا در سال 2020 به شما کمک خواهند کرد. میتونی پیدا کنی نمونه پروژه در اینجا. دستورالعمل ها را دنبال کنید یا آن را خودتان بسازید.

برنامه چت با Vue

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

چه چیزی یاد خواهید گرفت
در این آموزش، نحوه ایجاد یک برنامه Vue را از ابتدا یاد خواهید گرفت - ایجاد مؤلفه ها، مدیریت وضعیت ها، ایجاد مسیرها، اتصال به خدمات شخص ثالث، و حتی تأیید اعتبار.

پشته فنی و ویژگی ها

• VUE
• ووکس
• روتر Vue
• نمای CLI
• فروشنده
• CSS

این یک پروژه واقعاً عالی برای شروع با Vue یا بهبود مهارت‌های موجود برای ورود به توسعه در سال 2020 است. میتونی پیدا کنی آموزش در اینجا.

اپلیکیشن آب و هوای زیبا با Angular 8

این مثال به شما کمک می کند تا با استفاده از Angular 8 یک برنامه آب و هوای زیبا بسازید:

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

پشته فنی و ویژگی ها

• زاویه ای 8
• آتش نشانی
• رندر سمت سرور
• CSS با Grid و Flexbox
• سازگار با موبایل و سازگاری
• حالت تاریک
• رابط کاربری زیبا

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

برنامه To-Do با Svelte

Svelte مانند بچه جدید در رویکرد کامپوننت است - حداقل شبیه به React، Vue و Angular. و این یکی از داغ ترین محصولات جدید برای سال 2020 است.

برنامه های To-Do لزوماً داغ ترین موضوع نیستند، اما واقعاً به شما کمک می کنند تا مهارت های Svelte خود را تقویت کنید. شبیه این خواهد شد:

چه چیزی یاد خواهید گرفت
این آموزش به شما نشان می دهد که چگونه با استفاده از Svelte 3 یک برنامه را از ابتدا تا انتها ایجاد کنید. شما از کامپوننت ها، استایل و کنترل کننده رویداد استفاده خواهید کرد

پشته فنی و ویژگی ها

• Svelte 3
• اجزاء
• استایل دهی با CSS
• نحو ES6

پروژه های شروع کننده خوب Svelte زیاد وجود ندارد، بنابراین من پیدا کردم این محل خوبی برای شروع است.

برنامه تجارت الکترونیک با Next.js

Next.js محبوب ترین فریم ورک برای ساخت برنامه های React است که از رندر خارج از جعبه در سمت سرور پشتیبانی می کند.

این پروژه به شما نشان می دهد که چگونه یک برنامه تجارت الکترونیکی به شکل زیر ایجاد کنید:

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

پشته فنی و ویژگی ها

• Next.js
• اجزا و صفحات
• نمونه گیری داده ها
• یک ظاهر طراحی شده
• استقرار پروژه
• SSR و SPA

داشتن یک مثال واقعی مانند یک برنامه تجارت الکترونیک برای یادگیری چیزهای جدید همیشه عالی است. تو می توانی آموزش را اینجا پیدا کنید.

وبلاگ کامل چند زبانه با Nuxt.js

Nuxt.js برای Vue است، مانند Next.js برای React: یک چارچوب عالی برای ترکیب رندر سمت سرور و برنامه های تک صفحه ای
آخرین برنامه ای که می توانید ایجاد کنید به شکل زیر است:

چه چیزی یاد خواهید گرفت

در این پروژه نمونه، یاد خواهید گرفت که چگونه با استفاده از Nuxt.js یک وب سایت کامل بسازید، از راه اندازی اولیه تا استقرار نهایی.

از بسیاری از ویژگی‌های جالبی که Nuxt ارائه می‌کند، مانند صفحات و کامپوننت‌ها، و استایل‌سازی با SCSS بهره می‌برد.

پشته فنی و ویژگی ها

• Nuxt.js
• اجزا و صفحات
• ماژول بلوک داستانی
• مخلوط ها
• Vuex برای مدیریت دولتی
• SCSS برای یک ظاهر طراحی شده
• میان افزارهای Nuxt

این یک پروژه واقعا جالب است.، که شامل بسیاری از ویژگی های عالی Nuxt.js است. من شخصاً عاشق کار با Nuxt هستم، بنابراین باید آن را امتحان کنید زیرا شما را به یک توسعه دهنده عالی Vue تبدیل می کند.

وبلاگ با گتسبی

گتسبی یک مولد سایت استاتیک عالی با استفاده از React و GraphQL است. این هم نتیجه پروژه:

چه چیزی یاد خواهید گرفت

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

پشته فنی و ویژگی ها

• گتسبی
• واکنش نشان می دهند
• GraphQL
• پلاگین ها و تم ها
• MDX/Markdown
• CSS بوت استرپ
• قالب

اگر تا به حال خواستید یک وبلاگ راه اندازی کنید، این یک مثال عالی است چگونه با استفاده از React و GraphQL آن را بسازیم.

من نمی گویم وردپرس انتخاب بدی است، اما با گتسبی می توانید وب سایت هایی با کارایی بالا با استفاده از React بسازید - که ترکیبی شگفت انگیز است.

وبلاگ با Gridsome

Gridsome برای Vue... خوب، ما قبلاً آن را با Next/Nuxt داشتیم.
اما همین امر در مورد گریدسوم و گتسبی نیز صادق است. هر دو از GraphQL به عنوان لایه داده خود استفاده می کنند، اما Gridsome از VueJS استفاده می کند. همچنین یک تولید کننده سایت ایستا عالی است که به شما در ایجاد وبلاگ های عالی کمک می کند:

چه چیزی یاد خواهید گرفت

این پروژه به شما یاد می دهد که چگونه یک وبلاگ ساده برای شروع با Gridsome، GraphQL و Markdown ایجاد کنید. همچنین نحوه استقرار یک برنامه از طریق Netlify را توضیح می دهد.

پشته فنی و ویژگی ها

• ترسناک
• VUE
• GraphQL
• مدل های نشانه گذاری
• خالص کردن

این مطمئنا کامل ترین آموزش نیست، اما مفاهیم اولیه Gridsome و را پوشش می دهد Markdown و می تواند نقطه شروع خوبی باشد.

پخش کننده صوتی مشابه SoundCloud با استفاده از Quasar

Quasar یکی دیگر از فریمورک های Vue است که می توان از آن برای ساخت اپلیکیشن های موبایل استفاده کرد. در این پروژه شما یک اپلیکیشن پخش کننده صوتی مانند:

چه چیزی یاد خواهید گرفت

در حالی که پروژه‌های دیگر بیشتر بر روی برنامه‌های وب تمرکز دارند، این پروژه به شما نشان می‌دهد که چگونه با استفاده از Vue و چارچوب Quasar یک اپلیکیشن موبایل بسازید.
از قبل باید یک Cordova در حال کار با Android Studio/Xcode راه اندازی شده باشد. اگر نه، راهنما پیوندی به وب سایت Quasar دارد که در آن به شما نشان می دهد چگونه همه چیز را تنظیم کنید.

پشته فنی و ویژگی ها

• کوازار
• VUE
• کوردوا
• موج سرفر
• اجزای رابط کاربری

پروژه کوچک، نشان دادن قابلیت های Quasar برای ساخت اپلیکیشن های موبایل.

منبع: www.habr.com