All Projects → joshburgess → Inferno Most Fp Demo

joshburgess / Inferno Most Fp Demo

A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Inferno Most Fp Demo

Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (+204.44%)
Mutual labels:  reactive, rxjs, reactive-programming, functional-programming, functional
Toy Rx
A tiny implementation of RxJS that actually works, for learning
Stars: ✭ 290 (+544.44%)
Mutual labels:  reactive, rxjs, reactive-programming, observables
Bulb
A reactive programming library for JavaScript.
Stars: ✭ 84 (+86.67%)
Mutual labels:  reactive, reactive-programming, functional-programming, functional
Awesome Rxjs
A collection of awesome RxJS resources
Stars: ✭ 314 (+597.78%)
Mutual labels:  reactive, rxjs, reactive-programming, observables
Lda Topic Modeling
A PureScript, browser-based implementation of LDA topic modeling.
Stars: ✭ 91 (+102.22%)
Mutual labels:  reactive, reactive-programming, functional-programming
Platform
Reactive libraries for Angular
Stars: ✭ 7,020 (+15500%)
Mutual labels:  reactive, rxjs, observables
Ayanami
🍭 A better way to react with state
Stars: ✭ 129 (+186.67%)
Mutual labels:  reactive, rxjs, reactive-programming
Marble
Marble.js - functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS.
Stars: ✭ 1,947 (+4226.67%)
Mutual labels:  reactive, rxjs, functional-programming
Ramtuary
Ramda + Ramda Fantasy + Sanctuary REPL 🌿
Stars: ✭ 72 (+60%)
Mutual labels:  ramda, functional-programming, functional
Beicon
Reactive Streams for ClojureScript
Stars: ✭ 133 (+195.56%)
Mutual labels:  reactive, rxjs, reactive-programming
Awesome Reactive Programming
A repository for sharing all the resources available on Reactive Programming and Reactive Systems
Stars: ✭ 163 (+262.22%)
Mutual labels:  reactive, rxjs, reactive-programming
Karet
Karet is a library that allows you to embed Kefir observables into React VDOM
Stars: ✭ 81 (+80%)
Mutual labels:  reactive, observables, jsx
Cyclejs.cn
The Cycle.js Chinese documentation website.
Stars: ✭ 132 (+193.33%)
Mutual labels:  rxjs, reactive-programming, functional-programming
Cyclejs
A functional and reactive JavaScript framework for predictable code
Stars: ✭ 9,996 (+22113.33%)
Mutual labels:  rxjs, reactive-programming, functional-programming
servable
"simple" observable implementation based off RxJS & kefir Docs
Stars: ✭ 14 (-68.89%)
Mutual labels:  reactive, reactive-programming, observables
Corsair
Corsair using RxJS, Immutable.js and WebGL/three.js
Stars: ✭ 36 (-20%)
Mutual labels:  rxjs, reactive-programming, functional-programming
Fpgo
Monad, Functional Programming features for Golang
Stars: ✭ 165 (+266.67%)
Mutual labels:  reactive, reactive-programming, functional-programming
Learn Rxjs
Clear examples, explanations, and resources for RxJS
Stars: ✭ 3,475 (+7622.22%)
Mutual labels:  rxjs, reactive-programming, observables
Refract
Harness the power of reactive programming to supercharge your components
Stars: ✭ 791 (+1657.78%)
Mutual labels:  rxjs, reactive-programming, inferno
Proppy
Functional props composition for UI components (React.js & Vue.js)
Stars: ✭ 921 (+1946.67%)
Mutual labels:  rxjs, functional-programming

inferno-most-fp-demo

A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques

Instructions:

git clone https://github.com/joshburgess/inferno-most-fp-demo
cd inferno-most-fp-demo
yarn install
yarn start

Notes:

Four Separate Branches

This repository features four separate branches that we'll look at in the following order:

  1. javascript: This branch uses a plain JS object to store the global app state. This is the default branch you will be on when first cloning the repository. There is no master branch.

  2. mori: This branch uses a mori hashMap (an immutable & persistent data structure) to store the global app state. mori is similar to immutable-js, but features a more functional API & better performance.

  3. event-streams: This branch is a continuation of the mori branch demonstrating how the architecture could be rewritten to use event streams for handling events rather than directly assigning handlers to the components. This helps to further decouple events from component rendering and opens up new possibilities via composition & transformation of streams.

  4. fp-utils: This branch is a continuation of the event-streams branch showing how we could write our own functional utilities from scratch and replace all of the ramda functions we were using in the previous branches. This is just meant as a learning exercise to help provide a better understanding of how these functions work.

You are currently viewing the javascript branch.

JSX & Hyperscript (hyperscript-helpers)

Each branch contains both a JSX version and a hyperscript version of each component. The hyperscript components specifically use hyperscript-helpers, which offers a concise syntax reminiscent of elm-html, purescript-halogen's HTML module, Fable's HTML module, etc., which I happen to like at least as much as JSX. I'm just trying to show that using or not using JSX shouldn't be a deal breaker. It's quite concise, clean, and easy to understand using either option.

Strict Linting

This project makes heavy use of ESLint to enforce a strict, functional style. The bulk of the rules come from eslint-config-standard-pure-fp, which is just a combination of eslint-config-standard & eslint-config-cleanjs.

Functional Tools & Techniques

ramda is used to offer functions like compose, curry, & partial. Techniques like functional composition, currying, & partial application are extremely helpful for creating reusable functions & clean, highly readable code. lodash/fp can be used as an alternative. Although I am using ramda, using either of these libraries will give you a huge assortment of very useful functional tools to work with. These are the types of utilities you would find in the standard libraries of purely functional programming languages.

NOTE: Throughout the code, while using compose, curry, & partial, I am making extra, unnecessary assignments with descriptive naming to try to help explain how these functions work for people who are unfamiliar with the concepts. Normally, you probably wouldn't use so many intermediate variables, and you might even choose to write in a Pointfree style.

How To Take This Idea Further

It is important to note that the architecture design demonstrated here was intended for users who are familiar with working with React & Redux, but who may not be familiar with reactive programming (RxJS, Most, Observables, Cycle.js, etc.), and it's just meant to get them thinking about new ways to go about working with unidirectional UI architectures.

A more evolved, less Redux-like, & more reactive version of this demo might include doing the following:

  • Stop assigning event handlers via Inferno (or React) component props. Instead, use most's fromEvent function to create declarative data flow pipelines. fromEvent takes in an event & a CSS selector and returns a stream of events that you can filter, combine with other streams, & transform in various ways.

  • Stop using lodash's debounce function to perform rate limiting. Instead, use most's debounce function, which operates on Observable streams rather than functions, keeping everything consistently using the reactive paradigm.

Note: The above changes have now been made. See the event-streams branch.

  • Stop using most-subject & the dispatch function. Using Subjects to dispatch Actions is an imperative construct, and we'd like to be as declarative and reactive as possible.

  • Start using Flow or TypeScript in order to reap the benefits of static type checking/analysis. Keep in mind that, although TypeScript seems to currently have the edge over Flow in terms of popularity & community activity, going with TypeScript means you will no longer be able to use ESLint, and TSLint is still missing a lot of rules & plugins available in the ESLint ecosystem. This is a downside of TypeScript being both a type checker and a compiler. It replaces a large amount of the tool chain, whereas Flow only adds type checking to standard JS semantics, allowing Flow users to continue using ESLint & Babel. This is a trade-off that might be worth it, but it's important to know that a trade-off exists when making that decision.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].