5 ms·

Let me give you an example, the DOM is missing a decent dropdown component. Some will say that they can make a cool dropdown in 2 minutes with 20 divs and some

Let me give you an example, the DOM is missing a decent dropdown component. Some will say that they can make a cool dropdown in 2 minutes with 20 divs and some js and css, the issue is this 2 minutes components have lot of bugs and missing features (accessibility, keyboard supports, missing events) and then if you need the same dropdown in other section but you need to add 1 small thing you duplicate it again. For comparison in GUI toolkits you use the existing feature complete dropdown. And if you need more customization you extend the dropdown and override it's render/paint function and you can painted as you want. What I liked about this powerfull GUI toolits is that most of the time you used the built in stuff so all application look consistent and only special apps would create custom stuff. I wish browser makers would focus on improving the existing DOM elements and adding a few more so we could use native ones instead of having to implement custom shit because the designer wants the component to look in a specific way but you can't CSS the native element to get the result.

ta34545734 6y ago
> Some will say that they can make a cool dropdown in 2 minutes with 20 divs and some js and css Isn't there already JS libraries to do that? If so, doesn't it boil down to the same issue as traditional OO UI toolkit, where the abstraction must be extremely precise to allow for any sort of customization? > For comparison in GUI toolkits you use the existing feature complete dropdown. Aren't you making the assumption here that GUI toolkits necessarily bundle a perfect implementation of this widget? Why would that be only possible for native GUI and not for Web UI?
- simion314 6y ago
  The problem with existing libraries that give you a dropdown is that you have not one but many such libraries and some will not be compatible with what your project uses, some are missing the feature you need, some are bugged. As an example the Search input in YouTube has a dropdown with suggestion, that dropdown got stuck on for me a few times , clicking outside it did not make it hidden, I had to reload the page. So google developers are incapable of creating a basic dropdown that has the feature where you can type and shows you some options. If there was a built in powerful enough dropdown then YouTube could have used that and not invent it's own broken version. My point is give us native components as powerful as Qt,Flex,WPF , React, Agnular and others could use those or if they want can use DIVs or canvas , I don't want to remove you the option to use React or whatever. The existing toolkits are not as limited as you think because you can most of the time override them and do whatever change you want , most of the time though you have enough built in customization that you don't need to do advanced overrides (I do not mean only visual customization, for example a dropdown can give you the option on how many items would be visible on the dropdown at once, a DataGrid can give you option about what columns are resizable, sortable and you can specify if you want a sort function for a column. And about DataGridView components, the native ones are implemented smart and can hold a million rows and have no performance hit because are smart enough not to create million GUI elements. >Aren't you making the assumption here that GUI toolkits necessarily bundle a perfect implementation of this widget? Why would that be only possible for native GUI and not for Web UI? Desktop toolkits are not perfect so if your designer asks you for super extra fancy stuff you can either extend and existing one or you can create it from scratch but for visual stuff just changing the paint/render function would be enough. For WebUI, let's say I need a good dropdown, calendar, and DataGrid where do I go and get this components? If you say bootstrap those are too basic, if you say some React stuff maybe I am not suing react, if you link me to some Angular version N stuff maybe I am using N-1 version etc. I think if you ask 3 developers to go and find me an X component for my framework Y I would get back at least 3 different results. Other issue with non native components is that if you do not read the code you might not notice bad quality, components that do not clean after themselves or that run code each time you move your mouse around the page.
deleted 6y ago
[deleted]
t0astbread 6y ago
If you override the render/paint function somewhere, would you not have to do extra work to improve accessibility again?
- simion314 6y ago
  It depends. Say there is a Label that should show some text and a crazy designer asks me to have the text rotating and jumping and also be super light gray and ahrd to read, the component could still report back to accessibility framework the actual text and you could have a better experience then a regular user. Custom rendering is not most of the time painting on a canvas. A simple example , you have a Dropdown, each item is rendered with a simple component that is something like <text>item.text</text> and you might want to change the render function to be <icon>item.icon</icon><text>item.text</text> I think ATM you still can't use the HTML select to have a dropdown with the countries and the flags or a dropdown with the fonts and each font it is painted with it's own font family, or customize the numeric spinner arrows or scroll bars colors. Again , I prefer using native widgets, but I am forced to implement designs and I have to replace a native component with a pile of netsted divs,js and css.
  - t0astbread 6y ago
    Oh, I see what you mean. I was thinking about the case where you're painting something completely different than the semantic information but I guess that's rare. You're right, in HTML you have to fall back to elements without accessibility features pretty quickly if you wanna customize a native component. There are some features that one can use to restore accessibility like ARIA but yeah, it's not great.
- lmm 6y ago
  Not if you're just making it look different, because the component already hooks into the right APIs to expose itself to screenreaders etc.. Of course if you're doing something completely radical you need to implement accessibility yourself, but there's more flexibility to customise existing components as little or as much as you like.
