Front-Еnd дайджест #19: Yarn, Node v7 и Fiber
В выпуске: Progressive web-app на React.js с Эдди Османи, материалы по ELM, WebAssembly, MobX и Vue.js 2, а также конференции React Next, Reactive Conf, GraphQL Summit, Chrome Dev Summit и другие.
How to build a Functional JavaScript (картинка кликабельна):
Почитать
Подборка статей за Октябрь: Web Development, JavaScript, Angular 2.0, React.JS, Node.JS
Алгоритм чтения книг по программированию.
Simple Style Sheets — простые таблицы стилей.
What’s The Deal With The Samsung Internet Browser? — про Chromium браузеры на Android.
The SVG ’path’ Syntax: An Illustrated Guide — SVG под микроскопом.
Recursive SVG Designs — Part 1, 2 — больше рекурсии.
A Redesign with CSS Shapes — рефакторинг border-radius на CSS фигуры.
Can we stop bad-mouthing CSS in developer talks, please? — чем CSS может нас удивить.
How CSS pseudo-classes work, explained with code and lots of diagrams.
Поиск работы фронтендером в 2016 году — про собеседования в Иннове, Тинькове, Нетологии, Рамблере и Яндексе.
How it feels to learn JavaScript in 2016 — каково учить JavaScript в 2016.
How it actually feels to write JavaScript in 2016 — ответ каково это, на самом деле, писать на JavaScript в 2016 году.
A Study Plan To Cure JavaScript Fatigue —
ES6 Template Literals, the Handlebars killer? — что нам принесли ES6 темплейты.
Connecting Virtual Worlds: Hyperlinks in WebVR — виртуальные гиперссылки.
TypeScript — The Myth of the Superset — TypeScript не JavaScript.
Темная сторона TypeScript — @декораторы на примерах.
What’s new in Chromium 54 and Opera 41.
Introducing the Web Share API — используем в Chrome 55.
Async functions — making promises friendly — асинхронные функции и промисы в Chrome 55.
Everything You Should Know About Progressive Web Apps.
YouTube is being rebuilt with Web Components & Polymer — как переписывают Youtube.
Removing Shadow DOM boundaries from text editor elements — почему Shadow DOM не взлетел в Atom.
Эдди Османи о прогрессивных веб-приложениях на React.js:
— Part 1 — Introduction.
— Part 2 — Page Load Performance.
— Part 3 — Offline support and network resilience.
— Part 4 — Progressive Enhancement.
JavaScript — Observables Under The Hood — разбираемся Observable.
30 Learning Resources For Mastering Angular 2 — все для обучения Angular 2.
Angular 2 — Improve performance with trackBy.
Introducing Electrode, an open source release from @WalmartLabs — релиз Electrode — React/Node платформы для разработки.
Choosing Ember over React in 2016.
Vue 2.0 is Here! — вторая версия в два раза быстрее.
Why We Chose Vue.js — Gitlab o Vue.js.
Why Vue 2 beats Angular 2 and React — чем крут Vue.js 2.
React.js pure render performance anti-pattern.
React, routing, and data fetching.
React Fiber Architecture — архитектура нового React.js.
Testing a React-driven website’s SEO using „Fetch as Google”.
Typed Redux — про Flow в Redux приложениях.
A MobX introduction and case study — учим MobX.
Effective MobX patterns Parts: 1, 2, 3 — MobX на примерах.
Exponent SDK v11.0.0 is now available — строим кроссплатформенные приложения на React Native.
It’s a wrap — #ReactiveConf 2016 is over! — обзор Reactive Conf.
Next.Js Is it the next big thing in JavaScript? — создатель StoryBook про Next.js.
Migrating to Jest — Kent C. Dodds про переезд на Jest в PayPal.
An introduction to how JavaScript package managers work — разбираемся в работе пакетных менеджеров.
NPM vs Yarn Cheat Sheet — Yarn шпаргалка.
5 things you can do with Yarn — 5 плюсов Yarn от Auth0.
Yarn vs npm: Everything You Need to Know — что лучше, Yarn против NPM.
Node.js v6 Transitions to LTS — Node.js v6 до 2019 года.
Creating a Chatroom Using Phoenix, Elm, and Websockets.
The Polyglot Approach to Getting Better at Modeling the State and Writing Property Tests in Elm — тестируем состояние ELM приложения.
Composing Decoders like LEGO — парсим JSON на ELM.
MVC Is Dead, What Comes Next? — о будущем UI-фреймворков.
No API? No Problem! Rapid Development via Mock APIs.
19 things I learnt reading the NodeJS docs.
Статьи от ребят с Apollo:
— A proposal for GraphQL subscriptions.
— 5 benefits of static GraphQL queries.
— GraphQL First: A better way to build modern apps.
— GraphQL Summit 2016 in Tweets.
— Apollo Client 0.5.
Туториалы
JavaScript Stack from Scratch — современный стек JavaScript с нуля.
Creating a Slack Command Bot from Scratch with Node.js & Distribute It — Slack бот на Node.js.
Look Ma, No Server: Developing Apps with Angular 2 MockBackend — пишем приложения на Angular 2 c MockBackend.
Undo Functionality with the Command Pattern in JavaScript — реализуем функцию undo.
Fun Functional Programming with the Choo Framework.
Electron workshop — построение кроссплатформенного десктопного приложения.
Intro to Webpack — основы Webpack.
Посмотреть
React Amsterdam Autumn Meetup.
View Source — Mozilla Берлин.
Web Standards Days в Минске, 2016.
Chrome 54: Custom Elements v1, Broadcast Channel API, Foreign Fetch and more — новое в Chrome 54.
Lighthouse, Totally Tooling Tips (S3 Mini Tip) — обзор инструмента для анализа производительности.
Supercharged Q&A: October 2016.
Start Using Elm to Build Web Applications — основы ELM на EggHead.
Ден Абрамов разбирается с Fiber Архитектурой.
Послушать
Веб-стандарты — 36, 37, 38, 39, 40, 41, 42 выпуски.
Radio.js:
— Выпуск 41 — Типизация 2.0.
— Выпуск 42 — Release Candidate 42.
JavaScript Air:
— 42. Web Components.
— 43. (Rerun) The past, present, and future of JavaScript.
— 44. Async Patterns in JavaScript.
— 45. On-site at Connect.tech.
— 46. React Native.
— 47. Yarn (bonus show).
— 48. JavaScript and the Web Platform.
Библиотеки
Styled Component — стили по новому.
Сustom React Scripts — Create React App с поддержкой препроцессоров, CSS модулей и декораторов.
Mobx State Tree — новый state management.
Next.js — сервер-рендеринг стал проще.
Turbo.js — считаем GPU.
ARc — starter kit построен на идее Atomic Design.
Text Spinners — минималистичные спиннеры на CSS.
React Animations — коллекция анимаций.
Blueprint — UI Framework для React.js.
React Decoration — набор декораторов для React компонентов.
ELM Electron Webpack — пишем десктопное приложение на ELM.
Elm Plot — строим графики на ELM.
Демо
PODLE — Github — прогрессивное веб-приложение для поиска и прослушивания подкастов.
Evil Glitch — играем в браузере.
DBGlass — PostgreSQL клиент на Electron, React, Redux.
Winds — Github — опен-сорсный RSS ридер на React/Redux/Sails/Node 7.
Ferment — музыкальный стриминговый сервис на Electron.
Silver Magpi — Twitter экстеншн для Chrome на ELM.
Трехмерная визуализация аудио.
Остальное
Yarn — новый пакетный менеджер для JavaScript.
NPM v4 — пре-релиз.
Elm 0.18 — с очень крутым дебагингом.
TypeScript 2.1 RC: Better Inference, Async Functions, and More — ждем новый TS.
Announcing the new Visual Studio for Mac.
WebAssembly Browser Preview — доступна под флагам.
React Native v0.37.0 — о новом.
FlyWeb — набор экспериментальных API от Mozilla.
State of JavaScript 2016 — результаты опроса.
Noto — шрифт Google для всех языков.
Is Fiber Ready Yet? — следим за новым React.
React StoryBook — обзавелся сайтом.
Leaflet 1.0 — карты отечественного производства.
JavaScript Internationalization API — Webkit Blog.
GetApp — снимаем скрин-касты на Electron.
Chrome Canary для Android — Play Market.
Node.js Dashboard — панель для мониторинга.
Webpack.js.org — новый сайт, с хорошой документацией.
Material Design — новый сайт гайдов.
Games on GitHub — коллекция опенсорсных игр.
Cost of modules — узнай самую большую зависимость.
Проверка знаний фронт-энд фреймворков.
JSapp React Native Firebase Starter App — отличный бойлерплейт для React Native.
***
4 декабря в Киеве пройдет масштабная ежегодная конференция посвященная JavaScript — Most JS Frameworks Day.
Планируются доклады в 3 потока и Q&A сессия со спикерами. Заявленные темы: React, Angular 2, RxJS 5, Native Web Components, миграции данных в Node.js REST API И MongoDB и многие другие.
Для читателей дайджеста промо код на 15% скидку: FDdigestDOU.
***
Grammarly ищет талантливых инженеров. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, мы используем передовые технологии и решаем интереснейшие технические задачи. Смотрите открытые позиции на www.grammarly.com/jobs/engineering и присоединяйтесь.
С вами был Григорий Шехет. За помощь в оформлении дайджеста благодарю своих коллег.
← Предыдущий выпуск: Frontend дайджест #18.
