☝🏻 🦍 👃🏻 ING تطلق Lion: مكتبة مكونات ويب منتجة ومعقولة التكلفة ومرنة 🌆 🚈 🖖🏿

تحية للجميع. تحسبًا لبدء دورة "Fullstack JavaScript Developer" ، أعددنا لك ترجمة لمواد مثيرة للاهتمام.

TL ؛ DR: يعد تطوير الويب أمرًا صعبًا بغض النظر عما إذا قمت بإنشاء مكوناتك الخاصة ، أو استخدام أنظمة التصميم ، أو تنفيذ الدعم للمتصفحات المختلفة ، أو توفير إمكانية الوصول أو إضافة تبعيات تابعة لجهات خارجية. يسعى Lion جاهدًا لجعل حياتك أسهل من خلال تنفيذ مكونات كاملة المواصفات وبأسعار معقولة ومنتجة وغير محددة. تحقق من مستودع البنك / الأسد .

قد يعرف بعضكم بالفعل أن ING لها تاريخ طويل وغني في إنشاء مكونات الويب ، من مكتبة البوليمر إلى LitElement الأخيرة.

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

أصبحت معايير مكونات الويب أقوى في النهاية ، واليوم هناك العديد من الطرق لتنفيذ واستخدام مكونات الويب ، مثل: Angular Elements و Stencil و Vue و Svelte وغيرها الكثير. ومع إصدار Chromium Edge ، أصبح من الواضح أن جميع المتصفحات الرئيسية ستدعم الآن مكونات الويب خارج الصندوق.

لذلك ، يسعدني اليوم أن أشارككم كل ما تفتحه ING للاستخدام المجاني في مكتبة مكونات الويب الخاصة بها Lion!

لماذا الأسد

تخيل السيناريو الخيالي التالي:
ليا هي مطورة من Betatech ، وهي تعمل على تطبيق داخلي جديد للشركة.

ملحد إطار العمل

العثور على المكونات ليست سهلة وقد تكون النتيجة مخيبة للآمال.

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

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

تعثر Lea على مكون يوفر جميع الوظائف الضرورية ، ولكنه لا يتناسب مع هوية Betatechs.

التكيف الوظيفي

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

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

التوفر

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

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

أو ،

تكتب Leah مكونها الخاص ، ولكن يصعب إصلاح مشاكل إمكانية الوصول بسبب كيفية كتابتها في الأصل بنية HTML ، وسيتطلب التصحيح تغييرات حاسمة.

لخص

ألا تعتقد أن قصة ليا ذات صلة مباشرة؟
يعالج العديد من القضايا الشائعة في تطوير الويب الحديث:

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

ما الذي يمكن فعله لحل هذه المشاكل؟

تخيل أن لديك مكونات مهمتها الرئيسية هي توفير الوظائف ، والتصميم حسب تقديرك.
تخيل أن هذه المكونات لها توافر وأداء ممتاز.
تخيل أن هذه المكونات قابلة للتوسعة ومرنة.

توقف الآن عن الحلم وانتبه إلى الأسد.

ما هو الأسد؟

نريد تعزيز الويب - مكون واحد في كل مرة.
Lion هي مكتبة بيضاء مفتوحة المصدر لا تعتمد على الأطر ويمكن أن تصبح أساسًا لنظام تصميم شركتك. الاتساق في المظهر والوظيفة مهمة صعبة ونأمل أنه مع Lion يمكننا أن نجعل عملك أسهل.

البطاقة البيضاء

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

هذا ما نقوم به في ING. تعمل مكونات الويب الخاصة بنا على توسيع مكونات Lion وتطبيق هوية ING المرئية ، وهي طبقة رقيقة على قمة Lion.

انظر إلى عرض الأسد. تبدو ريفية جميلة ، أليس كذلك؟ قارن الآن مع Lion بالتزامن مع ing-web:

التركيز الأساسي

تم تطوير Lion مع التركيز على الاستخدام العالمي وإعادة الاستخدام. ونتيجة لذلك ، تمت إضافة الميزات التالية منذ البداية:

إعادة الاستخدام - تم تصميم مكوناتنا ليتم توزيعها واستخدامها عالميًا ؛
إمكانية الوصول - تم تصميم مكوناتنا لتكون متاحة للجميع ؛
الإنتاجية - يجب أن تكون مكوناتنا صغيرة ومنتجة وسريعة.

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

الدروس المستفادة

بدأت ING باستخدام مكونات الويب في وقت مبكر جدًا ، وليون ليست مكتبة المكونات الأولى التي أنشأناها. لذلك ، قد تتساءل كيف تختلف هذه المكونات عن الجيل السابق.

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

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

« -, .»
Erik Kroes

Lion!

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

بالإضافة إلى ذلك ، يمكنك استخدام Lion لإنشاء إصدارات مكونات الويب لأنظمة التصميم المفضلة لديك ، مثل: Bulma و Bootstrap و Material و Bolt و Argon و Tailwind .

