Как стать автором
Обновить
63
0
Евгений Лабутин @LabEG

Senior Typescript and C# Developer

Отправить сообщение

Может ли Orange Pi 5 стать ПК?

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров25K

Привет, Habr! В последнее время на Хабре публикуется много статей про одноплатные компьютеры, характеристики которых не уступают классическим ПК. Мне приглянулся Orange Pi 5 16 GB со слотом M.2. Слот M.2 позволяет поставить очень быстрый SSD диск, а 16 GB памяти должно хватить для большинства бытовых задач. Ради интереса я решил собрать компьютер на этом одноплатнике, и посмотреть может ли он выполнять роль основного ПК. Сравнить его производительность с Ryzen 5800X. Посмотреть для каких задач он подходит. Интересно? Добро пожаловать под кат!

Читать далее
Всего голосов 42: ↑41 и ↓1+49
Комментарии57

Готовим микрофронтенды на чистом JS без фреймворков

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров8.3K

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендов. Ведь все необходимое для разработки и работы Микрофронтендов уже встроено во все современные браузеры. Интересно? Добро пожаловать в статью.

Читать далее
Всего голосов 20: ↑14 и ↓6+12
Комментарии21

Собираем логи веб-приложений в Kibana/Loki

Время на прочтение7 мин
Количество просмотров8.2K

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Расскажу вам о том, как мы на нашем проекте МТС Твой бизнес собираем логи с клиентских веб‑приложений. А еще обсудим вспомогательный микросервис логирования, который мы вывели в Open source, и поговорим о том, как устроено логирование в принципе.

Читать далее
Всего голосов 4: ↑4 и ↓0+4
Комментарии13

Пререндеринг или Серверный рендеринг?

Время на прочтение7 мин
Количество просмотров6.3K

Привет, Хабр! Все знают что для того, чтобы ваш сайт увидели поисковые роботы вам нужен SSR. Но единственное ли это решение? Всегда ли он нужен? Есть ли другие варианты роботам увидеть контент? Что мы можем выиграть от альтернатив?

В этой статье рассмотрим альтернативное решение для SSR, а именно Динамический рендеринг (он же Пререндеринг).

Читать далее
Всего голосов 2: ↑1 и ↓10
Комментарии22

Почему вам стоит использовать Styled Components

Время на прочтение7 мин
Количество просмотров17K

Привет Хабр! Недавно мне попался на рефакторинг один сайт написанный одним студентом. Он был реализован не лучшим образом и уже давно следовало бы его исправить. И вот наконец у меня выдалось свободное время на рефакторинг. Сайт был написан на Next.js, для написания стилей использовались SCSS Modules. А так как я на своих проектах уже давно использую Styled Components тут же в глаза бросился дискомфорт от использования обычного SCSS. И в этой статье я вам расскажу что же это за дискомфорт и как же Styled Components позволяет от него избавиться.

Читать далее
Всего голосов 17: ↑4 и ↓13-9
Комментарии37

Как фронтендеры приручили микросервисы и перестали беспокоить бэкендеров

Время на прочтение9 мин
Количество просмотров11K

Привет Хабр! Меня зовут Евгений Лабутин, я фронтенд-разработчик в МТС Digital. Расскажу вам о том, как мы приручили микросервисы на нашем проекте МТС Твой бизнес, зачем они нам вообще понадобились и какую выгоду мы от этого получили. Интересно? Добро пожаловать под кат!

Читать далее
Всего голосов 32: ↑32 и ↓0+32
Комментарии15

ReCA: React Clean Architecture state manager

Время на прочтение8 мин
Количество просмотров3.2K

Что будет если объединить Функциональное Программирование и Объектно-Ориентированное Программирование в одном веб приложении? Получится мощный инструмент для написания веб приложений объединяющий всю простоту написания верстки в функциональном стиле и мощь ООП для написания бизнес логики сложного приложения. А произвести такое объединение позволяет библиотека ReCA. Которая позволяет использовать в одном приложении оба подхода при это разделяя зоны ответственности и не создавая конфликтов стилей, а также решаюшая множество повседневных задач.

