{"id":21691,"date":"2018-05-18T12:15:23","date_gmt":"2018-05-18T09:15:23","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21691"},"modified":"2018-05-18T11:01:39","modified_gmt":"2018-05-18T08:01:39","slug":"introduction-to-kotlin-to-javascript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/","title":{"rendered":"Introduction to Kotlin (to) JavaScript"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which the to-JavaScript compiler is an independent framework, Kotlin provides a to-JavaScript compiler as an integral part of its compiler. Another difference between Kotlin compiler and other frameworks is that Kotlin provides its lib in a separate file (named <code>kotlin.js<\/code>), in addition to the compiled source code.<\/p>\n<p>This leads to the neccessity to include both files, or find tools to concatenate them. In this post, we will go through a simple example of setting up and running Kotlin to JavaScript.<\/p>\n<h2>Setup<\/h2>\n<p>There are different ways to setup Kotlin to JavaScript based on the IDE or the used build tool (more details can be found in the <a href=\"https:\/\/kotlinlang.org\/docs\/tutorials\/javascript\/kotlin-to-javascript\/kotlin-to-javascript.html\">official documentation<\/a>). For this tutorial, we are going to choose the Maven way, as this is the build tool we use often. After spining up a simple maven project through IntelliJ, the following dependencies and plugins need to be added:<\/p>\n<pre class=\"brush:xml; wrap-lines:false\">&lt;dependencies&gt;\r\n                &lt;dependency&gt;\r\n                    &lt;groupId&gt;org.jetbrains.kotlin&lt;\/groupId&gt;\r\n                    &lt;artifactId&gt;kotlin-stdlib-js&lt;\/artifactId&gt;\r\n                    &lt;version&gt;${kotlin.version}&lt;\/version&gt;\r\n                &lt;\/dependency&gt;\r\n                &lt;dependency&gt;\r\n                    &lt;groupId&gt;org.jetbrains.kotlin&lt;\/groupId&gt;\r\n                    &lt;artifactId&gt;kotlin-stdlib&lt;\/artifactId&gt;\r\n                    &lt;version&gt;${kotlin.version}&lt;\/version&gt;\r\n                &lt;\/dependency&gt;\r\n            &lt;\/dependencies&gt;\r\n\r\n            &lt;build&gt;\r\n                &lt;sourceDirectory&gt;src\/main\/kotlin&lt;\/sourceDirectory&gt;\r\n                &lt;plugins&gt;\r\n                    &lt;plugin&gt;\r\n                        &lt;groupId&gt;org.jetbrains.kotlin&lt;\/groupId&gt;\r\n                        &lt;artifactId&gt;kotlin-maven-plugin&lt;\/artifactId&gt;\r\n                        &lt;version&gt;${kotlin.version}&lt;\/version&gt;\r\n                        &lt;executions&gt;\r\n                            &lt;execution&gt;\r\n                                &lt;id&gt;compile&lt;\/id&gt;\r\n                                &lt;phase&gt;compile&lt;\/phase&gt;\r\n                                &lt;goals&gt;\r\n                                    &lt;goal&gt;js&lt;\/goal&gt;\r\n                                    &lt;goal&gt;compile&lt;\/goal&gt;\r\n                                &lt;\/goals&gt;\r\n                            &lt;\/execution&gt;\r\n                            &lt;execution&gt;\r\n                                &lt;id&gt;test-compile&lt;\/id&gt;\r\n                                &lt;phase&gt;test-compile&lt;\/phase&gt;\r\n                                &lt;goals&gt;\r\n                                    &lt;goal&gt;test-js&lt;\/goal&gt;\r\n                                    &lt;goal&gt;test-compile&lt;\/goal&gt;\r\n                                &lt;\/goals&gt;\r\n                            &lt;\/execution&gt;\r\n                        &lt;\/executions&gt;\r\n                    &lt;\/plugin&gt;\r\n                    &lt;plugin&gt;\r\n                        &lt;groupId&gt;org.apache.maven.plugins&lt;\/groupId&gt;\r\n                        &lt;artifactId&gt;maven-dependency-plugin&lt;\/artifactId&gt;\r\n                        &lt;executions&gt;\r\n                            &lt;execution&gt;\r\n                                &lt;id&gt;unpack&lt;\/id&gt;\r\n                                &lt;phase&gt;compile&lt;\/phase&gt;\r\n                                &lt;goals&gt;\r\n                                    &lt;goal&gt;unpack&lt;\/goal&gt;\r\n                                &lt;\/goals&gt;\r\n                                &lt;configuration&gt;\r\n                                    &lt;artifactItems&gt;\r\n                                        &lt;artifactItem&gt;\r\n                                            &lt;groupId&gt;org.jetbrains.kotlin&lt;\/groupId&gt;\r\n                                            &lt;artifactId&gt;kotlin-stdlib-js&lt;\/artifactId&gt;\r\n                                            &lt;version&gt;${kotlin.version}&lt;\/version&gt;\r\n                                            &lt;outputDirectory&gt;${project.build.directory}\/js\/lib&lt;\/outputDirectory&gt;\r\n                                            &lt;includes&gt;*.js&lt;\/includes&gt;\r\n                                        &lt;\/artifactItem&gt;\r\n                                    &lt;\/artifactItems&gt;\r\n                                &lt;\/configuration&gt;\r\n                            &lt;\/execution&gt;\r\n                        &lt;\/executions&gt;\r\n                    &lt;\/plugin&gt;\r\n                &lt;\/plugins&gt;\r\n            &lt;\/build&gt;<\/pre>\n<p>the <code>kotlin-maven-plugin<\/code> compiles kotlin to byte code through the <code>compile<\/code> goal and compiles the source code to JavaScript through the <code>js<\/code> goal. The <code>kotlin-stdlib-js<\/code> is used by the <code>maven-dependency-plugin<\/code> for including the <code>kotlin.js<\/code> file which contains the JavaScript version of Kotlin\u2019s runtime and standard library. <code>kotlin.js<\/code> is static and does not change from an application to another, so it is possible to copy it manually or to import it directly in the HTML page from a link (e.g a CDN). <code>kotlin.js<\/code> is tied to the used Kotlin version.<\/p>\n<h2>Example<\/h2>\n<p>Let\u2019s print a Hello world to the console and examine the generated JavaScript:<\/p>\n<pre class=\"brush:php\">fun main(args: Array&lt;String&gt;) {\r\n    println(\"Hello World!\")\r\n}<\/pre>\n<p>Generated <code>kotlinjs-intro.js<\/code>:<\/p>\n<pre class=\"brush:js\">if (typeof kotlin === 'undefined') {\r\n  throw new Error(\"Error loading module 'kotlinjs-intro'. Its dependency 'kotlin' was not found. \r\n                   Please, check whether 'kotlin' is loaded prior to 'kotlinjs-intro'.\");\r\n}\r\nthis['kotlinjs-intro'] = function (_, Kotlin) {\r\n  'use strict';\r\n  var println = Kotlin.kotlin.io.println_s8jyv4$;\r\n  function main(args) {\r\n    println('Hello World!');\r\n  }\r\n  var package$com = _.com || (_.com = {});\r\n  var package$gwidgets = package$com.gwidgets || (package$com.gwidgets = {});\r\n  var package$kotlinjs = package$gwidgets.kotlinjs || (package$gwidgets.kotlinjs = {});\r\n  package$kotlinjs.main_kand9s$ = main;\r\n  main([]);\r\n  Kotlin.defineModule('kotlinjs-intro', _);\r\n  return _;\r\n}(typeof this['kotlinjs-intro'] === 'undefined' ? {} : this['kotlinjs-intro'], kotlin);<\/pre>\n<p>As mentionned earlier, the generated script looks for defined Kotlin runtime methods and classes and throws an error if <code>kotlin.js<\/code> is not already loaded. This may lead to issues if scripts are included in the body or have &#8220;defer&#8221; attributes because the order is important. One possible solution is to use JavaScript build tools such as Grunt or Gulp to concatenate the two scripts.<br \/>\nAnother inconvenience is the size of the scripts. Minifying and optimizing the JavaScript code is important for production settings. While GWT and Scala.js provide the user with the option to minify the generated script or run the <a href=\"https:\/\/github.com\/google\/closure-compiler\">Closure compiler<\/a> for even more optimization, Kotlin leaves this task to the developer.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlinjs_size.png\"><img decoding=\"async\" class=\"aligncenter wp-image-21694\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlinjs_size.png\" alt=\"\" width=\"820\" height=\"37\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlinjs_size.png 1480w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlinjs_size-300x14.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlinjs_size-768x35.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlinjs_size-1024x46.png 1024w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<p>For this simple example, the total size loaded is about 1.51 MB, which is not ideal compared to GWT or Scala.js or even other JavaScript frameworks (check out this <a href=\"https:\/\/gist.github.com\/Restuta\/cda69e50a853aa64912d\">comparison<\/a> between different front end frameworks). After minifying and concatening both scripts, the result is:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlin_size_after.png\"><img decoding=\"async\" class=\"aligncenter wp-image-21695\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlin_size_after.png\" alt=\"\" width=\"820\" height=\"39\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlin_size_after.png 1477w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlin_size_after-300x14.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlin_size_after-768x36.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/kotlin_size_after-1024x49.png 1024w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<p>which is is better, but still far behind GWT and Scala.js.<\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th><\/th>\n<th>Size of .js for printing a Hello World to the console<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>GWT<\/td>\n<td>59.5 KB (.nocache.js plus the loaded module)<\/td>\n<\/tr>\n<tr>\n<td>Scala.js<\/td>\n<td>11.6 KB<\/td>\n<\/tr>\n<tr>\n<td>Kotlin to JavaScript<\/td>\n<td>1.1 MB<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Ecosystem<\/h2>\n<p>Kotlin JavaScript seem to have several bindings for popular JavaScript Librairies (<a href=\"https:\/\/github.com\/kodando\/kodando\">https:\/\/github.com\/kodando\/kodando<\/a>, <a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\">https:\/\/github.com\/JetBrains\/kotlin-wrappers<\/a>, and many others) like react, jquery, and also a dom API, but the ecosystem remains small as Kotlin in itself is a niche and relatively new compared to other JVM languages.<\/p>\n<h2>Wrap-up<\/h2>\n<p>Kotlin to JavaScript is an interesting tool, but it seems like it is still in its infancy and still has a lot to learn. According to Kotlin\u2019s <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/js-overview.html\">documentation<\/a>, Kotlin to JavaScript can be used to target both front-end and server side JavaScript. From a front-end perspective, Scala.js and GWT seem like better options. We will explore the generation of server side JavaScript in coming posts.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Zakaria Amine, partner at our <a href=\"\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"http:\/\/www.g-widgets.com\/2018\/05\/17\/introduction-to-kotlin-to-javascript\/\" target=\"_blank\" rel=\"noopener\">Introduction to Kotlin (to) JavaScript<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which the to-JavaScript compiler is an independent framework, Kotlin provides a to-JavaScript compiler as an integral part of its compiler. Another difference between Kotlin compiler and other frameworks is &hellip;<\/p>\n","protected":false},"author":4470,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[537],"class_list":["post-21691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-kotlin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introduction to Kotlin (to) JavaScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Kotlin (to) JavaScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-18T09:15:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Zakaria Amine\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zakaria Amine\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\"},\"author\":{\"name\":\"Zakaria Amine\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ce5305c30531ff9e0144e637858512c5\"},\"headline\":\"Introduction to Kotlin (to) JavaScript\",\"datePublished\":\"2018-05-18T09:15:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\"},\"wordCount\":627,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Kotlin\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\",\"name\":\"Introduction to Kotlin (to) JavaScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2018-05-18T09:15:23+00:00\",\"description\":\"Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introduction to Kotlin (to) JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ce5305c30531ff9e0144e637858512c5\",\"name\":\"Zakaria Amine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f57181b135803b2a4b6f52e1b555b6f969d1e28d098fb9f61ab466d7ed368d94?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f57181b135803b2a4b6f52e1b555b6f969d1e28d098fb9f61ab466d7ed368d94?s=96&d=mm&r=g\",\"caption\":\"Zakaria Amine\"},\"description\":\"Zakaria is a freelance software engineer who enjoys working with Java web frameworks, and microservice architectures. During his free time, Zakaria works on hobby projects, and blogs about his favorite topics like GWT and Spring.\",\"sameAs\":[\"http:\/\/www.g-widgets.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/zakaria-amine\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Kotlin (to) JavaScript - Web Code Geeks - 2026","description":"Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Kotlin (to) JavaScript - Web Code Geeks - 2026","og_description":"Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-05-18T09:15:23+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Zakaria Amine","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Zakaria Amine","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/"},"author":{"name":"Zakaria Amine","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ce5305c30531ff9e0144e637858512c5"},"headline":"Introduction to Kotlin (to) JavaScript","datePublished":"2018-05-18T09:15:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/"},"wordCount":627,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Kotlin"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/","name":"Introduction to Kotlin (to) JavaScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2018-05-18T09:15:23+00:00","description":"Introduction Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/introduction-to-kotlin-to-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Introduction to Kotlin (to) JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ce5305c30531ff9e0144e637858512c5","name":"Zakaria Amine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f57181b135803b2a4b6f52e1b555b6f969d1e28d098fb9f61ab466d7ed368d94?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f57181b135803b2a4b6f52e1b555b6f969d1e28d098fb9f61ab466d7ed368d94?s=96&d=mm&r=g","caption":"Zakaria Amine"},"description":"Zakaria is a freelance software engineer who enjoys working with Java web frameworks, and microservice architectures. During his free time, Zakaria works on hobby projects, and blogs about his favorite topics like GWT and Spring.","sameAs":["http:\/\/www.g-widgets.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/zakaria-amine\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/4470"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=21691"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=21691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=21691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=21691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}