526互联

Web前端编程范式

发布时间 2023-09-05 15:46:51作者: fosonmeng

Event-Driven Programming

  • Comparison Between Different Observer Pattern Implementations: The comparison below is just about the basic features of subscribing to an event type, dispatching and removing an event listener.

  • Event Emitter, Pub Sub or Deferred Promises: In this post Pete Otaqui explores a little about how each pattern works with (very) basic implementations and looks at the reasons why you might choose one over another.

  • Implementations
    Libraries, frameworks and tools that use Event-Driven Programming paradigm.
    • Bacon.js: A small functional reactive programming lib for JavaScript. Turns your event spaghetti into clean and declarative feng shui bacon, by switching from imperative to functional.
    • Flight: An event-driven web framework, from Twitter.
    • Mediator.js: Mediator is a simple class that allows you to register, unregister, and call subscriber methods to help event-based, asyncronous programming.
    • Postal.js: Postal.js takes the familiar "eventing-style" paradigm and extends it by providing "broker" and subscriber implementations
    • Radio.js: Radio.js is a small dependency-free publish/subscribe JavaScript library. Use it to implement the observer pattern in your code to help decouple your application architecture for greater maintainability.
    • js-signals: Custom Event/Messaging system for JavaScript.
    • pubsub.js: A tiny (~600 bytes when minified, ~300 bytes when gzip'd) and robust pubsub implementation.

Functional Programming 函数式编程

underscore
lodash
sugar
lazy.js
ramda
mout
mesh.js

  • A Gentle Introduction to Functional JavaScript
    A 3 part series, by Derick Bailey featuring Chet Harrison, about functional programming with many examples in JavaScript.

  • A Million Ways to Fold in JS: Brian Lonsdorf provides many functional alternatives to loops in this video.

  • Adventures in Functional Programming: A talk by Jim Weirich, demonstrating how to use functional programming and lambda calculus to derive Y combinator.

  • Allong.es: allong.es is a JavaScript library based on the function combinator and decorator recipes introduced in the book JavaScript Allongé.

  • Barely Functional: Tiny (2.7kb) functional programming library using native es5/6 operations.

  • Basic Lazy Evaluation and Memoization in JavaScript: Memoization is a way of optimizing code so that it will return cached results for the same inputs.

  • Bilby.js: A functional library based on category theory with immutable multimethods, functional data structures, functional operator overloading, automated specification testing.

  • Composability: from Callbacks to Categories in ES6: The author borrows some ideas from functional languages to explore a different approach for addressing the callback hell.

  • Curry or Partial Application?: Eric Elliott describes the difference between partial application and curry.

  • Daggy: Library for creating tagged constructors with catamorphism.

  • Date FP: Functional programming date manipulation library.

  • Debugging Functional: This post will demonstrate a simple solution that can go a long way to enhance the debugging experience in functional JavaScript applications.

  • Deterministic: A weekly digest of interesting news and articles covering functional programming for the web, especially on the front end.

  • Example Projects
    Open source projects which use functional programming, preferably point-free and side-effect-free.

  • FP DOM: A collection of functions to favor functional programming in a DOM context.

  • Fantasy Combinators: Combinators which are used for fantasy-land projects.

  • Fantasy Land
    Specification for interoperability of common algebraic structures in JavaScript.

  • Fantasy Lenses: Composable, immutable getters and setters.

  • Functional Concepts For JavaScript Developers: Currying: Andrew Robbins talks about what currying is and why it's useful.

  • Functional Core Reactive Shell: Giovanni Lodi makes an overview of different architecture meta-patterns and describes his current findings about functional programming and observables as a way to control side effects.

  • Functional Frontend Architecture: This repository is meant to document and explore the implementation of what is known as "the Elm architecture". A simple functional architecture for building frontend applications.

  • Functional JavaScript Mini Book: Jichao Ouyang gives and introduction to functional programming with JavaScript and describes some Typeclasses like Functor and Monad.

  • Functional Javascript Workshop: The goal of this workshop is to create realistic problems that can be solved using terse, vanilla, idiomatic JavaScript.

  • Functional Principles In React: Jessica Kerr talks about four functional principles: Composition, Declarative Style, Isolation and Flow Of Data, and their usage in React.

  • Functional Programming Jargon: Jargon from the functional programming world in simple terms.

  • Functional Programming for JavaScript People: Chet Corcos explains different features of functional programming like composition, currying, lazy evaluation, referential transparency and compares Clojure with Haskell.

  • Functional Refactoring in JavaScript: In this article Victor Savkin shows how to apply functional thinking when refactoring JavaScript code. He does that by taking a simple function and transforming it into a more extendable one, which has no mutable state, and no if statements.

  • Functional.js: Functional.js is a functional JavaScript library. It facilitates currying and point-free / tacit programming and this methodology has been adhered to from the ground up.

  • Functionize: A collection of functions which aids in making non-functional libraries functional.

  • Futures and Monoids: Yassine Elouafi explains the nature of Monoids using Futures, Numbers and Strings as examples.

  • Hey Underscore, You're Doing It Wrong!: In this talk Brian Lonsdorf gently takes a shot at underscore.js for not thinking about currying and partial function application in its library design.

  • Immutability, Interactivity & JavaScript: We'll dive in and see how trees of JavaScript arrays can permit building efficient immutable collections. Then we'll see how embracing immutable values dramatically simplifies some classic hard problems in client side programming including but not limited to undo, error playback, and online/offline synchronization.

  • Immutable Sequence.js: High performance implementation of Immutable Sequence in JavaScript, based on Finger Tree.

  • Immutable.js: Immutable persistent data collections for Javascript which increase efficiency and simplicity.

  • JSAir - Functional and Immutable Design Patterns in JavaScript: An episode of JavaScript Air about "the how and why of functional programming and immutable design patterns in JavaScript" with Dab Abramov and Brian Lonsdorf as guests.

  • JavaScript and Type Thinking: Yassine Elouafi introduces Algebraic Data Types with an example of a simple and a recursive type.

  • Javascript Combinators by Reginald Braithwaite: In this talk, we'll explore functions that consume and return functions, and see how they can be used to build expressive programs that hew closely to JavaScript's natural style.

  • Lamda.js: This library takes all the methods on instances of strings, arrays, objects, numbers, and regexp's and turns them into functions that can be used in a pointfree way.

  • Lenses Quick n’ Dirty: A video by Brian Lonsdorf that introduces lenses.

  • Lenses and Virtual DOM Support Open Closed: Hardy Jones explains how Lenses work using a simple example of working with Virtual DOM.

  • Lenses.js: Composable kmett style lenses.

  • Lodash/fp: The lodash/fp module is an instance of lodash with its methods wrapped to produce immutable auto-curried iteratee-first data-last methods.

  • Making your JavaScript Pure: Jack Franklin compares pure and impure functions and describes how to leverage functional programming principles in JavaScript.

  • Monads
    Composable computation descriptions. The essence of monad is thus separation of composition timeline from the composed computation's execution timeline, as well as the ability of computation to implicitly carry extra data.
    - Collections of Monads
    Libraries of monad implementations.

    • Akh: Akh includes a basic set of common monad transformers, along with monads derived from these transformers. Akh structures implement the Fantasy Land specification.

    • Folktale: Folktale is a suite of libraries for generic functional programming in JavaScript that allows you to write elegant modular applications with fewer bugs, and more reuse.

    • Monet.js: Monet is a tool bag that assists Functional Programming by providing a rich set of Monads and other useful functions.

    • Continuation Monad
      Represents computations in continuation-passing style (CPS). In continuation-passing style function result is not returned, but instead is passed to another function, received as a parameter (continuation).
    • Either Monad
      The Either type represents values with two possibilities: a value of type Either a b is either Left a or Right b. It is often used for error handling.
    • Free Monad
      A free monad satisfies all the Monad laws, but does not do any computation. It just builds up a nested series of contexts. The user who creates such a free monadic value is responsible for doing something with those nested contexts.
    • Futures
      Futures represent the value arising from the success or failure of an asynchronous operation (I/O).
      • Fluture: The debuggable Fantasy Land Future library.
      • Folktale Task: A structure for time-dependent values, providing explicit effects for delayed computations, latency, etc.
      • From Callback to Future -> Functor -> Monad: Yassine Elouafi goes through a simple implementation of Futures and compares them to Promises.
      • Future IO: A fantasy-land compliant monadic IO library for Node.js.
      • Futurizer: Turn callback-style functions or promises into futures!
    • Introduction
      Introductory materials about monads.
    • Maybe Monad
      Using Maybe is a good way to deal with errors or exceptional cases without resorting to drastic measures such as error. It is a simple kind of error monad, where all errors are represented by Nothing. A richer error monad can be built using the Either type.
    • Reader Monad
      Represents a computation, which can read values from a shared environment, pass values from function to function, and execute sub-computations in a modified environment.
    • Transformers
      Special types that allow us to roll two monads into a single one that shares the behavior of both.
      • Akh: Akh includes a basic set of common monad transformers, along with monads derived from these transformers. Akh structures implement the Fantasy Land specification.
      • Fantasy ArrayT: Monad transformer for JavaScript Arrays.
      • Monad Transformers: Monad transformers are tricky, they require an excessive amount of type juggling. One of the aims of this package is to reduce the amount of wrapping and unwrapping needed for making a new transformer and to provide an easy way to define and combine transformers.
      • Monad Transformers Library: Practical monad transformers for JS.
    • Validation Monad
      A disjunction that is appropriate for validating inputs and aggregating failures.

  • Mori: A library for using ClojureScript's persistent data structures and supporting API from the comfort of vanilla JavaScript.

  • Mostly Adequate Guide to Functional Programming: A book by Brian Lonsdorf that introduces algebraic functional programming in JavaScript.

  • Nanoscope: Nanoscope is a javascript library designed to make complex transformations of data much easier. It is a built on the idea of a functional Lens - a construct that enables focusing on sub-parts of data structures to get and modify.

  • Pointfree Fantasy: Point-free wrappers for fantasy-land. Functions are curried using lodash's curry function, and receive their data last. Gives us aliases with our familar haskell names as well.

  • Pointfree Javascript: In this post Lucas Reis presents what is called pointfree style programming and goes through some common scenarios to demonstrate its benefits.

  • Practical Functional Programming: Pick Two: James Coglan tries to show in this video how to use functional concepts in daily JavaScript programming.

  • Promises + FP = Beautiful Streams: Yassine Elouafi show how to use functional programming and algebraic data types to derive a pure functional definition of reactive programming like streams.

  • Pure JavaScript: Christian Johansen shows you how you can up your game by leaving loops behind and embracing functions as the primary unit of abstraction.

  • Pure UI: Guillermo Rauch discusses the definition of an application’s UI as a pure function of application state.

  • PureScript: PureScript is a strongly, statically typed language which compiles to JavaScript. It is written in and inspired by Haskell.

  • Ramda
    A practical library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.
    • Practical Ramda - Functional Programming Examples: Tom MacWright gives some practical examples of Ramda usage.

  • Ramda Fantasy: Fantasy Land compatible types for easy integration with Ramda. This is an experimental project and will probably merge with Sanctuary.

  • Sanctuary
    Sanctuary is a functional programming library inspired by Haskell and PureScript. It depends on and works nicely with Ramda. Sanctuary makes it possible to write safe code without null checks.

  • The Little Idea of Functional Programming: Jack Hsu tries to take a look at a couple of simple concepts that make up the little idea behind functional programming and to tie the concepts back to code examples in JavaScript.

  • Timm: Immutability helpers with fast reads and acceptable writes.

  • Transducers
    Transducers are a powerful and composable way to build algorithmic transformations that you can reuse in many contexts.

  • Union Type: Union types are a way to group different values together. Union-type is a small JavaScript library for defining and using union types.

Functional Reactive Programming (FRP) 响应式编程

RxJS
bacon.js: JavaScript 的 FRP（函数式响应式编程）库。
kefir: 受 Bacon.js 和 RxJS 启发的 FRP 库，专注于高性能和低内存消耗。
highlandjs: 对 JavaScript 实用工具的重新思考，Highland 能轻易地管理同步和异步信息，而且仅使用标准 JavaScript 和类 Node 流。
most: 高性能 FRP 库。

  • A General Theory of Reactivity: Kris Kowal describes popular primitives of Reactive Programming and some use cases.

  • A General Theory of Reactivity (Video): Kris Kowal talks about reactive primitives and their traits.

  • Controlling Time and Space: This talk will quickly cover the basics of FRP, and then go into a couple different formulations of FRP that people are beginning to use. We will explore how these formulations fit together historically and theoretically.

  • Cycle.js
    A functional and reactive JavaScript framework that solves the cyclic dependency of Observables which emerge during dialogues (mutual observations) between the Human and the Computer.

    • Async Driver: Higher order factory for creating cycle.js async request based drivers. Allows you almost completely eliminate boilerplate code for this kind of drivers.

    • Cycle.js Was Built to Solve Problems: In this video André Staltz shows how Cycle.js has a practical purpose, meant to solve problems your customers/business may relate to.

    • Cycle.js and Functional Reactive User Interfaces: In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.

    • Draw Cycle: Simple Cycle.js program visualized

    • Drivers
      Drivers are functions that listen to Observable sinks (their input), perform imperative side effects, and may return Observable sources (their output).
      • Animation: A Cycle driver for requestAnimationFrame.
      • Audio Graph Driver: Audio graph driver for Cycle.js based on virtual-audio-graph.
      • Cookie: Cycle.js Cookie Driver, based on cookie_js library.
      • DOM: The standard DOM Driver for Cycle.js based on virtual-dom, and other helpers.
      • Fetch: A Cycle.js Driver for making HTTP requests, using the Fetch API.
      • Fetcher: A Cycle.js Driver for making HTTP requests using stackable-fetcher.
      • Firebase: Thin layer around the firebase javascript API that allows you to query and declaratively update your favorite real-time database.
      • HTTP: A Cycle.js Driver for making HTTP requests, based on superagent.
      • Hammer.js: The driver incorporates the Hammer.js gesture library.
      • History: Cycle.js URL Driver based on the rackt/history library.
      • Keys: A Cycle.js driver for keyboard events.
      • Mongoose.js: A driver for using Mongoose with Cycle JS. Accepts both, write and read operations.
      • Notification: A Cycle.js Driver for showing and responding to HTML5 Notifications.
      • Router: A router built from the ground up with Cycle.js in mind. Stands on the shoulders of battle-tested libraries switch-path for route matching and rackt/history for dealing with the History API.
      • Router5: A source/sink router driver for Cycle.js, based on router5.
      • Server-Sent Events: Cycle.js driver for Server-Sent Events (SSE), a browser feature also known as EventSource. Server-Sent Events allow the server to continuously update the page with new events, without resorting to hacks like long-polling.
      • Snabbdom: Alternative DOM driver utilizing the snabbdom library.
      • Socket.IO: A Cycle driver for applications using Socket.IO
      • Storage: A Cycle.js Driver for using localStorage and sessionStorage in the browser.
    • Example Projects
      Example applications built with Cycle.js
      • Cycle.js Examples: Browse and learn from examples of small Cycle.js apps using Core, DOM Driver, HTML Driver, HTTP Driver, JSONP Driver, and others.
      • RX Marbles: Interactive diagrams of Rx Observables.
      • TODO: Minimum Viable Pizza: Minimum Viable Pizza implemented with Cycle.js
      • Tricycle: A scratchpad for trying out Cycle.js.

    • Intro to Functional Reactive Programming with Cycle.js: Nick Johnstone gives an introduction to developing with Cycle.js in this video presentation.

    • Learning How to Ride: an Introduction to Cycle.js: In this talk, Fernando Macias Pereznieto introduces us to the good, the bad, and the beautiful of using Cycle.js, whether you are a complete beginner or an experienced JS ninja.

    • Motorcycle.js
      This is a sister project that will continue to evolve and grow alongside Cycle.js for the foreseeable future. The primary focus of this project is to tune it for performance as much as possible.
      • Most: Monadic reactive streams with high performance.

    • Plug and Play All Your Observable Streams With Cycle.js: Frederik Krautwald explains the principles behind Cycle.js, it's inner workings and how to use it to create a simple program with drivers.

    • Tricycle: A scratchpad for trying out Cycle.js.

    • What Developers Need to Know about MVI (Model-View-Intent): The article explains the general MVI pattern and how it relates to React, Reactive Programming and Cycle.js

  • Cycle.js and Functional Reactive User Interfaces: In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.

  • Dynamics of Change: why Reactivity Matters: In this talk we will see when passive or reactive strategy is advantageous, and how the reactive strategy is a sensible default.

  • Enemy of the State: An introduction to Functional Reactive Programming and Bacon.js by Philip Roberts.

  • MobX: MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.

  • Promises + FP = Beautiful Streams: Yassine Elouafi show how to use functional programming and algebraic data types to derive a pure functional definition of reactive programming like streams.

  • Stream Libraries
    Libraries which help you compose asynchronous operations on streams of time-varying values and events.

    • Bacon.js: A small functional reactive programming lib for JavaScript. Turns your event spaghetti into clean and declarative feng shui bacon, by switching from imperative to functional.

    • Kefir.js: Kefir — is a Reactive Programming library for JavaScript inspired by Bacon.js and RxJS, with focus on high performance and low memory usage.

    • Most: Monadic reactive streams with high performance.

    • Reactive Extensions (RxJS)
      RxJS is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators.
      • Async JavaScript with Reactive Extensions: Jafar Husain explains in this video how Netflix uses the Reactive Extensions (Rx) library to build responsive user experiences that strive to be event-driven, scalable and resilient.
      • Exploring Rx Operators: FlatMap: Christoph Burgdorf introduces the FlatMap operator and its usage for collections and observables.
      • Exploring Rx Operators: Map: Christoph Burgdorf explains how to use the map operator in RxJS.
      • Functional Core Reactive Shell: Giovanni Lodi makes an overview of different architecture meta-patterns and describes his current findings about functional programming and observables as a way to control side effects.
      • Learn RX: A series of interactive exercises for learning Microsoft's Reactive Extensions (Rx) Library for Javascript.
      • Learn RxJS: This site focuses on making RxJS concepts approachable, the examples clear and easy to explore, and features references throughout to the best RxJS related material on the web.
      • Real World Observables: Sergi Mansilla writes an FTP client to use it as an example for a real world application based on RxJS.
      • Rx Training Games: Rx Training Games is a coding playground that can be used to learn and practice Reactive Extensions coding grid-based games
      • Rx-Book: A complete book about RxJS v.4.0.
      • RxMarbles: A webapp for experimenting with diagrams of Rx Observables, for learning purposes.
      • RxState: Simple opinionated state management library based on RxJS and Immutable.js
      • Taking Advantage of Observables in Angular 2: Christoph Burgdorf describes the advantages of Observables and how you can use them in Angular 2 context.
      • Transducers with Observable Sequences: A chapter from the RxJS Book describing Transducers.
      • Why We Built Xstream: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators.
    • Xstream
      An extremely intuitive, small, and fast functional reactive stream library for JavaScript.
      • Why We Built Xstream: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators.

  • The Introduction to Reactive Programming: André Staltz provides a complete introduction to the Reactive Programming and RxJS.

  • What if the User was a Function?: In this video André Staltz talks about the input/output cycle between humans and computers and how to take advantage of this model by using FRP and event streams.