Frontend

In welchem Format kommen die Aufgaben zu dir? Wie groß ist dein Grad an Selbstständigkeit?

Welche grundlegenden HTML-Tags kennst du?

Erzählen Sie mir ein wenig über sich und Ihre interessanteste Erfahrung.

Erzählen Sie mir etwas über sich und Ihre Berufserfahrung.

Implementieren Sie die Funktion debounce(fn, delay), die den Aufruf der Funktion verzögert, bis die angegebene Ruhezeit abgelaufen ist.

Implementieren Sie eine Klasse nach dem Observer-Muster (Observer / Event Emitter): Speicherung von Abonnenten, Abonnieren von Ereignissen, Abbestellen von Ereignissen, Benachrichtigung der Abonnenten.

Du hast Tests erwähnt — hast du Tests bei [Firma] und bei deinem letzten Arbeitsplatz geschrieben?

Implementiere die Klasse EventEmitter: die Methode subscribe(event, handler) zum Abonnieren eines Ereignisses und die Methode emit(event, data) zum Aufrufen aller Abonnenten. Implementiere auch die Methode unsubscribe.

Wie haben Sie das Problem der gleichzeitigen Existenz eines neuen Stacks und Legacy-Codes in einem Projekt gelöst? Haben Sie Micro-Frontends oder Web-Komponenten in Betracht gezogen?

Hast du Erfahrung mit der Migration von Vue 2 auf Vue 3 — was hast du genau selbst gemacht?

Die debounce-Funktion implementieren.

Virtuelles Scrollen implementieren: Es gibt eine lange Liste von Nachrichten (10.000 Elemente), nur die sichtbaren Elemente innerhalb eines Containers mit fester Höhe von 300px sollen gerendert werden, bei einer Zeilenhöhe von 30px.

function createEmitter() { const events = new Map(); function on(event, handler) { if(!events.has(event)) { events.set(event, [handler]) return } events.get(event).push(handler) } function off(event, handler) { // TODO: Handler entfernen } function emit(event, payload) { // TODO: Alle Abonnenten des Events aufrufen } return { on, off, emit }; } const bus = createEmitter(); const unsub1 = bus.on("order:created", (payload) => { console.log("handler1:", payload.id); }); const handler2 = (payload) => { console.log("handler2:", payload.id); } bus.on("order:created", handler2);

In welchem Format erhältst du die Aufgaben? Hast du ein hohes Maß an Eigenständigkeit?

Praktische Aufgabe: Arbeit mit zwei Arrays von Objekten — Vergleich nach Schlüssel unter Verwendung von Map-Strukturen und Durchlauf mit zwei Schleifen

Hast du Erfahrung im Schreiben von Tests? Welche Tests hast du geschrieben und in welchem Umfang?

function memoize(fn, options = {}) { const { maxSize = 1000, keyOf = (...a) => JSON.stringify(a), lruTouch = true, } = options; let hits = 0; let misses = 0; const cache = new Map(); const getKey = (...args) => keyOf(...args); const wrapped = (...args) => { // schreibe den Code hier return fn(...args); }; // und hier return wrapped; }

Warum sind Sie zu dem Schluss gekommen, dass ein benutzerdefiniertes UI-Kit erforderlich ist, anstatt einfach Elemente einer fertigen UI zu verwenden?

Implementieren Sie eine virtuelle Liste (Virtual List): Es gibt eine lange Liste von Nachrichten, und es sollen nur die sichtbaren Elemente innerhalb eines Containers mit fester Höhe von 300 Pixeln gerendert werden. Die Höhe einer Zeile beträgt 30 Pixel.

Erzählen Sie mir von Ihrer relevanten Berufserfahrung.