Use Kotlin with npm, webpack and react

Posted on by Dmitry Jemerov

With Kotlin 1.1, targeting JavaScript in the Kotlin compiler has officially reached production-ready status. Of course, having compiler support is not enough to be able to solve real-life problems, so we continue our work on integrating Kotlin into the larger JavaScript ecosystem.

Today, we’d like to present two new projects: a Gradle plugin integrating Kotlin with npm, webpack and karma, and a full-stack application sample with a Kotlin/JVM backend and a Kotlin/JS frontend built with React.

Kotlin Frontend Plugin

The Kotlin frontend plugin allows you to build and deploy a Kotlin frontend application using webpack. You can use npm packages as dependencies of your application, and the plugin will take care of downloading them and bundling them into the resulting JS file. The plugin also integrates with Karma, allowing you to run the tests of your application. And for optimal workflow, the plugin supports continuous compilation and hot reload, ensuring that you always see an up-to-date version of your application in the browser.

The README file gives instructions for using the plugin, and the examples directory contains a simple example showing how you can apply it in a real project.

Kotlin React Example

Thinkter is an example of a modern full-stack application built in Kotlin. The backend runs under Jetty and uses Ktor, a Kotlin Web application framework developed by the Kotlin team. The frontend uses React; a set of React wrappers for Kotlin is provided as part of the project. You’re welcome to use the wrappers in your project and adapt them to your own needs. Note that we’re working on evolving the React wrappers internally, and we’re considering releasing them as a separate open-source library.

To see what Kotlin React code looks like, you can check out one of the components of the application.

Your feedback on these releases is very much welcome! Please file issues on GitHub, stop by the forums, or join the #javascript channel on the Kotlin Slack.

Comments below can no longer be edited.

