הסטאק של רד גוסט - הטכנולוגיות שאנחנו בונים בהן
באילו טכנולוגיות Red Ghost בונה אתרים ומערכות?
Red Ghost בונה אתרים ומערכות בעיקר ב-Next.js ו-React על Node.js, עם TypeScript, MongoDB ו-Prisma בצד השרת, ו-WordPress עם WooCommerce כשאתר תוכן או חנות דורשים מערכת ניהול מוכרת. העיצוב נעשה ב-Figma, האירוח ב-Vercel עם Cloudflare, והמדיה ב-Cloudinary. הבחירה בכל פרויקט נעשית לפי מה שהעסק צריך לעשות במערכת, מי יתחזק אותה, ומי מחזיק בנתונים.
העמוד הזה הוא הסטאק שאנחנו באמת עובדים איתו, מסודר לפי שכבות: הפריימוורקים שבהם נכתב האתר, שפות הליבה שמתחתיהם, הכלים שבהם אנחנו מאפיינים ומעצבים, מסדי הנתונים, התשתית שמחזיקה את הכול באוויר, והשירותים שמשלימים את התמונה. לכל טכנולוגיה יש עמוד משלה שמסביר למה היא נבחרה ומה היא נותנת ללקוח.
הבחירה בין הכלים האלה נגזרת מהפרויקט ולא מהרגל. רוב מה שאנחנו מוסרים נכתב בקוד מותאם אישית ב-Next.js, React ו-Node.js, וכשוורדפרס הוא הכלי הנכון ללקוח אנחנו בונים בוורדפרס. עוד על הדרך שאנחנו עובדים, ותיק העבודות מראה איך הסטאק הזה נראה בפרויקטים חיים.
פריימוורקים
פריימוורקים מודרניים לפיתוח אתרים ואפליקציות
השכבה שבה נכתב רוב מה שאנחנו מוסרים. Next.js היא ברירת המחדל שלנו לאתרים ולמערכות, כי רינדור בצד השרת נותן גם מהירות של אפליקציה וגם עמוד שגוגל יכול לקרוא מהיום הראשון. React מספקת את רכיבי הממשק ומאפשרת לבנות אותם פעם אחת ולהשתמש בהם שוב, ו-Node.js עם Express מריצים את הצד השרתי - מ-API פשוט ועד מערכות שמטפלות באלפי בקשות במקביל.
שפות תכנות
שפות הליבה שאנחנו עובדים איתן
שפות הליבה, ומה שקורה מתחת לפריימוורק. TypeScript היא ברירת המחדל אצלנו, כי טיפוסים תופסים באגים בזמן הכתיבה ולא בפרודקשן, ו-JavaScript מודרני הוא מה שמפעיל את הלוגיקה בצד הלקוח. HTML5 סמנטי ו-CSS מודולרי הם הבסיס לנגישות ולקידום: מבנה קוד נכון הוא מה שמאפשר לגוגל להבין מה יש בעמוד, ולמסך קטן להציג אותו כמו שצריך.
עיצוב ו-UI
כלי עיצוב וספריות ממשק משתמש
מה שקורה לפני שנכתבת שורת קוד, ומה שמניע אותה אחר כך. את האפיון והעיצוב אנחנו עושים ב-Figma, כך שאתם רואים פרוטוטייפ חי של האתר עוד לפני הפיתוח. Tailwind CSS משמשת לבניית ממשקים רספונסיביים בלי קבצי CSS מנופחים, ו-Framer Motion אחראית על התנועה - מעברי עמודים ואינטראקציות שלא באים על חשבון מהירות הטעינה.
מסדי נתונים
פתרונות אחסון ובסיסי נתונים
איפה הנתונים יושבים ואיך ניגשים אליהם. MongoDB היא מסד הנתונים שעליו אנחנו בונים מערכות ופורטלים, כי מבנה מסמכים גמיש מתאים לדאטה שממשיכה להשתנות לאורך חיי המוצר. Prisma היא שכבת הגישה שמונעת שאילתות שבורות ומנהלת מיגרציות, ו-Redis נכנס כשצריך מטמון או תור עבודה כדי למנוע צוואר בקבוק במערכת עמוסה.
תשתית ו-DevOps
פלטפורמות ענן, אירוח ותשתית
מה שמחזיק את האתר באוויר. את אפליקציות ה-Next.js אנחנו מארחים ב-Vercel, שמפרסת אותן גלובלית ומעלה כל שינוי אוטומטית. Cloudflare משמשת גם כשכבת אבטחה שחוסמת תנועה זדונית לפני שהיא מגיעה לשרת וגם כרשת הפצה שמקצרת את זמן הטעינה. Git מנהל את גרסאות הקוד כך שתמיד אפשר לחזור אחורה, ו-Docker מבטיח שהמערכת רצה זהה בפיתוח ובייצור.
כלים ושירותים
כלים ושירותים צד-שלישי שמשלימים את הפיתוח
השירותים שמשלימים את הפיתוח. Cloudinary מבצעת אופטימיזציה למדיה בזמן אמת ומגישה כל תמונה בגודל ובפורמט שמתאימים למכשיר, כדי שהתמונות לא יהיו הסיבה לאתר איטי. Google Analytics מוטמעת אצלנו עם מעקבי המרות אמיתיים ולא רק ספירת כניסות, ו-REST API הוא האופן שבו האתר מדבר עם מערכות חיצוניות - סליקה, CRM או אפליקציה.
שכבות הסטאק: מה משמש למה
| השכבה | הטכנולוגיות | למה אנחנו משתמשים בה |
|---|---|---|
| פריימוורקים | Next.js, React, Node.js, Express, WordPress, WooCommerce | פריימוורקים מודרניים לפיתוח אתרים ואפליקציות |
| שפות תכנות | JavaScript, TypeScript, HTML5, CSS3, PHP | שפות הליבה שאנחנו עובדים איתן |
| עיצוב ו-UI | Figma, Tailwind CSS, Framer Motion | כלי עיצוב וספריות ממשק משתמש |
| מסדי נתונים | MongoDB, Prisma, Redis | פתרונות אחסון ובסיסי נתונים |
| תשתית ו-DevOps | Vercel, Git, Docker, Cloudflare | פלטפורמות ענן, אירוח ותשתית |
| כלים ושירותים | Cloudinary, Google Analytics, REST API, Elementor, Advanced Custom Fields (ACF), Yoast SEO | כלים ושירותים צד-שלישי שמשלימים את הפיתוח |
שאלות נפוצות על הסטאק
שניהם בשימוש אצלנו, לפי הפרויקט. Next.js ו-React הם ברירת המחדל למערכות, לפורטלים ולאתרים שצריכים ביצועים גבוהים ולוגיקה עסקית, כי רינדור בצד השרת נותן מהירות של אפליקציה עם עמוד שגוגל קורא במלואו. וורדפרס מתאימה לאתרי תדמית ותוכן שצוות השיווק עורך לבד, ו-WooCommerce לחנויות.
Next.js הוא פריימוורק ל-React שמייצר את עמודי האתר בצד השרת ומגיש אותם מוכנים לדפדפן, ולכן משלב מהירות של אפליקציה עם עמודים שמנועי חיפוש קוראים במלואם. הוא מנהל גם ניתוב, תמונות, מטמון ורינדור מדורג, וזו הסיבה שרוב האתרים והמערכות שאנחנו מוסרים נכתבים בו.
MongoDB הוא מסד הנתונים שעליו אנחנו בונים מערכות ופורטלים, כי מבנה מסמכים גמיש מתאים לנתונים שממשיכים להשתנות לאורך חיי המוצר, ו-Prisma מספקת שכבת גישה מוקלדת שתופסת שגיאות כבר בזמן הכתיבה. Redis משמש למטמון ולתורים כשנדרשת תגובה מהירה מאוד, למשל בפורטלים עם חיפוש וסינון.
לא. הקוד, העיצוב והתכנים שייכים לכם במלואם, ואתם מקבלים גישה מלאה לאתר, לשרת ולדומיין. כל הטכנולוגיות שאנחנו עובדים איתן הן קוד פתוח או שירותי ענן מוכרים, כך שכל צוות פיתוח יכול להמשיך לתחזק, לשדרג או להעביר את הפרויקט לגורם אחר בלי להיות כבול אלינו.
לפי שלוש שאלות, בסדר הזה: מה העסק צריך לעשות במערכת ביום יום, מי יתחזק אותה בעוד שנתיים, ומי מחזיק בסוף בנתונים של הלקוחות. אתר תוכן שצוות השיווק עורך לבד מוביל לוורדפרס; מערכת עם הרשאות, אינטגרציות ועומס מובילה ל-Next.js ו-Node.js. ההחלטה נכתבת באפיון, לפני שורת קוד.
