4 ms·

Show HN: TinyJs React like framework in 35 lines of code

43 points by atum47 2y ago

Hi HN, I got to work yesterday and today and came up with a very simple way to create and manage state in TinyJS. I end up creating a simple App to illustrate how to use the new createState function and custom components in a React like manner. Here's the code for it - https://github.com/victorqribeiro/tinyapp https://github.com/victorqribeiro/tinyapp Here's the PR for the createState function - https://github.com/victorqribeiro/TinyJS/pull/9 https://github.com/victorqribeiro/TinyJS/pull/9

campak 2y ago
This is cool. Keep up the good work and enjoy tinkering!
codingdave 2y ago
So, if you are building this off 'window', you are basically just adding syntax sugar to one big global variable. That is absolutely a simple solution to storing state. In one place. But that is not comparable to the functionality of React, so I'm not sure I agree that it is a "react-like framework".
- atum47 2y ago
  I'm guilty of using React as framework to try to copy from. After working with it for the past 5 years I end up wanting something like it but with less bloat to use in my personal projects. So, what I tried to do: have functional components with JSX like syntax and a managed state that is in sync with the UI. Giving those 3 features and the syntax, I used the term React like.
  - EGreg 2y ago
    I never understood the fascination with JSX. Stuffing HTML into JS? You can stuff JS into HTML natively LOL. Why not use HTML templates and Web Components, or something? I would have thought React would become like jQuery, after Web Components were implemented natively in browsers, just like jQuery's functionality was. But it's still very popular.
    - MarcelOlsz 2y ago
      >Why not use HTML templates and Web Components, or something? I would have thought React would become like jQuery, after Web Components were implemented natively in browsers, just like jQuery's functionality was. But it's still very popular. Us frontend devs are so lost in the framework sauce that there is a 5 year lag between what web api's can do and when it hits our slack channels.
      - paulddraper 2y ago
        Have you ever used web components? They are absolutely not equivalent to what react does, though there is overlap.
        MarcelOlsz 2y ago
        I've played with them yeah.
        EGreg 2y ago
        Vue, Svelte etc don’t use JSX and are perfectly fine
        paulddraper 2y ago
        Sure, they have their own HTML-based file formats. .vue .svelte FYI, React works with or without JSX, if that's really the hang up. But the developers overwhelmingly prefer JSX.
    - globalise83 2y ago
      Web components are still a little tricky to work with. For example, passing down a complex state to child components is easy in React, but in native web components not so straightforward. Stencil.js is a nice choice for that, but it is just as complicated as React to learn.
    - jeswin 2y ago
      > I never understood the fascination with JSX. HTML templating (without JSX) gives you markup as strings, which means you don't get type checks, auto-complete, syntax highlighting etc.
  - MarcelOlsz 2y ago
    Check out "preact" if you haven't already [0] [0] - https://preactjs.com/ https://preactjs.com/
  - whizzter 2y ago
    While I see a fair bit of elegance in your experiment, IMHO I also think that for it to be React-like and start mentioning code size one should at least handle structural changes (ie adding/removing items like in a todo-app). I made a minimal Vue-inspired templating thingy a while back and a fair bit of the codesize (part due to impl and part due to architecture to make it solid) is spent to handle cases of structural changes (adding/removing items, updating event listeners,etc).
    - atum47 2y ago
      > (ie adding/removing items like in a todo-app). I have made such an app using TinyJS, would you like to see it? here: https://github.com/victorqribeiro/TodoApp https://github.com/victorqribeiro/TodoApp
      - whizzter 2y ago
        That'll work
- deleted 2y ago
  [deleted]
- jy14898 2y ago
  Maybe I'm missing something, but there isn't any global state attached to window? They attach a constructor for state to the window, but that isn't the state itself - it just returns a smart state object.
  - atum47 2y ago
    const appState = {...state} With that line I end up creating a appState inside the createState function which uses the state dictionary just as a template. Would it be better if I attached the things I need to the state object that I receive? function createState(state) { state._update = () => ... .... return new Proxy(state, ...) } legit question.
deleted 2y ago
[deleted]
chrismorgan 2y ago
A comment on code organisation. https://github.com/victorqribeiro/TinyApp/blob/db92225cfd0aed935b7dd6f70e36c0a852a5e462/js/Input.js https://github.com/victorqribeiro/TinyApp/blob/db92225cfd0ae...: export default function Input(state) { const inp = input({ // ① type: 'number', value: state.count, onchange }) function update() { // ② inp.value = state.count } function onchange() { // ③ state.count = parseInt(this.value) } state.addUpdate('count', update) // ④ return inp } (Labelling comments mine.) This ordering isn’t great: ① refers to ③, and ④ refers to ②. It’d be better to reorder them, at least to swap ② and ③, and remove the blank line separating ② and ④: export default function Input(state) { const inp = input({ // ① type: 'number', value: state.count, onchange }) function onchange() { // ③ state.count = parseInt(this.value) } function update() { // ② inp.value = state.count } state.addUpdate('count', update) // ④ return inp } But you really can do much better: export default function Input(state) { const inp = input({ type: 'number', value: state.count, onchange() { state.count = parseInt(this.value) } }) state.addUpdate('count', function() { inp.value = state.count }) return inp } At least at this scale, that’s much easier to follow. Inlining can improve other places too (though at larger scales it becomes more debatable): export default function Button(state) { return button({ onclick() { state.count += 1 }, style: { color: 'black', border: 'solid 1px black' }, }, '+ 1') }
- deleted 2y ago
  [deleted]
- contrarianmop 2y ago
  [dead]
- atum47 2y ago
  > (though at larger scales it becomes more debatable) My thought exactly. In a small component as the Button I agree with inline everything (almost did it myself cause I knew people would read this code) but I have decided to keep it as is for readability. In a more complex component as the Canvas I think you'd agree with me that the long winded version is easier to grasp what's going on.
leontrolski 2y ago
33 line React https://news.ycombinator.com/item?id=22776753 https://news.ycombinator.com/item?id=22776753
bolfe11 2y ago
I created a typescript version of your framework https://github.com/guilhermebolfe11/TinyTS https://github.com/guilhermebolfe11/TinyTS
- atum47 2y ago
  Nice
wewepozhan 2y ago
[dead]

43 points by atum47 2y ago

campak 2y ago

This is cool. Keep up the good work and enjoy tinkering!

codingdave 2y ago

So, if you are building this off 'window', you are basically just adding syntax sugar to one big global variable. That is absolutely a simple solution to storing state. In one place. But that is not comparable to the functionality of React, so I'm not sure I agree that it is a "react-like framework".

atum47 2y ago
I'm guilty of using React as framework to try to copy from. After working with it for the past 5 years I end up wanting something like it but with less bloat to use in my personal projects. So, what I tried to do: have functional components with JSX like syntax and a managed state that is in sync with the UI. Giving those 3 features and the syntax, I used the term React like.
- EGreg 2y ago
  I never understood the fascination with JSX. Stuffing HTML into JS? You can stuff JS into HTML natively LOL. Why not use HTML templates and Web Components, or something? I would have thought React would become like jQuery, after Web Components were implemented natively in browsers, just like jQuery's functionality was. But it's still very popular.
  - MarcelOlsz 2y ago
    >Why not use HTML templates and Web Components, or something? I would have thought React would become like jQuery, after Web Components were implemented natively in browsers, just like jQuery's functionality was. But it's still very popular. Us frontend devs are so lost in the framework sauce that there is a 5 year lag between what web api's can do and when it hits our slack channels.
    - paulddraper 2y ago
      Have you ever used web components? They are absolutely not equivalent to what react does, though there is overlap.
      - MarcelOlsz 2y ago
        I've played with them yeah.
      - EGreg 2y ago
        Vue, Svelte etc don’t use JSX and are perfectly fine
        paulddraper 2y ago
        Sure, they have their own HTML-based file formats. .vue .svelte FYI, React works with or without JSX, if that's really the hang up. But the developers overwhelmingly prefer JSX.
  - globalise83 2y ago
    Web components are still a little tricky to work with. For example, passing down a complex state to child components is easy in React, but in native web components not so straightforward. Stencil.js is a nice choice for that, but it is just as complicated as React to learn.
  - jeswin 2y ago
    > I never understood the fascination with JSX. HTML templating (without JSX) gives you markup as strings, which means you don't get type checks, auto-complete, syntax highlighting etc.
