التحول من Meteor إلى Next.js: تقديم Vulcan Next Starter كبديل قوي لتطوير الويب

البحث عن إطار عمل JavaScript عالي الإنتاجية

في عالم تطوير الويب المتسارع، يظل البحث عن إطار عمل JavaScript يجمع بين الإنتاجية والكفاءة تحديًا مستمرًا. عندما تعمل على مشروع خاص بشركتك، قد تتاح لك رفاهية قضاء الوقت في إعداد بيئة تطوير تناسب متطلباتك الفريدة. ولكن عند العمل للعملاء، تختلف المعادلة؛ فالمطلوب هو تقديم كود عالي الجودة في وقت محدد وقابل للتنبؤ. للبقاء في صدارة المنافسة، يجب أن تكون قادرًا على التوسع عبر مشاريع متعددة، وهذا يعني إعادة استخدام المعرفة والكود العام، والاعتماد على أطر العمل.

لطالما كان Meteor إطار عملي المفضل كمالك لوكالة تطوير. إنه أحد أطر عمل JavaScript النادرة التي تركز حقًا على الإنتاجية، بفضل بنيته القائمة على الحزم (package-first architecture)، ونهجه المتجانس (isomorphic approach)، وحل الثبات الجاهز للاستخدام (persistence solution out-of-the-box).

أنا أيضًا مساهم أساسي في إطار عمل Vulcan.js الخاص بـ Sacha Greif. Vulcan هو إطار عمل متكامل (full-stack) يعتمد على مجموعة من المبادئ، وقد تم تنفيذه كمجموعة فائقة (super-set) من Meteor. يذهب خطوة أبعد من خلال توفير أنماط تعريفية (declarative patterns) لتطوير سريع للغاية والاعتماد على Apollo GraphQL. يتم إنشاء كل شيء تقريبًا (مثل GraphQL schema، و API، وهيكل قاعدة البيانات، والنماذج، وجداول البيانات، وما إلى ذلك) تلقائيًا بناءً على مخطط JavaScript. أليس هذا رائعًا؟

تحديات Meteor: سقف زجاجي للنمو

رغم مميزات Meteor، إلا أن قيوده مثلت سقفًا زجاجيًا يحد من إمكانيات التوسع. لقد حققت مشاريع ناجحة باستخدام Meteor و Vulcan، لكنني لم أتمكن أبدًا من تقديم هذه الأطر لعملاء أكبر. كانت هناك العديد من مشكلات قابلية التوسع (scalability issues)، ونقص في الاهتمام المجتمعي (lack of traction)، وأدوات اختبار ضعيفة (poor test tooling)، وغيرها الكثير. عدت إلى نقطة البداية، وبدأت أبحث عن إطار عمل يمكنني الاعتماد عليه بشكل دائم.

Next.js مقابل Meteor: مقارنة غير تقليدية في البداية

مقارنة Next.js بـ Meteor؟ هذا أشبه بمقارنة التفاح بالبرتقال! عندما اكتشفت Next.js لأول مرة في عام 2017، كان إطار عمل واعدًا للواجهة الأمامية فقط (front-end-only). استخدمته لبناء موقع شركتي ثم نسيته. بعد ذلك، بدأ الناس من حولي يتصرفون بغرابة، حيث تحدثوا فجأة عن إطارين لا يجمعهما شيء مشترك، Meteor و Next.js، كما لو كانا قابلين للتبديل. هل تستبدل Meteor بـ Next.js؟ لماذا لا تستبدل Express بـ Create React App وأنت في طريقك؟

حسب علمي، كان Reaction Commerce أحد أوائل أطر العمل غير البسيطة التي قامت بهذا التحول. لم أكن مقتنعًا. وبالفعل، كان عليهم لا يزالون يطبقون واجهة GraphQL API فوق تطبيق Meteor الخاص بهم للتواصل مع الواجهة الأمامية (front end) المبنية بـ Next.js. استبدال إطار عمل واحد باثنين ليس أفضل صفقة، لذلك حافظنا على Vulcan كإطار عمل يعتمد على Meteor.

إذا كنت تعتقد أن مقارنة Meteor بـ Next.js هي مقارنة بين التفاح والبرتقال، فأنت لست مخطئًا تمامًا. حتى يومنا هذا، لا يزال شعار Next.js هو “إطار عمل React” وليس “إطار عمل Node“. ومع ذلك، بدأت في تغيير رأيي قبل بضعة أشهر.

تحول Next.js من الواجهة الأمامية إلى إطار عمل متكامل بفضل مسارات API

