Wissen und Zustand

Das Herz jeder modernen Website oder Browseranwendung (dieses SPA, dieses PWA, diese anderen drei Buchstaben) ist ihr Status oder Status.

Wir können willkürlich darüber streiten, was besser ist - React, Vue, Svelte, Angular, wir können weiterhin jQuery verwenden, aber in Wirklichkeit ist es nicht so wichtig. Dies ist der Teil unserer Anwendung, den wir sehen - seine "Muskeln" und "Haut". Aber die Art und Weise, wie Sie denken - mit welchen Begriffen Sie arbeiten, mit welcher Mechanik Sie sogar in Ihrem Kopf visualisieren, wie die Daten in Ihrer Anwendung "fließen" - all dies kommt von ihrem Skelett. Vom Staatsmanager.

Erinnern Sie sich, dass wir vor ein paar Jahren JavaScript satt hatten ? Jetzt sehe ich eine große Anzahl von Menschen, die die staatlichen Manager satt haben. Redux? Ja , ja und ja . RxJS? Auch . MobX? Wenn es so einfach ist - verdammt noch mal, warum hat es eine trap.html- Seite in der Dokumentation ?

Die Antwort "Warum ist es für viele so schwer" ist, aber zuerst müssen Sie das Problem genau formulieren.

Wahl einer Staatskrippe - wir wählen eine Denkweise. Es gibt jetzt viele Optionen, aber die beliebtesten Ansätze lassen sich in drei Gruppen einteilen:

• Flux / Redux-like : Ein globales Repository mit Aktionen und Reduzierungen. Es gibt eine ganze Menge von ihnen, aber ich würde erwähnen Redux , Effektor , Storeon , unausgesprochen und Reatom mich . Dies sind nicht „die Besten der Besten“, sondern die „Verschiedenesten“. Alle Lösungen aus der Liste enthalten etwas Einzigartiges und Ungewöhnliches, und Sie können verschiedene interessante Ideen daraus ziehen.

  
  

  Dieser Ansatz ist in erster Linie zwingend (Thuring-vollständig) und global .

  
  

• Observables und Rohre. Die heute beliebtesten Lösungen in dieser Gruppe sind RxJS und MobX . Von den weniger bekannten - Kefir , Bacon , CycleJS . Svelte fällt übrigens auch in diese Liste. Sie sind alle aus Sicht der Entwickler sehr unterschiedlich, aber aus grundlegender Sicht unterscheiden sie sich nur in einer Hinsicht: MobX, Svelte und andere können aus Sicht der Topologie durch das übliche Diagramm „Was löst was aus?“ Beschrieben werden, RxJS jedoch nicht, das Verknüpfungsdiagramm Darin können mehrdimensionale und „seltsame Schleifen“ auftretenÜbertragung von Observablen in Observablen. Dies macht es einerseits leistungsfähiger und andererseits komplexer. Eine ähnliche Geschichte war mit dem Drehbuch. Sie fanden heraus, dass sein Typensystem Thuring-vollständig ist. Das einzige, was folgte, war, dass es beim Überprüfungsschritt einfrieren konnte, und sie fügten der Arbeit ein Zeitlimit hinzu.

  
  

  Das mag seltsam klingen, aber insgesamt ist diese Klasse von Lösungen eher lokal oder ad-hoc und deklarativ - ohne jedoch die Fähigkeit zur Verwendung beliebiger Logik einzuschränken.

  
  

  , - , , , , “” . , 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 , ( ), . , . .

Jede Interaktion zwischen den beiden Welten sollte explizit sein und direkt im Code unterschieden werden, damit sie während der Codeüberprüfung nicht zufällig und vor allem im Benutzerland und nicht in Bibliotheken erfolgt.

Sie sollten keine spezifische Lösungen wählen, aber für mein neues Projekt würde ich GraphQL + Apollo zu speichern verwenden Wissen und für Staatsverwaltung - xState + RxJS, zum Glück, sie sind miteinander befreundet .

Hör auf, dir Sorgen zu machen, alles in eine Lösung zu packen. Du brauchst es nicht.