Читать далее
Всего голосов 3: ↑1 и ↓20
Комментарии26

Как мы уменьшаем размер изображений на веб-страницах в 10 раз с помощью нашего оптимизатора

Время на прочтение8 мин
Количество просмотров19K

Привет, Хабр! Меня зовут Евгений Лабутин, я из команды разработки продукта МТС Твой бизнес. Мы разработали свой рецепт приготовления картинок для нашего портала. Благодаря ему удалось сократить их вес на странице до 10 раз относительно уже оптимизированного jpg/png, сохранив при этом простоту разработки – как будто это стандартный img элемент. Разработанный микросервис называется ImageOptimize, из этой статьи вы узнаете, как он работает и что у него под капотом. Мы уже выложили код микросервиса в OpenSource (чему очень рады), поэтому вы тоже можете использовать такую компрессию, настроив ее в несколько простых шагов.

Читать далее
Всего голосов 31: ↑29 и ↓2+33
Комментарии28

TS-Serializable 2: с конвертации свойств из snake case и декоратором вместо наследования

Время на прочтение3 мин
Количество просмотров2.6K
Недавно мне повезло попасть на проект бэкенд которого написан на php. А как принято у php бекэндов json с ответом они отправляют в snake case стиле. И как следствие вся работа с данными на фронте происходила в перемешку в camel case и snake case стилях. Для решения этой проблемы была доработана библиотека сериализации ts-serializable. Теперь при получении данных из json их можно приводить к принятому в js стилю camel case, а при отправке на сервер возвращать в snake case.

ts-serializable

Так же после выхода первой версии у некоторых пользователей были пожелания по функционалу. Эти пожелания реализованы в новой версии.
Читать дальше →
Всего голосов 1: ↑1 и ↓0+1
Комментарии2

Чистая Архитектура для веб-приложений

Время на прочтение36 мин
Количество просмотров106K
Хочу поделиться с вами подходом который я уже много лет использую в разработке приложений, в том числе и веб-приложений. Многим разработчикам настольных, серверных и мобильных приложений этот подход хорошо знаком, т.к. является фундаментальным при построении таких приложений, однако в вебе он представлен очень скудно, хотя желающие использовать такой подход однозначно есть. Кроме того на таком подходе написан редактор VS Code.

Чистая Архитектура

В результате применения этого подхода вы отвяжетесь от конкретного фреймворка. Сможете легко переключать библиотеку представления внутри вашего приложения, например React, Preact, Vue, Mithril без переписывания бизнес логики, а в большинстве случаев даже вьюхи. Если у вас есть приложение на Angular 1, вы без проблем сможете перевести его на Angular 2+, React, Svelte, WebComponents или даже свою библиотеку представления. Если у вас есть приложение на Angular 2+, но нету специалистов для него, то вы без проблем сможете перевести приложение на более популярную библиотеку без переписывания бизнес логики. А в итоге вообще забыть про проблему миграции с фремворка на фреймворк. Что же это за магия такая?
Читать дальше →
Всего голосов 21: ↑17 и ↓4+16
Комментарии80

First DI: Первый DI на интерфейсах для Typescript приложений

Время на прочтение6 мин
Количество просмотров9.1K
Делюсь одной из своих библиотек которая называется First DI. Она уже много лет помогает мне решить проблему внедрения зависимостей в браузерных приложениях для таких библиотек как React, Preact, Mithril и другие. При написании First DI за основу была взята идеология DI библиотек языков C# и Java, такие как autofac, java spring autowired, ninject и другие. И точно так как библиотеки из этих языков First DI работает опираясь на рефлексию и интерфейсы Typescript.
Читать дальше →
Всего голосов 9: ↑8 и ↓1+11
Комментарии2

