Клиентская оптимизация *

Я люблю Реакт. Люблю за то, как он работает. За то, что он делает вещи «правильно». HOC, Composition, RenderProps, Stateless, Stateful – миллион патернов и антипатернов которые помогают меньше косячить.

И вот совсем недавно React принес нам очередной подарок. Очередную возможность косячить меньше — getDeviredStateFromProps.

Технически — имея статический мапинг из пропсов в стейт логика приложения должна стать более проста, более понятна, тестируема и так далее. По факту многие люди начали топать ногами, и требовать prevProps обратно, не в силах (или без особого желания) переделать логику своего приложения.

В общем разверлись пучины ада. Ранее простая задача стала сложней.

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



На сайте не применялось никаких динамических механизмов — там было немного анимации, он был создан с применением методов отзывчивого дизайна, но содержимое ресурса практически всегда оставалось неизменным. Автор статьи говорит, что то, что он увидел, быстро проанализировав ситуацию, буквально привело его в ужас. События DOMContentLoaded пришлось ждать около 4-х секунд, на полную загрузку страницы ушло 6.8 секунды. В процессе загрузки было выполнено 20 запросов, общий объём переданных данных составил около мегабайта. А ведь речь идёт о статическом сайте. Тут Джонлука понял, что он раньше считал свой сайт невероятно быстрым лишь потому, что привык к гигабитному интернет-соединению с низкой задержкой, используя которое, он, из Лос-Анджелеса, работал с сервером, расположенным в Сан-Франциско. Теперь же он оказался в Италии и воспользовался интернет-соединением на 8 Мбит/с. А это совершенно поменяло картину происходящего.

В этой статье Джонлука Де Каро расскажет о том, как ему удалось ускорить свой статический сайт в десять раз.

В предыдущей части туториала мы решили проблемы изоморфного роутинга, навигации, фетчинга и начального состояния данных. В итоге, получилась довольно простая и лаконичная основа для изоморфного приложения, которую я также выделил в отдельный репозиторий — ractive-isomorphic-starterkit. В этой части мы начнем писать приложение RealWorld, но сначала осуществим декомпозицию. Погнали!

Сегодня, в переводе одиннадцатой части серии материалов, посвящённых JavaScript, мы поговорим о подсистемах браузера, ответственных за рендеринг веб-страниц. Они играют ключевую роль в деле преобразования описаний документов, выполненных с помощью HTML и CSS, в то, что мы видим на экране.



Автор материала говорит, что в компании SessionStack приходится уделять рендерингу огромное внимание. В этой статье он поделится советами, касающимися оптимизации веб-страниц с учётом особенностей их визуализации.

В предыдущей части туториала мы научили наше изоморфное приложение проксировать запросы к backend api, с помощью сессии передавать начальный стейт между синхронными запросами и осуществлять Server-side rendering с возможностью переиспользования разметки на клиенте (hydrate). В этой части мы решим еще две ключевые проблемы изоморфных веб-приложений: изоморфный роутинг и навигация, и повторный фетчинг и начальное состояние данных. И сделаем это буквально 5-ю строками кода. Погнали!

Появляется все больше SPA салонов. Даже лендинги люди пилят на React. А действительно сложное веб-приложение уже трудно представить с другим подходом. Одна из главных проблем современного фронтенда — это сборка таких проектов. С этим помогают справляться бандлеры.

Иван Соснин, фронтенд-разработчик Контура, рассказывает как настроить webpack 2 и 3, чтобы получить ощутимый прирост в скорости сборки статики. Статья будет полезна тем, кто уже работает с webpack или смотрит в его сторону.

Стоит начать с ремарки, что недавно вышел webpack 4. Там вообще все супербыстро и ничего делать не надо, а еще изменилось процесс разбиения кода на чанки.

Но тащить в продакшен библиотеки, которые обновились вчера — не мой путь.

Webpack — это сборщик модулей (бандлер). Он собирает различные модули с зависимостями в один или несколько файлов (бандлов). У webpack модульная архитектура, а это значит, что его можно гибко настраивать. Сборка кода настраивается при помощи плагинов, а трансформации кода производятся с помощью загрузчиков (loaders).

Если хочется больше базовых подробностей, можно почитать статью Рахима Давлеткалиева про webpack 1. Она немного устаревшая, но идеи и примеры в ней разобраны подробно.

За всю эту гибкость приходится платить сложной конфигурацией.

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

На самом деле я писал возможно самую медленную функцию мемоизации, да получилась быстрая. Моей вины тут нет. Все дело в балансе.

