Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Front-Еnd дайджест #25: пишем и учим WebAssembly, будущие стандарты JavaScript и сможет ли Vue.js захватить мир?

В выпуске: прошедшие React конференции Europe, Vienna и Kyiv, что стоит изучать Front-End инженеру в 2017 году, слушаем новые подкасты, а также материалы по ReasonML, React, Node.js и многое другое.

CSS

70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization

Locally Scoped CSS Variables: What, How, and Why — CSS-переменные на практике

Handling Long and Unexpected Content in CSS — как решить проблему с длинным контентом

CSS Shapes, clipping and masking — and how to use them — про использование CSS-фигур и масок

Большая статья про гриды (CSS Grid Layout)

Connect: behind the front-end experience — про Front-End в Stripe Connect

PiterCSS Conference — текстовый лог PiterCSS

JavaScript

JSC 💕 ES6 — WebKit и ES6

How to get the most out of the JavaScript console — секреты JavaScript console

The JavaScript Standard — про будущие стандарты JavaScript

Adopting Flow & TypeScript — сравнение внедрения типизации в JavaScript

Unambiguous Webpack config with Typescript

JavaScript: What the heck is an Immediately-Invoked Function Expression?

Functional programming in Javascript is an antipattern

JavaScript’s new #private class fields — новые приватные поля в классах

ECMAScript Interfaces Proposal — предложение по добавлению интерфейсов

Into the Great Unknown — Migrating from Mocha to Jest — о переходе инженера eBay c Mocha на Jest

An intro to web components with otters — введение в web-компоненты

Reduce your javascript bundle size by 77% — как сократить размер JavaScript бандла

A crash course in memory management — учимся управлению памятью в картинках

What if all your mobile devices formed a single screen? — идеи Swip.js и для чего он предназначен

React и React Native

Что такое React и React Native — для новичков

A React TODOs example, explained — Todo-список на React под микроскопом

Rebuilding Slack’s Emoji Picker in React — как инженеры Slack увеличили производительность emoji пикера

Techniques for decomposing React components — как правильно разбивать ваши React компоненты

Avoiding deeply nested component trees — оптимизируем вложенность компонентов

Why I Chose React Over Vue — почему React, а не Vue

Handling State in React: Four Immutable Approaches to Consider

Straightforward code splitting with React and Webpack

5 ways we improved our React Native app

Apollo и GraphQL:

Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation

graphql-tools: A simpler way to create GraphQL APIs

Come speak at GraphQL Summit 2017!

Building React Apps with GraphQL, Graphcool & Apollo

Reducing our Redux code with React Apollo

How we built Launchpad

Tutorial: GraphQL Subscriptions (server-side)

5 Things They Don’t Want You to Know About React-Apollo

A Look at Apollo, From a Relay Perspective

CSS in JS

A Unified Styling Language — про различные CSS in JS имплементации, и как он изменяет мир

Creating truly universal React component systems — universal style-components

Introducing React iotaCSS

Rockey. Motivation and Requirements

Building a React Component Library — строим UI-библиотеку на styled-components:

Vue.js

Сможет ли Vue.js захватить мир:

Using Mixins in Vue.js

Строим приложения на Vue.js:

Node.js

util.promisify() для замены колбэков на промисы

Upgrading from Node 6 to Node 8: a real-world performance comparison — сравнение производительности 6 и 8 версии Node.js

Node.js Child Processes: Everything you need to know — дочерние процессы в Node.js

Why Enterprises are Using Node.js for Digital Transformation — почему ентерпрайз начал использовать Node.js?

Node.js Streams: Everything you need to know — все что нужно знать о потоках

Набор туториалов по Node.js:

ReasonML

Статьи разработчика Khan Academy Джареда Форсайт:

Cool Things Reason Formatter Does — про преимущества Reason

Mareo: Reason + BuckleScript + Mario

WebAssembly

Assembling WebAssembly — WebAssembly в Safari

WebAssembly cut Figma’s load time by 3x — как WebAssembly сократил время загрузки графического редактора в 3 раза

