يقول مؤلف المادة ، التي نُنشر ترجمتها اليوم ، إنه يريد أن يطلع القراء على توقعات بشأن تطوير تقنيات الويب للسنوات المقبلة. على وجه الخصوص ، سوف نتحدث هنا عن ما ، حسب المؤلف ، من المحتمل أن يكون المطورون الأماميون يستحقون البدء في التعلم اليوم.
كل ما يتعلق بـ JavaScript يتطور بسرعة كبيرة. هذا ينطبق أيضا على ما يمكن أن يعزى إلى مجال تطوير الشبكة. في الوقت الحاضر ، بدأ أولئك الذين لا تعتمد مشاريعهم على أحدث التقنيات في الشعور بالفجوة بين ما يستخدمونه والتقنية الجديدة التي تظهر يوميًا تقريبًا. تتضمن هذه التقنيات Webpack و React و Jest و Vue و Angular في حالتها الحالية. في حين أن "السكان" في عالم التطوير الأمامي ، والذي يشمل المتخصصين الفنيين والمبرمجين ، ينمو باستمرار ، فإن هذا العالم يسعى جاهداً للتوحيد القياسي. ظهور التقنيات والأدوات الجديدة يغير الوضع بالفعل.
يمكننا القول بدرجة معقولة من اليقين أن توحيد تطوير واجهات المستخدم سيكون اتجاهًا شائعًا في تطوير التقنيات الأمامية. على وجه الخصوص ، نحن نتحدث عن تكوين قائم على مكونات ، والرغبة في أنظمة وحدات. يؤثر هذا الاتجاه على كل شيء تقريبًا - بدءًا من التصميم وحتى الاختبار وحتى إدارة حالة التطبيقات. يمكن أن يشمل هذا الاتجاه التقنيات المبنية على مكونات الويب ، وحدات ES ، والأدوات المناظرة والمزيد هنا.
1. أنظمة للعمل مع مكونات الويب ، مستقلة عن الأطر والمكتبات
بشكل عام ، يمكننا أن نقول أن هذا هو المستقبل. لماذا؟ الشيء هو أن الأنظمة المعنية مستقلة عن الأطر. هذا يعني أنه يمكنهم العمل بشكل مستقل تمامًا مع أي إطار عمل ، نظرًا لميزاته المتعلقة بتقديم التعليمات البرمجية. لا تتميز هذه الأنظمة بما يسمى "تعب جافا سكريبت" ، "التعب جافا سكريبت". يتم دعمها بواسطة المتصفحات الحديثة. في المشاريع التي تم إنشاؤها باستخدامها ، يتم تضمين المبلغ الأمثل من التعليمات البرمجية المساعدة. أنها تستفيد بشكل جيد من قدرات VDOM.
تم تصميم المكونات المعنية باستخدام معيار Custom Elements. يتيح لك إنشاء علامات HTML جديدة ، وضبط خصائصها - من المظهر إلى الآليات الداخلية وميزات العمل مع Shadow DOM.
المشاريع البارزة في هذا المجال هي
Lit-html (و
Lit-element ) و
StencilJS و
SvelteJS و
Bit .
كيف يجب أن تبدو مبادئ التوحيد وإعادة الاستخدام والتعبئة والتوحيد في عصر المكونات؟ إذا فكرت في ذلك ، فكرت في مستقبل تطوير واجهة المستخدم ، اتضح أن هذا المستقبل يمثله مكونات الويب. سوف نعود إلى هذه الفكرة. في هذه الأثناء ، إليك بعض المواد المفيدة على مكونات الويب.
هنا يمكنك قراءة الأدوات اللازمة لتطوير مكونات الويب.
فيما يلي مواد حول مكتبات مكونات الويب. يمكنك
هنا العثور على مثال عن النماذج الأولية لقارئ RSS باستخدام مكونات الويب.
2. حول مستقبل حروب الأطر والمكتبات
من حيث عدد التنزيلات من NPM ، لا يزال React يتخطى بثبات Angular و Vue. على الأقل حتى الآن .هنا لن نتحدث عن الأطر والمكتبات الأفضل من غيرها وعن سبب ذلك. إذا كنت مهتمًا بالقراءة حول هذا الموضوع -
فهذه هي - المواد التي تُقارن فيها البيانات الزاويّة و React و Vue بناءً على بيانات حقيقية. سوف ندرس الصورة الكبيرة. ويبدو كما يلي: في التطوير الأمامي ، تزداد حصة التقنيات المستندة إلى المكونات. انها تنمو باستمرار. يتزايد عدد المطورين الذين يستخدمون تقنيات مشابهة ، وبسرعة. بالإضافة إلى ذلك ، يوجد في هذا المجال مساحة حرة كافية لإدخال أدوات جديدة.
لذلك ، ما هو الإطار الذي سيأتي أولاً بعد 5 سنوات؟ لا أحد يعرف ذلك. لكن من الآمن القول أن الشخص الذي يرغب في الاستعداد للمستقبل يجب أن يدرس التقنيات الأساسية لنظام جافا سكريبت البيئي وأن يعتاد على البيئة التي يتم فيها التحكم في DOM من خلال مكونات الويب. ربما في 5 سنوات سيكون React الأداة الرائدة لتطوير الواجهة. يمكنك التفكير في هذا من خلال النظر إلى الرسم البياني أعلاه ، المبني على بيانات NPM. لكن ليس بهذه البساطة. ألقِ نظرة ، على سبيل المثال ، على
هذه المقاييس. إنها تسمح لنا أن نقول ، من حيث الاستخدام الفعلي ، الفجوة بين React و Vue صغيرة جدًا.
Vue و React ، من حيث استخدامها الفعلي ، قريبة جدافي المستقبل ، نتوقع تحسين توحيد مكونات الويب بشكل مستقل عن الأطر. في هذا الصدد ، يمكن للمرء أن يفكر في تأثير ذلك على الحرب الإطارية. وبالمناسبة ، كما نعلم جميعًا ، فإن React ليس حتى إطارًا ، لكنه مجرد مكتبة.
3. عزل وإعادة استخدام وتكوين المكونات
Bit هو مثال على نظام أساسي يركز على تطوير المكونات والتعاون معها وإعادة استخدامهاالحديث عن تطوير الواجهة الأمامية والمكونات التي بنيت منها واجهات المستخدم ، لا يسع المرء إلا أن يتذكر
بت .
تسمح لك هذه المنصة
مفتوحة المصدر بعزل المكونات (أو أي أجزاء من كود JS مناسبة لإعادة الاستخدام) وتحويلها إلى لبنات بناء يمكن استخدامها في العديد من المشاريع. في هذه الحالة ، يمكن للمطور التحكم في الكود المصدري للمكونات وإدارة تغييراته وشجرة كاملة من التبعيات الخاصة به.
ببساطة ، بفضل Bit ، يتمتع المطور بفرصة تحسين مكوناته ضمن مشاريع مختلفة ومزامنة التغييرات. بفضل
محور مكونات
bit.dev ، تمتد هذه الفكرة إلى تطوير الفريق ، مما يتيح لأعضاء الفريق تنظيم التعليمات البرمجية ومشاركتها.
يمنح لوحة الوصل للمطور كل ما هو مطلوب لإنشاء المكونات واستخدامها بشكل مشترك. على سبيل المثال - أدوات البحث المريحة ، وهي بيئة تفاعلية يمكنك من خلالها تجربة المكونات ، ودعم كامل لـ CI / CD.
بفضل Bit ، لا يمكنك استخدام المكونات التي تم إنشاؤها بواسطة جهود فريقك فقط ، ولكن أيضًا استخدام المشاريع مفتوحة المصدر. يتضمن ذلك القدرة على التوصية بالتغييرات على المكونات الحالية ، والقدرة على مشاركة تطوراتها.
4. وحدات ES و CDN
الوحدات النمطية ES هي جزء من معيار ES6 الذي يصف كيفية التعامل مع الوحدات النمطية في المستعرض. يتيح لك استخدام هذه التقنية نقل بعض الوظائف إلى الوحدات النمطية التي يمكن تنزيلها ، على سبيل المثال ، عبر CDN. بعد إصدار Firefox 60 ، يمكننا القول إن وحدات ES تدعم
جميع المتصفحات الرئيسية . العمل على دعم وحدات ES جاري أيضًا في
Node.js. بالإضافة إلى ذلك ، من المتوقع إضافة دعم الوحدات النمطية ES إلى
WebAssembly .
5. إدارة الحالة على مستوى المكون
ما الجديد في إدارة حالة التطبيق؟ في هذه الأيام ، تتلخص إدارة الدولة في وضع أي شيء في مستودع Redux العالمي.
ولكن قد يؤدي هذا النهج إلى تعقيد العمل بالمكونات ، وقد يصبح عقبة أمام الكشف الكامل عن قدراتها من حيث إعادة الاستخدام والوحدة. إذا أخذنا في الاعتبار الموقف من وجهة النظر هذه ، فيمكننا القول أن مشاريع مثل MobX توفر لنا طريقة ممتعة وأكثر تفاعلًا للتعامل مع حالة التطبيقات (هنا يمكنك أيضًا استدعاء المشروع
غير المعلن ).
إذا تحدثنا عن آليات React القياسية الجديدة لإدارة الحالة ، فيمكننا استدعاء واجهة برمجة التطبيقات والسياقات. مظهرهم يعني أن المبرمج لم يعد بحاجة إلى مكتبات تابعة لجهات أخرى لإدارة الحالة ، ويمكن إدارة هذه الحالة على مستوى المكونات الوظيفية. هذا يحسن من نمطية المشاريع والقدرة على إعادة استخدام المكونات.
نتيجة لذلك ، إذا حاولت النظر إلى المستقبل ، فقد يحدث أن يستخدم مصطلح "الحالة" بشكل أساسي في التطبيق للمكونات المغلفة ، وليس في التطبيق على بعض مستودعات البيانات العالمية لمستوى التطبيق.
6. تبسيط المكونات هو تكوين
فصل المكونات التي تنفذ المنطق والأنماط - طريقة تبسيط المكونات من خلال التكوينلقد قيل الكثير عن كيفية تصميم المكونات. هناك العديد من الفرص في هذا المجال. هذه هي CSS مدمجة ، CSS modules ، وصف CSS في كود JS ، مكونات منمقة ، وحلول وسيطة مثل Stylable.
بالتفكير في التصميم المستقبلي للمكونات ، أميل إلى تخيل التصميم كتركيبة. هذا يعني أن أنظمة تصميم المكونات يجب أن تشمل كلا من المكونات التي تنفذ بعض المنطق والمكونات التي تصف الأنماط. مع هذا النهج ، من الممكن إنشاء نظام تصميم مكون يتطور مع تطور المشروع. هذا يلغي الحاجة للمطورين لإتقان المكتبات الضخمة للتصميم. الأدوات المستخدمة لتصميم مكونات مثل Sketch أو Figma يمكن أن تستخدم هذه الفكرة أيضًا.
7. GraphQL-API وتطبيقات العميل المستندة إلى البيانات
توفر تقنية GraphQL ونهج التطوير القائم على المكونات فرصًا مثيرة لتطبيقات العميل المستندة إلى الويب. على سبيل المثال ، باستخدام
Apollo ، يمكنك بسهولة إنشاء مكونات واجهة المستخدم التي تعمل مع البيانات من خلال GraphQL. هناك العديد من
الأدوات الأخرى التي تجعل العمل مع GraphQL أسهل.
تعمل المعالجة المعقولة لمختلف واجهات برمجة التطبيقات على تبسيط عملية تطوير التطبيقات القائمة على البيانات. هذا يسمح لك بزيادة سرعة التنمية. نتيجةً لذلك ، تعد GraphQL تقنية يجب الاهتمام بها لأولئك الذين يفكرون في المستقبل.
8. أدوات المصمم المستندة إلى مكون
أصبحت المكونات تدريجيا جزءًا لا يتجزأ
من أنظمة تصميم مشاريع الويب. هذا يقلل من الفجوة بين المصممين والمبرمجين. كلاهما يقترب من بعضهما البعض.
على سبيل المثال ، يوفر
Sketch بالفعل أدوات للتطوير المعياري لتصميمات المكونات التي تتطلب تبعيات بين المكونات. يوجد بالفعل
أدوات للعمل في Sketch مع مكونات تشكل العرض التقديمي المرئي برمجياً. الاستخدام الواسع النطاق لهذه الأدوات هو مجرد مسألة وقت. تستهدف أدوات مثل
Figma بشكل أساسي مكونات واجهة المستخدم القابلة لإعادة الاستخدام. يقوم مشروع
Framer بتطوير أداة لمصممي البرمجة. تتيح هذه الأداة للمصممين التحكم في كيفية تحويل عناصر واجهة المستخدم إلى مكونات React.
النتائج
هنا قدمنا لك عدة اتجاهات في تطوير الويب للعميل ، والتي ، وفقًا لمؤلف المادة ، يجب أن تهتم بالشخص الذي يريد أن يكون مستعدًا للمستقبل. نأمل أن يكون هذا المنشور قد قدم لك الطعام للتفكير.
أعزائي القراء! كيف ترى مستقبل تطوير الويب؟
