# front-end-architecture

**Repository Path**: rootgd/front-end-architecture

## Basic Information

- **Project Name**: front-end-architecture
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-16
- **Last Updated**: 2024-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Front-end Architecture

Raise a Banner. Take up the Torch. It's time to make Front-end Architecture matter!

> This is meant as a public space for people to contribute and show their support for the discipline of Front-end Architecture. Feel free to create pull requests to add content. Open issues to discuss ideas, or get clarification. As sections grow, we'll eventually break them into their own files.

## Definition
Front-end Architecture is a collection of tools and processes that aims to improve the quality of our front-end code while creating a more efficient and sustainable workflow.

A Front-end developer's audience is the website user, a Front-end Architect's audience is the developer themselves.

## Working Components of Front-end Architecture
* Code
  * HTML5/WAI-ARIA
  * CSS/Sass Code standards and organization
  * Object-Oriented approach (how do objects break down and get put together)
  * JS frameworks/organization/performance optimization techniques
  * Asset Delivery - Front-end Ops
* Documentation
  * Onboarding Docs
  * Styleguide/Pattern Library
  * Architecture Diagrams (code flow, tool chain)
* Testing
  * Performance Testing
  * Visual Regression
  * Unit Testing
  * End-to-End Testing
* Process
  * Git Workflow
  * Dependency Management (npm, Bundler, Bower)
  * Build Systems (Grunt/Gulp)
  * Deploy Process
  * Continuous Integration (Travis CI, Jenkins)

## Resources
### Books
- [Front-end Architecture: A Modern Blueprint for Scalable and Sustainable Design Systems](http://fea.pub)

### General Articles
- [Micahgodbolt.com](https://micahgodbolt.com)
- [Styleguide Generator Roundup](http://welchcanavan.com/styleguide-roundup/)
- [@klamping's FEA Outline](https://github.com/klamping/Front-end-Architecture-Outline)
- [What is Front-end Architecture by Elyse Holladay](http://www.elyseholladay.com/posts/2014/10/16/front-end-architect/)
- [Frontend Architecture as a Forethought by Gideon Kreitzer](http://stacksage.com/frontend-architecture-as-a-forethought/)
- [Duties, Skills, & Knowledge of a Software Architect by Carnegie Mellon University](https://www.sei.cmu.edu/architecture/research/previousresearch/duties.cfm)

### OO and Code standard Links
- [Idiomatic CSS](https://github.com/necolas/idiomatic-css)
- [Idiomatic Sass](https://github.com/anthonyshort/idiomatic-sass)
- [Used and Abused – CSS Inheritance and Our Misuse of the Cascade](http://phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/)
- [CSS Guidelines](http://cssguidelin.es/) by Harry Roberts
- [Web Performance Metrics](http://nparashuram.com/perfslides/)

### Testing Tools
__Performance Testing__
- [browser-perf](https://github.com/axemclion/browser-perf)
- [latency-benchmark](http://google.github.io/latency-benchmark)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
- [YSlow](http://yslow.org/)

__Visual Regression__
- [Wraith](https://github.com/BBC-News/wraith)
- [PhantomCSS](https://github.com/Huddle/PhantomCSS)
- [Diffux](https://github.com/diffux/diffux)
- [Huxley](https://github.com/facebook/huxley)
- [Gemini](https://github.com/bem/gemini)
- [Screener](https://screener.io)

__Unit Testing__
- [Jasmine](http://jasmine.github.io/)
- [Jest](https://facebook.github.io/jest/)
- [Mocha](http://visionmedia.github.io/mocha/)

### Documentation Tools
- [Hologram](https://github.com/trulia/hologram)
- [Sassdoc](https://github.com/SassDoc/sassdoc)

### Automation Tools
- [Selenium](http://www.seleniumhq.org/)