WebAssembly 101: a developer’s first steps — первые шаги в использовании WebAssembly

Библиотеки

Cell

Preact CLI

Flubber — утилита для анимирования форм

React Flight — утилита для анимирования для React приложений

Butternut — новый минифаер кода

СoolHue — коллекция градиентов для вашего приложения

CSS-Doodle — CSS-компоненты для рисования паттернов

SVGI — анализатор SVG-изображений

Kocha — Mocha без глобальных переменных

Послушать

Веб-стандарты — 70, 71, 72, 73

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

Devschacht — 3, 4

Frontend Weekend:

Shop talk show:

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

Посмотреть

Why We Chose Vue.js — Inside GitLab — почему GitLab выбрала Vue.js

Chrome 59: Headless Chrome, Native Notifications on macOS and the Image Capture API — новинки Chrome 59

Live Streams Юрия Артюха

Egghead:

Конференции

JSUnconf 2017

CSSconf EU 2017

JSConf EU 2017

Codefest 2017

KyivJS June

React Kyiv:

React Vienna:

React Europe:

Что нового?

NPM v5

Webpack 3

Expo SDK v18.0.0

Новый Reason React

TC39, ECMAScript, and the Future of JavaScript — ждем новую версию стандартов

Powerful New Additions to the CSS Grid Inspector in Firefox Nightly — новинки Firefox Nightly

Bootstrap Jobs — сервис поиска Bootstrap разработчиков и работодателей

ID3 — среда разработки для создания визуализаций на D3.js

Prettier 1.5.0 — поддержка GraphQL, CSS-in-JS & JSON, а также TypeScript и CSS с 1.4.0

Bonsai — оптимизация дерева зависимостей Webpack от Pinterest

VulcanJS — создаем приложения на React и GraphQL

Redux-First Router

Остальное

CSS vs. JavaScript: Trust vs. Control

ES6 Katas — задачи для изучения ES6

Choosing a frontend framework in 2017

React Express — введение в современный React-стек

Spellbook of Modern Web Dev — что нужно знать современному веб-разработчику

Our entire team of engineers use this front end development guide — стек технологий, который использует Grab

A day without Javascript — как справляются с отключением JavaScript популярные сайты

ECMA-414: Modularizing the JavaScript Standard — о модульности стандартов

Awesome Design Systems — коллекция дизайн-систем

Yarn determinism — зачем он нужен?

HTTPS on Stack Overflow: The End of a Long Road — как StackOverflow переходил на HTTPS

HTTP/2 push is tougher than I thought — развеивание всех мифов про HTTP/2

Browserslist is a Good Idea — чем хорош Browserlist?

8 npm Tricks You Can Use to Impress Your Colleagues — 8 секретных приемов в NPM

Про дизайнеров и программистов — о взаимодействии дизайнеров с программистами

Expenses — progressive web application, который для вычислений использует Google Sheets на React

Mastering Chrome Developer Tools: Next Level Front-End Development Techniques

Grammarly ищет талантливых инженеров. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, мы используем передовые технологии и решаем интереснейшие технические задачи. Смотрите открытые позиции на www.grammarly.com/jobs/engineering и присоединяйтесь.

Также прошу минуту вашего внимания. В этому году хочу поехать на ReactiveConf с докладом про Focal — стейт-менеджмент для React приложений, который мы разработали в Grammarly. Но для этого мне понадобится ваша помощь. Пожалуйста, поставьте звездочку к моей гисте: git.io/vQZbU. Благодарю всех за помощь!

С вами был Григорий Шехет, @AGambit95. За помощь в оформлении дайджеста благодарю своих коллег.


← Предыдущий выпуск: Frontend дайджест #24.
Следующий выпуск: Frontend дайджест #26

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU

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

Схожі статті




26 коментарів

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

Класна підбірка! Тільки пазязя, не обзивайте ноду фронтендом, краще розділити підбірку на 2 — фронтенд і js.

щоб vue захопив світ, він має загопити спочатку мене, але я його ігнорую.

