{"id":288489,"date":"2018-08-24T20:55:02","date_gmt":"2018-08-24T16:55:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=288489"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=288489","title":{"rendered":"Kotlin + React vs Javasript + React"},"content":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/418553\/\" class=\"post__text post__text-html js-mediator-article\">\u041c\u044b\u0441\u043b\u044c \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u0440\u043e\u043d\u0442 \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e js \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0438\u0441\u0430\u0442\u044c React \u043d\u0430 Kotlin. \u0418 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u043c\u0430\u043b\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 (\u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u044d\u0442\u0443 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c). \u0417\u0430\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u0431\u0435\u0437\u0431\u043e\u044f\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433, \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Kotlin, \u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u0431\u0435\u043a\u0430 \u043d\u0430 JVM \u0438 \u0444\u0440\u043e\u043d\u0442\u0430 \u043d\u0430 Javascript.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 Javasript + React \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0441 \u0435\u0451 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c \u043d\u0430 Kotlin + React. \u0427\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0447\u0435\u0441\u0442\u043d\u044b\u043c, \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 Javasript \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oh\/id\/lj\/ohidlj29--2tvypgpyosvlthsra.png\"><br \/>  <a name=\"habracut\"><\/a><\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0432 Javascript \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0415\u0441\u043b\u0438 \u0434\u043b\u044f Kotlin \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c gradle, npm \u0438 webpack, \u0442\u043e \u0434\u043b\u044f Javascript \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c npm, webpack, flow \u0438 babel \u0441 \u043f\u0440\u0435\u0441\u0435\u0442\u0430\u043c\u0438 react, flow, es2015 \u0438 stage-2. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c flow \u0442\u0443\u0442 \u043a\u0430\u043a-\u0442\u043e \u0441\u0431\u043e\u043a\u0443, \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u0434\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u0441 IDE. \u0415\u0441\u043b\u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0437\u0430 \u0441\u043a\u043e\u0431\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435, \u0442\u043e \u0434\u043b\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f Kotlin+React, \u0430 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 Javascript+React+babel+Flow+ES5|ES6|ES7.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043c\u0430\u0448\u0438\u043d \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e \u043c\u0430\u0440\u043a\u0435 \u0438 \u0446\u0432\u0435\u0442\u0443. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u043a\u0443 \u0438 \u0446\u0432\u0435\u0442 \u043f\u043e\u0434\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c \u0441 \u0431\u0435\u043a\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435. \u0412\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 query. \u041c\u0430\u0448\u0438\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0432 \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0435. \u041c\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435 \u043f\u0440\u043e \u043c\u0430\u0448\u0438\u043d\u044b, \u043d\u043e \u043e\u0431\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0442\u043e, \u0441 \u0447\u0435\u043c \u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e.<\/p>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a (\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c \u043c\u043d\u0435 \u043d\u0435 \u0431\u044b\u0442\u044c):<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gq\/_g\/zl\/gq_gzlqmvngkcana1qcw0ydq9hg.png\"><\/p>\n<p>  \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u0448\u0430\u0439\u0442\u0430\u043d-\u043c\u0430\u0448\u0438\u043d\u044b \u044f \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 (\u043f\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u043a\u0443\u0440\u0438\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442 \u044d\u0442\u043e\u0439).<\/p>\n<h3>\u041f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0431\u0435\u043a\u0430<\/h3>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0431\u0440\u0435\u043d\u0434\u044b \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0441 \u0431\u0435\u043a\u0430.  <\/p>\n<table>\n<tr>\n<th>javascript  <\/th>\n<th>kotlin  <\/th>\n<\/tr>\n<tr>\n<td>\n<pre><code class=\"javascript\">class Home   extends React.Component     &lt;ContextRouter, State&gt;{      state = {     loaded: false, \/\/(1)     color: queryAsMap(   this.props.location.search     )[\"color\"],     brand: queryAsMap(   this.props.location.search     )[\"brand\"],     brands: [], \/\/(2)     colors: [] \/\/(2)   };     async componentDidMount()   {      this.setState({ \/\/(3)       brands: await ( \/\/(4)     await fetch('\/api\/brands')       ).json(),        colors: await ( \/\/(4)     await fetch('\/api\/colors')       ).json()      });    } }  type State = {   color?: string, \/\/(5)   brand?: string, \/\/(5)    loaded: boolean, \/\/(1)   brands: Array&lt;string&gt;, \/\/(2)   colors: Array&lt;string&gt; \/\/(2) };  export default Home; <\/code><\/pre>\n<p>  <\/td>\n<td>\n<pre><code>class Home(   props: RouteResultProps&lt;*&gt; ) : RComponent &lt;RouteResultProps&lt;*&gt;, State&gt; (props) {   init {     state = State(        color = queryAsMap(         props.location.search       )[\"color\"],       brand = queryAsMap(         props.location.search       )[\"brand\"]       )   }    override fun componentDidMount()   {     launch {       updateState { \/\/(3)         brands = fetchJson( \/\/(4)           \"\/api\/brands\",           StringSerializer.list         )         colors = fetchJson( \/\/(4)           \"\/api\/colors\",           StringSerializer.list         )       }     }   } }  class State(   var color: String?, \/\/(5)   var brand: String? \/\/(5) ) : RState { var loaded: Boolean = false \/\/(1) lateinit var brands: List&lt;String&gt; \/\/(2) lateinit var colors: List&lt;String&gt; \/\/(2) }  private val serializer: JSON = JSON()  suspend fun &lt;T&gt; fetchJson( \/\/(4)   url: String,   kSerializer: KSerializer&lt;T&gt; ): T {   val json = window.fetch(url)     .await().text().await()   return serializer.parse(     kSerializer, json   ) } <\/code><\/pre>\n<p>  <\/td>\n<\/tr>\n<\/table>\n<p>  \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435. \u041d\u043e \u0435\u0441\u0442\u044c \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f:  <\/p>\n<ol>\n<li>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043c \u0436\u0435, \u0433\u0434\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0438\u043f. \u0422\u0430\u043a \u043b\u0435\u0433\u0447\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430. <\/li>\n<li><b><a href=\"https:\/\/kotlinlang.org\/docs\/reference\/properties.html#late-initialized-properties-and-variables\">lateinit<\/a><\/b> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0435\u043d\u043e \u043f\u043e\u0437\u0436\u0435. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0442\u0430\u043a\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a NotNull, \u043d\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0438 \u0432\u044b\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435, \u0447\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432. \u0417\u043d\u0430\u044e, \u0442\u043e\u0433\u043e \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 flow, \u043d\u043e \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e, \u0447\u0442\u043e \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. <\/li>\n<li>kotlin-react \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e setState, \u043d\u043e \u043e\u043d\u0430 \u043d\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 inline. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c inline. <\/li>\n<li>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, <b><a href=\"https:\/\/kotlinlang.ru\/docs\/reference\/coroutines.html\">\u043a\u043e\u0440\u0443\u0442\u0438\u043d\u044b<\/a><\/b>. \u042d\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0430 async\/await \u0438 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0435\u0449\u0451. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0445 \u0441\u0434\u0435\u043b\u0430\u043d <a href=\"https:\/\/kotlinlang.org\/api\/latest\/jvm\/stdlib\/kotlin.coroutines.experimental\/-sequence-builder\/yield.html\">yield<\/a>. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432\u043e suspend, \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u0434. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0410 \u0435\u0449\u0451 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0436\u0435\u0441\u0442\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0422\u0430\u043a, \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0432\u0435\u0440\u0440\u0430\u0439\u0434\u0438\u0442\u044c componentDidMount \u0441 <code>suspend<\/code> \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u043c, \u0447\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e: componentDidMount \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434. \u0417\u0430\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043a\u043e\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a <code>launch { }<\/code>. \u041c\u043e\u0436\u043d\u043e \u0432 \u044f\u0432\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u0438\u043b\u0438 \u043f\u043e\u043b\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 (\u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430). <\/li>\n<li>\u0412 Javascript \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c nullable. \u0422\u0430\u043a \u0432 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u043c\u0441\u044f state \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c nullability \u043f\u043e\u043b\u0435\u0439 brand, color \u0438 loaded \u0438 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f. \u0412 Kotlin \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0445\u043e\u0434 \u0432 \u0431\u0435\u043a \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u0440\u0443\u0442\u0438\u043d<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code>suspend fun parallel(vararg tasks: suspend () -&gt; Unit) {     tasks.map {         async { it.invoke() } \/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 task, \u043d\u043e \u043d\u0435 \u0436\u0434\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u0430. async {} \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 promise     }.forEach { it.await() } \/\/\u0432\u0441\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u0436\u0434\u0435\u043c }  override fun componentDidMount() {     launch {         updateState {             parallel({                 halls = hallExchanger.all()             }, {                 instructors = instructorExchanger.active()             }, {                 groups = fetchGroups()             })         }     } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u043c \u043c\u0430\u0448\u0438\u043d\u044b \u0441 \u0431\u0435\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438\u0437 query<br \/>  JS:  <\/p>\n<pre><code class=\"javascript\">  async loadCars() {     let url = \"\/api\/cars?brand=\" + (this.state.brand?this.state.brand:\"\") + \"&amp;color=\" + (this.state.color?this.state.color:\"\");     this.setState({       cars: await (await fetch(url)).json(),       loaded: true     });   } <\/code><\/pre>\n<p>  Kotlin:  <\/p>\n<pre><code>  private suspend fun loadCars() {     val url = \"\/api\/cars?brand=${state.brand.orEmpty()}&amp;color=${state.color.orEmpty()}\"     updateState {       cars = fetchJson(url, Car::class.serializer().list) \/\/(*)       loaded = true     }   } <\/code><\/pre>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Kotlin \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0438\u0441\u044c \u043e\u0431 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u043d\u0443\u0436\u0434\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. Extension orEmpty() \u0438 template \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u0440\u043b\u0430.<\/p>\n<p>  \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0447\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <code>Car::class.serializer().list<\/code>. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e jetBrains \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\/\u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 JVM \u0438 JS. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u043a\u043e\u0434\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u0431\u0435\u043a \u043d\u0430 JVM. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u0448\u0435\u0434\u0448\u0435\u0433\u043e json \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u043d\u0435 \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0435\u043a\u0430, \u0438 \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f\u0445 \u0432\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435.<\/p>\n<h3>\u0420\u0438\u0441\u0443\u0435\u043c \u0448\u0430\u043f\u043a\u0443 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438<\/h3>\n<p>  \u041d\u0430\u043f\u0438\u0448\u0435\u043c stateless component \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 Kotlin \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 js \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f react loader \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435.<\/p>\n<table>\n<tr>\n<th>javascript  <\/th>\n<th>kotlin  <\/th>\n<\/tr>\n<tr>\n<td>\n<pre><code class=\"javascript\">type HomeHeaderProps = { brands: Array&lt;string&gt;, brand?: string, onBrandChange: (string) =&gt; void, colors: Array&lt;string&gt;, color?: string, onColorChange: (string) =&gt; void }  const HomeHeader = ({ brands, brand, onBrandChange, colors, color, onColorChange }: HomeHeaderProps) =&gt; (   &lt;div&gt;     Brand:     &lt;Dropdown       value={brand}       onChange={e =&gt;         onBrandChange(e.value)       }       options={withDefault(\"all\",         brands.map(value =&gt; ({       label: value, value: value     })))}      \/&gt;     Color:     &lt;Dropdown       value={color}       onChange={e =&gt;         onColorChange(e.value)       }       options={withDefault(\"all\",         colors.map(value =&gt; ({       label: value, value: value     })))}      \/&gt;   &lt;\/div&gt; );  function withDefault(   label, options ) {   options.unshift({     label: label, value: null   });   return options; } <\/code><\/pre>\n<p>  <\/td>\n<td>\n<pre><code>         private fun RBuilder.homeHeader( brands: List&lt;String&gt;, brand: String?, onBrandChange: (String?) -&gt; Unit, colors: List&lt;String&gt;, color: String?, onColorChange: (String?) -&gt; Unit ) {    +\"Brand:\"   dropdown(     value = brand,     onChange = onBrandChange,       options = brands.map {       SelectItem(         label = it, value = it       )     } withDefault \"all\"   ) {}   +\"Color:\"   dropdown(     value = color,     onChange = onColorChange,       options = colors.map {       SelectItem(         label = it, value = it       )     } withDefault \"all\"   ) {}  }  infix fun &lt;T : Any&gt;   List&lt;SelectItem&lt;T&gt;&gt;.withDefault(   label: String ) = listOf(   SelectItem(     label = label, value = null   ) ) + this <\/code><\/pre>\n<p>  <\/td>\n<\/tr>\n<\/table>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0431\u0440\u043e\u0441\u0430\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 \u2014 HomeHeaderProps \u0432 JS \u0447\u0430\u0441\u0442\u0438, \u043c\u044b \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041d\u0435\u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<p>  \u0415\u0449\u0451 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Dropdown. \u042f \u0442\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/www.primefaces.org\/primereact\/\">primereact<\/a>, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c kotlin \u043e\u0431\u0435\u0440\u0442\u043a\u0443. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u043b\u0438\u0448\u043d\u044f\u044f \u0440\u0430\u0431\u043e\u0442\u0430 (\u0441\u043b\u0430\u0432\u0430 \u0431\u043e\u0433\u0443, \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/Kotlin\/ts2kt\">ts2kt<\/a>), \u043d\u043e \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c api \u0443\u0434\u043e\u0431\u043d\u0435\u0435.<\/p>\n<p>  \u041d\u0443 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0430\u0445\u0430\u0440\u0430 \u043f\u0440\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0442\u0435\u043c\u043e\u0432 \u0434\u043b\u044f dropdown. <code>})))}<\/code> \u0432 js \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u0435\u0434\u0430. \u0417\u0430\u0442\u043e \u0432\u044b\u043f\u0440\u044f\u043c\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u043e\u0432 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435: \u00ab\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0446\u0432\u0435\u0442\u0430 \u0432 items \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c `all` \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\u00bb, \u0432\u043c\u0435\u0441\u0442\u043e \u00ab\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c `all` \u043a \u0446\u0435\u0432\u0435\u0442\u0430\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0432 items\u00bb. \u042d\u0442\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0431\u043e\u043d\u0443\u0441\u043e\u043c, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0443 \u0442\u0435\u0431\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442\u043e\u0432 \u043f\u043e\u0434\u0440\u044f\u0434\u2026<\/p>\n<h3>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0432 query<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u043e \u043c\u0430\u0440\u043a\u0435 \u0438 \u0446\u0432\u0435\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c state, \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u044b \u0441 \u0431\u0435\u043a\u0430 \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0443\u0440\u043b.<\/p>\n<table>\n<tr>\n<th>javascript  <\/th>\n<th>kotlin  <\/th>\n<\/tr>\n<tr>\n<td>\n<pre><code class=\"javascript\">   render() {     if (!this.state.loaded)       return null;     return (       &lt;HomeHeader     brands={this.state.brands}     brand={this.state.brand}     onBrandChange={brand =&gt; this.navigateToChanged({brand})}     colors={this.state.colors}     color={this.state.color}     onColorChange={color =&gt; this.navigateToChanged({color})}       \/&gt;     );   }    navigateToChanged({     brand = this.state.brand,     color = this.state.color   }: Object) { \/\/(*)     this.props.history.push( \"?brand=\" + (brand?brand:\"\") + \"&amp;color=\" + (color?color:\"\"));     this.setState({       brand,       color     });      this.loadCars()        } <\/code><\/pre>\n<p>  <\/td>\n<td>\n<pre><code>  override fun     RBuilder.render() {     if (!state.loaded) return       homeHeader(       brands = state.brands,       brand = state.brand,       onBrandChange = { navigateToChanged(brand = it) },       colors = state.colors,       color = state.color,       onColorChange = { navigateToChanged(color = it) }     )    }    private fun navigateToChanged(     brand: String? = state.brand,     color: String? = state.color   ) {     props.history.push( \"?brand=${brand.orEmpty()}\" + \"&amp;color=${color.orEmpty()}\")     updateState {       this.brand = brand       this.color = color     }     launch {       loadCars()     }   } <\/code><\/pre>\n<p>  <\/td>\n<\/tr>\n<\/table>\n<p>  \u0418 \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u044f\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u041f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e flow \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043b \u043c\u043d\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e, \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0437\u044f\u0442\u043e\u0435 \u0438\u0437 state. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0430\u0433\u0430. \u041d\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432\u044b\u0448\u043b\u043e, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0442\u0438\u043f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430, \u0442.\u0435. \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0432\u044b\u0448\u0435 \u0438\u043b\u0438 \u043d\u0438\u0436\u0435.<\/p>\n<h3>\u0420\u0438\u0441\u0443\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443<\/h3>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c stateless component \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438.<\/p>\n<table>\n<tr>\n<th>javascript  <\/th>\n<th>kotlin  <\/th>\n<\/tr>\n<tr>\n<td>\n<pre><code class=\"javascript\">const HomeContent = (props: {    cars: Array&lt;Car&gt; }) =&gt; (   &lt;DataTable value={props.cars}&gt;     &lt;Column header=\"Brand\"             body={rowData =&gt;       rowData[\"brand\"]             }\/&gt;     &lt;Column header=\"Color\"             body={rowData =&gt;       &lt;span     style={{       color: rowData['color']     }}&gt;         {rowData['color']}       &lt;\/span&gt;   }\/&gt;     &lt;Column header=\"Year\"             body={rowData =&gt;       rowData[\"year\"]}     \/&gt;   &lt;\/DataTable&gt; ); <\/code><\/pre>\n<p>  <\/td>\n<td>\n<pre><code>private fun RBuilder.homeContent(   cars: List&lt;Car&gt; ) {   datatable(cars) {     column(header = \"Brand\") {        +it.brand     }     column(header = \"Color\") {        span {         attrs.style = js {           color = it.color         }         +it.color       }     }     column(header = \"Year\") {        +\"${it.year}\"     }   } } <\/code><\/pre>\n<p>  <\/td>\n<\/tr>\n<\/table>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u043d\u043e, \u043a\u0430\u043a \u044f \u0432\u044b\u043f\u0440\u044f\u043c\u0438\u043b api primefaces, \u0438 \u043a\u0430\u043a \u0432 kotlin-react \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c. \u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 json, \u043a\u0430\u043a \u0438 \u0432 js \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435. \u0412 \u0441\u0432\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u044f \u0434\u0435\u043b\u0430\u043b \u043e\u0431\u0435\u0440\u0442\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a\u0436\u0435, \u043d\u043e \u0441\u043e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 html \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0412\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u043e\u0432\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0440\u0438\u0441\u043a\u043e\u0432\u0430\u043d\u043d\u043e. \u041c\u0430\u043b\u043e \u0433\u0430\u0439\u0434\u043e\u0432, \u043d\u0430 stack overflow \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u0442, \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0432\u0435\u0449\u0435\u0439. \u041d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Kotlin \u043c\u043e\u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043e\u043a\u0443\u043f\u0438\u043b\u0438\u0441\u044c. <\/p>\n<p>  \u041f\u043e\u043a\u0430 \u044f \u0433\u043e\u0442\u043e\u0432\u0438\u043b \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u044f \u0443\u0437\u043d\u0430\u043b \u043a\u0443\u0447\u0443 \u043d\u043e\u0432\u044b\u0445 \u0432\u0435\u0449\u0435\u0439 \u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c Javascript: flow, babel, async\/await, \u0448\u0430\u0431\u043b\u043e\u043d\u044b jsx. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u044e\u0442? \u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Kotlin. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0442\u044c \u043e React \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044f\u0437\u044b\u043a\u0430.<\/p>\n<p>  \u0410 \u0447\u0442\u043e \u0412\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u043e \u0437\u0430\u043c\u0435\u043d\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0437\u043e\u043e\u043f\u0430\u0440\u043a\u0430 \u043e\u0434\u043d\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u043b\u044e\u0448\u0435\u043a \u0432\u043f\u0440\u0438\u0434\u0430\u0447\u0443?<\/p>\n<p>  \u0414\u043b\u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0432\u0448\u0438\u0445\u0441\u044f <a href=\"https:\/\/github.com\/gnefedev\/kotlin-js-react\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a>.<\/p>\n<p>  PS<br \/>  \u0412 \u043f\u043b\u0430\u043d\u0430\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0431 \u043a\u043e\u043d\u0444\u0438\u0433\u0430\u0445, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 JVM \u0438 \u043e dsl \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0449\u0435\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e react-dom \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 html.<\/p>\n<p>  \u0423\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e Kotlin.<br \/>  <a href=\"https:\/\/habrahabr.ru\/post\/331280\/\">\u041f\u043e\u0441\u043b\u0435\u0432\u043a\u0443\u0441\u0438\u0435 \u043e\u0442 Kotlin, \u0447\u0430\u0441\u0442\u044c 1<\/a><br \/>  <a href=\"https:\/\/habrahabr.ru\/post\/337002\/\">\u041f\u043e\u0441\u043b\u0435\u0432\u043a\u0443\u0441\u0438\u0435 \u043e\u0442 Kotlin, \u0447\u0430\u0441\u0442\u044c 2<\/a><br \/>  <a href=\"https:\/\/habrahabr.ru\/post\/339618\/\">\u041f\u043e\u0441\u043b\u0435\u0432\u043a\u0443\u0441\u0438\u0435 \u043e\u0442 Kotlin, \u0447\u0430\u0441\u0442\u044c 3. \u041a\u043e\u0440\u0443\u0442\u0438\u043d\u044b \u2014 \u0434\u0435\u043b\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f<\/a><\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/post\/418553\/\"> https:\/\/habr.com\/post\/418553\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/418553\/\" class=\"post__text post__text-html js-mediator-article\">\u041c\u044b\u0441\u043b\u044c \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u0440\u043e\u043d\u0442 \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e js \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0438\u0441\u0430\u0442\u044c React \u043d\u0430 Kotlin. \u0418 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u043c\u0430\u043b\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 (\u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u044d\u0442\u0443 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c). \u0417\u0430\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u0431\u0435\u0437\u0431\u043e\u044f\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433, \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Kotlin, \u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u0431\u0435\u043a\u0430 \u043d\u0430 JVM \u0438 \u0444\u0440\u043e\u043d\u0442\u0430 \u043d\u0430 Javascript.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 Javasript + React \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0441 \u0435\u0451 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c \u043d\u0430 Kotlin + React. \u0427\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0447\u0435\u0441\u0442\u043d\u044b\u043c, \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 Javasript \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oh\/id\/lj\/ohidlj29--2tvypgpyosvlthsra.png\">  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-288489","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/288489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=288489"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/288489\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=288489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=288489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=288489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}