69 Responses to Use Kotlin with npm, webpack and react

  1. Sergey Lukjanov says:

    January 4, 2012

    It looks very good.
    Public preview == downloadable compiler?

    • Andrey Breslav says:

      January 4, 2012

      A downloadable compiler will be available a little later. This preview is a web app that allows you to write Kotlin programs (using online error highlighting and code completion) and run them.

      • User says:

        January 4, 2012

        So it will be possible to download compiled jar?

        • Andrey Breslav says:

          January 4, 2012

          As of Jan 10th the app will be running on our server for you to use it.

      • MuppetGate says:

        January 9, 2012

        Mmm. Are you planning some sort of cloud-based IDE?

        • Andrey Breslav says:

          January 9, 2012

          Not a full-featured IDE, but some basic web-based editor with completion and error highlighting.

      • Ian Clarke says:

        January 9, 2012

        I’m confused, isn’t the web demo already available at http://kotlin-demo.jetbrains.com/ ? I saw a link to it on Reddit 2 weeks ago or so.

        That being said, the web demo seems to cause Chrome to kill the page, I’m getting the “Aw Snap” message (although it has worked in the past).

        • Andrey Breslav says:

          January 9, 2012

          I’m afraid, we rolled out a broken applet once, so now you’d have to clear your browser cache to make it work. If this does not help, please tell me. Thanks

  2. Alexander Kosenkov says:

    January 4, 2012

    “The Great Syntactic Shift” -> “The First Great Syntactic Shift”
    Make it a bit easier for historians of the future!

  3. Alexander Kosenkov says:

    January 4, 2012

    Do you plan to support Unicode characters in the source code?
    >= ≥


    But in current font in Idea those arrows don’t look readable. And additionally, UTF-8 must be default encoding in IDE to my taste.

    val higherThanY = {x ⇒ y ≤ x} // Even not so bad now!

    • Andrey Breslav says:

      January 8, 2012

      I don’t have a ≥ key on my keyboard, so I don’t know how I’d benefit from such a thing in the code…

    • Ian Clarke says:

      January 9, 2012

      I don’t think this is a good idea, in exchange for a little visual sugar you are going to cause all sorts of headaches for people with editors that have poor Unicode support, and for people with a poor understanding of Unicode.

      If in doubt, leave it out 🙂

  4. Alexander Kosenkov says:

    January 4, 2012

    Well, with Unicode support it might have been even not so bad:

    val higherThanY = {x ⇒ y ≤ x}
    val higherThanY = {x → y ≤ x}

    Just to show how ugly it looks now:
    val higherThanY = {x -> y <= x}

    I hope this needs just a tiny change in parser code and new option in Idea's Automcatic Code Formatting preferences.

    • MuppetGate says:

      January 9, 2012

      Wouldn’t it be easier to change your font?

  5. B. K. Oxley (binkley) says:

    January 4, 2012

    Will there be an IntelliJ plugin for the preview?

    • Andrey Breslav says:

      January 4, 2012

      As of January, the plugin is going through the private preview.

  6. Habfast says:

    January 4, 2012

    Terrific!

    can’t wait to get my hands on the eclipse plugin, when it comes out (I have absolutely no knowledge of plugin coding for eclipse, but if no one is working on an eclipse plugin currently, I’m ready to get my hands dirty)

    • Andrey Breslav says:

      January 4, 2012

      Sounds great! Feel free to contact me in regard to this: andrey dot breslav at jetbrains dot com

    • Ian Clarke says:

      January 16, 2012

      An Eclipse plugin would be awesome, however be careful that you aren’t biting off more than you can chew. They’ve been working on an Eclipse plugin for Scala for several years, including several complete rewrites, and they still aren’t there yet. If you do plan on doing this you should research the design of the Scala Eclipse plugin.

      • Andrey Breslav says:

        January 16, 2012

        Thanks for the info. May I ask you some questions about this when we start working on Eclipse integration?

  7. Pavel Trukhin says:

    January 4, 2012

    Are you planning to release Kotlin plugin for Maven? If you’re not working on it, I am ready to offer my services to develop it (have some experience in this field).

    • Evgeny Goldin says:

      January 8, 2012

      Hi Pavel,

      Many thanks for suggesting your services. I work on Kotlin integration with the build tools (Ant, Maven and Gradle are in the plans so far). Can you drop me a line (evgenyg at gmail) so that we’ll have your coordinates?

  8. Anton Arhipov says:

    January 4, 2012

    Thin arrow VS fat arrow VS no arrow

    What if a ruby style for closures?

    val higherThanY = {|x| y <= x}

    • Andrey Breslav says:

      January 4, 2012

      First of all, it doesn’t look pretty 🙂

      Then, parser recovery gets messier when using the same character as opening and closing parenthesis at the same time. And it is not really clear where to put the function return type in the complete form. And a short form (without braces) looks weird when takes no arguments…

  9. Alex Vas says:

    January 5, 2012


    So we decided to change the function type syntax to the following:

    fun max(col : Collection, compare : (Int, Int) -> Int) : Int

    Humm… Is it supposed to be

    fun max(col : Collection, compare : (Int, Int) -> Int) -> Int

    or am I missing something?

    • Andrey Breslav says:

      January 5, 2012

      The main reason for this change was getting read of repetitive commas that look like a mess. With the second option you refer to we get exactly the same.

      That’s why we changed only the function type syntax and not function declaration syntax, so that the first option you refer to is correct.

  10. Throwable says:

    January 5, 2012

    Mathematically an expression (Int,Int) -> Int is correct and means “a map from set of Int*Int to integer set”. But I find that the arrow “->” looks a little ungly (like rest of mathematical symbols 😉 , rather difficult to type and uncondence whole type declaration. The alternative way is to use more verbose notation for a functional type like Int(Int,Int). It means “Integer that depends on two parameters of integer type”.
    Thus:

    val str : String // declares a value of type String
    val f : String(Int,Int) // declares a function of type (Int,Int) -> String
    fun max(col : Collection, compare : Int(Int, Int) ) : Int
    val max : Int( col : Collection, compare : Int(Int, Int) ) // :)

    I think no one will confuse this syntax with a constructor call while it is used only where type declaration is required.

    • Andrey Breslav says:

      January 5, 2012

      There are two things to remember here:

      First, a function type may describe an extension function, and thus might need to specify a receiver type. For example:

      val arr : MyArray = ...
      val get : MyArray.(Int) -> Int = ...
      val i = arr.get(10)

      Second, return types in Kotlin go after the declared element

    • Ian Clarke says:

      January 9, 2012

      Personally I quite like (Int, Int) -> Int, and prefer it relative to Int(Int, Int).

  11. Otto Christian says:

    January 5, 2012

    I was reading the dart website (this article: http://www.dartlang.org/articles/idiomatic-dart/) and one thing I was happy about top-level definitions, i.e. not having to put everything inside a class. This is something that annoys me in Java because often I have static functions (or fields) which don’t really fit in any class, but I have to put them in some class. It also makes classes a lot more confusing to read, because I end up with all these random static functions, fields, etc. mixed in with my classes.

    Does Kotlin allow top-level definitions of functions and fields? I probably missed it in the docs, but it wasn’t clear to me from skimming the docs.

    Whether you call it a namespace or a package, I don’t mind 🙂

    • Andrey Breslav says:

      January 5, 2012

      Yes, we allow toplevel definitions.

  12. Stephen Colebourne says:

    January 6, 2012

    I had great hopes from the title that you would be sorting the order of the type declarations. You’ve improved the colon confusion a little, but not enough to really make things suitable. The colon itself is the problem, caused by putting the type after the name. Remember that Scala users place the colon next to the variable name to help the colon disappear – its that bad.

    Don’t get me wrong, this is better than before:
    fun max(col : Collection, compare : (Int, Int) -> Int) : Int
    but, it still places too much emphasis on the colons and the hanging return type at the end. (the colon is larger than the comma, so your eye tends to divide by colon, not comma, which is wrong)

    And this always looks bad with default arguments, because it looks like the value is assigned to the type, not to the variable:
    fun max(str : String = “foo”) : Int

    Note that simply correcting the order doesn’t solve the problem either:
    fun Int max(Collection col, (Int, Int) -> Int compare)

    Remember the goal here is *readability* – and that requires the human brain to treat the type as a single unit when visually parsing (the human eye sees patterns, and the spaces and colons cause the pattern recognition to see different element parts, rather than whole elements). Compare these three:
    fun Int max(Collection col, (Int, Int) -> Int compare)
    fun Int max(Collection col, (Int, Int -> Int) compare)
    fun Int max(Collection col, {Int, Int -> Int} compare)

    Note how the eye can more easily group the elements to form a single type in the latter two. (When reading the signature, the first level of knowledge is that it is a function type – the types of the function type are second level knowledge).

    Now adjust it again, and you get something interesting:
    fun Int max(Collection col, Fn compare)

    A function is essentially a parameterization, so why not express it as such. (BTW you could continue with an arrow, but it doesn’t look as good). Note that this can be prefixed by “MyArray.” for the receiver type.
    val MyArray.Fn get = …

    My main point though is that it is really important to *group* the function type as a single element in the human eye, so that the brain parses it as a single unit (ie, some form of surrounding brackets). Otherwise, the brain has to re-associate the separate parts to form a whole type – and it is that which makes the language less readable.

    • Stephen Colebourne says:

      January 6, 2012

      Darn blog eating HTML. The last two examples should be

      fun Int max(Collection col, Fn<Int, Int: Int> compare)

      val MyArray.Fn<Int, Int: Int> get = …

      • MuppetGate says:

        January 12, 2012

        var s1 : String = s.toString()

        To me, at first glance, it looks as though something is being assigned to a String.

        var String s1 = s.toString()

        would be better IMO

    • Aivar says:

      January 6, 2012

      This question (whether type should go before or after the name) is also related to what one considers more important — the name or the type? In Java I’m usually searching for name first and if the name doesn’t tell me the type then I’m reading the type expression.

    • MuppetGate says:

      January 9, 2012

      I have to agree. It’s a lot easier to read and understand without the colons and with the type in front.

      This one:

      fun Int max(Collection col, {Int, Int -> Int} compare)

      is clearest declaration in my opinion, but you’re right: the colons are too distracting.

      I hope Jetbrains take a look at this.

      • Det says:

        January 27, 2012

        Interesting, I do not agree here.

        What you consider clearest declaration is in no way best for me, although indeed the best for leading types.

        Stephen Colebourne
        > (the colon is larger than the comma, so your eye tends to divide by colon, not comma, which is wrong)

        Then your eye must be trained different to mine. My eye tends to separate on comma, while the colon is kind of glueing two things for me. Much more as I tend to add a space to the comma, but not to the colon.
        So in
        (some:thing, other:thing)
        I feel a strong binding of some to thing, what I do not feel in
        (some thing, other thing)

        That is too, why I tend to misread
        ( some, more -> thing)
        as being some with an additional more -> thing . Comma separates a lot. Comma space much more.

        Beside that, leading or trailing type doesn’t matter, when the separator is the space, like in Java/C or Google’s Go:
        (name type, name type) vs. (type name, type name)

        I always have to look at the position to decide what a word semantically is. parameter or type ?
        The colon (or the arrow btw) clearly display a tag for what’s coming. These are markups that I immediately look for when searching the type in an expression.

        So, as I separate by comma, it is easier to find the name always as first thing in the snippet:
        (name type, name more<complex<type&gt:>)

        fun Int max(Collection col, Fn<Int, Int: Int> compare)

        is horrible. My eye at a glance separates:
        Collection col
        followed by
        Fn<Int
        followed by
        Int:Int>
        followed by
        eventually the name of the parameter.

        (BTW: You see that I do not feel a strong bracing of < and >, why I prefer Scala’s square brackets over Java’s angle brackets too.)

    • Laurent mihalkovic says:

      January 9, 2012

      So much emphasis is placed on the technical aspect of all these new languages that it often sounds like there is little time left to look at the code from 2ft away, to see how the most obvious parser will process it. Call me old fashion but, whatever a grammar says, if the brain reads something else, I would not bet the house on the long term chances of that language.

      If we were anywhere else but in the software industry, the answer would be obvious… run a blind test. But instead we are in the software industry where the few never even question that they would have all the answers for the many. Kotlin has some really appealing features… make it intuitive for switchers to embrace it and the sky is the limit…

    • Justin Malcolm says:

      January 26, 2012

      I so much agree.

      Return types at the end and the resulting colon clutter are the two things I immediately dislike about Kotlin. If it was not for that, I am sure this language would be adopted like wildfire.

  13. Guangyu says:

    January 8, 2012

    It’s great. I can’t wait to use it. Does it support OSGi?

    • Andrey Breslav says:

      January 8, 2012

      You can run Kotlin programs in OSGi environment as well as Java programs.

      • Guangyu says:

        January 8, 2012

        So cool. Would you provide some examples on how to build&run kotlin programs in OSGi enviroment in the near future?

        • Andrey Breslav says:

          January 8, 2012

          We are not planning to dedicate much effort to framework integration in the closest time frame, but after the compiler is opensourced (which will be most likely February), anyone can do this.

  14. Sophie says:

    January 10, 2012

    It is likely too late for this suggestion, even if it would otherwise be considered. But anyway …

    Please consider offering naming arguments at each call site, rather than exclusively positional arguments. Positional would (of course) still be available as before.

    Smalltalk syntax version of call site (call site readability far more important than any other 🙂

    smartCar goTo: aLocation via: someViaPoints by: aDeadline

    There are several options to retain interoperability with Java, such as compiling to more than 1 method names (aliases). And with some modification (e.g. goTo instead of goTo: ) this can be considered a generalization of your optional-parenthesis for function call with 1 argument.

  15. B7W says:

    January 11, 2012

    There are still a lot of colons. And in “Longer examples” it can be clearly seen.
    Generic:
    fun cloneWhenGreater<T : Comparable>(list : List, threshold : T) : List where T : Cloneable {

    Also inheritance is hard to read because constructor in class definition line. Maybe it is better to make default method, like python __init__.

  16. anonymous says:

    January 11, 2012

    No! Now I have to throw my multithousnd lines fantasy-project over board.

  17. heguangyu says:

    April 18, 2017

    The sample code is concise and power. Thank you for your great work. Using kotlin for Browser programming is very cool.

    Can you give a example which uses react && redom at the same time ?

  18. Brillig says:

    April 19, 2017

    Is the Kotlin team looking into providing a similar demo for react native, or is this purely a web effort?

    • Dmitry Jemerov says:

      April 19, 2017

      At this time we haven’t done any specific work around React Native, but it’s definitely something worth investigating.

      • Cris Bennett says:

        April 20, 2017

        Definitely worth investigating indeed! React native has a some momentum behind it. Two projects I’m involved with have recently been switched to React native (from entirely native iOS & Android apps).

        I was a little disappointed as I was going to make a bid for Kotlin on the Android side. Being able to use Kotlin with React Native would be quite a win.

  19. ntsim says:

    April 19, 2017

    I’m very new to Kotlin, but I think you guys have done a great job! I hope the interop with Javascript will keep getting better and better 🙂

    Do you know if there would be any problems making this work with React Native?

    • Dmitry Jemerov says:

      April 19, 2017

      I’m fairly sure that making it work with Kotlin Native would require some additional effort; I don’t know how much, though.

  20. Use Kotlin with npm, webpack and react | Ace Infoway says:

    April 19, 2017

    […] Kotlin with npm, webpack and react {$excerpt:n} submitted by /u/michalg82 [link] [comments] Source: […]

  21. Jakub Błaszczyk says:

    April 19, 2017

    I see you have copy-pasted shared domain model in both frontend and backend module. is there a way to simply share model via an additional module?

    • Dmitry Jemerov says:

      April 19, 2017

      We’re working on a solution to allow code reuse between the front-end and the back-end, and we have most of the pieces in place already, but we don’t know at this time when we’ll officially release the support.

  22. pqp says:

    April 19, 2017

    damn you guys are on fire! being able to use kotlin from OS programming (kotlin native) to frontend development holy molly, wheres the limit?!

    anyway congratz, kotlin is awesome can’t wait to see its future!

  23. Misael Berrios Salas says:

    April 20, 2017

    Has any one tried this on windows? Me and my friend have both win 10 and when running ‘start gradlew.bat build’ both get the error:

    [1m> Building 40% > :frontend:webpack-bundle[22m[41D:frontend:webpack-bundle[0K
    module.js:442
    [1m> Building 40% > :frontend:webpack-bundle[22m[41D throw err;[0K
    ^

    Error: Cannot find module ‘C:\Users\Adoer\Documents\Programming\KurdishKotlin\frontend\build\node_modules\webpack\bin\webpack.js’
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:456:3
    :frontend:webpack-bundle [33mFAILED[39m

    [31mFAILURE: [39m[31mBuild failed with an exception.[39m

    What went wrong:
    Execution failed for task ‘:frontend:webpack-bundle’.
    [33m> [39mnode webpack.js failed (exit code = 1)

    • Sergey Mashkov says:

      April 21, 2017

      Does task bundle work instead of build?

  24. Chris says:

    April 24, 2017

    I’m seeing the same problem on Win 8.1 with both the “build” and “bundle” tasks.

    • Sergey Mashkov says:

      April 24, 2017

      Should be fixed in 0.0.18

  25. Ziustag says:

    May 7, 2017

    With the Thinkter demo I’m having difficulties with the additional maven repositories:

    Unindexed remote maven repositories found. Disable…
    The following repositories used in your gradle projects were not indexed yet:
    http://dl.bintray.com/kotlin/kotlinx.html
    https://dl.bintray.com/kotlin/squash
    http://dl.bintray.com/kotlin/ktor

    I’m on Windows 10 with Intellij 17.2. If I try to manually update the missing repos, I get a strange error that only leads to some unresolved Intellij bug:
    nexus-maven-repository-index.properties does not exist
    https://youtrack.jetbrains.com/issue/IDEA-138029
    https://youtrack.jetbrains.com/issue/IDEA-136065

    Am I missing something? I tried quite a few things, but I don’t seem to be able to solve that issue. It’s quite a shame, since the demo seems very interesting to me.

    • Dmitry Jemerov says:

      May 8, 2017

      You can ignore the “Unindexed Maven repositories” message. It does not prevent anything in the demo from working.

    • David Ford says:

      May 13, 2017

      I am getting same message on the Mac

  26. Dave Ford says:

    May 11, 2017

    Is there a link to a a live running instance of the kotlin-fullstack-sample? Would be a nice touch.

  27. Dave Ford says:

    May 11, 2017

    An internal DSL for CSS would be nice.

    For languages (like Kotlin) that have as their goal to help prevent runtime errors with type checking, the first goal should be to eliminate external DSLs. Obviously, any interaction with CSS will not be not checked.

Subscribe

Subscribe for updates