هل فيسبوك سيسيطر على مجال تطوير واجهات الويب الأمامية ؟

raheel · 01-04-2019, 06:32 PM

لا يخفى على أحد منا قيمة شركة فيسبوك الكبيرة في عالم الديجيتال باعتبارها فيه واحدا من أضخم ثلاثة مشاريع إلى جانب كل من أمازون وبطبيعة الحال قوقل.
هذا النجاح الذي حظيت به فيسبوك يمكن رده لعوامل متعددة، منها قدرة الشركة على ابتكار أفكار جديدة، وحماية نفسها من المنافسة عن طريق سياسية الإستحواذ على الشركات التي تزاحمها في السوق أو استنساخها في حال لم يستطيعوا الإستحواذ عليها كما حصل مع سناب شات.
فيسبوك شبكة اجتماعية لديها ما يناهز 2 مليار مستخدم نشيط. خدمة هذا العدد الهائل من المستخدمين ليس بالأمر الهين، ويعتبر تحديا كبيرا لمهندسي الشركة من أجل إيجاد أفضل الحلول لمنح المستخدمين تجربة ممتعة وسلسة مع فيسبوك عن طريق بناء وتطوير بنية تحتية تقنية مثالية ومحسنة على أفضل نحو.
واحد من مكونات هذه البنية التحتية هو الواجهة الأمامية للموقع، وهي الواجهة التي يتعامل معها مستخدمو الموقع بصفة مباشرة، لذلك كان على مهندسي فيسبوك تسخير كافة إمكانياتهم ومهاراتهم التقنية من أجل إيجاد أحسن الحلول لتطوير وتحسين هذه الواجهة الأمامية.
جهود المهندسين أثمرت عددا من التقنيات الجديدة التي تمت الإستعانة بها في مشاريع فيسبوك الداخلية حتى أثبتت نجاحها وقيمتها العالية، ليتم بعد ذلك إطلاقها على شكل مشاريع برمجية مفتوحة المصدر بإمكان أي مطور حول العالم استخدامها والإستعانة بها، بل وحتى المشاركة في تطويرها وتحسينها.
في هذا المقال سأتحدث عن أهم هذه المشاريع البرمجية التي خرجت من مختبرات فيسبوك ونراها اليوم في كل مكان تستخدم من طرف مطوري الواجهات الأمامية ( Frontend Web Developers ) في مشاريعهم.
React.js

مكتبة React.js غنية عن التعريف، فهي الآن تقريبا أشهر مكتبة جافاسكريبت وزاد عدد مستخدميها بوتيرة متسارعة منذ إطلاقها لأول مرة في عام 2013.
هذه المكتبة كما شرحنا في مقال سابق معدة خصيصا لتطوير واجهات المستخدمين في تطبيقات الويب، وفق فلسفة خاصة كانت React سباقة إليها وتتجلى في :
1. JSX

الإعتماد على امتداد للجافاسكريبت اسمه JSX بهدف إنشاء قوالب بتركيب يشبه شكل HTML ولكن داخل أكواد الجافاسكريبت. هذه القوالب يتم فيما بعد تحويلها لأكواد جافاسكريبت عادية حتى يمكن للمتصفحات التعامل معها.

للمزيد من التفاصيل حول هذا الموضوع : Introducing JSX

2. Virtual DOM

الإعتماد على ما يعرف ب Virtual DOM بغرض جعل عملية معالجة شجرة DOM في المتصفح أكثر سرعة وكفاءة، حيث يتم تحديث المقاطع أو الأجزاء فقط التي تغيرت حالتها ( State ) في واجهة المستخدم.
شعبية React.js جارفة، حيث تجاوز عدد الإعجابات (النجوم) التي حصلت عليها في منصة Github أزيد من 94 ألفا! لتكون بذلك ثاني أكثر حزمة ويب شعبية في Github بعد Bootstrap.
نمط Flux

تبنت فيسبوك نمط Flux عوضا عن نمط MVC الذي كان دائما هو (أو أحد مشتقاته) النمط الشائع في جميع أطر عمل جافاسكريبت. هذا النمط يتألف من ثلاثة أجزاء أساسية هي :

