ثورة ووردبريس مع GraphQL

يتغير عالم تطوير البرمجيات بوتيرة سريعة. واحدة من الشكاوى الأكثر شيوعًا التي نسمعها عن وورد بريس هي أنه ليس “مثيرًا” بما يكفي للمطورين المعاصرين – فقد مضى عليه أكثر من عقد من الزمان. بغض النظر ، هناك سبب لتشغيل 25٪ من الويب: إنه معروف جيدًا بين المطورين ، ولديه مجتمع هائل ، ونظام بيئي ضخم من السمات والمكونات الإضافية ، ويمكنك استخدامه بشكل أساسي لأي شيء تريده – المدونات ، ومواقع الشركات ، والتواصل الاجتماعي بوابات الوسائط وقوى التجارة الإلكترونية والمزيد.

مع الإضافة الأخيرة   لمطوري REST API الرسميين ، يتم تمكينهم لفصل الواجهة الخلفية لـ وورد بريس عن الواجهة الأمامية. أصبحت إمكانية تطوير تطبيقات JavaScript فقط التي تعتمد على وورد بريس لتوفير منطق الأعمال الخلفية وتخزين البيانات فقط عبر واجهة REST API حقيقة واقعة.

أحد أفضل الأمثلة على ما سيحدث في السنوات التالية هو  Calypso ، واجهة المسؤول المعاد التفكير بها والموجودة الآن خلف وورد بريس.com – وبعض المواقع ذاتية الاستضافة ، لكن التثبيت ليس بهذه السهولة ، حتى الآن. Calypso  هو تطبيق قائم على React يتواصل مع الواجهة الخلفية لـ وورد بريس من خلال  واجهة برمجة تطبيقات JetPack  حيث أن واجهة برمجة تطبيقات REST الأساسية الخاصة بـ WP ليست موجودة حتى الآن في النسبة المئوية لتغطية الوظائف.

تعد Rest API رائعة ولكن GraphQL أفضل.

هناك طفل جديد في الكتلة من المرجح أن يتسبب في توقف جميع واجهات برمجة تطبيقات REST في العالم قريبًا. يطلق عليه  GraphQL  (اقرأ منشور الإعلان الرسمي مع  المزيد من التفاصيل هنا ) وهو  بديل مباشر لـ REST .

تمثل GraphQL أيديولوجية جديدة تجعل من الممكن للعميل أو المستهلك للبيانات تحديد البيانات التي يحتاجها بشكل تصريحي لكل عنصر. هذا يعني أنه ، على سبيل المثال ، يمكنك إرفاق مواصفات GraphQL بمكون React وإخبار الخادم بنوع البيانات التي ستحتاج إليها وبأي تنسيق دقيق ، لا أكثر ولا أقل.

باستخدام واجهات برمجة تطبيقات REST ، لديك مجموعة من نقاط النهاية المحددة مسبقًا والتي ، عند الاستعلام عنها ، سترسل لك دائمًا نفس الإجابة الدقيقة التي سيتعين عليك (بصفتك مطورًا للواجهة الأمامية) معالجتها من جانب العميل حتى تحصل على العناصر والتنسيق الذي تريده ترغب في استخدام. مع GQL ، يكون الأمر عكس ذلك تمامًا ويجعل حياة مطوري الواجهة الأمامية أسهل كثيرًا!

يؤدي هذا إلى عمليات نقل بيانات أقل ، وكود أصغر حجمًا ، والأهم من ذلك – تجربة ويب أسرع ، خاصة على الأجهزة المحمولة حيث لا يزال النطاق الترددي يمثل مشكلة.

إذا كنت متحمسًا لهذه التكنولوجيا الجديدة أكثر مما نحن عليه ، فهذا رائع لأننا نعتقد أنها طريقة ثورية حقًا لإنشاء التطبيقات!

إن GraphQL رائعة ، ولكن ما الفائدة التي تقدمها لمطوري وورد بريس؟ إذا كنت منتبهًا ، فإن تطوير وورد بريس يتحول نحو  تطوير JavaScript كثيرًا مؤخرًا  وهناك مشروع مثير للاهتمام للغاية بدأه  Ramsay Lanier ، مطور ويب كبير في nclud في واشنطن العاصمة ، يسمى  WordExpress . لقد تواصلنا مع رامزي ووافق على إجراء مقابلة معنا حول هذا الموضوع المثير:

WordExpress

هل يمكن أن تخبرنا قليلا عن نفسك؟

