VanJS – A no-JSX framework based on vanilla JavaScript

Post by mitt_romney_12 » Wed, Dec 20, 2023, 5:53 PM UTC

3dGrabber wrote: post #57

pastacacioepepe wrote: post #56

Earlier quoted context omitted.

That would be Still more readable than brackets hell like: DoStuff(DoMoreStuff(DoEvenMoreStuff()))

^^^ Apples to oranges: vs DoStuff(DoMoreStuff(DoEvenMoreStuff())) Both of them you would split into indented lines when they become too long. And 1 becomes too long much faster. Also with 2 you can do const todo = DoMoreStuff(DoEvenMoreStuff()); DoStuff(todo); where as with 1 you cannot.

  const todo = ;
  {todo}

Post by unstuck3958 » Wed, Dec 20, 2023, 6:12 PM UTC

thinkingkong wrote: post #6

The whole “small footprint” thing is always weird to me. I understand that lots of people really want to squeeze efficiency out of every single kb but Im struggling to see where this is helpful. A single image, a single pixel from the marketing team, the actual application code, the page, etc are all going to dwarf the framework.

Post by qayxc » Wed, Dec 20, 2023, 6:40 PM UTC

flying-pig wrote: post #81

qayxc wrote: post #78

Earlier quoted context omitted.

challenge accepted (app #2, since #1 is just static), BEHOLD: const Counter = () => { let counter = 0; const updCounter = (delta) => { counter += delta; document.getElementById('count').innerText = `♥ ${counter}`; }; document.getElementById('up').addEventListener('click', () => updCounter(1)); document.getElementById('down').addEventListener('click', () => updCounter(-1)); updCounter(0); }; Counter(); *thumbs-up* *th…

The fact that you have to manually maintain the binding between states and UI elements and propagate state changes to UI elements is exactly the thing offered by VanJS, or other popular reactive frameworks (despite with a much larger bundle size)

Post by fs_tab » Wed, Dec 20, 2023, 7:01 PM UTC

qayxc wrote: post #78

ping-monkey wrote: post #72

Earlier quoted context omitted.

Try to replicate a sample app made by VanJS with Vanilla JS and check the difference

challenge accepted (app #2, since #1 is just static), BEHOLD: const Counter = () => { let counter = 0; const updCounter = (delta) => { counter += delta; document.getElementById('count').innerText = `♥ ${counter}`; }; document.getElementById('up').addEventListener('click', () => updCounter(1)); document.getElementById('down').addEventListener('click', () => updCounter(-1)); updCounter(0); }; Counter(); *thumbs-up* *th…

    count.innerText = 
    up.onclick = 
    down.onclick =

Post by lf-non » Wed, Dec 20, 2023, 7:19 PM UTC