Kelin2025

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  })
})

observer.observe(someElement)

Kelin2025

<template>
  <!-- Will add/remove .small if the width is less / greater -->
  <div class="post__item" v-responsive="{ small: el => el.width <= 500 }">
    <img class="post__image" :src="post.image" />
    <div class="post__text">{{post.text}}</div>
  </div>
</template>

<script>
import { ResponsiveDirective } from "vue-responsive-components"

Kelin2025

import nocatch from 'async-nocatch'

const myFetch = nocatch(fetch)

const { success, result } = await myFetch('http://api.github.com/users')
if (success) {
  console.log('Done', result)
} else {
  console.log('Fail', result)
}

Kelin2025

децентрализованность, декларативность, эффективность. требовался инструмент, позволяющий управлять данными в сложных приложениях без опасности раздуть монолитный центральный стор, с явным control flow, нормальной типизацией и емким апи
— сторы для приложения должны быть лёгкими, насколько это возможно — не должна пугать мысль о том, что нужно добавить ещё один стор для конкретных нужд
— сторы должны свободно совмещаться — идея в том, что данные, которые потребуются приложению, можно распределить статически, заранее показав как данные будут преобразоваться во время работы приложения
— принцип работы должен by design исключать необходимость в reselect, оповещая об изменениях только тех, кому они необходимы. это позволяет не задумываться о том, что у тебя будет триггериться всё приложение если ты захочешь вынести  стейт модалки из реакта. по совместительству это означает что приложения избавлены от проблем с перфомансом, возникшим у react-redux при переходе на контекст
— возможность, место, и способ вынести любу

Kelin2025

import React from 'react'
import { useStore } from 'effector-react'
import { createStore, createEvent } from 'effector'

// events.js
const emailChanged = createEvent('Email changed')
const passwordChanged = createEvent('Password changed')
const submitPressed = createEvent('Submit pressed')

// stores.js

Kelin2025

import { createEvent } from 'effector'

export const loginInputChanged = createEvent('Login input changed')
export const passwordInputChanged = createEvent('Password input changed')
export const formReset = createEvent('Form was reset')
export const submitPressed = createEvent('Submit button pressed')
export const processSubmit = createEffect('Process submit')

Kelin2025

import { createStore } from 'effector'

// Simple stores
const $todo = createStore('')
const $todos = createStore([])

// Use store.map(state => computedState) 
// To create computed stores
const $todosCount = $todos.map(todos => todos.length)
const $completedTodos = $todos.map(todos => todos.filter(todo => todo.completed))

Kelin2025

import { createStore, createEvent } from 'effector'

// Create events
const inputChanged = createEvent('Input changed')
const todoAdded = createEvent('Todo added')
const todoRemoved = createEvent('Todo removed')
const todoToggled = createEvent('Todo toggled')

const $todo = createStore('')
const $todos = createStore([])

Kelin2025

import { createStore, createEvent } from 'effector'

const inputChanged = createEvent('Input changed')
const todoAdded = createEvent('Todo added')
const todoRemoved = createEvent('Todo removed')
const todoToggled = createEvent('Todo toggled')
// We added one more event here
const submitPressed = createEvent('Submit pressed')

const $todo = createStore('')

Kelin2025

import React from 'react'
import { useStore } from 'effector-react'

import { $todo, $todos, submitPressed, inputChanged, todoToggled, todoRemoved } from './stores'

export const TodoInput = () => {
  // Use useStore(store) hook to get the state
  // And update the component on state changes
  const todo = useStore($todo)