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

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

توحيد WebAssembly

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

في النصف الثاني من عام 2017 ، أبلغ مطورو جميع المتصفحات الرائدة عن دعمهم لموقع WebAssembly. بعد ذلك ، في فبراير 2018 ، حدثت 3 أحداث مهمة: تم إصدار الإصدار الأول من مواصفات WebAssembly ، وتم نشر مواصفات واجهة JavaScript المقابلة وواجهة برمجة تطبيقات الويب .

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

تتضمن الوحدات الأربعة الأولى الأكثر شعبية التي تم تنزيلها من npm React و jQuery و Angular و Vue. أدناه سنتحدث عن الموقف مع المكتبات لتطوير الويب بمزيد من التفاصيل.


2018 تنزيل مكتبة الواجهة الأمامية من npm

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

لقد كان React رائدًا في تطوير الويب لسنوات عديدة. واصل نطاق استخدامها في النمو في عام 2018. لا تزال هذه المكتبة واحدة من أكثر المحبوبين بين المبرمجين ، وفقا لمسح أجرته Stack Overflow.

فريق تطوير React الأساسي نشط للغاية في تطوير المكتبة وإضافة ميزات جديدة إليها. خلال عام 2018 ، يمكن رؤية العديد من الإضافات إلى React v16 ، بما في ذلك أساليب دورة حياة المكونات الجديدة وواجهة برمجة التطبيقات (API) للسياق الجديدة وأحداث مؤشر الماوس الجديدة والوظائف البطيئة ومكون ترتيب أعلى React.memo جديد. تجدر الإشارة إلى أنه تم توجيه معظم الانتباه إلى خطافات API React و Suspense .

قوبلت رد فعل السنانير باهتمام كبير ، وكتبوا الكثير عنها ، وكان الكثير منهم يحبهم. تتيح لك هذه التقنية إضافة حالة إلى المكونات الوظيفية باستخدام وظيفة useState ، مما يتيح إدارة أحداث دورة حياة المكون.

إليك مقطع فيديو يوضح كيف يمكن أن يؤدي استخدام الخطافات إلى تحسين رمز تطبيق React بشكل ملحوظ.

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

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

تواصل Vue نمو تفاعلها بعدد النجوم على جيثب

بعد النمو الهائل لـ Vue في عام 2017 ، استمر نفس الشيء في عام 2018. تفوق هذا الإطار على React من حيث عدد النجوم على GitHub.

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

يتحدث إيوان يو (خالق Vue) كثيرًا عن Vue 3

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

الإطار الزاوي لا يزال يحظى بشعبية كبيرة ، الإصدار السابع

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

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

تجدر الإشارة إلى أن الحزمة @angular/core npm هي الزاوي الجديد ، والحزمة angular هي angular القديمة.

فيما يلي بيانات npm على تنزيلات @angular/core ، و angular ، و react و vue الحزم في 2018 ، بالإضافة إلى معلومات حول حالة هذه المشاريع من GitHub.


بيانات المشروع للزاوية / الأساسية ، الزاوي ، رد الفعل ، والفضيلة

يرغب المزيد والمزيد من المطورين في تعلم GraphQL ، لكن هذه التكنولوجيا لم تتجاوز REST.

لقد وجدت تقنية GraphQL تطبيقًا في بعض المشاريع الكبيرة مثل جيثب ، لكنها لم تنتشر على نطاق واسع بعد. وفقًا لدراسة حالة JS ، استخدم أكثر من 20٪ فقط من مطوري الواجهة الأمامية تقنية GraphQL ، لكن المؤشر الذي يميز أولئك الذين سمعوا عنها ويخططون لاستخدامها هو 62.5٪ مثير للإعجاب.


GraphQL Technology

أصبحت تقنية CSS-in-JS أكثر شيوعًا

عند تحليل بيئة تطوير الويب ، يشعر المرء بأنها في طريقها إلى توحيد كل شيء تمامًا باستخدام JavaScript. يكون هذا الاتجاه مرئيًا أيضًا عند تطبيقه على تقنية CSS-in-JS ، باستخدام الأنماط التي يتم إنشاؤها باستخدام أدوات سلسلة JS. يتيح لك ذلك العمل مع الأنماط والتبعيات باستخدام بناء جملة JS المعتاد وآليات الاستيراد والتصدير. بالإضافة إلى ذلك ، تعمل على تبسيط التصميم الديناميكي ، حيث يمكن للمكونات التي تستخدم 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 ، مما يسمح لـ CSS بالقيام بتصميم ديناميكي يعتمد على الخصائص. في React ، يبدو هذا الرمز جافا سكريبت عادي:

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

لتنفيذ ميزات CSS-in-JS ، يتم استخدام المكتبات مثل المكونات الأنيقة والعاطفة بشكل أساسي. توجد مكتبة مكونات Styled أطول من Emotion ، فقد أصبحت أكثر انتشارًا ، لكن شعبية Emotion تنمو بسرعة ، ويختارها كثير من المطورين. تجدر الإشارة إلى أن Kent S. Dodds توقف حتى عن العمل في مكتبة Glamorous CSS-in-JS ، مفضلاً العاطفة. إليك ما تبدو عليه مكونات Styled ومكتبات Emotion من حيث npm و GitHub.


مكونات نصية ومكتبات العاطفة في عام 2018

إطار عمل Vue يدعم CSS المحلي عند استخدام مكونات الملف المفرد دون استخدام مكتبات إضافية. للقيام بذلك ، ما عليك سوى إضافة الخاصية التي تم scoped إلى علامة مكون style ، وبعد ذلك تستخدم Vue تقنية CSS-in-JS لتنظيم العمل مع الأنماط المحلية التي لا تتجاوز المكون ولا تدخل في مكونات أخرى.

بالإضافة إلى ذلك ، تجدر الإشارة إلى أنه في الزاوي ، بشكل افتراضي ، من خلال استخدام تكنولوجيا تغليف المشاهدة ، يتم استخدام نطاق CSS.

يجد المطورون الذين يعانون من التعب التكنولوجي الخلاص في أدوات سطر الأوامر

يعلم الجميع كيف يمكن أن يكون مرهقًا مراقبة المكتبات التي يتم تحديثها باستمرار ، والتي تعتبر حيوية لمشاريع الويب ، وكذلك تحديث المشاريع بشكل صحيح مع مراعاة تحديثات المكتبة واتخاذ القرارات المعمارية الصحيحة في مثل هذه الظروف. أصبحت هذه المشكلة حافزًا لتطوير أدوات سطر الأوامر التي تحل مثل هذه المشكلات ، مما يسمح للمبرمجين بالتركيز على العمل على التطبيقات. أصبحت كل هذه الأدوات الوسيلة الرئيسية التي يتم من خلالها إنشاء تطبيقات جديدة في عام 2018. على وجه الخصوص ، يمكن ملاحظة المشاريع التالية في هذا المجال: Next.js (SSR لـ React ) ، Create-React-App (إنشاء تطبيقات React للعميل) ، Nuxt.js (SSR for Vue) ، Vue CLI (تطبيقات Vue للعميل) ، معرض CLI لـ React Native ، الأدوات الزاوية القياسية.

أدت رغبة المطورين في تبسيط الواجهة الأمامية وزيادة الإنتاجية إلى زيادة شعبية مولدات المواقع الثابتة

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

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

تعد المولدات الثابتة للمواقع رائعة لإنشاء شيء مثل المواقع الشخصية أو المدونات ، ولكن يمكن استخدامها أيضًا في المشاريع الكبيرة. في عام 2018 ، تزايدت شعبية المولدات مثل Gatsby و React Static للتطبيقات React ، وأدوات مثل VuePress for VuePress للمشروعات. في الواقع ، أصبحت المواقع الثابتة شائعة جدًا لدرجة أن مشروع Gatsby مفتوح المصدر قد نما ليصبح شركة وتلقى استثمارات في رأس المال الاستثماري.

أبنية بدون خادم و JAMStack

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

تم توسيع نطاق الحركة نحو serverlessness بفضل منهجية تطوير مشروع الويب JAMStack (J هي JavaScript ، A is API ، M is Markup ، أي markup). تعتمد JAMStack على مفاهيم تطوير المواقع الثابتة ، والتي تحدثنا عنها في القسم السابق. تتيح لك هذه التقنية تحقيق سرعات تحميل عالية للغاية للموقع بسبب الترميز المسبق. على العميل ، تتحول هذه المواقع إلى SPA ديناميكي من خلال استخدام واجهات برمجة التطبيقات الخاصة بالخوادم. في عام 2018 ، توفي تحت رعاية freeCodeCamp و Netlify و GitHub ، أول hackathon JAMStack . فيما يلي المواد التي توضح ميزات استخدام بنية JAM في freecodecamp.com ، والتي تتيح لك تقييم إمكانيات تطوير تطبيقات كبيرة الحجم باستخدام منهجية JAMStack.

قد يكون TypeScript هو مستقبل JS ، لكن لا يمكن قول الشيء نفسه بالنسبة لـ Flow

يُنتقد جافا سكريبت غالبًا بسبب افتقاره للكتابة الثابتة. الأدوات الرئيسية لحل هذه المشكلة هي TypeScript و Flow . في الوقت نفسه ، يعد TypeScript أكثر شعبية من Flow ، وفي الواقع ، أظهرت دراسة أجريت على Stack Overflow أن المطورين يحبون TypeScript أكثر من JavaScript نفسه (الأرقام المقابلة لهذه اللغات هي 67٪ و 61.9٪). وفقًا لدراسة حالة JS ، فإن أكثر من 80٪ من المطورين إما يخططون لاستخدام TS أو يستخدمونه بالفعل بكل سرور. إذا تحدثنا عن Flow ، فإن 34٪ فقط من المطورين يستخدمونها ، أو يرغبون في استخدامها.

وفقًا لجميع المؤشرات ، يعد TypeScript حلاً قياسيًا للكتابة الثابتة في JS ؛ ويفضل الكثيرون TS على JavaScript العادي. هذا العام ، كان عدد تنزيلات TS في npm يتزايد باستمرار وبشكل ملحوظ ، بينما ظل جدول تنزيل Flow ثابتًا إلى حد كبير. يشعر المرء أن TypeScript ، من أداة تستخدم فقط من قبل المتحمسين المتحمسين للكتابة الثابتة ، أصبح أداة تستخدم على نطاق واسع للغاية لتطوير الشبكة. فيما يلي بيانات TypeScript و Flow (كتدفق babel-preset-flow ) من npm و GitHub.


يتم تنزيل TypeScript و Flow في النصف الثاني من عام 2018

تم إصدار Webpack 4 في أوائل عام 2018

تم إصدار Webpack 4 بعد 8 أشهر فقط من إصدار Webpack 3. استمر الإصدار الجديد من Webpack في تبسيط العمل وتسريع عملية الإنشاء. في بعض الأحيان ، يمكن أن يتجاوز أداء Webpack 4 أداء Webpack 3 بنسبة 98٪. يهدف Webpack 4 إلى استخدام المعلمات الافتراضية المحددة بشكل معقول ، ويدعم المزيد من الميزات دون الحاجة إلى المكونات الإضافية ، ومن أجل البدء في استخدام Webpack ، لم يعد من الضروري إعداد ملف التكوين أولاً. بالإضافة إلى ذلك ، يدعم Webpack الآن WebAssembly ويسمح لك باستيراد ملفات WebAssembly مباشرة.

صدر بابل 7.0

تم إصدار Babel 7 في عام 2018 - بعد ما يقرب من ثلاث سنوات من إصدار Babel 6.. Babel هي مكتبة يتم من خلالها تحويل شفرة JavaScript ، والتي تستخدم إمكانات المعايير الجديدة (ES6 +) ، إلى رمز ES5 ، والذي يسمح بالتقاطع توافق المتصفح لمشاريع JS. تشير المواد التي تبلغ عن إصدار الإصدار الجديد من Babel إلى أن Babel 7 أسرع وأكثر حداثة ويدعم خيارات التكوين المتقدمة ، وقد حسن الوظائف المتعلقة بالتقليل ، ويدعم تقنيات JSX Fragments و TypeScript ، وهي لغة جديدة في مراحلها الأولى التنسيق ، وأكثر من ذلك. تجدر الإشارة إلى أن حزم Babel في npm تستخدم الآن مساحة اسم @babel .

منشورات مهمة لعام 2018

النظر في العديد من المنشورات الهامة الصادرة في عام 2018.

• إليك المواد المتعلقة بالمبلغ الذي تدفعه مقابل استخدام جافا سكريبت في عام 2018.
• فيما يلي منشور من حدث React Conf ، يمكنك من خلاله التعرف على مستقبل React.
• في هذه المقالة ، يشارك Airbnb تجربته مع React Native ، التي اكتسبتها الشركة على مدار عامين.
• هنا ، تعرض Google لكل من يريدها جهاز صور Google Web UI.
• يمكنك هنا قراءة أن Microsoft ستقوم بنقل متصفح Edge إلى نظام Chromium الأساسي.
• وهنا عرض تقديمي شيق للغاية لرايان دال ، منشئ Node.js.

توقعات لعام 2019

ما ينتظر الواجهة في عام 2019؟ هنا توقعاتنا:

• سيصبح WebAssembly شائعًا بشكل متزايد في مشاريع الويب نظرًا للتطوير المستمر لهذه التكنولوجيا ، وتوحيد المواصفات ورغبة المطورين في الإنتاجية.
• سيظل React في قمة تصنيف أدوات تطوير الويب ، بينما ستستمر Vue and Angular في تنمية قاعدة المستخدمين لديهم.
• يمكن أن يكون CSS-in-JS نهج التصميم القياسي ، ليحل محل CSS العادي.
• ربما سيهتم المطورون بمكونات الويب القياسية .
• مما لا يثير الدهشة ، ستستمر الإنتاجية في جذب الانتباه العالمي. يشير هذا إلى أن تطبيقات الويب المتقدمة (PWA) وتقنيات مشاركة الكود سيتم استخدامها في الغالبية العظمى من مشاريع الويب.
• بفضل انتشار PWA وتطويره ، سيتم دمج مشاريع الويب بشكل أكثر إحكامًا مع إمكانيات الأجهزة المحمولة وأجهزة سطح المكتب ، وستوفر للمستخدمين فرص عمل كاملة دون الاتصال بشبكة.
• سيستمر نمو أدوات سطر الأوامر وتطويرها بهدف تحرير المطورين من الحاجة إلى تكوين الأدوات بشكل مستقل ومنحهم الفرصة لإنشاء مشاريع الويب بهدوء.
• ستعمل المزيد من الشركات على تنفيذ حلول الأجهزة المحمولة القائمة على التقنيات القياسية مثل React Native أو Flutter .
• في التطوير الأمامي ، سيزداد دور حاويات الحاويات (على وجه الخصوص ، نحن نتحدث عن Docker و Kubernetes).
• سيتم الترويج الكبير لـ GraphQL ، وسيتم استخدام هذه التكنولوجيا في المزيد من الشركات.
• لم يعد TypeScript يعتبر بديلاً لجافا سكريبت عادي ، ولكن كخيار قياسي في المواقف التي تم فيها اختيار JavaScript من قبل.
• سوف تتخذ تقنية الواقع الافتراضي خطوة كبيرة للأمام باستخدام مكتبات مثل A-Frame و React VR و Google VR .

أعزائي القراء! ماذا تتوقع من تطوير الواجهة الأمامية في عام 2019؟