https://telegra.ph/Front-End-Performance-Checklist-2021-Part-2-07-29
#article #performance #frontend

По опросу о популярности языков программирования среди участников нашего сообщества уверенно побеждает python!

В связи с чем, приглашаем вас на митап дружественного сообщества!

Generators, serverless - ключевые слова данного мероприятия очень похожи на то, что происходит в мире javascript, давайте посмотрим, что похоже а что отличается в js и python.

🔗 https://bit.ly/2V5f5ai

#python #meetup #generators #serverless

Большая статья о том, как расширения для Chrome влияют на производительность браузера.

🔗 https://www.debugbear.com/blog/chrome-extension-performance-2021

#chrome #extension #performance #browser

Курс по Docker и Ansbile (15,5 часов видео-лекций, задания и упражнения)

- Рассматривается deploy реального стека приложений на кластер серверов Swarm с помощью Ansible.

- Детально разбираются такие технологии, как Docker, Docker Compose, Docker Swarm и Ansible.

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

- В результате курса вы получите знания и навыки, которых будет достаточно для того, чтобы автоматизировать своё работу на проекте и эффективно доставлять реальные приложения на production.

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

Для подписчиков нашей группы - промокод для покупки✅
#ads #discount

https://twitter.com/vuejs/status/1422531534683316328

#срочновномер #news #vue

Набор лучших практик для написания интеграционных тестов на node.js.

🔗 https://github.com/testjavascript/nodejs-integration-tests-best-practices

#nodejs #repo #github #tests

Mapus - инструмент для совместной работы над картами, похож на figma, но для карт. Проект написан на javascript, использует leaflet.

Автор проекта Alyssa X - девятнадцатилетняя девушка из Калифорнии, в ее гитхабе можно найти много классных проектов.

🔗 https://github.com/alyssaxuu/mapus
🔗 https://www.producthunt.com/posts/mapus

#maps #github #repo #javascript #producthunt

Онлайн - заседание круглого стола «Современный Frontend»

🗓12 августа
⏰19:30 (МСК)

Участники:

📌 Денис Радин
(организатор JS Nation и React Summit)

📌Виталий Фридман
(сооснователь Smashing Magazine)

📌Андрей Кучеренко
(Chief Software Engineer in EPAM Systems, лидер Math.random(): javascript community)

📌Ирина Левина
(драйвер Frontspot сообщества, модератор дискуссии)

Лидеры frontend-индустрии встречаются, чтобы обсудить:

- Как выглядит современный frontend?
- Возрождается ли статический интернет?
- “No Code or coding is future?”
- Современное обучение.

Регистрация ✅

Agora Flat - десктопный клиент для онлайн класса. Приложение сделано на React и Electron.

Для организации аудио/видео конференции используется сервис agora.io. Это тот самый сервис, который используется в недавно шумевшей социальной сети clubhouse.

🔗 https://github.com/netless-io/flat

#github #repo #webrtc #typescript #react #agora

🔥Вышла новая версия фреймворка Vue 3.2.

Подробная информация о нововведения по ссылке:

🔗 https://dev.to/web2033/vue-3-2-released-1n8b

#vue #release

🪄Магия на github! Просто нажмите "." находясь в любом репозитории на github!

🔗 https://twitter.com/github/status/1425505817827151872

#github #shortcut #news #tip

Если забыли магию 🪄 и не помните, что нажимать на github - нажмите "?"

#github #tips #shortcut

- Вы продоёте рыбов?
- Нет просто показываю.
- Красивое...

Хотите показывать рыбов 🐟, держите генератор - fishdraw!

fishdraw - генерирует svg картинки с нарисоваными рыбами. Генератор написан на javascript без зависимостей. Длинный, как сеть рыбака, файл, который нарисует и назовет тысячи картинок рыбов.

🔗 https://github.com/LingDong-/fishdraw
🔗 https://fishdraw.glitch.me/

