Connaissance et condition

Le cœur de tout site Web ou application de navigateur moderne (ce SPA, cette PWA, ces trois autres lettres) est son État ou son État.

Nous pouvons discuter arbitrairement de ce qui est le mieux - React, Vue, Svelte, Angular, nous pouvons continuer à utiliser jQuery, mais en réalité ce n'est pas si important. C'est la partie de notre application que nous voyons - ses «muscles» et sa «peau». Mais la façon dont vous pensez - avec quels termes vous utilisez, quelle mécanique vous utilisez pour même visualiser dans votre tête comment les données "circulent" dans votre application - tout cela vient de son squelette. Du directeur de l'État.

Rappelez-vous, il y a quelques années, nous étions fatigués de JavaScript ? Maintenant, je vois un grand nombre de personnes se lasser des chefs d'État. Redux? Oui , oui et oui . RxJS? Trop . MobX? Si c'est si simple - bon sang, pourquoi a-t-il une page trap.html dans la documentation ?

La réponse «pourquoi est-ce si difficile pour beaucoup» est, mais vous devez d'abord formuler avec précision le problème.

Choisir un chef d'État - nous choisissons une façon de penser. Il existe maintenant de nombreuses options, mais les approches les plus populaires se répartissent en 3 groupes:

• Flux / Redux-like : un référentiel global avec des actions et des réducteurs. Il y en a beaucoup, mais je mentionnerais Redux , Effector , Storeon , Unstated et Reatom moi-même . Ce ne sont pas «les meilleurs des meilleurs», mais plutôt les «plus diversifiés». Toutes les solutions de la liste comportent quelque chose d'unique et d'inhabituel, et vous pouvez en tirer diverses idées intéressantes.

  
  

  Cette approche est avant tout impérative (Thuring-complete) et globale .

  
  

• Observables et tuyaux. Les solutions les plus populaires aujourd'hui dans ce groupe sont RxJS et MobX . Des moins connus - Kéfir , Bacon , CycleJS . Svelte , d'ailleurs, tombe également dans cette liste. Ils sont tous très différents en termes d'expérience de développement, mais d'un point de vue fondamental, ils ne diffèrent que par une chose: MobX, Svelte et d'autres peuvent être décrits en termes de topologie par le graphique habituel «ce qui déclenche quoi», mais RxJS ne l'est pas, son graphique est des boucles multidimensionnelles et «étranges» peuvent y apparaîtretransmettre des observables en observables. Cela le rend plus puissant d'une part, et plus complexe de l'autre. Une histoire similaire était avec le script. Ils ont découvert que son système de caractères est Thuring-complete. La seule chose qui a suivi, c'est qu'il pouvait geler à l'étape de vérification, et ils ont ajouté une limite de temps au travail.

  
  

  Cela peut sembler plutôt étrange, mais en général, cette classe de solutions a tendance à être locale, ou ad hoc et déclarative - mais sans couper la possibilité d'utiliser une logique arbitraire.

  
  

  , - , , , , “” . , Lodash, Ramda, io-ts. - LISP JS, — -- “”, , .

  
  

• GraphQL . Apollo Relay — , . Falcor — GraphQL Netflix, GunDB PouchDB. , Redux, MobX, RxJS . “” GraphQL. , . 100% ( )

  
  

, . — , ; , - . .

: “” “” 100% : redux- , , RxJS — . JS , , .

: - ID ID, — . (), — .

. - . , , , "state of js” .

.

.

, , . , — , . , .

— , , . , , — GraphQL . , , .

, - .

SPA , : , , SQL- ; .

Rails, , .

, , ( ) — API , .

:

• : . , , , .
• : statechart. — . — observables (RxJava, RxRuby, RxSwift, RxBrainfuck — ) . — - , , - .

. , , . — . , , , , — . , , - . — , .

— - , . - , . — , , , .

. , , , corrupted. : , DTO. . — LISP-. : , .

— . , — , , , — - , . , , . : - — , . , , CRDT-. — .

:

.

— , , — , , . , . , , . await getBlogPost(id), : @gql("blogPost(id){...}") class extends Component, — , .

. . ImmutableJS, Object.freeze, readonly Record & Tuple stage 1 proposal. . - shared worker.

, — , . XState , ( ), . , . .

Toute interaction entre les deux mondes doit être explicite, directement distinguée dans le code, afin de ne pas se produire par hasard lors de la révision du code, et surtout - de se produire dans l'espace utilisateur et non dans les bibliothèques.

Vous ne devriez pas choisir des solutions spécifiques, mais pour mon nouveau projet, j'utiliserais GraphQL + Apollo pour stocker des connaissances et pour la gestion des états - Xstate + RxJS, heureusement, ils sont amis entre eux .

Arrêtez de vous soucier de tout ranger dans une seule solution. Tu n'en a pas besoin.