JZTXT

Web前端设计模式

发布时间 2023-09-05 15:43:47作者: fosonmeng
  • CSS Modules
    A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
    • CSS Modules Documentation: General overview and some implementations.
    • ES CSS Modules: PostCSS plugin that combines CSS Modules and ES Imports.
    • Tree Shaking Bootstrap: Jacob Parker describes how to include only those parts of Bootstrap you are really using on your website by leveraging CSS modules and ES6 modules.
  • Components
    Reusable and composable pieces of HTML, CSS and/or JavaScript code which are mostly used for GUI elements.

    • Component Check: In this project Donald Pipowitch compares the usage and development of components in several frameworks such as Angular, Ember, Cycle.js and React.

    • Container Components: Container Components is a pattern which allows to separate data-fetching and rendering concerns and increase the reusability of the (child) components.

    • Devbridge Styleguide: Devbridge Styleguide helps you create, share, and automate a living visual style library of your brand.

    • Presentational and Container Components: Dan Abramov creates a pattern for separating presentational and container components to increase reusability and clarity of the application code.

    • Web Components
      Web Components is a W3C standard for encapsulated, reusable and composable widgets for the web platform.
      • Are We Componentized Yet?: Tracking the progress of Web Components through standardisation, polyfillification and implementation.
      • Custom Elements: Eric Bidelman describes how to create new HTML elements and manage their life cycle.
      • Custom Elements W3C Editor's Draft: This specification describes the method for enabling the author to define and use new types of DOM elements in a document.
      • HTML Imports W3C Editor's Draft: HTML Imports are a way to include and reuse HTML documents in other HTML documents.
      • HTML Imports: #include for the web: Eric Bidelman describes how to use HTML imports and goes through several edge cases.
      • HTML's New Template Tag: The template element allows you to declare fragments of DOM which are parsed, inert at page load, and instantiated later at runtime.
      • Shadow DOM 101: Dominic Cooney shows you how to use Shadow DOM in this tutorial.
      • Shadow DOM 201: Eric Bidelman explains advanced topics related to styling of Shadow DOM elements.
      • Shadow DOM 301: Eric Bidelman talks about advanced Shadow DOM topics like multiple shadow roots, insertion points, event model and Shadow DOM Visualizer.
      • Shadow DOM W3C Editor's Draft: This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.
      • ShadowDOM Visualizer: This tool allows you to visualize how Shadow DOM renders in the browser.
      • Why Web Components Are So Important: Leon Revill compares web components with concepts from different frameworks and explains why web components matter.
      • Write Web Components with ES2015 (ES6): This tutorial shows how to create a web component using ES2015 and how to make use of babel to transpile back to ES5.
  • DOM Diffing & Patching
    Diffing & Patching is a pattern which allows faster and simpler rendering and updating of DOM trees as manual manipulation à la jQuery.

    • Change And Its Detection In JavaScript Frameworks: This article explores several approaches to manage state: Ember's data binding, Angular's dirty checking, React's virtual DOM, and its relationship to immutable data structures.

    • Cito.js: The core of cito.js consists of a virtual DOM library inspired by React/Mithril. On top of that, it will provide a component framework which will make it easy to build well-encapsulated components.

    • Incremental DOM
      Incremental DOM is a library for building up DOM trees and updating them in-place when data changes. It differs from the established virtual DOM approach in that no intermediate tree is created (the existing tree is mutated in-place).

    • Morphdom: Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM here!

    • React Demystified: This article is an attempt to explain the core ideas behind React.js and Virtual DOM.

    • React vs Incremental DOM vs Glimmer: In this post we will explore three technologies to build dynamic DOMs. We will also run benchmarks and find out which one is faster.

    • React-less Virtual DOM with Snabbdom: functions everywhere!: Yassine Elouafi shows in this post how to write a virtual DOM based applications using a small and standalone library.

    • Snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

    • Virtual DOM
      Virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM, you simply create a virtual tree or VTree, which looks like the DOM state that you want.
      • html-to-vdom: This is yet another library to convert HTML into a vtree. It's used in conjunction with virtual-dom to convert template based views into virtual-dom views.
      • html2hyperscript: Automatically translate old HTML markup into the new Hyperscript markup embeddable directly inside your component Javascript code.
      • vdom-to-html: Turn Virtual DOM nodes into HTML.
      • vdom-virtualize: Turn a DOMNode into a virtual-dom node.
      • virtual-html: Convert given HTML into Virtual DOM object.
      • vtree-select: Select vtree nodes (used by virtual-dom) using css selectors. Selector matching is done using cssauron. See the documentation for details on supported selectors.
  • Design Pattern Collections
    Overview resources and collections of design patterns.
  • JavaScript Modules
    Modules divide programs into clusters of code that, by some criterion, belong together.

    • Chapter 10 of Eloquent JavaScript: Modules: This chapter explores some of the benefits that division of code provides and shows techniques for building modules in JavaScript.

    • ES6 In Depth: Modules: This article highlights export and import keywords from ES6.

    • Efficient Module Loading Without Bundling: We can combine ES2015 modules, static analysis of those modules, HTTP/2, caching, Service Workers and a bloom-filter to create a server-client relationship where the client can efficiently load any module.

    • JavaScript Modules: A Beginner’s Guide: In this post, Preethi Kasireddy will unpack the buzzwords like module bundlers, AMD and CommonJS for you in plain English, including a few code samples.

    • Modern Modular JavaScript Design Patterns: A chapter from Essential JavaScript Design Patterns on Modules.

    • Module Bundlers and Loaders
      Libraries for bundling JavaScript Modules into one or several files.
      - Browserify
      Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

      • Budo: A browserify development server, focused on incremental reloading, LiveReload integration (including CSS injection), and other high-level features.

      • Watchify: Watch mode for browserify builds.

      • CrapLoader: The goal of crapLoader is to load ads, widgets or any JavaScript code with document.write in it. This library hijacks document.write and delegates the content loaded from each script into the correct position.

      • Modules Webmake: A CommonJS module bundler similar to Browserify but much faster due to different requirements finder.

      • Require.js: RequireJS is a JavaScript file and AMD module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments.

      • Require1k: CommonJS require for the browser in 1KB, with no build needed.

      • Rollup.js: Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js.

      • SystemJS
        Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.

      • URequire: The Ultimate JavaScript Module Builder & Automagical Task Runner.

      • Webpack
        Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules.

    • UMD (Universal Module Definition): This repository formalizes the design and implementation of the Universal Module Definition (UMD) API for JavaScript modules. These are modules which are capable of working everywhere, be it in the client, on the server or elsewhere.

    • Writing Modular JavaScript With AMD, CommonJS & ES Harmony: In this article Addy Osmani reviewes several of the options available for writing modular JavaScript using modern module formats AMD, CommonJS and ES6 Modules.

  • Observable
    An Observable is an event stream which can emit zero or more events, and may or may not finish. If it finishes, then it does so by either emitting an error or a special “complete” event.

    • ECMAScript Observable: This proposal introduces an Observable type to the ECMAScript standard library. The Observable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets.

    • 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.
  • Routing
    A routing system parses a string input (usually a URL) and decides which action should be executed by matching the string against multiple patterns.
    • A JavaScript router in 20 lines: Joakim Carlstein shows how to write a simple router with data binding.
    • Crossroads.js: Crossroads.js is a powerful and flexible routing system. If used properly it can reduce code complexity by decoupling objects and also by abstracting navigation paths and server requests.
    • Director: A tiny and isomorphic URL router for JavaScript.
    • Encapsulated Routing with Elements: Peter Burns describes a routing approach based on Polymer elements, that allow to create chained and modular routes.
    • Hash.js: Hash.js is a 0.5 KB script that lets you manipulate everything behind # in urls.
    • JQuery Address: The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.
    • Page.js: Micro client-side router inspired by the Express router.
    • Roadcrew.js: Roadcrew.js is a small JavaScript component which lets you switch pages of a single file website.
    • Route Recognizer: A lightweight JavaScript library that matches paths against registered routes. It includes support for dynamic and star segments and nested handlers.
    • Router.js (Ember): Router.js is the routing microlib used by Ember.js.
    • Router5: A simple, powerful, modular and extensible router, organising your named routes in a tree and handling route transitions. In its simplest form, Router5 processes routing instructions and outputs state updates.
  • UI Data Binding
    Binding of UI elements to an application domain model. Most frameworks employ the Observer pattern as the underlying binding mechanism.
    • Bindings in Ember: Unlike most other frameworks that include some sort of binding implementation, bindings in Ember.js can be used with any object.
    • Change And Its Detection In JavaScript Frameworks: This article explores several approaches to manage state: Ember's data binding, Angular's dirty checking, React's virtual DOM, and its relationship to immutable data structures.
    • Easy Two-Way Data Binding in JavaScript: Two-way data binding refers to the ability to bind changes to an object’s properties to changes in the UI, and viceversa. This article describes how to implement data binding with vanilla JavaScript.
    • Functional Reactive Bindings: A CommonJS package that includes functional and generic building blocks to help incrementally ensure consistent state.
    • Knockout.js: Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates.
    • Rivets.js: Lightweight and powerful data binding + templating solution for building modern web applications.
    • Synapse: Hooks to support data binding between virtually any object.
  • Unidirectional Data Flow
    An architecture design pattern which promotes a flow of data and events in a single direction, usually creating an interactive loop.
    - Flux
    Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

    • Fluxiny: ~1K implementation of flux architecture

    • Immutable User Interfaces
      Lee Byron talks about unidirectional data flow architectures based on immutable data structures in contrast to traditional MVC based designs.
      • Immutable.js: Immutable persistent data collections for Javascript which increase efficiency and simplicity.

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

    • Model-View-Intent (MVI)
      MVI is a unidirectional data flow architecture pattern consisting of three parts: Intent (to listen to the user), Model (to process information), and View (to output back to the user).

    • Nothing New in React and Flux Except One Thing: Andre Staltz talks about aspects of React and Flux which make them innovative and compelling.

    • Redux
      Redux is a predictable state container for JavaScript apps. It attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen.
      • Building Redux in TypeScript with Angular 2: In this post we’re going to discuss the ideas behind Redux. How to build our own mini version of the Redux Store and hook it up to Angular 2.
      • Exploring Redux Middleware: The author explains how to author your own middleware for Redux. He dives into the execution path of each middleware function in the chain and shows some examples.
      • Full-Stack Redux Tutorial: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
      • Immutable.js: Immutable persistent data collections for Javascript which increase efficiency and simplicity.
      • Learn Redux: A video series by Wes Bos, teaching Redux. From setting up Webpack to using Dev Tools.
      • Normalizr: Normalizes deeply nested JSON API responses according to a schema for Flux and Redux apps.
      • Redux Actions: Flux Standard Action utilities for Redux.
      • Redux Form: A Higher Order Component using react-redux to keep form state in a Redux store.
      • Redux Loop: A port of elm-effects and the Elm Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your reducers.
      • Redux Saga: An alternative Side Effects middleware for Redux applications. Instead of dispatching Thunks which get handled by the redux-thunk middleware, you create Sagas to gather all your Side Effects logic in a central place.
      • Redux Tutorial: This repository contains a step by step tutorial to help grasp flux and more specifically Redux.
      • Reinventing Flux - Interview with Dan Abramov: Dan talks about why he developed Redux.
      • Reselect: Simple “selector” library for Redux inspired by getters in NuclearJS and subscriptions in re-frame.
      • Some Problems with React/Redux: André Staltz goes through the pros and cons of React + Redux.
      • Testing a React & Redux Codebase: This series aims to be a very comprehensive guide through testing a React and Redux codebase, where you can really cover a lot with just unit tests because the code is mostly universal.
      • The Redux Ecosystem: Let’s take a look at most of the features that you’ll have to deal with when the time comes, — and where React & Redux themselves can’t help you.
      • The Redux Journey at react-europe 2016: In this talk, Dan Abramov reflects on the past, present, and future of Redux.
      • The SoundCloud Client in React + Redux: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel.
      • Tic-Tac-Toe.js: Redux Pattern in Plain JavaScript: Ramon Victor describes how to use Redux with vanilla JavaScript. No React, no jQuery, no micro-library, it doesn't rely on anything else. It's just plain JS.
      • Understanding Redux Middleware: The author describes the functional programming concepts involved in the creation and application of middleware functions.

    • Unidirectional Data Flow Architectures (Talk): Andre Staltz compares modern architecture patterns including Flux, Redux, Model-View-Intent, Elm Arch and BEST.

  • Atomic Design
    Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate interface systems.
  • Authoring jQuery Plugins
    jQuery is an utility library and a plugin framework. This section collects resources about creating such plugins.
  • Block Element Modifier (BEM)
    Methodology aimed at achieving fast to develop long-lived projects, team scalability, and code reuse.
  • 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

  • Polymer Project
    The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web.

  • SMACSS: SMACSS (pronounced “smacks”) is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.

  • T3: T3 is a minimalist JavaScript framework sponsored by Box Inc. that provides core structure to code.

  • The Elm Architecture: The Elm Architecture is a simple pattern for infinitely nestable components. It is great for modularity, code reuse, and testing.

  • TodoMVC: A project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.