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 { 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 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

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

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

<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

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

@media only screen and (max-width: 576px) {
  .post__item {
    flex-direction: column;
  }
  
  .post__image {
    flex: 0 auto;
    height: auto;
  }
}

Kelin2025

.post__item {
  display: flex;
}
.post__image {
  flex: 0 0 200px;
  height: 200px;
}

Kelin2025

<template>
  <Responsive :breakpoints="{
    small: el => el.width <= 500
  }">
    <div slot-scope="el" :class="['post__item', { small: el.is.small }]">
      <img class="post__image" :src="post.image" />
      <div class="post__text">{{post.text}}</div>
    </div>
  </Responsive>
</template>