You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Aug 5, 2022. It is now read-only.
Refactor is a part of flow Git feature for development maintaining and should not been a prefix, that is, it's remain a feature.
According of Ecmascript 6, React base documentation, console/debug support, airbnb code style and dependencies review, do perform:
1st phase: development debug to maintaining better browser integration performance
removing eslint error suppresses: to show important and significant dev errors;
removing unused components;
removing unused and commented imports;
removing unused and commented code blocks;
removing unnecessary usages: imports, props, states, methods and its parameters that is not been used;
removing unnecessary state usages: ...this.state is unnecessary;
fixing console browser warnings:
fix or remove comparison between variables problems;
fix attibute elements warnings;
fix unresolved variables warnings;
set object without id: add id property on every array or array of object if it is not existent. Do not use index on callback;
fix anchors behaving like buttons: <a href onClick /> to <button className="link" onClick />;
fix ternary or binary expressions on JSX scope: prefer using control structures for any conditional render;
fix prop types and its default values;
2nd phase: development review to maintain better principles usages
fixing console node warnings:
fix prettier style code problems;
fix eslint style code problems, as import and methods order on document;
fix async/await on loop problems;
removing useless constructor: only [GameObject] and [GameWallObject] are been extended of all app components;
fixing object identity: do not use template string with index concatenation, uniqueId from lodash i.e. and others build-in or packages resources to generate object ids;
fixing states been not initilized: initialize states, used in the scope of a component, as the primitive and common types below and never as undefined (this is defined by the language itself), [] or {} (those last two, even apparently been "empties", means true):
"" for string, because it means false,
0 for number, because it means false,
null for object, because it means false;
false for boolean;
fixing unnecessary comparison usages:
thing === 0 equals to !thing;
thing === true equals to thing;
thing === false equals to !thing;
thing === null equals to !thing;
isEmpty(thing) equals to !thing, if it's a string type;
isNull(thing) equals to !thing, if it's an object type; Note{} and [] even been truthy empty objects, they should be destructured to access the null values. So, compare the destructured props and not the object itself.
renaming variables with fixed values designated by camelCase names: i.e. from betWidth = 52 to BET_WIDTH = 52 or from BET_WIDTH: 52 to betWidth: 52;
adding break at each end of the case statement line on switch/case: add for lines with no return;
removing async designation for non-promise functions;
removing useless ternary:
from [expected] ? [expected] : [fallback] to [[expecteds...] || [fallbacks...]...];
from [expected] ? [expected] : null to [[expecteds...] || null;
from condition ? [expected] : null to condition && [expected]; Note After-change errors should be handled by the message itself. I.e.: style={null|undefined} trigger type error, because [style] should receive object of strings as style={{ prop: "value" }} (OO paradigm).
fixing unnecessary variables usages: replace them to let or const if its value will be reassigned or fixed, respect.;
fixing states been designated by props: component states should never receive defaultProps object;
setting of its prop validation and default values;
adding alt prop to <img> elements;
adding aria-label prop to input elements;
adding key listener on non-button clicker blocks;
preffering use calls instead of expressions: avoid use ternary or any conditional type inside function scope;
preffering use build-in SVGs component for render icons;
preffering use classnames dependencie resources: to handle more than one string css classes on className props;
destructuring of objects as its props and states;
fixing all plain strings: removing it and using the translation app redux resource;
fixing naming imports from components: import all file components as {} from /component
3rd phase: development cleanup to maintain better code rendering performance
preffering using build-in JS resources: reviewing lodash, i.e., and another dependencies package resources helpers usages. There are many unnecessary functions been used on the app as multiply() (x * y), pow() (x ** y) and so on;
moving alike methods and components: methods() to /children-components;
converting class to presentational function: each stateless class will be converted to functions;
checking of redudant modules: remove package dependency with same functionally or purpose, as classname or clsx ones;
checking of binding in components: anonymous and binded functions called directly from render method prop components. Instead, reference it on constructor property class parent component;
checking of synthetic parameter calls: this goes automatically, been unnecessary to call it;
removing unecessary node elements;
checking of repeated code fragments: extract into new components or replacing it with existing ones, then render them with callback map function;
checking of methods behaving like a life cycle: extract in modules outside of the component;
checking and fixing rest necessary corrections: go through component by component and review what still be needed to do;
Last phase
redo all previous activity described on TODOs ever again to check the refactor feature maintainability.
P.S.:
every right after phase init, dev will be merged into feature/703 branch to be according in front of flow and development;
every TODO description action will be executed shalloweslly, except refactorings itself;
any class has not been reformulated to ES6 functions, at least for stateless or the new ones;
any data has not been changed during the refactoring, but his locals will be moved to a feed.js file only if necessary and for new components;
any component has not been created at desktop viewport. Instead, will follow the mobile-first principle;
any activity described on TODOs has not been interfered by another, but the previous ones. It means that only its description will be executed per time;
any existing structure component folder has not been changed during the refactoring, but the name and default exportation of the new ones will follow the kebab-case and camelCase convention, respect.:
components
├── component-name
│ ├── index.[js,jsx] as ComponentName or componentName if it's a module
│ ├── feed.js
│ └── style.[js,css]
└── another-component
├── index.[js,jsx] as AnotherComponent or anotherComponent if it's a module
├── feed.js
└── style.[js,css]
The text was updated successfully, but these errors were encountered:
Refactor is a part of flow Git feature for development maintaining and should not been a prefix, that is, it's remain a feature.
According of Ecmascript 6, React base documentation, console/debug support, airbnb code style and dependencies review, do perform:
1st phase: development debug to maintaining better browser integration performance
...this.state
is unnecessary;index
on callback;anchors
behaving like buttons:<a href onClick />
to<button className="link" onClick />
;prop
types and its default values;2nd phase: development review to maintain better principles usages
async/await
on loop problems;[GameObject]
and[GameWallObject]
are been extended of all app components;uniqueId
from lodash i.e. and others build-in or packages resources to generate object ids;undefined
(this is defined by the language itself),[]
or{}
(those last two, even apparently been "empties", meanstrue
):""
for string, because it meansfalse
,0
for number, because it meansfalse
,null
for object, because it meansfalse
;false
for boolean;thing === 0
equals to!thing
;thing === true
equals tothing
;thing === false
equals to!thing
;thing === null
equals to!thing
;isEmpty(thing)
equals to!thing
, if it's astring
type;isNull(thing)
equals to!thing
, if it's anobject
type;Note
{}
and[]
even been truthy empty objects, they should be destructured to access the null values. So, compare the destructured props and not the object itself.betWidth = 52
toBET_WIDTH = 52
or fromBET_WIDTH: 52
tobetWidth: 52
;break
at each end of the case statement line on switch/case: add for lines with no return;async
designation for non-promise functions;[expected] ? [expected] : [fallback]
to[[expecteds...] || [fallbacks...]...]
;[expected] ? [expected] : null
to[[expecteds...] || null
;condition ? [expected] : null
tocondition && [expected]
;Note After-change errors should be handled by the message itself. I.e.:
style={null|undefined}
trigger type error, because[style]
should receive object of strings asstyle={{ prop: "value" }}
(OO paradigm).alt
prop to<img>
elements;aria-label
prop to input elements;classnames
dependencie resources: to handle more than one string css classes onclassName
props;imports
from components: import all file components as{} from /component
3rd phase: development cleanup to maintain better code rendering performance
lodash
, i.e., and another dependencies package resources helpers usages. There are many unnecessary functions been used on the app as multiply() (x * y), pow() (x ** y) and so on;methods()
to/children-components
;/src/components/component-name
it's enough;Last phase
P.S.:
dev
will be merged intofeature/703
branch to be according in front of flow and development;feed.js
file only if necessary and for new components;The text was updated successfully, but these errors were encountered: