Context: frontend-dev-bookmarks / Architecture
Ready to use and well documented structures and frameworks for frontend development.
- Atomic Design: Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate interface systems.
- A More Seamless Workflow — Style Guides for Better Design and Development: Ash Connolly explains what styles guides are and which benefits they bring to designers and developers.
- Atomic Docs: Atomic Docs is a styleguide generator and component manager. Atomic Docs is built in PHP. Inspired by Brad Frost's Atomic Design principles.
- Atomic Lab: Template sharing and coding environment based on atomic design.
- Authoring jQuery Plugins: jQuery is an utility library and a plugin framework. This section collects resources about creating such plugins.
- Advanced Plugin Concepts: A collection of best practices for jQuery plugin authoring.
- How to Create a Basic Plugin: The article describes basic plugin creation and provides a simple boilerplate.
- Signs of a poorly written jQuery plugin: Collection of jQuery plugin antipatterns.
- The Ultimate Guide to Writing jQuery Plugins: A comprehensive guide on how to develop jQuery plugins including a simple boilerplate.
- Writing Stateful Plugins with the jQuery UI Widget Factory: The article demonstrates the capabilities of the Widget Factory by building a simple progress bar plugin.
- jQuery Boilerplate: This project won't seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
- jQuery Plugin Patterns: This project won't seek to provide implementations for every possible pattern, but will attempt to cover popular patterns developers often use in the wild.
- Block Element Modifier (BEM): Methodology aimed at achieving fast to develop long-lived projects, team scalability, and code reuse.
- A New Front-End Methodology: BEM: An introduction by Varvara Stepanova at SmashingMagazine.
- An Introduction to the BEM Methodology: General introduction article on tutsplus.
- BEM 101: A collaborative post by Joe Richardson, Robin Rendle, and CSS-Tricks staff giving an introduction to BEM with some good examples.
- BEM I (finally) understand: In this article Andrei Popa will focus on the basics of BEM and how to approach simple to complex anatomies.
- Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them: This article aims to be useful for people who are already BEM enthusiasts and wish to use it more effectively or people who are curious to learn more about it.
- Block, Element, Modifying Your JavaScript Components: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
- Emmet filter for BEM: If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.
- Fifty Shades of BEM: Article describes different flavors of BEM.
- How We Use BEM to Modularise Our CSS: Andrei Popa describes the challenges, AlphaSights team had, implementing BEM in their projects.
- Introduction To BEM Methodology (Toptal): General introduction to BEM methodology and platform.
- MindBEMding – getting your head ’round BEM syntax: Article on csswizardry explaining the BEM syntax for CSS classes.
- Pobem: PostCSS plugin for BEM syntax.
- Support for BEM modules in Sass 3.3: The next major release of Sass is poised for release and with it comes real support for BEM-style modules...
- To BEM or not to BEM: A series of interviews on BEM methodology.
- 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.
- Building web components using ES6 classes: Web components evolve markup into something that’s meaningful, maintainable, and highly modular. Thanks to these new API primitives, not only do we have improved ergonomics when building apps, but we gain better overall structure, design, and reusability.
- Developing Front-End Microservices: In this article series we’ll go through Web Components development in context of microservices.
- Lazy Loading of Pages: iron-lazy-pages is a Polymer component which allows to load pages on demand.
- ShadowDOM Visualizer: This tools allows you to visualize how Shadow DOM renders in the browser.
- Thinking in Polymer (The Polymer Summit 2015): Kevin Schaaf explains how to employ data binding and composition to build complex application using only Polymer.
- Unidirectional Dataflow Architecture with Polymer + RxJS + Immutable Data: Richard Anaya describes how to combine Polymer, RxJS and Freezer to implement a unidirectional data flow architecture.
- Using Elements: This guide describes how to install and use standalone Polymer components in an existing project.
- Using Polymer with Flux and a Global App State: Paulus Schoutsen describes his experience integrating Polymer and NuclearJS.
- What is shady DOM?: On browsers that support shadow DOM, it’s possible to have an element that is rendered with complex DOM, but have that complexity hidden away as implementation detail.
- 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.
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.