MDC-112 वेब: एमडीसी को वेब फ़्रेमवर्क के साथ इंटिग्रेट करना

1. परिचय

logo_components_color_2x_web_96dp.png

मटीरियल कॉम्पोनेंट (एमडीसी), मटीरियल डिज़ाइन लागू करने में डेवलपर की मदद करते हैं. Google में इंजीनियरों और UX डिज़ाइनर की टीम ने बनाया है. एमडीसी में दर्जनों खूबसूरत और काम करने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट हैं. यह Android, iOS, वेब और Flutter.material.io/प्रॉडक्ट के लिए उपलब्ध है

MDC वेब को मटीरियल डिज़ाइन के सिद्धांतों का पालन करते हुए, किसी भी फ़्रंट एंड फ़्रेमवर्क में इंटिग्रेट करने के लिए बनाया गया है. नीचे दिया गया कोडलैब आपको रिएक्ट कॉम्पोनेंट बनाने में मदद करता है, जो एमडीसी वेब का इस्तेमाल फ़ाउंडेशन के तौर पर करता है. इस कोडलैब में सीखे गए सिद्धांत, किसी भी JavaScript फ़्रेमवर्क पर लागू किए जा सकते हैं.

एमडीसी वेब को बनाने का तरीका

एमडीसी वेब की JavaScript लेयर में हर कॉम्पोनेंट के लिए तीन क्लास होती हैं: कॉम्पोनेंट, फ़ाउंडेशन, और अडैप्टर. यह पैटर्न, एमडीसी वेब को फ़्रंटएंड फ़्रेमवर्क के साथ इंटिग्रेट करने की सुविधा देता है.

फ़ाउंडेशन में मटीरियल डिज़ाइन को लागू करने वाला बिज़नेस लॉजिक शामिल होता है. फ़ाउंडेशन किसी भी एचटीएमएल एलिमेंट का रेफ़रंस नहीं देता है. यह हमें अडैप्टर में ऐब्सट्रैक्ट एचटीएमएल इंटरैक्शन लॉजिक की मदद करता है. फ़ाउंडेशन में अडैप्टर है.

अडैप्टर एक इंटरफ़ेस है. मटीरियल डिज़ाइन बिज़नेस लॉजिक को लागू करने के लिए, अडैप्टर इंटरफ़ेस का रेफ़रंस फ़ाउंडेशन में दिया गया है. अडैप्टर को अलग-अलग फ़्रेमवर्क में लागू किया जा सकता है. जैसे, Angular या React. अडैप्टर को लागू करने की प्रोसेस, डीओएम स्ट्रक्चर के साथ इंटरैक्ट करती है.

कॉम्पोनेंट का एक फ़ाउंडेशन होता है और इसकी भूमिका

  1. नॉन-फ़्रेमवर्क JavaScript का इस्तेमाल करके, अडैप्टर को लागू करें और
  2. फ़ाउंडेशन में दिए गए तरीकों को प्रॉक्सी करने वाले सार्वजनिक तरीके उपलब्ध कराएं.

एमडीसी वेब पर क्या-क्या सुविधाएं मिलती हैं

एमडीसी वेब के हर पैकेज में एक कॉम्पोनेंट, फ़ाउंडेशन, और अडैप्टर होता है. किसी कॉम्पोनेंट को इंस्टैंशिएट करने के लिए, आपको कॉम्पोनेंट के कंस्ट्रक्टर वाले तरीके में रूट एलिमेंट को पास करना होगा. कॉम्पोनेंट, एक अडैप्टर लागू करता है, जो डीओएम और एचटीएमएल एलिमेंट के साथ इंटरैक्ट करता है. इसके बाद, कॉम्पोनेंट, फ़ाउंडेशन को इंस्टैंशिएट करता है, जो अडैप्टर के तरीकों को कॉल करता है.

