Je connais très bien JavaScript, mais je bombarde des entretiens sur le codage [fermé]

Je suis donc actuellement à la recherche d'un nouveau poste de développeur front-end. Je connais très bien JavaScript et j’ai une connaissance poétique des choses suivantes: fermetures, curry, héritage prototypique, modèles de conception, performances des applications et architecture frontale globale. Mais je finis toujours par des entretiens d'embauche à la bombe. (FYI la plupart des emplois que je interviewe sont pour la construction de SPA avec une sorte de cadre MVC)

Habituellement, les tests de codage sont de petits extraits de code de choses que je n'ai jamais rencontrées de manière professionnelle. Comme écrire une fonction pour résoudre un problème mathématique. Mis à part l'héritage maladroit d'essayer de coder en tenant le téléphone dans une main et en permettant à un étranger de voir votre écran et de regarder tous les caractères que vous tapez, je ne vois généralement pas ce genre de choses dans le monde réel.

Est-ce un ensemble de compétences sérieux qui me manque ou bien les intervieweurs me posent-ils des questions non pertinentes? J'imagine que je devrais travailler sur ma programmation fonctionnelle et mes algorithmes, mais je n'ai pas trouvé beaucoup de bonnes ressources sur le Web (ou sur papier), des suggestions?

L'écriture de code n'est qu'une partie du processus d'entrevue.

En réalité, la résolution du problème logique n’est qu’une partie de la tâche d’écriture de code.

Les intervieweurs veulent être sûrs que:

• Vous pouvez écrire du code. De nombreux candidats ayant une expérience professionnelle de dix ans dans une langue ne peuvent écrire aucun code et ce test est destiné à rejeter ces candidats.

• Vous pensez à un problème avant d'écrire du code. Beaucoup sautaient sur leurs claviers, écrivaient des dizaines de lignes de code, puis découvraient qu'ils avaient mal compris le problème initial, car ils n'avaient pas pris le temps de les réfléchir.

• Vous êtes capable de vous adapter lorsque vous écrivez du code. Supposons que vous ayez trouvé une solution, mais lorsque vous avez commencé à la mettre en œuvre, il est apparu que votre première idée n'était pas la meilleure. pouvez-vous passer rapidement à un meilleur, éventuellement refactoriser le code que vous avez écrit?

Cela signifie également que ces entretiens devraient être plus interactifs . Au lieu de taper avec une main, achetez un kit mains libres ou appelez via Skype et utilisez un casque. Tapez pendant que vous tapez au travail, tout en commentant et expliquant ce que vous faites: cela deviendra soudainement beaucoup moins gênant.

Avez-vous fait la programmation en binôme? Si oui, la situation de l'entretien est très similaire, sauf que l'intervieweur ne peut pas vous donner son avis et que vous ne lui demandez pas de changer de clavier avec vous lorsque vous avez terminé.

Voici quelques exemples d’un problème purement mathématique et comment il montre les compétences non mathématiques d’un développeur.

Exemple 1: exercice de codage simple

Vous devez implémenter la calculatrice de nombres de Fibonacci en JavaScript. Vous devriez pouvoir modifier l'index. La séquence de Fibonacci suit ces règles:

1. Les deux premiers chiffres de la séquence sont 0 et 1,
2. Chaque nombre suivant est la somme des deux précédents.

Exemple: F ₀ = 0, F ₁ = 1, F ₂ = 1, F ₃ = 2, F ₁₀ = 55.

Vous avez trois minutes.

Ici, l'intervieweur souhaite que vous réfléchissiez le plus rapidement possible, que vous trouviez la solution et que vous la mettiez en œuvre rapidement. Un tel exercice n'a aucun lien avec ce que font les développeurs mais est beaucoup plus proche de ce que vous pouvez trouver lorsque vous faites un diplôme en informatique, mais les intervieweurs aiment ce genre de choses, alors faisons-le. De plus, les contraintes de temps empêchent tout test automatisé. L'enquêteur ne s'attend donc probablement pas à cela de votre part.

