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

1. परिचय

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

MDC Web को इस तरह से डिज़ाइन किया गया है कि इसे किसी भी फ़्रंट एंड फ़्रेमवर्क में इंटिग्रेट किया जा सकता है. साथ ही, यह मटीरियल डिज़ाइन के सिद्धांतों का पालन करता है. इस कोडलैब में, MDC Web का इस्तेमाल करके React कॉम्पोनेंट बनाने का तरीका बताया गया है. इस कोडलैब में बताए गए सिद्धांतों को किसी भी JavaScript फ़्रेमवर्क पर लागू किया जा सकता है.

MDC Web को कैसे बनाया गया है

MDC Web की JavaScript लेयर में, हर कॉम्पोनेंट के लिए तीन क्लास होती हैं: Component, Foundation, और Adapter. इस पैटर्न की वजह से, MDC Web को फ़्रंटएंड फ़्रेमवर्क के साथ इंटिग्रेट करना आसान हो जाता है.

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

Adapter एक इंटरफ़ेस है. Adapter इंटरफ़ेस को Foundation से रेफ़रंस किया जाता है, ताकि Material Design के कारोबारी नियमों को लागू किया जा सके. Adapter को Angular या React जैसे अलग-अलग फ़्रेमवर्क में लागू किया जा सकता है. अडैप्टर का कोई भी वर्शन, DOM स्ट्रक्चर के साथ इंटरैक्ट करता है.

कॉम्पोनेंट में एक फ़ाउंडेशन होता है. इसका काम

फ़्रेमवर्क के बाहर की JavaScript का इस्तेमाल करके, अडैप्टर लागू करें. साथ ही,
Foundation में मौजूद तरीकों के लिए, प्रॉक्सी के तौर पर काम करने वाले पब्लिक मेथड उपलब्ध कराएं.

MDC Web क्या-क्या उपलब्ध कराता है

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

MDC Web को किसी फ़्रेमवर्क में इंटिग्रेट करने के लिए, आपको उस फ़्रेमवर्क की भाषा/सिंटैक्स में अपना कॉम्पोनेंट बनाना होगा. फ़्रेमवर्क Component, MDC Web के Adapter को लागू करता है और MDC Web के Foundation का इस्तेमाल करता है.

आपको क्या बनाने को मिलेगा

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

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

नेविगेशन आइकॉन
Action items
इसके चार वैरिएंट उपलब्ध हैं: छोटा, हमेशा छोटा किया गया, तय की गई जगह पर दिखने वाला, और प्रमुख वैरिएंट

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

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

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

शुरुआती

सामान्य

एडवांस

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

आपको कई गतिविधियां दिखेंगी. आखिर में, आपके टर्मिनल पर यह मैसेज दिखेगा कि ऐप्लिकेशन इंस्टॉल हो गया है:

MDC Web, Sass नाम के सीएसएस प्रीप्रोसेसर का इस्तेमाल करता है. अगर किसी दूसरे CSS प्रीप्रोसेसर का इस्तेमाल किया जा रहा है या किसी का भी इस्तेमाल नहीं किया जा रहा है, तो कोई बात नहीं! अपने मौजूदा प्रीप्रोसेसर के साथ Sass का इस्तेमाल किया जा सकता है. इसके लिए, sass CLI इंस्टॉल करें या अपने बिल्ड टूलचेन में कोई प्लगिन इस्तेमाल करें. उदाहरण के लिए, Webpack के लिए sass-loader, Gulp के लिए gulp-sass या Grunt के लिए grunt-sass.

हमारे कोड को IE 11 जैसे पुराने ब्राउज़र में काम करने के लिए, हम Babel नाम के ट्रांसपाइलर का इस्तेमाल करते हैं. इससे MDC Web के ES2015 JavaScript सिंटैक्स को ES5 JavaScript सिंटैक्स में ट्रांसपाइल किया जाता है.

हम अपनी फ़ाइलों को बंडल करने और अपनी साइट को स्थानीय तौर पर उपलब्ध कराने के लिए, webpack का इस्तेमाल करेंगे. इस प्रोजेक्ट के लिए webpack कॉन्फ़िगरेशन, webpack.config.js फ़ाइल में पहले से ही सेट अप कर दिया गया है. इसे कॉन्फ़िगर करने के तरीके के बारे में ज़्यादा जानने के लिए, शुरुआती निर्देश देखें.

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

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

npm start

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

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

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

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

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 फ़ाइल खोलें. यह एक सामान्य React Component क्लास है, जिसमें render तरीका इस्तेमाल किया गया है:

TopAppBar.js

import React from 'react';

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

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

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

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

अगर आपको टॉप ऐप्लिकेशन बार में शामिल एलिमेंट के बारे में कोई सवाल पूछना है, तो 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 तरीके में किया जाता है. हालांकि, getMergedStyles तरीका मौजूद नहीं है. कृपया TopAppBar क्लास में यह JavaScript तरीका जोड़ें:

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

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

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

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

रणनीति

Adapter के तरीके लागू करें.
componentDidMount में Foundation को शुरू करें.
componentWillUnmount में Foundation.destroy तरीके को कॉल करें.
getter तरीके का इस्तेमाल करके, वैरिएंट मैनेजमेंट सेट अप करें. इसमें क्लास के सही नाम शामिल हों.

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

नॉन-फ़्रेमवर्क JS TopAppBar Component, यहां दिए गए Adapter तरीकों को लागू करता है. इनके बारे में ज़्यादा जानकारी यहां दी गई है:

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 में स्क्रोल या साइज़ बदलने के लिए कोई सिंथेटिक इवेंट नहीं होता है. साथ ही, यह नेटिव DOM इवेंट सिस्टम पर निर्भर करता है. getViewPortScrollY को भी नेटिव DOM का इस्तेमाल करना चाहिए, क्योंकि यह 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 के add/remove CSS क्लास के तरीकों की तरह काम करने के लिए, classList स्टेट वैरिएबल जोड़ें. TopAppBar में तीन कोड हैं, जो सीएसएस क्लास के साथ इंटरैक्ट करते हैं:

className प्रॉपर्टी के ज़रिए <TopAppBar /> कॉम्पोनेंट को सेट किया जा सकता है.
addClass या removeClass के ज़रिए अडैप्टर का इस्तेमाल करके डेटा ट्रांसफ़र करना.
<TopAppBar /> React कॉम्पोनेंट में हार्ड कोड किया गया है.

सबसे पहले, 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 पर जाकर, अब कंट्रोल चेकबॉक्स को टॉगल करके DOM से क्लास के नाम चालू/बंद किए जा सकते हैं.

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

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

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

Foundation को 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();
  }
 
  ... 

}

React कोडिंग का एक अच्छा तरीका यह है कि propTypes और 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,
};

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

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

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

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

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

पूरी तरह सहमत

सहमत

न तो सहमत और न ही असहमत

असहमत

पूरी तरह असहमत

मुझे आने वाले समय में, Material Components का इस्तेमाल जारी रखना है