Hacker News Reader

Comment by azangru | Hacker News Reader

> Long story short have been looking into standard web components for my next side project and FicusJS seems to check all the boxes.

Could you please list the boxes that you were ticking?

For example, how many boxes would the following tick:

    - Preact with htm (tiny, looks very similar to ficus) [0]
    - LitElement (tiny, very close to native web components) [1]
    - Svelte (the darling of many since recently) [2]

[0] - https://github.com/developit/htm

[1] - https://lit-element.polymer-project.org/

[2] - https://svelte.dev/

View on HN

- Great question. The main thing I was looking for was going build-less and the section of Ficus docs kinda sold me on the idea. Seems we still need to use a dev-server to allow native imports like

  - https://modern-web.dev/docs/dev-server/overview/
     - Which would allow testing and builds (if go that route)
  - Seems that you can use any renderer (uhtml, lit-html,htm, Preact), so what-ever I learn will be useable outside the Ficus eco-system
  - Event Bus:  Use this model in another project and worked well.
  - Stores: not sold on the whole redux pattern, but want to learn abit more about global stores to update components
  - Was in analysis paralysis before finding Ficus and the more I learned the more confused on what I should try next.
  - Mostly needed to make a decision as I want to dabble with Web-Components but seems starting from scratch is too low level so pick something just a tad higher than that.

Thanks for helping me understand my own decision.

I work on LitElement and if you want to use it buildless you can do so with the JavaScript reactive properties API (so you don't need TypeScript or Babel decorators to declare properties) and Chrome 89's support for import maps.

Generally, I think an import specifier rewriting dev server like Web Dev Server is the way to go since it'll work with so many other libraries out there.

How lightweight is Web Dev Server? Back when the official way to go was still polyserve, I've had to make this:

https://github.com/unrelentingtech/es-module-devserver

which is a tiny middleware that uses regexps to accomplish the task instead of dragging in a JS parser :)

Thanks, will give it try.

I don't think you'll ever get away without a build chain using LitElement. If you are, I think your project is a toy, hobby, or very far from complete

I have been using lit-html for years now, and lit-element for a couple years all in vanilla js for evergreen browsers with the only build step being bundling for production. Here is one of the projects: https://cisterna.app

You may want to take a look at lit-html coupled with ApplicationState [1] (disclaimer, I'm the author of ApplicationState)

https://github.com/claytongulick/applicationstate

How does ApplicationState compare to e.g. https://immerjs.github.io/immer ?

Thanks, will check it out. Bookmarked.

Reply on news.ycombinator.com