Pull to refresh
0
0
Send message

React 18. Что нового?

Reading time6 min
Views19K

Эта статья — перевод основных изменений версии реакта 18.0.0.

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments4

Опыт SЕО оптимизации кода на NextJS

Reading time5 min
Views7.7K

Оптимизация Сео Аудита на NextJS. Это ненастолько удачное занятие, поскольку, по моему опыту, он не дает полного контроля над event loop, который и надо приоритетно оптимизировать. Однако NextJS дает очень высокую скорость разработки, которая нужна многим продуктам, поэтому научится поднимать до 90 обязательно и в этой статье я поделюсь какие шаги мне помогли этого достичь.

Читать далее
Total votes 13: ↑11 and ↓2+9
Comments11

Разработка приложений на Typescript с использованием Nx

Reading time11 min
Views20K

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

Читать далее
Total votes 6: ↑6 and ↓0+6
Comments11

Tarantool: ускорение разработки с Rust

Reading time17 min
Views12K

Tarantool, как известно, поддерживает любой язык, который совместим с C и компилируется в машинный код. В том числе есть возможность реализации хранимых функций и модулей на Lua и C. Тем не менее, уже в двух своих проектах мы использовали Rust (в одном полностью перенесли Lua-код на Rust) и получили 5-кратное увеличение производительности по сравнению с Lua и сопоставимый результат, который дает по производительности C.

Читать далее
Total votes 51: ↑49 and ↓2+47
Comments27

cors-anywhere на чистом конфиге nginx

Reading time5 min
Views21K

Если вы сталкивались с CORS, то знаете всю ту боль, которую испытывает разработчик, когда нужно сходить к API на другом домене. Если конфигурация сервера не доступна для настройки, то использовали какое-нибудь решение на основе не менее популярного решения cors-anywhere.

Не одним CORS едины
Total votes 11: ↑10 and ↓1+9
Comments12

Мой опыт с Webpack 5 Module Federation

Level of difficultyMedium
Reading time11 min
Views16K

Всем привет. Меня зовут Михаил, я - фронтенд-разработчик в Лиге Цифровой Экономики.

В последнее время я пробую себя в должности руководителя направления фронтенд-разработки, однако я хочу с вами поделиться опытом разработки приложения с применением Webpack Module Federation, о том, какие задачи приходилось решать и проблемы, которые возникли на этом пути. Не буду вдаваться в теорию о микрофронтах и module federation, об этом уже много написано и предполагается, что вы знакомы с базовой настройкой. Мы же поговорим о самом «вкусном», некоторые моменты будут опущены в целях сосредоточения на деталях.

Читать далее
Total votes 22: ↑22 and ↓0+22
Comments22

Почему же всё-таки React, а не Angular

Reading time6 min
Views22K

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

Читать далее
Total votes 27: ↑15 and ↓12+3
Comments102

Как вырастить тупого ребёнка (научно обоснованные вредные советы)

Reading time7 min
Views266K

Brain of someone described as an «idiot»

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

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

Что мы подразумеваем под умственным развитием


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

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

Итак, начнём растить не очень умного ребёнка, пользуясь достижениями современной науки.
Читать дальше →
Total votes 201: ↑178 and ↓23+155
Comments480

Webpack: параллельная сборка изоморфного приложения с перезагрузкой браузера

Reading time11 min
Views4.2K

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


  • эти части собираются параллельно (в разных процессах)
  • после пересборки серверной части перезапускается сервер, исходя из новых файлов
  • после пересборки фронтовой части обновляется текущая страница в браузере
  • изоморфные файлы вызывают обе пересборки, а неизоморфные — только соответствующую
  • необходимые параметры (порт watch-сервера, https-режим) настраиваются через env-переменные

Коллеги настраивали лишь последовательную сборку этих частей при изменении любых файлов, что приводило к обязательному перезапуску сервера и нескольким перезагрузкам страницы (т.к. для этого использовалась либо middleware, отслеживающая запуск сервера, либо watch-сервер webpack, но видел и что используются они одновременно). Поэтому тема показалась актуальной, разберем все по полочкам.

Читать дальше →
Rating0
Comments0

Децентрализованная конфигурация webpack или как упростить сборку проекта

Reading time8 min
Views8.8K

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

Если провести аналогию с обычным кодом, то достижение таких объёмов в рамках одного модуля/класса/компонента/сущности становится сигналом, чтобы заняться декомпозицией и разделить ответственность по более мелким и независимым составляющим.

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

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

Читать далее
Total votes 51: ↑51 and ↓0+51
Comments19

Flutter vs Native: почему мы переходим с первого на второй

Reading time9 min
Views38K

Привет, Хабр! Меня зовут Сергей, я занимаюсь мобильной разработкой 13 лет и недавно стал руководителем разработки мобильного приложения «Пункты выдачи заказов» в Ozon. Невольно став сместителем существующего строя в проекте (фреймворки, технологии, подход), я стал часто слышать вопрос: «Почему вы отказались от Flutter?».

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

Читать далее
Total votes 55: ↑39 and ↓16+23
Comments117

Экосистема React в 2022 году

Reading time6 min
Views37K

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

Читать далее
Total votes 28: ↑25 and ↓3+22
Comments60

Безопасный CSS, или как писать универсальные стили

Reading time11 min
Views32K

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

Читать статью
Total votes 30: ↑28 and ↓2+26
Comments12

Зарплаты украинских разработчиков — зима 2022. Architect-$7200, Senior-$5500, Middle-$3150, Junior-$1200

Reading time4 min
Views58K

Украинский ресурс DOU.UA в декабре 2021 года провел большой опрос среди украинских ИТ-специалистов о работе и зарплатах.

Всего собрали 8005 анкет от разработчиков разных уровней: от Intern до Architect. Предлагаем вашему вниманию первую статью по результатам этого опроса – зарплаты разработчиков.

Из интересного - это полугодие рекордное по уровню роста зарплат, особенно это касается опытных специалистов. Медианные зарплаты архитекторов пересекли отметку в $6000, зарплата у Senior Java увеличилась на $800, но самая высокая медиана среди языков программирования до сих пор у Scala-разработчиков – $5300.

Читать далее
Total votes 45: ↑41 and ↓4+37
Comments129

Как писать условия в JSX

Reading time7 min
Views24K

Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в 🇩🇪 Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.

Сегодня я хочу поговорить про React и JSX. Почти в каждом проекте мы пишем JSX шаблоны, которые рендерятся в зависимости от условий. Делаем ли мы это правильно? Это перевод оригинальной статьи.

Читать далее
Total votes 13: ↑10 and ↓3+7
Comments3

«День с̶у̶р̶к̶а̶ Redux» — как бороться с рутиной, применяя автоматизацию

Reading time5 min
Views8.5K

"Ух-ты! Какая интересная задача! И оценка времени на разработку хорошая! ..."

2 часа спустя: "Какой же это ужас, ещё 10 редьюсеров создать, ещё 10 раз описать зависимости состояний. Типы, компоненты... Сколько же бесполезной рутины... Вот бы можно было писать только декларативную логику, всегда."

Если вам хоть отчасти близок текст выше, не переживайте, вы не одни такие. Я - человек который не один раз произнес сказаное выше.

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

Читать далее
Total votes 10: ↑7 and ↓3+4
Comments15

Улучшаем дизайн React приложения с помощью Compound components

Reading time9 min
Views21K

Сегодня я хочу рассказать про один не очень популярный но очень классный паттерн в написании React приложений - Compound components.

Что это вообще такое

Compound components это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.

Самый наглядный пример такого подхода, который знают все фронты - это select с его option в обычном HTML.

Читать далее
Total votes 16: ↑15 and ↓1+14
Comments9

Решаем проблемы REST с помощью Redux Toolkit Query

Reading time6 min
Views20K

В приложениях с REST архитектурой существует ряд проблем:

повторяющийся код при работе с состоянием приложения;
костыли и велосипеды при обработке результатов и состояний запросов;
отсутствие стандартного механизма кеширования полученных на клиенте данных;
одновременные запросы за одними и теми же данными; 
сложности реализации pessimistic/optimistic обновления состояний.

В клаудных микросервисах Netcracker мы решаем эти проблемы с помощью GraphQl & apollo. Однако есть изрядное количество приложений, использующих классический REST подход для общения с сервером. Хорошим решением для них является Redux Toolkit Query.

Решаем проблемы REST c помощью RTK Query
Total votes 5: ↑5 and ↓0+5
Comments1

Профессиональный React стек для создания сложных приложений в 2022 году

Reading time10 min
Views30K

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

К этой статье прилагается GitHub репозиторий и Демо приложение, которые демонстрируют работу  упомянутых в этой стать модулей (и некоторых других). GitHub  репозиторий можно использовать в качестве boilerplate для вашего следующего профессионального приложения.

Читать далее
Total votes 23: ↑11 and ↓12-1
Comments100
1
23 ...

Information

Rating
Does not participate
Registered
Activity