Context: frontend-dev-bookmarks / Architecture
Best practices that the programmer can use to solve common problems when designing an application or system.
- About HTML Semantics and Frontend Architecture: A collection of thoughts, experiences, ideas on HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.
- Box Tech Talk: Scalable JavaScript Application Architecture: A video by Nicholas Zakas (2012) about JavaScript Architecture.
- 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.
- 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.
- 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.
- Watchify: Watch mode for browserify builds.
- Require1k: CommonJS require for the browser in 1KB, with no build needed.
- SystemJS: Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.
- Modular JavaScript: A Beginners Guide to SystemJS & JSPM: The combination of jspm and SystemJS provides a unified way of installing and loading dependencies.
- Webpack: Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules.
- Block, Element, Modifying Your JavaScript Components: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
- WebpackBin: A webpack code sandbox.
- 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.
- 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.
- uRequire: The Ultimate JavaScript Module Builder & Automagical Task Runner.
- Browserify: Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
- 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.
- Learning JavaScript Design Patterns: In this free book Addy Osmani explores applying both classical and modern design patterns to the JavaScript programming language.
- Patterns For Large-Scale JavaScript Application Architecture: An extensive overview by Addy Osmani of existing architectural solutions in the frontend development field.
- 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.
- 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.
- Roadcrew.js: Roadcrew.js is a small JavaScript component which lets you switch pages of a single file website.
- 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.
- 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: router.js is the routing microlib used by Ember.js.
- Scalable JavaScript Application Architecture: In this video (2011) Nicholas Zakas discusses frontend architecture for complex, modular web applications with significant JavaScript elements.
- Single Page Apps in Depth: This free book is what I wanted when I started working with single page apps. It's not an API reference on a particular framework, rather, the focus is on discussing patterns, implementation choices and decent practices.
- The Media Object Saves Hundreds of Lines of Code: Extensive description with examples of popular design pattern "media object".
- UI Data Binding: Binding of UI elements to an application domain model. Most frameworks employ the Observer pattern as the underlying binding mechanism.
- 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.
- Virtual DOM: Virtual DOM is a technique and set of libraries/algorithms that allow us to improve front end performance by avoiding direct work with DOM and work only with lightweight JavaScript object that mimic the DOM tree.
- 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.
- 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).
- Introducing Incremental DOM: Incremental DOM is a library inspired by Virtual DOM developed at Google.
- 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.
- 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.
- 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.
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.