Frontend + Weekly №5: React Context API & Patterns Evolution, Web Optimize with Webpack, Page…

Лучшие статьи, ссылки и новости, связанные с Frontend-разработкой, и многое другое, доставляемые один раз в неделю. Все ссылки в этом выпуске собраны из Medium, Hacker News, Reddit, Twitter, MyBridge и т. Д.

Больше проблем можно найти в Frontend + Weekly Repository.

Новости

• Chrome будет отмечать все HTTP-сайты как« небезопасные : Google Chrome объявил, что начиная с Chrome 68 (который будет выпущен в июле 2018 г.) браузер будет отмечать незащищенные сайты (HTTP) как небезопасные , отмечая конец веб-сайтов без HTTPS. Разработчики могут использовать последнюю версию Lighthouse для узла CLI, автоматизированного инструмента для улучшения веб-страниц, чтобы определить, какие ресурсы сайт загружает с помощью HTTP, а какие из них готовы к обновлению до HTTPS, просто изменив ссылку на субресурс на версию HTTPS.
• Rollup теперь имеет разделение кода: Начиная с версии 0.55, Rollup, сборщик модулей JavaScript, наконец, имеет разделение кода, которое является самым популярным запросом функции в течение долгого времени. Rollup уже давно является предпочтительным инструментом для авторов библиотек - он поддерживает React, Vue, D3, Moment, Three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier и тысячи других инструментов, но для разделения кода означает, что теперь Rollup может стать отличным выбором для приложений любого размера.
• Приветствуем прогрессивные веб-приложения в Microsoft Edge и Windows 10: Edge 17 будет поставляться с Service Workers и Push-уведомлениями, а в Microsoft Store появится список прогрессивных веб-приложений путем отправки вручную, что является большим шагом вперед для того, чтобы сделать веб-приложения столь же удобными, как и родные приложения. В этом посте мы кратко расскажем о прогрессивных веб-приложениях: что это такое, какие проблемы они решают и как мы будем использовать их в Windows 10.

Руководство

• Что нового в React 16.3: React 16.3-alpha просто нажимает npmjs и может быть загружен и добавлен в свой проект. В этом посте будут рассмотрены новые функции в этой версии. Новый контекстный API. Новый API доступен как React.createContext () и создает для нас два компонента; Удаляются новые методы жизненного цикла componentWillMount, componentWillUpdate, componentWillReceiveProps и вводится getDerivedStateFromProps; StrictMode, чтобы убедиться, что ваш код соответствует лучшим практикам, Новая версия React Developer Tools. Подробнее об этом можно прочитать в React Reference.
• Сервис-воркеры: маленькие герои, стоящие за прогрессивными веб-приложениями: Сервис-воркеры лежат в основе прогрессивных веб-приложений. Они позволяют кэшировать ресурсы и push-уведомления, которые являются двумя основными отличительными функциями, которые до сих пор отличали нативные приложения. Этот пост будет охватывать фоновую обработку, автономную поддержку, предварительное кэширование ресурсов во время установки, кеширование сетевых запросов, установку и базовое использование и т. Д. Более подробную информацию об этом можно найти в Справочнике по PWA.
• Новый API контекста React: в этом посте будет представлен новый API Conext в React, он состоит из основных частей: React.createContext, которому передается начальное значение, возвращает объект с поставщиком и потребителем. Компонент Provider используется выше в дереве и принимает свойство с именем value (которое может быть любым). Компонент Consumer используется в любом месте ниже поставщика в дереве и принимает свойство, называемое children, которое должно быть функцией, которая принимает значение и должна возвращать элемент реакции (JSX). Подробнее об этом можно прочитать в React Reference.

Инженерные практики

• Пять распространенных проблем в приложениях GraphQL (и как их исправить): в этой статье мы научимся раскрывать возможности GraphQL, не страдая от его недостатков. Автор рассказывает о таких проблемах, как: дублирование схемы, несоответствие данных сервера / клиента, избыточные вызовы базы данных, низкая производительность и передозировка Boilerplate. Для каждой проблемы я опишу проблему, а затем объясню, как я решаю ее в Vulcan, фреймворке с открытым исходным кодом React / GraphQL, над которым я работал в течение последнего года. Дополнительную информацию об этом можно найти в Справочнике по GraphQL.
• Модули Redux и разделение кода: Twitter Lite использует Redux для управления состоянием и полагается на разделение кода. Однако API по умолчанию Redux не предназначен для приложений, которые загружаются постепенно во время пользовательского сеанса. В этом посте описывается, как я добавил поддержку инкрементной загрузки модулей Redux в Twitter Lite. Это относительно просто и проверено на производстве за несколько лет. Более подробную информацию об этом можно найти в Справочнике Redux.
• Оптимизация веб-производительности с помощью Webpack от Адди Османи: современные веб-приложения часто используют инструмент связывания для создания производственного пакета файлов (скриптов, таблиц стилей и т. Д.), Который оптимизируется, минимизируется и может быть загружен за меньшее время вашим пользователем. пользователей. В разделе Оптимизация веб-производительности с помощью веб-пакета мы рассмотрим, как эффективно оптимизировать ресурсы сайта с помощью веб-пакета. Это может помочь пользователям быстрее загружать ваши сайты и взаимодействовать с ними. Webpack - один из самых популярных инструментов для создания пакетов, используемых сегодня. Воспользовавшись его функциями для оптимизации современного кода, сценариев разделения кода на критические и некритические части и удаления неиспользуемого кода (и это лишь некоторые из оптимизаций), вы можете гарантировать, что ваше приложение будет иметь минимальные затраты на сеть и обработку. Дополнительную информацию об этом можно найти в Справочнике по Webpack.