- MarcelOlsz 2y ago
  Check out "preact" if you haven't already [0] [0] - https://preactjs.com/ https://preactjs.com/
- whizzter 2y ago
  While I see a fair bit of elegance in your experiment, IMHO I also think that for it to be React-like and start mentioning code size one should at least handle structural changes (ie adding/removing items like in a todo-app). I made a minimal Vue-inspired templating thingy a while back and a fair bit of the codesize (part due to impl and part due to architecture to make it solid) is spent to handle cases of structural changes (adding/removing items, updating event listeners,etc).
  - atum47 2y ago
    > (ie adding/removing items like in a todo-app). I have made such an app using TinyJS, would you like to see it? here: https://github.com/victorqribeiro/TodoApp https://github.com/victorqribeiro/TodoApp
    - whizzter 2y ago
      That'll work
deleted 2y ago
[deleted]
jy14898 2y ago
Maybe I'm missing something, but there isn't any global state attached to window? They attach a constructor for state to the window, but that isn't the state itself - it just returns a smart state object.
- atum47 2y ago
  const appState = {...state} With that line I end up creating a appState inside the createState function which uses the state dictionary just as a template. Would it be better if I attached the things I need to the state object that I receive? function createState(state) { state._update = () => ... .... return new Proxy(state, ...) } legit question.

deleted 2y ago

[deleted]

chrismorgan 2y ago

A comment on code organisation. https://github.com/victorqribeiro/TinyApp/blob/db92225cfd0aed935b7dd6f70e36c0a852a5e462/js/Input.js https://github.com/victorqribeiro/TinyApp/blob/db92225cfd0ae...: export default function Input(state) { const inp = input({ // ① type: 'number', value: state.count, onchange }) function update() { // ② inp.value = state.count } function onchange() { // ③ state.count = parseInt(this.value) } state.addUpdate('count', update) // ④ return inp } (Labelling comments mine.) This ordering isn’t great: ① refers to ③, and ④ refers to ②. It’d be better to reorder them, at least to swap ② and ③, and remove the blank line separating ② and ④: export default function Input(state) { const inp = input({ // ① type: 'number', value: state.count, onchange }) function onchange() { // ③ state.count = parseInt(this.value) } function update() { // ② inp.value = state.count } state.addUpdate('count', update) // ④ return inp } But you really can do much better: export default function Input(state) { const inp = input({ type: 'number', value: state.count, onchange() { state.count = parseInt(this.value) } }) state.addUpdate('count', function() { inp.value = state.count }) return inp } At least at this scale, that’s much easier to follow. Inlining can improve other places too (though at larger scales it becomes more debatable): export default function Button(state) { return button({ onclick() { state.count += 1 }, style: { color: 'black', border: 'solid 1px black' }, }, '+ 1') }

deleted 2y ago
[deleted]
contrarianmop 2y ago
[dead]
atum47 2y ago
> (though at larger scales it becomes more debatable) My thought exactly. In a small component as the Button I agree with inline everything (almost did it myself cause I knew people would read this code) but I have decided to keep it as is for readability. In a more complex component as the Canvas I think you'd agree with me that the long winded version is easier to grasp what's going on.

leontrolski 2y ago

33 line React https://news.ycombinator.com/item?id=22776753 https://news.ycombinator.com/item?id=22776753

bolfe11 2y ago

I created a typescript version of your framework https://github.com/guilhermebolfe11/TinyTS https://github.com/guilhermebolfe11/TinyTS

atum47 2y ago
Nice

wewepozhan 2y ago

[dead]