🥇Teoria invece di euristiche: diventà megliu sviluppatori di frontend

Traduzione Diventà un megliu sviluppatore front-end utilizendu fundamenti invece di euristiche

A nostra sperienza mostra chì i sviluppatori non tecnichi è i sviluppatori autodidatti spessu ùn si basanu micca in principii teorichi, ma in metudi heuristici.

Euristiche sò mudelli è regule pruvati chì u sviluppatore hà amparatu da a pratica. Puderanu micca travaglià perfettamenti o in una misura limitata, ma travaglianu bè bè è ùn anu micca bisognu di pensamentu seriu. Eccu alcuni esempi di heuristiche:

"Usà $(document).ready(function(){}) per l'inizializazione di u codice nantu à i siti jQuery"
"Design var self = this necessariu di chjamà un metudu in una funzione di callback"
"E funzioni di freccia ùn anu micca operatore return»

À u listessu tempu, u principiu teoricu pò esse usatu per truvà suluzioni à altri prublemi. Hè invariabilmente veru è spessu determina a struttura stessa di l'operazione di un elementu particulari. I principii teorichi includenu, per esempiu:

Per piacè nutate chì mettemu solu esempi di euristiche in virgolette per enfatizà a natura artighjanali di l'euristiche paragunate à u rigore di u quadru teoricu. Nisunu di l'esempi heuristici sò universalmente applicabili, ma travaglianu in abbastanza situazioni chì i sviluppatori chì l'utilizanu uttenenu codice di travagliu senza capisce cumplettamente cumu funziona.

Argumenti in favore di l'approcciu teoricu

Avemu spessu trovu chì i sviluppatori non tecnichi sò riluttanti di risolve i prublemi cù i principii teorichi. Questu hè di solitu perchè ùn anu micca avutu l'uppurtunità di amparà prima di a so carriera, è perchè l'euristiche travaglianu satisfactoriamente, cuntinueghjanu à aduprà.

Tuttavia, malgradu l'apparente cumplessità, amparà a teoria pò esse assai utile. Perchè? Perchè a teoria vi permetterà di sentu cunvinta chì a vostra suluzione funziona, è ancu di derivà indipindentamente risposte à e novi dumande, senza avè bisognu di circà e suluzione di qualcunu altru. In u cortu termini, l'algoritmi heuristici ponu parè una suluzione simplice è rapida, ma spessu portanu à solu solu solu ideali, se ci hè.

Inoltre, affittendu l'euristiche, ùn avete mai amparà à risolve veramente i prublemi. Forsi abbastanza spessu puderà truvà una suluzione di travagliu, ma prima o dopu vi ghjunghjerà à una strada morta da quale ùn vi vede una via d'uscita. I programatori C&P si basanu nantu à l'euristiche in u so travagliu.

Critère di livellu di cumpetenza di sviluppatore

Quandu intervistate i sviluppatori di frontend, li demu una sfida di prugrammazione è li dicemu chì sò liberi di utilizà qualsiasi fonti, sia Google o Stack Overflow. Questu modu pudete facilmente determinà se u sviluppatore hè un seguitore euristicu o teoricu.

I primi, senza eccezzioni, copianu codice da esempi più o menu adattati da Stack Overflow. Solu quandu u codice ùn funziona micca cum'è previstu, cumincianu à tweaking per adattà. Spessu fallenu à fà questu.

L'ultimi tendenu à circà risposte in a documentazione API. Ci trovanu infurmazione nantu à quantu paràmetri una funzione particulari piglia, o a sintassi specifica di a forma dilata di a pruprietà CSS desiderata.

Dighjà in i primi cinque minuti di l'entrevista, pudete determinà accuratamente quale tipu di programatore hè u candidatu.

Esempiu:

Pigliemu u sviluppatore Bill cum'è un esempiu. Pigliò parechji corsi di furmazione, risolve una quantità di prublemi JavaScript, è hà scrittu siti web in u so tempu liberu, ma ùn hà micca "veramente" studiatu JavaScript.

Un ghjornu Bill trova un oggettu cusì:

const usersById = {
    "5": { "id": "5", "name": "Adam", "registered": true },
    "27": { "id": "27", "name": "Bobby", "registered": true },
    "32": { "id": "32", "name": "Clarence", "registered": false },
    "39": { "id": "39", "name": "Danielle", "registered": true },
    "42": { "id": "42", "name": "Ekaterina", "registered": false }
}

Un tali ogettu puderia vede una lista di l'utilizatori è s'ellu si sò registrati per un avvenimentu particulari.

Dicemu chì Bill hà bisognu di ricuperà una lista di l'utilizatori registrati. In altre parolle, filtralli. Hè ghjuntu à u codice in quale u metudu .filter() usatu per filtrà a lista. Allora prova qualcosa cum'è:

const attendees = usersById.filter(user => user.registered);

È questu hè ciò chì riceve:

TypeError: usersById.filter is not a function

"Questu hè un tipu di sciocchezza", pensa Bill, perchè hà vistu u codice in quale .filter() agitu cum'è un filtru.

U prublema hè chì Bill si basava nantu à un metudu heuristicu. Ùn capisce micca questu filter hè un metudu definitu nantu à arrays, mentri usersById - un ughjettu ordinariu chì ùn hà micca un metudu filter.

Bill Googles cunfusu "filtru javascript" Truva assai menzioni di arrays è capisce chì deve vultà usersById à un array. Allora à a dumanda "javascript trasforma l'ughjettu in array» trova esempi nantu à Stack Overflow usendu Object.keys(). Dopu questu prova:

const attendees = Object.keys(usersById).filter(user => user.registered);