«La description de l'algorithme me fait penser à la récursivité. La deuxième règle mène à la fonction récursive suivante. ”

var fibonacci = function (n) {
    return fibonacci(n - 2) + fibonacci(n - 1);
};

console.log(fibonacci(10));

"Pour mettre fin à la récursion, nous allons ajouter les cas spéciaux en remplaçant le corps de la fibonaccifonction."

switch (n) {
    case 0: return 0;
    case 1: return 1;
    default: return fibonacci(n - 2) + fibonacci(n - 1);
}

"Terminé."

Conclusion

Comme je l'ai dit, un tel exercice n'a aucun lien avec le travail réel d'un développeur. Cela le rend-il sans signification? Pas vraiment, car au moins, cela montre que la personne:

• Est capable de penser à un problème. Certains candidats seront totalement perdus et, sous le stress, il leur faudra plus que le temps imparti pour réfléchir à une façon possible d'aborder le problème.

• Sait la récursion ou est capable de contourner la récursion par une boucle ordinaire. Plus tard, l'intervieweur peut demander s'il existe des moyens d'utiliser / de ne pas utiliser la récursivité et quels sont les avantages / inconvénients de la récursivité.

• Connaître les bases du langage de programmation. Peu importe qu'il s'agisse d'une personne switch, d'une clause de sauvegarde, d'un conditionnel ou d' un dictionnaire : différents candidats choisiront différents outils pour réaliser la même chose.

• Reste concentré sur le problème, sans apporter de choses comme les tests unitaires, l'évolutivité ou les performances. L’intervieweur peut ensuite demander pourquoi, en ce qui concerne les performances, la fonction ci-dessus est terrible, car elle attend du candidat qu’il explique ce qui doit être fait pour amener les performances à un niveau raisonnable.

Exemple 2: questions délicates

Vous devez implémenter la calculatrice de nombres de Fibonacci en JavaScript. Il devrait être aussi rapide que possible. Vous devriez pouvoir changer l’indice compris entre 0 et 100. La séquence de Fibonacci suit ces règles:

1. Les deux premiers chiffres de la séquence sont 0 et 1,
2. Chaque nombre suivant est la somme des deux précédents.

Exemple: F ₀ = 0, F ₁ = 1, F ₂ = 1, F ₃ = 2, F ₁₀ = 55.

Vous avez trois minutes.

Maintenant, nous avons une contrainte intéressante qui montre que l'intervieweur ne se soucie pas vraiment de la capacité du candidat à résoudre des problèmes, mais plutôt de sa capacité à deviner quelles voies sont plus rapides que les autres.

Ces questions difficiles appellent généralement des réponses difficiles. Ici, compte tenu des contraintes de temps, il n’est pas possible de faire plusieurs implémentations, de les comparer, de profiler la plus rapide et d’obtenir une solution optimale.

Au lieu de cela, qu'en est-il:

"Laissez-moi Google" Premiers chiffres de Fibonacci "... Cela semble prometteur. Avec une expression régulière simple (qui serait un oxymoron), nous pouvons construire une liste de valeurs séparées par des virgules. "

sed -e "s;\([0-9]*\) \([0-9]*\);'\2',;g" fbncc10.txt | tr '\n' ' '

"Enfin, le programme lui-même."