بالإضافة إلى ذلك ، كلما زاد عدد مستخدمي ومساهمي Lion ، زادت استقرار قاعدته ، مما سيؤثر على كل من يستخدم Lion.

المساهمة في تطوير الأسد!

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

إنشاء وإغلاق القضية ؛
العمل على مكون جديد تمامًا (ابدأ بمناقشة المشكلة) ؛
تحسين التوثيق ؛
... أي مساهمة مهمة! حتى تصحيح الأخطاء المطبعية في الوثائق

لا تتردد في فتح مشكلة على github لإرسال أي ملاحظات أو أسئلة قد تكون لديكم. يمكنك أن تجدنا أيضًا في قناة بوليمر سلاك #lion .

يمكنك الانضمام إلى بوليمر الركود عن طريق الرابط .

توسيع المكون

يمكنك استخدام Lion كقاعدة لتطبيق نظام التصميم الخاص بك.

دعونا نرى كيف حدثت قصة ليا إذا اختارت الأسد.

للبدء ، قم بتثبيت كل ما تحتاجه:

npm i lit-element @lion/tabs

قم بإنشاء مكون lea-tabsعن طريق إعادة استخدام وظيفة Lion. سمح هذا لليئة بالحصول على كل الحمل الوظيفي وإمكانية الوصول اللازمة لتنفيذ مكون علامة التبويب الخاصة بها.

import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';

export class LeaTabs extends LionTabs {
  static get styles() {
    return [
      super.styles,
      css`
        /* my stylings */
      `
    ];
  }

  connectedCallback() {
    super.connectedCallback();
    this._setupFeature();
  }

  _setupFeature() {
    // being awesome
  }
}

customElements.define('lea-tabs', LeaTabs);

يريد ليا أيضا أن تكون قادرة على أسلوب و التبويب و التبويب لوحة وفقا لهوية بصرية من Betatechs. للقيام بذلك ، تقوم بإنشاء مكونات لوحة lea-tab و lea-tab ، والتي يمكن أن تصممها كما تراه مناسبًا وتضع في النهاية مكون علامات التبويب lea في الداخل . يمكنك أن ترى كيف قامت ليا بذلك في المثال أدناه.

import { LitElement, html, css } from 'lit-element';

export class LeaTab extends LitElement {
  static get styles() {
    return css`/* my stylings */`;
  }

  render() {
    return html`
      <!-- dom as needed -->
      <slot></slot>
    `;
  }
}

customElements.define('lea-tab', LeaTab);

تماما! الآن يمكن لـ Lea استخدام المكون على tabsالنحو التالي:

<lea-tabs>
  <lea-tab slot="tab">Info</lea-tab>
  <lea-tab-panel slot="panel">
    Info page with lots of information about us.
  </lea-tab-panel>
  <lea-tab slot="tab">Work</lea-tab>
  <lea-tab-panel slot="panel">
    Work page that showcases our work.
  </lea-tab-panel>
</lea-tabs>

حسنًا ، الآن مكون Lea جاهز ، فقد حان الوقت لكتابة بعض الوثائق. يمكنك الاطلاع على الصفحة المباشرة لوثائق Lea . lea-tabsيمكنك رؤية الكود الكامل على جيثب .

ملاحظة: يرجى ملاحظة أن Lea الآن مسؤولة عن تحديث وثائق علامات التبويب ، وستنعكس التغييرات التي تطرأ على وثائق Lion تلقائيًا في وثائق Lea.

لماذا المصدر المفتوح؟

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

نلقي نظرة على مستودعنا ! وإذا كنت ترغب في البقاء على اطلاع ، تأكد من بدء التتبع و / أو وضع علامة النجمة - ليس لدينا تويتر (حتى الآن) ، ولكن مع ذلك يمكنك الاشتراك لي: مرحبًا ، أنا توماس أولمر .

ولكن هذا ليس كل شيء!

يعد إنشاء التطبيقات أمرًا صعبًا ، وأحيانًا تحتاج إلى أكثر من عنصر واحد محدد ، على سبيل المثال ، أشياء مثل التحقق من الصحة ، والنماذج ، والتراكبات ، والتعريب ، وما إلى ذلك. ولكن لا تخف ، سيأتي Lion إلى الإنقاذ!

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

شكر وتقدير

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

إلى كل من عمل على Lion (وخاصة فريق Lion) ، بما في ذلك جميع المساهمين (39 ، وهذا ليس الحد!).

والشكر الأخير ، ولكن ليس أقل أهمية: باسكال شيلب لتحويل خربشاتي إلى قصة مثيرة للاهتمام.

ندعوك للانضمام إلى درسنا المجاني حول هذا الموضوع: "SvelteJs. بداية سريعة " .

ING تطلق Lion: مكتبة مكونات ويب منتجة ومعقولة التكلفة ومرنة