एमडीसी वेब को किसी फ़्रेमवर्क में इंटिग्रेट करने के लिए, आपको उस फ़्रेमवर्क की भाषा/सिंटैक्स में अपना खुद का कॉम्पोनेंट बनाना होगा. फ़्रेमवर्क कॉम्पोनेंट, एमडीसी वेब के अडैप्टर को लागू करता है और एमडीसी वेब के फ़ाउंडेशन का इस्तेमाल करता है.

आपको क्या बनाना होगा

यह कोडलैब एक कस्टम अडैप्टर बनाने का तरीका बताता है, ताकि मटीरियल डिज़ाइन रिएक्ट कॉम्पोनेंट पाने के लिए फ़ाउंडेशन लॉजिक का इस्तेमाल किया जा सके. इसमें फ़्रेमवर्क में इंटिग्रेट करने के बारे में बेहतर विषयों के बारे में बताया गया है. इस कोडलैब में, React का इस्तेमाल एक उदाहरण फ़्रेमवर्क के तौर पर किया जाता है. हालांकि, इस तरीके को किसी दूसरे फ़्रेमवर्क पर भी लागू किया जा सकता है.

इस कोडलैब में, सबसे ऊपर मौजूद ऐप्लिकेशन बार बनाएं और सबसे ऊपर मौजूद ऐप्लिकेशन बार वाला डेमो पेज फिर से बनाएं. डेमो पेज का लेआउट पहले से ही सेटअप है. इसलिए, अब आप सबसे ऊपर मौजूद ऐप्लिकेशन बार पर काम कर सकते हैं. सबसे ऊपर मौजूद ऐप्लिकेशन बार में ये चीज़ें शामिल होंगी:

  • नेविगेशन का आइकॉन
  • ऐक्शन आइटम
  • इसके चार वैरिएंट उपलब्ध हैं: छोटा, हमेशा छोटा किया गया, फ़िक्स्ड, और प्रॉमिनेंट वैरिएंट

आपको इन चीज़ों की ज़रूरत होगी:

  • Node.js का नया वर्शन (जो npm के साथ आता है, जो एक JavaScript पैकेज मैनेजर होता है)
  • सैंपल कोड (अगले चरण में डाउनलोड किया जाना है)
  • एचटीएमएल, सीएसएस, JavaScript, और प्रतिक्रिया के बारे में बुनियादी जानकारी

वेब डेवलपमेंट के अपने अनुभव को आप कितनी रेटिंग देंगे?

शुरुआती इंटरमीडिएट कुशल

2. डेव एनवायरमेंट सेट अप करें

स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना

स्टार्टर ऐप्लिकेशन, material-components-web-codelabs-master/mdc-112/starter डायरेक्ट्री में मौजूद है.

...या GitHub से इसका क्लोन बनाएं

GitHub से इस कोडलैब का क्लोन बनाने के लिए, ये निर्देश चलाएं:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-112/starter

प्रोजेक्ट डिपेंडेंसी इंस्टॉल करना

स्टार्टर डायरेक्ट्री material-components-web-codelabs/mdc-112/starter से, इसे चलाएं:

npm install

आपको बहुत सारी गतिविधियां दिखेंगी और आखिर में, आपके टर्मिनल में एक सफल इंस्टॉल दिखना चाहिए:

22a33efc2a687408.png

स्टार्टर ऐप्लिकेशन चलाएं

उसी डायरेक्ट्री में, इसे चलाएं:

npm start

webpack-dev-server शुरू हो जाएगा. पेज देखने के लिए, अपने ब्राउज़र को http://localhost:8080/ पर ले जाएं.

b55c66dd400cf34f.png

हो गया! आपके ब्राउज़र में, सबसे लोकप्रिय ऐप्लिकेशन बार रिऐक्ट डेमो पेज का स्टार्टर कोड होना चाहिए. आपको एक दीवार पर lorem ipsum का टेक्स्ट, एक Controls बॉक्स (सबसे नीचे दाईं ओर), और एक अधूरा टॉप ऐप्लिकेशन बार दिखेगा:

4ca3cf6d216f9290.png

कोड और प्रोजेक्ट पर नज़र डालें

कोड एडिटर खोलने पर, प्रोजेक्ट डायरेक्ट्री कुछ इस तरह दिखेगी:

e9a3270d6a67c589.png

App.js फ़ाइल खोलें और render तरीका देखें, जिसमें <TopAppBar> कॉम्पोनेंट शामिल है:

App.js

render() {
    const {isFixed, isShort, isRtl, isProminent, isAlwaysCollapsed, shouldReinit} = this.state;

    return (
      <section
        dir={isRtl ? 'rtl' : 'ltr'}
        className='mdc-typography'>
        {
          shouldReinit ? null :
          <TopAppBar
            navIcon={this.renderNavIcon()}
            short={isShort}
            prominent={isProminent}
            fixed={isFixed}
            alwaysCollapsed={isAlwaysCollapsed}
            title='Mountain View, CA'
            actionItems={this.actionItems}
          />
        }
        <div className={classnames('mdc-top-app-bar--fixed-adjust', {
          'mdc-top-app-bar--short-fixed-adjust': isShort || isAlwaysCollapsed,
          'mdc-top-app-bar--prominent-fixed-adjust': isProminent,
        })}>
          {this.renderDemoParagraphs()}
        </div>

        {this.renderControls()}
      </section>
    );
  }

यह ऐप्लिकेशन में, TopAppBar का एंट्री पॉइंट है.

TopAppBar.js फ़ाइल खोलें, जो render तरीके का इस्तेमाल करके एक नज़र में जवाब देने वाली Component क्लास है:

TopAppBar.js

import React from 'react';

export default class TopAppBar extends React.Component {
  render() {
    return (
      <header>
        TOP APP BAR
      </header>
    );
  }
}

3. कॉम्पोनेंट का कंपोज़िशन

React में, render तरीका कॉम्पोनेंट का एचटीएमएल देता है. टॉप ऐप्लिकेशन बार कॉम्पोनेंट, <header /> टैग रेंडर करेगा और इसमें दो मुख्य सेक्शन होंगे:

  1. नेविगेशन आइकॉन और टाइटल का सेक्शन
  2. ऐक्शन आइकॉन का सेक्शन

अगर टॉप ऐप्लिकेशन बार में शामिल एलिमेंट के बारे में आपका कोई सवाल है, तो GitHub पर मौजूद दस्तावेज़ देखें.

TopAppBar.js में render() तरीके में बदलाव करें, ताकि वह ऐसा दिखे:

  render() {
    const {
      title,
      navIcon,
    } = this.props;

    return (
      <header
        className={this.classes}
        style={this.getMergedStyles()}
        ref={this.topAppBarElement}
      >
        <div className='mdc-top-app-bar__row'>
          <section className='mdc-top-app-bar__section mdc-top-app-bar__section--align-start'>
            {navIcon ? navIcon : null}
            <span className="mdc-top-app-bar__title">
              {title}
            </span>
          </section>
          {this.renderActionItems()}
        </div>
      </header>
    );
  }

इस एचटीएमएल में दो सेक्शन एलिमेंट हैं. पहले में एक नेविगेशन आइकॉन और टाइटल होता है. दूसरे में ऐक्शन आइकॉन होते हैं.

इसके बाद, renderActionItems तरीका जोड़ें:

renderActionItems() {
  const {actionItems} = this.props;
  if (!actionItems) {
    return;
  }

  return (
    <section className='mdc-top-app-bar__section mdc-top-app-bar__section--align-end' role='toolbar'>
      {/* need to clone element to set key */}
      {actionItems.map((item, key) => React.cloneElement(item, {key}))}
    </section>
  );
}

डेवलपर अपने React ऐप्लिकेशन में TopAppBar को इंपोर्ट करेगा और TopAppBar एलिमेंट में ऐक्शन आइकॉन पास करेगा. App.js में, TopAppBar शुरू करने वाले कोड का उदाहरण देखा जा सकता है.