var map = ['0', '1', '1', '2', '3', '5', '8', '13', '21', '34', '55', '89', '144', '233', '377', '610', '987', '1597', '2584', '4181', '6765', '10946', '17711', '28657', '46368', '75025', '121393', '196418', '317811', '514229', '832040', '1346269', '2178309', '3524578', '5702887', '9227465', '14930352', '24157817', '39088169', '63245986', '102334155', '165580141', '267914296', '433494437', '701408733', '1134903170', '1836311903', '2971215073', '4807526976', '7778742049', '12586269025', '20365011074', '32951280099', '53316291173', '86267571272', '139583862445', '225851433717', '365435296162', '591286729879', '956722026041', '1548008755920', '2504730781961', '4052739537881', '6557470319842', '10610209857723', '17167680177565', '27777890035288', '44945570212853', '72723460248141', '117669030460994', '190392490709135', '308061521170129', '498454011879264', '806515533049393', '1304969544928657', '2111485077978050', '3416454622906707', '5527939700884757', '8944394323791464', '14472334024676221', '23416728348467685', '37889062373143906', '61305790721611591', '99194853094755497', '160500643816367088', '259695496911122585', '420196140727489673', '679891637638612258', '1100087778366101931', '1779979416004714189', '2880067194370816120', '4660046610375530309', '7540113804746346429', '12200160415121876738', '19740274219868223167', '31940434634990099905', '51680708854858323072', '83621143489848422977', '135301852344706746049', '218922995834555169026', '354224848179261915075'];

var fibonacci = function (n) {
    return map[n];
};

console.log(fibonacci(10));

Conclusion

Les questions épineuses invitent des réponses difficiles. Ne soyez pas héroïque et ne commencez pas l'analyse comparative et le profilage lorsque vous ne disposez que de trois minutes. Pensez à des moyens intelligents de résoudre le problème tout en utilisant votre expérience. Mon expérience me donne à penser que l’utilisation d’une carte peut être plus rapide que le calcul du nombre. C'est peut-être une erreur, mais cette tentative est à prévoir compte tenu des contraintes de temps.

Connaître vos outils est également utile et constitue une partie essentielle des compétences des développeurs: sans connaître les expressions régulières, je passerais les trois minutes allouées à rechercher une liste séparée par des virgules, ou bien je commencerais à écrire un analyseur qui construira le tableau dont j'ai besoin.

N'oubliez pas qu'un bon développeur n'est pas celui qui commence immédiatement à coder, mais qui sait comment éviter de le coder quand une meilleure opportunité est disponible. Certains intervieweurs n'hésiteront pas à vous donner des tâches qui ressemblent à des tâches de codage, mais qui ne nécessitent pratiquement aucun code.

Exemple 3: développement complet de l'application

Vous devez implémenter la séquence de Fibonacci en JavaScript. La longueur de la séquence est déterminée lors de l'exécution du programme. La séquence suit ces règles:

1. Les deux premiers chiffres de la séquence sont 0 et 1,
2. Chaque nombre suivant est la somme des deux précédents.

Exemple: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89.

L'application doit être présentée sous forme de page Web, permettant à l'utilisateur de spécifier la longueur de la séquence via un champ de saisie.

Tu as une heure.

Commençons.

«L'exemple de séquence est très utile, car il me permettra de réaliser un ensemble de tests unitaires pour m'assurer que mon implémentation n'a pas l'air complètement fausse. En général, j'utilise Mocha pour node.js ou QUnit pour JavaScript côté client, mais ici, par souci de simplicité, je vais simplement lancer un tas de fonctions de test. ”

«Je commence par créer index.htmet fib.jsclasser. Ensuite, je remplis index.htmde code vraiment minimaliste et non conforme au W3C (nous pourrons y revenir plus tard si vos compétences en HTML vous intéressent également). ”

<label>Length</label> <input id="length" value="15" />
<input id="compute" type="button" value="Compute" />
<div id="result" style="font-weight:bold;"></div>
<div id="tests"></div>
<script src="fib.js"></script>

"Écrivons maintenant du code qui appellera la fonction du générateur de Fibonacci et affichera les résultats."

fibonacci = (function () {
    var compute,
        init;

    compute = function (length) {
        // TODO: Implement Fibonacci sequence.
        return [1, 2, 3];
    };

    init = function () {
        var button = document.getElementById('compute');
        button.addEventListener('onclick', function () {
            var length = parseInt(document.getElementById('length').value, 10),
                result;

            console.log(
                'Computing Fibonacci sequence of length ' + length + '.'
            );

            result = compute(length);
            document.getElementById('result').innerText = result.join(', ');
        });
    };

    return {
        compute: compute,
        init: init
    };
}());