أنا مطور تفاعلي كبير في وكالة رقمية إبداعية في واشنطن العاصمة تسمى  nclud . أنا أعمل بشكل أساسي مع جافا سكريبت على مستوى العرض ، على الرغم من أنني أعتبر نفسي مطور جافا سكريبت مكدس كامل. في أوقات فراغي ، عندما لا أقوم بتطوير تطبيقات سخيفة تعتمد على الرموز التعبيرية ، أحاول أن أكون أبًا جيدًا لابنتين صغيرتين جدًا. أحاول أن أجعلهم مهتمين بالعلوم والتكنولوجيا والهندسة والرياضيات ، لكنهم ما زالوا صغارًا – لم يكن الوقت مبكرًا أبدًا!

أنت تعمل مع وورد بريس كل يوم ، ما هو مجال تركيزك؟

في nclud ، نصمم ونبني مواقع ويب وتطبيقات تفاعلية للغاية. نحن نعمل مع مجموعة متنوعة من أنظمة إدارة المحتوى ، على الرغم من أننا نستخدم وورد بريس بشكل أساسي لأن عملائنا يجدون أن التدفق التحريري لـ وورد بريس سهل. بصفتي مطورًا أول ، أعمل على جميع جوانب التصميم – من سمات PHP المخصصة إلى الرسوم المتحركة المجنونة القائمة على القماش.

كيف أتيت بفكرة WordExpress وما هي؟

WordExpress هي محاولتي لاستبدال PHP بجافا سكريبت في تطوير وورد بريس. تم تصميمه باستخدام Node.js و Express في النهاية الخلفية ، و React في الواجهة الأمامية. فيما بينهما ، يوجد خادم GraphQL يرتبط بقاعدة بيانات وورد بريس.

السبب الرئيسي لهذا المشروع هو أنني أردت أن أكون قادرًا على تطوير مواقع وورد بريس باستخدام مكونات React ووحدات CSS. تعد وحدات CSS رائعة لأنها تتيح لك إنشاء CSS محدد النطاق محليًا خصيصًا لكل مكون. للحصول على بيانات من قاعدة بيانات وورد بريس ، حاولت في البداية استخدام واجهة برمجة تطبيقات وورد بريس. سرعان ما اكتشفت أنه كان محدودًا جدًا فيما أردت القيام به ، وأنني سأضطر في النهاية إلى كتابة مجموعة من نقاط نهاية REST المخصصة. أيضًا ، لا تزال GraphQL و Relay جديدة تمامًا وأردت عذرًا لتعلمها.

إن GraphQL و Relay هما حقًا المفاتيح الكبيرة لهذا المشروع.

ما الفرق الرئيسي بين العمل باستخدام REST API و GraphQL / Relay؟

باستخدام واجهة برمجة تطبيقات REST ، تقوم بإنشاء طلب من الخادم ، وإرساله إلى العميل وجعل العميل يحلل البيانات للحصول على ما يريد. في كثير من الأحيان ، سيتعين عليك إجراء مكالمات لنقاط نهاية متعددة للحصول على مجموعة البيانات الكاملة التي تحتاجها. على الرغم من أن REST قد أحدثت ثورة في الطريقة التي نقوم بها بتطوير الويب ، إلا أن لها بالتأكيد سلبياتها.

إجابة Facebook على REST هي GraphQL. تعد GraphQL لغة استعلام قاعدة بيانات قوية جدًا قادرة على وصف البيانات العلائقية المعقدة. يسمح للعميل بتحديد مجموعة البيانات الدقيقة التي يحتاجها ولا يتطلب سوى رحلة واحدة ذهابًا وإيابًا من العميل إلى الخادم والعودة. قاعدة بياناتها غير مألوفة أيضًا!

يوفر Relay إمكانات جلب البيانات لمكونات React ، وقد تم تصميمه للعمل بشكل خاص مع GraphQL. باستخدام إعداد GraphQL / Relay ، يحدد المكون متطلبات البيانات الخاصة به عن طريق تحديد “جزء” GraphQL. قبل عرض التطبيق الخاص بك ، ينتقل Relay عبر المكونات التي تحتوي على أجزاء ويقوم بإنشاء استعلام واحد (عادةً ما يكون كبيرًا) يتم إرساله بعد ذلك إلى الخادم. إنه سريع للغاية وفعال. باستخدام Relay ، تحصل أيضًا على تخزين مؤقت للبيانات من جانب العميل. على سبيل المثال ، عندما تصل إلى صفحة قائمة المدونات ، سيتم جلب جميع البيانات من كل منشور بالمدونة وتخزينها في ذاكرة تخزين مؤقت من جانب العميل ، لذلك عند الانتقال إلى منشور مدونة ثم العودة إلى صفحة قائمة المدونات ، لن يقوم الخادم يجب إحضار أي بيانات مرة أخرى – إنها موجودة بالفعل!

WordExpress هي محاولتي لاستبدال PHP بـ JS في تطوير وورد بريس. تم تصميمه باستخدام Node.js و Express في النهاية الخلفية ، و React في الواجهة الأمامية.

انقر للتغريد

بناءً على تجربتك ، هل تعتقد أن GQL / Relay أفضل من استخدام واجهة برمجة تطبيقات REST (مع وورد بريس)؟

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

إنه أفضل تمامًا. يتطلب منهج تصميم مختلف ، لكنه أكثر كفاءة.

كيف هي ردود الفعل الأولية بخصوص WordExpress؟ ما هي افكار الناس؟

كانت رائعة! لقد بدأت هذا لمجرد أن أرى إلى أي مدى يمكنني الوصول. لم أكن أعتقد حقًا أنه سيحظى باهتمام كبير – لكن المشروع حصل على أكثر من 800 نجمة على Github . على الرغم من ذلك ، لدي الكثير من الأسئلة – ربما يكون أكبرها هو كيف يغير هذا المشروع الجانب الإداري لتطوير وورد بريس. جوابي هو: لا. لا يزال يستخدم لوحة إدارة وورد بريس المجربة والصحيحة.

أعتقد أنه لا يزال هناك جزء كبير من الأشخاص الذين لا يفهمون حقًا كيف يعمل WordExpress أو ما يحاول تحقيقه. ما زلت أعمل على كتابة سلسلة من المقالات تشرح المشروع بالتفصيل. لقد كتبت مقالًا تمهيديًا يشرح “السبب” ، ومقالتان توضحان بالتفصيل كيفية عمل GraphQL و Sequelize. هناك المزيد في المستقبل.

ما هي أكبر مشاكلك الحالية مع تطبيق هذه المنهجية الجديدة؟

أكبر انتقاد هو أن WordExpress لا يعمل مع غالبية مكونات وورد بريس الإضافية. هذا صحيح – أي مكون إضافي تستخدمه يؤثر على الأشياء في الواجهة الأمامية لن يعمل. لا يزال بإمكانك استخدام المكونات الإضافية التي تؤثر على العناصر الخلفية ، مثل الحقول المخصصة المتقدمة ، أو أنواع WP (التي أستخدمها). ومع ذلك ، فإن الفائدة هي أنه نظرًا لأنه تم إنشاؤه باستخدام Node ، يمكنك استخدام أي حزمة NPM تريدها ، لذا فهذه هي المقايضة.

أيضًا ، لا يعمل العرض من جانب الخادم حاليًا وهو ما يمثل مشكلة كبيرة. في الوقت الحالي ، لا تحصل على أي تحسين لمحركات البحث لأن HTML يتم عرضه بسرعة – أنا أعمل بنشاط للحصول على عرض من جانب الخادم للعمل مع Relay و GraphQL وهو قريب جدًا. كان هناك بعض العمل الرائع في مجتمع GraphQL / Relay لدعم ذلك.

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

هل لديك أي خطط لاستخدام التكنولوجيا الجديدة لتحسين wp-admin؟ (أنا أشير إلى مشروع يشبه كاليبسو).

ليس حاليًا – لم ألعب كثيرًا مع كاليبسو. أنا سعيد بشكل عام بتجربة المسؤول من وورد بريس. لا يزال هناك الكثير من الأشياء التي يتعين معالجتها للحصول على تجربة التطوير الأمامية إلى حيث أريدها ، لذلك أنا أركز على ذلك.

إذا كان الناس يريدون المساهمة فكيف يمكنهم الوصول إليك؟

Twitter  هو أفضل طريقة للتواصل معي مباشرة. إذا كنت تريد إرسال  طلبات السحب  – فأنا أؤيد ذلك تمامًا! أنا أراجع بنشاط قضايا العلاقات العامة و GitHub لذا أعدك بأنها لن تستمر.

شكرا لأخذ الوقت لإجراء المقابلة ، رامزي!

هنا في Kinsta ، نعتقد أن GraphQL تمثل فجر عصر جديد في تطوير الويب والتطبيقات وأننا سنرى حلولًا ثورية حقًا في السنوات القليلة المقبلة تستفيد من هذه التقنيات الرائعة.

إذا كنت ترغب في قراءة المزيد عن GraphQL ، فقد قمنا بتضمين اثنين من الموارد أدناه ، إذا كنت ترغب في إضافة المزيد ، فما عليك سوى نشر تعليق أدناه أو إرسال رسالة إلينا!

توثيق

مواصفات GraphQL

الشروع في العمل مع الترحيل

الدورات / الدروس

دعنا نتعلم GraphQL

أشرطة فيديو

استكشاف GraphQL  بواسطة Lee Byron ، Facebook (React Europe 2015)

Relay – إطار عمل لتطبيق React  بواسطة Joseph Savona ، Facebook (React Europe 2015)

مقالات لها صلة:

HHVM مقابل PHP 7

أساسيات وورد بريس REST API

لقد ابتعد وورد بريس تدريجياً عن كونه مجرد مدونة لسنوات حتى الآن. المسمار الأخير …

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.