![\"image\"\/](\"https:\/\/habrastorage.org\/files\/a00\/62d\/591\/a0062d591c0c4d89b7e5b32c1521d77c.png\")
<\/p>\n<\/p>\n
\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/a> \u043d\u0430 React<\/a> \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Node.js \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u041d\u043e, \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 Java, \u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u0432 Java \u0432\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 javascript \u0434\u0432\u0438\u0436\u043e\u043a (Nashorn), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React.<\/p>\n \u041a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 React \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043d\u0430 Java, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 GitHub<\/a>. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b:<\/p>\n <\/a> <\/p>\n \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 Java \u0432 \u0441\u0442\u0438\u043b\u0435 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u0430 (\u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u044b\u0439 jar, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u0435\u0440\u0432\u043b\u0435\u0442-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432). \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 CDI (Contexts and Dependency Injection), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0448\u0435\u043b \u0438\u0437 \u043c\u0438\u0440\u0430 Java EE, \u043d\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 Java SE. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f CDI \u2014 Weld SE \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u0430\u044f \u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438. \u0414\u043b\u044f CDI \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f CDI \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0438 \u0434\u043b\u044f JAX-RS \u0438 Netty. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 src\/main\/resources\/META-INF \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b beans.xml (\u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 CDI), \u0440\u0430\u0437\u043c\u0435\u0442\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u041a\u043b\u0430\u0441\u0441\u044b, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f\u043c\u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 (\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0438 \u0440\u0443\u0447\u043d\u0430\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f).<\/p>\n \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441 CDI \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f JUnit \u043e\u0442 Arquillian<\/a>.<\/p>\n <\/div>\n<\/div>\n \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 web \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 web-\u0441\u0435\u0440\u0432\u0435\u0440 \u2014 Netty. \u0414\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u2014 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442, \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0448\u0435\u0434\u0448\u0438\u0439 \u0438\u0437 Java EE, JAX-RS. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 JAX-RS \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Resteasy. \u0414\u043b\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f Netty, CDI \u0438 Resteasy \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c resteasy-netty4-cdi<\/a>. JAX-RS \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430 javax.ws.rs.core.Application. \u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 JAX-RS \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CDI \u0438 Resteasy \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 JAX-RS \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 CDI \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (\u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 JAX-RS: Path) \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b JAX-RS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u043c\u0438 (\u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 JAX-RS: Provider). \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e Resteasy \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n <\/div>\n<\/div>\n \u0412\u0441\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b (\u0431\u0430\u043d\u0434\u043b\u044b javascript, css, \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438) \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0432 classpath (src\/main\/resources\/webapp), \u043e\u043d\u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 jar \u0444\u0430\u0439\u043b. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0442\u0430\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a URL \u0432\u0438\u0434\u0430 {fileName:.*}.{ext}, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0438\u0437 classpath \u0438 \u043e\u0442\u0434\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n <\/div>\n<\/div>\n <\/p>\n \u0414\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 Java \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c maven \u043f\u043b\u0430\u0433\u0438\u043d frontend-maven-plugin<\/a>. \u041e\u043d \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 NodeJs \u043d\u0443\u0436\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0441\u0442\u0440\u043e\u0438\u0442 \u0431\u0430\u043d\u0434\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e webpack. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 Java \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 mvn (\u043b\u0438\u0431\u043e \u0432 IDE, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 maven). \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 javascript, \u0441\u0442\u0438\u043b\u0438, package.json, \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 webpack \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 src\/main\/frontend, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0431\u0430\u043d\u0434\u043b \u0432 src\/main\/resources\/webapp\/static\/assets.<\/p>\n <\/div>\n<\/div>\n \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 JAX-RS \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043b\u0430\u0441\u0441, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439 Provider, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 javax.ws.rs.ext.MessageBodyWriter, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 web-\u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0414\u0432\u0438\u0436\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442 Javascript \u0432\u0435\u0440\u0441\u0438\u0438 ECMAScript 5.1 \u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u0430\u043a \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439, \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0432 \u0431\u0430\u043d\u0434\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e webpack. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0431\u0430\u043d\u0434\u043b \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u0449\u0435\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b, \u043d\u043e \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430. \u041f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 Nashorn \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b (\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u044b\u0439 webpack \u0441 \u043a\u043b\u044e\u0447\u043e\u043c —optimize-minimize) \u2014 \u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0435\u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b. \u0414\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043e\u0431\u043e\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u043a Webpack: unminified-webpack-plugin<\/a>. <\/p>\n \u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043b\u0438\u0431\u043e \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0434\u0432\u0438\u0436\u043a\u0430, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 Nashorn \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0438\u0437 classpath. Nashorn \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0445 javascript \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a setInterval, setTimeout, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442-polyfill. \u0417\u0430\u0442\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435). \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439, \u043d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043e\u0449\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0443 \u0441\u0435\u043a\u0443\u043d\u0434, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0443\u0436\u0435\u043d \u043a\u0435\u0448 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0434\u0432\u0438\u0436\u043a\u043e\u0432.<\/p>\n <\/div>\n<\/div>\n \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u043d\u0430 \u0443\u0436\u0435 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0434\u0432\u0438\u0436\u043a\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f HTML, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e React, \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e renderHtml, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 (src\\server.jsx). \u0412 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0439 URL, \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e react-router, \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 redux \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0432 \u0432\u0438\u0434\u0435 JSON). \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f redux, \u0432 \u0432\u0438\u0434\u0435 JSON, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e window.INITIAL_STATE. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 React \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b\u043e \u0441 HTML, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 js \u0431\u0430\u043d\u0434\u043b\u0430:<\/p>\n \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 js \u0431\u0430\u043d\u0434\u043b\u0430:<\/p>\n <\/p>\n \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c webpack dev server \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u00ab\u0433\u043e\u0440\u044f\u0447\u0435\u0439\u00bb \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u043b\u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 webpack dev server \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043f\u043e\u0440\u0442\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0432 \u0432 package.json \u043a\u043e\u043c\u0430\u043d\u0434\u0443 npm run debug) \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043b\u0435\u0442\u0443, \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a HTML \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u0438 \u043a\u043e\u0434\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443 webpack dev \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0421\u0435\u0440\u0432\u0435\u0440 \u0441\u0442\u0440\u043e\u0438\u0442 \u0431\u0430\u043d\u0434\u043b\u044b \u043d\u0430 \u043b\u0435\u0442\u0443, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u0443\u0435\u0442 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. <\/p>\n package.json: <\/p>\n \u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u00ab\u0433\u043e\u0440\u044f\u0447\u0435\u0439\u00bb \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435.<\/p>\n \u0412 \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a webpack:<\/p>\n <\/li>\n <\/li>\n <\/li>\n <\/li>\n <\/li>\n <\/li>\n \u0412 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React.<\/p>\n \u0412 \u043c\u043e\u0434\u0443\u043b\u0435, \u0433\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 redux, \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f. \u042d\u0442\u043e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 redux-\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u043c\u0438 \u0441\u0442\u0430\u0440\u044b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438.<\/p>\n \u0412 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 Java \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 frontend-maven-plugin \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React: \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c webpack dev server, \u043e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438 \u0434\u0438\u0441\u043a \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u043e\u0432. \u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e frontend-maven-plugin \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c maven: frontendDevelopment (\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 IDE, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 maven). \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0431\u0430\u043d\u0434\u043b\u044b \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e webpack. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/a> \u043d\u0430 React<\/a> \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Node.js \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u041d\u043e, \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 Java, \u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u0432 Java \u0432\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 javascript \u0434\u0432\u0438\u0436\u043e\u043a (Nashorn), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React.<\/p>\n \u041a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 React \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043d\u0430 Java, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 GitHub<\/a>. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b:<\/p>\n\n
\u0421\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 Java<\/h2>\n
\/\/ \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434. public static void main(String[] args) { \/\/ \u041b\u043e\u0433 JUL \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 SLF4J. SLF4JBridgeHandler.removeHandlersForRootLogger(); SLF4JBridgeHandler.install(); LOG.info("Start application"); \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 CDI \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 http:\/\/weld.cdi-spec.org\/ final Weld weld = new Weld(); \/\/ \u0417\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u0441\u0430\u043c\u0438. weld.property(Weld.SHUTDOWN_HOOK_SYSTEM_PROPERTY, false); final WeldContainer container = weld.initialize(); \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Netty \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 JAX-RS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 CDI \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c. final CdiNettyJaxrsServer nettyServer = new CdiNettyJaxrsServer(); ............... \/\/ \u0417\u0430\u043f\u0443\u0441\u043a web \u0441\u0435\u0440\u0432\u0435\u0440\u0430. nettyServer.start(); .............. \/\/ \u041e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0441\u0438\u0433\u043d\u0430\u043b\u0430 TERM \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f. try { final CountDownLatch shutdownSignal = new CountDownLatch(1); Runtime.getRuntime().addShutdownHook(new Thread(() -> { shutdownSignal.countDown(); })); try { shutdownSignal.await(); } catch (InterruptedException e) { } } finally { \/\/ \u041e\u0441\u0442\u0430\u043d\u043e\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 CDI \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. nettyServer.stop(); container.shutdown(); LOG.info("Application shutdown"); SLF4JBridgeHandler.uninstall(); } } \/\/ \u041a\u043b\u0430\u0441\u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u043b\u044f "\u0432\u043f\u0440\u044b\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f" \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b @ApplicationScoped public class IncrementService { .............. } \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 @NoCache @Path("\/") @RequestScoped @Produces(MediaType.TEXT_HTML + ";charset=utf-8") public class RootResource { \/** * \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 {@link IncrementService}. *\/ @Inject private IncrementService incrementService; .............. } <\/code><\/pre>\n\u041c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u0441\u0442<\/b><\/p>\n\n\/** * \u0422\u0435\u0441\u0442 \u0434\u043b\u044f {@link IncrementResource}. *\/ @RunWith(Arquillian.class) public class IncrementResourceTest { @Inject private IncrementResource incrementResource; \/** * @return \u041d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 CDI. *\/ @Deployment public static JavaArchive createDeployment() { return ShrinkWrap.create(JavaArchive.class) .addClass(IncrementResource.class) .addAsManifestResource(EmptyAsset.INSTANCE, "beans.xml"); } @Test public void getATest() { final Map<String, Integer> response = incrementResource.getA(); assertNotNull(response.get("value")); assertEquals(Integer.valueOf(1), response.get("value")); } .............. \/** * \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u043e\u043a \u0434\u043b\u044f {@link IncrementService}. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f RequestScoped: * Arquillian \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430. * @return \u041c\u043e\u043a \u0434\u043b\u044f {@link IncrementService}. *\/ @Produces @RequestScoped public IncrementService getIncrementService() { final IncrementService service = mock(IncrementService.class); when(service.getA()).thenReturn(1); when(service.incrementA()).thenReturn(2); when(service.getB()).thenReturn(2); when(service.incrementB()).thenReturn(3); return service; } } <\/code><\/pre>\nNetty \u0438 JAX-RS Application<\/b><\/p>\n\npublic static void main(String[] args) { ............... \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Netty \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 JAX-RS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 CDI \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c. \/\/ \u0414\u043b\u044f JAX-RS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Resteasy http:\/\/resteasy.jboss.org\/ final CdiNettyJaxrsServer nettyServer = new CdiNettyJaxrsServer(); \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Netty (\u0430\u0434\u0440\u0435\u0441 \u0438 \u043f\u043e\u0440\u0442). final String host = configuration.getString( AppConfiguration.WEBSERVER_HOST, AppConfiguration.WEBSERVER_HOST_DEFAULT); nettyServer.setHostname(host); final int port = configuration.getInt( AppConfiguration.WEBSERVER_PORT, AppConfiguration.WEBSERVER_PORT_DEFAULT); nettyServer.setPort(port); \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 JAX-RS. final ResteasyDeployment deployment = nettyServer.getDeployment(); \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0444\u0430\u0431\u0440\u0438\u043a\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f JAX-RS (\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b). deployment.setInjectorFactoryClass(CdiInjectorFactory.class.getName()); \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u0435\u043d JAX-RS \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432. deployment.setApplicationClass(ReactReduxIsomorphicExampleApplication.class.getName()); \/\/ \u0417\u0430\u043f\u0443\u0441\u043a web \u0441\u0435\u0440\u0432\u0435\u0440\u0430. nettyServer.start(); ............... } \/** * \u041a\u043b\u0430\u0441\u0441 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u0445 \u0434\u043b\u044f JAX-RS *\/ @ApplicationScoped @ApplicationPath("\/") public class ReactReduxIsomorphicExampleApplication extends Application { \/** * \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 CDI \u0434\u043b\u044f Resteasy. *\/ @Inject private ResteasyCdiExtension extension; \/** * @return \u0421\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u0434\u043b\u044f JAX-RS. *\/ @Override @SuppressWarnings("unchecked") public Set<Class<?>> getClasses() { final Set<Class<?>> result = new HashSet<>(); \/\/ \u0418\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f CDI \u0434\u043b\u044f Resteasy \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 JAX-RS. result.addAll((Collection<? extends Class<?>>) (Object)extension.getResources()); \/\/ \u0418\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f CDI \u0434\u043b\u044f Resteasy \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u0445 JAX-RS. result.addAll((Collection<? extends Class<?>>) (Object)extension.getProviders()); return result; } } <\/code><\/pre>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0442\u0430\u0442\u0438\u043a\u0435<\/b><\/p>\n\n\/** * \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u0430\u043c. * <p>\u0417\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043b\u044e\u0431\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u0438\u0434\u0430 {filename}.{ext}<\/p> *\/ @Path("\/") @RequestScoped public class StaticFilesResource { private final static Date START_DATE = DateUtils.setMilliseconds(new Date(), 0); @Inject private Configuration configuration; \/** * \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u0430\u043c. \u0424\u0430\u0439\u043b\u044b \u043e\u0442\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437 classpath. * @param fileName \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u0443\u0442\u0435\u043c. * @param ext \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430. * @param uriInfo URL \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. * @param request \u0414\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. * @return \u041e\u0442\u0432\u0435\u0442 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 404 - \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e. * @throws Exception \u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430. *\/ @GET @Path("{fileName:.*}.{ext}") public Response getAsset( @PathParam("fileName") String fileName, @PathParam("ext") String ext, @Context UriInfo uriInfo, @Context Request request) throws Exception { if(StringUtils.contains(fileName, "nomin") || StringUtils.contains(fileName, "server")) { \/\/ \u041d\u0435\u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c. return Response.status(Response.Status.NOT_FOUND) .build(); } \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 ifModifiedSince \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0444\u0430\u0439\u043b\u044b \u043e\u0442\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437 classpath, \/\/ \u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. final ResponseBuilder builder = request.evaluatePreconditions(START_DATE); if (builder != null) { \/\/ \u0424\u0430\u0439\u043b \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f. return builder.build(); } \/\/ \u041f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0432 classpath. final String fileFullName = "webapp\/static\/" + fileName + "." + ext; \/\/ \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0444\u0430\u0439\u043b\u0430. final InputStream resourceStream = ResourceUtilities.getResourceStream(fileFullName); if(resourceStream != null) { \/\/ \u0424\u0430\u0439\u043b \u0435\u0441\u0442\u044c, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. final String cacheControl = configuration.getString( AppConfiguration.WEBSERVER_HOST, AppConfiguration.WEBSERVER_HOST_DEFAULT); \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0430. return Response.ok(resourceStream) .type(URLConnection.guessContentTypeFromName(fileFullName)) .cacheControl(CacheControl.valueOf(cacheControl)) .lastModified(START_DATE) .build(); } \/\/ \u0424\u0430\u0439\u043b \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d. return Response.status(Response.Status.NOT_FOUND) .build(); } } <\/code><\/pre>\n\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u043d\u0430 React<\/h2>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 fronend-maven-plugin<\/b><\/p>\n\n<plugin> <groupId>com.github.eirslett<\/groupId> <artifactId>frontend-maven-plugin<\/artifactId> <configuration> <nodeVersion>v${node.version}<\/nodeVersion> <npmVersion>${npm.version}<\/npmVersion> <installDirectory>${basedir}\/src\/main\/frontend<\/installDirectory> <workingDirectory>${basedir}\/src\/main\/frontend<\/workingDirectory> <\/configuration> <executions> <!-- \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 nodejs \u0438 npm \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. --> <execution> <id>nodeInstall<\/id> <goals> <goal>install-node-and-npm<\/goal> <\/goals> <\/execution> <!-- \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 npm \u0438\u0437 src\/main\/frontend\/package.json. --> <execution> <id>npmInstall<\/id> <goals> <goal>npm<\/goal> <\/goals> <\/execution> <!-- \u0421\u0431\u043e\u0440\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e webpack. --> <execution> <id>webpackBuild<\/id> <goals> <goal>webpack<\/goal> <\/goals> <configuration> <skip>${webpack.skip}<\/skip> <arguments>${webpack.arguments}<\/arguments> <srcdir>${basedir}\/src\/main\/frontend\/app<\/srcdir> <outputdir>${basedir}\/src\/main\/resources\/webapp\/static\/assets<\/outputdir> <triggerfiles> <triggerfile>${basedir}\/src\/main\/frontend\/webpack.config.js<\/triggerfile> <triggerfile>${basedir}\/src\/main\/frontend\/package.json<\/triggerfile> <\/triggerfiles> <\/configuration> <\/execution> <\/executions> <\/plugin> <\/code><\/pre>\n
\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0432 Java javascript \u0434\u0432\u0438\u0436\u043a\u0430 \u2014 Nashorn. \u042d\u0442\u043e \u043e\u0434\u043d\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a: \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0435\u0448\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0434\u0432\u0438\u0436\u043a\u0430, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML, \u0437\u0430\u0442\u0435\u043c \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043f\u0443\u043b (Apache Commons Pool 2<\/a>).<\/p>\n\/** * \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f web-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. *\/ public class ViewResult { private final String template; private final Map<String, Object> viewData = new HashMap<>(); private final Map<String, Object> reduxInitialState = new HashMap<>(); .............. } \/** * \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0432 {@link ViewResult} \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 HTML. * <p> * \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 React \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0432\u0438\u0436\u043a\u0430 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML (React Isomorphic), * \u0442\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. * <\/p> *\/ @Provider @ApplicationScoped public class ViewResultBodyWriter implements MessageBodyWriter<ViewResult> { .............. private ObjectPool<AbstractScriptEngine> enginePool = null; @PostConstruct public void initialize() { \/\/ \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. final boolean useIsomorphicRender = configuration.getBoolean( AppConfiguration.WEBSERVER_ISOMORPHIC, AppConfiguration.WEBSERVER_ISOMORPHIC_DEFAULT); final int minIdleScriptEngines = configuration.getInt( AppConfiguration.WEBSERVER_MIN_IDLE_SCRIPT_ENGINES, AppConfiguration.WEBSERVER_MIN_IDLE_SCRIPT_ENGINES_DEFAULT); LOG.info("Isomorphic render: {}", useIsomorphicRender); if(useIsomorphicRender) { \/\/ \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 React \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u043b \/\/ javascript \u0434\u0432\u0438\u0436\u043a\u043e\u0432. Javascript \u043e\u0434\u043d\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u044b\u0439, \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043a\u0430 javascript. final GenericObjectPoolConfig config = new GenericObjectPoolConfig(); config.setMinIdle(minIdleScriptEngines); enginePool = new GenericObjectPool<AbstractScriptEngine>(new ScriptEngineFactory(), config); } } @PreDestroy public void destroy() { if(enginePool != null) { enginePool.close(); } } .............. @Override public void writeTo( ViewResult t, Class<?> type, Type genericType, Annotation[] annotations, MediaType mediaType, MultivaluedMap<String, Object> httpHeaders, OutputStream entityStream) throws IOException, WebApplicationException { .............. if(enginePool != null && t.getUseIsomorphic()) { \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f React \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. try { \/\/ \u0418\u0437 \u043f\u0443\u043b\u0430 \u0434\u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a javascript. final AbstractScriptEngine scriptEngine = enginePool.borrowObject(); try { \/\/ URL \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043d\u0443\u0436\u0435\u043d react-router \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c. final String uri = uriInfo.getPath() + (uriInfo.getRequestUri().getQuery() != null ? (String) ("?" + uriInfo.getRequestUri().getQuery()) : StringUtils.EMPTY); \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React. final String htmlContent = (String)((Invocable)scriptEngine).invokeFunction( "renderHtml", uri, initialStateJson); \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0434\u0432\u0438\u0436\u043a\u0430 \u0432 \u043f\u0443\u043b. enginePool.returnObject(scriptEngine); viewData.put(HTML_CONTENT_KEY, htmlContent); } catch (Throwable e) { enginePool.invalidateObject(scriptEngine); throw e; } } catch (Exception e) { throw new WebApplicationException(e); } } else { viewData.put(HTML_CONTENT_KEY, StringUtils.EMPTY); } \/\/ \u041d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 HTML \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. final String pageContent = StrSubstitutor.replace(templateContent, viewData); entityStream.write(pageContent.getBytes(StandardCharsets.UTF_8)); } \/** * \u0424\u0430\u0431\u0440\u0438\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u0432\u0438\u0436\u043a\u0430 javascript. *\/ private static class ScriptEngineFactory extends BasePooledObjectFactory<AbstractScriptEngine> { @Override public AbstractScriptEngine create() throws Exception { LOG.info("Create new script engine"); \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c nashorn \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 javascript \u0434\u0432\u0438\u0436\u043a\u0430. final AbstractScriptEngine scriptEngine = (AbstractScriptEngine) new ScriptEngineManager().getEngineByName("nashorn"); try(final InputStreamReader polyfillReader = ResourceUtilities.getResourceTextReader(WEBAPP_ROOT + "server-polyfill.js"); final InputStreamReader serverReader = ResourceUtilities.getResourceTextReader(WEBAPP_ROOT + "static\/assets\/server.js")) { \/\/ \u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u0432 nashorn, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. scriptEngine.eval(polyfillReader); \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c HTML \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. scriptEngine.eval(serverReader); } \/\/ \u0417\u0430\u043f\u0443\u0441\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. ((Invocable)scriptEngine).invokeFunction( "initializeEngine", ResourceUtilities.class.getName()); return scriptEngine; } @Override public PooledObject<AbstractScriptEngine> wrap(AbstractScriptEngine obj) { return new DefaultPooledObject<AbstractScriptEngine>(obj); } } } <\/code><\/pre>\n\u041f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f Nashorn<\/b><\/p>\n\n\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 global \u0434\u043b\u044f javascript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. var global = this; \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 window \u0434\u043b\u044f javascript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \/\/ \u043e\u043d\u0438 \u0434\u0443\u043c\u0430\u044e\u0442 \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. var window = this; \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0432, \u0432 Nashorn \u043d\u0435\u0442 console. var console = { error: print, debug: print, warn: print, log: print }; \/\/ \u0412 Nashorn \u043d\u0435\u0442 setTimeout, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c callback - \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441\u0440\u0430\u0437\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442. function setTimeout(func, delay) { func(); return 0; }; function clearTimeout() { }; \/\/ \u0412 Nashorn \u043d\u0435\u0442 setInterval, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c callback - \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441\u0440\u0430\u0437\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442. function setInterval(func, delay) { func(); return 0; }; function clearInterval() { }; <\/code><\/pre>\n \/** * \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. * @param {String} url URL \u0442\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. * @param {String} initialStateJson \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f Redux \u0432 \u0441\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 JSON. * @return {String} HTML, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 React. *\/ renderHtml = function renderHtml(url, initialStateJson) { \/\/ \u041f\u0430\u0440\u0441\u0438\u043d\u0433 JSON \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043b\u044f Redux. const initialState = JSON.parse(initialStateJson) \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0434\u043b\u044f react-router (\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438). const history = createMemoryHistory() \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 Redux \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. const store = configureStore(initialState, history, true) \/\/ \u041e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043d\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. const htmlContent = {} global.INITIAL_STATE = initialState \/\/ \u042d\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c URL \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e react-router. match({ routes: routes({history}), location: url }, (error, redirectLocation, renderProps) => { if (error) { throw error } \/\/ \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. htmlContent.result = ReactDOMServer.renderToString( <AppContainer> <Provider store={store}> <RouterContext {...renderProps}\/> <\/Provider> <\/AppContainer> ) }) return htmlContent.result } <\/code><\/pre>\n\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 Redux. const store = configureStore(initialState, history, false) \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c HTML, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 React. const contentElement = document.getElementById("content") \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. ReactDOM.render(<App store={store} history={history}\/>, contentElement) <\/code><\/pre>\n\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u00ab\u0433\u043e\u0440\u044f\u0447\u0435\u0439\u00bb \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 HTML\/\u0441\u0442\u0438\u043b\u0435\u0439<\/h2>\n
{ "name": "java-react-redux-isomorphic-example", "version": "1.0.0", "private": true, "scripts": { "debug": "cross-env DEBUG=true APP_PORT=8080 PROXY_PORT=8081 webpack-dev-server --hot --colors --inline", "build": "webpack", "build:debug": "webpack -p" } } <\/code><\/pre>\n\n
devtool: isHot \/\/ \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u0438 "\u0433\u043e\u0440\u044f\u0447\u0435\u0439" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435. ? "module-source-map" \/\/ "module-eval-source-map" \/\/ \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 production. : "source-map" <\/code><\/pre>\n \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. devServer: { \/\/ \u0413\u043e\u0440\u044f\u0447\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. hot: true, \/\/ \u041f\u043e\u0440\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. port: proxyPort, \/\/ \u0421\u0435\u0440\u0432\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043f\u0440\u043e\u043a\u0441\u0438 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. proxy: { "*": `http:\/\/localhost:${appPort}` } } <\/code><\/pre>\n entry: { \/\/ \u0411\u0430\u043d\u0434\u043b \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430. main: ["es6-promise", "babel-polyfill"] .concat(isHot \/\/ \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f "\u0433\u043e\u0440\u044f\u0447\u0430\u044f" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 - \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0434\u0438\u0430\u0442\u043e\u0440. ? ["react-hot-loader\/patch"] \/\/ \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430. : []) .concat([".\/src\/main.jsx"]), \/\/ \u0411\u0430\u043d\u0434\u043b \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. [isProduction ? "server.min" : "server"]: ["es6-promise", "babel-polyfill", ".\/src\/server.jsx"] } <\/code><\/pre>\n output: { \/\/ \u041f\u0443\u0442\u044c \u0434\u043b\u044f \u0431\u0430\u043d\u0434\u043b\u043e\u0432. path: Path.join(__dirname, "..\/resources\/webapp\/static\/assets\/"), publicPath: isHot \/\/ \u0421\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441 "\u0433\u043e\u0440\u044f\u0447\u0435\u0439" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 (\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c). ? `http:\/\/localhost:${proxyPort}\/assets\/` : "\/assets\/", filename: "[name].js", chunkFilename: "[name].js" } <\/code><\/pre>\n { \/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a JavaScript (Babel). test: \/\\.(js|jsx)?$\/, exclude: \/(node_modules)\/, use: [ { loader: isHot \/\/ \u0414\u043b\u044f "\u0433\u0430\u0440\u044f\u0447\u0435\u0439" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c babel. ? "babel-loader?plugins[]=syntax-dynamic-import,plugins[]=react-hot-loader\/babel" : "babel-loader" } ] } <\/code><\/pre>\n { \/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0441\u0442\u0438\u043b\u0435\u0439 CSS. test: \/\\.css$\/, use: isHot \/\/ \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 "\u0433\u043e\u0440\u044f\u0447\u0435\u0439" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0430\u043d\u0434\u043b \u0441 JavaScript \u043a\u043e\u0434\u043e\u043c. ? ["style-loader"].concat(cssStyles) \/\/ \u0412 production - \u0441\u0442\u0438\u043b\u0438 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b. : ExtractTextPlugin.extract({use: cssStyles, publicPath: "..\/assets\/"}) } <\/code><\/pre>\n\/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. ReactDOM.render(<App store={store} history={history}\/>, contentElement) if (module.hot) { \/\/ \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 "\u0433\u043e\u0440\u044f\u0447\u0435\u0439" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. module.hot.accept(".\/containers\/app", () => { const app = require(".\/containers\/app").default ReactDOM.render(app({store, history}), contentElement) }) } <\/code><\/pre>\nconst store = createStore(reducers, initialState, applyMiddleware(...middleware)) if (module.hot) { \/\/ \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 "\u0433\u043e\u0440\u044f\u0447\u0435\u0439" \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Redux-\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. module.hot.accept(".\/reducers", () => { const nextRootReducer = require(".\/reducers") store.replaceReducer(nextRootReducer) }) } return store <\/code><\/pre>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habrahabr.ru\/post\/327480\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<\/p>\n\n