Frontend Odnoklassniki baru: meluncurkan React in Java. Bagian II

Konfigurasi UI

Arsitektur aplikasi

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

Bagaimana cara menjalankan kode?

Konfigurasi webpack untuk menjalankan JS di server dan klien

• Konfigurasikan perakitan masing-masing bagian secara terpisah.
• Letakkan dependensi di antara mereka sehingga masing-masing bagian tidak jatuh ke dalam apa yang ada di yang lain.
• Kumpulkan semuanya dalam satu pass.

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

Pengiriman Sumberdaya

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

Kode lama dalam baru

• Situs lama dan aplikasi Bereaksi baru memiliki siklus hidup yang sangat berbeda.
• Jika Anda menempelkan kode sampel lama di dalam aplikasi Bereaksi, maka kode ini tidak akan memulai, karena Bereaksi tidak tahu cara mengaktifkannya.
• Karena siklus hidup yang berbeda, Bereaksi dan mesin yang lama mungkin secara bersamaan mencoba untuk mengubah isi kode lama, yang dapat menyebabkan efek samping yang tidak menyenangkan.

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

Rekatkan kode lama di server

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

Ringkasan

Apa yang berhasil Anda lakukan

• Jalankan JavaScript di server di dunia Java Classmates.
• Buat kode isomorfik untuk UI.
• Gunakan tumpukan modern yang diketahui semua vendor front-end.
• Buat platform umum dan pendekatan tunggal untuk menulis UI.
• Mulai transisi yang lancar tanpa mempersulit operasi dan tidak memperlambat rendering server.