«Il est temps d'exécuter le code pour la première fois et ... ça ne marche pas. Rien ne se passe. Pourquoi?"

«OK, j'ai oublié le fibonacci.init();à la fin. Je l'ai ajouté, mais rien ne se passe alors qu'il devrait au moins afficher le message dans la console. Attends, d'accord, ce n'est pas onclick, mais click; J'utilise JQuery si souvent que je commence à oublier les noms des événements en JavaScript simple. ”

"Ajoutons des tests."

ensureAreEqual = function (expected, actual) {
    var testResultsContainer = document.getElementById('tests');
    testResultsContainer.innerText += (expected.equals(actual) ?
            '.' :
            ('Actual [' + actual.join(', ') + '] is different from ' +
             'expected [' + expected.join(', ') + '].'));
};

test = function () {
    ensureAreEqual([0], compute(1));
};

"Comparer des tableaux peut être délicat, alors je viens de copier-coller le Array.prototype.equalscode de cette réponse ."

“Maintenant que nous exécutons l'application, elle affiche:”

La valeur réelle [1, 2, 3] est différente de la valeur attendue [0].

“Le test a échoué, ce qui était hautement attendu, étant donné notre implémentation réelle ( return [1, 2, 3];) de la séquence de Fibonacci. Il est temps de changer cela. "

«À partir de la déclaration originale, la séquence de Fibonacci commence par [0, 1], computedevient ainsi :»

compute = function (length) {
    var fib = [0];
    return fib;
};

"Cela permet de passer le premier test et nous pouvons maintenant écrire notre deuxième test."

ensureAreEqual([0, 1], compute(2));

"Il échoue, alors nous y revenons computeet le modifions."

compute = function (length) {
    var fib = [0, 1];
    return length === 1 ? [0] : fib;
};

«Maintenant, les deux tests sont réussis et il est temps de passer aux cas non marginaux.»

compute = function (length) {
    var fib = [0, 1],
        i,
        next,
        current = 1,
        previous = 0;

    for (i = 2; i < length; i += 1) {
        next = current + previous;
        previous = current;
        current = next;
        fib.push(next);
    }

    return length === 1 ? [0] : fib;
};

«Les trois tests réussissent maintenant, sauf que le résultat ne semble pas correct pour des longueurs plus grandes, telles que 100. Pour obtenir de bons résultats, nous aurions dû utiliser une bibliothèque de précision arbitraire . Il y a aussi des choses à améliorer. Par exemple, les conventions de nommage sont parfois trop mauvaises (quoi fib?). Le code JavaScript lié à HTML doit également aller vers un objet différent, ainsi que le code de test. De plus, je n'ai pas testé compute(0)ni vérifié les entrées. ”

Conclusion

En parcourant l'exemple, vous pouvez voir l'interaction attendue lors d'une interview. Tout ne s'est pas déroulé sans heurts (au début, j'ai commis plusieurs erreurs qui m'ont conduit à une situation embarrassante où rien ne se passe lorsque je lance l'application), et l'approche initiale était boiteuse si nous devons supporter une longue séquence, mais j'ai réussi montrer que:

• Je peux gérer différents problèmes,
• J'utilise le développement piloté par les tests, la séquence de Fibonacci étant une excellente opportunité pour cela,
• Je copie-colle du code lorsque la source est digne de confiance et l'écrire à partir de zéro semble extrêmement compliqué et sujet aux erreurs,
• Je ne compte pas trop sur des bibliothèques telles que JQuery,
• J'ai choisi la bonne portée: puisque l'intervieweur veut vérifier mes compétences en JavaScript, je ne perdrai pas de temps à écrire du HTML parfait et propre: ne pas passer du temps ici permet de passer plus de temps à écrire des tests unitaires,
• Je sais quand terminer et dire que j'ai fini, tout en gardant à l'esprit qu'un tas de choses ne sont pas parfaites (comme compute(0)ce qui va échouer, mais peu importe la démo).

C'est exactement ce à quoi un intervieweur doit s'attendre de votre part.