Neues Odnoklassniki-Frontend: React in Java starten. Teil II

UI-Konfiguration

Anwendungsarchitektur

{
    "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="[{..}]"
			…
/>

Wie führe ich den Code aus?

Webpack-Konfiguration zum Ausführen von JS auf Server und Client

• Konfigurieren Sie die Baugruppe jedes Teils separat.
• Schreiben Sie die Abhängigkeiten zwischen ihnen auf, damit nicht jedes Teil in das fällt, was sich im anderen befindet.
• Sammeln Sie alles in einem Durchgang.

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

Ressourcenlieferung

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",
    }
}

Alter Code in neuem

• Die alte Site und die neuen React-Apps haben völlig unterschiedliche Lebenszyklen.
• Wenn Sie den Code des alten Beispiels in die React-Anwendung einfügen, wird dieser Code nicht gestartet, da React nicht weiß, wie er aktiviert werden soll.
• Aufgrund unterschiedlicher Lebenszyklen versuchen React und die alte Engine möglicherweise gleichzeitig, den Inhalt des alten Codes zu ändern, was zu unangenehmen Nebenwirkungen führen kann.

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>
        );
    }
}

Fügen Sie alten Code auf dem Server ein

<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] }
		});
	}
}

Zusammenfassung

Was hast du geschafft?

• Führen Sie JavaScript auf dem Server in der Java-Welt von Classmates aus.
• Erstellen Sie isomorphen Code für die Benutzeroberfläche.
• Verwenden Sie einen modernen Stack, den alle Front-End-Anbieter kennen.
• Erstellen Sie eine gemeinsame Plattform und einen einzigen Ansatz zum Schreiben der Benutzeroberfläche.
• Starten Sie einen reibungslosen Übergang, ohne den Vorgang zu verkomplizieren und das Server-Rendering nicht zu verlangsamen.