getMergedStyles तरीका मौजूद नहीं है, जिसका इस्तेमाल render तरीके में किया जा रहा है. कृपया TopAppBar क्लास में यह JavaScript तरीका जोड़ें:

getMergedStyles = () => {
  const {style} = this.props;
  const {style: internalStyle} = this.state;
  return Object.assign({}, internalStyle, style);
}

render तरीके में this.classes भी मौजूद नहीं है, लेकिन बाद के सेक्शन में इसके बारे में बताया जाएगा. गैटर तरीके this.classes के अलावा, टॉप ऐप्लिकेशन बार को सही तरीके से रेंडर करने से पहले, आपको TopAppBar के कुछ हिस्सों को लागू करना होगा.

प्रतिक्रिया वाले कॉम्पोनेंट के वे हिस्से जो अब भी टॉप ऐप्लिकेशन बार में मौजूद नहीं हैं:

  • शुरू किया गया फ़ाउंडेशन
  • फ़ाउंडेशन में पास करने के लिए, अडैप्टर के तरीके
  • JSX मार्कअप
  • वैरिएंट मैनेजमेंट (फ़िक्स्ड, छोटा, हमेशा छोटा किया गया, और प्रमुखता से दिखता है)

रणनीति

  1. अडैप्टर के तरीके लागू करें.
  2. componentDidMount में फ़ाउंडेशन की शुरुआत करें.
  3. componentWillUnmount में Foundation.destroy तरीके को कॉल करें.
  4. गैटर तरीके के ज़रिए वैरिएंट मैनेजमेंट स्थापित करें जिसमें क्लास के सही नाम शामिल होते हैं.

4. अडैप्टर के तरीके लागू करना

गैर-फ़्रेमवर्क JS TopAppBar कॉम्पोनेंट इन अडैप्टर तरीकों को लागू करता है (यहां ज़्यादा जानकारी दी गई है):

  • hasClass()
  • addClass()
  • removeClass()
  • registerNavigationIconInteractionHandler()
  • deregisterNavigationIconInteractionHandler()
  • notifyNavigationIconClicked()
  • setStyle()
  • getTopAppBarHeight()
  • registerScrollHandler()
  • deregisterScrollHandler()
  • registerResizeHandler()
  • deregisterResizeHandler()
  • getViewportScrollY()
  • getTotalActionItems()

React में सिंथेटिक इवेंट और कोडिंग के सबसे सही तरीके और पैटर्न मौजूद हैं. इसलिए, Adapter के तरीकों को फिर से लागू करना होगा.

अडैप्टर गेटर मेथड

TopAppBar.js फ़ाइल में, TopAppBar में यह JavaScript तरीका जोड़ें:

get adapter() {
  const {actionItems} = this.props;

  return {
    hasClass: (className) => this.classes.split(' ').includes(className),
    addClass: (className) => this.setState({classList: this.state.classList.add(className)}),
    removeClass: (className) => {
      const {classList} = this.state;
      classList.delete(className);
      this.setState({classList});
    },
    setStyle: this.setStyle,
    getTopAppBarHeight: () => this.topAppBarElement.current.clientHeight,
    registerScrollHandler: (handler) => window.addEventListener('scroll', handler),
    deregisterScrollHandler: (handler) => window.removeEventListener('scroll', handler),
    registerResizeHandler: (handler) => window.addEventListener('resize', handler),
    deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
    getViewportScrollY: () => window.pageYOffset,
    getTotalActionItems: () => actionItems && actionItems.length,
  };
}

