Дайджест свежих материалов из мира фронтенда за последнюю неделю №486 (20 — 26 сентября 2021)


Прототипно-ориентированный язык программирования


Развитие языка JavaScript постепенно переносит всю тяжесть вычислений с одного сервера на сеть пользовательских компьютеров. Это супер-хорошо. Программирование на стороне сервера вынуждало очень тщательно оптимизировать код по быстродействию и занимаемой памяти, в то же время разработка клиентской части несколько отставала.
Для удобного и быстрого кодирования можно применять структуры данных. Именно так и поступают при разработке на Java:
https://habr.com/ru/post/237043/
А вот для аналогичной работы с JavaScript оптимизированных инструментов по умолчанию не предоставляется. Реализация Array(), Set() и Map() перекладывается на сторонних разработчиков браузерных движков, а их разработки на сегодняшний день далеки от оптимальности:
https://habr.com/ru/company/ruvds/blog/518032/
Зададимся вопросом — а что если требуются прямо сейчас оптимальные по производительности и памяти структуры данных. Какой минимальный набор достаточно оптимальных структур реализовать и поддерживать? Один из вариантов ответа — это сделать двунаправленный связный список и сбалансированное дерево поиска.
Что это нам даст?
Реализуя связный список LinkedList мы получаем сразу список, двунаправленную очередь и стек. И если это сделать без JavaScript Array(), а лишь используя простые ссылки на объекты, то получаем стандартную и достаточно оптимальную структуру данных.
Если же сделать бинарное сбалансированное дерево поиска TreeMap, например AVL-дерево:
https://habr.com/ru/post/150732/
тогда используя эту реализацию можно получить следующие структуры данных:

Делюсь впечатлениями как я поучаствовал в конкурсе Яндекс "One Day Offer Frontend". Суть в том, что надо пройти онлайн соревнование - решить за 3часа 5 задач, можно частично. Задачи на алгоритмы и верстку на 5, 45, 70, 90 и 90 баллов. Надо набрать >=100 баллов и тогда будет уже онлайн собес с людьми 25 сентября и оффер в одну из команд Я.Такси, Маркет или Поиск если все будет ОК.

Вёрстка — это первое, чему обычно учатся начинающие фронтендеры. Но когда вёрстки в вашем проекте становится очень много, поменять что-то — особенно везде и сразу — становится непросто. Переверстать большой проект, как правило, почти нереально. И если начинает казаться, что в какой-то задаче это нужно, вероятно, пришло время для более нестандартных методов.
Всем привет! Меня зовут Юрий Голубев, я разрабатываю frontend в Почте Mail.ru. Сегодня я хочу поделиться опытом того, как мы добавили адаптивности и возможности кастомизации в интерфейс, а заодно — открыли новый для себя способ написания адаптивных компонентов.
Для многих в разработке программ самыми большими проблемами являются (а) их сложность и (б) изменчивость требований. Решение обеих проблем — в декомпозиции целого приложения на более мелкие части (пакеты, модули, классы и функции). Декомпозиция для уменьшения сложности в целом достаточно проста (закон Миллера). Но нужно не просто разбить приложение на части, а сделать эти части устойчивыми к изменениям требований.
В этой публикации я пытаюсь поразмышлять на следующие вопросы: из каких элементов состоит JavaScript-код? каким образом эти элементы взаимодействуют друг с другом? можно ли как-то повысить устойчивость кода к изменениям?

Что объединяет фронтендеров и мобильных разработчиков? И те, и другие ругаются на бэкенд!
Если говорить серьёзнее, понятно, что общего много: они работают на клиентской стороне, имеют дело с UI и так далее. Но технологии в вебе и мобильных приложениях различаются, так что технические доклады им нужны разные. А 29 сентября состоится онлайн-митап для тех и других сразу — как это возможно?
Секрет в том, что у митапа будут два параллельных трека (каждый из трёх докладов). Так что фронтендеры смогут узнать полезное на одном, «мобильщики» — на другом. В мобильном треке освещены и iOS, и Kotlin Multiplatform, и Flutter, так что есть интересное для самых разных специалистов. И состав спикеров заметный: например, Виталия Фридмана уже знают многие JS-разработчики, а Александр Денисов отлично известен Flutter-сообществу.
Под катом — подробное описание программы. А тут добавим, что при начале в 19:00 доклады завершатся уже в 21:05, так что полностью выпадать из жизни вечером среды не придётся. Впрочем, можно не только смотреть доклад, но и подключаться к дискуссии после него, и вот сколько времени вы там промучаете спикера вопросами — это больше от вас зависит.

Меня зовут Даниил Охлопков, и я расскажу про свой подход к написанию скриптов, извлекающих данные из интернета: с чего начать, куда смотреть и что использовать.
Написав тонну парсеров, я придумал алгоритм действий, который не только минимизирует затраченное время на разработку, но и увеличивает их живучесть, робастность и масштабируемость.

