9 פרויקטים נוספים כדי לחדד את כישורי ה-front-end שלך

מבוא

בין אם אתה חדש בתכנות או מפתח ותיק, לימוד מושגים ושפות/מסגרות חדשות הוא חובה בתעשייה זו כדי להתעדכן בטרנדים.

קחו למשל את React, שפייסבוק הוציאה בקוד פתוח רק לפני ארבע שנים וכבר הפכה לבחירה מספר אחת עבור מפתחי JavaScript ברחבי העולם.

ל- Vue ו-Angular, כמובן, יש גם בסיס מעריצים לגיטימי משלהם. ואז יש את Svelte ומסגרות אוניברסליות אחרות כמו Next.js או Nuxt.js. וגטסבי, וגרידסום, וקוואזר... ועוד הרבה יותר.

אם אתה רוצה להוכיח את עצמך כמפתח JavaScript מנוסה, אתה צריך להיות לפחות ניסיון עם מסגרות וספריות שונות - בנוסף לעבודה עם JS הישן והטוב.

כדי לעזור לך להפוך למאסטר חזיתי בשנת 2020, הרכבתי תשעה פרויקטים שונים, כל אחד מתמקד במסגרת שונה וספרייה של JavaScript כמחסנית טכנולוגית שתוכל לבנות ולהוסיף לתיק העבודות שלך. זכור ששום דבר לא עוזר לך יותר מאשר ליצור דברים בפועל, אז התקדם, השתמש במוח שלך ותגרום לזה לקרות

המאמר תורגם בתמיכת EDISON Software, אשר מייצרת חדרי התאמה וירטואליים לחנויות מרובות מותגיםו - תוכנת בדיקות.

אפליקציית חיפוש סרטים באמצעות React (עם ווים)

הדבר הראשון שאתה יכול להתחיל איתו הוא ליצור אפליקציית חיפוש סרטים באמצעות React. להלן תמונה של איך ייראה היישום הסופי:

מה תלמד
על ידי בניית אפליקציה זו, תשפר את כישורי ה-React שלך על ידי שימוש ב-Hooks API החדש יחסית. הפרויקט לדוגמה משתמש ברכיבי React, הרבה ווים, API חיצוני וכמובן קצת עיצוב CSS.

ערימה טכנית ותכונות

• להגיב עם ווים
• ליצור-להגיב-אפליקציה
• Jsx
• CSS

מבלי להשתמש בשיעורים כלשהם, הפרויקטים הללו נותנים לך את נקודת הכניסה המושלמת ל-React הפונקציונלי ובהחלט יעזרו לך ב-2020. אתה יכול למצוא פרויקט לדוגמה כאן. עקוב אחר ההוראות או הפוך אותו לשלך.

אפליקציית צ'אט עם Vue

פרויקט נהדר נוסף שעליך לעשות הוא ליצור אפליקציית צ'אט באמצעות ספריית JavaScript האהובה עלי: VueJS. האפליקציה תיראה בערך כך:

מה תלמד
במדריך זה תלמדו כיצד ליצור אפליקציית Vue מאפס - יצירת רכיבים, טיפול במצב, יצירת מסלולים, התחברות לשירותי צד שלישי ואפילו טיפול באימות.

ערימה טכנית ותכונות

• Vue
• ווקס
• נתב Vue
• תצוגת CLI
• סוחר סמים
• CSS

זהו פרויקט נהדר באמת להתחיל עם Vue או לשפר את הכישורים הקיימים שלך כדי להיכנס לפיתוח ב-2020. אתה יכול למצוא הדרכה כאן.

אפליקציית מזג אוויר יפה עם Angular 8

דוגמה זו תעזור לך ליצור אפליקציית מזג אוויר יפהפיה באמצעות Angular 8:

מה תלמד
פרויקט זה ילמד אותך מיומנויות חשובות בבניית יישומים מאפס - מעיצוב דרך פיתוח, כל הדרך ועד לאפליקציה מוכנה לפריסה.

ערימה טכנית ותכונות

• זווית 8
• Firebase
• עיבוד בצד השרת
• CSS עם Grid ו-Flexbox
• ידידותית לנייד ויכולת הסתגלות
• מצב כהה
• ממשק יפה

מה שאני באמת אוהב בפרויקט המקיף הזה הוא שאתה לא לומד דברים בבידוד. במקום זאת, אתה לומד את כל תהליך הפיתוח, מהתכנון ועד לפריסה הסופית.

יישום מטלות באמצעות Svelte

Svelte הוא כמו הילד החדש בגישה מבוססת הרכיבים - לפחות דומה ל-React, Vue ו-Angular. וזה אחד המוצרים החדשים הלוהטים לשנת 2020.

אפליקציות מטלות הן לא בהכרח הנושא החם ביותר, אבל הן באמת יעזרו לך לחדד את כישורי ה-Svelte שלך. זה ייראה כך:

מה תלמד
מדריך זה יראה לך כיצד ליצור יישום באמצעות Svelte 3, מתחילתו ועד סופו. אתה תשתמש ברכיבים, סטיילינג ומטפלי אירועים

ערימה טכנית ותכונות

