Andrii Zhukov
Senior Software Engineer
at GlobalLogic
const someArray = [1, 2, 3, 4, 5];
someArray.map(...).filter(...);
VS
someArray.forEach(...);
See previous episode:
Hot or Not:
Algorithms for JS devs
import React from 'react';
class Greeting extends React.Component {
render() {
return (<div>{this.state.count}</div>);
}
}
import React, { useState } from 'react';
function Greeting() {
const [count, setCount] = useState(0);
return (<div>{count}</div>);
}
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App),
}).$mount('#app');
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
export class DoEverything {
showSomeone() {...}
hideSomeone() {...}
saveSomeone() {...}
doNotMixinThis() {...}
makeSomeCofee() {...}
}
export showSomeone() {...}
export hideSomeone() {...}
export saveSomeone() {...}
export doNotMixinThis() {...}
export makeSomeCofee() {...}
Tree shaking
Code minimization
Dynamic import
Lazy loading
Code splitting
const route = () =>
import(somePath);
Garbage Collector clears memory when there is no
Object reference
Map VS WeakMap
Garbage Collector clears memory when there is no
Object reference
Map VS WeakMap
WeakRef
ImmutableJS
Your code needs to be checked and that's it.
- Not to humiliate your dignity
- No one writes optimized code straight away
- Optimized code can be optimized
- One head is good and so on
const someArray = [2, 3, 1, 7, 5, 6, 4, 9, 10, 8];
const newArray = someArray
.sort((a, b) => a - b)
.filter((item) => item % 2)
.map((item) => item * 2);
function changeArrayOrReturnDefault(
someArray,
defaultArray = []
){
// do some operations
const newArray = someArray.map(...);
// do something else
if (someArray.length === 0) {
return defaultArray;
}
return newArray;
}
const someArray = [1, 2, ..., 99, 100];
function makeOnlyFiveEmployeers(someArray)
{
let employeers = "", count = 0;
someArray.forEach((i) => {
count++;
if (count < 6) {
employeers +=
`Employee ${i}`;
}
});
}
function makeAndRender(arrayHTMLElements) {
arrayHTMLElements.forEach(
(htmlElement) => {
const someInnerText =
`<div>${htmlElement}</div>`;
const blog = document
.querySelector("#blog");
blog.innerHTML = someInnerText;
}
);
}
- The code doesn't belong to you and can use any horror stories mentioned before
- Most of the code you may not need at all
- May use legacy code and not have code support
- Vulnerability, versioning and other dangerous things
- Can use other libs with problems above
Solutions:
- Write your own code and use your own libs :)
- If you can't write the code, use only reliable, proven libraries
const bigData = [1, 2, 3, ..., 1000000000000];
let numberIteration = 0
function doSmallChanksOfTasks(bigData) {
do {
doOneTask(bigData[numberIteration]);
numberIteration++;
} while(numberIteration % 1e6 !== 0);
if (numberIteration < bigData.length) {
setTimeout(doSmallTasks); // or queueMicrotask
}
}
const myWorker = new Worker("worker.js");
Vue, React - useMemo
React - useCallback, resellect, etc.
If the previous methods do not help,
you need to redevelop your application completely
Keep the client busy with something else,
organize the active work of the brain
You don't need optimization