الواجهة الأمامية 2019: نتائج العام

في عام 2019 ، تطور عالم التطوير الأمامي ، كما حدث بالفعل ، بسرعة مذهلة. إن المادة ، التي نترجمها اليوم ، مكرسة لمراجعة الأحداث والأخبار والاتجاهات المهمة لعام 2019.



وهنا ، بالمناسبة ، مادة مماثلة نشرناها في عام 2018. هناك ، في النهاية ، هناك قسم للتوقعات لعام 2019. في رأينا ، الكثير منهم كان له ما يبرره. هذا المقال لن يخلو من التوقعات ، لكننا لن نتقدم على أنفسنا.

حول تنزيل أطر عمل الواجهة الأمامية والمكتبات من npm

تأخذ مكتبة React مرة أخرى راحة اليد وتستمر في النمو ، وجاء jQuery ، الغريب ، في المرتبة الثانية. ليس بعيدا عن قادة ذهب الزاوي و Vue. كل من هذه الأطر لديها قاعدة قوية من المطورين المتحمسين. حظي إطار Svelte باهتمام عام كبير هذا العام ، لكن تنفيذه لم ينشط بعد.


قم بتنزيل الأطر الأمامية والمكتبات من npm ( المصدر )

تصبح WebAssembly هي اللغة الرابعة على الويب ، حيث تنضم إلى HTML و CSS و JavaScript

بعد سنة هادئة إلى حد ما ، كانت تقنية WebAssembly ، في بداية شهر ديسمبر ، معروفة للجميع. الحقيقة هي أنه ينصح رسميا لتطوير W3C على شبكة الإنترنت. W3C (World Wide Web Consortium) هي منظمة دولية مركزية مكرسة لتوحيد تقنيات الويب.

جذبت تقنية WebAssembly ، منذ طرحها في عام 2017 ، اهتمامًا واسع النطاق. كثير بالفعل استخدامها. في السنوات السابقة ، تم إصدار مواصفات WebAssembly 1.0 ؛ تم دمج دعم هذه التكنولوجيا في جميع المتصفحات الرئيسية.

آخر 2019 الأخبار المتعلقة WebAssembly يرتبط تشكيل Bytecode التحالف . هدف منظمات التحالف هو تأمين مستقبل WebAssembly خارج المستعرض ، والعمل معًا لتنفيذ المعايير واقتراح معايير جديدة.

ما زلنا ننتظر اللحظة التي يتم فيها تعزيز موقع WebAssembly بشكل حقيقي ، عندما يتم تنفيذ هذه التكنولوجيا بكميات كبيرة. كل تحسين في WebAssembly يجعلنا أقرب إلى هذه النقطة. يعد بيان W3C ، بالطبع ، خطوة كبيرة نحو إضفاء الشرعية على هذه التكنولوجيا في عالم الشركات. نحتاج إلى الاستمرار في خفض حواجز الدخول إلى عالم برمجة WebAssembly ، والتي سوف تبسط تطوير مشاريع WebAssembly الجديدة.

استخدام TypeScript ينمو بسرعة ، يعترف العديد من المطورين بالحب لهذه اللغة

2019 يمكن أن يسمى سنة TypeScript. هذه اللغة لم تصبح فقط المعيار الفعلي في حل مشكلة كتابة كود JS. يفضل العديد من المطورين أيضًا ذلك على جافا سكريبت عادي في المشروعات الشخصية وفي العمل.

في دراسة أجرتها StackOverflow نُشرت في وقت سابق من هذا العام ، تشترك TypeScript في ترتيب اللغات الأكثر شعبية بين المطورين ، في المرتبة الثانية مع Python ، خلف Rust فقط. ولن يكون الأمر مفاجئًا إذا ارتفع TypeScript إلى مستوى أعلى في نفس الدراسة ، التي من المتوقع أن يتم إخراجها في أوائل عام 2020.


العديد من المطورين يحبون TypeScript

لقد استغرق TypeScript حرفيًا عالم تطوير الويب. وهذا ينطبق على كل من الواجهة الأمامية والخلفية. حاول بعض المبرمجين استبعاد TypeScript باعتباره اتجاهًا آخر قصير الأجل. ظنوا أنه سيتقاسم مصير Coffeescript المحزن. لكن TypeScript أثبتت جدواها في حل المشكلة الأساسية لتطوير JS. هناك شعور بأنه مع مرور الوقت تتزايد شعبيتها فقط.

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

إذا تحدثنا عن شعبية TypeScript ، تجدر الإشارة إلى أنه في عام 2019 تفوقت React في عدد التنزيلات من NPM. لديه أيضًا الكثير من التنزيلات أكثر من منافسيه - مشاريع مثل Flow and Reason.

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


تجاوز TypeScript التفاعل في NPM

تم إصدار TypeScript 3.0 في نهاية عام 2018. في عام 2019 ، حصل على الإصدار 3.7 ، والذي تضمن أحدث ميزات معيار ECMAScript ، مثل السلاسل الاختيارية والتحقق من القيم null فقط وغير undefined . قام الإصدار الجديد من TypeScript بتحسين الوظائف المتعلقة بالعمل مع الأنواع.

React تواصل القيادة ، والمطورين متحمسون السنانير

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

في نهاية عام 2018 ، أصدر فريق React ما يسمى السنانير. في عام 2019 ، استولت السنانير حرفيا عالم React. الغالبية العظمى من مطوري React يستخدمونها كآلية أساسية لإدارة حالة المكونات وللتعامل مع الأحداث في دورة حياتهم. على مدار العام ، تمت كتابة مقالات لا تعد ولا تحصى عن الخطافات ، وأصبحت أنماط استخدامها أكثر وضوحًا ، وبدأت حزم React الأكثر أهمية في توفير خطاطيف مخصصة يمكن استخدامها للعمل مع هذه الحزم.

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

يولي فريق تطوير React اهتمامًا خاصًا لراحة المبرمجين والأدوات التي تساعد على العمل بشكل أكثر إنتاجية. بعد ظهور الخطافات بصوت عالٍ في React 16.8 ، حيث حصلت المكتبة على الإصدار 16.4 في عام 2019 ، لم تكن بقية الابتكارات كبيرة جدًا.

يمكن القول أنه بعد إطلاق الخطافات ، ركز فريق تطوير React على راحة المبرمجين من خلال إنشاء أدوات مساعدة. أصبحت راحة المبرمج ، الأحاسيس التي يواجهها أثناء تطوير تطبيقات React ، هي الموضوع الرئيسي لمؤتمر React Conf 2019. قال توم أوتشينو ، رئيس المؤتمر الرئيسي ومدير فريق React ، إن مشاعر المطور حول استخدام React تستند إلى ثلاث أفكار: إدخال منخفض حاجز ، إنتاجية عالية ، قابلية الحلول. ألقِ نظرة على ما تم إصداره (أو تم التخطيط لإصداره) من قبل فريق React لدعم هذه الأفكار:

• نسخة جديدة من React Developer Tools.
• منشئ أداء جديد.
• إنشاء تطبيق React v3.
• تحديثات الأداة المساعدة للاختبار.
• الوضع التنافسي (متوقع).
• نظام CSS-in-JS المستخدم بواسطة Facebook (متوقع).
• إعداد تدريجي / انتقائي لرمز الصفحة المقدم مسبقًا للعمل (متوقع).
• الرد على التحسينات الأساسية فيما يتعلق بالتوافر (متوقع).

من المعتقد أنه إذا كان المبرمج يعمل بسرور ، فسوف ينجح في شيء من شأنه أن يسبب انطباعًا إيجابيًا على المستخدمين. نتيجة لذلك ، فإن مبادرة React Developer Initiative الموضحة أعلاه هي فوز للجميع. إليك حديث من React Conf 2019 حول ميزات React المتوقعة ، وهنا رابط لجميع المحادثات من هذا الحدث.

إطار Vue يستعد لإصدار الإصدار 3 ، ويزداد استخدامه

ربما ، على الرغم من أنه لا يمكن تسمية Vue بالإطار الأكثر شيوعًا ، إلا أنه من الصعب عدم ملاحظة وجود مجتمع من حوله ، حيث يكون أعضاؤه متحمسين لأعمالهم لا مثيل لها. من المعروف أن Vue استفادت من React and Angular ، ولكن من الأسهل بناءها أكثر مما هي عليه. ميزة أخرى مهمة لـ Vue هي الانفتاح الأكبر ، وأنها لا تتحكم فيها أي شركة كبيرة مثل Facebook (React هي من بنات أفكارها) أو Google (تدعم هذه الشركة Angular).

الأخبار الرئيسية في العالم فو هو الإصدار القادم 3.0. ومن المتوقع إصدار ألفا في نهاية العام. هذا العام ، تلقى Vue 2.x سوى عدد قليل من التحديثات ، وكان أقرب إلى بداية العام. الحقيقة هي أن جميع قوى المطورين تهدف إلى إصدار Vue 3.0.

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

