13 способов запустить веб-приложение в Интернет
#worth_seeing

Сегодня в рекомендациях к просмотру видео с конференции JavaScript fwdays’21, которая проходила в начале лета. Докладчик Андрей Шумада постоянный член программного комитета конференций Fwdays, судья DEV Challenge и регулярный докладчик на JS конференциях.

В своем докладе Андрей делает разбор как задеплоить приложение, причем как SPA, так и Node.js. Доклад идет от домашнего компьютера к Kubernetes. Завершает доклад сравнительная таблица всех разобранных способов.

Слайды доступны на сайте конференции.

Знакомство с Node.js
#worth_seeing

В рамках Яндекс Академии существует youtube канал Фронтенд. Сегодняшнее видео как раз с этого канала. По сути это три лекции склеенные в одно видео – смотрите таймкоды.

Лекции будут полезны начинающим разработчикам. В них Герман Волков сделал толково объясняет как работать с #nodejs.

Какие open source продукты стоит знать Node.js разработчику?
#list

Node.js моложе, чем PHP или Java. Поэтому у нас в экосистеме есть много библиотек, несколько фреймворков и мало open-source продуктов. Продукт это программное обеспечение, которое команда может запустить для бизнеса за один день. Примеры из PHP экосистемы: WordPress, Drupal, Magento.

Вот список open source Node.js продуктов:
– Ghost, блогинг
– Hexo, блогинг
– Strapi, headless cms
– NodeBB, форум
– AdminBro, админ панель

В завершение несколько мыслей:
– в зависимостях проектов из списка вы может обнаружить moment, express и т.д. Принцип работает не трогай никто не отменял.
– в мире PHP есть легко видима разница в зарплатах у WordPress разработчиков и PHP разработчиков. Аналогично только Strapi/Ghost разработчик будут получать меньше, чем универсальный Node.js разработчик.
– очевидна ниша создать свой open source Node.js проект и зарабатывать на консальтинге, cloud решение и т.д.

Хочу поделиться каналом Хороший разработчик знает. Его ведёт Павел Поляков, разработчик с 15-летним опытом, живущий сейчас в Германии. Пишет посты с уклоном в soft skills и инжиниринг менеджмент.

Примеры постов:
🔗 Про продуктивные конфликты
🔗 Про Рождественский календарь для разработчика
🔗 Все как код

Контент на канале будет интересен для Middle+ уровня, когда инвестиции времени в софт-скилы начинают приносить больше пользы.

Что такое S3 Object Lambda и как ее использовать?
#aws

В марте 2021 AWS представили новый тип Lambdа – S3 Object. Она используется, чтобы обработке и изменения запросов к файлам в S3. Примеры использования:
– ресайзинг картинок
– мутация данных в зависимости от того, кто сделал запрос на S3.
– gzip на лету во время запроса

Еще раз напомню, что не стоит использовать Node.js как прокси для загрузки файла в S3. Для этого существуют signed url.

Ссылки по теме:
– Анонс в блоге
– Документация

Data Structures Easy to Advanced Course
#worth_seeing

Типичная проблема JS разработчиков – отсутствие фундаментального образования. Сегодняшняя рекомендация призвана помочь с структурами данных. Автор смог уложить в 8 часов, то что в университете растянут на один-два семестра. Примеры кода по традиции приведены на Java. Отмечу, что видео идет в youtube аккаунте freeCodeCamp, ресурса который можно смело рекомендовать для начинающих разработчиков.

Команда Telegram выкатила обновление:
- нативные реакции (я их включил в чате и на канале)
- спойлеры выглядит вот так
Другие фичи в блоге.

Лично для меня обновление прям новогодний подарок. До этого был выбор или лайки, или комменты.

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

​​Road to production
#worth_seeing

В мае 2021 компания DevPro проводила онлайн JS конференцию, где я делал доклад "Road to Production". Идея доклада поделиться подходами на каждом из фаз life cycle разработки приложения. В рамках доклада я использовал DevOps концепцию "Day 0/Day 1/Day 2", которая обозначает:
day 0️⃣ – проектирование и создание PoC
day 1️⃣ – разработка и релиз
day 2️⃣ – поддержка и мониторинг

👀видео
🔗my-talks.net
📕Слайды

Схожими идеями в рамках VinnytsiaJS 2021 делился Виталий Ратушный

​​Application integration patterns for microservices
#worth_seeing #aws #microservices

Сегодня в рекомендациях видео с AWS re:Invent 2021. Докладчик Dirk Fröehner делает доклады об паттернах интеграции микросервисов каждый год. Если вы еще не видели, то обязательно посмотрите. Доклад естественно сделан на базе AWS стэке, но терминология и паттерны универсальны являются базой микросервисной архитектуры.

👀видео
📕cлайды

Что такое WICG?

WICG расшифровывается Web Incubator Community Group. WICG является часть W3 и там делают предложения по расширению браузерного функционала. Не стоит путать с TC39, которые занимаются предложениями по расширению спецификации ECMAScript.

Примеры предложений, за которыми я слежу:
– File System Access, для доступа к локальной файловой системы из браузера
– Get Installed Related Apps, для понимание установлено ли приложение

Что дает WICG для разных типов разработчиков:
– Для FE, очевидно, знание и адаптация нового функционала.
– Для BE консистентности API в браузере и #nodejs. Пример по scheduling apis и timer promises.
– Для архитекторов и тех.лидов определение правильного места для реализации функционала.

WICG занимается не только JS API, но и HTML, CSS, WASM функционалом. Подробней рекомендую ознакомиться по данным ссылкам:
🔗 Сайт: wicg.io
🔗 GitHub: github.com/WICG
🔗 Forum: discourse.wicg.io

Как TC39 предложения внедряются в TypeScript?
#typenoscript

В Node.js v16 появились новые фичи. Одна из них Array.at. К сожалению, использовать ее в TypeScript проектах еще нельзя.

TC39 выделяет такие stages для предложений:
🤷🏻 Stage 0: Strawperson.
💡 Stage 1: Proposal.
✍🏻 Stage 2: Draft.
📝 Stage 3: Candidate.
✅ Stage 4: Finished.
Подробней тут.

Так вот TypeScript внедряет фичи только на стадии Stage 3. Это не быстрый процесс, так как необходимо не только добавить описание в базовые d.ts файлы, но и сделать транспайлинг в ECMAScript версии не поддерживающий данную фичу. По-сути сделать функционал аналогичный babel плагинам.

К сожалению, Array.at перенесли из релиза 4.5 в 4.6.

⚠️Транспайлинг в старые версии идет только для синтаксических конструкций, как пример sync/await. Для новых методов в старых версиях ECMAScript необходимо подключать полифилы (смотри ts-polyfill или core-js). Спасибо Илье за вопросы в комментариях.

Рецепты по теме:
– Обзор Node.js v16: Новые JavaScript конструкции

15 Factor App
#devops

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

Ребята из IBM расширили манифест до 15 факторов. Новые факторы:
– API First, т.е. сначала делаем контракт нового API, а только потом его реализовываем.
– Telemetry. Логи из 12 факторов это поток событий, а телеметрия это time series метрики.
– Authentication and authorization. Снова напоминаем себе и команде об важности безопасности.

Какие вопросы задать, чтобы проверить понимание Promise/async/await?
#list

Сегодня поделюсь подборкой моих вопросов для интервью по Promise/async/await. Естественно без ответов, иначе как мне потом их на собеседованиях спрашивать.

1. Какие методы нативного класса Promise вы знаете?
2. Напишите Promise, который создаст микротаск.
3. Напишите Promise, который создаст макротаск.
4. Приведите пример, когда вам было необходимо использовать Promise.allSettled()
5. Что такое Promise executor и почему он должен быть синхронным?
6. Расскажите, что плохо с вот таким кодом:
new Promise((resolve, reject) => getSomething((err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
}));
7. Что произойдет если мы сделаем await дважды? Пример кода:
let counter = 0;
const increment = new Promise(resolve => {
counter++;
resolve();
});
await increment;
await increment;
console.log(counter); // 1? 2? something else?
8. Какое ваше мнение по твиту James M Snell:
Ok, opinions needed: An existing API that returns a Promise currently throws certain errors synchronously. It's changed to return rejected promises (e.g. changing
foo() { throw new Error(); return Promise.resolve() } to async foo() { throw new Error(); return Promise.resolve() }
9. Как отслеживать в #nodejs коде Promise, которые имеют множественный resolve/reject? В каких случаях это указывает на неправильное поведение кода?
10. Каким образом вы работаете с встроенными #nodejs функциями в async/await стиле, которые callback интерфейс?

Первый #voice_chat в 2022 будет сегодня в 21:00 по Киеву. Тема: "Node.js Best Practices". Мы обсудим, где за ними лучше следить, как и когда применять. И, конечно, ответим на ваши вопросы и комментариях.

В гостях: Алексей Бобырь, Principal Engineer в JOIN, работает с NodeJS с 2013. Энтузиаст хороших практик и правильных подходов. Помнит когда async еще был библиотекой, а не словом из синтаксиса языка.

Ссылки:
- https://github.com/goldbergyoni/nodebestpractices – Best Practices, которые обсуждали
- https://github.com/galkin/workshop – воркшоп с примером трейсинга

​​oclif.io – Open CLI Framework
#package

Вчера на Voice Chat Алексей озвучил своей виденье, что правильная организация кода должна позволять сделать из web приложения CLI утилиту. Как правило CLI утилиты написаны на Python (например AWS, GCP). Но есть примеры и на #nodejs: heroku, salesforce, twilio. Они все написаны на фреймворке oclif. У него отличная документация, возможность сразу делать упаковку в исполняемый файл под нужную операционку, публикация на S3, поддержка typenoscript и отличное комьюнити. Однозначный выбор для тех.стэка в проект, которому необходима CLI утилита.

Advanced TypeScript Playlist by Basarat
#typenoscript #worth_seeing

Сегодня в рекомендациях не одно видео, а целый плейлист от Basarat. Вы знаете автора по книге TypeScript Deep Dive. В плейлисте собранны короткие видео уроки по продвинутому использованию typenoscript. Вот три видео, которые мне стоит пересказать как рецепты в рамках канала:
– TypeScript TYPES vs INTERFACES : Key Differences
– TARGET, LIB and POLYFILL for TypeScript and JavaScript
– TypeScript insane type: DeepReadonly

Ссылки:
👀Advanced TypeScript Playlist
📕TypeScript Deep Dive

Create an Application Backend in Clicks with the Amplify Admin UI
#aws #worth_seeing

Сегодняшнее видео – это демо, как с помощью AWS Amplify можно сделать backend для вашего мобильного или веб приложения. Докладчик Ali Spittel, является девелопер адвокатом Amplify.

Видео рекомендуется к просмотру, так как Amplify и его аналог в GCP Firebase является отличным выбором для создания прототипа. Скорость разработки и developer experience действительно радуют. Стоит учесть, что для выхода на рынок на таком тэх стэк необходимо очень внимательно следить за правильной архитектурой и FinOps.

Ссылки:
👀 видео
📕 amplify docs
⚙️ sandbox

​​Node Congress
#conference

Git Nation проводит несколько конференций в год. Возможно, вы слышали о них:
- TestJS Summit
- Node Congress
- GraphQL Galaxy
- JSNation Live
- React Summit

Первой из них пройдет Node Congress.
Когда: 17-18 Февраля
Формат: онлайн
Регистрация: nodecongress.com
Билеты: бесплатной для просмотра онлайн или 46 euro

Тем на сайте еще нет, но список докладчиков уже выложен. Программный комитет возглавляет Matteo Colina, поэтому уверен программа будет интересной. Рекомендую к регистрации и просмотру.

Когда и как использовать navigator.sendBeacon?
#web_api

Сегодня обсудим Web API navigator.sendBeacon. Beacon API используется для отправки асинхронного и неблокирующего запроса на веб-сервер. Запрос не ожидает ответа. В отличие от XMLHttpRequest или Fetch-based запросов, браузер гарантирует отправку запрос до закрытия страницы или перехода на другую. Поэтому данный API рекомендованный способ для отправки аналитических данных. Его синтаксис:
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);
На данный url будет отправлен POST запрос. Его Content-Type будет зависит от аргумента data. По умолчанию это 'text/plain; charset=UTF-8'. Чтобы #nodejs код мог работать с таким типом контента необходимо включить соотвествующий парсер. В express это app.use(bodyParser.text());. Данные необходимо будет десерилизовать из текста.

Чтобы работать с application/json, клиент должен использовать такой код:
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
navigator.sendBeacon(url, blob);
Тогда на сервере мы сразу получаем JSON, с которым удобно работать.

Используйте данное API для построение своей системы аналитики.

Ссылки:
🔗 MDN
🔗 Can I use