9 ms·

Create React apps using Kotlin

163 points by mihau 9y ago

maxfurman 9y ago
Does this mean that Kotlin -> React -> React Native is feasible too? It's a bit ridiculous on its face, but is there a better way to run Kotlin on iOS? Kotlin is a godsend for Android but if you have to support both platforms one codebase is better
- jrudolph 9y ago
  Yes, it's called Kotlin Native: https://github.com/JetBrains/kotlin-native https://github.com/JetBrains/kotlin-native Kotlin right now is a serious competitor for a full stack, any device language. An alternative may be F# which has Fable for Browser, Xamarin (mobile) and .net core for server. But Kotlin looks more integrated to me. Coming from a C#/F# background, Kotlin is really a joy to use.
  - bitL 9y ago
    Yeah, if they play it right they can be one-size-fits-all solution. A question is if they would take risks with such approach as their motto is to "implement stuff that is winning", i.e. copying things others did and that worked well (in commercial sense) and avoid experimental stuff that doesn't bring money in.
- ceronman 9y ago
  It's not production ready yet, but Kotlin Native is probably the way to go for iOS support. https://github.com/JetBrains/kotlin-native https://github.com/JetBrains/kotlin-native
- on_and_off 9y ago
  Kotlin Native is what you are looking for. Or maybe j2Objc One codebase for both platforms is not necessarily what you want though. Let me rephrase, it might be what you want for a pretty small app : if you have to create an app for a restaurant with orders and menu, a cross platform solution is probably the best use of your time. For anything bigger, it becomes a harder sell. All these solutions tend to have the same downsides : - limited access to new platform features. Especially damaging when Apple tells you that you are going to get featured if you do a Watch app but your SDK does not support that yet. - one design does not scale well to two platforms with different UX and features. - one more layer of abstraction to manage; making maintainability harder I think that there is clearly a space for a cross platform business logic framework though. It tends to be the same on both platform with minor differences. It is a pity that only j2objc seems to clearly target this. k2objc/swift would be awesome.
  - maxdo 9y ago
    Don’t mix platform and language. Having same language is just 5% of one platform for iOS android and windows. Weex gives also web mobile support btw.
- vbezhenar 9y ago
  I'm waiting for Kotlin-based React Native alternative without any trace of JavaScript (in mobile). Kotlin JVM for Android and server rendering, Kotlin Native for iOS, Kotlin JavaScript for Web. Makes more sense than JavaScript everywhere.
- chris_overseas 9y ago
  There's an announcement and some example code for building iOS apps with Kotlin/Native here, including reusing some of the code across iOS and Android: https://blog.jetbrains.com/kotlin/2017/11/kotlinconf-keynote-recap/ https://blog.jetbrains.com/kotlin/2017/11/kotlinconf-keynote...
matrix 9y ago
Intriguing approach. Anyone know if there's a write-up somewhere from somebody that's tried it? It's always helpful to learn from the gotchas others have run into.
- leonya2 9y ago
  This is all fairly new stuff so there're probably few users outside of JetBrains. Check out https://github.com/JetBrains/kotlinconf-app https://github.com/JetBrains/kotlinconf-app, it's all written in Kotlin — backend, frontend, everything.
- adamnemecek 9y ago
  JS as a compilation target is supported by kotlin out of the box. You can use any js framework and IIRC it even understands typescript type annotations. I'm super pumped about kotlin, can't wait to write a whole app, backend and front-end in it.
  - kevinSuttle 9y ago
    Wow. I had no idea. That’s great to know. Thanks for relaying that info. Do you have any further resources you recommend with regards to this?
    - adamnemecek 9y ago
      Here's a whole stack app built by JetBrains themselves in Kotlin with React for front end https://github.com/Kotlin/kotlin-fullstack-sample https://github.com/Kotlin/kotlin-fullstack-sample
      - kevinSuttle 9y ago
        Nice! Thanks.
bitL 9y ago
Can I use this outside IntelliJ (Atom perhaps)? I despise JavaScript, GWT is underwhelming and Kotlin seems like a nice way to bypass these issues + React is becoming a de-facto standard. IntelliJ became too big/slow/feature creeped and I am not having good time with the latest code completion changes, so I am considering dropping it (PyCharm as well) for something more light-weight.
- systems 9y ago
  Well, I did comment once on the Koltin Jetbrains forum, about how hard they make to download ... just kotlin ... outside of the jetbrains ide and their response, on their forum, was that they are intentionally make hard to avoid the jetbrains ide while using kotlin now technically you still can, kotlin is open source, and you can download it standalone, if you search hard enough i am not really sure, how jetbrains think kotlin will help it long term to increase its sales .. but this seems to be one of their objectives .. they did not create kotlin just for the sake of it (and nothing wrong with that)
  - bitL 9y ago
    I am happy JetBrains became a full-blown real software company (where I count only companies with their own programming language) instead of aping Atlassian (their main competitor), and Kotlin has some interesting ideas. They are closest to Borland we have these days; independent small company with quality development tools. Though the code completion quality dropped so much lately (e.g. in PyCharm it became completely useless) that I am now actively trying to find replacements.
    - systems 9y ago
      I wouldnt go as far as comparing them to borland Remember that the community edition is open source They are an open company and do offer a lot completly for free Borland was .. a very traditional closed company
      - hackerfromthefu 9y ago
glued 9y ago
Why use this over TypeScript?
- bitL 9y ago
  It's for JDK (tooling) addicts.
- lomnakkus 9y ago
  Kotlin's type system isn't hampered by (runtime) compatibility with the JS object model. (That would be one reason, I'm sure there might be others.)
- lf-non 9y ago
  Primarily because Kotlin is not a superset of javascript and thus does not inherit the quirks of javascript. Other than that, if your backend is kotlin then you can potentially share (non JVM dependent) business logic code with the backed. Same goes for android clients. Same interfaces can be be used in client and server.
  - jrs95 9y ago
    I've never really found a good use case for reusing business logic, but just reusing types is pretty helpful. Although you can also get that via something like Swagger as well.
    - lomnakkus 9y ago
      I too am more of a fan of the Swagger/OpenAPI approach (in general terms), but I find it valuable to be able to share validation logic too. (Unless your validation requirements are extremely simple.) Of course Swagger/OpenAPI doesn't preclude using the same language on the client and server side, so one could always combine "isomorphic" approach with the "service definition" approach.
danthejam 9y ago
So the kotlin code gets compiled to Javascript or to Java bytecode?
- jrudolph 9y ago
  both: JVM Target -> Java bytecode, Browser Target -> Javascript
uglycoyote 9y ago
How is the debugging experience? Is there a debugging experience? I'm currently a typescript user and I like what VS code has going on with attaching to chrome and providing debugging within the ide. Source maps are okay but a seamless experience in the source language is better. Does the kotlin IDE have facilities for debugging what is going on in the browser?
- specialist 9y ago
  Being a grumpy old man: it's not programming if I can't set a breakpoint.
  - stevenwoo 9y ago
    I can remember having to debug some prototype hardware with LED's attached to address pins, you kids are spoiled these days! :)
  - bitL 9y ago
    Talk to functional programming folks... :D
    - yawaramin 9y ago
      Or not, we do printf debugging ... :-)
    - droidist2 9y ago
      That's one reason I love Clojure, really nice tooling through IntelliJ + Cursive.
  - askvictor 9y ago
    You've obviously never done embedded systems programming. Try debugging timing issues with a breakpoint.
    - bitL 9y ago
      Actually, how do you debug those? If you put in a breakpoint, use DTrace & co or do logger output, you won't likely hit the issue. I did this with super low-level distributed systems and they were mostly resolved by hard thinking and modeling execution path in my head...