- thu2111 6y ago
nxrabl 6y ago
It’s good that you mention accessibility, because TFA does not. Nor does the Skaija repo, and nor does the repo for Jetpack Compose for Desktop [0], JetBrains’ higher-level UI kit based on it. I think it’s a mistake to suggest that “native UI toolkit” implies “feature complete”. [0]: https://github.com/JetBrains/compose-jb https://github.com/JetBrains/compose-jb
- vips7L 6y ago
  Desktop Compose is in alpha. I don't think it's appropriate to use that as evidence of feature completeness.
- Phrodo_00 6y ago
  Skaija wouldn't really be the place for accessibility features (except for maybe provide access to color-blind filters?). It's an important feature, though, and I hope Jetpack Compose gets better at it.
pier25 6y ago
> then if you need the same dropdown in other section but you need to add 1 small thing you duplicate it again Not really. That's the point of making components in React/Vue/Svelte/etc, you can create reusable modular parts.
- funcDropShadow 6y ago
  I think the point was: Chrome has as much lines of code as Linux with all its drivers and still has no decent dropdown built in. Not that it cannot be built.
- simion314 6y ago
  Can you today make a component, use it in 10 places in your project and now if you need to add one extra thing for the 11th place can you "extend" the existing component so if you fix a bug or add some new event in the old component the extended one inherits it? I know in OOP toolkits you can override any public and protected functions and add your little stuff on top but I am not sure if you can do it in React without cloning the code and modifying it. As an example you say have a DataGridView , a giant component with a lot of features and you need to modify something, can you do it in React using inheritance like functionality and not risking breaking anything where the component is already used ?
  - pier25 6y ago
    Instead of using inheritance you'd use composition, but yeah you can do exactly what you're describing. Just right now I'm building a component that abstracts filtering and sorting for lists of items in Svelte.
    - simion314 6y ago
      If a designer gives you 2 images to use for a radio button can you do a correct radio button in 1 minute (no third party libs?) By extending a RadioButton and overriding the paint method I can do it in 1 minute. The component would still be a radiobutton, same interface, same events,same keyboard shortcuts, same accessibility, focus/tab-order behaviour. In React you would start with a div, put 2 img inside it and implement the toggle logic, After that you need to add the events, the keyboard shortcuts, the tab ordering, focusing, accessibility.
galaxyLogic 6y ago
Another example is trying to implement a text-editor in the browser. Yes it can be done, but the standard component for text-editors is TextArea which is not much to write home about. An example big issue I faced creating my own editor was getting the caret follow my mouse-clicks and key-presses. Then trying to highlight matching parenthesis. I know it is doable because I did it but I had to spend a lot of time on it and I'm not quite happy with the end-result. A standard high-quality text-editor component should be part of the web-platform but is not.
- simion314 6y ago
  Yes, I had to do something similar using the contenteditable, a giant issue is that the browsers differ a lot(I had a lot of issue with the selections/ranges differing a lot)

ta34545734 6y ago

> Some will say that they can make a cool dropdown in 2 minutes with 20 divs and some js and css Isn't there already JS libraries to do that? If so, doesn't it boil down to the same issue as traditional OO UI toolkit, where the abstraction must be extremely precise to allow for any sort of customization? > For comparison in GUI toolkits you use the existing feature complete dropdown. Aren't you making the assumption here that GUI toolkits necessarily bundle a perfect implementation of this widget? Why would that be only possible for native GUI and not for Web UI?

simion314 6y ago
The problem with existing libraries that give you a dropdown is that you have not one but many such libraries and some will not be compatible with what your project uses, some are missing the feature you need, some are bugged. As an example the Search input in YouTube has a dropdown with suggestion, that dropdown got stuck on for me a few times , clicking outside it did not make it hidden, I had to reload the page. So google developers are incapable of creating a basic dropdown that has the feature where you can type and shows you some options. If there was a built in powerful enough dropdown then YouTube could have used that and not invent it's own broken version. My point is give us native components as powerful as Qt,Flex,WPF , React, Agnular and others could use those or if they want can use DIVs or canvas , I don't want to remove you the option to use React or whatever. The existing toolkits are not as limited as you think because you can most of the time override them and do whatever change you want , most of the time though you have enough built in customization that you don't need to do advanced overrides (I do not mean only visual customization, for example a dropdown can give you the option on how many items would be visible on the dropdown at once, a DataGrid can give you option about what columns are resizable, sortable and you can specify if you want a sort function for a column. And about DataGridView components, the native ones are implemented smart and can hold a million rows and have no performance hit because are smart enough not to create million GUI elements. >Aren't you making the assumption here that GUI toolkits necessarily bundle a perfect implementation of this widget? Why would that be only possible for native GUI and not for Web UI? Desktop toolkits are not perfect so if your designer asks you for super extra fancy stuff you can either extend and existing one or you can create it from scratch but for visual stuff just changing the paint/render function would be enough. For WebUI, let's say I need a good dropdown, calendar, and DataGrid where do I go and get this components? If you say bootstrap those are too basic, if you say some React stuff maybe I am not suing react, if you link me to some Angular version N stuff maybe I am using N-1 version etc. I think if you ask 3 developers to go and find me an X component for my framework Y I would get back at least 3 different results. Other issue with non native components is that if you do not read the code you might not notice bad quality, components that do not clean after themselves or that run code each time you move your mouse around the page.