useCallback используется для мемоизации коллбеков в компонентах, а useMemo используется для мемоизации значений. По своей сути, эти два хука ничем не отличаются и предназначение у них одно и тоже - хранение данных. Строение идентичное, как и в useEffect и useLayoutEffect, первым аргументом идёт коллбек и вторым - массив зависимостей.
Вот несколько вопросов:

Обучение программированию может быть сложной задачей, особенно когда не ясно, с чего начать. Лучший способ улучшить свои навыки программирования - использовать их для создания проектов.
Вот лучшие проекты для разработчика, которые укрепят вашу уверенность и помогут стать лучшим фронтедером, независимо от того, новичок вы или недавно вернулись к программированию. Я также отметил технологии, которые можно использовать в каждом проекте, но не стесняйтесь использовать любой из ваших любимых языков программирования или фреймворков.

Привет, друзья!
Я — JavaScript-разработчик. Код пишу в основном на React (иногда на Vue), немного на TypeScript, немного на Node, немного знаю SQL, но...
PythonPythonPythonPython (раньше Гугл тоже его любил, но теперь у него есть Go)Короче говоря, сложно было не заинтересоваться Python.
Как известно, лучший способ научиться "кодить" — это писать код.
Предлагаю вашему вниманию 50 популярных в сфере программирования задач, решенных с помощью Python и JavaScript.
Цель — сравнить языки на предмет предоставляемых ими возможностей.
Задачки не очень сложные, хотя имеется парочка из категории продвинутых.
Предполагается, что вы владеете хотя бы одним из названных языков на среднем уровне.

Mongoose представляет специальную ODM-библиотеку (Object Data Modelling) для работы с MongoDB, которая позволяет сопоставлять объекты классов и документы коллекций из базы данных.
Redis (Remote Dictionary Server)- это быстрое хранилище данных типа «ключ‑значение» в памяти, активно используемое в разработке с целью повышения производительности сервисов
В рамках данного гайда мы рассмотрим связку Mongoose + Redis и посмотрим, как обеспечить максимально удобное взаимодействие между ними
Здравствуйте, меня зовут Дмитрий Карловский и у меня… посттравматическое стрессовое расстройство после генерации сорсмапов. И сегодня, с вашей помощью, мы будем это лечить путём максимально глубокого погружения в травмирующие события.

Это — текстовая расшифровка выступления на HolyJS'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.
Сегодня посмотрим на более хитрые трюки с такими директивами-контроллерами и попробуем сделать метаконтроллер, который, в свою очередь, состоит из других контроллеров. Все это будет происходить в рамках безграничных возможностей Dependency Injection в Angular.

React.js - довольно простая в понимании и относительно легкая в освоении библиотека, особенно учитывая широкий выбор материалов, призванных помочь новичкам. Но каждый инструмент имеет свою долю уловок и проблем, которые обычно эти материалы не затрагивают. Вы сталкиваетесь с ними, когда кто-то проверяет ваш код или, того хуже, когда вы предстаете лицом к лицу с проблемой и отчаянно пытаетесь найти решение. Надеюсь, в этой статье я смогу раскрыть некоторые из этих моментов в React и, может, даже удивить вас!

Композиция вместо наследования — это принцип, согласно которому классы должны достигать полиморфного поведения и повторного использования кода путем их композиции, а не наследования от базы.
Наследование
Чтобы лучше понять, почему мы можем предпочесть композицию наследованию, давайте сначала рассмотрим наследование в Javascript, а именно в ES6. Ключевое слово extends используется в объявлениях или выражениях для создания класса, который является дочерним по отношению к другому.

Первое, что нужно понять об операторах, - это почему они существуют. Они существуют, потому что observables как тип позволяют нам обрабатывать события (или значения во времени) как множества или набор вещей.
Говоря более просто, любое четко определенное множество будет иметь операции, которые могут быть выполнены с ним, которые могут преобразовать его в новое множество того же типа. Например, предположим, что у нас есть грузовик с яблоками. Мы могли бы превратить его в грузовик с нарезанными яблоками с помощью машины для нарезки яблок. Та же самая машина для нарезки яблок затем может быть использована на любом грузовике с яблоками, чтобы превратить их в грузовик, загруженный нарезанными яблоками. В этом случае машина для нарезки яблок будет считаться «оператором», который сопоставляет яблоки с ломтиками яблок. Точно так же мы могли бы иметь грузовик с сахаром, мукой, яйцами и т. д. И объединить их с грузовиком с ломтиками яблока, чтобы сделать грузовик с яблочными пирогами, используя какую-то машину для производства пирогов. Итак, в этом примере грузовик - это тип множества, машина для нарезки яблок или машина для изготовления пирогов будут «операторами», а сахар, яблоки, ломтики яблок, яйца и т. д. Будут просто значениями, переносимыми нашим типом множества.

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


Привет, Хабр!
Я Саша Шутай, backend-тимлид в компании AGIMA. Сейчас расскажу, что делать, если на проекте Bitrix сожительствует с Vue.js и поисковые боты не видят контента вашего сайта. Рассмотрим технологию серверного рендеринга страниц с помощью Puppeteer, как это всё настроить и быстро запустить для любого веб-приложения.