واجهة Odnoklassniki جديدة: إطلاق رد فعل في Java. الجزء الثاني

تكوين واجهة المستخدم

بنية التطبيق

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

ملخص

ماذا تمكنت من القيام به

• قم بتشغيل JavaScript على الخادم في عالم Java من Classmates.
• جعل رمز متماثل لواجهة المستخدم.
• استخدم مجموعة حديثة يعرفها جميع البائعين الأماميين.
• إنشاء منصة مشتركة ومنهج واحد لكتابة واجهة المستخدم.
• ابدأ عملية انتقال سلسة دون تعقيد العملية وعدم إبطاء عرض الخادم.