كانت المشكلة الرئيسية التي أزعجت مطوري Vue تغييرًا كبيرًا في واجهة برمجة تطبيقات الإطار. ومع ذلك ، بعد ظهور رد الفعل السلبي هذا ، قيل إن واجهات برمجة التطبيقات الجديدة ستضاف إلى القديمة وأنهم سيكونون متخلفين مع Vue 2. يقول العديد من المطورين إنه إذا كان إصدار Vue الجديد لا يبدو بالطريقة التي يريدونها ، فسوف ينظرون القدرة على التبديل إلى Svelte. يخشى الناس من أن تغيرات Vue ستجعل هذا الإطار يشبه رد الفعل. على الرغم من أن العديد من أفراد المجتمع ما زالوا قلقين بشأن مستقبل الإطار ، هناك شعور بأن الضوضاء قد خفت وأن الجميع ينتظر إصدارًا جديدًا.

في Vue 3 ، بالإضافة إلى الوظيفة المثيرة للجدل ، من المتوقع ظهور بعض الميزات الجديدة المثيرة للاهتمام والتغييرات المفيدة:

• تكوين API.
• التغييرات في التكوين وجبل واجهات برمجة التطبيقات.
• شظايا.
• دعم تقنية تقطيع الوقت (تجريبية).
• دعم متعددة الخامس نموذج.
• البوابات.
• توجيهات مخصصة جديدة API.
• تحسين التفاعل.
• إعادة كتابة DOM الظاهري.
• رفع الخصائص الساكنة.
• ربط دعم API (تجريبية).
• تحسين توليد الفتحات (الفصل بين التقديم لمكونات الوالدين والطفل).
• تحسين دعم TypeScript.

حدث بارز في عالم Vue كان إصدار الإصدار الرابع من Vue CLI هذا العام ، حيث ينصب التركيز الرئيسي على تحديث الأدوات الأساسية.

إليكم حديث إيوان يو عن فيو.

يتم طرح الإصدارين الثامن والتاسع من Angular ، بالإضافة إلى محرك التجميع / التقديم الجديد Ivy

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

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

في عام 2019 ، تم إصدار الإصدار 8 من Angular. في نفس العام ، تم إطلاق محرك التجميع / التقديم الجديد Ivy. القوة الرئيسية لبلاب هو أنه يقلل من حجم الحزم. ولكن ، في الواقع ، فإنه يجلب إلى الزاوي والعديد من الفوائد الأخرى. الآن ، قبل إصدار Angular 9 ، تعد Ivy ميزة اختيارية. هنا يمكنك قراءة تفاصيل الجديد في Angular 8. أود بشكل خاص ملاحظة ما يلي:

• تحميل تفاضلي لرمز JavaScript الحديث.
• فرصة للتعرف على تقنية اللبلاب.
• ضمان التوافق العكسي لجهاز التوجيه الزاوي.
• تحسين تجميع عمال الويب.
• القدرة على تمرير معلومات المطورين الزاويين حول استخدام Angular CLI.
• تحديثات التبعية.

خلال ديسمبر 2019 ، كان فريق Angular يستعد لإصدار Angular 9. يبدو أن هذا الإصدار من الإطار سيتم إصداره إما في نهاية هذا العام أو في بداية اليوم التالي. أكبر ابتكار في Angular 9 هو أن Ivy ستصبح محرك العرض القياسي. إليك مقطع فيديو يمكنك مشاهدته لمعرفة المزيد حول Angular 9.

الآن يتم إيلاء المزيد من الاهتمام لإمكانية الوصول (a11y) والتدويل (i18n) عن ذي قبل

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

إليك ما يقولونه حول إمكانية الوصول على MDN : "إمكانية الوصول هي ممارسة تسمح باستخدام موقعك من قبل أكبر عدد ممكن من الأشخاص. نعتقد تقليديًا أن هذا هو إمكانية الوصول للأشخاص ذوي الإعاقة ، ولكن في الواقع ، يشمل هذا الرقم مجموعات المستخدمين الأخرى التي تستخدم الأجهزة المحمولة أو لديها اتصال شبكة بطيء. "

وإليكم ما يقال حول التدويل على w3.org : "إذا كنت تدويل مشروعًا ، فهذا يعني أنك تقوم بتصميم أو إنشاء المواد والتطبيقات والمواصفات الخاصة بك وغيرها من الموارد المماثلة بحيث تتيح لهم العمل بشكل طبيعي للمستخدمين الذين ينتمون إلى أي ثقافة العيش في أي منطقة ، أو التحدث بأي لغة ، أو تسهيل تكييفها مع هؤلاء المستخدمين. "

ميزات ES2019

يواصل ECMAScript (المواصفات التي تستند إليها JavaScript) متابعة دورة التحديث السنوية لهذا العام. يحتوي معيار ES2019 على العديد من الميزات الجديدة . هؤلاء بعض منهم:

• Object.fromEntries() .
• String.trimStart() و String.trimEnd() .
• تحسين دعم يونيكود في طريقة JSON.stringify() .
• طريقة Array.flat() .
• طريقة Array.flatMap() .
• تحسين العمل مع try/catch .
• خاصية description للكائنات Symbol .

على الرغم من ظهور ميزات جديدة مثيرة للاهتمام للغاية في ES2019 ، إلا أن الأمور قد تطرأ في معيار ES2020 القادم الذي من المحتمل أن يكون الأكثر توقعًا منذ ES6 / ES2015:

• حقول الصف الخاص.
• السلاسل الاختيارية هي obj.field?.maybe?.exists .
• التحقق من القيم فقط على item ?? 'use this only if item is null/undefined' null وغير undefined item ?? 'use this only if item is null/undefined' item ?? 'use this only if item is null/undefined' .
• BigInt البيانات.

المتفجرة رفرفة شعبية

خرج الرفرفة بعد عامين من React Native ، لكنه اكتسب شعبية بسرعة. هذا المشروع قريب جدًا من React Native من حيث عدد النجوم على جيثب. وإذا استمرت شعبية المشروع في النمو بنفس الوتيرة ، فستتجاوز "React Native" قريبًا. ينافس Flutter مع React وهو أداة أخرى لتطوير تطبيقات الأجهزة المحمولة.

بالنظر إلى أن Flutter لا يمكن أن تفتخر بالمجتمع نفسه من المطورين الودودين الذين يمتلكهم React Native ويمثلهم مطورو الويب الذين يستخدمون React ، فإن هذه النجاحات تبدو مثيرة للإعجاب بشكل خاص. هدف Flutter هو أن يكون أفضل إطار لتطوير الأجهزة المحمولة عبر الأنظمة.

فيما يلي جدول يتم فيه مطابقة React Native و Flutter مع بعض المؤشرات.

اندمجت Node.js Foundation و JS Foundation لتشكيل مؤسسة OpenJS ؛ سيكون Node.js 12 هو الإصدار LTS

من أجل دعم نظام جافا سكريبت البيئي وتسريع نمو اللغة ، اندمجت مؤسسة Node.js ومؤسسة JS لتشكيل مؤسسة OpenJS . الفكرة الرئيسية لهذه الخطوة هي إقامة تعاون وتطوير تكنولوجي تحت رعاية منظمة محايدة ، توحد الآن 31 مشروعًا مفتوح المصدر. تتضمن هذه المشاريع Node و jQuery و Webpack. يمكن اعتبار هذه المبادرة حركة إيجابية لمجتمع JS بأكمله. وهو مدعوم من قبل شركات التكنولوجيا الرائدة مثل Google و IBM و Microsoft.

ستتلقى النسخة الثانية عشرة من Node.js ، التي تم إصدارها هذا العام ، وفقًا للتقاليد المعمول بها ، دعمًا طويل الأجل (LTS ، دعم طويل الأجل) حتى أبريل 2023. يوفر Node.js 12 العديد من الميزات الجديدة والتحديثات الأمنية وتحسينات الأداء. تتضمن بعض الابتكارات البارزة الدعم الأصلي لبنيات import/export ، ودعم حقول الفئة الخاصة ، والتوافق مع الإصدار 7.4 من محرك V8 ، ودعم TLS 1.3 ، وظهور أدوات تشخيص إضافية. هنا مادة على Node.js 12 الابتكارات.

يجذب إطار Svelte الكثير من الاهتمام ، لكنه لم يستخدم بعد على نطاق واسع.

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

• مطوري Svelte كتابة رمز أقل.
• لا يستخدم الإطار DOM الظاهري.
• انه رد فعل حقا.

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

تقدم Svelte للمطورين الأماميين شيئًا جديدًا وممتعًا ، مما لا يوفر لهم المزيد من الفرص ، ولكن أقل. في عام 2020 ، سيكون من المثير للاهتمام ملاحظة نمو وتطور Svelte. أتمنى أن نتمكن من رؤية أمثلة على استخدامه في المشروعات الكبيرة. سيُعلمك هذا كيف تبدو بالمقارنة مع أكبر منافسيها - React و Vue و Angular.

لا تزال المواقع الثابتة ذات صلة ، والمطورين يقدمون JAMStack

أثبتت المواقع الثابتة أنها جزء من الويب ولن تتخلى عن وظائف. يتم دعم هذا البيان من خلال التوسع في استخدام الأطر مثل Gatsby ، والنمو السريع لاستضافة المواقع الثابتة مثل Netlify ، وعدد لا يحصى من الشركات الجديدة التي تنشئ CMS بدون واجهة مستخدم.

تجمع المواقع الثابتة بين ما كان موجودًا بالفعل على الويب وأدوات ومكتبات جديدة. إنها تسمح لك بإنشاء مشاريع لا تضاهى مع أي شيء آخر. يمكننا إنشاء مواقع باستخدام مكتبات حديثة مثل React ، ومن ثم يمكننا تجميعها في صفحات HTML ثابتة أثناء بناء المشروع. منذ الآن يتم تخزين جميع الصفحات الجاهزة ، لا ينفق الخادم الموارد التي تملأها بالبيانات عندما يصل العميل إليها. يمكن تسليم الصفحات إلى العميل على الفور ، حيث يمكن للمشاريع الاستفادة الكاملة من مزايا التخزين المؤقت لشبكة CDN. يتيح لك ذلك الحفاظ على محتوى المواقع أقرب ما يكون إلى مستخدميها.

عند إنشاء مواقع ثابتة ، يكون نمط JAMStack (JavaScript ، API ، Markup) شائعًا للغاية. هذه طريقة مختلطة تجمع بين المواقع الثابتة وتطبيقات الصفحة الواحدة. باستخدام هذا النهج ، يتم إعطاء الصفحات للعميل في شكل ثابت ، ولكن عندما تظهر على العميل ، فإنها تتصرف مثل SPA ، والتي تستخدم واجهات برمجة التطبيقات وإجراءات المستخدم لتغيير حالة الواجهة.

PWAs تنمو ، وتنفيذها في تزايد

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

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

أدوات الواجهة الأمامية تصبح ذات جودة عالية حقًا

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

في السابق ، إذا كنت بحاجة لإنشاء SPA ، فستحتاج إلى إنشاء مجموعة من التبعيات الخاصة بك باستخدام Bower أو NPM. كان من الضروري فهم كيفية ترجمة الشفرة باستخدام Browserify أو Webpack ، كان عليك أن تكتب خادم Express من البداية وأن تبقي تطبيقاتك واقفة على قدميه في عواصف تحديثات المكتبة.

, , . , . , , Create React App, Vue CLI, Angular CLI. — Gatsby, , Expo, React Native. Next Nuxt , . GraphQL- Hasura, TypeScript- GraphQL Code Generator. Webpack. — , .

, « -»?

GraphQL ,

GraphQL , , REST. , , GraphQL. , API GitHub GraphQL , .

GraphQL- . , JSON-. API GraphQL , , API .

API GraphQL , , , TypeScript-. GraphQL Code Generator , TypeScript-, .

GraphQL . Apollo .


GraphQL

CSS-in-JS

-, , JavaScript. CSS-in-JS, , JavaScript-.

, , , JavaScript- import/export . , , , , CSS-in-JS , . , , Facebook CSS-in-JS — , .

, CSS CSS-in-JS. CSS , . , CSS-:

 // JS-  const MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div> } // CSS- .active { color: green; } .inactive { color: red; } 

CSS-in-JS CSS- . , . , React, , . JS-, React:

 const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header> ) 

styled-components emotion — CSS-in-JS-. emotion 2019 styled-components . , , , CSS-in-JS. , .


CSS-in-JS-

VS Code

IDE . , , , . -, , . , , VS Code. — , , , , .

State of JS Survey 2019 .


VS Code —

Webpack 5 -

Webpack , JavaScript-. — . Webpack , , . 5 Webpack :

• .
• .
• , , Webpack.

Jest Flow TypeScript

Facebook , Jest . Flow — TypeScript. 2019 , Jest Flow TypeScript. , TypeScript JS-. TypeScript 2020 , .

Chrome 72-78

Chrome . , -, . 2019 7 Chrome. Chrome 79 -, Chrome 80 dev-, Chrome 81 — canary-. , Chrome 2019 .

Microsoft Edge Chromium

Internet Explorer, Edge, - . , , . , - . , Microsoft Chromium Google. 2019 -.

Facebook Hermes — JavaScript- Android, React Native

Facebook , JavaScript- Android . — Hermes . Facebook React Native. , , React Native .

2020

, 2020 :

• - . PWA.
• WebAssembly , .
• GraphQL REST, , GraphQL.
• TypeScript .
• , , -. .
• CSS-in-JS , CSS, .
• «» . , . , . 2020 .
• Flutter React Native - .
• , Svelte.
• Deno ( TypeScript, Node.js).
• AR/VR A-Frame , React VR Google VR . AR/VR.
  
• - (Docker, Kubernetes).

أعزائي القراء! -2020?