https://github.com/micahgodbolt/front-end-architecture
Raise a Banner. Take up the Torch. It's time to make Front-end Architecture matter! #frontendarch
https://github.com/micahgodbolt/front-end-architecture
Last synced: about 1 year ago
JSON representation
Raise a Banner. Take up the Torch. It's time to make Front-end Architecture matter! #frontendarch
- Host: GitHub
- URL: https://github.com/micahgodbolt/front-end-architecture
- Owner: micahgodbolt
- Created: 2014-10-18T03:24:20.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2020-03-27T18:30:26.000Z (about 6 years ago)
- Last Synced: 2024-05-22T19:33:37.965Z (about 2 years ago)
- Homepage:
- Size: 36.1 KB
- Stars: 953
- Watchers: 74
- Forks: 108
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-fullstack - Front End
- awesome-fullstack - Front End
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/)