Snappy Widgets

+3  

Widgets that snap into apps.

YAML 発想

Today, every time a developer develops an app, it is them who decide how the app should look and feel, not you, the user. However, if you look around, most apps pretty much share the same kind of widgets:

  • all chat apps have conversations list, the input field for text, voice, emojis, files into a chosen conversation, and the view of the conversation itself.
  • all CAD design apps have the object 3D views, tool selectors, and the object/operation trees.
  • all the mail apps have folders and message title lists.

The examples can continue, but the point is, that these widgets repeat across different applications.

The creators of the first operating systems graphical user interface, such as Windows, came up with the paradigm, where developers create a window, and a world within that "window". They had not envisaged that the user interface lowest common denominator should be a "widget", and the user would compose widgets into what they need. So, let's re-imagine a life of a user with "Widgets OS" rather than "Windows OS".

  • Upon starting the snappy widgets environment, a user could instantiate new empty docking nodes to which to dock new components, and start placing widgets into them from a library of possible widgets.
  • Each node with an arrangement of widgets could be saved as an "app".
  • Having such an arrangement, a user could configure the widgets, by looking up APIs available as backends to them, as the sources for these widgets would be configurable, based on the data protocol defined by each widget.
    • For example, if it is a chat entry field widget, perhaps there are many apps with a public API that snaps to this widget.
    • A user would choose, which backends to make available for the specific widget within the docking node of choice.
      • For example, to emulate Trillian chat integrator, a user could choose all supported backend apps for chat entry field, which should auto-toggle based on the active chat window.

Having such a widgets system, front-end developers would not have to repeat their work: new widgets would need to be created only if there is no needed widget in existence. The development and publishing of each widget would have to be a bit like specifying a protocol of data, because the sub-types that the widget supports would be specific. Popular widgets would have many backends providers, and someone who wants to create a new app would not have to create front-end, because the front-end would be composed by user, not the developer.

What's more, we can imagine, that under such system, widgets could be dragged-and-dropped from one docking node to another. It would feel like dragging-and-dropping widgets from one app window to another app window.

The greatest benefit would probably be in the ability to quickly create new apps just by writing appropriate APIs, and without any front-end coding at all, meaning, more developer work would be available for systems engineering and data management, rather than front-end work.

Finally, when it comes to real implementation of this idea, these days there are many widget libraries written for developers (only in web development: Material, Bootstrap, Ant Design, BalmUI, Buefy, Chakra UI, Element, Framevuerk, Oruga, Tachyons, Tailwind CSS, Windi CSS, Vant, Vuesax, etc.), so lots of people are working on them. It would be quite straightforward to take some of the good ones, and make them snappy like legos to a docking point, via introducing a specialized browser extension, an Electron application, and an Android/iOS application, that packages such app-making environment.

However, the web-technologies based UIs tend to be slow, and the non-native apps in general seem to be slower, the next step could be to develop a completely native implementations by desktop environment developers, or perhaps integrated ("Write once. Deploy everywhere.") framework creators, like beeware.org. Let's see.

Inspired by Structured Internet Client.

Mindey,

(通知しない) (不必要) ログインしてください。

insert into widgets (type, name) values ("dropdown menu", "countries") I'd like to be able to define what widgets are available separately from their positioning on the screen. Positioning widgets is harder than deciding what widgets are available. We should separate these functions to make snappy widgets a reality.



    : Mindey
    :  -- 
    :  -- 
    

chronological,

[時系列]、同意します。ウィジェットのパレットやライブラリのようなものが必要です。これらのウィジェットはグローバルに利用可能である必要があるため、これらのウィジェットを実現するブラウザプラグインのようなものであり、次のような方法でアクセスできると思います。新しい空のブラウザタブでマウスを右クリックして、https://vueuikit.comなどのライブラリから新しいウィジェットをドロップします。

実際、デッドウィジェットスナップは、proto.io、uxpin.comなどのデザイナー向けのアプリプロトタイピングツール内ですでに実現されています。

ただし、これらはライブウィジェットではなく、エンドユーザー向けでもありません。

-粒度が高すぎる(エンドユーザーは通常、メニューを最初から作成したり、チャットウィンドウを最初から作成したりする時間がありません)。 -プロトコル定義ではありません(複雑なウィジェットは通常、複合データ型または相互作用プロトコル自体を定義します。たとえば、thisのようなglTFウィジェットはそれに提供できるデータ型を定義します同様に、チャットウィジェットには、独自の入力検証ツールと出力検証ツールがありますが、チャットウィンドウのような大きくて複雑なウィジェットは、電報、whatsapp、line、whatsappなどのアプリ間で繰り返されます。 -すべてに非常によく似たチャットウィンドウがあり、プロトコルを定義するチャットウィンドウウィジェットを作成すると、開発者はチャットアプリが物事を表示するために必要なすべてのことを考え、このウィジェットをドラッグアンドドロップするプログラマー以外のユーザーが多くのことを行えるようにします。何もプログラムする必要のない互換性のあるデータソース。

[chronological], I agree, we need like a pallete of widgets, or a library, and these widgets must be available globally, so it could be like a browser plugin that brings those widgets into existence, and, I suppose accessible via something like right-clicking of mouse in a new empty browser tab to drop a new widget from a library like https://vueuikit.com.

In fact, dead widget snapping is already realized within app prototyping tools for designers, like proto.io, uxpin.com, etc.

However, those are not live widgets, and not for end users:

  • too granular (end users generally won't have time to build a menu from scratch, or a chat window from scratch, etc.)
  • not protocol-defining (a complex widget usually defines a composite data type or even interaction protocol itself, for example, a glTF widget like this defines the data type that can be provided to it for it to work properly. Similarly, a chat widget may have its own input validator, and an output validator. However, those big and complex widgets like chat window, repeats across apps -- telegram, whatsapp, line, whatsapp, etc. -- all have very similar chat windows, and creating a protocol-defining chat window widget, the developers would think about all possible needs of chat apps to display things, so that the non-programmer user who drags and drops this widget can have lots of compatible data sources without having to program anything.

Visual Basicは、この点で業界をリードしており、非常に強力でした。しかし、私はほとんどのウィジェットをプログラムする方法を学びませんでした。ただのテーブル。

Visual Basic was ahead of the industry on this account and was very powerful. I never learned how to program most widgets though. Just tables.


// Visual Basic [...]

それはプログラマー向けであり、エンドユーザー向けではありませんでした。このアイデアの目的は、エンドユーザー向けのツールであり、アプリのUIは廃止されているため、将来的にはアプリに独自のUIは必要ありません。

// Visual Basic [...]

It was for programmers, not for end users. What this idea is about, is a tool for end users, obsoleting app UIs, so in the future apps don't need their own UIs.


これをooに実装しましょう

Let's implement this on oo



    :  -- 
    : Mindey
    :  -- 
    

Ruta,

私の付加的なGUIの概念では、GUIをデータフローシステムとして扱います。

電子メールクライアントには、フォルダのリストがあります。フォルダをクリックすると、そのフォルダの電子メールが電子メールリストに送られます。リスト内の電子メールをクリックすると、その電子メールが電子メールプレビューに流れます。

おそらく、ウィジェットは、相互の関係と、ウィジェットが相互に流れるデータによって説明できます。

In my additive GUIs concept I treat the GUI as a data flow system.

In an email client you have a list of folders. Clicking a folder flows emails of that folder to a email list. Clicking an email in the list flows the email into an email preview.

Perhaps widgets can be described by the relationships towards eachother and the data they flow between one another.


chronological,