Front-Еnd дайджест #26: Yarn 1.0, потоки в JS, Atom-IDE, начинаем писать на Reason и WebAssembly

В выпуске: как жить с лицензиями React, инвестиции Webpack — чего ждать? Поднимаем производительность наших приложений и разбираемся с системами типизации — Flow или TypeScript?

CSS

Inside a super fast CSS engine: Quantum CSS (aka Stylo) — как устроен новый движок обработки CSS в Firefox

Unicode-range — как это работает?

Building Skeleton Screens with CSS Custom Properties

Writing CSS with Accessibility in Mind — не забываем о доступности при написании стилей

JavaScript

JavaScript Events Unmasked: How to Create an Input Mask for Mobile — создаем поле ввода с маской для телефонов

Deep Dive into the Payment Request API

Quokka — Live JavaScript Scratchpad for Atom editor

How I Convinced Our CTO to Switch From CoffeeScript to ES6 — как убедить руководство перейти с CoffeeScript на ES6

Building a Maybe in JavaScript — пишем Maybe монаду на JavaScript

Converting from Speech to Text with JavaScript — распознаем речь в браузере

Building Skeleton Screens with CSS Custom Properties — компоненты-заглушки с помощью CSS переменных

How JavaScript works: memory management + how to handle 4 common memory leaks — работа сборщика мусора и утечки памяти в JS

Concurrent JavaScript: It can work! — потоки в JS!

Deploying ES2015+ Code in Production Today — используем ES6 код на продакшине. Как? Зачем?

Progressive Web Apps

Building a Small PWA with Preact and Firebase — строим PWA на Preact и Firebase для спортивных тренировок

Android Oreo takes a bite out of Progressive Web Apps — проблемы PWA в Android 8

A React And Preact Progressive Web App Performance Case Study: Treebo — Эдди Османи про перфоманс PWA на React

React и React Native

Лицензии реакт, как жить:

• Explaining React’s license — Блог
• The React license for founders and CTOs
• 3 Points to Consider before Migrating Away from React Because of Facebook’s ‘BSD+ Patent’ License
• Relicensing React, Jest, Flow, and Immutable.js — Facebook переходит на MIT

Rethinking drag and drop — React DnD в продуктах Atlassian

DOM Attributes in React 16

All the fundamental React.js concepts, jammed into this single Medium article — фундаментальные концепции React

React Animations in Depth — анимация в деталях

Writing Scalable React Apps with the Component Folder Pattern — best practice структурирования проекта со styled-components

How to use React’s controlled inputs for instant form field validation

How We Built Our React Native App

How I built a Content Management System for a React app in one day

Use a Render Prop! — пишем компоненты с render prop

Vue

Vue is now on OpenCollective!

Reactivity In Vue.js (And Its Pitfalls)

Reusable, Scalable and Easy to organize project using Vue — как правильно строить приложения на Vue:

• Part 1
• Part 2
• Part 3

Building a movie app interface with Vue.js

Тестируем Vue:

• Write simple unit tests with Vue Test Utils and Jest
• VueJS unit tests as a learning tool: v-text versus v-html

Angular

Implementing a parser using Angular 4

Building a Simple Carousel Component with Angular

Building an Angular 4 Component Library with the Angular CLI and ng-packagr

Тестируем Angular:

• Angular Tests Made Easy With ngx-easy-test
• Automate E2E testing of Angular 4 apps with ProtractorJS & Jasmine

Flow

Обновленный Flow — теперь больше фич для React

Typing Higher-order Components in Recompose With Flow

What I Love and Hate About Flow

Linting in Flow

Private Object Properties Using Flow’s Opaque Type Aliases

Redux & Flow-type — getting the maximum benefit from the fewest key strokes

TypeScript

TypeScript in CRNA — пишем React Native приложение на TypeScript

Typescript or Flow

A Brief Introduction to TypeScript — Part 1

Apollo и GraphQL