स्क्रोल और साइज़ बदलने वाले इवेंट रजिस्ट्रेशन के लिए अडैप्टर एपीआई, नॉन-फ़्रेमवर्क JS वर्शन में एक जैसे तरीके से लागू किए जाते हैं. इसकी वजह यह है कि React में स्क्रोल या साइज़ बदलने के लिए कोई सिंथेटिक इवेंट नहीं होता. साथ ही, यह नेटिव डीओएम इवेंट सिस्टम को सुरक्षित रखता है. getViewPortScrollY को भी नेटिव डीओएम को अलग करना होगा, क्योंकि यह window ऑब्जेक्ट पर एक फ़ंक्शन है, जो React के एपीआई में नहीं है. हर फ़्रेमवर्क के लिए, अडैप्टर अलग-अलग तरीके से लागू होंगे.

आपको दिख सकता है कि this.setStyle मौजूद नहीं है. इसे get adapter तरीके से कॉल किया जाता है. TopAppBar.js फ़ाइल की TopAppBar क्लास में, वह JavaScript तरीका जोड़ें जो मौजूद नहीं है:

setStyle = (varName, value) => {
  const updatedStyle = Object.assign({}, this.state.style);
  updatedStyle[varName] = value;
  this.setState({style: updatedStyle});
}

आपने अभी-अभी अडैप्टर लागू किया है! ध्यान दें कि अभी आपको अपने कंसोल में गड़बड़ियां इसलिए दिख सकती हैं, क्योंकि अभी पूरी तरह लागू नहीं हुआ है. अगले सेक्शन में, सीएसएस क्लास को जोड़ने और हटाने का तरीका बताया गया है.

5. कॉम्पोनेंट के तरीके लागू करना

वैरिएंट और क्लास मैनेज करना

React के पास क्लास मैनेज करने के लिए कोई एपीआई नहीं है. नेटिव JavaScript के सीएसएस क्लास के तरीकों की नकल करने के लिए, classList स्टेट वैरिएबल जोड़ें. TopAppBar में कोड के तीन हिस्से होते हैं, जो सीएसएस क्लास के साथ इंटरैक्ट करते हैं:

  1. className प्रॉपर्टी के ज़रिए <TopAppBar /> कॉम्पोनेंट.
  2. addClass या removeClass के ज़रिए अडैप्टर तरीका.
  3. <TopAppBar /> रीऐक्ट कॉम्पोनेंट में हार्ड कोड किया गया होता है.

सबसे पहले, TopAppBar.js में सबसे ऊपर, मौजूदा इंपोर्ट के नीचे नीचे दिया गया इंपोर्ट जोड़ें:

import classnames from 'classnames';

इसके बाद, TopAppBar कॉम्पोनेंट के क्लास में एलान करने वाले फ़ॉर्म में यह कोड जोड़ें:

export default class TopAppBar extends React.Component {
  constructor(props) {
    super(props);
    this.topAppBarElement = React.createRef();
  }

  state = {
    classList: new Set(),
    style: {},
  };

  get classes() {
    const {classList} = this.state;
    const {
      alwaysCollapsed,
      className,
      short,
      fixed,
      prominent,
    } = this.props;

    return classnames('mdc-top-app-bar', Array.from(classList), className, {
      'mdc-top-app-bar--fixed': fixed,
      'mdc-top-app-bar--short': short,
      'mdc-top-app-bar--short-collapsed': alwaysCollapsed,
      'mdc-top-app-bar--prominent': prominent,
    });
  }

  ... 
}

http://localhost:8080 पर जाने पर, कंट्रोल चेकबॉक्स को अब डीओएम से क्लास के नामों को चालू/बंद करने के लिए टॉगल करना होगा.

यह कोड TopAppBar को कई डेवलपर के लिए इस्तेमाल करने लायक बनाता है. डेवलपर, सीएसएस क्लास को लागू करने की जानकारी के बारे में चिंता किए बिना, TopAppBar API के साथ इंटरैक्ट कर सकते हैं.

अब आपने अडैप्टर को सही तरीके से लागू कर दिया है. अगले सेक्शन में, फ़ाउंडेशन को इंस्टैंशिएट करने के बारे में बताया जाएगा.

कॉम्पोनेंट को माउंट और इंसर्ट करना

फ़ाउंडेशन इंस्टैंशिएट, componentDidMount तरीके में होता है.

