JavaScript *

Работаю с в строительной компании в проектном отделе. Занимаемся проектированием металлических конструкций. Заказчик передает документацию, которую проектировщики должны превратить в BIM модель. Зачастую в документации Заказчика встречаются несостыковки между отдельными разделами, внутренними стандартами проекта или ГОСТами. В таких случаях пишется технический запрос (technical query) с каким-либо предложением, чтобы конструкция была в соответствии с другими разделами или удовлетворяла стандартам. Написание таких запросов является одной из моих обязанностей. Процесс этот несложный, но жутко рутинный. Ниже схема пайплана этого процесса.

Всем доброго времени суток!

Сегодня речь пойдёт о таком страшном звере, как micro-frontend. Знаю: всем эта тема порядком надоела, но просмотрев полтора десятка выступлений осознал, что не все до конца понимают, что это такое и какие сложности следует решать при организации micro-frontend’а. В данной статье я дам универсальные советы, расскажу с чем не стоит связываться и, в целом, как не превратить проект в ад из callback’ов или непонятных интерфейсов. Итак, обо всем по порядку.

Что такое micro-frontend?

Точного определения днём с огнём не сыщешь. Суть в том, что термин micro-frontend подразумевает наличие множества изолированных приложений с интерфейсом, для взаимодействия с ними посредством API. Это позволяет использовать версионированность, не опираясь на рядом стоящие компоненты. Наглядным примером такой реализации являются различные npm-пакеты. Так же micro-frontend подразумевает под собой использование микро-сервисной архитектуры, что в совокупности даёт нам инкапсулированную логику не зависящую от окружения.

Чем был плох предыдущий подход - монолит?

Для того, чтобы понять преимущества micro-frontend’а нам следует разобраться чем именно он отличается от, так называемого, монолита.

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

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

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

Об авторе статьи. Меня зовут Илья, я занимаюсь разработкой новой версии. Мне не довелось работать с предыдущими версиями "Юнидата", и в проект я пришел на этапе прототипа. Я могу быть не до конца объективен на тему того, почему было выбрано то или иное решение, если это происходило еще до моего присоединения к продукту. В причинах перехода я написал свое видение, после общения с командой.

Итак, всем, кто любит истории переезда с ноткой технических особенностей, добро пожаловать под кат.

Краткий тех.обзор

Сейчас мы имеем модульный монолит и на бэке и на фронте. Они расположены в отельных репозиториях + есть еще один, который содержит настройки для запуска всего приложения в контейнерах.

Кроме того, продукт разделён на Community Edition (хранится в публичном гитлабе) и Enterprise Edition.

Фронтенд состоит из 20 модулей (число не конечное). Мы используем свежую версию typescript и почти свежую react (сейчас 16, но перевод на 17 - дело ближайшего времени). Применяем MVC подход в каждом модуле: реакт только view-слой, своя observable модель (обязательно про нее напишем отдельную статью), mobx сторы в качестве контроллеров.

Всем привет!

В этой статье  расскажу про наш продукт – Счётчик Топ-100, о том, как он устроен и работает, о некоторых сложностях, с которыми мы столкнулись во время его разработки и поддержки, а также поделюсь дальнейшими планами нашей команды по развитию продукта.

Привет, Хабр! Команда ВТБ Лизинга хотела бы поделиться историей о том, как мы начали выстраивать новый IT-ландшафт для системы электронного лизинга автомобилей. Эта система не имеет отношения к знаменитой программе-собеседнику, просто название “e-Leasing” как-то естественно превратилось в Элизу, да так и прижилось.

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

О чем эта статья?

1. uWebsockets.js - высокопроизводительная реализация http/websocket сервера для nodejs

2. AsyncAPI - спецификация для асинхронного API, с помощью которой можно создать описание Websocket API

3. Простой пример websocket API с использованием библиотеки wsapix:
- создадим websocket сервер, используя uWebsockets.js
- настроим валидацию получаемых и отправляемых сообщений
- добавим генерацию документации из кода

В этой небольшой статье мы с вами напишем свое простое приложение по типу "заказа еды". Само приложение если что будет статичным и здесь главный упор будет сделан на использование компонентов Vuetify и рассмотрение того как именно они работают. Также добавлю что здесь мы не будем рассматривать отдельную библиотеку Bootstrap Vue которую использует Vuetify чтобы строить гриды.

Привет, друзья!

На днях мне посчастливилось заниматься решением 2 несложных, но довольно интересных задач на чистом JavaScript (из-за React чуть не забыл, как это делается). В процессе решения этих задач никто не пострадал, напротив, все остались довольны. Поэтому я решил поделиться результатами с сообществом.

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

Введение

Итак, задачи были следующими:

• Реализовать навигацию по разделам сайта с визуальным переключением индикатора текущего местонахождения пользователя и возможностью переходить к определенному разделу по клику. Сама навигация согласно макету должна была выглядеть так:

• Реализовать "ленивую" (отложенную, lazy) загрузку медиаресурсов (изображений, аудио и видео), поскольку те же изображения даже после сжатия с помощью gulp-imagemin весили (и весят, потому что они никуда не делись) неприличные 50 Мб и загружались при запуске приложения (больше они себя так не ведут).

Если вы работаете в продуктовой компании, то жизненный цикл почти каждого продукта будет соответствовать принципу Парето:
- 20% времени мы пишем новый код.
- 80% времени поддерживаем старый. Поддержка в себя включает фиксы багов, обновление кодовой базы (переезд на новые библиотеки например).

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

Когда семья Хейзинг приобрела систему периодической дистилляции и установила ее в необычном строении под названием "Бункер", который был встроен в склон холма на острове в вашингтонском Пьюджет-Саунд, это стало началом Whidbey Island Distillery. Но когда выяснилось, что успех их бизнеса зависит от создания другого типа системы, которая обычно используется в крупных промышленных процессах, они решили, что им лучше придумать, как построить это самим. И им не только удалось ее создать, но и использовать для производства ежевичного ликера, который в настоящее время является самым высококлассным спиртным напитком в Северной Америке по данным Beverage Testing Institute.

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

Ссылка на документацию по пакету: https://www.npmjs.com/package/graphql-request

Итак, приступим. 

Шаг 1. Устанавливаем пакет 

yarn add graphql-request graphql

Шаг 2. Создаем класс контекста запроса

Всем привет, меня зовут Иван, я – разработчик ПО в Orion Innovation. Сейчас много публикаций по фронтенд-разработке, в которых начинающему специалисту легко потеряться и упустить неочевидные вещи.

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

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

Сегодня я хочу поделиться реализацией такого блюра/пикселизации видео (изображения) в вебе.

Привет, друзья!

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

• Using Forms in React
• React.js — формошлепство или работа с формами при помощи пользовательских хуков
• Form validation with React Hooks WITHOUT a library: The Complete Guide

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

Сначала мы разработаем хук, затем используем его в формах для регистрации и авторизации.

Для большей правдоподобности мы напишем простой express-сервер, который будет возвращать некоторые пользовательские данные (например, jwt-токен и хешированный пароль), а также некоторые типичные для процесса авторизации ошибки (например, 404 User not found или 409 Email already in use).

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

Песочница:

Возможно, для того, чтобы в песочнице все заработало, потребуется ввести команду yarn dev в терминале.

Хук в форме npm-пакета — simple-form-react.

За последний год в нашем мире так много изменилось, и React Native не исключение. Мы приветствовали новых членов в нашей команде (с которыми мы очень рады встретиться лично!), наши проекты созрели, и появились новые возможности. Мы рады поделиться всем этим с вами в этой публикации!

В Facebook наша команда работает полугодиями. Каждое полугодие мы пересматриваем нашу стратегию, устанавливаем планы и делимся ими внутри компании. Сегодня мы хотим поделиться с вами, нашим комьюнити, нашими планами на второе полугодие 2021 года.

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

Примерно год назад фронтенд нашего проекта, в качестве фреймворка для которого используется Vue.js 2, дошел до состояния, хорошо описываемого словами "проще сжечь".

К тому времени наш нетипизированный корабль уже трещал по всем швам, и решено было убить сразу нескольких зайцев одним выстрелом: полностью перевести проект на TypeScript, внедрить Vue Composition API и решить проблемы валидации сложных форм.

А проблемы были. Vuelidate - отличная библиотека с массой готовых валидаторов и остается таковой до тех пор, пока мы имеем дело с, так сказать, плоскими формами - формами, не использующими вложенных компонентов, также требующих валидации. Vuelidate работает на уровне компонента, требует наличия миксина, содержит массу правил, которые нам не были нужны, но все равно тянулись в составе пакета, поддержка TypeScript и Composition API на тот момент отсутствовала, и мы не могли более с этим миритьcя.

Что может быть ценнее новых идей и нового опыта? Только возможность обсудить их вместе с людьми, которые в теме. 

Мы решили сделать для вас подборку самых интересных frontend-сообществ и полезных каналов на YouTube для разработчиков JavaScript и веб-дизайнеров.