The Fullstack Tutorial for GraphQL — руководство по использованию GraphQL с разными технологиями

Build a GraphQL API in under 20 minutes

Angular vs React vs Vue (Холивары)

Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)

Angular vs. React: Which Is Better for Web Development?

Angular vs. React vs. Vue: A 2017 comparison

Node.js

Build a simple Telegram Bot with Node.js — пишем телеграм-бота

How To Combine a NodeJS Back End with a ReactJS Front End App

ReasonML

Reducers are Here

Seattle JS RN App — демо приложение на React Native

Статьи из блога:

• Messenger.com Now 50% Converted to Reason
• Way, Way, Waaaay Nicer Error Messages!

WebAssembly

The simplest way to get started with WebAssembly

JavaScript ♥ C++: Modern Ways to Use C++ in JavaScript Projects

CreaturePack: High Performance 2D WebGL Character Animation with WebAssembly

Производительность

Building the DOM faster: speculative parsing, async, defer and preload

Аудит скорости сайта документации Vue.js

Size Limit: Make the Web lighter

The State of the Web — гайд по улучшению перфоманса

Architecting Electron Applications for 60fps

Optimize React Performance — разбираемся с производительностью React-приложений

Библиотеки

Iroh — инструмент для анализа динамического кода на JavaScript

Sentineljs — обнаруживаем новые DOM элементы с помощью CSS селекторов

Rendertron — серверный рендеринга от команды Google Chrome

Hazel — легковесный сервер обновлений для приложений на Electron

Deeplearnjs — библиотека глубокого обучения для Интернета

Lozad.js — легковесный и настраиваемый ленивый загрузчик

Three.ar.js — библиотека на three.js для создания веб-ресурсов AR

Songbird

React-imgpro — компонент обработки изображения для реакции

Redocx — React компонент текстовый редактор

React-markings — React markdown компонент

React-powerplug

Послушать

Веб-стандарты:

• Выпуск № 82
• Выпуск № 83
• Выпуск № 84
• Episode #85
• Episode #86

Пятиминутка React:

• #30 — setState и орагнизация кода
• #31 — .getInstance, Екатерина Назарова
• #32 — Webpack 4, Cycle.js, Error Boundaries, StackBlitz, всем Preact, Пятиминутка Angular
• #33 — Кирилл Мокевнин, Hexlet.io
• #34 — Moscow Frontend Conference 2017 и BEM React Core

Devschacht — 3, 4

Frontend Weekend:

• #16 — Сергей Рубанов про организацию BeerJS и мировые конференции
• #17 — Вадим Макеев про HTML Academy, Opera, конфликты и сексизм
• #18 — Путешествие в Минск и обсуждение докладов на CSS-Minsk-JS

Shop talk show:

• CSS-Zingers (Summer 2017 Beachbody Edition)
• Top 5 Browser APIs You’re Not Using with Patrick Kettner
• RIP HTML Imports
• #shareyourdrafts

Фронтенд Юность (18+):

• #15 Почему проиграл Oxxxymiron
• #16 Тайны раскола в разработке Node.js
• #17 Как прокачиваться на работе
• #18 Как Лёха не попал в Booking
• RadioJS Выпуск 49: Alive!

Devschacht:

• Выпуск № 6
• Выпуск № 7 — Посмотри мой пулреквест
• Ночной фронтенд — экспериментальный выпуск
• Ночной фронтенд #2
• Ночной фронтенд #3 — Yarn 1.0, Sonotype Nexus, ESM в Node.js, ДЛМ

Посмотреть

Live Streams — еженедельные стримы Юрия Артюха

Chrome 61 — What’s New in DevTools

Конференции

OdessaJS 2017

ChernivtsiJS #3

Polymer Summit 2017

FEDay Conference — текстовая трансляция Андрея Ситника и Алексея Иванова

Microsoft Edge Web Summit 2017

Демо

Emoji Train