• Svelte 3
• רכיבים
• סטיילינג עם CSS
• תחביר ES 6

אין הרבה פרויקטים טובים למתחילים של Svelte, אז מצאתי זו אפשרות טובה להתחיל איתה.

אפליקציית מסחר אלקטרוני באמצעות Next.js

Next.js היא המסגרת הפופולרית ביותר לבניית יישומי React התומכים בעיבוד בצד השרת מחוץ לקופסה.

פרויקט זה יראה לך כיצד ליצור יישום מסחר אלקטרוני שנראה כך:

מה תלמד
בפרויקט זה תלמד כיצד לפתח עם Next.js - ליצור דפים ורכיבים חדשים, לחלץ נתונים ולעצב ולפרוס יישום Next.

ערימה טכנית ותכונות

• Next.js
• רכיבים ודפים
• דגימת נתונים
• סטייליזציה
• פריסת פרויקט
• SSR וספא

זה תמיד נהדר לקבל דוגמה מהעולם האמיתי כמו אפליקציית מסחר אלקטרוני כדי ללמוד משהו חדש. אתה יכול מצא את ההדרכה כאן.

בלוג רב לשוני מלא עם Nuxt.js

Nuxt.js הוא עבור Vue, מה ש-Next.js הוא עבור React: מסגרת נהדרת לשילוב הכוח של רינדור בצד השרת ויישומי עמוד בודד
האפליקציה הסופית שתוכל ליצור תיראה כך:

מה תלמד

בפרויקט לדוגמה זה, תלמד כיצד ליצור אתר אינטרנט שלם באמצעות Nuxt.js, מההגדרה הראשונית ועד לפריסה הסופית.

הוא מנצל הרבה מהתכונות המגניבות שיש ל-Nuxt להציע, כמו דפים ורכיבים, וסגנון עם SCSS.

ערימה טכנית ותכונות

• Nuxt.js
• רכיבים ודפים
• מודול Storyblock
• דַבקָן
• Vuex לניהול המדינה
• SCSS לסטיילינג
• תוכנות ביניים של Nuxt

זה פרויקט ממש מגניב, הכולל הרבה תכונות נהדרות של Nuxt.js. אני אישית אוהב לעבוד עם Nuxt אז כדאי לך לנסות את זה כי זה גם יהפוך אותך למפתח Vue מעולה.

בלוג עם גטסבי

גטסבי הוא מחולל אתרים סטטי מצוין באמצעות React ו- GraphQL. זו התוצאה של הפרויקט:

מה תלמד

במדריך זה, תלמד כיצד להשתמש ב-Gatsby כדי ליצור בלוג שבו תשתמש כדי לכתוב מאמרים משלך באמצעות React ו- GraphQL.

ערימה טכנית ותכונות

• גטסבי
• להגיב
• גרפית
• תוספים וערכות נושא
• MDX/Markdown
• Bootstrap CSS
• תבניות

אם אי פעם רצית לפתוח בלוג, זו דוגמה מצוינת כיצד לעשות זאת באמצעות React ו- GraphQL.

אני לא אומר ש-WordPress היא בחירה גרועה, אבל עם Gatsby אתה יכול לבנות אתרים בעלי ביצועים גבוהים באמצעות React - שזה שילוב מדהים.

בלוג עם Gridsome

גרידסום עבור Vue... אוקיי, זה כבר היה לנו עם Next/Nuxt.
אבל זה נכון גם לגבי גרידסום וגטסבי. שניהם משתמשים ב-GraphQL כשכבת הנתונים שלהם, אבל Gridsome משתמש ב-VueJS. זהו גם מחולל אתרים סטטי מדהים שיעזור לך ליצור בלוגים מעולים:

מה תלמד

פרויקט זה ילמד אותך כיצד ליצור בלוג פשוט כדי להתחיל עם Gridsome, GraphQL ו-Markdown. זה גם מכסה כיצד לפרוס יישום דרך Netlify.

ערימה טכנית ותכונות

• מסורבל
• Vue
• גרפית
• Markdown
• נטליפיי

זה בהחלט לא המדריך המקיף ביותר, אבל הוא מכסה את המושגים הבסיסיים של Gridsome ו Markdown עשויה להיות נקודת התחלה טובה.

נגן אודיו דמוי SoundCloud באמצעות Quasar

Quasar היא עוד מסגרת Vue שניתן להשתמש בה ליצירת יישומים ניידים. בפרויקט זה תיצור יישום נגן שמע, לדוגמה:

מה תלמד

בעוד שפרויקטים אחרים מתמקדים בעיקר ביישומי אינטרנט, זה יראה לך כיצד ליצור אפליקציה לנייד באמצעות Vue ומסגרת Quasar.
כבר אמורה להפעיל את Cordova עם Android Studio/Xcode מוגדר. אם לא, במדריך יש קישור לאתר Quasar שבו הם מראים לך איך להגדיר הכל.

ערימה טכנית ותכונות

• Quasar
• Vue
• קורדובה
• WaveSurfer
• רכיבי ממשק משתמש

פרויקט קטן, המדגים את היכולות של Quasar ליצירת יישומים ניידים.

מקור: www.habr.com