В балансе между тем насколько долго будет исполнятся мемоизируемая функция, сколько дополнительного времени потребует сахар мемоизации, и (про это все забывают) сколько програмистов потребуется, чтобы эту мемоизацию правильно прикрутить.



Но начнем с простого — что же это за слово такое странно — «мемоизация».

Текстовые редакторы, как тип программного обеспечения, появились чуть позже чем динозавры, и вероятнее всего это был вообще первый софт, с которым вы столкнулись в своей жизни, возможно кто-то даже застал MS-DOS Editor.

Однако с переходом большой части ПО в браузеры актуальны и соответствующие визуальные редакторы Rich Text Editors, и проблемных мест в их разработке масса. Если вы по какой-то причине решили сделать свой собственный редактор, то подумайте еще раз — есть мнение, что делать этого не нужно.



Чтобы вы могли принять более взвешенное решение, Егор Яковишен обобщил весь свой опыт, полученный в процессе создания Setka Editor, и рассказал про проблемы, с которыми придется столкнуться, и что можно предпринять для их решения.

Disclaimer: статья написана на основании доклада Егора на конференции Frontend Conf 2017 в июне 2017 года. Ситуация с поддержкой браузерами определенных API с тех пор уже могла измениться.

Разрабатываем библиотеку для отображения больших интерактивных схем залов на canvas без фреймворков и заставляем хорошо работать в ie и мобильных устройствах. Попутно разбираемся с особенностями работы canvas.

В предыдущих статьях мы много рассказывали о Splunk. Это продукт, который позволяет собирать и анализировать данные с любых IT-систем в режиме реального времени, например, это могут быть результаты работы web-сервера, почтового сервера, Windows, различных приложений и тд. Значит ли это, что если всем сотрудникам, заинтересованным в аналитике, полученной в Splunk, необходимо разбираться в работе программы, вносить изменения в свои бизнес-процессы и делать всю аналитику только в Splunk? Конечно же, нет!



В данной статье мы покажем, как сделать так, чтобы в несколько кликов отдел продаж мог получать в MS Excel таблицу, с актуальными данными о реализации товара через интернет магазин.

Добро пожаловать в школу CODEдейства и волшебства!

На сегодняшнем занятии мы с вами узнаем, как использовать малоизвестный тандем Web Push + Service Workers (SW). Я приоткрою вам завесу: расскажу о способе удерживать аудиторию маглов благодаря технологии Web Push и о том, чем это может быть полезно для редакций сайтов и прочих интернет-сервисов.

Казалось бы, при загрузке приложения можно и потерпеть секунду-другую. Но когда ваша программа используется часто, а в конкурентах — аналог от производителя самой ОС, то даже время запуска начинает сказываться. Разработчик Яндекса Виктор Брыксин bobermaniac выступил на встрече сообщества CocoaHeads в офисе наших коллег в Mail.Ru и рассказал, как заставить iOS-приложение запускаться побыстрее.


— Долгое время я занимался разработкой Яндекс.Браузера. Собственно, из оптимизации времени старта этого приложения и родился мой доклад.

В предыдущей части туториала мы узнали что такое проект RealWorld, определились целями туториала, выбрали стек технологий и написали простой веб-сервер на Express в качестве основы для изоморфного фронтенда.

В этой части, мы допилим серверную часть и напишем изоморфный «Hello World» на Ractive, а также соберем все это с помощью Webpack.

Кейс компании JotForm.

В феврале прошлого года мы выпустили новую версию продукта.

До этого почти весь 2016 год мы потратили на обновление основной функциональности и были в восторге от того, что получилось.

Но вскоре после выпуска новой версии главный дизайнер наткнулся на одно интересное обсуждение в сообществе Designer News.

В самом популярном комментарии были процитированы два первых предложения с нашей страницы с информацией о компании (там говорится, что она была основана в 2006 г.) и добавлено:

«Так почему тогда [конкретный конкурент] более популярен?
О вас, ребята, я никогда не слышал».

Какая досада.

За 12 лет работы я стал довольно толстокожим. Я знаю, как работает Интернет: кто-то добр, кто-то язвителен, а кто-то просто не блещет умом — как в случае этого комментария.

Тем не менее, это замечание меня задело.

Наша компания появилась раньше любого из конкурентов, и у нас 3,2 млн пользователей.

И я знаю, что мы не очень популярны в мире стартапов.

Компания JotForm добилась всего самостоятельно, мы никогда не привлекали внешних инвестиций. Мы не тусуемся с «крутыми парнями». Вы, скорее всего, никогда не увидите в топе TechCrunch статью об очередном раунде нашего финансирования.

Переведено в Alconost

