4 ms·

Let's write a toy UI library

110 points by birdculture 11mo ago

self_awareness 11mo ago
It looks like WinAPI Window Management via CreateWindow / SetWindowText / SendMessage. https://gist.github.com/a3f/22d0d2688b56e79865f8 https://gist.github.com/a3f/22d0d2688b56e79865f8
_f9cu 11mo ago
is it an application builder?
formerly_proven 11mo ago
If you don't keep it as a toy, it can get out of hand quickly. For example, here's the partial implementation of QWidget, almost 500k of code: https://github.com/qt/qtbase/blob/dev/src/widgets/kernel/qwidget.cpp https://github.com/qt/qtbase/blob/dev/src/widgets/kernel/qwi...
- cosmic_cheese 11mo ago
  I haven't yet written a UI library so it's not something I can state confidently, but based on adjacent work I've done, I imagine that a significant deal of complexity can be avoided by somewhat paradoxically embracing complexity early on and designing for all the eventualities. UI frameworks are one place where outside of toy projects, YAGNI doesn't really apply as much, and so things like focus systems and accessibility affordances should be factored in from day one. If you go in with the attitude of writing something "elegant", you're going to end up bolting these things on after the fact and writing contorted code to make it all fit together. It's like finding out that you need a skyscraper after building foundations and framing for a cottage.
- badsectoracula 11mo ago
  FWIW it doesn't need to become 500k lines of code... or 13k in QWidget's case :-P. The file is large because it contains the full documentation in addition to the code but also in Qt is a QWidget can also be a (toplevel) window so it needs to support everything a window may want to support, including stuff like setting/getting title, maximize/minimize/etc events, etc. You can avoid this complexity in the base widget class by placing those elsewhere, e.g. FLTK's base widget class[0] is much smaller at around 500 lines of code (+ documentation comments). [0] https://github.com/fltk/fltk/blob/master/src/Fl_Widget.cxx https://github.com/fltk/fltk/blob/master/src/Fl_Widget.cxx
Mikhail_Edoshin 11mo ago
Seems to be exactly what I was looking for. Somehow it's not that easy to find a good explanation of these techniques. I tried old graphic programming books, but their sections on GUI are tiny.
- whartung 11mo ago
  Read the original Inside Macintosh, since that's about as fundamental and basic as it gets. See how they did the API for the Event, Window, and Control Mangers.
  - Mikhail_Edoshin 11mo ago
    Thanks! I didn't think of that.
ctoth 11mo ago
Which of these 24 parts cover accessibility? Ah, this one: > That said, you could add a description string to the common element header that screen readers could use, but accessibility concerns are out of scope for this toy UI library. I love it when tutorials teach people to ignore people like me. Am I being harsh? Well where's the tutorial that teaches people how to do it properly? Where do people actually learn the right way if not here?
- kvuj 11mo ago
  I think you're being disingenuous. The author could have made this tutorial for the 90% of people that do not have these concerns. Time isn't free and projects people work on in their spare time shouldn't have these snarky comments in response. > Am I being harsh? Well where's the tutorial that teaches people how to do it properly? Where do people actually learn the right way if not here? I would love to read your blog post on how to do so! After all, since you seem to imply that time is free for everyone, you shouldn't have any problem making that blog post.
  - ctoth 11mo ago
    The math: There are N tutorials written per year. There are M accessibility experts willing and able to write tutorials. N >> M by orders of magnitude. The ask is for M people to produce N parallel accessible versions of everything, forever, as a prerequisite for being allowed to point out the gap exists.
    - poly2it 11mo ago
      This doesn't make sense. Why do M people need to write N accessibility tutorials to point out the gap in accessibility support? The same isn't true for localisation for example.
  - robin_reala 11mo ago
    Leaving accessibility out of an UI library tutorial is like leaving security out of an API tutorial. It’s perfectly possible to build something that’s probably not a problem if you’re building a toy application, but if you haven’t done it right from the start it will absolutely bite you hard, and it’ll broadly be quicker to start over from scratch than try to fix the mess.
deleted 11mo ago
[deleted]
canyp 11mo ago
Have not read all of it but it looks great. Also like the minimalistic style of the website.

