Entretien Technique

Développeur front-end Junior 2019

Bien réussir son

Présentations

  • Qui suis-je ?

  • De quoi va-t-on parler ?

  • Qui êtes-vous ?

Avant l'interview

  • CV honnête et démontrable
  • RH non-spécialistes
  • glassdoor.be
  • Se préparer :
    • skype, internet, tools, horaires
    • syntaxe du langage
    • connaître les tendances
    • jeux de rôle

La présentation technique

  • Ma mission idéale
  • Mon site web préféré 
  • Quelle note je me donne sur 10 
  • Ma dernière expérience passionnante
  • Mon univers de développeur
  • Commenter mon CV

Le brise glace

  • questions faciles, mais sérieuses
  • pas obligatoire : respirer, boire, faire au plus simple
  • cinq traits recherchés :
    • curiosité
    • confiance en soi
    • humilité
    • professionnalisme
    • travail d'équipe

Questions de code

Développeur JS       /       Intégrateur HTML-CSS

Développeur JavaScript

  • types, références et valeurs
  • itérations de listes
  • ES6
  • portée des variables
  • asynchrone
  • this
  • fonctionnel
// Décrire le code suivant
var prenom1 = 'Peach';
var prenom2 = prenom1;

// Quelle est la valeur de prenom2 ?

prenom1 = 'Mario';
// Quelle est la valeur de prenom2 ?

Types, références et valeurs

// Décrire le code suivant
var personne1 = {
  prenom: 'Luigi',
  nom: 'Miyamoto'
};
var personne2 = personne1;

// Quelle est la valeur de personne2.prenom ?

personne1.prenom = 'Toad';
// Quelle est la valeur de personne2.prenom ?

Types, références et valeurs

// Que vont écrire dans la console les lignes suivantes ?
console.log('42' == 42);
console.log('42' === 42);

// Les curiosités de JavaScript
console.log(NaN === NaN); // va écrire « false » dans la console
// Connaissez vous d'autres curiosités inattendues de JavaScript  ?

Types, références et valeurs

// Décrire le code suivant
const students = [
  { name: 'Loïc', age: 33 },
  { name: 'Sabrina', age: 35 },
  { name: 'Philippe', age: 24 }
];

// ajouter son profil au personnel de l'entreprise
console.log(students);

// afficher les « name » un par un dans la console

// ajouter l'école « school: "FIJ" » à chacun des étudiants
console.log(students);

Itérations de listes

// Proposez un algorithme pour calculer la moyenne d'âge à Interface3
const students = [
  { name: 'Loïc', age: 33, school: 'Interface3' },
  { name: 'Sophia', age: 35, school: 'Interface3' },
  { name: 'Samir', age: 24, school: 'Interface3' }
];

Itérations de listes

// De quoi ES6 est-il l'acronyme ?
// Citer trois fonctionnalités qui n'existent que depuis ES6
const students = [
  { name: 'Loïc', age: 33 },
  { name: 'Sabrina', age: 35 },
  { name: 'Philippe', age: 24 }
];

students.push({ name: 'Nathalie', age: 28 });

students.forEach(item => console.log(item.name));

let i3Students = students.map(function(item) {
  return { ...item, school: 'Interface3' };
});

console.log(i3Students);

ES6

// Décrire le code suivant
// Que va-t-il écrire dans la console ?
var salutation = 'bonjour';
function saluer() {
  console.log(salutation);
}
saluer();

portée des variables

// Décrire le code suivant
// Que va-t-il écrire dans la console ?
function remercier() {
  var remerciement = 'merci';
}
remercier();
console.log(remerciement);

// Quelle difference avec...
window.console.log(remerciement);

portée des variables

// Décrire le code suivant
const axios = require('axios');
const data = axios.get('https://jsonplaceholder.typicode.com/todos/1');
let a = 42;
// Les data arriveront-elles AVANT ou APRÈS que « a » prenne la valeur 42 ?

// axios.get retourne une promesse. Écrire les data reçues dans la console.

asynchrone

le mot clef « this »

  1. Dans une méthode d'objet
  2. Dans une fonction constructeur
  3. Avec "bind"
  4. Avec une fonction fléchée
  5. Sans contexte
// Décrire le code suivant
const doubler = a => a * 2;

// en JavaScript, peut-on passer une fonction en argument à une fonction ?

// en JavaScript, une fonction peut-elle retourner une fonction ?

// en JavaScript, est-ce que la syntaxe suivante est valide ?
const fn = a => b => a;

fonctionnel

Une petite pause ?

Intégrateur : le HTM

  • importance de la structure 
  • en ligne VS en bloc 
  • éléments pour un menu en tête/pied de page 
  • empêcher le clic sur un bouton
  • textarea, thead, canvas, meta

Intégrateur : le CSS

  • différence entre float et flex
  • mobile first et réalisation concrète 
  • animation de chargement
  • conventions de nommage
  • variables, fonctions et système de fichiers en CSS

Software Architecture

Un clone de Netflix...

...qui bug.

Jeu de rôle

  • CMS interdits
  • SPA avec API préexistante pour les 5 produits
  • design prêt
  • 100% responsive
  • Structure
    • 1 accueil
    • 1 liste des produits
    • 5 pages produits
    • 1 formulaire de contact
    • header et footer 

Discussion ouverte

  • Questions pertinentes :
    • ambiance, équipes
    • mentors, formations, ressources
    • matériels et technologies
    • comparaison avec les autres entreprises
    • que faut-il améliorer ?
  • À éviter :
    • n'avoir aucune question
    • est-ce que je suis pris ?
    • RH, salaires, avantages

Rapport d'interview technique

  • Non Junior => refusé
  • Recommended => proposition de mission
  • Highly recommended => proposition sur profil

Merci à tous

Chance et courage dans vos interviews

Ressources 

  • slides et exemples
    • https://slides.com/ltruchot/et2019
    • https://github.com/ltruchot/i3-interview-examples
  • JavaScript
    • https://github.com/denysdovhan/wtfjs
    • https://github.com/getify/You-Dont-Know-JS
    • https://www.youtube.com/channel/UCJyS9W1fzKFTStkThlUtB8w

Remerciements spéciaux : Christelle, Sarah, Stéphanie

Entretien technique 2019 - FIJ

By Loïc TRUCHOT

Entretien technique 2019 - FIJ

  • 314