Last active
May 26, 2017 15:20
-
-
Save aackerman/7a5aea3d0e50f97363b737a580d3768f to your computer and use it in GitHub Desktop.
New Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Front-end app guidelines | |
* Use create-react-app | |
* Use bootstrap with a custom theme | |
* Use prettier | |
* Avoid semicolons | |
* 2 space indentation | |
* Use trailing commas | |
* Single quotes over double quotes | |
* Use eslint to enforce prettier styling | |
* Avoid eslint non-prettier related styling rules | |
* Use yarn for dependencies | |
* Use ES6 imports | |
* Use jest for testing from create-react-app | |
* async/await, fetch, object.assign, rest/spread come from create-react-app | |
* Add .travis.yml for testing | |
* Assume the backend will use CORS | |
* Use enzyme for testing components | |
* Use sass if a css preprocessor is wanted | |
* Use `[email protected]` or better | |
* Use `lodash` if necessary | |
* Use `moment` if necessary | |
* Use css/sass over css-in-js | |
* Use classes only | |
* Prefix classnames with component name | |
* .Button-color { color: red; } | |
* Get team approval before adding dependencies | |
* Use a modern version of node, v6 or v8 if possible | |
* Eject create-react-app config if necessary | |
* Use dynamic `import()`'s for code splitting | |
* `create-react-app` uses webpack 2 | |
* Require 90% test coverage per file | |
* Name files based on the thing they export | |
* Uppercase classes, singletons, and constants exports | |
* Lowercase single function exports | |
* export class Button { ... } (Button.js) | |
* export function doesSomething() { ... } (doesSomething.js) | |
* Test files are siblings to the files they test | |
* Name test files based on the file they are testing | |
* Thing.js / Thing.test.js | |
Directory Structure Recommendation | |
* src/ | |
* api (http backend interaction logic) | |
* components (shared components) | |
* lib (all other logic files) | |
* pages | |
* page1 | |
* ... (page1 specific components and tests) | |
* page2 | |
* ... (page2 specific components and tests) | |
* static (static assets with self explanatory folder names) | |
* fonts | |
* images | |
* styles | |
* ... (project config files) |
If redux
is used, use reselect
.
Heavily unit test the redux/reselect architecture.
react
should only be used to display values, rather than compute logic.
Server must use HTTPS
.
@andest01 reconnecting with chrome devtools should be fixed in newer versions of chrome https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
Paul Irish is one of the only web bloggers i trust.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Require that each file non-test file is no longer than 350 lines.
Each method is no longer than 30 lines.