jm547ster 9y ago
I was trying to get this setup going the other day and found it a little fiddly with some of the Jetbrain’s documentation on Kotlin->JS being outdated it seemed and the sample application they have supplied having some issues with missing dependencies, specifically missing package versions on NPM. I’ll be trying this out straightaway, so many thanks for this!
- specialist 9y ago
  What's the fix to config mgmt jitter, entropy? Every time I set aside a few hours to do a React tutorial, I'm defeated by the stack. I'm very late to docker. I always liked the idea, but didn't have the immediate need. But Python, trying to fix bugs in someone else's project, has now made that need urgent. After spending WAY TOO MUCH TIME getting the exact right constellation of stuff installed. Switching from macports to homebrew, preinstalling the native libs, wiping all the misc failed python runtimes and starting over, bootstrapping pip, oops I screwed up once with sudo and now a hidden cache under /var/private/root is borking dependency resolution. FFS. I really hated Java & maven until I got a nodejs gig. I really hated nodejs & npm until I had to fix someone else's python. When does it get better? Nix everywhere?
  - bitL 9y ago
    I think Vagrant is for reproducible development environments.
    - deleted 9y ago
      [deleted]
    - hackerfromthefu 9y ago
      That's the theory ..
  - acemarke 9y ago
    Can you clarify what you mean by "defeated by the stack"? Are you having trouble setting up a React development environment? If you want to try using React without any build tooling or process at all, the main suggestions are: - Use an online IDE like https://codesandbox.io https://codesandbox.io , which is a complete online editor that lets you write React apps, view them in the browser, and even make use of NPM packages . CodePen and StackBlitz are other good choices for online editors. - Create an index.html file with three script tags for React, ReactDOM, and the Babel transformer. There's a pre-written example at https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html https://raw.githubusercontent.com/reactjs/reactjs.org/master... . If you do want a local project with the right build setup, the official Create-React-App tool will create projects with the build config abstracted away: https://reactjs.org/docs/installation.html https://reactjs.org/docs/installation.html So, while the recommended way to use React is with a full build process (which lets you use the JSX syntax for rendering components, other modern JS syntax, and produces a proper bundle for deployment), you don't have to learn Webpack or Babel as a prerequisite for learning React.

163 points by mihau 9y ago

Does this mean that Kotlin -> React -> React Native is feasible too? It's a bit ridiculous on its face, but is there a better way to run Kotlin on iOS? Kotlin is a godsend for Android but if you have to support both platforms one codebase is better

jrudolph 9y ago
Yes, it's called Kotlin Native: https://github.com/JetBrains/kotlin-native https://github.com/JetBrains/kotlin-native Kotlin right now is a serious competitor for a full stack, any device language. An alternative may be F# which has Fable for Browser, Xamarin (mobile) and .net core for server. But Kotlin looks more integrated to me. Coming from a C#/F# background, Kotlin is really a joy to use.
- bitL 9y ago
  Yeah, if they play it right they can be one-size-fits-all solution. A question is if they would take risks with such approach as their motto is to "implement stuff that is winning", i.e. copying things others did and that worked well (in commercial sense) and avoid experimental stuff that doesn't bring money in.
ceronman 9y ago
It's not production ready yet, but Kotlin Native is probably the way to go for iOS support. https://github.com/JetBrains/kotlin-native https://github.com/JetBrains/kotlin-native
on_and_off 9y ago
Kotlin Native is what you are looking for. Or maybe j2Objc One codebase for both platforms is not necessarily what you want though. Let me rephrase, it might be what you want for a pretty small app : if you have to create an app for a restaurant with orders and menu, a cross platform solution is probably the best use of your time. For anything bigger, it becomes a harder sell. All these solutions tend to have the same downsides : - limited access to new platform features. Especially damaging when Apple tells you that you are going to get featured if you do a Watch app but your SDK does not support that yet. - one design does not scale well to two platforms with different UX and features. - one more layer of abstraction to manage; making maintainability harder I think that there is clearly a space for a cross platform business logic framework though. It tends to be the same on both platform with minor differences. It is a pity that only j2objc seems to clearly target this. k2objc/swift would be awesome.
- maxdo 9y ago
  Don’t mix platform and language. Having same language is just 5% of one platform for iOS android and windows. Weex gives also web mobile support btw.
vbezhenar 9y ago
I'm waiting for Kotlin-based React Native alternative without any trace of JavaScript (in mobile). Kotlin JVM for Android and server rendering, Kotlin Native for iOS, Kotlin JavaScript for Web. Makes more sense than JavaScript everywhere.
chris_overseas 9y ago
There's an announcement and some example code for building iOS apps with Kotlin/Native here, including reusing some of the code across iOS and Android: https://blog.jetbrains.com/kotlin/2017/11/kotlinconf-keynote-recap/ https://blog.jetbrains.com/kotlin/2017/11/kotlinconf-keynote...

matrix 9y ago

Intriguing approach. Anyone know if there's a write-up somewhere from somebody that's tried it? It's always helpful to learn from the gotchas others have run into.

leonya2 9y ago
This is all fairly new stuff so there're probably few users outside of JetBrains. Check out https://github.com/JetBrains/kotlinconf-app https://github.com/JetBrains/kotlinconf-app, it's all written in Kotlin — backend, frontend, everything.
adamnemecek 9y ago
JS as a compilation target is supported by kotlin out of the box. You can use any js framework and IIRC it even understands typescript type annotations. I'm super pumped about kotlin, can't wait to write a whole app, backend and front-end in it.
- kevinSuttle 9y ago
  Wow. I had no idea. That’s great to know. Thanks for relaying that info. Do you have any further resources you recommend with regards to this?
  - adamnemecek 9y ago
    Here's a whole stack app built by JetBrains themselves in Kotlin with React for front end https://github.com/Kotlin/kotlin-fullstack-sample https://github.com/Kotlin/kotlin-fullstack-sample
    - kevinSuttle 9y ago
      Nice! Thanks.

bitL 9y ago

Can I use this outside IntelliJ (Atom perhaps)? I despise JavaScript, GWT is underwhelming and Kotlin seems like a nice way to bypass these issues + React is becoming a de-facto standard. IntelliJ became too big/slow/feature creeped and I am not having good time with the latest code completion changes, so I am considering dropping it (PyCharm as well) for something more light-weight.

systems 9y ago
Well, I did comment once on the Koltin Jetbrains forum, about how hard they make to download ... just kotlin ... outside of the jetbrains ide and their response, on their forum, was that they are intentionally make hard to avoid the jetbrains ide while using kotlin now technically you still can, kotlin is open source, and you can download it standalone, if you search hard enough i am not really sure, how jetbrains think kotlin will help it long term to increase its sales .. but this seems to be one of their objectives .. they did not create kotlin just for the sake of it (and nothing wrong with that)
- bitL 9y ago
  I am happy JetBrains became a full-blown real software company (where I count only companies with their own programming language) instead of aping Atlassian (their main competitor), and Kotlin has some interesting ideas. They are closest to Borland we have these days; independent small company with quality development tools. Though the code completion quality dropped so much lately (e.g. in PyCharm it became completely useless) that I am now actively trying to find replacements.
  - systems 9y ago
    I wouldnt go as far as comparing them to borland Remember that the community edition is open source They are an open company and do offer a lot completly for free Borland was .. a very traditional closed company
    - hackerfromthefu 9y ago

glued 9y ago

Why use this over TypeScript?

