ficusjs
ficusjs-renderers
| ficusjs | ficusjs-renderers | |
|---|---|---|
| 4 | 3 | |
| 393 | 2 | |
| 0.0% | - | |
| 1.2 | 4.7 | |
| over 1 year ago | 12 months ago | |
| JavaScript | JavaScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
ficusjs
-
JSX for web components
By default, the FicusJS web component render function expects a DOM element for rendering. The pragma imported from the @ficusjs/renderers/jsx-dom library creates a DOM element for rendering in the component.
-
We Use Web Components at GitHub
- The web component concept is great. Especially for mixing server-side rendering and JavaScript-powered components.
That last one IMO is web components killer feature. I can now wrote a mini component and then I tugg it in with the other 99% of my page that is rendered server side.
It means, I'm able to serve my users quickly. I have SEO'd everything too. Cool!
-1: https://github.com/TimDaub/web3-sign-msg
- 2: https://docs.ficusjs.org/
-3: https://github.com/developit/htm
-
11ty and web components, an awesome combination
This post shows you how to get started using 11ty with FicusJS. FicusJS is a set of lightweight functions for developing applications using web components.
- FicusJS
ficusjs-renderers
-
Building a website like it's 1999... in 2022
I'm particularly fond of the new native JS Web Components which require no build process and are extremely fast and purely client-side. When developed well it can also reduce the bundle size because it can use dynamic imports. I played around with making a SPA out of it and only got frustrated with its lack of React-like JSX. This could be overcome with tagged literals.
-
JSX for web components
This example uses the @ficusjs/renderers package which provides a browser-ready ES module using the htm library.
-
Want to get started with web components?
The hello world example creates a new custom element using the createComponent function and registers it to the hello-world tag. It uses the lit-html renderer (multiple renderers are available) for creating HTML from tagged template literals.
What are some alternatives?
open-wc - Open Web Components: guides, tools and libraries for developing web components.
vim-jsx-pretty - :flashlight: [Vim script] JSX and TSX syntax pretty highlighting for vim.
ficusjs-snowpack-starter - FicusJS Snowpack starter
React - The library for web and native user interfaces.
ssr-benchmarks - Simple benchmark of various SSR approaches, rendering 64k divs in a recursive way
services-as-dom-elements
htm - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
web3-sign-msg - web3-sign-msg is a modern web component built with ficusjs to sign messages with your eth private key in Metamask
soci-frontend - [Moved to: https://github.com/jjcm/nonio-frontend]
ficusjs-compiled-templates - Compile JSX tagged template literals with snowpack and babel
community-protocols - Cross-component coordination protocols