├── language ├── csharp.md ├── elm.md ├── ruby.md ├── haskell.md ├── python.md └── javascript.md ├── README.md ├── platforms └── nodejs │ └── bestPracticesNodeJS.md └── frontend └── react └── bestPracticeReact.md /language/csharp.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /language/elm.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /language/ruby.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /language/haskell.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /language/python.md: -------------------------------------------------------------------------------- 1 | # Python Best Practices 2 | 3 | ### Variable 4 | - Naming use PEP 8 (for example: lower_case) 5 | - Naming constant using CAPS_LOCK 6 | - Avoid global namespace. 7 | *** 8 | ### Method 9 | - Use simple method 10 | - Keep all operation the same level of abstraction 11 | *** 12 | ### Structure 13 | - Use Explicit structure 14 | - Use default dictionary structure 15 | *** 16 | ### Common 17 | - Document your code 18 | - Follow common style-guide in all application. For example use 19 | [PEPs](https://www.python.org/dev/peps/) 20 | - Use if not x instead of if x == 0 21 | -------------------------------------------------------------------------------- /language/javascript.md: -------------------------------------------------------------------------------- 1 | # JavaScript Best Practices 2 | 3 | ### Variable 4 | - Avoid global scope. 5 | - Choose easy to understand and short names for variables and functions. 6 | - Declare and initialize variable on top. 7 | - Use shortcut notation for declare variable. 8 | *** 9 | ### Function 10 | - Use descriptive names. Name should be a verb or a verb phrase. 11 | - Avoid long argument list. 12 | - Avoid default param. 13 | - Reduce side effect. 14 | - Single responsibility. Function either modifies or handle smth, but not both. 15 | *** 16 | ### Async code 17 | - Use Promises where you need async code 18 | *** 19 | ### Common 20 | - Use strict equal (===) 21 | - Good code explains itself. Comment to code only if it needed. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Best Practices 2 | This repository is a collection of AWESOME Best Practices for all dev situation with language\framework\lib and tools. Feel free to star and fork. Any comments, suggestions? Let me know. I like PRs :bowtie:, please follow the awesome format. 3 | 4 | ## Programming language 5 | 6 | - [JavaScript](https://github.com/ximet/awesome-best-practices/blob/master/language/javascript.md) 7 | - [Python](https://github.com/ximet/awesome-best-practices/blob/master/language/python.md) 8 | - [Haskell](https://github.com/ximet/awesome-best-practices/blob/master/language/haskell.md) - Coming soon 9 | - [Elm](https://github.com/ximet/awesome-best-practices/blob/master/language/elm.md) - Coming soon 10 | - [Ruby](https://github.com/ximet/awesome-best-practices/blob/master/language/ruby.md) - Coming soon 11 | - [C#](https://github.com/ximet/awesome-best-practices/blob/master/language/csharp.md) - Coming soon 12 | 13 | ## Platworms 14 | 15 | - [NodeJS](https://github.com/ximet/awesome-best-practices/blob/master/platforms/nodejs/bestPracticesNodeJS.md) - Event-driven I/O server-side JavaScript environment based on V8 16 | 17 | ## Front-End Development 18 | 19 | - [React](https://github.com/ximet/awesome-best-practices/blob/master/frontend/react/bestPracticeReact.md) - A JavaScript library for building user interface 20 | -------------------------------------------------------------------------------- /platforms/nodejs/bestPracticesNodeJS.md: -------------------------------------------------------------------------------- 1 | # NodeJS Best Practices 2 | 3 | - #### Understand the Event Loop 4 | It is necessary to understand how it works and how it interacts with it. See picture: 5 | ![alt text](https://raw.githubusercontent.com/azat-co/nc-posts/master/how-event-loop-really-works/images/event-loop.png "Event Loop NodeJS") 6 | 7 | *** 8 | 9 | - #### Use try-catch 10 | 11 | Try-catch is a JavaScript language construct that you can use to catch exceptions in synchronous code. Use try-catch, for example, to handle file(JSON, org and other) parsing errors as shown below. 12 | 13 | *** 14 | 15 | - #### Don’t use synchronous functions 16 | 17 | Synchronous functions and methods tie up the executing process until they return. 18 | 19 | *** 20 | 21 | - #### Use ES2015 22 | 23 | A year passed and ES2015 support grew to 99% with Node v6. 24 | 25 | *** 26 | 27 | - #### Use Promises 28 | 29 | Promises will handle any exceptions (both explicit and implicit) in asynchronous code blocks that use then() 30 | 31 | *** 32 | 33 | - #### Use JS CodeStyle 34 | 35 | For the help this point use: 36 | - ESLint 37 | - JSHint 38 | 39 | *** 40 | 41 | 42 | - #### Use JWT for your REST API 43 | 44 | JWT consist: 45 | 1. Header 46 | 2. Payload 47 | 3. Signature for your payload 48 | 49 | *** 50 | 51 | - #### Use HTTP Methods for your RESTful API 52 | 53 | *** 54 | 55 | - #### Use a small subset HTTP status codes 56 | 57 | For example only main status code: 58 | 200. OK status 59 | 201. Created 60 | 304. Not Modified 61 | 400. Bad Request 62 | 401. Unauthorized 63 | 403. Forbidden 64 | 404. Not Found 65 | 500. Internal Server Error 66 | 67 | *** 68 | 69 | - #### Pick good framework for your NODE.js REST API 70 | 71 | Frameworks: 72 | 1. Express 73 | 2. Koa 74 | 3. Restify - for build strict API services 75 | 4. Hapi 76 | 77 | *** 78 | 79 | - #### Test your NODE.js REST APIs 80 | 81 | *** 82 | 83 | - #### Create documentation for your NODE.js REST APIs 84 | 85 | *** 86 | ___ 87 | ## Video link with best practices: 88 | 89 | 1. [JavaScript best practices, Node.js, and how to end poverty with Eric Elliott](https://www.youtube.com/watch?v=pVNagJzzaFg) - 17 Jun. 2015 90 | 2. [Panel: Best Practices for Contributing to Node.js Core - James Snell, IBM](https://www.youtube.com/watch?v=sZdPHi5EMKI) - 24 Sep. 2016 91 | 3. [Best Practices using TypeScript with Node.js by Bryan Hughes, Microsoft](https://www.youtube.com/watch?v=ATUvAQZaTbM) - 15 Dec. 2016 92 | 93 | 3. [Performance and Highly Scalable Micro-Services](https://www.youtube.com/watch?v=Fbhhc4jtGW4) - 31 Oct. 2017 -------------------------------------------------------------------------------- /frontend/react/bestPracticeReact.md: -------------------------------------------------------------------------------- 1 | # React Best Practices 2 | - #### Create reusable component 3 | (better without mutation) 4 | It should encapsulate the smallest element possible that can potentially be reused. 5 | 6 | *** 7 | 8 | - #### Create composable component 9 | Not need create the same component with small changes or component with hard structure. Better think about how create composable component. 10 | *** 11 | 12 | - #### Importing components without relative paths 13 | If you use webpack, use setting resolve.alias 14 | 15 | ```javascript 16 | //for example 17 | resolve: { 18 | modules: [path.resolve('./node_modules')], 19 | alias: { 20 | Components: path.resolve(__dirname, '../../../../ui-component/component') 21 | }, 22 | extensions: ['.js', '.jsx', '.json', '.scss'] 23 | } 24 | ``` 25 | Now we have problem with alias in webpack 2 see [issue](https://github.com/webpack/webpack/issues/4160#issuecomment-281236136) 26 | *** 27 | - #### Create functional component 28 | ```javascript 29 | //for example 30 | const MyComponent = props => ( 31 |
32 | ); 33 | ``` 34 | Functional component have a few limitations: 35 | - cannot have a ref 36 | - cannot have state 37 | 38 | *** 39 | 40 | - #### Use PureComponent, avoiding impure component 41 | A pure component is a React component whose render function is pure (after changes in props or state). The default behavior in React is to always re-render the entire component tree, even if props/state do not change. 42 | *** 43 | 44 | - #### Keep your state as flat as possible. 45 | If need help with them (with flat state), you may use: [normalizr](https://github.com/paularmstrong/normalizr) 46 | 47 | *** 48 | 49 | - #### One-way binding 50 | Need create data flows in one direction with some change. 51 | 52 | *** 53 | 54 | - #### Delete unneeded state 55 | Try to think about refactoring your component classes to not create unneeded state. 56 | 57 | Always remember about the single source of truth principle - it can make your component classes simpler to write and maintain. 58 | 59 | *** 60 | 61 | - #### State in component is an Anti-Pattern 62 | Need create Pure, only side effect component. Better use stateless component 63 | *** 64 | 65 | - #### Use Redux. 66 | Redux is a predictable state container for JavaScript apps. 67 | If you need more information you should check out [Redux](https://github.com/reactjs/redux) and Dan Abramov's course [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) 68 | 69 | *** 70 | 71 | - #### Use check type 72 | Add a bit more type safety to our components. 73 | But in React 15.5 propTypes deleted. You may use a few variants: 74 | - Use [propTypes](https://github.com/reactjs/prop-types) - need install lib after version 15.5 :blush: 75 | - Use [Flow](https://flow.org/) 76 | 77 | *** 78 | 79 | - #### Use Immutable structure 80 | - [Immutable.js](https://github.com/facebook/immutable-js) - most popular implementations of immutable data structures. 81 | 82 | - [Seamless Immutable](https://github.com/rtfeldman/seamless-immutable) - project is a much lighter-weight solution that uses normal JavaScript objects. 83 | 84 | - Hard way (use native JS with unit tests with [deep-freeze-node](https://www.npmjs.com/package/deep-freeze-node)) 85 | 86 | ```javascript 87 | //for example 88 | return { 89 | ...state, 90 | foo 91 | } 92 | 93 | return firstArray.concat(secondArray) 94 | ``` 95 | 96 | *** 97 | 98 | - #### Think about reactive\observable solutions 99 | React is not reactive lib, but can become 100 | - [MobX](https://github.com/mobxjs/mobx) - Simple, scalable state management 101 | - [Cycle JS](https://cycle.js.org/) - A functional and reactive JavaScript framework 102 | - [redux-rx](https://github.com/acdlite/redux-rx) - RxJS utilities for Redux. 103 | 104 | *** 105 | 106 | 107 | ___ 108 | ## Video link with best practices: 109 | 110 | 1. [Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 2013](https://www.youtube.com/watch?v=DgVS-zXgMTk) - 30 Oct. 2013 111 | 2. [Styling React Components in JavaScript](https://www.youtube.com/watch?v=0aBv8dsZs84) - 4 Dec. 2015 112 | 3. [HelsinkiJS June 2016 - Christoffer Niska - React best practices](https://www.youtube.com/watch?v=qtpRiGifpvY) - 18 Jun. 2016 113 | 4. [Netflix JavaScript Talks - React plus X: Best Practices for Reusable UI Components](https://www.youtube.com/watch?v=Yy7gFgETp0o) - 15 Sep. 2016 114 | 5. [ReactiveConf 2016 - Max Stoiber: Styled-components: Enforcing best practices](https://www.youtube.com/watch?v=jaqDA7Btm3c) - 25 Nov. 2016 115 | --------------------------------------------------------------------------------