Nouvelle interface Odnoklassniki: lancement de React en Java. Partie II

Configuration de l'interface utilisateur

Architecture d'application

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

Comment exécuter le code?

Configuration de Webpack pour exécuter JS sur le serveur et le client

• Configurez séparément l'assemblage de chaque pièce.
• Réduisez les dépendances entre elles afin que chaque partie ne tombe pas dans ce qui est dans l'autre.
• Rassemblez tout en un seul passage.

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

Livraison des ressources

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

Ancien code dans le nouveau

• L'ancien site et les nouvelles applications React ont des cycles de vie complètement différents.
• Si vous collez le code de l'ancien exemple dans l'application React, ce code ne démarrera pas, car React ne sait pas comment l'activer.
• En raison de cycles de vie différents, React et l'ancien moteur peuvent simultanément essayer de modifier le contenu de l'ancien code, ce qui peut provoquer des effets secondaires désagréables.

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

Coller l'ancien code sur le serveur

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

Sommaire

Qu'avez-vous réussi à faire

• Exécutez JavaScript sur le serveur dans le monde Java de Classmates.
• Créez un code isomorphe pour l'interface utilisateur.
• Utilisez une pile moderne que tous les fournisseurs frontaux connaissent.
• Créez une plate-forme commune et une approche unique pour l'écriture de l'interface utilisateur.
• Commencez une transition en douceur sans compliquer l'opération et sans ralentir le rendu du serveur.