Необходимые hard skills по стеку. Фундаментальные знания Иванов Иван Иванович
 Скачать 79.09 Kb.
|
|
Hard skills JavaScript и браузер Стек Веб Инструменты Фундаментальные знания Иванов Иван Иванович JavaScript и браузер Суммарный уровень считается по среднему всех навыков. Навык Уровень 1 Уровень 2 Уровень 3 Уровень 4 Контекст выполнени я, this Знать: Что такое контекст Для чего он применяется в методах объектов и классов Как вычисляется контекст и чему равен по умолчанию Особенности поведения и вычисления контекста в стрелочных функциях Уметь: Привязывать и сохранять контекст через call, apply, bind Сохранять контекст через переменную self (опционально) Знать: Игнорирование контекста (например, вызов bind с первым аргументом null) Потеря контекста Связывание контекста через вызов с new Области видимости, замыкания Знать: Функциональная область видимости Блочная область видимости Разница let /const и var Поднятие переменных (всплытие) Что такое Function Declaration и его особенности Что такое Function Expression и его особенности Что такое анонимные и самовызывающи еся функции Уметь: Применять Funct ion Declaration Применять Funct ion Expression Применять анон имные и самовызывающи еся функции Знать: Замыкание и когда его стоит применять Общие принципы работы сборщика мусора (достижимость, применяемые оптимизации) Лексическое окружение Механизм поиска переменных Псевдомассив arguments Уметь: Применять замыкание Знать: Как работает V8 Лексический анализ Уметь: Применять каррирование Прототипы, классы Знать: Наследование через прототипы Уметь: Создавать экземпляры класса с помощью функции- конструктора Знать: Как работает прототипное наследование Механизм поиска метода или свойства в цепочке прототипов Работа классов, синтаксис и во что они фактически преобразуются Основные парадигмы ООП Особенности прототипов у стрелочных функций Знать: Шаблон делегирования и его риски DOM Знать: Методы поиска DOM узлов (минимум 3 метода) Методы изменения содержимого в DOM узлах Методы добавления DOM узлов Понятие и как работают "живые коллекции" Основные браузерные события Уметь: Использовать все вышеперечисле нные методы Знать: Этапы отрисовки страницы в браузере Всплытие и погружение событий, предотвращение этого механизма Делегирование событий Уметь: Использовать события браузера Использовать делегирование событий Реализовать валидацию полей формы нативными методами Знать: MutationObserver Возможные способы рендеринга страницы (Server, Static, Client) + rehydration Уметь: Проводить сравнительный анализ способов рендеринга и применять наиболее подходящий Знать: WebComponents ShadowDom Custom elements HTML templates Асинхронн ость Знать: JS - однопоточный и синхронный язык Как используются: callback Promises async/await Уметь: Применять на практике callback Promises async/await Знать: Механизм Event loop Как работают Promises Знать почему в цепочке then/catch после ошибки может быть новый then Как работают таски /микротаски Уметь: Комбинировать Promises Обрабатывать ошибки в цепочке then/catch Использовать генераторы (опционально) Знать: Как работают генераторы В каких случаях имеет смысл использовать генераторы Уметь: Применять генераторы и строить решения на основе их, в том числе с применением бесконечного цикла и комбинированием генераторов Браузер Знать: localStorage cookies Знать: Что ещё, помимо localstorage, можно применять для хранения данных на клиенте iframe Знать: WebSocket Service workers Какие существуют Web APIs (Payment Request API, Push API, Web Share API и т.д.) Уметь: Выбрать подходящий Web API исходя из задачи Реализовывать PWA (опционально) Знать: Web-workers WebGL Wasm Регулярки Знать: Про глобальный объект RegExp Методы работы со строкой: replace, match, search Уметь: Создавать экземпляры регулярок и методы: exec, test, match Использовать основные флаги: g, i, m и др. Знать: О создании регулярки через литерал , (/ab+c/) отличие от RegExp. Основные спец. символы: \d, \s и другие, в том числе границы: ^, $ и т.д. Уметь: Написать регулярное выражение с помощью специальных сервисов ( https://regex ) 101.com/ Уметь: Использовать группировки ( x ), \n, x (?: ) Использовать квантификаторы – x * и другие , x(?=y) Уметь: Оптимизировать производительность регулярок (жадный и ленивый поиск, критический возврат) Обработка исключени й, логировани е, дебаг Уметь: Использовать try-catch Использовать различные виды console (log, error, warn и т.д.) для дебага Знать Про необходимость логирования ошибок Уметь: Дебажить клиентский и серверный код через браузер, в том числе состояние redux Использовать ErrorBoundary в реакт- приложениях, продумывать возможные негативные сценарии Настраивать логирование ошибок (sentry и др.) Стек Навык Уровень 1 Уровень 2 Уровень 3 Уровень 4 React Знать: Зачем нужен React VirtualDom Жизненный цикл компонента Механизм Props Механизм State Refs Порталы Уметь: Писать классовый компонент Писать функциональный компонент Использовать Props & State Знать: HOC. Как использовать и какие есть особенности Хуки. Понимать отличие классового и функционального компонентов Роутинг в приложении, программное изменение страницы Механизм Context API SSR и механизмы реализации Уметь: Осознано выбирать классовый или функциональный компонент, исходя из задачи Настроить SSR Использовать хуки Знать: Render-props Compound components Form managers Уметь: Реализовывать render-props Реализовывать compound components Проводить сравнительный анализ и выбирать Form manager Настраивать storybook/style guidist Знать: Механизм Reconciliation Архитектура Fiber Оптимизация производительност и React приложения Redux Знать: Понятие и принципы однонаправленного потока данных Преимущества однонаправленного потока данных Связывание redux и react Стандартных подход к организации структуры приложения (из документации Redux) redux-thunk Уметь: Использовать reducers Использовать Action creators Использовать redux-thunk Привязывать redux store к react компонентам mapStateToProps и mapDispatchToProps / хуки Знать: redux-sagas, их преимущества и недостатки redux-ducks, преимущества и недостатки reselect, преимущества redux-actions / typesafe-actions (опционально) Уметь: Использовать redux-sagas Использовать redux-ducks подход Использовать reselect Знать: Immutable, область применения, преимущества и недостатки Нормализация данных, преимущества и недостатки, когда использовать Уметь: Проектировать масштабируемый стор для многостраничного приложения TS Знать: Область применения TS Базовые типы: string, array, object и т.д. Интерфейсы Enum Уметь: Подключать TS к проекту Описать простые типы данных Знать: Классы и модификаторы доступа Advanced types: Omit, Pick, и тд. Generics Optional chaining Conditional types Модули, пространство имён Уметь: Применять все вышеперечисленное Знать: Декораторы Перегрузка функций Миксины Уметь: Реализовывать все вышеперечисленное NodeJS Знать: Основы работы с process Основы работы с fs Базовые знания express/hapi Уметь: Собрать с нуля приложение на express/hapi Работать с fs Знать: Как работать с MongoDB Отличие и особенности SQL и NoSQL баз данных Аутентификация и авторизация Уметь: Подключать MongoDB к проекту Выполннять манипуляции с данными в базе данных (CRUD) Реализовывать аутентификации и авторизации Знать: Кеширование (через node-cache, например) Параллелизация через workers_threads Уметь: Реализовывать кеш ирование Реализовывать мно гопоточность Веб Навык Уровень 1 Уровень 2 Уровень 3 Уровень 4 Вёрстка Знать: Блочная модель Базовые теги HTML5 Базовые CSS свойства БЭМ Векторная и растровая графика. Преимущества и недостатки Уметь: Базово верстать Использовать БЭМ для именования классов Знать: Типографика. Типы шрифтов. Свойства для изменения шрифтов. Подключение шрифтов Базовые псевдоклассы Современные пре/постпроцессоры (SCSS, PostCSS) Современные подходы к организации стилей (CSS-Modules, CSS-in-JS) Flexbox Уметь: Использовать шрифты и работать с ними Использовать псевдоклассы Адаптивно верстать (media queries, адаптивные изображения) Верстать семантично Знать: Grid Доступность (aria, tabindex & etc.) Микроразметка Анимация Контекст наложения Уметь: Применять Grid Верстать доступные для скринридеров страницы Использовать W3C валидаторы Сеть Знать: Понимание протокола HTTP XMLHttpRequest fetch Уметь: Использовать XMLHttpRequest Использовать fetch (axios) Знать: REST Уметь: Писать серверную (NodeJS) и клиентскую часть для обмена данными Знать: Теория работы сетей. TCP/IP Произво дительн ость Знать: Метрики клиентской производительности Async, defer Уметь: Замерять производительность страницы (devtools, ) lighthouse Использовать async, defer Знать: Механизмы уменьшения размера бандла CDN Preload, prefetch Мемоизация Уметь: Использовать инструменты уменьшения размера бандла Выносить тяжелые операции на сервер Использовать мемоизацию Знать: Метрики серверной производительн ости lazy-loading Оптимизация критичного пути рендеринга Уметь: Замерять серверную производительн ость Оптимизировать критичный путь рендеринга Знать: Web-workers Уметь: Web-workers Профилировать клиент и сервер Безопас ность Знать: Основные уязвимые функции (eval, dange ) rouslySetInnerHTML Уметь: Не допускать использования уязвимый функций Выполнять проверки пакетов с помощью n pm/yarn audit Знать: CSP CORS Атрибут rel и его значения noreferr er, noopener, nofollow XSS SQL-injections Влияние HTTPS и HTTP2 на безопасность Уметь: Настраивать CSP Настраивать CORS Использовать noreferrer, noopener, nofollow Защищаться от XSS Защищаться от SQL-injections Знать: CSRF Безопасность cookie Знать: OWASP top-10 Уметь: Защищаться от OWASP top- 10 Тестиро вание Знать: Назначение unit тестов Назначение e2e тестов Уметь: Писать unit тесты с использованием jest для функций Знать: Принцип TDD Принцип AAA Моки. Зачем нужны и как применять Стабы. Зачем нужны и как применять Уметь: Писать unit тесты с использованием jest + enzyme / для реакт- React testing library компонентов Писать e2e тесты с использованием cypress Знать : Принцип BDD Оценка эффекти тестов вности Уметь: Подключать инструменты для измерения coverage Знать: 1-2 дополнительных инструмента для тестирования Уметь: Проводить анализ инструментов тестирования и выбрать наиболее подходящий Писать тесты с помощью других инструментов Инструменты Навык Уровень 1 Уровень 2 Уровень 3 Уровень 4 Git Знать: Базовые команды init config pull push commit checkout merge Договоренности по именованию коммитов Уметь: Использовать вышеописанное Решать конфликты Знать: git-flow/github-flow Сложные команды amend fixup revert cherry-pick stash reset tag log diff reflog Уметь: Делать ребейз Делать интерактивный ребейз Работать с историей коммитов Знать: git-lfs bisect hooks worktree Уметь: Использовать все вышеперечисленное Docker Знать: Что такое docker, зачем нужен Уметь: Запустить существующий контейнер Посмотреть логи запущенного контейнера Уметь: Написать свой Dockerfile Подключиться к уже существующему контейнеру Посмотреть, что запущено, найти нужный контейнер Знать: Как устроены слои в docker-образе Что такое multi-stage build Знать: Что такое docker-compose Уметь: Реализовать структуру из нескольких контейнеров через compose CI/CD Знать: Зачем нужен CI/CD Зачем нужны системы управления кластерами Jenkins Mesos/Marathon Уметь: Читать логи сборки в Jenkins Читать логи контейнера в Marathon Уметь: Настраивать прекоммитные проверки Уметь: Конфигурировать имеющиеся системы Jenkins, Marathon и другие, используемые в банке Уметь: Поднять CI/CD с нуля, выбрав подходящие системы Webpack Знать: Что такое Webpack Как работает конфигурация Зачем нужны лоадеры Зачем нужны плагины Семантическое версионирование Уметь: Собрать базовую конфигурацию для простого проекта Настроить стартовые скрипты в package.json Знать: HMR. Зачем нужен и как работает Tree shaking Разделение бандла на чанки Минификация Автоматическое сжатие картинок Разделение конфига на prod /dev Уметь: Встраивать в сборку все вышеперечисленное Использовать bundl e-analyzer Знать: Manifest. Зачем и как применять Механизмы ускорения горячей /холодной сборки проекта Как писать свои плагины для babel и postcss Уметь: Использовать все вышеперечисленное Фундаментальные знания Навык Уровень 1 Уровень 2 Уровень 3 Уровень 4 Алгоритм ы и структур ы данных Знать: Нотация Big O Стандартные алгоритмы сортировки Уметь: Оценивать сложность написанного алгоритма Выбирать верную структуру данных исходя из задачи Знать: Структура графов и деревьев Уметь: Написать алгоритм обхода графа и дерева Оптимизировать алгоритмы по потребляемой памяти Реализовывать стандартные алгоритмы сортировки и поиска Уметь оптимально подходить к решению различных алгоритмических задач Архитект урное проектир ование Знать: MVC Уметь: Выделять глобальное состояние приложения Реализовывать MVC Знать: MVP MVVM Уметь: Разделять большие сервисы на небольшие функциональные модули Реализовывать MVP, MVVM Уметь: Реализовывать монолитную архитектуру Реализовывать микросервисную архитектуру Выбирать архитектуру проекта исходя из бизнес требований, уровня команды, дальнейших планов на масштабирование и поддержку Паттерны Знать: Порождающие паттерны Фабрика Синглтон Прототип Структурные паттерны Адаптер Декоратор Фасад Поведенческие паттерны Состояние Итератор Наблюдатель Уметь: Реализовывать все вышеперечисленное Знать: Подход Dependency Injection Уметь: Выделять различные паттерны в существующем коде Декомпозировать задачу на несколько подходящих паттернов Чистый код Знать: DRY KISS YAGNI Принцип единой ответственности (SOLID) Необходимость код-ревью и единого стиля кода внутри команды Уметь: Соблюдать все вышеперечислен ные принципы Знать: Принцип открытости/закрытости (SOLID) Принцип разделения интерфейсов (SOLID) APO – избегание преждевременной оптимизации BDUF – масштабное проектирование превыше всего Уметь: Писать в подавляющем большинстве чистые функции и прибегать к мутациям и сайд- эффектам только в крайних случаях Использовать комментарии для документирования кода Знать: Принцип подстановки Барбары Лисков (SOLID) Принцип инверсии зависимостей (SOLID) Уметь: Анализировать и выбирать между ООП и функциональным подходом исходя из задачи Рефактор инг Знать: Основные принципы рефакторинга: Код должен становиться чище, при этом не должна создаваться новая функциональность Предварительно должны быть написаны тесты Уметь: Выявлять необходимость рефакторинга на основе базовых свойств "грязного" кода: размер файла трудность чтения дублирование сложность изменения Оценивать масштаб предполагаемого рефакторинга и выбирать правильный путь его проведения Уметь: Уверенно находить свойства "грязного" кода: Избыточные комментарии Неинформативные комментарии Высокая связанность кода Большое количество аргументов в функции etc Применять различные методы рефакторинга: Извлечение метода или переменной Инкапсуляция полей Разбиение условного оператора etc Применять метод рефакторинга через паттерны проектирования Оценивать объемы рефакторинга, планировать его и грамотно организовывать |