Рабочая станция в Docker контейнере

Время на прочтение5 мин
Количество просмотров36K
Для чего? Мне постоянно приходят всякие идеи и некоторые из них сразу хочется попробовать, но рабочая станция не всегда под рукой, поэтому я настраивал IDE на всем что попадется под руку. В итоге устройства начали захламляться, а поддерживать и обновлять их стало тяжело.

Чтобы решить эту проблему я решил разместить такую «записную книжку» в облаке, и что бы ежедневно обновлялась и удаляла весь накопившийся мусор. А для работы подключаться к нему удаленно.

image

В итоге, сам того не подозревая, сделал очень удобный инструмент для решения большого количества задач: записная книжка, тестовая площадка, посмотреть то что телефон не показывает, безопасная песочница, запуск скриптов для программ работающие только GUI и мн. др. А в статье хочу поделиться методом создания таких контейнеров.
Читать дальше →
Всего голосов 21: ↑18 и ↓3+22
Комментарии62

Chrome Audit на 500: Часть 1. Лендинг

Время на прочтение16 мин
Количество просмотров22K
В инструментах разработчика браузера хром есть вкладка «Audit». На ней расположился инструмент который называется Lighthouse, служит он для анализа насколько хорошо сделано веб приложение.

image

Недавно я решил протестировать одно приложение и ужаснулся результатам. Сразу по нескольким разделам оценка находилась в красной зоне. Я принялся изучать что же с моим приложением не то. И нашел в результатах анализа большой список очень полезных рекомендаций, выполнил их и получил 500 баллов. В результате приложение стало запускаться значительно быстрее, а я пересмотрел несколько концепций относительно метода построения приложений. А в этой статье я хочу поделиться самыми интересными решениями к которым я пришел.
Читать дальше →
Всего голосов 48: ↑43 и ↓5+38
Комментарии39

Rollup: уже можно собирать приложения

Время на прочтение9 мин
Количество просмотров35K
Rollup — это сборщик javascript приложений и библиотек нового поколения. Многим он давно знаком как перспективный сборщик, который хорошо подходит для сборки библиотек, но плохо подходит для сборки приложений. Однако время идет, продукт активно развивается.

Я впервые попробовал его в начале 2017 года. Он сразу понравился мне за поддержку компиляции в ES2015, treeshaking, отсутствием модулей в сборке и конечно простым конфигом. Но тогда это был сырой продукт, с небольшим числом плагинов и очень ограниченной функциональностью, и я решил оставить его на потом и продолжил собирать через browserify. Вторая попытка была в 2018 году, тогда он уже значительно оброс комьюнити, плагинами и функционалом, но все еще не хватало качества в некоторых функциях, включая watcher. И вот наконец в начале 2019 года можно смело сказать — с помощью Rollup можно просто и удобно собирать современные приложения.
Читать дальше →
Всего голосов 25: ↑25 и ↓0+25
Комментарии15

TypeScript: Десериализация JSON в классы с валидацией типов у свойств

Время на прочтение3 мин
Количество просмотров24K
Привет, Хабр! Хочу поделиться с вами своей библиотекой для десериализации объектов JSON в классы, которая еще и автоматически валидирует по типам входные данные.

Не так давно в JavaScript появилась такая замечательная вещь как классы, которая значительно упростила процесс написания кода. Но к сожалению не появился функционал для десериализации JSON в эти самые классы, т.е. сериализовать класс в строку можно, а вот обратно уже своими силами. И вот для исправления этого недостатка и была написана библиотека ts-serializable которой я хочу поделиться с вами.
Читать дальше →
Всего голосов 15: ↑15 и ↓0+15
Комментарии19

Информация

В рейтинге
4 570-й
Откуда
Москва, Москва и Московская обл., Россия
Работает в
Дата рождения
Зарегистрирован
Активность

Специализация

Fullstack Developer
Lead
От 500 000 ₽