How to avoid state (or do it in a sane way) examples

[badlydrawnrob]

TL; DR: I dislike managing state and it takes way too long to code, but the following is a ChatGPT overview of state and common javascript libraries. I dislike JavaScript too, but currently getting my toes wet with Elm lang. Trying to understand why people subject themselves to (or relieve themselves from) developer pain 😩

• How best to introduce functional to complete beginners:
  • Rather than than a long article, or the wrong book to start with;
  • To learn how to think, when thinking involves heavy maths and complex terminology;¹
  • Or, to make an introduction as simple as you possibly can, without the complex terminology.
• On using the best tool for the job at hand (and not being overly pedantic):
  • Backend templates (Jinja, Twig) –vs– frontend (React, Vue, ...)
  • A saner way to use Javascript? (Elm, HTMX)
  • Avoiding it completely — sort of (Markdown, 11ty, Pandoc?)
• On different paradigms (methods) such as Elm, Typescript and Purescript:
  • Trying to work in a component style with Elm will cause you pain.

Starting out in frontend these days is a far cry from when I started back in the early 2000s. I started with Dreamweaver and image tables, with a touch of CSS! No flexbox, very little Javascript and in general, far easier to understand.² Starting out as a young gun in the modern frontend landscape can be rough.

Perhaps I'm just old and getting cranky, and perhaps development is hard full stop. As mentioned here, maybe coming from a design background my younger brain just didn't have time to wire itself properly for programming.

Having said that, modern design is quite the feat these days too, I nearly cried when I looked at Material Design docs for the first time — far too much information! Human-centred design across a variety of devices is just a different game than when I was a young design student, starting out with print.

• Make your Design Systems, UX, and UI simple and the state becomes easier, no?

Anywho, I'll try to find a few good examples of managing state for beginners to intermediate. Feel free to add your own!

---

State Management in Frontend Development: A Comprehensive Overview

1. Introduction to State Management:
Frontend development often involves managing the state of an application, which refers to the data that defines the current condition of the user interface and the behavior of the application.

2. Challenges in State Management:
Managing state in frontend applications can be challenging due to the need for synchronization, the potential for state inconsistency, and the increased complexity as the application grows.

3. JavaScript Frameworks and Libraries:
Various JavaScript frameworks and libraries offer different approaches to state management. Popular ones include React, Vue.js, Angular, and state management libraries like Redux and Vuex.

4. Component-Based Architecture:
Many modern frontend frameworks adopt a component-based architecture, where components encapsulate their state, making it easier to reason about and maintain.

5. Local State vs. Global State:
Developers often face the decision of whether to store state locally within a component or use a global state management solution. The choice depends on the application's complexity and requirements.

6. Advantages of Effective State Management:
Well-managed state contributes to a more predictable and maintainable codebase. It facilitates smoother user interactions, reduces bugs, and enhances the overall user experience.

7. Common State Management Patterns:
Patterns such as lifting state up, prop drilling, and using context API (or similar features in other frameworks) are common strategies employed by developers to manage state effectively.

8. State Management Libraries:
Specialized state management libraries like Redux gained popularity for their ability to manage complex state in a predictable manner. However, some developers find them verbose and opt for simpler solutions.

9. The Evolution of Frontend Tools:
The frontend development landscape continually evolves, with new tools and approaches emerging. Server-side solutions, such as server-side rendering (SSR) and static site generators, impact how developers handle state.

10. Conclusion:
While state management poses challenges, the frontend development community continually explores innovative solutions. Striking a balance between simplicity and robustness remains a key consideration in effectively managing state in modern web applications.

This summary aims to provide a nuanced perspective on state management, acknowledging both its challenges and the evolving strategies employed by developers.

Footnotes

1. The Structure and Interpretation of Computer Systems is a difficult book. It should be reserved for BSc, or MA, or maybe never. How To Design Programs is a much easier book. What about those who want to learn it in their spare time, and don't have access to a mentor, teacher, or peer-students? I remember someone saying (although I've lost the source) that students "don't know which way is up" when they're starting to program. I still feel like that sometimes! ↩

2. 👓 Without being too rose-tinted, there were bugs. And Internet Explorer. Yikes. But you could just about get by with plain old HTML and CSS as a frontend guy. ↩