新的Odnoklassniki前端：在Java中启动React。第二部分

UI配置

应用架构

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

如何运行代码？

Webpack配置以在服务器和客户端上运行JS

• 分别配置每个零件的装配。
• 放下它们之间的依赖关系，以使每个部分都不属于另一个部分。
• 一口气收集所有东西。

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

新旧代码

• 旧站点和新React应用程序的生命周期完全不同。
• 如果您将旧样本的代码粘贴到React应用程序中，则该代码将不会启动，因为React不知道如何激活它。
• 由于生命周期不同，React和旧引擎可能会同时尝试修改旧代码的内容，这可能会导致令人不快的副作用。

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

摘要

你做了什么

• 在Classmates的Java世界中的服务器上运行JavaScript。
• 为UI制作同构代码。
• 使用所有前端供应商都知道的现代堆栈。
• 创建用于编写UI的通用平台和单一方法。
• 在不使操作复杂化且不减慢服务器渲染速度的情况下开始平稳过渡。