Το Skroutz είναι μία από της μεγαλύτερες εταιρίες στην Ελλάδα με πολύ «δυνατό» και καταρτισμένο προσωπικό. Έχουν πολλά development teams και επενδύουνε πάρα πολύ στο ανθρώπινο δυναμικό. Αυτά τα συμπεράσματα βγάζω μετά την εμπειρία της συνέντευξης που έδωσα και της έρευνας που έκανα.

Όλα φαίνονται από την αρχή· ο τρόπος που γίνεται η επικοινωνία, ο τρόπος που καθορίζεται και διεξάγεται η συνέντευξη, όλα είναι τυποποιημένα και οργανωμένα. Η εμπειρία που είχα ήταν θετική για εμένα, παρόλο που είχα αρνητικό αποτέλεσμα. Για να είμαι ειλικρινής, το έκανα πιο πολύ για την εμπειρία γιατί αν προχωρούσε το πράγμα, θα έπρεπε να ακούσω ένα αρκετά μεγάλο ποσό για να ξεκινήσει η συνεργασία μου με το Skroutz. Δεν περιαυτολογώ, απλώς είμαι σε μια ηλικία που βάση των γνώσεων μου και της εμπειρίας μου, έχω θέσει κάποια εργασιακά και μισθολογικά standard.

Όλοι, και οι 3 engineers που μου πήραν συνέντευξη μέσω video-κλήσης, ήταν συνεπείς στην ώρα τους και αφού συστηθήκαμε η διαδικασία ξεκίνησε γρηγορά. Με ρωτήσαν να τους πω την πορεία μου έως σήμερα και ξεκίνησα να τους λέω για την εκπαίδευση μου, το που έχω εργαστεί, τι projects έχω κάνει και με ποιες τεχνολογίες έχω δουλέψει. Σε κάποιο σημείο με διέκοψαν και ξεκίνησαν τις ερωτήσεις πάνω σε αυτά που τους είχα πει.

Οι ερωτήσεις

• Για το αν δημιούργησα Tests για ένα σημαντικό project που είχα στο portfolio μου.
• Ποια ήταν η προσέγγιση για τις τεχνολογίες που χρησιμοποίησα σε ένα σημαντικό project
• Για το τι μου αρέσει και δουλεύω και αισθάνομαι πιο άνετα, Frontend ή Backend
• Με ποιον τρόπο στο παρελθόν, πριν δημιουργηθούνε Javascript libraries/frameworks σαν το jQuery, προσθέταμε HTML elements στο DOM χρησιμοποιώντας Javascript σε μια σελίδα
• Τι είναι τα ORM και ποια είναι συγκεκριμένα για τα PHP frameworks Laravel και Yii.
• Σε ποια τεχνολογία βασίζεται το Eloquent ORM του Laravel
• Ποια η διαφορά των κανονικών συναρτήσεων με τα Arrow Functions στη Javascript
• Με ποιο τρόπο αλλάζουμε το this σε ένα function
• Τι είναι το this μέσα σε ένα plain function
• Πως δημιουργούνται τα indexes σε μία ΒΔ και τη μορφή έχουν
• Πότε επηρεάζεται ένα index ενός πίνακα μιας ΒΔ
• Με ποιο τρόπο προσθέτουμε νέα πεδία και κάνουμε αλλαγές σε έναν πίνακα μιας ΒΔ
• Πότε θα χρησιμοποιήσω CSS framework και πότε όχι
• Αν χρησιμοποιώ CSS pre-processor
• Να αναφέρω ένα «δυνατό» feature του SASS CSS pre-processor
• Αν θα μπορέσω να συνεργαστώ με πολλούς developers σε ομάδα

Με έναν πρόχειρο υπολογισμό, υπολογίζω ότι το 70% με 80% των απαντήσεων μου ήταν σωστές ή σχεδόν σωστές κοντά στη σωστή απάντηση.

Οι λάθος απαντήσεις

❌ this