Sta volta ùn hè micca mostratu errore, ma à a sorpresa di Bill, u campu attendees resta viotu.

Point hè chì Object.keys() torna i chjavi di l'ughjettu, ma micca i so valori. Essenzialmente, u nome di a variabile user facilmente ingannatu perchè ùn hè micca un oggettu user, è l'identificatore, vale à dì a stringa. Dapoi l'attributu registered micca definitu per i strings, filter valuta ogni entrata cum'è falsa, è l'array esce viotu.

Bill guarda più attente à e risposte nantu à Stack Overflow è face u cambiamentu seguente:

const attendees = Object.keys(usersById).filter(id => usersById[id].registered);

Sta volta u risultatu hè megliu: ["5", "27", "39"]. Ma Bill vulia piglià l'ogetti di i visitori, micca i so ID.

Per capisce cumu si filtrà i visitori, Bill ingaghjatu cerca "filtru d'ughjettu javascript", esamina i risultati di ricerca in Stack Overflow è trova sta risposta cù u codice seguente:

Object.filter = (obj, predicate) => 
    Object.keys(obj)
          .filter( key => predicate(obj[key]) )
          .reduce( (res, key) => (res[key] = obj[key], res), {} );

Bill copia queste linee è prova:

const attendees = Object.filter(usersById, user => user.registered);

Tuttu travaglia - ancu s'ellu ùn hè micca chjaru perchè. Bill ùn capisce micca ciò chì hè reduce è cumu si usa. Inoltre, Bill ùn capisce micca chì solu definitu per l'ughjettu glubale Object novu mètudu non standard.

Ma Bill ùn importa micca - funziona! Ùn hè ancu interessatu à e cunsequenze.

Chì hà fattu Bill male ?

Bill hà pruvatu un metudu heuristicu per risolve u prublema è hà scontru i seguenti prublemi:

Utilizendu .filter() nantu à a variabile, Bill hà TypeError. Ùn hà micca capitu chì filter ùn hè micca rilevatu nantu à l'uggetti ordinali.
Hà applicatu Object.keys()per "turnà l'ughjettu in un array", ma questu in sè stessu ùn hà micca purtatu alcun risultatu. Avia bisognu di creà una serie di valori d'ughjettu.
Ancu dopu avè acquistatu i valori è l'utilizanu cum'è una cundizione per u filtru, hà ricivutu solu identificatori invece di l'uggetti d'utilizatori assuciati à quelli identificatori. Questu hè chì a matrice filtrata cuntene ID, micca oggetti d'utilizatori.
À u tempu, Bill abbandunò stu approcciu è truvò una suluzione di travagliu in Internet. Tuttavia, ùn capisce ancu cumu si travaglia - è ùn perderà u tempu à pruvà à capisce, perchè hà altre cose da fà.

Questu hè un esempiu artificiale, ma avemu vistu i sviluppatori risolve i prublemi in u listessu modu parechje volte. Per risolviri in modu efficace, avete bisognu di alluntanassi da i metudi heuristici è studià a teoria.

Andemu à i principii

Se Bill era un proponente di l'approcciu teoricu, u prucessu parerebbe cusì:

Identificà l'inputs dati è determinà i outputs desiderati - in quantu à e so proprietà: "Aghju un ughjettu chì e chjavi sò stringhe chì rapprisentanu ID è i so valori sò oggetti chì rapprisentanu l'utilizatori. Vogliu avè un array chì i valori seranu oggetti d'utilizatori - ma solu oggetti d'utilizatori registrati "
Capisce cumu iterà attraversu un oggettu: "Sò chì possu uttene l'array di chjave in un oggettu chjamendu Object.keys(). Vogliu avè un array perchè i matrici supportanu l'iterazione ".
Capite chì stu metudu aiuta à ottene e chjave, è avete bisognu di trasfurmà e chjave in valori, è ricurdate di map hè un metudu evidenti per creà un novu array transformendu i valori di un altru array:
```
Object.keys(usersById).map(id => usersById[id])
```
Vede chì avà avete un array filtrabile di oggetti persunalizati chì cuntene i valori attuali chì vulete filtrà:
```
Object.keys(usersById).map(id => usersById[id]).filter(user => user.registered)
```

Se Bill avia fattu sta strada, puderia avè travagliatu per noi.

Perchè a ghjente ùn ricorre più à a teoria ?

Calchì volta solu ùn a cunnosci micca. A maiò spessu, sò troppu occupati per piglià u tempu per amparà stu modu di risolve i prublemi - solu bisognu di fà e cose. Risicheghjanu di trasfurmà stu approcciu in un abitudine chì diventerà un ostaculu à u sviluppu di e so cumpetenze.

Per evitari tali sbagli, sempre principià cù a teoria. In ogni tappa di u prucessu, pensate à quale dati avete trattatu. Invece di s'appoghjanu nantu à mudelli familiari tuttu u tempu, cunzidira tipi di dati primitivi: array, object, string, etc. Quandu aduprate una funzione o un metudu, verificate a documentazione per assicurà chì sapete esattamente quali tipi di dati sustene, chì argumenti piglia, è quale hè a so pruduzzioni.

Cù stu approcciu, tù sarè capaci di truvà una suluzione di travagliu nant'à u primu tentativu. Pudete esse sicuru di a so correttezza, perchè avete sceltu specificamente e vostre azzioni basatu nantu à l'input datu è i dati di output desiderati. Entra in i principii di ogni operazione (tipu di dati è valori di ritornu), piuttostu cà vaga lingua cummerciale (cum'è "utilizatori registrati").

Fonte: www.habr.com