8 ms·
Background: I learned Javascript 1997 and kept up. I have extensive experience in ES6/React for the browser and Java/Kotlin for Server-, Desktop- and Mobile-Ap
by cel1ne 9y ago
Background: I learned Javascript 1997 and kept up.
I have extensive experience in ES6/React for the browser and Java/Kotlin for Server-, Desktop- and Mobile-Apps.
A week ago I switched a fairly new project from the usual setup (react/babel/webpack) to Kotlin-code only. My IDE compiles the Kotlin to JS now and webpack serves it as usual.
Writing the react-bindings took me an hour, after that my productivity went up by about 10.000%.
It's finally on par with my productivity on server and desktop. No type errors, fast refactoring, no "undefined" errors and all the goodies (extensions) of Kotlin.
Removing the complex eslint settings and babel-setup from webpack and package.json felt triumphant.
My JSX looks like this now and is completely typesafe:
val LieferungenList: (props: ListProps) -> ReactElement = {
Datagrid {
div {
className = "..."
...
}
TextField {
source = "date"
}
TextField {
source = "produktname"
}
EditButton {
}
}
}
I even get compiler-errors when I nest HTML-tags the wrong way (h1 inside h1) or so.
I couldn't be happier. I'll never touch plain ES6 again.
- bru 9y ago> source = "date" > source = "produktname" Honestly that doesn't look "completely typesafe": what are those "source"s? Don't they refer to another element? What happens if you make a typo there?
- Zolomon 9y agoI wager there is type inference going on and that the IDE will supply red squiggly lines beneath the expression if the author were to supply something that would not one way or the other convert to the types that source can consume.
- cel1ne 9y agoIt maps to database fields. The compiler checks that it's a string, but the rest is done by `admin-on-rest`'s mapping.
- virtualwhys 9y ago> I wager there is type inference going on What will the compiler infer other than a value of type string? > to supply something that would not one way or the other convert to the types that source can consume. Well, clearly `source` takes a string, so it will happily accept "produckname" and blow up at run time. Short of macros I know of no other compile time mechanism that would enable "safe" strings. The usual workaround is to not use plain string values at all and wrap in a sealed type.
- cel1ne 9y agoThis is from the JS-library "admin-on-rest", that I use (via bindings). It's possible to introduce type-safe wrappers here as well.
- bitL 9y agoAny good tutorial for Kotlin as a JS replacement? I am one of those people hating JS (and I did some very advanced JS web apps pushing technological possibilities) and would love to have something sane before WebAssembly can completely obliterate JS and I can switch to whatever language I like. Thanks for any hints!
- flavio81 9y ago> before WebAssembly can completely obliterate JS and I can switch to whatever language I like. This is exactly what I'm waiting for.
- Cub3 9y agoI'd really like this too, especially to see what it looks like in a react native world. Being able to compile to 2/3 platforms would be a huge plus
- manx 9y agoI never tried Kotlin, but I'm working with Scala.js since 1.5 years and am very happy with it: http://www.scala-js.org http://www.scala-js.org This made me love the frontend again.
- vim_wannabe 9y agoHi, would you mind telling which IDE you are using? This sounds very interesting.
- edem 9y agoI did the same thing when implementing [TodoMVC](http://todomvc.com/ http://todomvc.com/). You can check out the results [here](https://github.com/AppCraft-Projects/todomvc-kotlin https://github.com/AppCraft-Projects/todomvc-kotlin). I will never write javascript again if I can help it.
- dboreham 9y agoIs the Kotlin version example available to run off the site? Poked around for a while but can't see it..
- deckiedan 9y ago> Writing the react-bindings took me an hour,... Do you mean generic 'use react in kotlin' bindings? If so, have you published them or would you consider doing so?
- cel1ne 9y agoYes. I have not published them, because a) they use the same method names like the `kotlin-html` package ("div{}" et. al.), only they create ReactElement instead of manipulating the dom. This could be confusing. b) The type-safe scoping mechanism, so that each scope has it's correct prop-setters and won't inherit setters from a scope further up is rather complex. It uses extension methods with multiple receivers plus operator overrides for `invoke()`. That is rather complicated to follow so I want to try it out for some time to check if there's confusion or subtle bugs. c) I haven't optimised for (allocation-)performance yet. d) I'm using an early-access version of kotlin 1.1.4 which isn't out yet.
- boubiyeah 9y agoIf it only took an hour, it can't be very type-safe / comprehensive.
- cel1ne 9y agoHere is a good tutorial if you'd like to try it yourself: https://kotlinlang.org/docs/reference/type-safe-builders.html https://kotlinlang.org/docs/reference/type-safe-builders.htm...
- deleted 9y ago[deleted]
- deleted 9y ago[deleted]
- virtualwhys 9y agoWhat advantages does this have over Typescript? The ecosystem and mindshare are overwhelmingly in TS' favor I would imagine. For compile-to-js languages it seems most attractive to those that use the host language (Clojure, Scala, Kotlin, Haskell, etc.), whereas for would be js expats, Typescript seems like the natural choice given current trends. I think for a compile-to-js language (vs. a transpiler like Typescript) to take off it's going to need at least: Tiny generated binaries Great js interop Large ecosystem Seamless cross compilation (e.g. JVM/JS) Fast compiler Reason + Bucklescript is the only combination I know of that could potentially pull off the above, blazing fast compilation and miniscule binaries being its greatest strengths at the moment.
- slackingoff2017 9y agoTypescript still has some issues that only a "real" strongly typed language can fix. The biggest one is related to third party JS/TS libraries. If the object was 'any' at some point, if you make an invalid cast Typescript will trust you. If it's a union type, typically (Obj | undefined), everything will work fine until one day the object is undefined and everything blows up. You won't know because everywhere in your code the object can never be undefined. Essentially Typescript Is too trusting. In Java or similar languages, if something comes in as Object you know all bets are off. If you cast and it succeeds you know 100% what kind of object it is. In Typescript it's possible for the type to look fine but be completely wrong, or worse, wrong in a subtle way. And there's no way to fix this without breaking interop with JavaScript. Since Java has always been strongly typed and has a ton of libraries available this isn't an issue in Kotlin. Java/Kotlin are just far better designed languages and no amount of banging on JS is going to make it as well designed. Look at PHP, after 10+ years of trying to make it reasonable it's only "okay", there's too much baggage. The bytecode for Java/C# is much more compact than JS, the runtime is about 10x faster, they have far better standard libraries. They will compile down easily to wasm since their VM's essentially already compile down to native machine code on whatever platform they run on. It's as easy as adding a "wasm" machine target to their runtime and porting the garbage collectors. I fully expect Wasm to wipe out front end development as we know it. Java and C# are far better suited for what the web has become, essentially an application platform. We've seen the future already, just 10 years too early, in Java applets.
- ge96 9y agoCurious what the output of this is(photo), it looks like it would create something with the div/textfields? Is it an inline span element that is editable but not an actual <input type> ? I'm behind on frameworks, I just build with html/css/js/php
- cel1ne 9y agoWell, if I had to pick a single recommendation for improvement of any web-development-cycle, it would be `Tachyons.css`: http://tachyons.io/ http://tachyons.io/
- ge96 9y agoThere are a few concepts that I don't personally use but see on a page I can literally build anything drawn on a piece of paper (for web) but the question is how long will I take? Also the security aspect and whatever with regard to using Laravel vs. using your own PHP. I don't know I'll figure it out. Thanks for the link to tachyons.css
- cel1ne 9y agoMore tips: * Never use object-relational mapping * Use postgreSQL instead of mySQL * (optionally) switch from PHP to python
- kneedeepclunge 9y agowhich do you like more React Native or NativeScript(Angular)
- cel1ne 9y agoNever used Angular nor NativeScript. I get along with ReactNative, it's decent. The data-application part of my last android-app was already written in (JVM-)Kotlin and in the futures the UI will be as well. ;) I recommend my styling library for React-native: https://github.com/tachyons-css/react-native-style-tachyons https://github.com/tachyons-css/react-native-style-tachyons
- floodfx 9y agoHey this sounds like a great setup. I've been wondering if Kotlin -> JavaScript could work for React. Do you have some more documentation or code that you could share on how to setup a project?
- Vinnl 9y agoGiven that this was merely a week ago and you had to write your own bindings, I'd wait a bit with your evaluation to see whether other annoyances come up. That productivity boost is not likely to remain that high :)
- tootie 9y agoDid you follow a framework or roll your own? I'm thoroughly fascinated with isomorphic kotlin, but haven't had a chance to dig in yet.
- cel1ne 9y agoWith kotlin I seldom need a framework, because the standard-library is so rich. In general, when I tend to follow a data-flow ("redux" for JS people) architecture, but have a different approach when it comes to side-effects: My state is always a serialisable description including running side-effects. So even network-requests can be reconstructed from a state-file. Also I decouple View/React from the actual state via interfaces. Meaning my state doesn't necessarily contain the data in the format my Views need, but it's able to supply the data via delegation. If I need background-threads I use actors / CSP.
- 0xffff2 9y ago>10.000% To clarify, you mean 10000%, right? My American brain really wants to parse that as a (very precise) 10% improvement.
- arca_vorago 9y agoNo, he means 10.000 which in parts of Europe is the same is 10,000 in the US. 10000 is the same thing as both. What's strange to me is that you seem to know this but still want to say something about it. Its like an Englishman saying colour and you saying, "you mean color, right?" Just seems unnecessary.
- greekyogurt21 9y agoThis entire comment seemed unnecessary
- Posibyte 9y agoI think you're reading into it wrong. 0xffff2 isn't correcting the parent, rather trying to clarify that by saying 10.000, that would be equivalent to 10000, since in America we use commas instead of periods for thousands denotation. We can't automatically know where people live and what standards they use, so we ask to clarify.
- deleted 9y ago[deleted]
- 0xffff2 9y ago>What's strange to me is that you seem to know this but still want to say something about it. Because on a world-wide message board it's still inherently ambiguous. My comment was meant to serve two purposes. First, to draw attention to the ambiguity for others who use `.` as a decimal separator and read "10.000" as "10" (as I very nearly did). Second, to seek clarification because there is a non-zero chance that the OP is in fact a precision-minded person who saw a small productivity improvement when switching to Kotlin. >Its like an Englishman saying colour and you saying, "you mean color, right?" Just seems unnecessary. More like when an Englishman says "biscuit". in many contexts I would ask for clarification because my definition of "biscuit" is different from the common British usage, but it's also possible that the Englishman knows this and really does mean "American biscuit".
- adamnemecek 9y agoI saw the light last week as well. You can combine this with Quasar to get Erlang style concurrency. I wonder if you can somehow hook up, idk RxJS on the client with RxJava on the server for seamless integration. The JSON story is also amazing. This stack is gonna be the biggest deal in the world. Not to mention that you can run it on Android and soon enough iOS. This is unprecedented.
- Raynak 9y agoJava? why?