[RFCs] Alef Component Concept about aleph.js HOT 19 OPEN

@shadowtime2000 or no fragment

let count = 0;

<p>Count: {count}</p>;
<button onClick={() => count++}>Increment!</button>

from aleph.js.

@shadowtime2000 React is ever the first framework in Aleph.js, and i wish we can import react component in Alef Component in the future.

from aleph.js.

I like it's conciness though compare it with React

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment!</button>
    </>
  );
}

let count = 0;

<>
	<p>Count: {count}</p>
	<button onClick={() => count++}>Increment!</button>
</>

from aleph.js.

Thanks for replying. I got the difference now.
At first look, I thought the concept is fairly alike to SolidJS. But I didn't see how the reactivity will be like in an AOT compiler. I will check Svelte for the details. If fine-grained reactivity with JSX can be implemented without templates, I'll be very excited.

from aleph.js.

@shadowtime2000 yes, i will create a repo to implement this.

from aleph.js.

huge application may have this issue, most applications should be lighter than react, we will see

from aleph.js.

I think https://github.com/BuilderIO/jsx-lite and https://github.com/ryansolid/solid can be considered.

from aleph.js.

I was wondering, we already have a lot of frameworks and ways to implement reactive (and non-reactive) web interfaces, do we need another one?

I think, should be better to implement other frameworks like Vue and Angular, which would fit best?
Or I'm missing something?

from aleph.js.

I like how it uses more implicit sections like Marko instead of explicitly being separated into different parts. @ije Do you have an idea of what the compiler output may look like for it? With no runtime, would it just compile into some variable declarations and some document manipulations?

from aleph.js.

@ije I'd recommend you create the compiler and such in a different repo called alef or something to allow others to more easily use it without Aleph.

from aleph.js.

@shadowtime2000 or no fragment

let count = 0;

<p>Count: {count}</p>;
<button onClick={() => count++}>Increment!</button>

Wow, even better!

from aleph.js.

@ije I am not an expert on web performance and bundle size, but wouldn't having no runtime cause a big bundle size with stuff like reactivity, actually rendering stuff, and memoization?

from aleph.js.

@iFwu What exactly do you mean by that? The compiler I believe will already use something like what SolidJS does, except I think in some cases it won't even do that.

from aleph.js.

hey @iFwu, as @shadowtime2000 mentioned, the AOT compiler will transpile JSX to native Dom operations, no need to compile template in browser like solid do

from aleph.js.

@ije After v0.3.0 will we start slowly dropping React support or something? Or will React still be supported?

from aleph.js.

Will we add a feature like automatic selection of components depending on usage of Alef or React? Like if we import deno.land/x/aleph/link.ts, will it automatically import a deno.land/x/aleph/link/react.ts or a deno.land/x/aleph/link/alef.alef depending on what is importing it?

from aleph.js.

@shinspiegel i agree with you, the next stage(0.4) the most important idea i guess is to bring Vue to alephjs. Angular i'm not sure since i'm not the user of it.

from aleph.js.

however, the alef component is an experience feature i want to try.

from aleph.js.

I think Angular may not be fit for this because it has a ton of tooling that needs to be set up for it to work. Vue would be pretty nice in setting it up.

from aleph.js.