Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
256K+
JavaScript *
Прототипно-ориентированный язык программирования
246,28
Рейтинг
11 инструментов для разработки микрофронтендов, о которых стоит знать
9 мин
Перевод
В сфере серверного программирования разбиение традиционных монолитных бэкендов на микросервисы позволило добиться невиданной прежде эффективности работы и недоступных ранее возможностей по масштабированию проектов. Но, несмотря на это, большинство фронтенд-систем всё ещё представляют собой монолиты. Это усложняет оптимизацию работы над такими системами и препятствует улучшению их масштабирования.
Идея, лежащая в основе микрофронтендов, заключается в разбиении монолитной клиентской части веб-проекта на более мелкие части, которыми легче управлять. При таком подходе у каждой команды, занятой на проекте, есть собственный участок работ, команды отвечают лишь за некий фрагмент проекта и полностью самостоятельно занимаются его развитием. Так, каждая команда работает с собственной кодовой базой, независимо от других выпускает новые версии своей подсистемы, непрерывно вносит в неё небольшие инкрементальные улучшения. Интеграция этой подсистемы с другими фрагментами приложения, работой над которыми занимаются другие команды, осуществляется посредством API. При такой схеме работы интерфейсные части проектов собирают из независимых фрагментов, работающих сообща.
Дэн Абрамов, в мае прошлого года, писал в своём Твиттере о том, что он не понимает микрофронтенды. Он полагает, что задачи, которые они должны решать, уже решены средствами хороших компонентных моделей. «Может, микрофронтенды — это решение организационных проблем, а не технических? Например, когда две команды разработчиков не могут ни о чём договориться, в том числе — об инфраструктуре проекта», — размышляет он.
Существует много подходов к разработке микрофронтендов: от интеллектуальной интеграции компонентов во время сборки проекта до организации совместной работы разных частей приложения во время выполнения кода путём использования особых подходов к маршрутизации. В этом материале я собрал самые заметные инструменты, направленные на разработку микрофронтендов.
Идея, лежащая в основе микрофронтендов, заключается в разбиении монолитной клиентской части веб-проекта на более мелкие части, которыми легче управлять. При таком подходе у каждой команды, занятой на проекте, есть собственный участок работ, команды отвечают лишь за некий фрагмент проекта и полностью самостоятельно занимаются его развитием. Так, каждая команда работает с собственной кодовой базой, независимо от других выпускает новые версии своей подсистемы, непрерывно вносит в неё небольшие инкрементальные улучшения. Интеграция этой подсистемы с другими фрагментами приложения, работой над которыми занимаются другие команды, осуществляется посредством API. При такой схеме работы интерфейсные части проектов собирают из независимых фрагментов, работающих сообща.
Дэн Абрамов, в мае прошлого года, писал в своём Твиттере о том, что он не понимает микрофронтенды. Он полагает, что задачи, которые они должны решать, уже решены средствами хороших компонентных моделей. «Может, микрофронтенды — это решение организационных проблем, а не технических? Например, когда две команды разработчиков не могут ни о чём договориться, в том числе — об инфраструктуре проекта», — размышляет он.
Существует много подходов к разработке микрофронтендов: от интеллектуальной интеграции компонентов во время сборки проекта до организации совместной работы разных частей приложения во время выполнения кода путём использования особых подходов к маршрутизации. В этом материале я собрал самые заметные инструменты, направленные на разработку микрофронтендов.
От небольшого вики-портала до хостинга
3 мин
Предыстория
Я как-то пытался создать статью на паре вики-проектов, но их потерли так как они не имеют энциклопедической ценности, и вообще походу если ты пишешь о чем-то новом и неизвестном — это принимается за пиар. Через некоторое время моя статья была удалена. Я сначала расстроился, но в обсуждении для меня было приглашение на другой небольшой вики проект обо всем (а потом мне предложили написать статью еще для одного сайта). Я о нем никогда не слышал, но все равно был рад написать статью для сайта, которым кто-то занимается. Кстати оба проекта обновляются, есть в поиске и их читают — для меня это было достаточно чтобы написать обзор на свой проект. Оба сайта кажется были на движке MediaWiki или каком-то похожем, и внешне походили на любой другой популярный вики-портал.
От вики-сайта до вики-движка
Почему я разочаровался в хуках
9 мин
Перевод
Перевод статьи подготовлен в преддверии старта курса «React.js Developer».
Прежде чем я расскажу, в чем и почему разочаровался, я хочу официально заявить, что, вообще-то, я фанат хуков.
Я часто слышу, что хуки создали для замены классовых компонентов. К сожалению, пост «Введение в хуки», опубликованный на официальном сайте React, рекламирует это нововведение, прямо скажем, неудачно:
Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.
Чем полезны хуки?
Прежде чем я расскажу, в чем и почему разочаровался, я хочу официально заявить, что, вообще-то, я фанат хуков.
Я часто слышу, что хуки создали для замены классовых компонентов. К сожалению, пост «Введение в хуки», опубликованный на официальном сайте React, рекламирует это нововведение, прямо скажем, неудачно:
Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.
Готовимся к собеседованию по фронтенду: 15 вопросов
6 мин
Перевод
Автор статьи, перевод которой мы сегодня публикуем, приводит 15 вопросов, которые задавали на собеседованиях ему, и которые он задавал соискателям на должности фронтенд-разработчиков сам.
Микросервисы во фронтенде
6 мин
Туториал
Привет, Хабр!
Микросервисы уже давно стали классикой в бэкенд архитектуре, но в отличие от бэкенда, во фронтенде одновременно можно использовать только один фреймворк. Это порождает неудобства при масштабировании и переиспользовании модулей. Микросервисный подход избавляет от необходимости придерживаться конкретного фреймворка и дает возможность программисту сосредоточиться на конкретном модуле с использованием наиболее удобных для него инструментов. Мы не пропагандируем расширение зоопарка технологий и использование каждого фреймворка необходимо тщательно обдумать, прежде чем внедрять. Подробнее — в статье от разработчика команды BSL gyk007.
Компоновщик в JavaScript
5 мин
Перевод
Перевод статьи подготовлен в преддверии старта курса «JavaScript Developer. Basic».
В этой статье мы разберем один из структурных шаблонов проектирования в JavaScript — компоновщик. В программной инженерии компоновщик позволяет обращаться к группам объектов так, как будто они являются отдельными объектами, что обеспечивает единообразие общей структуры этих объектов и их комбинаций.
Главная задача компоновщика — объединение множества объектов в единую древовидную структуру. Эта древовидная структура представляет иерархию, построенную по принципу от частного к целому.
Чтобы лучше понять принцип действия компоновщика, нужно представлять, как устроена иерархия от частного к целому и как ее можно изобразить визуально.
В этой статье мы разберем один из структурных шаблонов проектирования в JavaScript — компоновщик. В программной инженерии компоновщик позволяет обращаться к группам объектов так, как будто они являются отдельными объектами, что обеспечивает единообразие общей структуры этих объектов и их комбинаций.
Главная задача компоновщика — объединение множества объектов в единую древовидную структуру. Эта древовидная структура представляет иерархию, построенную по принципу от частного к целому.
Чтобы лучше понять принцип действия компоновщика, нужно представлять, как устроена иерархия от частного к целому и как ее можно изобразить визуально.
TypeScript. Продвинутые типы
16 мин
Привет, Хаброжители! Мы сдали в типографию очередную новинку
"Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений". В этой книге программисты, которые уже знакомы с JavaScript на среднем уровне, узнают, как освоить TypeScript. Вы поймете, как TypeScript поможет масштабировать код в 10 раз лучше и снова сделать программирование увлекательным.
Вашему вниманию представлен отрывок одной главы из книги «Продвинутые типы».
Frontend Live 2020: новый формат — новые возможности
10 мин
В этом году на Frontend Live мы снова обсуждаем самые актуальные в разработке темы: будет 4 трека по архитектуре, производительности, тестированию и дизайну. Но будем обсуждать и смежные вопросы, так как frontend продолжает развиваться и расширяться, появляются интересные решения старых (и новых) проблем, и, конечно, новинки для изучения.
Как всегда, кроме докладов, будут ещё интенсивы, мастер-классы и воркшопы, и, конечно, открытые обсуждения (это может каждый — предложите тему для обсуждения и приглашайте участников).
Для расширения вашего горизонта мы снова выбрали только креативные и практичные доклады о реально работающих проектах. Будут доклады и о новых идеях, и демонстрации на тему, как это всё устроено и работает. На мастер-классах расскажем, как команды решают внезапно возникшие трудности, какие новые ноу-хау изобрели и что получили на выходе. А еще мы поговорим о красоте.
Как всегда, кроме докладов, будут ещё интенсивы, мастер-классы и воркшопы, и, конечно, открытые обсуждения (это может каждый — предложите тему для обсуждения и приглашайте участников).
Для расширения вашего горизонта мы снова выбрали только креативные и практичные доклады о реально работающих проектах. Будут доклады и о новых идеях, и демонстрации на тему, как это всё устроено и работает. На мастер-классах расскажем, как команды решают внезапно возникшие трудности, какие новые ноу-хау изобрели и что получили на выходе. А еще мы поговорим о красоте.
Путь к Федеративному GraphQL
11 мин
Перевод
Программисты любят хорошие истории, поэтому надеюсь что пятилетний путь к композитному API с помощью GraphQL в боевой среде (на пике выдающей 110 запросов в секунду при 100мс задержке) будет интересен.
[Если вы спешите, проскрольте ниже к урокам и гляньте на открытый код graphql-schema-registry]
Безопасность npm-проектов, часть 2
8 мин
Всем привет! В прошлых постах мы поговорили о том, как команда npm обеспечивает безопасность, а также начали рассматривать инструменты, помогающие нам повысить безопасность проектов. Я хочу продолжить разговор и рассмотреть следующий набор полезных инструментов.
Работа с непредвиденными данными в JavaScript
8 мин
Перевод
Одна из основных проблем в работе с динамически типизированными языками заключается в том, что невозможно всегда гарантировать правильность потока данных, так как невозможно принудительно задать для параметра или переменной значение, например отличное от null. В таких случаях мы, как правило, используем простой код:
function foo (mustExist) {
if (!mustExist) throw new Error('Parameter cannot be null')
return ...
}Проблема при использовании такого подхода заключается в загрязнении кода, так как приходится тестировать переменные везде и нет возможности гарантировать, что все разработчики будут действительно выполнять этот тест всегда, особенно в ситуациях, когда переменная или параметр не может иметь значение null. Часто мы даже не знаем, что такой параметр может иметь значение undefined или null — так часто бывает, когда над клиентской и серверной частями работают разные специалисты, то есть в подавляющем большинстве случаев.
Чтобы немного оптимизировать этот сценарий, я начал искать, как и с помощью каких стратегий лучше всего свести к минимуму фактор неожиданности. Именно тогда мне попалась великолепная статья Эрика Эллиотта. Цель этой работы — не полностью опровергнуть его статью, а добавить интересную информацию, которую мне удалось обнаружить со временем благодаря опыту в сфере разработки на JavaScript.
React: слоты как у сына маминой подруги
4 мин
При композиции компонентов очень часто возникает задача точечной кастомизации содержимого какого-либо компонента. Например, у нас есть компонент DatePicker, и в разных частях веб-приложения нам нужно отображать разные кнопки "Применить".
Для решения подобных задач в каждой популярной технологии сегодня применяется концепция "слотов". У Angular есть ngContent, во Vue, Svelte и WebComponents есть слоты.
Ближайшие события
6 рекомендаций по разработке масштабируемых React-проектов
7 мин
Перевод
В начале работы над новым React-проектом рекомендуется сформулировать инструкции, следуя которым можно будет создать приложение, хорошо поддающееся масштабированию.
В этом материале я хочу поделиться знаниями о React-разработке, накопленными за годы использования этой библиотеки. Они помогут вам в формировании вашего собственного свода правил по разработке React-приложений.
В этом материале я хочу поделиться знаниями о React-разработке, накопленными за годы использования этой библиотеки. Они помогут вам в формировании вашего собственного свода правил по разработке React-приложений.
Как перенести на TypeScript большую кодовую базу React UI-компонентов
12 мин
Привет! Меня зовут Иван Греков, я работаю UI-разработчиком в frontend-команде Badoo. Главные задачи нашей команды — создание новых и поддержка существующих пользовательских интерфейсов для сайтов и приложений Badoo и Bumble.
Когда в конце 2019 года мы начали параллельно работать над несколькими проектами, мы задумались над повышением стабильности кода и возможностью его многократного использования. Для этого мы решили переписать наши 630 React UI-компонентов на TypeScript. Я расскажу о том, как мы работали над ними без перерыва в доставке фич и как организовали поэтапный переход на TypeScript для UI-разработчиков, которым этот язык был в новинку.
JavaScript: полное руководство по классам
10 мин
Перевод
Доброго времени суток, друзья!
В JavaScript используется модель прототипного наследования: каждый объект наследует поля (свойства) и методы объекта-прототипа.
Классов, используемых в Java или Swift в качестве шаблонов или схем для создания объектов, в JavaScript не существует. В прототипном наследовании есть только объекты.
Прототипное наследование может имитировать классическую модель наследования от классов. Для этого в ES6 было представлено ключевое слово class: синтаксический сахар для прототипного наследования.
В данной статье мы научимся работать с классами: определять классы, их частные (приватные) и открытые (публичные) поля и методы, а также создавать экземпляры.
В JavaScript используется модель прототипного наследования: каждый объект наследует поля (свойства) и методы объекта-прототипа.
Классов, используемых в Java или Swift в качестве шаблонов или схем для создания объектов, в JavaScript не существует. В прототипном наследовании есть только объекты.
Прототипное наследование может имитировать классическую модель наследования от классов. Для этого в ES6 было представлено ключевое слово class: синтаксический сахар для прототипного наследования.
В данной статье мы научимся работать с классами: определять классы, их частные (приватные) и открытые (публичные) поля и методы, а также создавать экземпляры.
Прототипы в JS и малоизвестные факты
7 мин
Лирическое вступление
Получив в очередной раз кучу вопросов про прототипы на очередном собеседовании, я понял, что слегка подзабыл тонкости работы прототипов, и решил освежить знания. Я наткнулся на кучу статей, которые были написаны либо по наитию автора, как он "чувствует" прототипы, либо статья была про отдельную часть темы и не давала полной картины происходящего.
Оказалось, что есть много неочевидных вещей из старых времён ES5 и даже ES6, о которых я не слышал. А еще оказалось, что вывод консоли браузера может не соответствовать действительности.
Картинка, которая одновременно является кодом на Javascript
6 мин
Перевод
Изображения обычно хранятся как двоичные файлы, а файл Javascript по сути является обычным текстом. Оба типа файлов должны следовать собственным правилам: изображения имеют конкретный формат файла, определённым образом кодирующий данные. Для того, чтобы файлы Javascript можно было исполнять, они должны следовать определённому синтаксису. Я задался вопросом: можно ли создать файл изображения, одновременно являющийся допустимым синтаксисом Javascript, чтобы его можно было исполнять?
Прежде чем вы продолжите чтение, крайне рекомендую изучить эту песочницу кода с результатами моих экспериментов:
https://codesandbox.io/s/executable-gif-8yq0j?file=/index.html
Если вы хотите посмотреть изображение и изучить его самостоятельно, то скачать его можно отсюда:
https://executable-gif.glitch.me/image.gif
О реализации структуры данных Map в V8
9 мин
Перевод
В стандарте ECMAScript 2015, известном как ES6, появилось много новых JavaScript-коллекций, таких, как
Map, Set, WeakMap и WeakSet. Они, судя по всему, стали отличным дополнением к стандартным возможностям JavaScript. Они получили широкое применение в различных библиотеках, в приложениях, в ядре Node.js. Сегодня мы поговорим о коллекции Map, попытаемся разобраться с особенностями её реализации в V8 и сделаем некоторые практические выводы, основанные на полученных знаниях.Стандарт ES6 не содержит чёткого указания на подход, который должен быть использован для реализации поддержки структуры данных
Map. В нём лишь даны некоторые подсказки по возможным способам её реализации. Там же приведены сведения об ожидаемых от Map показателях производительности:Объект Map должен быть реализован либо с использованием хеш-таблиц, либо с применением других механизмов, которые, в среднем, обеспечивают доступ к элементам коллекции за сублинейное время. Структуры данных, используемые в спецификации объекта Map, предназначены лишь для описания наблюдаемой семантики объектов Map. Они не задумывались как реальная модель реализации этих объектов.
Как видно, спецификация даёт тем, кто создаёт JS-движки, большую свободу. Но при этом здесь нет определённых указаний, касающихся конкретного подхода, используемого для реализации
Map, его производительности, характеристик потребления памяти. Если в критически важной части вашего приложения используются структуры данных Map, и если вы записываете в такие структуры данных большие объёмы информации, то основательные знания о реализации Map, определённо, принесут вам большую пользу.
Я сделал свой PyPI-репозитарий с авторизацией и S3. На Nginx
11 мин
В данной статье хочу поделится опытом работы с NJS, интерпретатора JavaScript для Nginx разрабатываемого в компании Nginx inc, описав на реальном примере его основные возможности. NJS это подмножество ЯП JavaScript, которое позволяет расширить функциональность Nginx.