deleted 6y ago

[deleted]

t0astbread 6y ago

If you override the render/paint function somewhere, would you not have to do extra work to improve accessibility again?

simion314 6y ago
It depends. Say there is a Label that should show some text and a crazy designer asks me to have the text rotating and jumping and also be super light gray and ahrd to read, the component could still report back to accessibility framework the actual text and you could have a better experience then a regular user. Custom rendering is not most of the time painting on a canvas. A simple example , you have a Dropdown, each item is rendered with a simple component that is something like <text>item.text</text> and you might want to change the render function to be <icon>item.icon</icon><text>item.text</text> I think ATM you still can't use the HTML select to have a dropdown with the countries and the flags or a dropdown with the fonts and each font it is painted with it's own font family, or customize the numeric spinner arrows or scroll bars colors. Again , I prefer using native widgets, but I am forced to implement designs and I have to replace a native component with a pile of netsted divs,js and css.
- t0astbread 6y ago
  Oh, I see what you mean. I was thinking about the case where you're painting something completely different than the semantic information but I guess that's rare. You're right, in HTML you have to fall back to elements without accessibility features pretty quickly if you wanna customize a native component. There are some features that one can use to restore accessibility like ARIA but yeah, it's not great.
lmm 6y ago
Not if you're just making it look different, because the component already hooks into the right APIs to expose itself to screenreaders etc.. Of course if you're doing something completely radical you need to implement accessibility yourself, but there's more flexibility to customise existing components as little or as much as you like.
thu2111 6y ago

nxrabl 6y ago

It’s good that you mention accessibility, because TFA does not. Nor does the Skaija repo, and nor does the repo for Jetpack Compose for Desktop [0], JetBrains’ higher-level UI kit based on it. I think it’s a mistake to suggest that “native UI toolkit” implies “feature complete”. [0]: https://github.com/JetBrains/compose-jb https://github.com/JetBrains/compose-jb

vips7L 6y ago
Desktop Compose is in alpha. I don't think it's appropriate to use that as evidence of feature completeness.
Phrodo_00 6y ago
Skaija wouldn't really be the place for accessibility features (except for maybe provide access to color-blind filters?). It's an important feature, though, and I hope Jetpack Compose gets better at it.

pier25 6y ago

> then if you need the same dropdown in other section but you need to add 1 small thing you duplicate it again Not really. That's the point of making components in React/Vue/Svelte/etc, you can create reusable modular parts.

funcDropShadow 6y ago
I think the point was: Chrome has as much lines of code as Linux with all its drivers and still has no decent dropdown built in. Not that it cannot be built.
simion314 6y ago
Can you today make a component, use it in 10 places in your project and now if you need to add one extra thing for the 11th place can you "extend" the existing component so if you fix a bug or add some new event in the old component the extended one inherits it? I know in OOP toolkits you can override any public and protected functions and add your little stuff on top but I am not sure if you can do it in React without cloning the code and modifying it. As an example you say have a DataGridView , a giant component with a lot of features and you need to modify something, can you do it in React using inheritance like functionality and not risking breaking anything where the component is already used ?
- pier25 6y ago
  Instead of using inheritance you'd use composition, but yeah you can do exactly what you're describing. Just right now I'm building a component that abstracts filtering and sorting for lists of items in Svelte.
  - simion314 6y ago
    If a designer gives you 2 images to use for a radio button can you do a correct radio button in 1 minute (no third party libs?) By extending a RadioButton and overriding the paint method I can do it in 1 minute. The component would still be a radiobutton, same interface, same events,same keyboard shortcuts, same accessibility, focus/tab-order behaviour. In React you would start with a div, put 2 img inside it and implement the toggle logic, After that you need to add the events, the keyboard shortcuts, the tab ordering, focusing, accessibility.

galaxyLogic 6y ago

Another example is trying to implement a text-editor in the browser. Yes it can be done, but the standard component for text-editors is TextArea which is not much to write home about. An example big issue I faced creating my own editor was getting the caret follow my mouse-clicks and key-presses. Then trying to highlight matching parenthesis. I know it is doable because I did it but I had to spend a lot of time on it and I'm not quite happy with the end-result. A standard high-quality text-editor component should be part of the web-platform but is not.

simion314 6y ago
Yes, I had to do something similar using the contenteditable, a giant issue is that the browsers differ a lot(I had a lot of issue with the selections/ranges differing a lot)