REACTIVITY IN VANILLA.JS WITH REGIE

A NEW STATE OF PLAY

 

 

Armağan Amcalar
İstanbul JavaScript Topluluğu
1 Nisan 2024

Biraz tanIş olalım.

dashersw

Ben Kimim?

Armağan Amcalar
CEO @ Coyotiv GmbH, CTO @ Neol, CTO @ OpenServ
Founder @ Dream Kid

       dashersw            dashersw

 

erste

cote

dovecote
semaver
vieux

brain-bits

pedalboard.js

tartJS
geneJS
jira-bot

gITHUB kütüphaneleri

Reaktivite nedir?

dashersw

İLK PATERNLER

 

MVC

MVVM

dashersw

dashersw

EN BİLİNEN REAKTİF YAZILIM

dashersw

EXCEL

module Adder(
    input [3:0] a,
    input [3:0] b,
    output [4:0] sum
);
    assign sum = a + b;
endmodule

const [a, setA] = createSignal(0);
const [b, setB] = createSignal(0);
const sum = () => a() + b();
function Adder() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const sum = a + b;

  return <div>Sum: {sum}</div>;
}

<script>
  let a = 0;
  let b = 0;
  $: sum = a + b;
</script>

<div>Sum: {sum}</div>

<template>
  <div>Sum: {{ sum }}</div>
</template>

<script>
export default {
  data() {
    return {
      a: 0,
      b: 0,
    };
  },
  computed: {
    sum() {
      return this.a + this.b;
    },
  },
};
</script>

import { Component } from '@angular/core';

@Component({
  selector: 'app-adder',
  template: `<div>Sum: {{ sum }}</div>`,
})
export class AdderComponent {
  a = 0;
  b = 0;

  get sum() {
    return this.a + this.b;
  }
}

var a = 0;
var b = 0;
var sum = a + b;

$("#sumDisplay").text(sum);
let a = 0;
let b = 0;
let sum = 0;

const handler = {
  set(target, prop, value) {
    target[prop] = value;
    
    sum = a + b;

    return true;
  }
};

const proxyA = new Proxy({ value: a }, handler);
const proxyB = new Proxy({ value: b }, handler);

proxyA.value = 5;
proxyB.value = 10;
console.log(`Sum: ${sum}`);
let a = 0;
let b = 0;
let sum = 0;

const handler = {
  set(target, prop, value) {
    target[prop] = value;
    
    sum = proxyA.value + proxyB.value;

    return true;
  }
};

const proxyA = new Proxy({ value: a }, handler);
const proxyB = new Proxy({ value: b }, handler);

proxyA.value = 5;
proxyB.value = 10;
console.log(`Sum: ${sum}`);

niye çılgın gibi kütüphane var?

dashersw

ÇOĞU KÜTÜPHANE YALAN SÖYLÜYOR.

dashersw

ZORUNDA MIYIZ?

dashersw

HOşgeldin halkların regie'si

ne olursan ol gel

const regie = require('regie')

const initialState = {
  items: []
}

const { state, observe } = regie({ initialState })

observe(state.items, handler)
observe(state => state.items, handler)
observe(() => state.items, handler)
observe('items', handler)

const items = state.items

observe(items, handler)
observe(() => items, handler)

observe(() => state.items[0], handler)
observe('items.0', handler)
observe(() => state.items[0].name, handler)
observe('items.0.name', handler)

Demo tIme!

TEşekkürler

Armagan Amcalar
  dashersw

slides: slides.com/armaganamcalar/reactivity-in-vanilla-js

github.com/dashersw/regie

github.com/dashersw/regie-demo

Reactivity in Vanilla JS with Regie: A New State of Play

By Armağan Amcalar

Reactivity in Vanilla JS with Regie: A New State of Play

Bu oturumda, framework’lere ihtiyaç duymadan reaktif uygulamaların nasıl oluşturulabileceğini keşfedeceğiz. Regie, Vanilla JS projeleri için geliştirilmiş, kullanımı kolay ve etkili bir state management kütüphanesidir. Gerçek dünya senaryolarından alınmış örneklerle, Regie’nin arkasındaki mekanizmayı ve nasıl işlediğini derinlemesine inceleyeceğiz. Kod örnekleri aracılığıyla, bu kütüphanenin temellerini ve geliştirme sürecinde nasıl önemli bir fark yaratabileceğini anlayacağız. Katılımcılar, reaktivite konusunda bilgi sahibi olacaklar ve framework'lerden bağımsız bir uygulamanın nasıl geliştirilebileceğini öğrenecekler.

  • 129

More from Armağan Amcalar