-
-
Save aackerman/7a5aea3d0e50f97363b737a580d3768f to your computer and use it in GitHub Desktop.
| 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) |
I recommend using redux and react-redux.
I like embedding styles along with the code that runs them. For this reason, I actually have taken a real shine to css modules.
CSS Modules work great for your own stuff. That being said, it's important to use :global if you're using css to update bootstrap/external library css.
I like naming tests as siblings to the respective code that they test. I like that a whole bunch.
Require that each file non-test file is no longer than 350 lines.
Each method is no longer than 30 lines.
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.
I still haven't found a unit testing system that I like outside of phantom-js and its respective chrome driver. Jest is still rife with problems trying to debug your unit tests.
jestjs/jest#1652
Using
console.logeverywhere in your tests, rather than using chrome's excellent debugging capabilities, makes writting unit tests harder. If they're harder to write, no one will use them.Also, I think
node-inspectoris no longer maintained.If we can find a system that can be run directly in chrome's inspector without having to copy and paste a strange url into the browser for each test run, I'd say we're looking pretty good.