Comment by mickael-kerjean

1 day ago

Yep, I rewrote my OSS Dropbox like frontend for every file transfer protocol in vanilla JS [1], so far it's not only faster with smaller memory footprint, the app is faster to boot, lighter in size despite the optional build system, there is no framework code I don't know about running at the worst possible time and I can effectively run to the maximum of what a browser can do.

It's refreshing to be able to open the network tab and see the original files coming out [2] and the developer console showing the full structure of it untouched in the same way it's visible from github.

This has opened new doors that was previously closed with any kind of framework, the option to dynamically patch those js file at runtime to customise the interface for unique needs that make sense for someone but wouldn't make sense for 99% of everyone else. Now it's just a matter of submitting a small plugin patch that do it and tada, a happy customer while maintaining only a single codebase

[1] https://github.com/mickael-kerjean/filestash

[2] https://demo.filestash.app/login?type=s3&access_key_id=Q3AM3...

2 comments

mickael-kerjean

Reply
bitpush  1 day ago

Do you think the code can be extended and maintained by someone other than you? How about a large team?

When I look at the contributors, I see abysmal contribution from other people.

https://github.com/mickael-kerjean/filestash/graphs/contribu...

----

What works for one disciplined (and talented) developer such as you might not work at scale.

  • mickael-kerjean  1 day ago

    > Do you think the code can be extended and maintained by someone other than you? How about a large team?

    There's no track record of it but I believe it would be ok in the right team. The core idea was stolen from every other frameworks: "build your app as a tree of components". In the approach I went with, components are modular and expressed like this:

      ```
  export default function (render, props = {}) {
      render($domNode)
  }
  ```

    in practice, a working code loading another component would be:

      ```
  import FooCompoment from "./component_foo.js";

  export default function (render, props = {}) {
      const $node = createElement(`
          <div>
              <div data-bind="component_foo"></div>
              Name: ${props.name}
          </div>
      `);
      // render the component with an animation
      render(transition($node));
      
      // render a child component 
      FooComponent(
          createRender($node.querySelector(`[data-bind="component_foo"]`)),
          { ...props },
      );
  }
  ```

    The syntax is arguably less nice than JSX but the upside is 0 running cost and the idea around decoupling components remain. A lot of people have argue that I just end up maintaining my own framework but the reality is what would be considered "framework code" fit under 200 lines of code ....