مع إطلاق الإصدار v9 في يوليو 2019، تم تقديم مسارات API (API routes) رسميًا في Next.js. هذا التطور أعادني إلى الاهتمام بـ Next.js من جديد. تعني مسارات API أن Next.js أصبح الآن إطار عمل متكامل (full-stack) بسيطًا ولكنه قابل للتطبيق تمامًا. بما أن Vulcan مبني حول GraphQL، فإن GraphQL يتناسب بشكل ممتاز مع مسارات API. يتم تقديم الواجهة البرمجية (API) عبر نقطة نهاية فريدة وديناميكية هي /graphql. في Next.js، يتم تحقيق ذلك ببساطة عن طريق إنشاء مسار API باسم graphql.js.

Next.js: إطار عمل هجين متعدد الاستخدامات

يُشار إلى Next.js بشكل متزايد على أنه “إطار عمل هجين” (hybrid framework)، وهذا منطقي نظرًا لتعدد استخداماته القصوى. يمكنك تطوير تطبيق متكامل (full-stack application) بواجهة خلفية (back-end) تعتمد على نمط الخوادم اللامركزية (serverless-style). يمكنك أيضًا تطوير تطبيق SaaS مع عرض ديناميكي من جانب الخادم (dynamic server-side rendering). إذا كنت لا ترغب في صيانة خادم، يمكنك اتباع فلسفة JAMstack وتصدير تطبيق ثابت (static app) مع عرض من جانب الخادم وقت البناء (build-time server-side rendering). وإذا كنت تتحسس من JavaScript من جانب العميل (client-side JS)، يمكنك إزالة JavaScript تمامًا من الحزمة والاحتفاظ بكود HTML فقط.

لكن لا تعتقد أن Next.js هو مجرد أداة متعددة المهام تفتقر إلى التخصص. إنه منافس قوي لـ Gatsby في شكله الثابت، وبديل واعد لـ Meteor في شكله المتكامل. لقد قامت شركة Vercel (التي كانت تُعرف سابقًا باسم Zeit) بعمل رائع في الحفاظ على جودته العالية وخفة وزنه، بغض النظر عن حالة الاستخدام.

لا تتخلَ عن Meteor بعد!

أود أن أوضح نقطة مهمة: استبدال Meteor بـ Next.js كإطار عمل أساسي في Vulcan لا يعني أننا نعتقد أنه يجب التخلي عن Meteor تمامًا. هناك درس كبير تعلمناه من تجاربنا مع Apollo و Meteor في Vulcan: إذا كنت تخطط لاستخدام Meteor، فما عليك سوى احتضان طريقة عمله. انسَ أمر GraphQL. انسَ أمر Webpack. على الرغم من أن Apollo و Meteor تم إنشاؤهما من قبل نفس الأشخاص، إلا أنهما يتضاربان كثيرًا. يبدو الأمر غريبًا لمطوري GraphQL، ويبدو غريبًا لمن يلتزمون بمبادئ Meteor.

استخدم DDP، و methods، و pub/sub، وتعلم كيفية توسيع نطاق تطبيقك، وانضم إلى المنتدى. الآن بعد أن أعادت شركة Tiny إحياء Meteor، أصبح رهانًا آمنًا للسنوات القادمة. مع Vulcan + Next، نسعى ببساطة لتوفير بديل GraphQL لـ Meteor. إنه ليس أسوأ أو أفضل، بل هو نفس الفلسفة بتطبيق مختلف. إطار العمل يشبه الآلة الموسيقية؛ لا تختر الأكثر رواجًا، بل اختر ما يناسبك. إذا كانت آلتك هي Meteor، فاستمر في استخدامها.

تقديم Vulcan Next Starter: تطبيق Next.js متكامل ومتقدم

استخدام Next.js بشكل مباشر أمر جيد تمامًا؛ فهو يوفر نظام بناء (build system)، وحلًا للتصميم (styling solution)، وهيكل مجلدات منطقيًا. ولكن إذا كنت ترغب في بناء تطبيق لشركة ناشئة بمليارات الدولارات، فستحتاج على الأرجح إلى المزيد من الأدوات. تذكر، نحن نبحث عن بديل لـ Meteor يركز على الإنتاجية أولاً. يمكن أن يتضمن الإعداد المثالي ما يلي:

• Cypress و Jest للاختبارات الوحدوية (unit testing) واختبارات النهاية إلى النهاية (e2e testing).
• Storybook للاختبار البصري (visual testing) وتوثيق التصميم (design documentation).
• التعريب أو التدويل (Internationalization، المعروف اختصارًا بـ i18n).
• TypeScript، للتعبير عن نموذج النطاق (domain model) الخاص بك من خلال أنواع ثابتة (static types).
• Material UI للحصول على مجموعة قوية من المكونات الأساسية القابلة للتخصيص.
• Apollo Client للتواصل مع واجهات GraphQL APIs.
• اختياريًا، Apollo Server لإعداد نقطة دخول GraphQL، مع Playground و Voyager لاستكشاف API.

