Skip to content

Instantly share code, notes, and snippets.

@aackerman
Last active May 26, 2017 15:20
Show Gist options
  • Save aackerman/7a5aea3d0e50f97363b737a580d3768f to your computer and use it in GitHub Desktop.
Save aackerman/7a5aea3d0e50f97363b737a580d3768f to your computer and use it in GitHub Desktop.
New Project
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)
@aackerman
Copy link
Author

@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

@andest01
Copy link

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