Профессиональный TypeScript

Любой программист, работающий с языком с динамической типизацией, подтвердит, что задача масштабирования кода невероятно сложна и требует большой команды инженеров. Вот почему Facebook, Google и Microsoft придумали статическую типизацию для динамически типизированного кода.
Работая с любым языком программирования, мы отслеживаем исключения и вычитываем код строку за строкой в поиске неисправности и способа ее устранения. TypeScript позволяет автоматизировать эту неприятную часть процесса разработки.
TypeScript, в отличие от множества других типизированных языков, ориентирован на прикладные задачи. Он вводит новые концепции, позволяющие выражать идеи более кратко и точно, и легко создавать масштабируемые и безопасные современные приложения.
Борис Черный помогает разобраться со всеми нюансами и возможностями TypeScript, учит устранять ошибки и масштабировать код.

👉 @frontendInterview

Что такое сверка (reconciliation) в React?

Сверка — это алгоритм React, используемый для того, чтобы отличить одно дерево элементов от другого для определения частей, которые нужно будет заменить.

За сверкой стоит то, что мы привыкли называть «Virtual DOM». Определение звучит как-то так: когда вы рендерите React приложение, дерево элементов, которое описывает приложение генерируется в зарезервированной памяти.

Это дерево потом включается в рендеринг окружение — на примере браузерного приложения, оно переводится в набор DOM операций. Когда состояние приложения обновляется (обычно вызовом setState), новое дерево генерируется.

Новое дерево сравнивается с предыдущим, чтоб просчитать и включить именно те операции, которые нужны для перерисовки обновленного приложения.

👉 @frontendInterview

👉 @frontendInterview

Зачем нужен атрибут key в React?

Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени.

 const numbers = [1, 2, 3, 4, 5];
 const listItems = numbers.map((number) =>
   <li key={number.toString()}>
     {number}
   </li>
 );

Лучший способ выбрать ключ — это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи.

Не рекомендуется использовать индексы как ключи, если порядок элементов может поменяться. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента.

👉 @frontendInterview

👉 @frontendInterview

PureComponent

React.PureComponent похож на React.Component. Отличие заключается в том, что React.Component не реализует shouldComponentUpdate(), а React.PureComponent реализует его поверхностным сравнением пропсов и состояния.

Если метод render() вашего React-компонента всегда рендерит одинаковый результат при одних и тех же пропсах и состояниях, для повышения производительности в некоторых случаях вы можете использовать React.PureComponent.

👉 @frontendInterview

👉 @frontendInterview

Структуры данных и проектирование программ

В качестве фундаментальных средств разработки программ рассматриваются такие вопросы, как структурное решение задач, абстракция данных, принципы программной инженерии и сравнительный анализ алгоритмов. Дано полное освещение большинства модулей знаний, касающихся структур данных и алгоритмов.
Большая часть глав начинается основной темой и сопровождается примерами, приложениями и практическими исследованиями.
Это учебное пособие дает основательные знания, которые позволяют студентам по ходу своей дальнейшей работы использовать его также в качестве справочного пособия.

👉 @frontendInterview

V A P O R C O D E

Создайте функцию, которая будет преобразовывать строку в стиле V A P O R W A V E. Для этого нужно все буквы преобразовать в заглавные и добавить по два пробела между ними

Пример:

 "Lets go to the movies" 
 //  "L  E  T  S  G  O  T  O  T  H  E  M  O  V  I  E  S"

👉 @frontendInterview

Что такое модули (Modules)?

Модули позволяют объединять (использовать) код из разных файлов и избавляют нас от необходимости держать весь код в одном большом файле. До появления модулей в JS существовало две популярные системы модулей для поддержки кода:

1. CommonJS — Nodejs
2. AMD (AsyncronousModuleDefinition) — Browsers

Синтаксис модулей очень простой: мы используем import для импорта функциональности или значений из другого файла или файлов и export для экспорта.

Экспорт функциональности в другой файл (именной экспорт):
// ES5 CommonJS - helpers.js
exports.isNull = function(val){
return val === null
}
// ES6 модули
export function isNull(val){
return val === null;
}

Импорт функциональности в другой файл:
// ES5 CommonJS - index.js
const helpers = require('./helpers.js')

// ES6 модули
import * as helpers from './helpers.js' // helpers - это объект

👉 @frontendInterview

👉 @frontendInterview

Как создать объект, не имеющий прототипа?

Это можно сделать с помощью Object.create:

 const o1 = {}
 console.log(o1.toString) // [object Object]

const o2 = Object.create(null)
// в качестве первого параметра методу Object-create передается объект-прототип
// нам не нужен объект-прототип, поэтому передаем null
console.log(o2.toString) // o2.toString is not a function

👉 @frontendInterview

​Как бы Вы реализовали метод Array.prototype.filter?

function filter(arr, filterCallback) {
// проверяем передаваемые параметры
if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') {
return []
} else {
let result = []
for (let i = 0, len = arr.length; i < len; i++) {
// определяем соответствие возвращаемого результата заданному условию
if (filterCallback(arr[i], i, arr)) {
// помещаем значение, прошедшее фильтр, в result
result.push(arr[i])
}
}
return result
}
}

👉 @frontendInterview

Когда написал 10 строчек кода без помощи гугла

👉 @frontendInterview