{"id":13394397,"url":"https://github.com/paldepind/functional-frontend-architecture","last_synced_at":"2025-05-16T12:07:50.830Z","repository":{"id":32150147,"uuid":"35723130","full_name":"paldepind/functional-frontend-architecture","owner":"paldepind","description":"A functional frontend framework.","archived":false,"fork":false,"pushed_at":"2019-07-02T08:08:39.000Z","size":3197,"stargazers_count":1444,"open_issues_count":9,"forks_count":86,"subscribers_count":71,"default_branch":"master","last_synced_at":"2025-04-02T10:11:38.360Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paldepind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-16T12:37:50.000Z","updated_at":"2025-04-01T17:32:43.000Z","dependencies_parsed_at":"2022-09-08T19:01:51.051Z","dependency_job_id":null,"html_url":"https://github.com/paldepind/functional-frontend-architecture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paldepind%2Ffunctional-frontend-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paldepind%2Ffunctional-frontend-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paldepind%2Ffunctional-frontend-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paldepind%2Ffunctional-frontend-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paldepind","download_url":"https://codeload.github.com/paldepind/functional-frontend-architecture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027406,"owners_count":21035594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:18.071Z","updated_at":"2025-04-09T11:09:19.570Z","avatar_url":"https://github.com/paldepind.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others","Resources","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["[Elm](http://elm-lang.org)","Examples and Exercises"],"readme":"# functional-frontend-architecture\n\nThis repository is meant to document and explore the implementation of what is\nknown as \"the Elm architecture\". A simple functional architecture for building\nfrontend applications.\n\n# High level overview\n\nThe entire state is contained in a single data structure. Things can happen\nand the state should change accordingly. The number of things that can happen\nis described as a set of _actions_. Actions flow unidirectionally down the\napplication. Actions are handled by pure _update_ functions. Such a function\ntakes an action and a state and returns a new state. The state is handed to a\n_view_ function that returns a virtual DOM representation. A module is an\nencapsulated set of actions, an update function and a view function. Modules\ncan be nested inside other modules and modules can contain other modules. This\nmakes the architecture nestable and modular.\n\n# Features/goals/ideas\n\n* As few mutations in application code as possible. The vast majority of your\n  application can be completely pure.\n* Time changing values and interactions with the world is introduced in a\n  controlled manner through FRP.\n* Testing should be easy! And nothing is easier to test than pure side-effect\n  free functions.\n* State should be easily inspectable for debugging and serialization. Also,\n  time travel.\n* Minimalism and simplicity are center pieces in every used library.\n* Actions should be expressed as [union types](https://github.com/paldepind/union-type).\n* Everything should be modular and nestable.\n* [Simple live code editing](examples/hot-module-reloading) thanks to hot\n  module replacement.  \n\n# Documentation\n\n* [React-less Virtual DOM with Snabbdom: functions\n  everywhere!](https://medium.com/@yelouafi/react-less-virtual-dom-with-snabbdom-functions-everywhere-53b672cb2fe3)\n  – An article that introduces the virtual DOM library Snabbdom and step by\n  step implements the Elm architecture with it.\n\n# Examples\n\n* [Counters example without FRP](examples/counters-no-frp) – This is several\n  versions of a counters application. It starts out very simple and then\n  gradualy increases in complexity. This is implemented with Snabbdom, union-type and Ramda.\n* [Counters example with FRP](examples/counters) – This is similair to the above example but\n  the architecture is bootstraped with Flyd as and FRP library.\n* [Who to follow](examples/who-to-follow) – A small who to follow box using\n  GitHubs API. It can be compared with a [plain FRP version using\n  Flyd](https://github.com/paldepind/flyd/tree/master/examples/who-to-follow)\n  and [one using Rx](http://jsfiddle.net/staltz/8jFJH/48/).\n* [Zip codes](examples/zip-codes) – This is a translation of Elm's zip-codes\n  example, designed to show how to use asyncronous tasks, specifically http\n  requests. ES6 Promises are used here as stand-ins for Elm's Tasks.\n* [TodoMVC](examples/todo) – A TodoMVC implementation built with Snabbdom,\n  union-type, Ramda and Flyd.\n* [File Uploader](examples/file-uploader) – Implements a file-upload component,\n  i.e. it renders a list of chosen files, shows their upload progress, and\n  allows users to cancel uploads. It demonstrates asynchronous side effects\n  and a realistic stand-alone reuseable component or 'widget'.\n* [Hot module reloading](examples/hot-module-reloading) – Demonstrates how\n  simple it is to use webpack's hot module replacement to achieve live code\n  editing without browser refreshes.\n* [Modal](examples/modal) – Demonstrates a technique for implementing modals.\n* [Nesting](examples/nesting) – A simple application that demonstrates three\n  level nesting of components. This is intended to show how the action-routing\n  scales.\n\n# Libraries\n\nThe architecture is implementation independent. It can be implemented with\nvaried combinations of libraries. It only requires a virtual DOM library and a\nway to update JavaScript data structures without mutations. Having a nice\nrepresentation of actions is also useful.\n\n## Virtual DOM libraries\n\nThe view layer in the architecture consists of pure functions that takes part\nof the applications state and returns a description of it's view. Such a description\nwill typically be a virtual DOM representation that will later be rendered with a virtual\nDOM library. A number of options exists.\n\n* [Snabbdom](https://github.com/paldepind/snabbdom) – A small modular and\n  extensible virtual DOM library with splendid performance.\n* [virtual-dom](https://github.com/Matt-Esch/virtual-dom) – A popular virtual\n  DOM library.\n* [React](http://facebook.github.io/react/) – Mature and widely used. It\n  supports JSX which many people like. It is however a bulky library. It\n  supports stateful components which should not be used together with the\n  architecture.\n\n## Updating data structures\n\nWhen handling actions inside `update` functions it is necessary to update ones\nstate without mutating it. Libraries can provide a help with regards to this.\n\n* [Ramda](http://ramdajs.com/) – Ramda provides a huge amount of functions for\n  working with native JavaScript data structures in a purely functional way.\n\n## Representing actions\n\n* [union-type](https://github.com/paldepind/union-type)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaldepind%2Ffunctional-frontend-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaldepind%2Ffunctional-frontend-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaldepind%2Ffunctional-frontend-architecture/lists"}