4 ms·

I'm curious about your approach to making UIs. Are there any libraries you do use? Do you use anything to render your view or do you construct the nodes and in

I'm curious about your approach to making UIs. Are there any libraries you do use? Do you use anything to render your view or do you construct the nodes and insert them into the DOM directly? Is your centrally available object an instance of a class or is it a plain JavaScript object? Does it manage the state for all your UI or is it segmented in some way? How do you drive changes to your UI? Is there an imperative process that renders the UI when you know the data model has changed or is your state object an observable or something that your views subscribe to?

austincheney 6y ago
I use the ws library for web sockets. The state object is just a regular JavaScript object. I prefer to avoid classes as they increase complexity for almost no substantive benefit. Changes to the UI are handled as events whether those events are from user interactions, HTTP responses, or web socket data events. I update the DOM using old school DOM methods and some custom DOM methods I have written to do things the standards do not provide. This stuff that people cry tears of blood over is easy and very basic. I really think the bane of evil is addEventListener allowing multiple handlers for the same events which allows laziness and super increased complexity. What’s more challenging is writing test automation that executes in the browser and coordinates between browsers of different computers.
- richeyryan 6y ago
  Would the stuff you have on Github be a fair representation of your ideal way of writing a web UI?
  - austincheney 6y ago
    Try this: https://github.com/prettydiff/share-file-systems/tree/tests https://github.com/prettydiff/share-file-systems/tree/tests It is a complete GUI with full state management and the browser part of the application is very tiny.
    - richeyryan 6y ago
      I had a look through that alright. Do you code in that style in work?
      - austincheney 6y ago
        I have been away from my primary employer for about a year and they are HUGE with many different teams that do many different things in many different ways. I just try to gel to the team and not be disruptive.

austincheney 6y ago

I use the ws library for web sockets. The state object is just a regular JavaScript object. I prefer to avoid classes as they increase complexity for almost no substantive benefit. Changes to the UI are handled as events whether those events are from user interactions, HTTP responses, or web socket data events. I update the DOM using old school DOM methods and some custom DOM methods I have written to do things the standards do not provide. This stuff that people cry tears of blood over is easy and very basic. I really think the bane of evil is addEventListener allowing multiple handlers for the same events which allows laziness and super increased complexity. What’s more challenging is writing test automation that executes in the browser and coordinates between browsers of different computers.

richeyryan 6y ago
Would the stuff you have on Github be a fair representation of your ideal way of writing a web UI?
- austincheney 6y ago
  Try this: https://github.com/prettydiff/share-file-systems/tree/tests https://github.com/prettydiff/share-file-systems/tree/tests It is a complete GUI with full state management and the browser part of the application is very tiny.
  - richeyryan 6y ago
    I had a look through that alright. Do you code in that style in work?
    - austincheney 6y ago
      I have been away from my primary employer for about a year and they are HUGE with many different teams that do many different things in many different ways. I just try to gel to the team and not be disruptive.