Ερωτώμενος πιο είναι το αγαπημένο μου feature της ES6, απάντησα το reduce method και ήταν σαν να μην το άκουσαν! Αμέσως ρωτήθηκα για τα Arrow Functions και ποια είναι η διαφορά με τα κανονικά functions, που απάντησα ότι εκτός από τη σύνταξη και τη συντομογραφία, η διαφορά είναι στο this και ότι στα arrow functions το this αντιστοιχεί στο υπάρχον scope. Ερωτώμενος σε τι αναφέρεται το this μέσα σε κανονικό function, απάντησα ότι είναι το context του function παίρνοντας σαν απάντηση ότι είμαι λάθος και ότι το this είναι το window. Η σωστή απάντηση είναι λίγο πιο πολύπλοκη. Το this μέσα σε ένα function μπορεί να είναι πάρα πολλά πράγματα και εκτός από τον τρόπο που θα κληθεί το function εξαρτάτε και από το αν έχουμε strict mode. Αν όμως πάρουμε σαν παράδειγμα ότι ο κώδικας τρέχει σε browser χωρίς strict mode, τότε το σωστό είναι το global window object:

Function context

Inside a function, the value of this depends on how the function is called.

Since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a browser.

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

In strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example:

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Φυσικά και αυτό είναι σωστό, το this μέσα σε κανονικό function είναι το window object, αλλά αυτό δε σημαίνει ότι η απάντηση η δικιά μου ήταν λάθος! Πριν πολλά χρόνια και όταν η ES δεν είχε standars για το πως να δημιουργούνται classes στη Javascript, χρησιμοποιούσαμε το this για φτιάξουμε constructors και να ορίσουμε object properties από instances που δημιουργούσαμε χρησιμοποιώντας ένα function:

As a constructor

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37

Το this είναι ένα από τα πιο πολύπλοκα topics της Javascript και αυτή η ερώτηση/απάντηση/απόκριση μου έφερε στο μυαλό τον τίτλου του περίφημου βιβλίου (σειράς βιβλίων) του Kyle Simpson, “You Don’t Know JS” ο οποίος τίτλος είναι πάντα επίκαιρος για όλους μας, μηδενός εξαιρουμένου!

Παρεμπίπτοντος, η reduce (Array.prototype.reduce()) είναι πολύ «δυνατό» method του Array object που μας επιτρέπει να δημιουργήσουμε ότι αποτέλεσμα θέλουμε προσπελάζοντας τα στοιχεία ενός πίνακα. Ανήκει στα ES6 array methods όπως είναι τα map, sort, forEach, filter, find, some, every και μας γλιτώνουν από χιλιάδες γραμμές κώδικα συσσωρευτικά και αναλογικά.

Σε ερώτηση για το πως καλούμε ένα function με διαφορετικό object (this) απάντησα με την call (Function.prototype.call()) και την apply (Function.prototype.apply()) που φυσικά είναι σωστό, αλλά δεν ανέφερα καν την bind (Function.prototype.bind()) την οποία χρησιμοποιούμε παρά πολύ στα React Class Components για να αντιστοιχήσουμε class methods που έχουμε ορίσει, στο ίδιο το class, κάτι που απάντησα στη συνέχεια μετά από αναφορά και κατεύθυνση:

Bind in Constructor (ES2015)

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

Που να τη θυμάμαι τη bind… έχω πάνω από χρόνο να γράψω Class Component στη React.

Once you go Hooks there is no turning back!

Γενικώς το Class/bind/this είναι κάτι που όχι μόνο εγώ, αλλά πολλοί developers θέλουν να ξεχάσουν…

Παρ’ όλα αυτά, είναι έγκυρη και πολύ-χρησιμοποιημένη σύνταξη και φυσικά όλοι όσοι γράφουν React θα πρέπει να γνωρίζουν πως δουλεύουν όχι μόνο τα Functional Components αλλά και τα Class Components.

❌ Database indexes

Σε ερώτηση σχετικά με τα Database indexes και πότε επηρεάζονται, απάντησα όταν τα δημιουργούμε και όταν τα αλλάζουμε. Λάθος απάντηση ή ελλιπής γιατί φυσικά τα indexes επηρεάζονται και κατά την εισαγωγή δεδομένων όταν κάνουμε INSERT, κάτι που είναι (αν το καλοσκεφτούμε) αυτονόητό, όμως δεν το απάντησα και όταν ένας Senior Developer πρέπει να σχεδιάσει ή να γράψει κάτι που θα περιέχει εισαγωγές στη ΒΔ, θα πρέπει όλα αυτά να τα έχει μέσα στο μυαλό του ακαριαία γιατί οι ΒΔ που θα έχει δεν θα είναι με 100 εγγραφές, αλλά με εκατομμύρια εγγραφές.