110 points by birdculture 11mo ago

It looks like WinAPI Window Management via CreateWindow / SetWindowText / SendMessage. https://gist.github.com/a3f/22d0d2688b56e79865f8 https://gist.github.com/a3f/22d0d2688b56e79865f8

_f9cu 11mo ago

is it an application builder?

formerly_proven 11mo ago

If you don't keep it as a toy, it can get out of hand quickly. For example, here's the partial implementation of QWidget, almost 500k of code: https://github.com/qt/qtbase/blob/dev/src/widgets/kernel/qwidget.cpp https://github.com/qt/qtbase/blob/dev/src/widgets/kernel/qwi...

cosmic_cheese 11mo ago
I haven't yet written a UI library so it's not something I can state confidently, but based on adjacent work I've done, I imagine that a significant deal of complexity can be avoided by somewhat paradoxically embracing complexity early on and designing for all the eventualities. UI frameworks are one place where outside of toy projects, YAGNI doesn't really apply as much, and so things like focus systems and accessibility affordances should be factored in from day one. If you go in with the attitude of writing something "elegant", you're going to end up bolting these things on after the fact and writing contorted code to make it all fit together. It's like finding out that you need a skyscraper after building foundations and framing for a cottage.
badsectoracula 11mo ago
FWIW it doesn't need to become 500k lines of code... or 13k in QWidget's case :-P. The file is large because it contains the full documentation in addition to the code but also in Qt is a QWidget can also be a (toplevel) window so it needs to support everything a window may want to support, including stuff like setting/getting title, maximize/minimize/etc events, etc. You can avoid this complexity in the base widget class by placing those elsewhere, e.g. FLTK's base widget class[0] is much smaller at around 500 lines of code (+ documentation comments). [0] https://github.com/fltk/fltk/blob/master/src/Fl_Widget.cxx https://github.com/fltk/fltk/blob/master/src/Fl_Widget.cxx

Mikhail_Edoshin 11mo ago

Seems to be exactly what I was looking for. Somehow it's not that easy to find a good explanation of these techniques. I tried old graphic programming books, but their sections on GUI are tiny.

whartung 11mo ago
Read the original Inside Macintosh, since that's about as fundamental and basic as it gets. See how they did the API for the Event, Window, and Control Mangers.
- Mikhail_Edoshin 11mo ago
  Thanks! I didn't think of that.

ctoth 11mo ago

Which of these 24 parts cover accessibility? Ah, this one: > That said, you could add a description string to the common element header that screen readers could use, but accessibility concerns are out of scope for this toy UI library. I love it when tutorials teach people to ignore people like me. Am I being harsh? Well where's the tutorial that teaches people how to do it properly? Where do people actually learn the right way if not here?

kvuj 11mo ago
I think you're being disingenuous. The author could have made this tutorial for the 90% of people that do not have these concerns. Time isn't free and projects people work on in their spare time shouldn't have these snarky comments in response. > Am I being harsh? Well where's the tutorial that teaches people how to do it properly? Where do people actually learn the right way if not here? I would love to read your blog post on how to do so! After all, since you seem to imply that time is free for everyone, you shouldn't have any problem making that blog post.
- ctoth 11mo ago
  The math: There are N tutorials written per year. There are M accessibility experts willing and able to write tutorials. N >> M by orders of magnitude. The ask is for M people to produce N parallel accessible versions of everything, forever, as a prerequisite for being allowed to point out the gap exists.
  - poly2it 11mo ago
    This doesn't make sense. Why do M people need to write N accessibility tutorials to point out the gap in accessibility support? The same isn't true for localisation for example.
- robin_reala 11mo ago
  Leaving accessibility out of an UI library tutorial is like leaving security out of an API tutorial. It’s perfectly possible to build something that’s probably not a problem if you’re building a toy application, but if you haven’t done it right from the start it will absolutely bite you hard, and it’ll broadly be quicker to start over from scratch than try to fix the mess.

deleted 11mo ago

[deleted]

canyp 11mo ago

Have not read all of it but it looks great. Also like the minimalistic style of the website.