Скажите честно, что действительно необходимо для того чтобы стать джуном фронтендером. Нужно ли досканально изучать typescript и подобные темы или достаточно основ html/css/js? Расскажите по подробнее что конкретно вы знали, когда устраивались на своё первое рабочее место джуном
Я уже упоминал атомарные обновления ранее, когда говорил о проблемах контекста реакта.
Я называю обновления атомарными, если компонент обновляется только тогда, когда изменяются данные, которые он использует. У контекста реакта с этим большие проблемы, но и при использовании Zustand можно выстрелить себе в ногу.
Zustand сравнивает по ссылке предыдущее и текущее значение, возвращаемое из useStore(), и если объект изменился — происходит ре-рендер.
❌ В следующем примере у нас всегда будет возвращаться новый объект, и ре-рендер произойдёт даже если изменился только age, а lastName и firstName не изменились
const {firstName, lastName} = useStore(({firstName, lastName}) => ({firstName, lastName}));
Аналогичное поведение будет и в следующем случае
const {firstName, lastName} = useStore();
✅ Есть три варианта использования значений из стейта, которые поддерживают атомарные обновления:
1️⃣ Одиночные селекторы
const firstName = useStore((state) => state.firstName)
const lastName = useStore((state) => state.lastName)
2️⃣ Селектор, который возвращает объект + shallow - функция сравнения предыдущего и нового стейтов
const {firstName, lastName} = useStore(({firstName, lastName}) => ({
firstName,
lastName
}), shallow);
3️⃣ Автосгенерированных селекторы
const firstName = useStore.use.firstName();
const lastName = useStore.use.lastName();
Накидал небольшую демку в Codesandbox
Привет Пикабу ! На связи команда облачной лоу-код платформы Нодуль, где вы можете строить самые гибкие автоматизации бизнес-процессов и создавать собственные приложения, не беспокоясь об инфраструктуре для их поддержания. Не важно, заняты вы фронтендом, бекендом или только начинаете осваивать JavaScript – в этой статье вас информация о бесплатном инструменте, который сэкономит вам кучу сил и времени.
Интерфейс платформы
Недавно в узле JavaScript, который может быть частью ваших разработок, появился ИИ ассистент, который готов закрывать весь объем работ, связанный с кодом:
написание
отладка ошибок
объяснение кода
дальнейшая модификация
Ассистент находится внутри JavaScript узла. Общение происходит в диалоговом окне ‘AI Chat’. В свою очередь, нейронка Нодуля обладает следующими навыками:
Возможность видеть ваш сценарий и структуру узлов
Способность анализировать уже имеющийся код в ноде JavaScript, откуда ассистент и был вызван
Доступ к структуре данных по левую сторону от JS узла.
Прелесть AI ассистента на Нодуле в том, что он совершил семимильный шаг по пути реализации нашей миссии: теперь создание собственных микросервисов или построение сложных автоматизаций доступно даже тем, кто до этого в жизни с кодом не взаимодействовал! Рассмотрим 3 сценария использования, чтобы это доказать.
Рассмотрим сценарий, где нам нужна форма для сбора данных, которая будет доступна по webhook url. Такое решение может пригодиться в тысяче разных случаев. Сначала мы заполняем форму, а дальше информация передается куда вздумается: либо на другую ветку автоматизации на Нодуле для дальнейших преобразований, либо в иную систему. Как насчёт построить такой сценарий без написания и строчки кода?
форма для компоновки емейла для рассылки по базе данных пользователей
Шаг 1. Отправим ИИ ассистенту запрос
Привет! Добавь к моему коду скрипт для создания HTML кода для формы с названием ‘создать емейл’. В ней должны быть следующие поля для заполнения: ‘тема письма’, ‘обзор’, ‘заголовок’, ‘апдейты платформы’, ‘полезные материалы’, ‘другие новости’. Снизу расположи кнопку ‘отправить’. Оформи HTML красивым дизайном и форматированием. Верни результат в виде JSON объекта “html”
Шаг 2. Заменяем наш код на полученный результат.
Шаг 3. Запускаем один раз наш сценарий.
Так JavaScript модуль вернет нам “html” JSON объект для использования его в webhook response, где помимо этого мы меняем параметр типа контента на text/html для корректного отображения формы по ссылке из нашего входного webhook.
Теперь, открывая ваш webhook url, вам отобразиться форма для сбора данных.
Шаг 4. Отправка полученных данных.
Единственное, что остаётся, это сделать так, чтобы полученная через форму информация передавалась на webhook другого сценария для дальнейшей с ней работы. Естественно, писать сами мы ничего не будем:
Теперь наша форма становится полностью активной и готовой принимать входящую информацию. Можно передать полученные значения на сценарий, который сразу же зафиксирует их, к примеру, в Google таблицу.
В мире насчитывается более миллиона NPM пакетов (готовые приложения для программистов, которое они добавляют в свой код), доступ к которым вам может обеспечить ИИ ассистент на Нодуле. Предположим, в вашем сценарии понадобился актуальный обменный курс USD/EUR для осуществления торговли в разных валютах и предоставления актуальной информации на сайте для клиентов. Нежели мучать себя поиском нужной API и чтением документации, озвучьте ваш запрос следующим образом:
Для реализации задачи ассистент использует NPM библиотеку axios для отправки HTTP-запроса GET к ExchangeRate-API, который предоставляет последние обменные курсы. Он получает обменный курс 1 доллара США к 1 Евро и возвращает его в формате JSON.
Корректный результат не всегда достигается с первого раза: иногда получаем ошибки, иногда пустые значения на выходе. Главное не забывать, что отладка ошибок – это тоже не наша забота. Чтобы все было исправлено, попросите ИИ добавить в код console.log для детализации серверного ответа. Далее, возвращаете любую ошибку в чат с ИИ – и новый код перед глазами!
Также вы можете забыть о головной боли при преобразовании данных, таких как, например, форматирование даты. Вам ведь знакомо, когда системы отдают дату в одном формате, например, "YYYY-MM-DD", но другая система должна их принять в другом – “DD MMMM YYYY”
Результат преобразования полученной через webhook даты формата ‘2023-07-11’:
Аналогичным образом ИИ может помочь вам преобразовывать строки, агрегировать данные, фильтровать, сортировать, трансформировать, соединять, разделять, удалять дубликаты, проводить статистический анализ и даже анализировать текст.
В предыдущей части статьи мы обращались к ассистенту через диалоговое окно, но есть еще один вариант, который будет полезен для более предметной отладки какой-то части кода, или для просьбы объяснить, что в нем происходит:
В настоящее время сообщество платформы Нодуль активно набирает обороты и специалисты в области low-code присоединяются к нашему чату, где команда проекта рада фидбеку и готова помочь со всеми вопросами!
Важная ремарка: платформа находиться в бета и предоставляет бесплатный доступ для всех желающих!
Ждем вас на Нодуле и в Телеграмм сообществе!
gRPC - это система удаленного вызова процедур (RPC) с открытым исходным кодом, которая была разработана в Google в 2015 году. Она использует HTTP/2 в качестве транспортного протокола и Protocol Buffers в качестве языка описания интерфейса и формата данных. gRPC позволяет определить и реализовать четыре типа сервисных методов: унарный, серверный потоковый, клиентский потоковый и двунаправленный потоковый. gRPC также поддерживает различные функции, такие как аутентификация, сжатие, отмена, тайм-ауты и метаданные.
История gRPC началась с разработки внутренней системы RPC в Google под названием Stubby. Stubby был создан для обеспечения высокопроизводительной и надежной связи между микросервисами в распределенных системах. Stubby использовал Protocol Buffers для сериализации данных и HTTP/2 для передачи данных. Stubby также предоставлял различные функции, такие как балансировка нагрузки, отказоустойчивость, трассировка, мониторинг и безопасность.
В 2015 году Google решил выложить Stubby в открытый доступ под новым названием gRPC. Целью этого шага было расширить использование RPC во внешних проектах и сообществах, а также сделать RPC более доступным и универсальным для разных языков программирования и платформ. Google также хотел продвигать стандартизацию и совместимость RPC между разными системами.
С тех пор gRPC получил широкое распространение и признание в индустрии. Он используется многими компаниями и организациями, такими как Netflix, Cisco, Square, IBM, Docker, CoreOS и другими. Он также поддерживает множество языков программирования, таких как C#, C++, Dart, Go, Java, Kotlin, Node.js, Objective-C, PHP, Python, Ruby и Swift. Он также имеет большое и активное сообщество разработчиков и пользователей на GitHub и других платформах.
Интересные факты и фичи языков программирования у нас в канале, заходи :)
Веб-дизайн - это динамичная и креативная область, которая постоянно развивается. Если вы являетесь веб-дизайнером или просто увлечены этой сферой, создание блога в Telegram может быть отличным способом поделиться своими знаниями, опытом и вдохновением с другими людьми. В этой статье мы рассмотрим преимущества и советы по ведению блога о веб-дизайне в Telegram.
Telegram предлагает ряд преимуществ для ведения блога о веб-дизайне:
- Широкая аудитория: Telegram имеет миллионы активных пользователей по всему миру, что позволяет достичь большей аудитории и получить обратную связь от разных людей.
- Простота использования: Создание и управление каналом в Telegram очень просто, что позволяет сосредоточиться на контенте и взаимодействии с подписчиками.
- Возможность монетизации: Telegram предоставляет различные инструменты для монетизации блога, такие как каналы с подпиской или продажа рекламного пространства.
Для успешного ведения блога о веб-дизайне в Telegram, важно предлагать интересный и полезный контент.
Вот несколько идей для контента:
- Советы и рекомендации по веб-дизайну: Делитесь своими знаниями и опытом, предлагая полезные советы и трюки, которые помогут другим улучшить свои навыки веб-дизайна.
- Обзоры и анализы: Рассматривайте новые тренды, инструменты и технологии веб-дизайна, а также проводите обзоры наиболее интересных проектов.
- Вдохновение: Публикуйте примеры красивого и инновационного веб-дизайна, которые могут вдохновить ваших читателей. Поделитесь своими любимыми сайтами, приложениями или дизайнерскими концепциями, чтобы помочь другим расширить свой кругозор и исследовать новые идеи.
Telegram предоставляет отличные возможности для взаимодействия с вашей аудиторией. Создайте открытую и дружественную обстановку, где люди могут задавать вопросы, делиться своим мнением и обсуждать темы веб-дизайна. Ответьте на комментарии и обратную связь, чтобы установить более тесную связь с вашими подписчиками.
Не забывайте о возможностях сетевого взаимодействия в Telegram. Присоединяйтесь к другим каналам и группам, связанным с веб-дизайном, чтобы быть в курсе последних новостей и трендов. Общайтесь с коллегами и другими экспертами в сфере, чтобы обменяться опытом и получить новые идеи.
Для успешного ведения блога в Telegram важно предлагать регулярный и качественный контент. Установите расписание публикаций и придерживайтесь его, чтобы ваши подписчики знали, что они могут ожидать нового материала от вас. Используйте разнообразные форматы контента, такие как текстовые посты, изображения, видео или даже интерактивные опросы, чтобы сделать ваш блог более привлекательным и разнообразным.
Ведение блога о веб-дизайне в Telegram - это отличный способ поделиться своими знаниями, вдохновением и опытом с другими людьми, заинтересованными в этой области. Используйте преимущества Telegram, предлагайте интересный контент, активно взаимодействуйте с аудиторией и стремитесь к постоянному улучшению. Ваш блог может стать ценным источником информации и вдохновения для многих людей, увлеченных веб-дизайном.
Наш канал о дизайне:
Отдельное спасибо за подписку, тебе не сложно, а нас это мотивирует создавать контент ❤
Я думаю все знают о ключевом слове `as` в TypeScript. Мы используем его, когда нужно явно указать тип выражения, будь то переменная или функция. Когда мы используем `as`, происходит изменение типа выражения.
В TypeScript 4.9 появился оператор satisfies, который похож на оператор as, но работает немного иначе.
ℹ️ Он также проверяет, что выражение соответствует типу, но не изменяет его (тип).
Разницу легко увидеть на картинке.
При использовании as изменяется тип на Color, и мы теряем информацию об исходном типе объекта. Поэтому у нас появляется ошибка в месте вызова myColor.value.toUpperCase() , потому что компилятор думает, что value может быть также типа RGB, у которого нет метода toUpperCase .
При использовании satisfies ошибки нет, потому что исходная информация о типе сохранена.
Ещё по теме:
- Typescript’s new ‘satisfies’ operator
- Announcing TypeScript 4.9 Beta — The `satisfies` Operator
Как я упомянул в посте о Zustand, мы начали его использовать в июне 2021 года.
До этого использовали просто useState/useReducer/useContext, поняли что так больше нельзя, и перед разработкой новой большой фичи мы начали искать подходящий менеджер состояний. У нас были следующие требования:
1. Использование состояния между компонентами, у которых нет общего родительского компонента. Мы мигрируем с JQuery на React, поэтому большинство компонентов рендерятся с помощью createRoot и не имеют общего родителя, что не позволяет использовать контекст реакта и совместно использовать состояние между компонентами
2. Атомарные обновления, чего нет у контекста реакта
3. Поддержка асинхронных обновлений стейта вне компонента. Чтобы избегать ошибок типа Can't perform a React state update on an unmounted component, которые происходят, когда обновляется состояние для уже удалённого компонента
4. Поддержка Computed Properties
5. Поддержка TypeScript
6. Тестируемость
7. Маленький размер бандла
8. Англоязычное комьюнити, потому что команда англоязычная
И следующий 2 требования я выделю отдельно:
1. Простота использования. Очень важно, когда у вас разработчики со всех концов света и скилы у всех разные. К тому же, очень просто наговнокодить, когда вы начинаете использовать новый инструмент.
2. Возможность использовать вне реакта. Как я уже упомянул, мы мигрируем с JQuery на React, поэтому мы хотели использовать стейт менеджер и в легаси коде. Это позволило бы:
- мигрировать глобальный стейт в новую кодовую базу и использовать во всём приложении
- управлять реакт компонентами из JQuery, просто меняя стейт.
1️⃣ В первоначальном списке оказались:
- Redux
- MobX
- Recoil
- Zustand
- Jotai
- Akita
- Effector
2️⃣ После анализа, в следующем раунде отбора оказались: MobX, Recoil и Zustand. Recoil попал по блату, его проталкивал один из членов команды, и потому что он разработан в стенах авторитетной “запрещённой” организации.
Мы переписали один и тот же небольшой компонент на MobX, Recoil и Zustand, чтобы проверить их в деле:
❌ MobX. По большей части нам не понравилось, что каждый компонент нужно оборачивать в observer, если он использует observable объект. К тому же, у него не самый простой API.
❌ К Recoil было очень много вопросов. Начиная от того, что он жирный — почти 80Кб без GZip и заканчиваю тем, что нельзя просто взять и вынести из компонента асинхронные обновления стейта. С асинхронным получением данных всё понятно, там есть селекторы, но как асинхронно обновить стейт — хз. К тому же он не production ready.
✅ Zustand нам понравился своей простотой, чтобы понять код – даже не нужно смотреть документацию. Также круто, что он удовлетворял буквально каждому нашему требованию.
Если вы ещё не знакомы с Zustand, то обязательно посмотрите видео из предыдущего поста. А если вам в целом интересна тема стейт менеджеров — то подписывайтесь на Артёма — автора реатома.
P.S. Кстати, Zustand прост не только в использовании, его исходники тоже просты как дважды два — четыре. Лучше понять, как он работает под капотом поможет статья Как работает Zustand.
https://t.me/cherkashindev/124
