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

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

Наша первая история произошла в Новосибирском Университете, где исследователи разрабатывали программное средство для численного моделирования магнитогидродинамических проблем при ионизации водорода. Данная работа проводилась в рамках глобального проекта моделирования астрофизических объектов AstroPhi; в качестве аппаратной платформы использовались процессоры Intel Xeon Phi. В результате использования Intel Advisor и Intel Trace Analyzer and Collector производительность вычислений увеличилась в 3 раза, а скорость решения одной задачи сократилась с недели до двух дней.

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

Разработчики соединяют людей.
Разработчики помогают людям.
Разработчики дают людям возможности.

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

Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.

В облегченной системе Android Go действуют повышенные требования к предустановленным приложениям — размеру и используемой памяти. Перед нами встала задача в эти требования уложиться. Мы провели ряд оптимизаций и решили серьезно поменять архитектуру нашей графической оболочки — Яндекс.Лончера. Руководитель группы разработки прикладных мобильных решений Александр Старченко поделился этим опытом.


— Меня зовут Александр, я из Санкт-Петербурга, из команды, которая занимается разработкой Яндекс.Лончера и Яндекс.Телефона. Сегодня я расскажу, как мы оптимизировали память в Лончере. Сначала коротко объясню, что такое Лончер. Далее мы обсудим причины, зачем нам оптимизировать память. После этого рассмотрим, как корректно измерить память и из чего она состоит. Затем перейдем к практике. Я буду рассказывать, как мы оптимизировали память в Лончере и как пришли к радикальному решению вопроса. И под конец расскажу о том, как мы мониторим использование памяти, как мы держим ее под контролем.

С пару месяцев назад мы поэкспериментировали: получится ли на «Хабре» собрать годный справочник подразделений, выдавших российские паспорта. Дело полезное: эти данные нужны много кому, канонического источника нет, а существующие — очень так себе.

И знаете, все получилось. Пригодный к использованию справочник готов, можно качать и пользоваться. А еще мы сделали подсказки, которые ускоряют ввод подразделений в электронные формы.

Автор материала, перевод которого мы сегодня публикуем, говорит, что уверен в том, что многие JavaScript-разработчики пользуются, в основном, такими типами данных, как Number, String, Object, Array и Boolean. В большинстве случаев этого вполне достаточно. Но если нужно сделать код как можно более быстрым и масштабируемым, применение этих типов данных не всегда оправдано.



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

Предыстория

В одной медицинской организации внедряли решения на базе PACS-серверов Orthanc и DICOM-клиента Radiant. В ходе настройки выяснили, что каждый DICOM-клиент должен быть описан в PACS-серверах следующим образом:

• Имя клиента
• AE-имя (должно быть уникально)
• TCP-порт, который автоматически открывается на стороне клиента и принимает DICOM-обследования от PACS-сервера (т.е. сервер как бы толкает их в сторону клиента – инициируя соединение первым)
• IP-адрес

После настройки Radiant клиентов получили следующую информацию к размышлению – у каждого клиента настройка ПО с указанными выше параметрами приводила к заполнению файла pacs.xml, который располагался в профиле пользователя (путь: %APPDATA%\RadiantViewer\pacs.xml). При этом конфиг одного клиента от другого отличался минимум двумя параметрами (AE-имя у всех разное, а порт в основном одинаковый, кроме терминальных клиентов, работающих на одном и том же сервере – там порты тоже приходилось назначать разными).

Пример файла pacs.xml по ссылке:

Примерно полгода все было хорошо, система заработала…и тут до нас дошли «подводные камни»:

• Нам нужно ввести в строй несколько новых PACS-серверов, которые подменят старые (где стало заканчиваться место на дисках). PACS сервера в виртуальных машинах, но речь не об этом;
• Нам нужно как-то централизованно изменить уникальные конфигурации (двумя отличающимися параметрами) на 200 машинах (их количество регулярно увеличивалось);
• Учитывая темпы роста объемов обследований, решение нужно не разовое, а тиражируемое и регулярное (например, 1 раз в 3-5 месяцев).

Решение ниже.

Не так давно я столкнулся с довольно простой и одновременно интересной задачей: реализация read-only терминала в веб приложении. Интереса задаче придавали три важных аспекта:

• поддержка основных ANSI Escape sequences
• поддержка минимум 50 000 строк данных
• отображение данных по мере их поступления.

В данной статье я расскажу о том, как это реализовывал и как потом всё это оптимизировал.

Существует много webpack пакетов находящих дубли в бандле, самый популярный из них duplicate-package-checker-webpack-plugin, но он требует пересборки проекта, а так как стояла задача автоматизировать подбор оптимальной версии пакетов, то и вовсе получилось свое альтернативное решение.

Ну или моя история как получилось уменьшить бандл на 15%, за несколько секунд.

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



Автор материала, перевод которого мы сегодня публикуем, конечно же, шутит. Здесь речь пойдёт о том, как оптимизировать производительность React-приложений. Кстати, прежде чем начать, подумаем о том, зачем вообще нужна оптимизация сайтов. Пожалуй, можно сказать, что нужна она для того, чтобы сайтом могло бы пользоваться больше людей, чем до оптимизации.

Недели, месяцы – такой срок приходит на ум, когда говорят об оформлении кредита. Наш продукт «Кредит Онлайн» должен был радикально изменить ситуацию, сократив всю процедуру до нескольких кликов. Невозможно? Разработчикам «Промсвязьбанка» удалось превратить это «хождение по мукам» в удобный «волшебный кошелёк».

В 2017 году у многих интеграторов возникали вопросы о замене торгового оборудования при переходе на новые условия работы, соответствующие требованиям Закона 54-ФЗ «О применении контрольно-кассовой техники». Поскольку клиенты, которым требовалась замена или дооснащение торговых мест новым оборудованием, понимали его принцип действия и необходимую функциональность, необходимые работы прошли без накладок.

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

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

Этот пост о том, как в ожидании выделения денег на новый корпоративный портал можно с минимальными затратами прокачать текущую версию до вполне приличного состояния.

Под катом немного личного опыта и полезных советов. Я расскажу про улучшение usability, измерение пользовательского опыта и о том, какой результат мы получили.

В браузерном JavaScript интерфейсы стали предсказуемы. «Однопоточные», с транзакционным сценарием отрисовки: пустой экран — загрузка — интерфейс. Разработчик Артём Белов из компании Cxense с упором на закон Парето рассказал, как, потратив 20% времени, отрисовать приложение на 80% быстрее за счет приемов «реактивного дизайна» — еще не сформулированных, но уже используемых в продуктах с приоритетом на UX.

Но что касается более матерых парней, которые не вылезают из Webpack и заставляют страдать Webpack, а не наоборот? Они подключают плагины. Но поскольку мы в начале развития этой техники, экосистема нам предлагает плагин, который берет ваш HTML, генерирует на его основе HTML со встроенным CSS, дает QR-код для рекламы… Серьезно? После этого ты можешь взять и через “!important” перебить стили… Пожалуй, стоит задать вопрос, почему я все еще во фронтенде.

Привет, Хабр!

Каждый современный браузер сейчас позволяет работать с ES6 Modules.

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

Под катом рассказ о том, как я смог уменьшить размер приложения на 11% без ущерба для старых браузеров и своих нервов.

Пролог: Для начала я расскажу о проекте, чтобы были представления о том как мы работали над проектом и для воссоздания той боли, которую мы чувствовали.

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

Мы разрабатываем почти с нуля проект на Garry’s Mod (Gmod), важно подметить, что на момент написания статьи Гарри создает уже новый проект S&Box на движке Unreal Engine. Мы же до сих пор сидим на Source.

Который вообще не подходит для нашей тематики сервера.

Привет, Хабр!

Не так давно я понял, что работа с CSS во всех моих приложениях — это боль для разработчика и пользователя.

Под катом лежат мои проблемы, куча странного кода и подводные камни на пути к правильной работе со стилями.

12 ноября Google по тихому обновил PageSpeed Insights, изменив в нем практически все. Это станет большой переменой для всей индустрии сайтостроения. Похоже, сейчас настанет некоторая волна паники и хайпа вокруг этого события. В статье — анализ перемен и что они нам принесут.

Полгода назад Google представила обновленную версию своего почтового сервиса. Несмотря на то что многие пользователи были недовольны редизайном, в том числе и на Хабре, это теперь основной интерфейс для пользователей.

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

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

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