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 — разбираемся 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! — вторая версия в два раза быстрее.

4 Things Vue.js Got Right.

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.

Посмотреть

Reactive Conf 2016 Day 1, 2.

React Next 2016.

GraphQL Summit.

React Amsterdam Autumn Meetup.

JSConf Iceland 2016.

Chrome Dev Summit 2016.

Polymer Summit 2016.

Dart Developer Summit 2016.

CSS Conf.

View Source — Mozilla Берлин.

FrontTalks 2016.

LvivJS 2016.

KharkivCSS 2016.

PiterJS #9.

PiterCSS #6.

Web Standards Days в Минске, 2016.

ViennaJS.

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.

Elm Tutorial.

Ден Абрамов разбирается с 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.

Elm Calendar.

Silver Magpi — Twitter экстеншн для Chrome на ELM.

Трехмерная визуализация аудио.

Остальное

Node.js v7.

Yarn — новый пакетный менеджер для JavaScript.

NPM v4 — пре-релиз.

Elm 0.18 — с очень крутым дебагингом.

React v15.4.0.

TypeScript 2.1 RC: Better Inference, Async Functions, and More — ждем новый TS.

Announcing the new Visual Studio for Mac.

WebAssembly Browser Preview — доступна под флагам.

Все про WebAssembly.

React Native v0.37.0 — о новом.

FlyWeb — набор экспериментальных API от Mozilla.

State of JavaScript 2016 — результаты опроса.

Noto — шрифт Google для всех языков.

Dart Sass.

Is Fiber Ready Yet? — следим за новым React.

React StoryBook — обзавелся сайтом.

Leaflet 1.0 — карты отечественного производства.

JavaScript Internationalization API — Webkit Blog.

GetApp — снимаем скрин-касты на Electron.

React Native Touchbar.

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.
Следующий выпуск: Frontend дайджест #20

Маєте важливу новину про українське ІТ? Розкажіть спільноті. Це анонімно.І підписуйтеся на Telegram-канал редакції DOU

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
Підписатись на автора
LinkedIn



11 коментарів

Підписатись на коментаріВідписатись від коментарів Коментарі можуть залишати тільки користувачі з підтвердженими акаунтами.

cssreference.io — візульний гід по властивостям CSS. Дуже круто для того хто не дружить з фронтендом але треба швиденько зрозуміти куди встане елемент.

Якщо ще не було можна додати в наступний дайджест.

Angular 2 — Improve performance with trackBy.
странность. это было актуально и для первого ангуляра. но статья почему-то акцентируется именно на втором.

в этот раз какое-то супер-мега-убер-комбо.
не знаю, за шо хвататься, что читать в первую очередь.
предложение: как-то категоризировать однонаправленное; например, «блок angular», «блок React», «CSS и процессоры», «Node соварищи» — как-то так.

CTRL + F и смотрим кол-во слов «React», затем смотрим кол-во Angular и закрываем.... сколько можно везде пиарить Реакт и Redux?
Причем я сижу на medium и даже там Реакта меньше чем тут в одной теме... :)

Так а в чому проблема?

React набуває популярності, багато хто його активно юзає. Чому б не писати про нього, про архітектуру і best practices?

Я понимаю что он популярен. Но его не должно быть столько в подборке для Фронтенда. Назовите сразу — «Свежая подборка фич для Реакта» :)

Тем более, что best practice в реакте каждый месяц новые... И пишут иначе.
«Чувак так уже два месяца никто не пишет..» часто вижу такие комменты по поводу реакта :))

народ чи якось можна потренуватися з Ajax якщо немає на компі локального сервера

заходишь через командную строку в папку с файлами и вбиваешь >python -m SimpleHTTPServer

Підписатись на коментарі