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 — 5-тижневий план по вивченню JavaScript.
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 — розбираємося Вами.
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 додатках.
— вчимо 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.
Подивитися
Reactive Conf 2016 Day 1 , 2 .
React Amsterdam Autumn Meetup .
CSS Conf .
View Source — Mozilla Берлін.
Web Standards Days в Мінську, 2016 .
ViennaJS .
— нове в 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 — з дуже крутим дебагінгом.
— чекаємо новий 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 .
Опубліковано: 18/11/16 @ 11:00
Розділ Різне
Рекомендуємо:
З точки А в точку Б — мета 50 т. р. в місяць з інтернету
FASTVPS — огляд VDS/VPS провайдера
DOU Books: 5 книг, які радить Дмитро Думанський
DOU Проектор: «Навпростець» — додаток для пошуку найближчої вбиральні
Кейс: Просування сайту по оренді вечірніх та весільних суконь