يوفر Next.js عددًا قليلًا من الأمثلة في مستودعه الأساسي، لكن هذا لا يكفي في سياق الحياة الواقعية. يمكن أن تتفاعل هذه الأدوات معًا بطرق غير متوقعة. قد يكون تحديد أنواع المكونات التي تعمل من جانب العميل فقط مثل Leaflet أو Plotly أمرًا صعبًا. وينطبق الشيء نفسه على توحيد نظام البناء لـ Next.js و Jest و Storybook، أو تجنب التفاعلات السيئة بين Apollo و Material UI أثناء العرض من جانب الخادم (server-side rendering). إعادة التوجيه مع SSR تعني التعامل مع سيناريوهات الخادم والعميل بشكل مشترك. إعداد i18n صعب بشكل خاص بمفرده. والقائمة تطول. ثق بي، لا تريد معالجة مثل هذه المشكلات بمفردك. وتخيل ماذا؟ لقد قمنا بكل هذا العناء نيابة عنك! جميع هذه الأدوات مثبتة في مشروعنا الجديد والمميز Vulcan Next Starter. لا يزال أمامنا طريق طويل، لكننا فخورون بالقول إنه آمن للاستخدام في بيئات الإنتاج.

الخطوات التالية: دمج Vulcan و Next.js لإطار عمل متكامل

يلبي قالبنا (boilerplate) نصف وعدنا فقط. تحصل على إعداد رائع للواجهة الأمامية (front-end)، لكنك لا تزال تفتقر إلى قاعدة بيانات وإرشادات لتطبيق الواجهة الخلفية (back-end). هذا لا يمكن مقارنته بـ Meteor في هذه المرحلة. مجموعة من وظائف Lambda ليست إطار عمل، ولا الاشتراك في حلول مستضافة سحابيًا.

هنا يأتي دور Vulcan. على مر السنين، قمنا بتطوير مولد GraphQL API قوي، مع Mongo كقاعدة بيانات والعديد من أدوات الواجهة الأمامية المساعدة. بطبيعة الحال، فإن الخطوة التالية بالنسبة لنا هي دمج كل من Vulcan و Next.js لإنشاء إطار عمل متكامل حقيقي (true full-stack framework). يمكنك متابعة تقدمنا بالانضمام إلينا على قناة Slack الخاصة بـ Vulcan. سيكون Next.js و Meteor من المواطنين من الدرجة الأولى في Vulcan، ولكن أي نوع من تقنيات الواجهة الأمامية أو الخلفية لـ JS يمكن أن يستفيد منه، سواء كان Gatsby أو خدمة مصغرة (micro-service) مخصصة مبنية بـ Node. في Vulcan، نقدم لك كل الخيارات، طالما أنها تجعلك مطورًا فعالًا. حان الوقت الآن للعودة إلى العمل، فلدينا الكثير لنفعله. نأمل أن نراك في Vulcan!

شكر خاص وشهادة واقعية

شكر خاص لشركة Aplines، التي وثقت بشركتي (LBKE) في استخدام أحدث التقنيات لمنتجهم. بفضلهم، تمكنا من اختبار جميع الميزات المتضمنة في Vulcan Next Starter معًا في تطبيق احترافي حقيقي.

إنهم يبحثون عن مطورين، لذا إذا كنت ترغب في معرفة المزيد حول استخدام Next.js و GraphQL على نطاق واسع، فهذا هو المكان المناسب: job@aplines.com.

الخلاصة التقنية

يمثل Vulcan Next Starter خطوة جريئة نحو توفير بديل حديث وقوي لإطار عمل Meteor، مستفيدًا من مرونة Next.js وقوة GraphQL. بينما لا يزال Meteor خيارًا صالحًا للمشاريع التي تتبنى فلسفته بالكامل، فإن التوجه نحو حلول هجينة مثل Next.js مع مسارات API يوفر قابلية توسع ومرونة أكبر. يهدف Vulcan Next Starter إلى تبسيط عملية إعداد بيئة تطوير متكاملة غنية بالأدوات اللازمة لبناء تطبيقات ويب معقدة وعالية الأداء، مما يقلل من العناء على المطورين ويسرع من دورة التطوير. إنه يمثل جسرًا بين أفضل ما في العالمين، مقدمًا خيارات متعددة للمطورين لإنشاء تطبيقات ويب فعالة ومستقبلية.