Browsers have improvedgreatly. Many of the reasons to reach for a big framework like React or Angular have gone away.
You don't have to rely on a complex build system, bundlers, or other tooling to ship your Javascript to users anymore.
Browsers have support to import Javascript modules directly. You don't have to template your components in JSX and add all the baggage and complexity of a build tool - you can use Javascripttagged template literal syntax.
If don't want to pull in the complexity of a large framework like React or Angular, but still want to build applications with components,FicusJS is for you!
FicusJS is a set of lightweight functions for developing web applications. It is focused on creating web components, managing application state plus a pub/sub event bus.
What are web components?
Web components are a set of browser APIs that allow you to create new custom, reusable, encapsulated HTML tags for use in web applications.
Web Components work across modern browsers and can be used with any JavaScript library or framework that works with HTML.
Go build-less
Browsers have improved a lot over the past years. It's now possible to do web development without requiring any build tools, using the native module loader of the browser. We think this is a great fit forFicusJS, and we recommend this as a general starting point.
Aligns with standards
FicusJS aligns with standard browser APIs which means it is not based on any proprietary code or libraries.
As it is based on standards, it has longevity and is a good choice for enterprise web applications.
Try it out
The easiest way to try outFicusJS is using a hello world example.
Create anindex.html file and copy the following between the<body> tags.
<hello-world></hello-world><scripttype="module">import{html,renderer}from'https://cdn.skypack.dev/@ficusjs/renderers/lit-html'import{createComponent}from'https://cdn.skypack.dev/ficusjs@3/component'createComponent('hello-world',{renderer,handleClick(e){window.alert('Hello to you!')},render(){returnhtml`<div><p>Test component</p><button type="button" @click="${this.handleClick}">Click me!</button></div>`}})</script>Alternatively, fork this Codepen to see it in action -https://codepen.io/ducksoupdev/pen/GRZPqJO
The hello world example creates a newcustom element
using thecreateComponent function and registers it to thehello-world tag. It uses thelit-html renderer (multiple renderers are available) for creating HTML fromtagged template literals.
Once registered, the tag can be used multiple times in HTML and instances can be programmatically obtained usingdocument.querySelector
orelement.querySelector
Top comments(1)
For further actions, you may consider blocking this person and/orreporting abuse
