Myapp يمتد عطلة

أنا متأكد من أنه سيكون هناك من بين الجمهور المحترم الذي سيفهمني. الحقيقة هي أنه في كل وفرة المكتبات والأطر الشعبية لواجهة الويب ، أنا شخصياً لا أحب جميع البدائل تقريبًا. في كل خيار ، أجد بنفسي عيوبًا كبيرة تمنعني من استخدامها بهدوء. كل شيء يبدأ دائمًا بطريقة وردية: مفهوم مثير للاهتمام ، صوت ، للوهلة الأولى ، التفكير في نقاط "من أجل" ... ولكن بعد ذلك ، كل شيء ، مرارًا وتكرارًا ، يبدأ في مواجهة تبعية زائدة عن الحاجة وكيانات زائدة عن الحاجة ومحاولات لحل المشكلات التي أنشأها المطورون أنفسهم. يُعرض علينا تعلم بناء جملة جديد ، وقبول الأفكار الجديدة ، وتعلم مجموعة من الكلمات الطنانة ، وتثبيت العديد من الحزم "الضرورية". حسناً ، أنا أحب كل شيء جديد ، وأنا أحب الكلمات الذكية. لكنني أشعر بالإحباط الشديد عندما يكون ما يمكن القيام به ببساطة ، يبدأ الناس في تعقيد كسري. ربما قرأت بالفعل اعترافات أولئك الذين ، مثلي ، يائس من البحث عن الحس السليم في كل هذا وقررت الذهاب إلى الطرف الآخر - لكتابة كل شيء "في الفانيليا". حدث هذا لي عندما شعرت بخيبة أمل في مشروع Polymer ، الذي تم إنشاؤه بمشاركة نشطة من المطورين من Google. في البداية أعجبني كل شيء كثيرًا ، كان شعار هذه الحركة عبارة "استخدم المنصة" ، وهو ما يعني لي: "يجب ألا تفعل في الكود ما سيفعله المتصفح نفسه بكفاءة أكبر". لقد قام فريق Polymer بالكثير لتقديم معايير وقدرات جديدة على مستوى المنصة ، وشكراً جزيلاً لهم على ذلك. لكن عندما تم تحقيق هذه الأهداف ، بدأوا هم أنفسهم في انتهاك مبادئهم. والآن ترفض مكتبتهم الجديدة ( LitElement ) بالفعل العمل مباشرة في المستعرض دون تثبيت بيئة خاصة ، لأن الرجال لا يتبعون المعايير ... ما زلت أراقب مراقبة تطور LitElement ، وحتى أرى علامات واضحة على أن هؤلاء الأشخاص الضالين يعودون إلى المسار الحقيقي ، لكنني نفسي بالفعل لن أستخدمها ، لأن لدي الآن شيء أفضل.

ماذا؟

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

يعتمد كل شيء على مجموعة من Custom Elements و Shadow DOM ، كما قد تكون خمنت ، وإذا كنت معتادًا عليها بالفعل ، فسيكون من السهل للغاية معرفة ذلك.

ما هي النقطة؟

إذا قرأت بنفسي مقالًا مشابهًا حتى لا أفقد المزيد من الاهتمام ، أود أن أرى مثالًا على رمز المكون. ومن هنا:

import {HdElement} from '../../holiday/core/hd-element.js'; class MyComponent extends HdElement { constructor() { super(); this.state = { imageURL: 'images/photo.jpg', firstName: 'John', secondName: 'Snow', }; } } MyComponent.template = /*html*/ ` <style> :host { display: block; padding: 10px; background - color: #fff; color: #000; } </style> <img bind="src: imageURL" /> <div bind="textContent: firstName"></div> <div bind="textContent: secondName"></div> `; MyComponent.is = 'my-component'; 

هنا نرى أن المكون لديه حالة معينة وقالب مع سمات غريبة من العناصر " ربط ". هذه السمات هي السحر الرئيسي: فهي تتيح لك تحليل القالب وحفظ نسخة من النتيجة في الذاكرة لاستخدامها مرة أخرى (الاستنساخ) دون معالجة إضافية لسلسلة القوالب في وقت تشغيل JS ، مما يوفر أداءً عاليًا أثناء التقديم الأولي عند إنشاء مثيل لكل مكون. على عكس العديد من المكتبات الحديثة التي يتم فيها تحديد جزء DOM الذي يتحمله المكون من خلال وظيفة الحالة ، في Holiday.js يعد القالب منتجًا منتهيًا يحدد الهيكل الأولي ويسمح بربط البيانات لاحقًا ، باستخدام DOM API المعتاد ، و انها تعمل بسرعة كبيرة. سوف نعود إلى مسألة السرعة.

سأذكر المزايا الأخرى:

• القرب الأقصى من واجهات برمجة التطبيقات الأصلية ، والحد الأدنى من التجريدات الإضافية
• بناء جملة القالب الأصلي: لست بحاجة إلى تعلم HTML و CSS جديد
• للبدء ، لا تحتاج إلى تثبيت أي شيء إضافي ، فقد لا يحتوي مشروعك على مجلد node_modules على الإطلاق
• سهولة: لن تجبر المستخدمين على الانتظار لفترة طويلة للتنزيلات
• تشتمل المجموعة على إدارة عالمية للتوجيه والتوجيه ومكتبة لواجهة المستخدم: لن تشعر أنك في الصحراء

وثائق المشروع الرئيسي: https://holiday-js.web.app/

دورة الحياة

لنلقِ نظرة على مراحل دورة حياة المكون:

 import {HdElement} from '../../holiday/core/hd-element.js'; class LifecycleExample extends HdElement { constructor() { super(); //   : this.state = { name: '', bigName: '', }; /*   ,      DOM  "   ",       .    ,      "defineAccessor": */ this.defineAccessor('name', (name) => { // Some accessor code: this.setStateProperty('name', name); }); /*    ,      DOM               . */ } connectedCallback() { super.connectedCallback(); /*  .    DOM.               . */ } stateUpdated(path) { /*        : */ if (path === 'name') { this.setStateProperty('bigName', this.state.name.toUpperCase()); } } attributeChangedCallback(attributeName, oldValue, newValue) { /*  .      . */ super.attributeChangedCallback(attributeName, oldValue, newValue); } disconnectedCallback() { /*  .    DOM.              */ } } LifecycleExample.template = /*html*/ ` <div bind="textContent: name"></div> <div bind="textContent: bigName"></div> `; /*  HTML-,     : */ LifecycleExample.logicAttributes = [ //   ,         'name', ]; /*     CustomElements: */ LifecycleExample.is = 'lifecycle-example'; 

قوالب

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

جزء مهم من قوالب مكون الويب هي فتحات . تتيح لك فتحات تحديد أماكن خاصة في "الظل" DOM ​​للمكون الخاص بك ، حيث سيتم عرض أحفاده المباشرة في شجرة DOM العامة. مثال:

 <header> <slot name="header"></slot> </header> <div class="toolbar"> <slot name="toolbar"></slot> </div> <div class="content"> <slot></slot> </div> <footer> <slot name="footer"></slot> </footer> 

التنسيب في فتحات:

 <my-component> <div slot="header">Header content</div> <toolbar-component slot="toolbar"></toolbar-component> <div>Content of the default slot...</div> <div slot="footer">Footer content...</div> </my-component> 

كما قد تكون خمنت ، يتيح لك هذا إنشاء تخطيطات للمكونات ، حيث يمكن بسهولة تصنيف الوحدات المطلوبة في الخلايا.

كما ذكر أعلاه ، لربط البيانات والمعالجات بشكل حيوي ، يتم استخدام السمة "ربط":

 <div bind="textContent: content; onclick: on.clicked"></div> 

لربط قيم السمات ، استخدم الرمز "@" في بداية اسم الخاصية:

 <div bind="@style: style">Content...</div> 

يمكنك العثور على مزيد من التفاصيل في القسم المقابل من الوثائق: https://holiday-js.web.app/؟templates

إدارة الدولة

داخل المكون:

 class MyComponent extends HdElement { constructor() { super(); //        : this.state = { content: 'Initial Content', style: 'color: #f00', on: { clicked: () => { console.log('Clicked!'); }, }, }; //       "setStateProperty": window.setTimeout(() => { //   : this.setStateProperty('content', 'Updated Content'); //   : this.setStateProperty({ 'content': 'Updated Content', 'style': 'color: #00f', }); }, 1000); } } 

للتحكم في الحالة على مستوى التطبيق بأكمله ، يتم استخدام وحدة HdState.
مثال للاستخدام:

 import {HdState} from '../../holiday/core/hd-state.js'; //   : HdState.subscribe('ui.loading', (val) => { console.log(val); }); //   : HdState.publish('ui.loading', true); // : HdState.publish({ 'ui.loading': true, 'ui.sidePanelActive': true, }); 

للعمل مع الحالة العالمية ، عليك أولاً تحديد مخططها العام:

 HdState.applyScheme({ ui: { loading: { /*      ,       : */ type: Boolean, //    : value: false, }, sidePanelActive: { type: Boolean, value: false, }, }, user: { authorized: { type: Boolean, value: false, }, name: { type: String, value: null, //          : cache: true, }, }, }); 

يمكن أيضًا تقسيم الدائرة إلى كتل منطقية منفصلة.

لتجنب تسرب الذاكرة ، يجب التخلص من الاشتراكات غير ذات الصلة من:

 let subscription = HdState.subscribe('ui.loading', (val) => { console.log(val); }); window.setTimeout(() => { // Unsubscribe: subscription.remove(); }, 10000); 

وثائق الدولة: https://holiday-js.web.app/؟state

أدوات التطوير

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

للحصول على عمل أكثر اكتمالا ، ستحتاج إلى git وأي خادم ويب أعجبك (للعمل مع وحدات ES في متصفحات أخرى).

لتسليط الضوء على بناء جملة HTML والإكمال التلقائي في القوالب الحرفية ، استخدم ملحق رمز VS ، المصمم أصلاً للعمل مع lit-html: https://github.com/pushqrdx/vscode-inline-html

لإنشاء الشفرة قبل النشر ، يمكنك استخدام أي مترجم شائع ، مثل webpack أو rollup .

إنتاجية

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

1. حان الوقت لبدء تنفيذ البرنامج الرئيسي (تنزيل)
2. وقت تقديم العنصر الأولي
3. حان الوقت لتحديث هذه المكونات وإعادة رسمها

لسوء الحظ ، ليس لدينا طريقة موثوقة لمعرفة اللحظة التي ينفذ فيها المتصفح البرنامج وينهي العرض بالكامل. على مستوى المتصفح ، هناك العديد من التحسينات الخاصة بنا ، والتي هي بالنسبة لنا بمثابة "الصندوق الأسود" وقد تختلف في محركات مختلفة. ما يمكننا استخدامه: واجهة برمجة تطبيقات الأداء ، requestAnimationFrame وطريقة requestIdleCallback غير القياسية ، والتي تعمل فقط في Chrome و Firefox. يكفي لأول مرة.

ما الذي سنقارن Holiday.js به؟ لقد بدأت مع مكتبتين: React (حيث بدونها) و LitElement (تقنيات مشابهة في الأساس). يمكنك العثور على الكود المرجعي في هذه المستودعات:

https://github.com/foxeyes/holiday-benchmark
https://github.com/foxeyes/lit-benchmark
https://github.com/foxeyes/react-benchmark

لسوء الحظ ، لم أنهي اختبار الأتمتة حتى الآن ، وهذا ليس بالأمر السهل ، لأن الأتمتة لا ينبغي أن تخلق آثارًا جانبية بمفردها. في الوقت الحالي ، ما زلت أعمل على حل هذه المشكلة وأعد أداة مناسبة باستخدام Puppeteer (شيء مفيد للغاية ، أوصي به). في غضون ذلك ، يمكنك تجربة الاختبارات في الوضع اليدوي (Chrome / Firefox) والتحقق من النتائج في وحدة تحكم المتصفح. سترى أن Holiday.js هو قائد واثق في جميع الحالات .

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

دعم المتصفح

لا ، إن Internet Explorer غير مدعوم. كان يمكن تحقيق ذلك من خلال جهود معينة (للإصدار الحادي عشر) ، لكن رفض الدعم هو موقف مبدئي. أولاً ، أعتقد أن IE يجب أن تموت لفترة طويلة ، وفي قدرتنا على المساهمة في هذا. ثانياً ، غالبًا ما يرتكب الأشخاص الذين يؤيدون دعم IE خطأ منطقيًا خطيرًا: حيث تبلغ حصة IE في إجمالي عدد الزيارات ، وفقًا لبيانات caniuse الحالية ، 1.6٪ تقريبًا لجميع الإصدارات الموجودة. والمتصفح الأكثر شعبية ، والذي يتقدم الباقي بهامش واسع ، هو Chrome المحمول (حوالي 35 ٪). لذا ، فدعمًا لشركة IE ، فأنت ترفض عن قصد استخدام عدد كبير من التقنيات الضرورية ببساطة لتنفيذ قابلية التكيّف والتنقل الكاملين في تطبيقاتك ، أي من أجل أقلية صغيرة ، تعقيد حياة غالبية كبيرة من مستخدميها. أو زيادة كبيرة في تكلفة تطوير وصيانة منتجاتك. ثالثًا ، قامت Microsoft ، في الآونة الأخيرة ، بإجبار المستخدمين على التخلي عن Windows 7 ، بحيث ستنخفض نسبة حركة المرور على الإنترنت في المستقبل القريب بشكل أسرع. أعترف أن هناك حالات لا يمكن فيها تجاوز دعم IE ، لكن مثل هذه الحالات نادرة أكثر مما اعتدنا على التفكير.

في 15 كانون الثاني (يناير) من هذا العام ، أصدرت Microsoft إصدارًا جديدًا من Edge الجديد ، على محرك Chromium. من هذه اللحظة ، يمكننا أن نفترض أن Holiday.js مدعوم أصلاً في جميع الإصدارات الحالية من المتصفحات الشائعة. بالنسبة إلى الحافة الأقدم ، يلزم وجود polyfill . يتم تطبيق القدرة على العمل مع polyfills في Holiday.js ، ولكن يجب ربط البرنامج النصي نفسه بشكل منفصل.

بساطتها

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

خطط

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

ومع ذلك ، في المستقبل القريب:

• المزيد من المقارنات مع المكتبات والأطر الشعبية الأخرى.
• أضيق الحدود ومرنة أداة اختبار PingPong على أساس العرائس
• مولد المشروع الأساسي مع أمثلة (Starter Kit)
• مواصلة تطوير الوثائق

أعبر أصابعي ، اضغط على "نشر" ...