#javascript #svg #meme #repo #github

Здравствуйте, друзья!

Сегодня мы начинаем тематические недели на Math.random().

Хедлайнером и повелителем канала на этой неделе будет Костя Пальчик - замечательный разработчик с большим опытом, любитель реактивного программирования, адепт NoCode решений, автор фреймворка ReсksJS, автор проекта ThinkRx.

Задавайте вопросы и пишите комментарии, а в конце недели ждите полноценный стрим с Костей с ответами на вопросы!

#thematicweek #nocode #reactive #recksjs

Всем привет, меня зовут Костя! 🙂

Андрей предложил мне "форс пуш" права на канал на эту неделю, чтобы я рассказал о какой-то теме!
Когда-то я писал на Angular(js) и тревожился что не учу React. Потом я попробовал React и начал мучится что не знаю Vue. Попробовал Vue — а на рынке есть ещё Ember, CycleJS, Svelte, Solid, и т.д.
Поэтому я выбрал тему фреймворков. Только я хочу рассказать не про их отличия, а чем они схожи.
Надеюсь, это поможет чьему-то fear of missing out.

Мы поговорим о том как фреймворки подходят к change detection, описывают UI (темплейты/JSX), компилируются и имплементируют SSR/SSG.
Посты будут короткие, но с полезными ссылками. Рассчитаны на junior / middle JS разработчиков.
Пишите в комментариях своё мнение, нравится/нет, задавайте вопросы.

И первый пост прямо сейчас:

Change detection & Reactivity

Начнём с того как фреймворк узнаёт что данные в нашей компоненте изменились и её нужно перерисовать.
Допустим, у нас есть славный компонент Counter, вы все его уже когда-то видели: [-] count [+]. Пользователь нажал кнопку [+] и мы увеличиваем некий count на +1. Это просто. А фреймворк в этот момент должен понять что нужно перерисовать компоненту с новым count. Давайте рассмотрим на примерах как фреймворки понимают что произошло изменение данных:


Dirty check
Довольно простой метод: мы сохраняем снэпшот состояния компоненты, и при любом взаимодействии с UI (как клик по кнопке) вызываем все хэнлеры, а затем проходимся по всем ключам состояния и проверяем не изменился ли стэйт по сравнению со снэпшотом. Если изменился — перерисовываем компоненту. Для нас это обычно выглядит как простой this.count += 1.
Таким методом пользуется Angular по умолчанию (angular ещё будет в reactive streams ниже)

Reactive atoms / Invalidation API
Некоторые фреймворки предоставляют API для точечного изменения состояния. Когда мы используем этот API (изменяем стэйт) — фреймворк понимает что произошло изменение и планирует перерисовку компоненты. Т.к. Javascript — довольно гибкий язык, такой API может скрываться под разным видом: count(count() + 1) в Knockout, setCount(getCount() + 1) в React и SolidJS.

Отдельно нужно описать Svelte и Vue, которые этот API прячут от девелоперов:
Svelte компилирует count += 1 в вызов API (мы о компиляторах ещё потом поговорим)
а Vue с их this.count += 1 в версии 2.x использовал Object.defineProperty c get/set парой, а с 3-й версии они перешли на Proxy для вызова своего API "под капотом".

N.B: некоторые API регистрируют также и считывание данных из атомов, чтобы точечно обновлять DOM только где этот стэйт используется.

Reactive streams
Мы, разработчики, иногда хотим управлять не дискретными срезами состояний, а потоком изменений. Так, например, мы сможем узнать как часто пользователь кликает [-] и создать особый обработчик для жёстких минусаторов. Для этого хорошо подходят реактивные потоки. Они предоставляют API нам для добавления логики и фреймворку для "слежения" за изменениями.

clicks$.next(1);
count$ = clicks$.scan((acc, curr) => acc + curr, 0);

