5 ms·

I recently stumbled across "shoelace", which at a glance seems like an example of what the article is hoping for. It's a thoughtfully designed library of UI web

I recently stumbled across "shoelace", which at a glance seems like an example of what the article is hoping for. It's a thoughtfully designed library of UI web components. https://shoelace.style/ https://shoelace.style/

dheera 6y ago
... and it suffers from the same oversight every other web component library (polymer, mdl) suffers from: - I can't swipe left/right between the tabs - I can't pull the menu out from the left by swiping the entire page right Two of the most basic touch navigation metaphors aren't supported. To be fair, Polymer and MDL don't support the above either. But this is why HTML5 apps are still not up to par with native apps. I really want to see a web component library with full touch functionality -- tab swiping, pinch zoom on images, pull to refresh on lists and card lists. https://shoelace.style/components/tab-panel https://shoelace.style/components/tab-panel
- coder543 6y ago
  > it suffers from the same oversight every other web component library (polymer, mdl) suffers from: > - I can't swipe left/right between the tabs > - I can't pull the menu out from the left by swiping the entire page right Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days. Maybe these are your favorite interaction modes, but it really has nothing to do with whether X is "up to par with native apps." I'm certain these things could be implemented. Clearly they weren't considered desirable by the authors of Shoelace. What really holds HTML5 apps back is the fact that Apple consistently drags their heels on adopting push notifications for web. It only has to be available for apps that have been added to the home screen, so all the users who complain about getting nagged for notifications as they browse the web would still be perfectly happy not to be getting nagged. Without notification support, the number of companies who seriously invest in HTML5 apps (instead of native apps) is nearly zero, which really hinders investment in HTML5 frameworks targeting mobile app development (not frameworks just targeting mobile website development). Clearly, Apple benefits from pushing app developers into the App Store where they can require those developers to give them a cut of the profits.
  - robocat 6y ago
    > I'm certain these things could be implemented. Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile, because it doesn’t support https://caniuse.com/css-overscroll-behavior https://caniuse.com/css-overscroll-behavior Supporting swipe left/right fails hard on iOS Mobile Safari because the browser wants to history navigate back/forward if you misplace your finger, and it is easy to inadvertently refresh the page unless you are very careful not to. I don’t think there is any effective workaround.
    - dheera 6y ago
      > Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile Well HTML5 apps will never be a good experience on iOS then. On Android you can do almost anything UI-wise with Chrome, which paves the way to HTML5 installable apps.
      - coder543 6y ago
        My hot take: hamburger menus are a really bad UX paradigm in almost all cases, and bottom tab bars are much better. So, I disagree entirely: iOS can easily support fantastic HTML5 mobile apps... if push notifications ever become available. From what I remember, Google started switching to bottom tab bars a couple of years ago, even on Android. But, when you have a bunch of features, it's much easier on the developer (not the end user) to just stuff them in a hamburger menu and say "eh, good enough..." Link that seems relevant, but I've really only skimmed it: https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-9138891e98f4 https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-91...
        dheera 6y ago
        Side note -- I do wish iOS would get ahead with Bluetooth and WebRTC support, both of which I use heavily on my (private) HTML5 apps. Push notifications would be necessary for a complete feature set too, although I don't really use them for my private apps since I disable almost all push notifications on my phone.
- schwartzworld 6y ago
  I could see arguments for keeping that sort of behavior out of a base library. I've never had to implement a menu that swipes out like that, but I could see it being a complex behavior to get right. if you need that use case, it seems easy enough to implement
- arkis22 6y ago
  I don't think I've ever used an app I wouldn't have preferred as a web app
ssorallen 6y ago
Thanks for the link. This library unfortunately highlights further challenges with Web Components like mixing custom WCs with native form elements. To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. > Shoelace forms don't make use of action and method attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the slSubmit event as shown in the example below and make an XHR request with the resulting form data. > https://shoelace.style/components/form https://shoelace.style/components/form
- domenicd 6y ago
  This is fixable, using the form-associated custom elements feature that's specified in HTML. (Introduction: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example https://html.spec.whatwg.org/multipage/custom-elements.html#...) However, that's only currently shipping in Chrome, despite the other browsers being positive on it. Similar capability gaps that we're working to close are accessibility (https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-accessibility-example https://html.spec.whatwg.org/multipage/custom-elements.html#..., same situation, everyone likes it, only Chrome ships so far) and focusability (https://github.com/w3c/webcomponents/issues/762 https://github.com/w3c/webcomponents/issues/762, still figuring out what the solution should be).
  - ssorallen 6y ago
    That’s great, thanks for the links.
- claviska 6y ago
  > To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. Shoelace author here. This is somewhat true (I wouldn’t call it “a bunch” though), and it will be until form-associated custom elements are standard. However, I’d argue that most form validation and submission is done with JavaScript these days. I can’t think of the last time I saw a post request submitted from a form in the wild. (Not that it doesn’t happen, but it seems to be quite rare now.)
yesimahuman 6y ago
Shoelace is awesome! Also it is built with Stencil, which is a tool that generates web components from a development experience React and Angular devs would find familiar. One of the benefits of Stencil is that it can generate Angular, React, and Vue-specific bindings. This smooths over any issues React has in working with WC's and provides a first-class React experience. Stencil was built to power Ionic Framework which is arguably one of the most popular web component UI libraries. Fun fact: there are many thousands of app store apps built with web components! (data: https://appfigures.com/top-sdks/development/apps https://appfigures.com/top-sdks/development/apps). This underscores a fact about WCs: their proliferation is largely happening behind the scenes and unnoticed by many in the web world.

