12 ms·
JetBrains Ring UI
- dagmx 4y agoThe top heading bar hides a bunch of the UI elements on mobile. Not the best showing for what otherwise seems like a nice project from Jetbrains.
- hbn 4y agoI imagine JetBrains isn't too concerned with mobile interfaces considering desktop software is their bread and butter
- nedt 4y agoThey have Jetbrains Space and Youtrack as mobile apps.
- jen20 4y agoTeamCity has had a web based UI for at least 15 years, so I’d imagine they are very much concerned with it.
- colejohnson66 4y agoEven then, YouTrack (at least the one for JetBrains products) is extremely slow and annoying to use
- MrRiddle 4y ago
- mekster 4y agoThat would be a laughable lazy decision if it is so in 2022 not to care for mobile usability. They have AppCode and Android Studio targeting mobile as well.
- gavmor 4y agoThe linked webpage is generated with Storybook.js, a generic web component display framework, and is not itself en exemplar of the showcased UI library.
- mekster 4y agoI really hate when a dev makes excuse blaming an external library for lack of integration. It is them that chose whatever the library and didn't care to fix.
- shepherdjerred 4y agoWhy would JetBrains care, at all, how this site looks on mobile? It's made for developers to prototype components.
- ramesh31 4y agoThis is very very good. Clean, simple, extensible. The death of Material UI patterns can't come fast enough IMO, and I'm glad to see people moving away from it toward a more functional aesthetic.
- dsissitka 4y agoI'd never heard of it so I did some quick googling. From https://github.com/JetBrains/ring-ui https://github.com/JetBrains/ring-ui: > This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products. From https://blog.jetbrains.com/blog/2018/09/25/ring-ui-1-0-is-released/ https://blog.jetbrains.com/blog/2018/09/25/ring-ui-1-0-is-re...: > At JetBrains, we use Ring UI components for our web-based products like YouTrack, Hub, TeamCity, and Upsource.
- NonNefarious 4y ago
- NonNefarious 4y ago
- dang 4y agoWe've banned this account for repeatedly breaking the site guidelines. Please don't create accounts to do that with. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- cercatrova 4y agoThank you, we appreciate it Dan.
- jbverschoor 4y agoAll these things end with Ng.. So maybe it's React Interface Ng (next gen)?
- NonNefarious 4y ago
- cetinsert 4y agohttps://shoelace.style/ https://shoelace.style/ or even https://opensource.adobe.com/spectrum-web-components/ https://opensource.adobe.com/spectrum-web-components/ are simply much better as they just work with native web standards. React is just another way FB/Meta hurts people :)
- ramesh31 4y ago>are simply much better as they just work with native web standards. React is just another way FB/Meta hurts people :) Sure, and all you need are 50+ dependencies to work with those "standards": https://www.npmjs.com/package/@shoelace-style/shoelace?activeTab=dependencies https://www.npmjs.com/package/@shoelace-style/shoelace?activ... If you're doing JS development, just use React. There's really no good reason not to, and I would argue that in an enterprise environment it would be negligent not to. If anyone can give a non-ideological reasoning for a better choice, I'd love to hear it.
- withinboredom 4y agoI’ve got a feeling this comment won’t age well…
- Existenceblinks 4y agoThe less thing people know, the high risk, the more defensive. Like losing the entire basket of egg. In traditional way, they dedicated the whole life to one thing, and that was called a cult.
- Karunamon 4y agoI would argue that dev dependencies do not really matter. That leaves a mere 7, 2 of those belong to the same namespace as the style. That said I am also against choosing libraries based on political/ideological concerns. React is MIT anyways.
- claytongulick 4y agoSure, I'll bite. The vdom and batching updates is slow, the theory behind it that direct manipulation of the dom is worse has been pretty conclusively shown to be incorrect, especially with css "contains". JSX doesn't end up bringing much value over vanilla html, but can lead to a lot of strange and difficult to reason about states. The "execute everything on every render" style ends up being extraordinarily costly and not particularly beneficial, especially when you add something like redux to the mix. Alternately, web components have a simple, lightweight and easy to understand life cycle. Reactivity is trivially implemented via property setters and a call to a render() method. Tiny, fast rendering libraries like lit-html work great, and for other components you can do without them completely, depending on the needs of the component. React needs at least one build step, which distances the developer's code from what executes. Vanilla web components are simple to wrap into framework components for pretty much any framework, and can be used natively by most. React components are limited to react things, unless you want to include an absurd js payload size. And "just use react" doesn't really mean anything. What version? With what methodology? Hooks? Class based? Look at how much it's changed. It's very costly for organizations to get caught up in the framework upgrade cycle. There's a reason why Ionic chose to base their components on native web components. I recommend you read about it.
- RomanPushkin 4y agoI like the initiative. The main concern is whether to stick to "proprietary" design framework, either it's Jetbrains Ring UI, Atlaskit, and so on. There are _lots_ of community-driven alternatives, and it feels much safer to pick something that doesn't belong to a corp. I'm willing to hear pros for choosing such UI framework.
- MarathonSeeker 4y agoThe main reason you would want to pick such a proprietary library is to achieve a homogeneous look and feel (often behavioral UX as well) when your app must work within another product - this product/organization is usually the one that also provides the library in question, and more often than not, uses the same design system if not the library itself. We built https://github.com/freshworks/crayons https://github.com/freshworks/crayons for the same reason - apps published to the Freshworks Marketplace can be built using Crayons. We also ended up building our own user facing SaaS applications using Crayons.
- NonNefarious 4y ago
- grardb 4y agoThere is a list of components in the sidebar on the left. If you click those, you will see those components instead of the alerts.
- yCombLinks 4y agoThat doesn't answer any of the questions. What am I supposed to be admiring, thinking about, using this for? Is this a tool I should adopt or test? Is this a new UI pattern to think about? There's no obvious context.
- slowmovintarget 4y agoWhat you're talking about is advertising and advocacy. I personally don't mind less of that.
- notsrg 4y agoAs a FE developer I appreciate the updates from HN when a bigger company releases something as OSS. It's nice to know what approaches others are taking to solve similar problems.
- NonNefarious 4y ago
- hoten 4y agoThanks! The initial selection being an alert module had my thinking the page was broken...
- NonNefarious 4y ago
- kyawzazaw 4y ago
- ComputerGuru 4y agoNote to readers: you need to view this on a desktop (or maybe a tablet would work?). At least on my phone a considerable amount of the functional UI is completely cut off and rendered inaccessible even with scrolling. (Hopefully they are not dogfooding and this has nothing to do with the tech they’re touting!)
- Shacklz 4y agoProbably some storybook-related issue, we also use it at work, and while it's a joy to use when it works it can be a pain to set up, and it does tend to need a bit more effort to keep it stable than one would wish for unfortunately.
- geraldwhen 4y agoIf you manage your own web pack config it’s pretty straightforward to keep updated and working. It’s when you rely on a webpack config you can’t see that it’s hard to keep storybook’s config and your app’s config in sync.
- gedy 4y agoIt's actually the tool they used to host the design system (Storybook), it ironically has its own UI, not using the Jetbrains components.
- joenathanone 4y agoCompletely locked up my phone, Galaxy S10+ Chrome.
- joenathanone 4y agoCompletely locked up my phones browser, Galaxy S10+ Chrome.
- klabb3 4y agoFirefox on iOS here. Crashed the browser, impressive!
- 4y ago
- blantonl 4y agoHere I am thinking this was a web based IDE for developing user interfaces for Ring cameras. I guess not. This means Amazon is going to sue JetBrains, right?
- lxe 4y agoComponent UI libraries have converged towards providing the most basic building blocks instead of creating higher levels of abstraction, which I personally think is a bad trend. You could build a very complex UI with Ext.JS back in 2010 with a lot less code and very little time, while it takes a while lot more work to produce even something relatively basic with modern UI frameworks. I really don't care about how customizable your spinner is. I want to use it in common contexts with as little code as possible. Heck, at least provide me with a kitchen sink so I can copy and paste common patterns.
- ethbr0 4y agoDevelopers care about functionality. Designers care about uniqueness.
- yellsatclouds 4y agoand their bosses care about both developers and designers being replaceable cogs in their company... else the bus accident test fails
- manmal 4y agoAn approach I like is to provide basic components (i.e. a toolkit) and higher order components that can be copied into the project as required. This allows maximal flexibility while also providing the possibility to DRY things up in your own codebase. Tailwind and Tailwind components achieves this for example. Web components also come to mind.
- brundolf 4y agoWhat's shifted is that product/design want the UI to be distinctive to the company and its brand. So each company needs its own foundational UI library, or at least a highly-customizable third party one
- jcz_nz 4y agoFor some apps. For internally-facing admin for example tools we want a minimal learning curve and readily recognisable, sign posted models. It needs to look like stuff you already know, down to icons and ux behaviour.
- dglass 4y agoThe date picker is pretty impressive. Well done. https://jetbrains.github.io/ring-ui/master/index.html?path=/story/components-date-picker--clearable https://jetbrains.github.io/ring-ui/master/index.html?path=/...
- dev_snd 4y agoLooks great in theory, but does not work on Android Firefox unfortunately.
- yesimahuman 4y agoIf you want mobile-enabled components like this Ionic has many. Here’s the datetime: https://ionicframework.com/docs/api/datetime https://ionicframework.com/docs/api/datetime
- joshstrange 4y agoIonic's is probably one of the best date+time combo (other examples are always strong in one and terrible in the other, time being the thing that often gets short shrift) I also quite like Quasar's date picker https://quasar.dev/vue-components/date https://quasar.dev/vue-components/date Though do not even look at their time picker... It's a mess, I roll a custom component for time when I need it.
- q7xvh97o2pDhNrh 4y agoAh, these are all quite nice! So much better than the original iOS one that requires tediously scrolling for ages to input anything interesting. It's good to finally see some innovation in the datepicker space.
- javier2 4y agoDamn that is good. Even with the swipe gesture on mobile. I think we are webscale now
- deleted 4y ago[deleted]
- palebt 4y agoWhat's the relation to the Compose Multiplatform (another UI toolkit from JetBrains)? https://www.jetbrains.com/lp/compose-mpp/ https://www.jetbrains.com/lp/compose-mpp/
- dheera 4y agoNot only is this website a massive fail on mobile, but simple, common gestures like swiping between tabs don't work. This reminds me of older UI libraries like jQueryUI that are equally painful on mobile.
- geraldwhen 4y agoIt’s a storybook site. It has nothing to do with the hosted components. Storybook can work fine on mobile so I think they must be doing something to hose the built storybook file.
- pier25 4y agoThe Loader component has this parameter: hermione: {skip: true} Is that a reference to Harry Potter or maybe I'm missing something as a non native speaker? :) Edit: No, it's about this: https://github.com/gemini-testing/hermione https://github.com/gemini-testing/hermione
- pier25 4y agoThis is such a huge effort. I wonder how much money it must have cost and is it worth it for JetBrains? How much time would it take for a team of 5 to make a UI library at this level of sophistication (tests, accessibility, response, etc)? 6 months? 1 year?
- sz4kerto 4y agoI'd be very surprised if this took 5 FTE years, I'd assume way more. Especially including all the non-devs necessary (designers, managers, etc.).
- pier25 4y agoHonestly I was thinking more like 18-24 months total (for a team of 5). 1 UI designer, 1 UX designer, 3 React devs. But let's say 5 people working 12 months x 50,000 USD = 250,000 USD. Even considering non US payrolls at 50k per year, that's a significant expense.
- sz4kerto 4y agoWhy are you multiplying yearly salaries with months? :) JetBrains devs likely cost around 100k/y year here in CEE by the way. But I think 3M is a reasonable guess, 30 FTE years (7 devs, 1 PM, 1 UX, 1 "overhead" (other management costs)).
- pier25 4y agoJesus you're right... I'm such an idiot.
- deleted 4y ago[deleted]
- 4O4 4y agoI don't know US market. How common is it to get 50k a month as a React dev or UX/UI designer across the USA? Or do you mean Silicon Valley only?
- Mikeb85 4y agoAndroid Chrome right now, the navbar elements are squished and the top of the body is hidden by the navbar.
- bilekas 4y agoAll I see is : >Open landing page >Force token update >Log out
- manigandham 4y agoLots of UI frameworks by various companies - I keep track of the big ones here: https://gist.github.com/manigandham/34154e63dc3c1b8747fab40de71bc38c https://gist.github.com/manigandham/34154e63dc3c1b8747fab40d...
- TootsMagoon 4y agoNice work. Thank you.
- autoconfig 4y agoJust FYI a couple of heavy hitters you might wanna add to the list: - Adobe spectrum: https://spectrum.adobe.com/ https://spectrum.adobe.com/ - Radix UI: https://www.radix-ui.com/ https://www.radix-ui.com/ - Tailwind UI: https://tailwindui.com/ https://tailwindui.com/ - Reach UI: https://reach.tech/ https://reach.tech/
- eddieh 4y agoAdobe has http://topcoat.io http://topcoat.io too. How many companies have multiple component libraries/frameworks? Seems like a lot of wasted time and resources.
- q7xvh97o2pDhNrh 4y agoEvery company has a frontend team, and all of those frontend folks want to get promoted. Building an in-house component library is a straightforward card to play. It's basically the natural outcome of reasonable people responding in reasonable ways to seemingly-reasonable incentive structures. (I do agree there's probably a more efficient way, but I think it might also be one of those slippery-slope situations where there's a lot of gravity pulling sufficiently-large teams to eventually have their own component library. In other words: Suppose they start off with the best of intentions and repurpose an existing library. Then come the inevitable months of customization, forking, racing to integrate upstream updates, etc. Finally, someone pipes up and says, "Hey, why don't we build our own so we can control our own destiny?" Stakeholders get excited, and then it's off to the races.)
- jbirer 4y agoSo when is the JetBrains operating system coming through? I will switch to it if it's as feature-full as other JetBrains products.
- ulimn 4y agoIs it me, or are the labels totally not vertically centered in the buttons? I'm using firefox.
- varispeed 4y agoI am on Chrome and the styling looks messed up or there was no UI designer in the team.
- tmd83 4y agoDoes anyone has thoughts on what's the best datetime picker that works sanely in mobile, first to pick an olde date (Say birth date) and user date/time can also be somewhat typed in on the text field?
- varispeed 4y agoIt looks impressive in terms of features, but it feels like it was done solely by developers and there was no thought put into looks. The typography looks awful, spacing looks all over the place - elements are difficult to read. I can't see much consistency as if it was developed by disjointed teams. Not something I would use unless there are good looking templates available.
- brailsafe 4y agoIronically I had I no clue what I was looking at on mobile
- deleted 4y ago[deleted]
- RockingGoodNite 4y agoWhere are they based out of these days?
- ole800 4y ago
- tim-- 4y agoThe individual components are really nice, but mixing and matching them seems to make a user interface that is condensed and overly complex. YouTrack specifically comes to mind here. It's a fantastic bug tracker, but the UI is missing a certain... jeu ne se quoi
- ole800 4y ago
- wildpeaks 4y agoThis wouldn't be a good fit for my projects because this still uses Babel and has too many dependencies: https://github.com/JetBrains/ring-ui/blob/master/package.json https://github.com/JetBrains/ring-ui/blob/master/package.jso...