bitL 9y ago
It's for JDK (tooling) addicts.
lomnakkus 9y ago
Kotlin's type system isn't hampered by (runtime) compatibility with the JS object model. (That would be one reason, I'm sure there might be others.)
lf-non 9y ago
Primarily because Kotlin is not a superset of javascript and thus does not inherit the quirks of javascript. Other than that, if your backend is kotlin then you can potentially share (non JVM dependent) business logic code with the backed. Same goes for android clients. Same interfaces can be be used in client and server.
- jrs95 9y ago
  I've never really found a good use case for reusing business logic, but just reusing types is pretty helpful. Although you can also get that via something like Swagger as well.
  - lomnakkus 9y ago
    I too am more of a fan of the Swagger/OpenAPI approach (in general terms), but I find it valuable to be able to share validation logic too. (Unless your validation requirements are extremely simple.) Of course Swagger/OpenAPI doesn't preclude using the same language on the client and server side, so one could always combine "isomorphic" approach with the "service definition" approach.

danthejam 9y ago

So the kotlin code gets compiled to Javascript or to Java bytecode?

jrudolph 9y ago
both: JVM Target -> Java bytecode, Browser Target -> Javascript

uglycoyote 9y ago

How is the debugging experience? Is there a debugging experience? I'm currently a typescript user and I like what VS code has going on with attaching to chrome and providing debugging within the ide. Source maps are okay but a seamless experience in the source language is better. Does the kotlin IDE have facilities for debugging what is going on in the browser?

specialist 9y ago
Being a grumpy old man: it's not programming if I can't set a breakpoint.
- stevenwoo 9y ago
  I can remember having to debug some prototype hardware with LED's attached to address pins, you kids are spoiled these days! :)
- bitL 9y ago
  Talk to functional programming folks... :D
  - yawaramin 9y ago
    Or not, we do printf debugging ... :-)
  - droidist2 9y ago
    That's one reason I love Clojure, really nice tooling through IntelliJ + Cursive.
- askvictor 9y ago
  You've obviously never done embedded systems programming. Try debugging timing issues with a breakpoint.
  - bitL 9y ago
    Actually, how do you debug those? If you put in a breakpoint, use DTrace & co or do logger output, you won't likely hit the issue. I did this with super low-level distributed systems and they were mostly resolved by hard thinking and modeling execution path in my head...

jm547ster 9y ago

I was trying to get this setup going the other day and found it a little fiddly with some of the Jetbrain’s documentation on Kotlin->JS being outdated it seemed and the sample application they have supplied having some issues with missing dependencies, specifically missing package versions on NPM. I’ll be trying this out straightaway, so many thanks for this!

specialist 9y ago
What's the fix to config mgmt jitter, entropy? Every time I set aside a few hours to do a React tutorial, I'm defeated by the stack. I'm very late to docker. I always liked the idea, but didn't have the immediate need. But Python, trying to fix bugs in someone else's project, has now made that need urgent. After spending WAY TOO MUCH TIME getting the exact right constellation of stuff installed. Switching from macports to homebrew, preinstalling the native libs, wiping all the misc failed python runtimes and starting over, bootstrapping pip, oops I screwed up once with sudo and now a hidden cache under /var/private/root is borking dependency resolution. FFS. I really hated Java & maven until I got a nodejs gig. I really hated nodejs & npm until I had to fix someone else's python. When does it get better? Nix everywhere?
- bitL 9y ago
  I think Vagrant is for reproducible development environments.
  - deleted 9y ago
    [deleted]
  - hackerfromthefu 9y ago
    That's the theory ..
- acemarke 9y ago
  Can you clarify what you mean by "defeated by the stack"? Are you having trouble setting up a React development environment? If you want to try using React without any build tooling or process at all, the main suggestions are: - Use an online IDE like https://codesandbox.io https://codesandbox.io , which is a complete online editor that lets you write React apps, view them in the browser, and even make use of NPM packages . CodePen and StackBlitz are other good choices for online editors. - Create an index.html file with three script tags for React, ReactDOM, and the Babel transformer. There's a pre-written example at https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html https://raw.githubusercontent.com/reactjs/reactjs.org/master... . If you do want a local project with the right build setup, the official Create-React-App tool will create projects with the build config abstracted away: https://reactjs.org/docs/installation.html https://reactjs.org/docs/installation.html So, while the recommended way to use React is with a full build process (which lets you use the JSX syntax for rendering components, other modern JS syntax, and produces a proper bundle for deployment), you don't have to learn Webpack or Babel as a prerequisite for learning React.