Такой метод используют Аngular (в OnPush стратегии) и circlejs (ну, и мой экпериментальный recksjs, там вообще везде потоки).
Реактивные потоки относительно легко приделать к реактивным атомам / invalidation API, так что они часто встречаются в код базах с другими фреймворками.

.

Как видно, реализации немного разные, но цель одна и та же: пнуть фреймворк чтобы он перерисовал компоненту.
В следующий раз мы поговорим о том как в разных фреймворках мы задаём этот самый UI, который нужно перерисовывать.
Оставляйте свои комментарии и подключайтесь к math.random коммьюнити — мы любим говорить о технологиях.
До завтра!

___

Если у вас мало вкладок в браузере:
A Hands-on Introduction to Fine-Grained Reactivity — https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf
Reactivity in Depth — https://v3.vuejs.org/guide/reactivity.htm
Angular Change Detection - How Does It Really Work? — https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

#thematicweek #frameworksweek

Templates & JSX

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

Темплейты
Темплейты — это DSL языки, созданные с учётом специфики и фич фреймворка, с прицелом на оптимизацию рендеринга и обновления DOM. JS в таких языках появляется вкраплениями, отдельными островками. Синтаксис темплейтов обычно похож на чистый HTML (но не обязательно), добавляя к нему специальные "глаголы" для вставки данных (например, {{ count }} для текстовых данных), для отображения списков (`v-for / ng-for / # each`), для создания условий (`ng-if / v-if / # if`) и прочие. Темплейты могут описываться строкой, специальной секцией (как во .vue файлах) или даже отдельным файлом (`.component.html` как в Angular).

<template>
  <p>Hello, {{ name }}</p>
</template>

<script>
let name = 'world';
</script>

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

Темплейты используются в Angular, Svelte, Vue


JSX
JSX же — это наоборот JavaScript с вкраплениями HTML-like языка. Это даёт нам максимальную гибкость в описании темплейтов за счёт JS манипуляций, но такая гибкость имеет свои минусы: её сложнее анализировать и оптимизировать. JSX хорошо стандартизирован.

function () {
  let name = 'world';
  return <p>Hello, { name }</p>
}

Для JSX нужен транспайлер, который превратит return <p>42</p> во что-то вроде return createElement('p', { children: 42 }). Функция createElement(…) создаст так называемый virtualDOM элемент — JS объект, описывающий реальный DOM элемент, что-то вроде { type: 'p', children: 42 }. При обновлении состояния компоненты она создаёт новый vDOM, фреймворк сравнит текущий vDOM с новым и сделает обновления реального DOM'а там, где состояние изменилось.

JSX используется в React, Solid, Vue

.

Вот я описал какие они разные, но на практике эти два подхода довольно таки схожи и граница между ними чуть размыта. Вы заметили что я упомянул Vue дважды, и в темплейтах и в JSX? Vue разрешает девелоперам использовать оба синтаксиса: под капотом Vue использует vDOM, но предлагает пользователям писать компоненты в основном с помощью темплейтов, так как компилятор может их хорошо оптимизировать. А компилятор Solid распарсит и оптимизирует JSX почти как темплейты. А Astro использует JSX-like синтаксис, но это на самом деле темплейты.

Да и в целом, на каждый [].map есть свой *-for, а <p>{{ name }}</p> не сильно то отличается от return <p>{ name }</p>.

Оставляйте свои комментарии и подключайтесь к math.random коммьюнити — мы любим говорить о технологиях.
Надеюсь, сегодня я вас больше успокоил чем запутал 🙂
До завтра, завтра поговорим о компиляторах!

#thematicweek #frameworksweek

Всем привет!

Хочу пригласить вас на наш с Андреем Кучеренко math.random стрим!
Поговорим о фреймворках, nocode и не только 🙂
Стрим будет уже завтра, в 18:00 по Киеву, приходите!

Ссылка без регистрации и смс: https://www.youtube.com/watch?v=v7qVVtjzR1Y

🙌