New Odnoklassniki फ्रंटेंड: जावा में रिएक्ट लॉन्च करना। भाग द्वितीय

यूआई कॉन्फ़िगरेशन

अनुप्रयोग वास्तुकला

{
    "events-calendar": {
        "bundleName": "events-calendar",
        "js": "events-calendar-h4h5m.js",
        "css": "events-calendar-h4h5m.css"
    }
}

<events-calendar	data-module="react-loader"
			data-bundle="events-calendar.js"
			date=".."
			marks="[{..}]"
			…
/>

कोड कैसे चलाएं?

सर्वर और क्लाइंट पर JS चलाने के लिए Webpack कॉन्फ़िगरेशन

• प्रत्येक भाग के असेंबली को अलग से कॉन्फ़िगर करें।
• उन दोनों के बीच निर्भरता को कम करें ताकि प्रत्येक भाग दूसरे में न गिरे।
• सब कुछ एक पास में इकट्ठा करें।

module.exports = [{
  entry: './vendors.js',
}, {
  entry: './core.js'
}, {
 entry: './app.js'
}];

संसाधन वितरण

const pkg = l10n('smiles');

<div>
    : { pkg.getText('title') }
</div>

public class ServerMethods {
    …
    
    /**
     *     
     */
    public String getText(String pkg, String key) {
        …
    }
    
    …
}

//     Java   
js.putMember("serverMethods", serverMethods);

function getText(pkg: string, key: string): string {
    return global.serverMethods.getText(pkg, key);
}

const pkg = l10n('smiles');

<div>
    { pkg.getLMsg('title') }
</div>

{
    "events-calendar": {
       "pkg":  [
           "calendar",
           "dates"
       ],
       "cfg":  [
           "config1",
           "config2"
       ],
       "bundleName":  "events-calendar",
       "js":  "events-calendar.js",
       "css":  "events-calendar.css",
    }
}

नया में पुराना कोड

• पुरानी साइट और नए रिएक्ट ऐप्स में पूरी तरह से अलग जीवन चक्र हैं।
• यदि आप रिएक्ट एप्लिकेशन के अंदर पुराने नमूने का कोड पेस्ट करते हैं, तो यह कोड शुरू नहीं होगा, क्योंकि रिएक्ट यह नहीं जानता कि इसे कैसे सक्रिय किया जाए।
• विभिन्न जीवन चक्रों के कारण, प्रतिक्रिया और पुराना इंजन एक साथ पुराने कोड की सामग्री को संशोधित करने का प्रयास कर सकते हैं, जिससे अप्रिय दुष्प्रभाव हो सकते हैं।

export class OldCodeBase<T> extends React.Component<T> {

    ref: React.RefObject<HTMLElement> = React.createRef();

    componentDidMount() {
        //       DOM
        this.props.activate(this.ref.current!); 
    }

    componentWillUnmount() {
        //       DOM
        this.props.deactivate(this.ref.current!); 
    }

    shouldComponentUpdate() {
        // React     , 
        //   React-. 
        //     .
        return false;
    }

    render() {
        return (
            <div ref={this.ref}></div>
        );
    }
}

सर्वर पर पुराना कोड पेस्ट करें

<cool-app users="[1,2,3]" />

<cool-app>
    <ui:part id="old-code">
        <div>old component</div>
    </ui:part>
</cool-app>

render() {
    return (
        <div>
            <UiPart id="old-code" />
        </div>
    );
}

<cool-app>
    <div>
        <ui-part data-part-id="old-code">
            old code
        </ui-part>
    </div>
</cool-app>

<cool-app>
    <template>
        <ui-part data-part-id="old-code">
            old code
        </ui-part>
    </template>
</cool-app>

var tagName = 'cool-app';
var reactComponent = components[tagName];
reactComponent.render({
       tagName: tagName,
       attrs: attrs,
       parts: parts,
       node: element
});

export class UiPart extends OldCodeBase<IProps> {

	render() {
		const id = this.props.id;
		const parts = this.props.parts;

		if (!parts.hasOwnProperty(id)) {
			return null;
		}

		return React.createElement('ui-part', {
			'data-part-id': id,
			ref: this.ref,
			dangerouslySetInnerHTML: { __html: parts[id] }
		});
	}
}

सारांश

आपने क्या करने का प्रबंधन किया?

• जावा में सहपाठियों की दुनिया में सर्वर पर जावास्क्रिप्ट चलाएँ।
• UI के लिए आइसोमॉर्फिक कोड बनाएं।
• एक आधुनिक स्टैक का उपयोग करें जो सभी फ्रंट-एंड विक्रेताओं को पता है।
• UI लिखने के लिए एक सामान्य प्लेटफ़ॉर्म और एक एकल दृष्टिकोण बनाएँ।
• ऑपरेशन को जटिल किए बिना एक चिकनी संक्रमण शुरू करें और सर्वर रेंडरिंग को धीमा न करें।