عندما يبدأ الجميع بالتعرف على React أو Vue ، كما هو الحال مع أكثر الأطر شيوعًا
npm install, npm build الأمامية ، بالطبع ، نستخدم جميعًا الأوامر السحرية
npm install, npm build . وفقط بعد ذلك 'بابا' الجمهور 'نحن نشر "عند الضرورة."
ولكن هناك طريقة أخرى (
أصفها بطريقة
منحرفة ) غير قياسية ، والتي لا يعرفها كثير من مطوري المبتدئين في الواجهة الأمامية ، حيث "نشأوا" على تثبيت / بناء npm.
ولكن ماذا لو كنت لا تحتاج إلى بناء ، ولكن فقط أدخل رمز js في html؟
انتظر البصق في وجهي ورمي الحجارة بنقش "I love node" ... نحن بالتأكيد نعرف أنه بدون تجميع سنفقد اختبارات الوحدة والسرعة وكيفية التعامل مع استيراد المكونات وتسلسل هرمي للملفات وعمومًا نوع من الأكواد السباغيتي سوف تتحول ...
فلماذا تحتاج (نحن) وكيف تعمل؟
في اليوم الآخر ، تم تقديم طلب من "أعمالنا" لإضافة وظائف إلى نظام BPM / ERP الخاص بهم ، وهو عبارة عن Redmine تم تعديله بشدة. تم إجراء كل هذه المعجزة لفترة طويلة وهي تدور على خادم VPS مع مجموعة من الخدمات المصغرة المساعدة لقراءة بيانات الإنتاج والآلات وما إلى ذلك. لا يمكنك لمس نظام التشغيل ...
Redmine - مكتوب في روبي أون ريلز ، ويولد الجبهة بأكملها على الخادم. وأضاف كل التفاعل الأمامي في الإضافات كان هناك من خلال مسج. لقد تعلمت RoR الآن العمل مع webpack ويمكنك التعامل مع "npm البشري" ، ولكن هذا في أحدث الإصدارات ، ولدينا Ruby و Centos 6 القديمة التي لا يوجد عليها أحدث إصدار من Ruby أو rails. لا أشعر بأنني أجمع من المصادر وأزاح كل شيء من أجل إضافة العديد من النماذج التفاعلية ، لذلك بدأنا نبحث عن وسيلة لإضافة React أو Vue إلى قالب صفحة Rails تمامًا مثل JS العادية دون npm والتجمعات.
وسرعان ما وجدت ، ولكليهما.
Vue دون Vue npm
مع Vue ، اتضح أن كل شيء بسيط للغاية. يبدو بدء المكونات بالطبع "غريبًا" ، ولكنه قابل للقراءة بشكل عام و "قابل للكتابة".
مثال على صفحة بسيطة على Vue مع مكون:
<html> <head> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> </head> <body> <div id="vue-app"></div> <script type="text/javascript"> const titleComponent = `<h1>{{ title }}</h1>`; var app = new Vue({ el: '#vue-app', template: titleComponent, data: function () { return { title: 'Stranger Vue things' }; } }); </script> </body> </html>
الملفات التي تم تنزيلها من قبل المتصفح: 371 كيلو بايت ، الوقت: 590 مللي ثانيةيمكنك حتى استيراد مكونات Vue بتنسيق .vue العادي باستخدام
http-vue-loader وعدم إنشاء رمز معكرونة. لقد فوجئت بشدة أن هناك حاجة إلى فكرة واحدة فقط من التبعيات ، وهي أخبار جيدة.
تتفاعل دون رد فعل npm
مع React ، كل شيء أكثر تعقيدًا ولكن ليس كثيرًا. لكي تعمل JSX ، فأنت بحاجة إلى استيراد بابل. للعمل مع DOM ، تحتاج إلى رد فعل dom. دون ما ورد أعلاه ، لن تعمل ردة الفعل بشكل طبيعي. بدلاً من استيراد واحد ، تحتاج إلى القيام بثلاثة.
مثال على صفحة بسيطة على التفاعل مع مكون:
<html lang="en"> <head> <title>React Stranger Things</title> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const rootElement = document.getElementById('root') class TitleComponent extends React.Component { render() { return ( <h1> {this.props.title}</h1> ); } } function App(){ return( <div> <TitleComponent title="React Stranger Things"/> </div> ) } ReactDOM.render( <App />, rootElement ) </script> </body> </html>
الملفات التي تم تنزيلها من قبل المتصفح: 542 كيلو بايت ، الوقت: 589 مللي ثانيةهنا ، على عكس Vue ، لا تحتاج إلى كتابة قالب المكون كسلسلة ، نكتب كل شيء كالمعتاد ، وهو مناسب تمامًا ولا يسبب أي إزعاج.
ومن نختار؟
إذا كنت تأخذ حجم عمليات استيراد js التي تم تنزيلها بواسطة المتصفح ، فالفائز هو Vue. لكن هذا فقط للوهلة الأولى. بما أننا لم يكن لدينا العديد من المكونات ، فقد قمنا بالمهمة على حد سواء. وكان الأمر أكثر ملاءمة للكتابة في React: لا يوجد فرق تقريبًا عند الكتابة مع التجميع ، والفرق في الواردات ليس مهمًا جدًا.
ولكن ماذا عن بريكت؟
Preact هو الإصدار "المصغر" من رد الفعل ، وهو أسرع قليلاً ويزن 3 كيلوبايت فقط. بمجرد أن سمعت عن مهمتنا ، كان أول شيء تذكرت هو preact. لم يكن فتح الوثائق مفاجأة سارة: React ≠ Preact.
لا يحتوي Preact على JSX ، فإن إملاء المكونات يختلف تمامًا عن React. تعلم الكتابة "بطريقة preact" لمهمتنا الصغيرة أمر ضروري للغاية و "مكلف".
هذا عكاز! اضربه معهم
نحن نعلم أن هذا عكاز. لكن في بعض الأحيان يجب عليك ابتكار مثل هذه الحلول بناءً على المهام. في حالة تطور الواجهة الأمامية الطبيعية ، يعد استخدام الأطر في هذا التجسيد عكازًا رهيبًا وبالتأكيد لا ينصح به على الإطلاق.