Skip to content

Latest commit

 

History

History
167 lines (158 loc) · 30.9 KB

design-patterns.md

File metadata and controls

167 lines (158 loc) · 30.9 KB
Raw

Design Patterns

Context: frontend-dev-bookmarks / Architecture

Best practices that the programmer can use to solve common problems when designing an application or system.

frontend.directory Gitter Twitter

  • 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.

License

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

Please provide a link back to this repository. This is not necessary for GitHub forks.