Insert

The number of indexes on a table is the most dominant factor for insert performance. The more indexes a table has, the slower the execution becomes. The insert statement is the only operation that cannot directly benefit from indexing because it has no where clause.

…

If there are indexes on the table, the database must make sure the new entry is also found via these indexes. For this reason it has to add the new entry to each and every index on that table. The number of indexes is therefore a multiplier for the cost of an insert statement.

Will more indexes on a table affect performance?

An INSERT will touch the clustered index, or heap, and every nonclustered index. An UPDATE will touch the clustered index, or heap, and every nonclustered index that contains, at either the key or the leaf level, the column being updated. A DELETE will touch the clustered index, or heap, and every nonclustered index. An exception to these statements is when a record is filtered out of the index.

A general rule of thumb is that the more indexes you have on a table, the slower INSERT, UPDATE, and DELETE operations will be. This is why adding indexes for performance is a trade off, and must be balanced properly.

Τι δεν ρωτήθηκα

React Hooks 🤔

Καμία αναφορά στα React Functional Components και για το πως τα δημιουργούμε στη React. Καμία αναφορά στα πανίσχυρα React Hooks που από την 16.8.0 και μετά που υποστηρίζονται, είναι και ο προτεινόμενος τρόπος για την δημιουργία Components στη React:

Motivation

Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components. Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.

• It’s hard to reuse stateful logic between components
• Complex components become hard to understand
• Classes confuse both people and machines

To solve these problems, Hooks let you use more of React’s features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don’t require you to learn complex functional or reactive programming techniques.

Linters / Prettyprint 🤔

Καμία ερώτηση σχετικά με Linters και Prettyprint (Opinionated code formatters). Όλα αυτά είναι standard που καθορίζονται κατά το σχεδιασμό και την έναρξη ενός project. Πολλές εταιρίες έχουν καθολικούς κανόνες που επιβάλουν στους εργαζόμενους developers και engineers να χρησιμοποιούνε, αλλά πιο σημαντικό είναι η κατανόηση της αναγκαιότητας και της χρησιμότητας που έχουν οι Linters και οι Opinionated code formatters σε projects που δουλεύονται από ομάδες και θα δουλευτούν στο μέλλον από πολλά διαφορετικά άτομα.

CI/CD 🤔

Καμία αναφορά (εκτός από την αρχική ερώτηση για το αν γράφω Test) για Continuous Integration και Continuous Delivery. Βεβαία η Frontend θέση δεν αναφέρει πουθενά (και δεν έχει και πολύ σχέση με CI/CD) DevOps, αλλά το CI/CD είναι ένα πολύ σημαντικό κομμάτι που πρέπει να γνωρίζει σχετικά ένας Senior Engineer κατά τη γνώμη μου.

RDBMS 🤔

Επίσης καμία ερώτηση δεν δέχθηκα για σχέσεις ΒΔ, όπως Foreign Keys και operation για DELETE και UPDATE queries, όπως CASCADE, SET NULL, RESTRICT, αλλά και αυτό το κομμάτι μπορεί να θεωρηθεί κάπως απόμακρο με το Frontend, αλλά είναι πολύ σημαντικό και βασικό για Senior Engineer.

Μπορώ να γράψω αρκετά ακόμα πολύ σημαντικά θέματα που θεωρώ ότι πρέπει να γνωρίζει ένας Senior Software Engineer και που δεν ρωτήθηκα, αλλά ίσως ένας λόγος να ήταν ο χρόνος της συνέντευξης που δεν πρέπει να υπερβαίνει τα 60 λεπτά.

Επίλογος

Τα παιδία που μου πήραν τη συνέντευξη φαίνονταν πολύ καταρτισμένα και έκαναν όλη την διαδικασία να κυλάει άνετα και ομαλά. Δεν γνωρίζω αν επιλέγουν μόνοι τους τις ερωτήσεις ή τους τις δίνουν, αλλά ήταν “to the point” αν και πιστεύω ότι για τη θέση είχαν κάποιες σημαντικές ελλείψεις.

“Until the next time” που λένε και στο χωριό μου!