dheera 6y ago

... and it suffers from the same oversight every other web component library (polymer, mdl) suffers from: - I can't swipe left/right between the tabs - I can't pull the menu out from the left by swiping the entire page right Two of the most basic touch navigation metaphors aren't supported. To be fair, Polymer and MDL don't support the above either. But this is why HTML5 apps are still not up to par with native apps. I really want to see a web component library with full touch functionality -- tab swiping, pinch zoom on images, pull to refresh on lists and card lists. https://shoelace.style/components/tab-panel https://shoelace.style/components/tab-panel

coder543 6y ago
> it suffers from the same oversight every other web component library (polymer, mdl) suffers from: > - I can't swipe left/right between the tabs > - I can't pull the menu out from the left by swiping the entire page right Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days. Maybe these are your favorite interaction modes, but it really has nothing to do with whether X is "up to par with native apps." I'm certain these things could be implemented. Clearly they weren't considered desirable by the authors of Shoelace. What really holds HTML5 apps back is the fact that Apple consistently drags their heels on adopting push notifications for web. It only has to be available for apps that have been added to the home screen, so all the users who complain about getting nagged for notifications as they browse the web would still be perfectly happy not to be getting nagged. Without notification support, the number of companies who seriously invest in HTML5 apps (instead of native apps) is nearly zero, which really hinders investment in HTML5 frameworks targeting mobile app development (not frameworks just targeting mobile website development). Clearly, Apple benefits from pushing app developers into the App Store where they can require those developers to give them a cut of the profits.
- robocat 6y ago
  > I'm certain these things could be implemented. Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile, because it doesn’t support https://caniuse.com/css-overscroll-behavior https://caniuse.com/css-overscroll-behavior Supporting swipe left/right fails hard on iOS Mobile Safari because the browser wants to history navigate back/forward if you misplace your finger, and it is easy to inadvertently refresh the page unless you are very careful not to. I don’t think there is any effective workaround.
  - dheera 6y ago
    > Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile Well HTML5 apps will never be a good experience on iOS then. On Android you can do almost anything UI-wise with Chrome, which paves the way to HTML5 installable apps.
    - coder543 6y ago
      My hot take: hamburger menus are a really bad UX paradigm in almost all cases, and bottom tab bars are much better. So, I disagree entirely: iOS can easily support fantastic HTML5 mobile apps... if push notifications ever become available. From what I remember, Google started switching to bottom tab bars a couple of years ago, even on Android. But, when you have a bunch of features, it's much easier on the developer (not the end user) to just stuff them in a hamburger menu and say "eh, good enough..." Link that seems relevant, but I've really only skimmed it: https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-9138891e98f4 https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-91...
      - dheera 6y ago
        Side note -- I do wish iOS would get ahead with Bluetooth and WebRTC support, both of which I use heavily on my (private) HTML5 apps. Push notifications would be necessary for a complete feature set too, although I don't really use them for my private apps since I disable almost all push notifications on my phone.
schwartzworld 6y ago
I could see arguments for keeping that sort of behavior out of a base library. I've never had to implement a menu that swipes out like that, but I could see it being a complex behavior to get right. if you need that use case, it seems easy enough to implement
arkis22 6y ago
I don't think I've ever used an app I wouldn't have preferred as a web app

ssorallen 6y ago

Thanks for the link. This library unfortunately highlights further challenges with Web Components like mixing custom WCs with native form elements. To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. > Shoelace forms don't make use of action and method attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the slSubmit event as shown in the example below and make an XHR request with the resulting form data. > https://shoelace.style/components/form https://shoelace.style/components/form

domenicd 6y ago
This is fixable, using the form-associated custom elements feature that's specified in HTML. (Introduction: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example https://html.spec.whatwg.org/multipage/custom-elements.html#...) However, that's only currently shipping in Chrome, despite the other browsers being positive on it. Similar capability gaps that we're working to close are accessibility (https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-accessibility-example https://html.spec.whatwg.org/multipage/custom-elements.html#..., same situation, everyone likes it, only Chrome ships so far) and focusability (https://github.com/w3c/webcomponents/issues/762 https://github.com/w3c/webcomponents/issues/762, still figuring out what the solution should be).
- ssorallen 6y ago
  That’s great, thanks for the links.
claviska 6y ago
> To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. Shoelace author here. This is somewhat true (I wouldn’t call it “a bunch” though), and it will be until form-associated custom elements are standard. However, I’d argue that most form validation and submission is done with JavaScript these days. I can’t think of the last time I saw a post request submitted from a form in the wild. (Not that it doesn’t happen, but it seems to be quite rare now.)

yesimahuman 6y ago

Shoelace is awesome! Also it is built with Stencil, which is a tool that generates web components from a development experience React and Angular devs would find familiar. One of the benefits of Stencil is that it can generate Angular, React, and Vue-specific bindings. This smooths over any issues React has in working with WC's and provides a first-class React experience. Stencil was built to power Ionic Framework which is arguably one of the most popular web component UI libraries. Fun fact: there are many thousands of app store apps built with web components! (data: https://appfigures.com/top-sdks/development/apps https://appfigures.com/top-sdks/development/apps). This underscores a fact about WCs: their proliferation is largely happening behind the scenes and unnoticed by many in the web world.