Под капотом

• Развивающиеся шаблоны в React: давайте подробнее рассмотрим некоторые шаблоны, которые появляются в экосистеме React. Эти шаблоны улучшают читаемость, ясность кода и подталкивают ваш код к композиции и повторному использованию. Этот пост будет охватывать условный рендеринг, передачу свойств вниз, деструктурирование свойств, шаблон провайдера, компоненты высокого порядка, свойства рендеринга и т. Д. Более подробную информацию об этом можно найти в React Reference.
• Справочник фронтенд-собеседований: в отличие от типичных собеседований с программистами, на собеседованиях с фронтенд-инженерами меньше внимания уделяется алгоритмам и больше вопросов по сложным знаниям и опыту в предметной области - HTML, CSS, JavaScript, и это лишь некоторые области. Хотя существуют некоторые ресурсы, которые могут помочь фронтенд-разработчикам в подготовке к собеседованию, их не так много, как материалов для собеседования с инженером-программистом. Среди существующих ресурсов, вероятно, наиболее полезным банком вопросов были бы вопросы собеседования с фронтенд-разработчиком. И этот пост - почти полные ответы на Вопросы о собеседовании с интерфейсом пользователя. Дополнительную информацию об этом можно найти в Awesome Web Reference.
• Как научить ИИ преобразовывать макеты дизайна в HTML и CSS: в течение трех лет глубокое обучение изменит интерфейсную разработку. Это увеличит скорость прототипирования и снизит барьер для создания программного обеспечения. Эта область взлетела в прошлом году, когда Тони Белтрамелли представил pix2code paper, а Airbnb запустил sketch2code. В настоящее время самым большим препятствием для автоматизации фронтенд-разработки являются вычислительные мощности. Тем не менее, мы можем использовать текущие алгоритмы глубокого обучения вместе с синтезированными обучающими данными, чтобы начать изучение искусственной клиентской автоматизации прямо сейчас. В этом посте мы научим нейронную сеть кодировать базовый веб-сайт HTML и CSS на основе изображения макета дизайна. Дополнительную информацию об этом можно найти в Awesome Web Reference.

Открытый источник

• Automerge ： Automerge - это библиотека структур данных для создания совместных приложений на JavaScript или структура данных, подобная JSON, которая может быть изменена одновременно разными пользователями и снова автоматически объединена. Общий подход к созданию приложений JavaScript включает в себя сохранение состояния вашего приложения в объектах модели, таких как документ JSON, Automerge используется аналогичным образом, но большая разница в том, что он поддерживает автоматическую синхронизацию и слияние.
• Winamp2-js: это повторная реализация Winamp 2.9 в HTML5 и JavaScript. Он включает в себя следующие функции: декодирует фактический файл скина в вашем браузере, чтобы вы могли загружать свои любимые скины Winamp 2, загружать локальные аудио или файлы скинов с помощью перетаскивания, кнопки извлечения или кнопки Параметры (верхний левый угол ), и т.д.
• Rekit # JavaScript #: Rekit - это набор инструментов для создания масштабируемых веб-приложений с помощью React, Redux и React-router. Это универсальное решение для создания современных приложений React. Это помогает вам сосредоточиться на бизнес-логике, а не на огромных библиотеках, шаблонах, конфигурациях и т. Д. Rekit создает приложения, используя упорядоченную структуру папок и кода. Он спроектирован так, чтобы быть масштабируемым, тестируемым и поддерживаемым за счет использования функционально-ориентированной архитектуры, одно действие для каждого шаблона файла. Это гарантирует, что логика приложения хорошо сгруппирована и разделена.
• WebAssemblyStudio: Onine студия для изучения, обучения, работы и игры в WebAssembly, поддерживает C ++ и Rust. Пользователь может создавать и запускать wasm-проекты в браузере, а также может запускать локальную копию, для чего необходимо установить node.js и webpack на ваш компьютер.

Рабочая жизнь

• Как N26 создал современное банковское программное обеспечение с помощью JavaScript и микросервисов: Патрик Куа, технический директор N26, успешного банковского стартапа из Германии. Патрик - эксперт по микросервисам, проработавший 13 лет в ThoughtWorks, а затем решил возглавить техническую команду в современной банковской компании, которая уже обслуживает более 500 000 пользователей. Цель этого поста - понять, как команда Патрика выбирает языки и фреймворки, которые они используют, как они проводят тестирование, DevOps и непрерывную интеграцию, а также как они разрабатывают микросервисы.