Views : وهي ممثلة بمكونات React التي تشكل واجهة التطبيق الرسومية.
Stores : وهي المخازن حيث توجد جميع البيانات التي تعتمد عليها المكونات (Components) من أجل تحديد حالتها في نقطة زمنية معينة.
Dispatchers : تقوم المكونات بإطلاق ما يعرف ب Dispatchers بهدف تحديث البيانات في المخازن، ما يعني بعد ذلك مباشرة تحديث حالة (State) المكونات والتطبيق بحسب نوعية Dispatcher الذي تم إرساله للمخزن.

عندما نتحدث عن Flux، فإننا نتكلم عن النمط (Pattern) النظري الذي صممته فيسبوك ليشكل أساسا لبناء واجهاتها الرسومية، ولكن قد يعنى به كذلك مكتبة Flux التي طورتها فيسبوك بهدف تنفيذ ومحاكاة هذا النمط على أرض الواقع.
توجد عدة مكتبات قامت بتنفيذ (Implement) نمط Flux، لعل أشهرها مكتبة Redux التي تحظى بشعبية ممتازة في بيئة React.js. وقاد قام مطورها – Dan Abramov – بتنفيذ نمط Flux بطريقته الخاصة حيث الإعتماد على مخزن واحد للبيانات عوض خاصية المخازن المتعددة في نمط ومكتبة Flux.
GraphQL

GraphQL هو لغة صممت من طرف فيسبوك من أجل بناء الواجهات البرمجية بطريقة جديدة، لتحل بذلك محل طريقة REST المعروفة والتي كانت دائما الخيار الأول وتقريبا الأوحد لدى المطورين.
قامت شركة فيسبوك بإطلاق مشروع GraphQL في عام 2015 أمام المطورين، بعدما تم استخدامه داخليا لعدة سنوات قبل ذلك في مشاريع الشركة.
العديد من الشركات والعلامات التجارية الكبيرة سارعت لتبني نظام GraphQL في واجهاتها البرمجية، شركات من قبيل Github، تويتر، نيويورك تايمز، شوبفاي وعشرات الشركات الأخرى كلها اقتنعت بإمكانيات GraphQL كبديل أول لبنية RESTful.
GraphQL مشروع مستقل وليس موجها لأية لغة برمجة بعينها، ولكن يمكن التعامل معه بجميع لغات البرمجة المعروفة تقريبا كما ستلاحظون عند زيارة هذه الصفحة من الموقع الرسمي.
خادم GraphQL يقوم بعرض نقطة نهائية (Endpoint) واحدة عوضا عن خاصية النقاط المتعددة (Multiple Endpoints) في بنيات REST.
المستخدم يقوم بإرسال طلبه لهذه النقطة وسيتولى الخادم مهمة معالجة الطلب وإرسال الجواب على شكل كائن من نوع JSON.
مثال :

{ book(id: "1") { title } }
1
2
3
4
5

{
book(id: "1") {
title
}
}

الجواب سيكون على هذا الشكل :
{ "title": "Harry Potter" }
1
2
3

{
"title": "Harry Potter"
}

لا حظوا بأننا طلبنا فقط حقلا واحدا (title) من الجدول Book في قاعدة البيانات، هذه من الميزات الممتازة في GraphQL حيث نطلب ما نحتاجه فقط. في طريقة REST عند القيام بطلب GET لجلب معلومات كتاب معين من قاعدة البيانات، فإننا سنحصل على جميع معلومات الكتاب حتى عندما نحتاج لمعلومة واحدة فقط كما في مثالنا.

على كل سأحاول إنجاز درس تفصيلي عن GraphQL في قادم الأيام إن شاء الله لكي تفهموا الموضوع جيدا.
مكتبة Jest

