​React Hooks — Slower than HOC?. Интересный тест производительности, сравнивающий быстродействие Hooks и HOC на примере рендеринга 1000 текстовых нод → http://bit.ly/2DB3m6C. Еще примечательна тем, что в комментарии пришел Ден Абрамов и объяснил как нужно было использовать хуки в бенчмарке и что из этого вышло → http://bit.ly/2Gnw6DA

​Play Store теперь принимает прогрессивные веб-приложения (PWA). Интересная статья с разбором того, как работают PWA, TWA и как происходит процесс публикации PWA в Play Store → http://bit.ly/2SP4FIA

​Do we still need JavaScript frameworks? Крутая статья с разбором того, как можно писать SPA на нативных технологиях уже сейчас, и какие плюсы и минусы это в себе несет → http://bit.ly/2Iq684j

​First thoughts on Deno. Краткий обзор deno, преимуществ над node и особенностей его реализации → http://bit.ly/2E9dVz3

​Как использовать Puppeteer — как сервер для разработки. Рассказ Эрика Бидельмана о том, как команда https://web.dev придумала не разворачивать весь проект локально, а забирать живой сайт и подменять контент локально для простого редактирования статей → http://bit.ly/2EeL24L

​Собираем бандл мечты с помощью Webpack. Стенограмма доклада Максима Соснова на Frontend Conf о том, как оптимизировать сборку фронтенда с помощью Webpack. Очень полезно для тех, кто знает основные принципы работы сборщика и хочет углубить свои знания → http://bit.ly/2V6ysdj

Команда Реакт уже не советует делить компоненты на statefull и stateless, что в принципе логично с появленим Hooks. Об этом Ден Абрамов написал в своем твиттере → https://twitter.com/dan_abramov/status/1096927373008818176

​Как правильно сверстать кастомные чекбоксы? Вадим Макеев рассказывает в своем видеоблоге → http://bit.ly/2GSTTe8

​Введение в Node.js за 90 минут: что это такое и когда стоит применять, обзор основных встроенных модулей, написание и деплой сервера с нуля → https://youtu.be/fBNz5xF-Kx4

​Why I’m excited with React Hooks?. Да, снова хуки). Обзор 3 базовых хуков на примере таймера → http://bit.ly/2IqziAf

Почти всегда, при разговоре о производительности веб-сайта, мы говорим о времени ожидания пользователем какого-то события ("First Meaningful Paint" и тд). Мы часто обсуждаем оптимизации фронтенда и бэкенда. И это круто, но остается корень всех бед - скорость света. Часто JavaScript разработчики упускают это проблему из виду 😀

Может ли случится такое, что через 30 лет Интернет будет настолько быстрым, что сайт с сервера в Сан-Франциско будет моментально открываться в Киеве? Физики говорит, что нет.

Допустим:
1. Твой бекенд рендерит страницу (или формирует JSON) за 20мс.
2. Не существует никакого WiFi, провайдеров, маршрутизации и тд. Есть просто оптоволоконный кабель, который одним концом вставлен в твой ноутбук, а вторым напрямую в сервер в Сан-Франциско. Растояние по прямой от Киева до Сан-Франциско - 9,848км (возьмем 10 тыс км для простоты счета).
3. Скорость света в вакуме 300 тыс км в секунду, скорость света в оптоволокне будет ниже - 200 тыс км в секунду.

Если мы посчитаем время, которое проведет наш запрос в пути, то мы получим 100 мс (10 тыс / 200 тыс * 2). Быстрее получить ответ не позволит скорость света. Добавляем время оработки запроса и мы получим 120мс - в 6 раз дольше, чем наш запрос обрабатывает наш бэкенд.

========= Запрос к бэкенду ======
50ms: Kyiv -------запрос-----> SF 
20ms: работа бэкенда         
50ms: Kyiv <------ответ------- SF

Хорошо, мы уже выяснили, что никогда не поиграем в CS:GO с ребятами с Сан-Франциско с пингом ниже 100мс. Давайте дальше :)

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

Для установки TCP соедения используется так называемое "тройное рукопожатие" ("TCP 3-way handshake") и теперь наш запрос выглядит:

========= TCP соединение ========
50ms: Kyiv -------syn--------> SF
50ms: Kyiv <------syn/ack----- SF
50ms: Kyiv -------ack--------> SF
========= Запрос к бэкенду ======
      Kyiv -------запрос-----> SF 
20ms: работа бэкенда         
50ms: Kyiv <------ответ------- SF

Мы не тратим дополнительные 50ms после TCP хендшейка, поскольку мы можем сразу начать отправлять запрос после отправки ack, нам не нужно ждать ответ от сервера. Сервер, как примет ack, посчитает соединение открытым и сразу начнет обрабатывать наш запрос.

То есть ответ пользователь получит через 220ms, в 11 раз дольше, чем отрабатывал наш бэкенд.

Но мы используем HTTPS и нам нужно SSL/TLS соединение и оно устанавливается поверх TCP, и у него есть свой механизм рукопожатия для обменя ключами шифрования, и это нужно сделать до момента, как мы отправим наш запрос на сервер.

Наша схема превращается в:

========= TCP соединение ========
50ms: Kyiv -------syn--------> SF
50ms: Kyiv <------syn/ack----- SF
50ms: Kyiv -------ack--------> SF
========= TLS соединение ========
      Kyiv ---представление--> SF
50ms: Kyiv <--сертификаты----- SF
50ms: Kyiv ---обмен ключами--> SF
50ms: Kyiv <--обмен ключами--- SF
========= Запрос к бэкенду ======
50ms: Kyiv -------запрос-----> SF
20ms: работа бэкенда         
50ms: Kyiv <------ответ------- SF

То есть в условиях, которые не могут даже существовать, когда пользователь имеет оптоволоконный кабель длинной в 10тыс км от своего ноутбука к серверу, он получит ответ через 420мс, в 21 раз дольше чем отрабатывает наш бэкенд. Это без учета того, что нам нужно еще вначале сбегать к DNS, чтобы получить ip-адрес сервера.

Если мы разрабатываем веб-приложения (не важно фронтенд или бекэнд), то обязаны понимать азы работы веба.

Продолжение следует...

​Как ускорить код-ревью . Интересный рассказ о том как улучшить качество кода, наладить процесс код ревью и уменьшить количество ошибок в продакшене → http://bit.ly/2T76aSA

​​Интересная заметка о том почему MDN выбирает Flow (спойлер: нет фич, которые не в страндарте, в их команде больше разработчиков, работавших с Flow, есть инструменты для легкого перехода на TS если что-то пойдет не так) → http://bit.ly/2BLCsbY

​Разбираемся с асинхронностью в JavaScript . Перевод статьи на тему того, как обрабатывает движок js асинхронные операции → http://bit.ly/2Isd94s

​Use Imagemin to compress images. Библиотека для сжатия изображений в статье на web.dev → http://bit.ly/2SR9geb. Также у них есть классная песочница, где можно посмотреть интеграцию с популярными сборщиками, например webpack → http://bit.ly/2GCb4Bh

​A Roadmap for Node.js Security: обзор угроз безопасности и способов защиты проектов на Node.js → http://bit.ly/2BMV1fF

​Make frontend “backend” again: как развивалась разработка бэкенда и что из этого могут позаимствовать фронтендеры. Прикольный доклад Николая Рыжикова на HolyJS → http://bit.ly/2T1CaIo

​Прикольная шпаргалка по git. Описаны самые часто используемые комманды и best practices

​Не умничайте с элементами форм. Брэд Фрост про модалки, формы, best practices при их разработке и том, что мешает юзерам и менеджерам паролей В переводе на Хабре → http://bit.ly/2BUULeI

​Прикольная коллекция бесплатных иллюстрированных аватаров с удобным API → https://joeschmoe.io/