Весной 2017 года Eric Simons, со-основатель учебного проекта Thinkster, анонсировал проект «RealWorld» — демо приложение и спецификация к нему. Проект объявил своей целью выйти за рамки привычных «todo»-демок для более прикладного сравнения и изучения возможностей различных фреймворков и технологий, а также подходов к разработке и способов решения задач.

Представители e-commerce уже «в теме», что нужно автоматизировать своих курьеров по ФЗ-54. Чтобы не попасть под штрафные санкции, курьер должен печатать чек в момент вручения заказа. Но если уж приходится автоматизировать операцию приема платежей, которая требует установленного мобильного приложения на девайсе курьера, логично добавить в это ПО и другие инструменты для удобства работы курьеров и менеджеров интернет-магазинов.

До недавнего времени мы предлагали два программных продукта для мобильной торговли: DM.Доставка и DM.Торговля. Предприниматели могли использовать что-то одно или купить оба продукта. Практика показала, что 90% заказчиков нуждаются в функционале ПО, который реализован и там, и там.

Мы своих пользователей любим, и поэтому решили избавить их от необходимости установки двух приложений и «перескакивания» при работе с одного на другое. Мало того, что мы объединили функционал в один модуль, так еще и сделали на такую комбинацию скидку (т.е. два программных продукта «пакетом», обойдутся дешевле, чем купить их по отдельности).

Перевод статьи об эксперименте с бинарным кодом в Glimmer, соавторы публикации: Сара Клаттербак, Чад Хиетала и Том Дейл.

Чуть более года назад Ember.js претерпел значительные изменения. В тесном сотрудничестве между инженерами LinkedIn и Open Source сообществом, мы заменили у Ember движок для рендиранга на новую библиотеку, Glimmer VM, что улучшило производительность и значительно уменьшило размер скомпилированных шаблонов.

Glimmer относится к Handlebars шаблонам как функциональный язык программирования и компилирует их в последовательность инструкций, которые могут быть выполнены в браузере. Эти инструкции, или опкоды (прим. переводчика коды операций) кодируются в компактную структуру данных в виде JSON.

Когда мы перенесли наше веб приложение linkedin.com на Glimmer, мы увидели значительные улучшения во времени загрузки. В дополнении к уменьшению размера файлов на 40%, мы также сократили время, затрачиваемое браузером на анализ JavaScript, благодаря компиляции шаблонов в JSON. Более того, это изменение улучшило время загрузки в 90% случаев более чем на 1 секунду.

В этой статье мы обсудим недавний эксперимент по еще большему улучшению времени загрузки, полностью исключив время необходимое для синтаксического анализа скомпилированных шаблонов.

Как часто, запрашивая страницу, мы видим сообщение «Нет подключения к интернету». Однако, уже давно существует возможность отлавливать события в отсутствие интернета и контролировать содержимое, которое видит пользователь. Алексей Чернышев и Максим Чагин запустили offline-версию сайта Российской Газеты – официального издания Правительства России с 1 млн посетителей в сутки – и поделились своим опытом на РИТ++ 2017. Под катом расшифровка их доклада.

Об авторе: Дэниель Лемир — профессор компьютерных наук в Университете Квебека (Канада). Его исследования затрагивают производительность программного обеспечения и инженерию данных

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

Однако мы часто используем текстовые форматы; например, веб-страницы и электронные письма должны быть в текстовом формате. Как же мы отправляем изображения по электронной почте? Как внедряем картинки на веб-страницы? Один из вариантов — поставить ссылку на реальный бинарный файл. Другой типичный подход — встроить бинарный файл непосредственно в тело письма или веб-страницы с помощью base64. Base64 — это просто стандартный текстовый формат, который можно использовать для кодирования любых бинарных данных. Если быть точным, то код base64 — всегда валидный текст ASCII (и поэтому также валидный UTF-8). Каждый байт кода base64 содержит 6 бит данных. То есть мы «теряем» примерно 2 бита на байт. Поэтому эквивалент base64 бинарного файла будет примерно на 33% больше. На практике такое увеличение размера редко становится проблемой. Насколько я знаю, приложения к электронным письмам почти всегда кодируются в base64.

При написании HTML я нашёл удобным внедрять изображения напрямую в HTML-код с помощью схемы data URI. Например, в недавней статье я таким образом закодировал файл PNG. Крупнейшие веб-сайты вроде Google постоянно используют эту схему. Небольшим недостатком становится то, что веб-страницы чуть увеличиваются в размере (что очевидно) и нельзя воспользоваться преимуществами кэширования изображений. Но зато браузер экономит один сетевой запрос.