JS-фреймворки як метелики-одноденки. Швидко з’являються, швидко вмирають. А страждання ФЕДорів (Фронт-Енд-Девелоперів) протягом десятків років — незмінні.
Слава структурно-подійним богам за звільнення від страждань... :D

Nodejs- это разве не JS-фреймворк, или вы не о ней говорите?

Нода — то середовище виконання. Ні, я не про неї. Та й вона на фронті не використовується.

Что такое тогда Structure-Event-Based-Programming и причем тут фронтенд?

Патерн програмування. Краще за все пасує саме фронтенду (моя особиста думка)

Да я понял, что этот термин спасает вас от страждань). Только не понял, как он спасает от множества JS фреймворков? Вашу глубину мысли обычно невозможно понять:)
Вы без фреймворков на чистом JS что ли пишете?

Только не понял, как он спасает от множества JS фреймворков?

А мусить? Саме від кількості?

Вашу глубину мысли обычно невозможно понять:)

Ну, якщо не вигадувати власне, а читати написане, то все стає зрозумілим. Сподіваюся... :D

Вы без фреймворков на чистом JS что ли пишете?

Навпаки, намагаюся якомога менше писати на JS. Фронтенд. Складний. UI. ;)

А мусить? Саме від кількості?
JS-фреймворки як метелики-одноденки. Швидко з’являються, швидко вмирають.
Слава структурно-подійним богам за звільнення від страждань... :D

???

Даю підказку. Справа не в кількості, а в короткому терміні життя. Мова про час. Четвертий вимір нашого Всесвіту.

Это вы у Скайнинко научились загадками говорить?)

А вы не находите связь между коротким термином жизни и количеством?)

Ні. Можна з’являтися одному фреймворку раз на 10 років та через рік вмирати. Кількість буде дорівнювати одному, термін життя — коротким, лаг між появами — довгим. Не натягуйте сову на глобус ;)

9 лет потом люди будут на стенах пещеры писать, пока лаг не закончится)

Я не в курсі чим ви там займаєтеся :D

Не уж-то по Angular ничего интересного.

Angular

это вообще недоразумение программерской мысли

Гриша, спасибо за дайджест. Как всегда — много актуальной, полезной информации. Из своих закладок хочу добавить пару интересных, на мой взгляд, вещей.

Typescript
blog.mariusschulz.com/...​pt-2-0-non-nullable-types — серия интересных статей об "TypeScript Evolution"(лично мне больше всего понравилось blog.mariusschulz.com/...​-external-helpers-library и blog.mariusschulz.com/...​-1-keyof-and-lookup-types )
github.com/TylorS167/mostly-dom — полезная либа для работы с виртуальным домом
blog.mariusschulz.com/...​/01/13/typescript-vs-flow — сравнение Typescript и Flow от Marius Schulz

И хотелось бы услышать мнение сообщества о Most.js(кто не видел github.com/cujojs/most). Использует ли кто эту либу на проде/собирается использовать? Если да, то какие впечатления?

vue.js захватит мир? разве, что детский мир

Будет аргументация, или оставим этот выпад без внимания?)

99% JS-фреймворків побудовані за принципом «JS First». Це і є основна проблема, яку неможливо красиво вирішити.

Не совсем понял как это относится к ответу Dmitry.
Как мне кажется, подобные высказывания являются следствием плохой осведомленности, так как не подпитываются абсолютно никакими доводами, в надежде остаться в стороне от критики, поддерживаясь единодумцами.

Не переймайтеся. Тролінг, нічого суттєвого :D

Как мне кажется, подобные высказывания являются следствием плохой осведомленности, так как не подпитываются абсолютно никакими доводами, в надежде остаться в стороне от критики, поддерживаясь единодумцами.

Ми зараз все ще про фронтенд фреймворки розмовляємо?

В частности о негативном комментарии в сторону фреймворка =)

Дик vue.js має всі ознаки проблемного фреймворка :D Де «зашита» логіка роботи компонентів та рендерінг? В JS! Ой, все...

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