Оптимізація продуктивності в React

React. Просунуті керівництва. Частина П'ята
Продовження серії перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
Оптимізація продуктивності в React
Внутрішньо, React використовує кілька просунутих технік, які зводять до мінімуму кількість дорогих операцій DOM, необхідних для оновлення інтерфейсу. Для більшості додатків, що використовують React, швидкодія одержуваного інтерфейсу досить без додаткових дій для оптимізації продуктивності. Тим не менш, є кілька способів, за допомогою яких ви можете прискорити ваш додаток React.

Читати далі →

Неконтрольовані компоненти в React

React. Просунуті керівництва. Частина Четверта
Продовження серії перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
Неконтрольовані компоненти в React
У більшості випадків, ми рекомендуємо використовувати контрольовані компоненти для реалізації форм. У контрольованому компоненті, дані форми обробляються компонентом React. Є альтернативний варіант — це неконтрольовані компоненти, в яких дані форми обробляються самим DOM.

Читати далі →

Переведена документація Nuxt.JS

Всім привіт від Translation Gang!
Vue.js нам здалося мало. Планів громаддя, причому навіть за межами російської мови, фронтенда і веба взагалі, але на практиці поки що далеко від Vue не втікали — завдяки старанням theOnlyBoy ми оперативно перевели документацію фреймворку надвисокого рівня Nuxt.js.
Сам фреймворк ще молодий і трохи сирої, як і його документація — але що є, то ми перевели, і як тільки оновлюються оригінальні доки — тут же оновлюємо і переклад. Сподіваємося, вам сподобається!
Читати далі →

Ref-атрибути і DOM в React

React. Просунуті керівництва. Частина Третя
Продовження серії перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
Ref-атрибути і DOM в React
У типовому потоці даних React, властивості (props) — це єдиний спосіб, з допомогою якого батьки взаємодіють зі своїми нащадками. Для модифікації нащадка, вам необхідно заново відобразити (зробити ререндеринг) його з новими властивостями. Однак, в деяких випадках, вам знадобиться модифікувати нащадка безпосередньо, поза основного потоку. Зміна нащадка можливо у випадках, якщо він є екземпляром компонента React або елементом DOM. Для обох цих випадків React має особливий спосіб зміни.

Читати далі →

PropTypes — перевірка типів React

React. Просунуті керівництва. Частина Друга
Продовження серії перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
PropTypes — перевірка типів React
У міру того, як ваш додаток буде рости, ви можете натрапити на велику кількість помилок, пов'язаних з перевіркою типів. Для деяких додатків, ви можете використовувати розширення JavaScript такі як Flow або TypeScript здійснюючи перевірку типів всього вашого додатка. Але якщо ви не використовуєте такі — React надає деякі вбудовані можливості перевірки типів.

Читати далі →

JSX — подробиці

React. Просунуті керівництва. Частина Перша
Цією публікацією я відкриваю серію перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
JSX — подробиці
Фундаментально, JSX є синтаксичним цукром для функції
React.createElement(component, props, ...children)
.

Читати далі →

Мислимо в стилі React

image
Переклад туториала офіційній документації бібліотеки React.js.
Мислимо в стилі React
React, на наш погляд, це кращий спосіб побудувати велику, швидке веб-додаток з допомогою JavaScript. З нашого досвіду в Facebook і Instagram, додаток на React також дуже добре масштабується.
Одне з багатьох чудових властивостей React — це принцип "Як ви проектуєте додаток, також ви творите його". У цьому туториале ви пройдете весь розумовий процес проектування та створення програми React, що відображає таблицю даних для пошуку товару.

Читати далі →

Проблема Інтернету — у низькій пропускній спроможності

Інтернет все щільніше входить у життя кожного з нас. Ми в Телфин це спостерігаємо кожен день. Існує межа? Читайте наш переклад статті «The bandwidth bottleneck that is throttling the Internet».

Фахівці всього світу працюють день і ніч, щоб підтримати канали передачі даних в робочому стані і розширити їх, щоб не дати інформаційної революції зав'янути на корені.


19 червня вийшла нова серія «Ігри престолів». Сотні тисяч глядачів з території США тут же запустили перегляд — і стрім-сервіс каналу HBO не впорався з навантаженням. Близько 15 тисяч глядачів не могли отримати доступ до серії протягом години.

Адміністрація каналу вибачилася за непередбачені проблеми і пообіцяла, що подібне більше не повториться. Однак справа в тому, що цей випадок — лише одне з найпомітніших проявів насувається проблеми. Обсяг трафіку в Інтернеті зростає на 22% кожен рік, і такий попит загрожує перевершити можливості інтернет-провайдерів.

Читати далі →

Завдання, микрозадачи, черги і плани

Пропоную вашій увазі переклад статті «Tasks, microtasks, queues and schedules» Джейка Арчібальда (Jake Achibald), що займає посаду Developer Advocate for Google Chrome.

Коли я сказав своєму колезі Мэту Ганта, що подумую про написанні статті про черговості микрозадач та порядок їх виконання всередині подієвого циклу браузера, він сказав Джейк, буду чесний, я про це читати не буду». Що ж, я все ж таки написав, тому відкиньтеся на спинку крісла і давайте в цьому розберемося, гаразд?

Насправді, якщо вам буде простіше подивитися відео, є чудовий виступ Філіпа Робертса на JSConf, яке розповідає про подієвому циклі – воно не покриває микрозадачи, але в іншому є відмінним вступом в тему. У будь-якому випадку, погнали…

Давайте розглянемо наступний код на JavaScript:
console.log('script start');

setTimeout(function() {
console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});

console.log('script end');

Як ви думаєте, в якому порядку повинні вывестись логи?

Читати далі →

ES6 і за його межами. Глава 2: Синтаксис. Частина 1



Якщо у вас був досвід в написанні JS додатків, то напевно ви знайомі з його синтаксисом. Він дуже не звичайний і має ряд примх, але в цілому обдуманий, зрозумілий і має безліч подібностей з іншими мовами.

ES6 додає кілька нових синтаксичних форм з якими нам належить познайомитися. У цій главі ми пробіжимося по багатьом з них і дізнаємося, що ж нового у нас в арсеналі.

Зверніть увагу: На момент написання даної книги, більшість нових можливостей ES6 вже були імплементовані як популярними браузерами(Firefox, Chrome тощо), так і безліччю цікавих оточень. Але на жаль не всі браузери або ж оточення можуть працювати з ES6. Як ми говорили в минулій главі — транспилинг це наше все. За допомогою даного підходу ви можете запустити будь-якій з наведених у книзі прикладів. Для цього в нашому розпорядженні є ряд інструментів — ES6Fiddle http://www.es6fiddle.net/) відмінна і проста у використанні майданчик, для того, щоб спробувати ES6 і REPL для Babel http://babeljs.io/repl/).

Читати далі →