مكتبة Jest هي واحدة من عشرات المكتبات الخاصة باختبار الشفرات المصدرية لتطبيقات الجافاسكريبت.
قامت شركة فيسبوك بتطوير هذه المكتبة لتكون الطريقة الرسمية المعتمدة لفحص واختبار تطبيقات React.js، مع العلم أنها مكتبة مستقلة بذاتها ويمكن استخدامها كأداة لفحص مختلف مشاريع وتطبيقات جافاسكريبت.
عند إنشاء مشروع React.js بواسطة الحزمة create-react-app فإنه يتم إضافة مكتبة Jest بشكل افتراضي لحزمة المشروع وإعدادها لتعمل مباشرة عن طريق تنفيذ الأمر npm test.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 06:32 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 هل فيسبوك سيسيطر على مجال تطوير واجهات الويب الأمامية ؟ هل فيسبوك سيسيطر على مجال تطوير واجهات الويب الأمامية ؟ لا يخفى على أحد منا قيمة شركة فيسبوك الكبيرة في عالم الديجيتال باعتبارها فيه واحدا من أضخم ثلاثة مشاريع إلى جانب كل من أمازون وبطبيعة الحال قوقل. هذا النجاح الذي حظيت به فيسبوك يمكن رده لعوامل متعددة، منها قدرة الشركة على ابتكار أفكار جديدة، وحماية نفسها من المنافسة عن طريق سياسية الإستحواذ على الشركات التي تزاحمها في السوق أو استنساخها في حال لم يستطيعوا الإستحواذ عليها كما حصل مع سناب شات. فيسبوك شبكة اجتماعية لديها ما يناهز 2 مليار مستخدم نشيط. خدمة هذا العدد الهائل من المستخدمين ليس بالأمر الهين، ويعتبر تحديا كبيرا لمهندسي الشركة من أجل إيجاد أفضل الحلول لمنح المستخدمين تجربة ممتعة وسلسة مع فيسبوك عن طريق بناء وتطوير بنية تحتية تقنية مثالية ومحسنة على أفضل نحو. واحد من مكونات هذه البنية التحتية هو الواجهة الأمامية للموقع، وهي الواجهة التي يتعامل معها مستخدمو الموقع بصفة مباشرة، لذلك كان على مهندسي فيسبوك تسخير كافة إمكانياتهم ومهاراتهم التقنية من أجل إيجاد أحسن الحلول لتطوير وتحسين هذه الواجهة الأمامية. جهود المهندسين أثمرت عددا من التقنيات الجديدة التي تمت الإستعانة بها في مشاريع فيسبوك الداخلية حتى أثبتت نجاحها وقيمتها العالية، ليتم بعد ذلك إطلاقها على شكل مشاريع برمجية مفتوحة المصدر بإمكان أي مطور حول العالم استخدامها والإستعانة بها، بل وحتى المشاركة في تطويرها وتحسينها. في هذا المقال سأتحدث عن أهم هذه المشاريع البرمجية التي خرجت من مختبرات فيسبوك ونراها اليوم في كل مكان تستخدم من طرف مطوري الواجهات الأمامية ( Frontend Web Developers ) في مشاريعهم. React.js مكتبة React.js غنية عن التعريف، فهي الآن تقريبا أشهر مكتبة جافاسكريبت وزاد عدد مستخدميها بوتيرة متسارعة منذ إطلاقها لأول مرة في عام 2013. هذه المكتبة كما شرحنا في مقال سابق معدة خصيصا لتطوير واجهات المستخدمين في تطبيقات الويب، وفق فلسفة خاصة كانت React سباقة إليها وتتجلى في : 1. JSX الإعتماد على امتداد للجافاسكريبت اسمه JSX بهدف إنشاء قوالب بتركيب يشبه شكل HTML ولكن داخل أكواد الجافاسكريبت. هذه القوالب يتم فيما بعد تحويلها لأكواد جافاسكريبت عادية حتى يمكن للمتصفحات التعامل معها. للمزيد من التفاصيل حول هذا الموضوع : Introducing JSX 2. Virtual DOM الإعتماد على ما يعرف ب Virtual DOM بغرض جعل عملية معالجة شجرة DOM في المتصفح أكثر سرعة وكفاءة، حيث يتم تحديث المقاطع أو الأجزاء فقط التي تغيرت حالتها ( State ) في واجهة المستخدم. شعبية React.js جارفة، حيث تجاوز عدد الإعجابات (النجوم) التي حصلت عليها في منصة Github أزيد من 94 ألفا! لتكون بذلك ثاني أكثر حزمة ويب شعبية في Github بعد Bootstrap. نمط Flux تبنت فيسبوك نمط Flux عوضا عن نمط MVC الذي كان دائما هو (أو أحد مشتقاته) النمط الشائع في جميع أطر عمل جافاسكريبت. هذا النمط يتألف من ثلاثة أجزاء أساسية هي : Views : وهي ممثلة بمكونات React التي تشكل واجهة التطبيق الرسومية. Stores : وهي المخازن حيث توجد جميع البيانات التي تعتمد عليها المكونات (Components) من أجل تحديد حالتها في نقطة زمنية معينة. Dispatchers : تقوم المكونات بإطلاق ما يعرف ب Dispatchers بهدف تحديث البيانات في المخازن، ما يعني بعد ذلك مباشرة تحديث حالة (State) المكونات والتطبيق بحسب نوعية Dispatcher الذي تم إرساله للمخزن. عندما نتحدث عن Flux، فإننا نتكلم عن النمط (Pattern) النظري الذي صممته فيسبوك ليشكل أساسا لبناء واجهاتها الرسومية، ولكن قد يعنى به كذلك مكتبة Flux التي طورتها فيسبوك بهدف تنفيذ ومحاكاة هذا النمط على أرض الواقع. توجد عدة مكتبات قامت بتنفيذ (Implement) نمط Flux، لعل أشهرها مكتبة Redux التي تحظى بشعبية ممتازة في بيئة React.js. وقاد قام مطورها – Dan Abramov – بتنفيذ نمط Flux بطريقته الخاصة حيث الإعتماد على مخزن واحد للبيانات عوض خاصية المخازن المتعددة في نمط ومكتبة Flux. GraphQL GraphQL هو لغة صممت من طرف فيسبوك من أجل بناء الواجهات البرمجية بطريقة جديدة، لتحل بذلك محل طريقة REST المعروفة والتي كانت دائما الخيار الأول وتقريبا الأوحد لدى المطورين. قامت شركة فيسبوك بإطلاق مشروع GraphQL في عام 2015 أمام المطورين، بعدما تم استخدامه داخليا لعدة سنوات قبل ذلك في مشاريع الشركة. العديد من الشركات والعلامات التجارية الكبيرة سارعت لتبني نظام GraphQL في واجهاتها البرمجية، شركات من قبيل Github، تويتر، نيويورك تايمز، شوبفاي وعشرات الشركات الأخرى كلها اقتنعت بإمكانيات GraphQL كبديل أول لبنية RESTful. GraphQL مشروع مستقل وليس موجها لأية لغة برمجة بعينها، ولكن يمكن التعامل معه بجميع لغات البرمجة المعروفة تقريبا كما ستلاحظون عند زيارة هذه الصفحة من الموقع الرسمي. خادم GraphQL يقوم بعرض نقطة نهائية (Endpoint) واحدة عوضا عن خاصية النقاط المتعددة (Multiple Endpoints) في بنيات REST. المستخدم يقوم بإرسال طلبه لهذه النقطة وسيتولى الخادم مهمة معالجة الطلب وإرسال الجواب على شكل كائن من نوع JSON. مثال : { book(id: "1") { title } } 1 2 3 4 5 { book(id: "1") { title } } الجواب سيكون على هذا الشكل : { "title": "Harry Potter" } 1 2 3 { "title": "Harry Potter" } لا حظوا بأننا طلبنا فقط حقلا واحدا (title) من الجدول Book في قاعدة البيانات، هذه من الميزات الممتازة في GraphQL حيث نطلب ما نحتاجه فقط. في طريقة REST عند القيام بطلب GET لجلب معلومات كتاب معين من قاعدة البيانات، فإننا سنحصل على جميع معلومات الكتاب حتى عندما نحتاج لمعلومة واحدة فقط كما في مثالنا. على كل سأحاول إنجاز درس تفصيلي عن GraphQL في قادم الأيام إن شاء الله لكي تفهموا الموضوع جيدا. مكتبة Jest مكتبة Jest هي واحدة من عشرات المكتبات الخاصة باختبار الشفرات المصدرية لتطبيقات الجافاسكريبت. قامت شركة فيسبوك بتطوير هذه المكتبة لتكون الطريقة الرسمية المعتمدة لفحص واختبار تطبيقات React.js، مع العلم أنها مكتبة مستقلة بذاتها ويمكن استخدامها كأداة لفحص مختلف مشاريع وتطبيقات جافاسكريبت. عند إنشاء مشروع React.js بواسطة الحزمة create-react-app فإنه يتم إضافة مكتبة Jest بشكل افتراضي لحزمة المشروع وإعدادها لتعمل مباشرة عن طريق تنفيذ الأمر npm test. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
عوامل تساعد علي تطوير موقع الويب الخاص بمتجرك الإلكتروني	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	08-04-2019 06:52 PM
تعرف علي تطبيقات الويب أحادية الصفحة (spa)	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 05:51 PM
ما هي طريقة تعزيز سرعة ووردبرس	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 03:11 PM
الفرق بين اسم النطاق و استضافة الويب	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	27-03-2019 10:09 PM
أساليب تساعد في تطوير الذات	رفيق الدرب	المواضيع العامة	0	07-02-2019 03:22 AM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)