
JetBrains Web UI components open-sourced - uptown
https://blog.jetbrains.com/hub/2017/08/02/jetbrains-web-ui-components-open-sourced/
======
adamnemecek
JetBrains is kinda crushing it. I've spent the last two days looking into
Kotlin. I didn't realize not only that Kotlin can compile to JS but also that
you can interact with say React from it. So you can build a full stack app in
it, without ever touching JS. (I think that the JS compilation is still
technically in beta but w/e).

[https://github.com/Kotlin/kotlin-fullstack-
sample](https://github.com/Kotlin/kotlin-fullstack-sample)

Combined with the fact that you can use Quasar for Erlang style processes, I
think that I found my next web language.

I guess you could achieve this with Scala too but I could never get over the
compilation times. Also the Kotlin integration seems somewhat more
straightforward.

I also like that the company that makes my IDE also makes the ORM
([https://github.com/JetBrains/Exposed](https://github.com/JetBrains/Exposed))
and web framework
([https://github.com/Kotlin/ktor](https://github.com/Kotlin/ktor)). Idk how
good these are but I imagine pretty decent.

~~~
jorgemf
I am not sure if you can use the coroutines in javascript, but if you can you
don't need React at all

~~~
Xantier
You can use coroutines with Kotlin JS. Your sentence doesn't really make sense
to me though since coroutines and React have very little to do with each
other.

------
raybb
It's under the Apache License and the components look pretty good.

I particularly like the Date Picker: [http://www.jetbrains.org/ring-ui/date-
picker.html](http://www.jetbrains.org/ring-ui/date-picker.html)

~~~
systems
it is oddly missing the day name

    
    
        Sun Mon Tue Wed Thu Fri Sat
    

This is very important for say when you are picking next Wednesday

~~~
ballenf
They're not prominent, but on this example the days of the week are toward the
top as column headers. Still could be more prominent for your use case.

[http://www.jetbrains.org/ring-ui/examples/date-
picker/date-p...](http://www.jetbrains.org/ring-ui/examples/date-picker/date-
picker-single-date.html)

~~~
systems
i see them now, my bad

------
Robdel12
This great! I'm sad that _none_ of these components were built with
accessibility in mind.

~~~
scierama
That seems like a fair comment, I wonder why you're being downvoted?

~~~
true_religion
Because it's neither constructive nor fair. The comment is merely "true".

Yes, the released components do not cover a use case that they were not
designed or intended to cover.

Yes, if _your_ use case is exactly that, you will find these components less
useful as you'll have to modify them.

Yet all of that is trite, and completely unfair criticism to wager against
someone on the very first day of their components release.

~~~
chii
if enough people call out the lack of accessibility in UI libraries, it brings
that requirement into the cultural norm.

The commenter is merely trying to push this into the cultural norm. I concur
with such sentiments.

~~~
true_religion
I think there are better times to do this than the initial version 0 release
of an open source production.

Taking the chance to "call out" its "lack", is essentially shaming people for
doing social good (open source), and not going far enough in someone's
opinion.

~~~
scierama
You can think what you want. The people who downvoted me for simply asking why
the parent was downvoted can think what they want. The mods can think what
they want. It doesn't justify anyone for downvoting the parent's comment which
was his view or mine for calling out the unjustified downvoting. This is where
the mods should step in, find out who was downvoting both the parent and me;
and remove their ability to downvote for a time.

------
j_s
GitHub repo: [https://github.com/JetBrains/ring-
ui](https://github.com/JetBrains/ring-ui)

It's only linked in the comments; also - they're dogfooding issues in their
own YouTrack thing. It looks like JetBrains does this for all their open
source projects. Can anyone with some experience compare against GitHub's
issues?

~~~
winterbe
We use Youtrack at our company. It's a fully fledged issue tracker with a lot
of features, e.g. custom fields, top notch search, batch operations, keyboard
shortcuts, agile boards, workflows via own DSL, reports and statistics etc.

------
wslh
I hope JetBrains or others launch a Web UI Designer that doesn't make you miss
Visual Basic 6.0.

~~~
meredydd
We're trying! ([https://anvil.works](https://anvil.works))

The problem with making a WYSIWYG designer for the web is that it's a Turing
tarpit. There are _three whole programming languages_ in there, interacting in
weird ways, and programmers use all of them. So your UI designer has to either
create something horrible that no human is expected to edit, which doesn't
work for dynamic apps (see: Dreamweaver), or you have to constrain what the
programmer can do. This means inventing a sensible API that's amenable to
WYSIWYG.

We took the latter approach with Anvil - we've cut the Gordian knot of
HTML/JS/CSS by implementing a (VB6-like) component model, with a pure Python
API. While I am, of course, biased, I think that's probably the closest we can
get to what you're wishing for.

~~~
heartbreak
Is there a blog post out there on the reasoning behind choosing Python instead
of JavaScript for that component model + API? Just seems odd to add a 4th
language to the mix.

~~~
true_religion
I'm just guessing but by using Python, they can go with a more robust module
system, and there's a semantic break between Anvil's Language and its output.

If they used Javascript, you might be confused because they'd process your
Javascript into _other_ Javascript before it's used on the site, and you can
edit it. That's a bit confusing isn't it?

Knowing to begin with that the input language is a whole separate thing, is
less confusing.

~~~
meredydd
Spot on!

If we used JS, it would be very difficult to maintain the firm layer of
abstraction that gets us out of the Turing Tarpit.

Also, to a first approximation, people don't learn JS on its own. You only
learn it if you're already learning traditional front-end development. That's
a journey we explicitly want to save people from - so we didn't want to use a
language that only web devs know.

Python is a lot easier to pick up for non-Pythonistas than JS is for non-web
developers.

Perhaps we should write that blog post...

------
chiefalchemist
Am I missing something or do most of these not consider accessibility? Or is
that up to you to when you use them?

------
michaelthiessen
If you hit "next page" on the Table component enough times it throws an error
and the component becomes unresponsive.

It looks like the example data isn't correctly set up.

[http://www.jetbrains.org/ring-ui/table.html](http://www.jetbrains.org/ring-
ui/table.html)

~~~
nightflash
fixed, thanks ;)

------
toddkazakov
Palantir's blueprint is also a great UI kit for react. I'm surprised nobody
brought it up.

------
EGreg
Looks great! But for desktop. Too bad they don't work on mobile very well (I
tried them).

~~~
wuodaboge
I agree. Was super excited to test the header only to realize it's not
responsive. Created an issue on youtrack on the same.

------
virgil_disgr4ce
Looks like their site is getting hammered—where is a good place to see the
different components in action?

~~~
wyuenho
They really need to use a CDN for their assets. Just the docs-app.js file
alone is 5mb and it takes forever to load.

------
alsadi
More ways to make checkboxes. As if react bootstrap.. Did not already
reinvinted the square wheel. And how many megabytes do my browser have to
parse before being able to draw the checkbox?

------
mhd
This _almost_ looks like something able to replace ExtJs…

------
the-dude
I browsed the components : is a slider missing? I need those, good ones ( min,
max, step, scale ).

------
tyteen4a03
Can't say I'm a fan of their buttons, but the date picker is refreshing.

------
thejosh
Too bad it doesn't work with npm 5..?

------
mstijak
I would recommend CxJS to people looking for advanced data widgets, e.g. data
tables, date pickers, charts, ...

Here are a couple of sample pages based on CxJS widgets:

\- [https://worldoscope.cxjs.io/4v5b3k2](https://worldoscope.cxjs.io/4v5b3k2)

\-
[https://starter.cxjs.io/dashboards/sales](https://starter.cxjs.io/dashboards/sales)

Full disclosure: It's a commercial framework, I'm the author.

[https://cxjs.io/](https://cxjs.io/)

[https://github.com/codaxy/cxjs](https://github.com/codaxy/cxjs)

------
scierama
It looks like this is Ring UI. It looks like that is React. It also looks like
it only runs on NodeJS. So this could be good news if you're willing to use
JavaScript (NodeJS) as the server and use or switch to React style, JavaScript
dedicated, back-end work. Is this something the Enterprise is willing to do?

~~~
tootie
Enterprises are already moving in this direction.

~~~
scierama
Facebook is a large geek shop; not how the vast majority of enterprises work
or can work for that matter.

~~~
tootie
I'm not talking about facebook. I've implemented this for Fortune 50 financial
firms and telcos. Wall Street Journal is react. Wal-Mart is all in on react
and even open sourced their own isomorphic framework. It's being adopted very
broadly and very quickly.