सबसे पहले, TopAppBar.js में मौजूदा इंपोर्ट के बाद, यहां दिए गए इंपोर्ट को जोड़कर एमडीसी में टॉप ऐप्लिकेशन बार की बुनियादी बातें इंपोर्ट करें:

import {MDCTopAppBarFoundation, MDCFixedTopAppBarFoundation, MDCShortTopAppBarFoundation} from '@material/top-app-bar';

इसके बाद, TopAppBar क्लास में यह JavaScript कोड जोड़ें:

export default class TopAppBar extends React.Component {
 
  ... 

  foundation_ = null;

  componentDidMount() {
    this.initializeFoundation();
  }

  componentWillUnmount() {
    this.foundation_.destroy();
  }

  initializeFoundation = () => {
    if (this.props.short) {
      this.foundation_ = new MDCShortTopAppBarFoundation(this.adapter);
    } else if (this.props.fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(this.adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(this.adapter);
    }

    this.foundation_.init();
  }
 
  ... 

}

प्रॉपटाइप और defaultProps को तय करना, रिऐक्ट कोडिंग का एक अच्छा तरीका है. TopAppBar.js में मौजूदा इंपोर्ट के बाद, ये इंपोर्ट जोड़ें:

import PropTypes from 'prop-types';

इसके बाद, TopAppBar.js के सबसे नीचे (कॉम्पोनेंट क्लास के बाद) इस कोड को जोड़ें:

import PropTypes from 'prop-types';

TopAppBar.propTypes = {
  alwaysCollapsed: PropTypes.bool,
  short: PropTypes.bool,
  fixed: PropTypes.bool,
  prominent: PropTypes.bool,
  title: PropTypes.string,
  actionItems: PropTypes.arrayOf(PropTypes.element),
  navIcon: PropTypes.element,
};

TopAppBar.defaultProps = {
  alwaysCollapsed: false,
  short: false,
  fixed: false,
  prominent: false,
  title: '',
  actionItems: null,
  navIcon: null,
};

अब आपने टॉप ऐप्लिकेशन बार रिऐक्ट कॉम्पोनेंट को लागू कर दिया है. http://localhost:8080 पर जाने पर डेमो पेज देखा जा सकता है. डेमो पेज, एमडीसी वेब के डेमो पेज की तरह ही काम करेगा. डेमो पेज कुछ ऐसा दिखना चाहिए:

3d983b98c2092e7a.png

6. आखिर में खास जानकारी

इस ट्यूटोरियल में हमने React ऐप्लिकेशन में इस्तेमाल करने के लिए, एमडीसी वेब के फ़ाउंडेशन को रैप करने का तरीका बताया है. GitHub और एनपीएम पर कुछ लाइब्रेरी मौजूद हैं जो एमडीसी वेब कॉम्पोनेंट को रैप करती हैं. इसके बारे में फ़्रेमवर्क में इंटिग्रेट करना में बताया गया है. हमारा सुझाव है कि आप यहां दी गई सूची का इस्तेमाल करें. इस सूची में, React के अलावा Angular और Vue जैसे दूसरे फ़्रेमवर्क भी शामिल हैं.

इस ट्यूटोरियल में हमने एमडीसी वेब कोड को तीन हिस्सों में बांटने के फ़ैसले को हाइलाइट किया है: Foundation, Adapter, और कॉम्पोनेंट. इस आर्किटेक्चर की मदद से, सभी फ़्रेमवर्क के साथ काम करते हुए कॉम्पोनेंट, कॉमन कोड शेयर कर सकते हैं. मटीरियल कॉम्पोनेंट रिऐक्ट को आज़माने के लिए धन्यवाद. कृपया हमारी नई लाइब्रेरी MDC React देखें. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!

मैंने सही समय और मेहनत में इस कोडलैब को पूरा कर लिया

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत

मुझे आने वाले समय में मटीरियल कॉम्पोनेंट इस्तेमाल करते रहना है

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत