DEV Community: bretgeek

Surf JS - An Insanely Small JavaScript UI Library With Reactive Element Templates and JQuery Alternative

bretgeek — Fri, 15 Jul 2022 17:44:29 +0000

What is it?

It's an insanely small ~13kb minified (that's ~2.6kb smaller than cash @ https://github.com/fabiospampinato/cash ), plugin extendable JavaScript library for building user interfaces (UI).

Surf JS is a few different things all wrapped up in one small package.

But it's also a super small JQuery clone/replacement library that has reactive element templates (read on to learn what these are).

Don't let the JQuery clone part fool you! - Surf JS lets you build your component based UI using a familiar syntax and NO JSX! Using Surf JS as you would JQuery (in a non component based way) is entirely optional!

Surf JS doesn't implement all JQuery methods but the basics are pretty similar and you can always configure Surf JS to do anything you want via plugins.

A good way to think about Surf JS is that it's like JQuery if JQuery had a way to use components AND if JQuery had reactive element templates...with a much smaller footprint than JQuery.

If you would rather not think about it, you could just use Surf JS as a replacement for JQuery!

Where To Get It?

Get it from Github: https://github.com/bretgeek/surf/

Visit: https://surf.monster for more documentation, updates and working examples.

Features

Super Small! - currently at around ~13KB minified (smaller if gzipped).
Reactive Element Templates - Reactive element templates are strings in your HTML that look like {{msg}} and once initialized can become ANYTHING you desire when you desire. When your data changes you can set the template to your new data, new HTML or even new components!
Lightweight JQuery Clone - Can be used as a general purpose JQuery like library.
Easy Familiar Syntax - familiar chainable syntax with built-in DOM manipulation methods.
Build with Components - Optional component based syntax allowing you to build your UI with re-usable components without using JSX as well as solving CSS bleed issues from web components.
Extendable - Highly configurable (you can change anything you want about the base functionality with a run time config) and it's extendable with plugins.
Versatile - It's intended to give you power and not lock you down into any one way of doing things. You can probably find ways to use it that the author has not even thought of yet. Use it in ways that you and your team define!

Getting Started

Basic usage for manually adding and using Surf JS to a web page.

Add Surf JS to your page before your closing body tag:



<script src='https://yoururl.com/surf.min.js'></script>

First make sure it works

So we can do more interesting things later but first let's use Surf JS similar to how we would use JQuery to make sure our setup is working.

In an html file:


// Somewhere in your HTML

<div id='app'> I am an App </div>

In a script tag after surf.min.js:


// Create kickoff function that will run once the document is ready.

function kickoff(){

// There are many options to "grab" but this minimal use returns the first element of #app by default

$('#app').css('color: red;');

}


// Run your function when the document is ready...

$(document).ready(kickoff);

You should now see "I am an App" in red.

Reactive Element Templates

Surf JS has a really powerful feature called "Reactive Element Templates" that allows you to manipulate your HTML with changing data defined by {{templates}} . Since Reactive Templates resolve to functions (once they are activated) there is no DOM querying...changes are live!
The main takeaway here is that...when your data changes, templates can be used to display your data as text, HTML or even components!

Lets start with a basic example to see how Reactive Templates work

In your html file add:


// Somewhere in your HTML

<div id='msgapp'> This is a {{msg}} </div>

In your script file somewhere in your kickoff function add:


// Somewhere in your kickoff function of your JS script

// Use set to change msg and CSS to color #msgapp green so we can see it;

$('#msgapp').set({msg: ' my narly note!'}); // We can send in HTML, text or components here;
$('#msgapp').css('color: green;');

If you are lucky enough to catch a glimpse you should see the msg in the template change when the browser is done loading.
Keep in mind this is setting the templates via HTML in a textual based JQuery like way, but templates give you even more power when setting them to or from components!

Components

Creating a re-usable component is as easy as writing a function (a named function or an arrow function and a name parameter) that returns an element then registering it by calling a special function $().register(componentName) to register it. Once registered it can be used over and over by it's name.

Let's give it a try:

First we will need a place to put our component in.

In your HTML file:


// Somewhere in your HTML

<div id='comp1'> COMPONENT  </div>

Now lets make the component - a button that increments a counter when clicked.

Somewhere in your kickoff script file (or where it will be called by ready) define a function for your component:



// A button component that counts when clicked

function buttonCounter(props={}){ // You can also pass in a props object 
let color = props.color || 'green';

   // The component with create a node each time it's used

   const node = $().createNode('button');


   // This node's CSS, attributes, reactive template and html

   $(node).html('Count is: {{cnt}} ').attr('data-count', 0).css('cursor: pointer;').css(`color: ${color};`); // color from props


   // initialize cnt template to 0

   $(node).set({cnt: '0'});

// Add a click event to the node
$(node).on('click', function(){
let cnt = parseFloat($(this).attr('data-count'))+1;
$(this).attr('data-count', cnt);
$(this).set({cnt: cnt});
});


 // A component must return an element
return node;
}



// Register the component
$().register(buttonCounter);

To make sure our component works we will use Surf JS's "append" method to add it to the DOM... but keep in mind you can add components to other components with a special syntax which we will get to later.



// create a reference to a component

const abutton = $().buttonCounter(); // pass in option props too


// Create a reference to the place we want to put our component

const comp1 = $('#comp1').first();


// Finally append the component to the element in DOM

$(comp1).append(abutton);  // OR without a reference: $(comp1).append($().buttonCounter());

You should now see a clickable button with a counter that increments as you click.

Syntax to render components to other components

The most useful thing about components is their re-use. In this section we will go over how to add a component to another component.
Here we will make a containerBox component and add our buttonCounter we made earlier to it. We will add buttonCounter twice to show different ways to do it.

Make a place to in the DOM to hold our containerbox component.

In your HTML file add:


// Somewhere in your HTML

<div id='comp2'> some random place holder text not required  </div>

In your kickoff script file add the code below for the containerBox component:


// A component for a container box

function containerBox(){

  // The kind of element this component will be...

  const node = $().createNode('div');

  // Some HTML with a reactive template for demonstration purposes.

  $(node).html('{{ button }} ')


  // Some CSS to add a border so we can see it.

  $(node).css('border: 2px solid blue; padding: 9px; width: 120px;'); 


  // There are two ways to add a component - use the Set method on templates or DOM insertion.
  // If using both ways in the same component the Set method on templates must come first.


  // First way: Set a template to another component

  $(node).set({ button: $().buttonCounter() });


  // Second way: Use DOM manipulation methods to add a component to this component

  $(node).prepend( $().buttonCounter() );

  return node; // compontents must return an element
}

// Don't forget to register it somewhere in your script file
$().register(containerBox);

Test it to see if adding components to another works.

Somewhere else in your kickoff script add:



const abox = $().containerBox(); // create a new instance  

$('#comp2').append(abox); // add to somewhere in the DOM OR with variable instance do $('#comp2').append($().containerBox());

You should now see three components - 1 containerBox component containing 2 buttonCounter components!

We covered a lot of ground introducing the basics of Surf JS but the possibilities are endless!

I hope you have enjoyed this short tutorial on getting started with Surf JS and would love to read your comments and see what you will build.

If you found this interesting please favorite here and star Surf JS project on Github https://github.com/bretgeek/surf/

TFUZ JS - A Tiny JavaScript Utility Library

bretgeek — Thu, 09 Jun 2022 02:38:07 +0000

What is it?

A tiny ~7kb extendable JavaScript utility library with a JQuery like syntax for getting work done fast!

If you are looking for small footprint utility library with a syntax similar to JQuery, TFUZ may be just what you need.

Get TFUZ at https://github.com/bretgeek/tfuz
Visit https://tfuz.com for ongoing documentation and examples.

Features

Tiny! - currently under ~7KB minified (smaller if gzipped).
Can be used as a general purpose JQuery like library.
Easy familiar syntax with built-in chainable DOM manipulation methods.
Built-in iterable delay queue for building your effects.
Ability set up custom observers on any element.
And more ...

Why?

Not every site uses React (and friends) and not every site needs all the features that require loading the full JQuery library.

TFUZ is the pagespeed conscious web developer's best friend. It's super small and easy to extend.

Sure you could write everything TFUZ has to offer in Vanilla JavaScript but TFUZ is so small and the syntax is familiar and easy to remember that it can potentially save you time / development costs.

TFUZ is your tiny tool belt of most used DOM manipulation tools with some really cool extra bits.

If TFUZ doesn't have what you need you can easily add it!

Basic Usage

Basic usage for manually adding and using TFUZ to a web page.

Add TFUZ to your page before your closing body tag :

<script src='https://yoururl.com/tfuz.min.js'></script>

Use TFUZ like you would JQuery

In an html file:

// somewhere in your html

<div id='app'> I am an App </div>

In a script tag after tfuz.min.js add:

// create a wrapper function to hold all the stuff you want to do:
function init(){

// Select an element and return a reference to it using "grab"
// there are many options to "grab" but this minimal use returns a reference
// to the first element (so you don't keep querying the DOM) of #app by default

let app = tfuz.grab('#app');
app.css('color: red;'); // changes app's color with CSS
}


// Run your wrapper function when the document is ready...
tfuz.ready(init);

Add your own functionality and make plugins!

In your same script file from above add:

function myplug(){
this.css('color: red;');
return this;
}


//  Now tell TFUZ to use the plugin:                  
// *** Note you must tell TFUZ to use plugins at the top of your script file before initalizing anything else. 

tfuz.use({name: 'myplug', fn: myplug}); // add to top of your init/wrapper function.


// Use the new plugin wherever you want later:

app.myplug(); // use plguin after reference to app was "grabbed";

Some TFUZ Methods - *For help read the function signatures in the code or contact me!

append - el.append('text or html') - append to bottom of el.
appendTo - el.appendTo('.otherEl' or el.appendTo(Elvar) - append to first of selector or to reference.
prependTo - Same as appendTo but prepends to silly.
grab - tfuz.grab (query document) or el.grab('selector', {all: false, fn: func}) (query starting from element) - short hand for each that will run function and return found collection (first found by default).
each- el.each({sel, 'selector1, selector2', all: true, fn: func}) - run function on collection of selectors.
select - el.select({sel, 'selector1, selector2', first: false, fn: func}) - run function on collection of selectors and return collection.
ready - tfuz.ready(func) - run function when document is ready
css - el.css('color: blue;') OR el.css('color: blue;', { add = false } ) to overwrite CSS, true by default to add to current CSS)
html - el.html() to return html, el.html('some new html here') to set html.
_text- el._text() to return text, el._text('some new text here') to set text - *prefixed with underscore because anchor tags have a text property that you can't overwrite.
plg - add a new plugin.
fn - alias to plg.
use - alias to plg.
on - el.on('click', func) - adds an event listener.
off - el.off('click', func) - removes event listener created by on.
trigger - trigger an event created with on.
observe- listen for changes on elements - read code!
unobserve - stop observing observers of elements created by observe.
getobservers - Get list of observers
scroll - tfuz.scroll(func) - run function on scroll.
attr - get or set attributes of el.
removeAttr - el.removeAttr('attr') - remove attributes of el
addClass - el.addClass('classname list');
removeClass - el.removeClass('classlist');
toggle - toggle on or off a class
rpx - remove px, em from numbers and return number.
cs - return computed values.
isString - return boolean if is a string.
isFunction - return boolean if is a function.
isObject - return boolean is an Object.
isArray - return boolean if is an array.
isElement - return bollean if is an Element.
isNumber -return boolean if is a number.
isEmpty - return boolean if empty object.
createNode - create Node and optionall append or prepend to caller.
delay - iterate-able delay queue - el.delay({time: 1000, fn: yourFunc, iterate: 6 }); - runs yourFunc every second for 6 iterations - chained delays are queued and ran in order until queue is empty..

Delay Example


  // Create a normal function - as an example this function will increase a counter
  function delayCount(e){
    if(!e.templateHTML){
     if(!e.countme){
       e.countme = 0;
     }
      e.templateHTML = e.html(); // save original html for future iterations
    }  
    e.countme++;
   console.log('Count is '+e.countme);
   e.html(e.templateHTML + ' '+e.countme)
  }

// call delay from app and watch the magic happen as the count up to 6 is appended to the existing html.
  app.delay({time: 1000, fn: delayCount, iterate: 6 }); // chain more delays here if you want.

Now that you know about delay, you can build your own effects!

TFUZ doesn't come with effects, that helps keep the code small. But you can build your own!

We will build FadeOut and FadeIn.

// First create the functions we will call with an iterate-able delay
// fadeOut

function fadeOut(e,options){
let op =  e.cs('opacity');
let itr = '0.'+options.iterationsLeft;
itr = Number(itr)
e.css(`opacity: ${itr};`);
}

// FadeIn

function fadeIn(e){
let op =  e.cs('opacity');
if(op < 1){
op = Number( op ) + 0.1
}
if(op >= 0.9){
op = 1
}
op = op.toFixed(1);
e.css(`opacity: ${op};`);
}


// Now use delay to run your new fade functions

fader.delay({time: 100, fn: fadeOut, iterate: 10 });
fader.delay({time: 100, fn: fadeIn, iterate: 10 });


// You could wrap the above delay calls in a function... like fadeInOut() then call fadeInOut on click or wherever you want.

function fadeInOut(){
fader.delay({time: 100, fn: fadeOut, iterate: 10 });
fader.delay({time: 100, fn: fadeIn, iterate: 10 });
}


// call fadeInOut on click event

fader.on('click', fadeInOut);

Like TFUZ and want to help?

Get TFUZ, fork and make improvements on https://github.com/bretgeek/tfuz

VibeJS - A Small JavaScript Library for Composing User Interfaces and Apps

bretgeek — Wed, 07 Jul 2021 19:24:16 +0000

Go to Github to get VibeJS.
Visit VibeJS.com for more info.

VibeJS

VibeJS is a small JavaScript library for composing component based user interfaces and apps OR as a general purpose JQuery like utility library.

Features

Small - currently under 16KB minified.
Create self contained components for composing larger components and apps.
Optional external access to the component.
Rendered components receive built-in methods (the Vibe).
Easy familiar syntax with built-in chain-able DOM manipulation methods.
Pass in external functions or plugin functions to your rendered components.
Built-in Drag and Drop methods.
Ability to set up custom observers on rendered components.
Convert any element or HTML string to a Vibe'd element.
Optionally use as a JQuery like utility library for getting work done.
And more ...

If you think this is interesting, please hit that heart button!

This open source project can use your help, please heart here or favorite on Github!

Why another JS library?

I was in need of a small component based library but wanted to know the internals of how one was built.

I created for VibeJS for my own needs and in the spirit of open source, released it free of charge on Github.

It is my hope it will be useful to anyone who needs it and hopefully encourage others to help with future improvements.

Basic Usage

Getting started with VibeJS is easy.

You can add VibeJS to an existing web page in a script tag (or use a bundler like Webpack).

See the Basic Usage at VibeJS.com for more info on using Webpack.

Add Vibe to your page before the closing body tag.

<script src='https://yoururl.com/vibe.min.js'></script>

// Or from a CDN

<script src='https://cdn.jsdelivr.net/gh/bretgeek/vibejs@main/vibe.js'></script>

Create a basic component

You create components much like would in React using a function.

A basic component function that doesn't do much would look like this:

This would go in a script tag or external.js/bundle.js file.

const aComponent = () => {

    const template = `<div>Hey, I am a component!</div>`;

    return {
    template: template,
    className: 'myComponent',
    }
}

Render it

To render the component to a page that contains an element with an id of app would look like this:

const aRef = $vibe.render(aComponent, {
    to: '#app',
    className: 'renderedComponent',
});

That is an extremely basic component that doesn't do much.

Lets Make a Component That Does a Little More...

The component above works but doesn't do a whole lot. Let us make another component that does do something.

In this next component we will add a click event to log a message to the console.

Be sure to look at the additions in the code and read the code comments:

Make the component with a function (again in a script tag or external.js/bundle.js):

const myComponent = () => {

    const template = `<div>Hey, I am app!</div>`; // Your component's HTML as string template, can pass in variables too;

   // Just an example function (optional)

    const func = function say() {
        console.log('I am app')
    };

    // init runs automatically if it exists

    const init = function init(e) {
    console.log('I am an '+e);

    // can chain built-in e.$fns DOM methods!
    e.$css('cursor: pointer;').$text('I am new text');

    };


   // Another function but this time we will pass it in as an event handler

    const click = function click(e) {

   // target may or may not be "this" if template has nested elements
       console.log('clicked ' + e.target.tagName ); 

// In an Event "this" refers to the component and you can access $fn.func()
        this.$fn.func(this); 
    };


   // A state object (optional, pass in anything you want).
   // After making changes to state, state can be reverted to original saved in component's $origState

    const state = {x:1};


   // Render uses this return object to add these to the component

   return {
        template: template,
        className: 'myComponent',
        init: init,
        fn: {
            func: func
        },
        events: {
            click: click,
        },
        state: state
    }
}

Render it

Render the component to a DIV with an id of "app" and save a reference to it as "myRef"

In an html file:

// somewhere in your html

<div id='app'> </div>

In a script tag after vibe.js:

// className, state, events, plugins (like fn of component) etc. can be added here too

const myRef = $vibe.render(myComponent, {
    to: '#app',
    position: 'append',
    className: 'renderedComponent',
});

You can render a component as many times as you want using different reference names.
Components can render other components too (hint: modules/import/export within components).

The Vibe

You might be wondering what the meaning of Vibe is in VibeJS.

It's a feature!

Components can be completely self contained however, after rendering a component it becomes vibed.

A vibed component exposes all it's built-in methods.

You can interact with the component (inside the component itself or externally) and call these built-in methods using the reference ("myRef" in this case) like:

// Call built-in Vibe methods to change the css and the text etc. (chain-able).

myRef.$css('display: inline-block').$text('Hey hey!');


// Call the internal function you declared in the component

myRef.$fn.func();



// Tack on more events with $on

myRef.$on('click', function(){ console.log('my Text is: '+this.$text()) });

There are lots more vibe methods (read the code!)

Vibe Any Element!

Vibing isn't limited to components. You can also Vibe any existing element.

Here is how you do that!

Use normal JavaScript to select an existing div with a class name ".myDiv".

const aDiv = document.querySelectorAll('.myDdiv')[0];

Vibe it via render...

const aDivRef = $vibe.render(aDiv);

// Use it!

console.log('div existing text is ' + aDivRef.$text());

aDivRef.$text('I am new text.');

***Note that when vibing existing elements, since there is no "component functions to pass in", properties for className, state, events and plugin (if any) must be passed in via this render object.

Components that Render Components

When building large scale JavaScript apps using modules or bundling tools like Webpack, import and exports are essential to making your app easy to work with on a team of developers as well as help to keep your code organized.

Components that render other components work the same way. You must export and import the assets you want to use.

The following is how you would render a component from another component.

If App1 is in in js/App1.js and is prefixed with export like:

export const App1 = () => {

    const template = `I am an App1 component!`;

    return {
    template: template,
    className: 'App1',
    }
}

App2 can import and render App1 from a method like init or any other method with an import:

import {App1} from '/js/App1.js';

    const App2 = () => {

    const template = `App2 rendered an App1 component!`;

    const init = function init(e) {  // "e" here is $self and you can also pass in $self here.

    // Render App1 to App2

    const App1Ref = $vibe.render(App1, {
    to: e,
    position: 'append',
    });

    // change App1's text to show its working

    App1Ref.$text('App1 component imported to App2');

    };// End init

    return {
    template: template,
    init: init,
    className: 'App2',
    }
}

In the example above App2 imports App1 and renders it via App2's init method.

The real power of this comes when rendering components to other components via Events!

Which means you can render new components via click, touch etc. add infinity.

Todo list anyone?

In Summary

I hope you enjoyed this article about my little open source JS library.

I hope it will inspire someone of you out there to give it a try, dig in to the code and recommend improvements.

For those who do try it, I can't wait to see what you build!

There are a lot more things VibeJS can do and I hope to cover those things in future posts.

Give me a follow so you don't miss out on those.

Until then, keep Vibe'n!

Visit VibeJS.com for future changes and docs (lots to do!).

Components with YumJS

bretgeek — Mon, 15 Feb 2021 16:14:20 +0000

Remember JQuery?

JQuery sure was fun wasn't it?

At least it was fun until our apps grew out of control and started looking like a big bowl of noodles.

We have since learned that composing our apps using individual components is a much more sane approach.

What if JQuery had a component syntax?

Wouldn't it be cool if JQuery had a component syntax that allowed you to avoid the eventual JQuery spaghetti and compose apps by rendering components?

Wouldn't it be nice to not have to worry about shadow roots or CSS leaks and still be able to think in terms of components?

With YumJS components, you can do that!

But wait, we have React and Vue for that!

I know, I know... React, Vue, Angular are all the rage right now and by no means is YumJS trying to replace those frameworks.

YumJS strives to be a light-weight alternative for the adventurous and provide an opportunity to learn and explore what is possible using the smallest amount of overhead code all within a familiar syntax.

Aside from the JQuery like syntax, YumJS has tons of cool things like function queues, utilities, observers and stuff for reactivity.

You can read more on YumJS on the SITE and in my Introducing YumJS Dev.to article HERE.

Disclaimer

YumJS is still new and so far only one developer (me) actively finding / fixing bugs and adding new features. Sooo.. there may be monsters or as of yet undocumented code. But the beauty of open source means you can help :)

Lets get on with it!

In the intro article I mentioned above I showed how to do components in YumJS. In this article we will review that and also go over how to build your app and output the final code as a minified file for your use. We will do that with YumJS's companion node based utility, Yum App Builder.

First let us review the component syntax.

Component based syntax

In its simplest form, Yum's component syntax looks like this:

const App = () => {

const html = `<h1>1</h1>`;

const h = yum(html).first;

return h;
}

// Render the App to the element with id of 'root'  (or wherever).

yum()._render(App, '#root', { pos: 'append' });

As you can see a component is just a function that is passed to yum()._render().

Every component needs to be rendered to somewhere, even to other components!

Composing an app from components means you are adding components to components. The easiest way to do that is with Yum App Builder

Yum App Builder

Instead of implementing your YumJS app as a monolithic file full of components or using many separate files linked from a src attribute in a script tag (or even a custom bash script to compile your code), you can use Yum App Builder to compile your app.

Using Yum App Builder allows you to to combine your components that exist in their own individual files into one minified (or un-minified) output file.

To do that, there is one small change you need to make to your components that render other other components and that is to ... add an import!

For example if App needs to render another component Box from Box.js, you would add an import like this:

import '../src/Box.js';

const App = () => {

const html = `<h1>1</h1>`;

const h = yum(html).first;

// Now render Box to App.
//  You could copy and paste this render line to render Box more than once or
//  wrap it in a function and call that function as many time as you want.

yum()._render(Box, h, {addClass: true, props: {name: 'box'}, initState: 'box '} );

return h;
}

// Render the App to the element with id of 'root'  (or wherever).

yum()._render(App, '#root', { pos: 'append' });

Some things to take note of:

Import statements are stripped out of the final code, they are only needed when using Yum App Builder. Only place them at the top of file, one on each line in the same format shown here. Doing it any other way will cause errors.
Imports are for including other component files not functions from files (like in JS).
The render call for Box has some extra options that are not necessary at the moment. I just put them here to show you that there are things you can do with props and state!
I'll probably write a more in depth article on props and state later but for now see the boilerplate example in the Yum App Builder and Component reactors and state.

Compile your app with Yum App Builder

Setting up is easy...

1. Install node (if not already installed).

2. Clone the YumApp Repo.

git clone https://github.com/bretgeek/yumapp.git

3. Navigate to the build directory - yumapp/build.

cd yumapp/build

4. Run npm install to install the dependencies need for minification and for node.

npm install

5. Run the example app which will launch the boilerplate app in your default browser.

node buildyum --min --web

6. Edit the example App to create your own. cd yumapp/src then edit App.js and the other files. If you mess it up re-clone!

More ways to build

Build an un-minified file with no web start node buildyum
Build an un-minified file with web start node buildyum -- --web
Build a minified file with no web start node buildyum --min
Build a minified file with web start node buildyum --min --web

The Output file

Running node buildyum without the --web option will give you a notice on the screen as to where to find your output file:

The minifed file is in ../out/chunk.min.js while the un-minified file is in ../out/chunk.js

You can use these output files in your project by first including YumJS in a script tag and then your output file.

Something like:

  <script src='https://cdn.jsdelivr.net/gh/bretgeek/yumjs@main/yum.min.js'></script>
  <script src='https://mycoolsite.com/js/chunk.min.js'></script>

In Summary

This article only touches the surface of what is possible with YumJS components. If this article has summoned your inner explorer and adventurer spirit, be sure read the example code for each component in the src directory of Yum App Builder to get an idea of how reactors, props and state work as well as how to access external components.

Be sure to read the Docs and the code and feel free to hit me up with any questions you may have.

If you make anything with YumJS I would love to see it.

If you notice any errors in this article or need any help at all ping me!

Until then, I hope to see you at my next article!

Introducing YumJS

bretgeek — Sat, 24 Oct 2020 18:31:21 +0000

YumJS

YumJS is a small reactive JavaScript library with JQuery like syntax that I have created for myself and released in the hope it will be useful to anyone who needs it.

[examples near bottom of post, gotta do the fluff first.]

Aside from having a familiar procedural syntax (and optional component syntax) it gives you the (optional) ability to make any element reactive and subscribable.

Why another JS library?

Why not?

No really, I started this project because:

I wanted it to be useful for others to learn from.
I wanted to see if it could be done.
I wanted it to be open source / open for iteration (if found to be useful).
I needed it for cutting down on repetitive tasks in my personal projects.

As mentioned above, Yum provides a familiar procedural and a component based syntax with low overhead and a slice of delicious reactivity when you need it.

Is this a substitute for React, Angular or Vue?

Probably not!

I make no claims about using YumJS in place of your favorite lib/framework (although maybe it could be).

However, If you are looking for something new and enjoy exploring what is possible with a library that provides a small code base maybe give YumJs a try.

Features

Simple, easy to learn with familiar syntax.
Optional component (rendering) syntax with props and state.
A lightweight alternative to JQuery (not all JQuery functions implemented).
Tons of utility functions.
Ability to observe or subscribe to any element for complex reactivity.
Small, fast, lightweight and flexible.
Built in Drag and Drop/swipe.
Open source and extendable.
A build tool (node.js) for component based apps! Here and Here

Before I get into any examples let me point you to the docs and downloads...

Downloads and Docs

GitHub repo: https://github.com/bretgeek/yumjs

Feel free to download and try one of these minified versions:

Minified Download: https://yumjs.net/js/yum.min.js

No Dragging Download: https://yumjs.net/js/yum.nodrag-min.js

Documentation - in progress: https://yumjs.net/docs/

USAGE

Load in your web app like:
<script async src='https://yourdomain.com/js/yum.min.js' ></script>

EXAMPLES

Basic usage

You probably want to do stuff when the document is ready.

<script>

yum(document).ready( function(){

 // do your stuff here

});

</script>

Querying the DOM and getting references to elements

// Assign a collection to variable for re-use, note the underscore.

const buttons = yum('.button')._; 

// Change the text of the entire collection.

yum(buttons).text('We are collected buttons.');

// The above prevents future DOM diving and re-use
// but same effect can be done with: 

yum('.buttons').text('We are collected buttons.');

Make any element reactive

// get a reference to only the first h2 element

const h2 = yum('h2').first;
yum(h2).Reactor(); // set up the reactor


// a function for ReactTo

const runme = function(reactor){
console.log('H4 reacted '+reactor.data);
yum(reactor.subscriber).text(reactor.data)
};

// Set All h4's to **react to**  h2 property 'a' with a subscriber name 'myName'

yum('h4').ReactTo(h2, 'myName', runme, 'a'); // "a" here can be any property you want

//later on H2.

h2.atom.a = "I am some data";

// After which all H4's will react and exec 'runme' 
// and change their text to "I am some data"

Basic component syntax

const App = () => {


const html = `<h1>2</h1>`;

const h = yum(html).first;

yum(h).addClass('hey');

yum(h).on('click', function() {  let num = yum(h).text(); num = Number(num) + 1 ; yum(h).text(num); console.log('num is '+num)} );

return h;
}


// Render the App to the body element (or wherever).
yum()._render(App, 'body', { pos: 'append' } );

Components have built in Reactors. More about that here https://yumjs.net/#yum

Events

Adding Event Listeners

// assumes runme function exists

yum('.button').addEvent('mousedown, touchstart', runme);

// on is an alias  for addEvent
// same as above but with on alias

yum('.button').on('mousedown, touchstart', runme);

Creating custom events

// create a custom event and assign it to a variable

  const myEvt = yum()._createEvent('myEvt');


// Use addEvent to add a listener for the the custom event on .button class

yum('.button').addEvent( 'myEvt', function(e) { console.log('I am myEvt'), true });

// Finally trigger the event maybe on a timeout or whatever

setTimeout(t => {
yum('.button').trigger('myEvt');
}, 2000);
};

More Usage Examples

There is a whole lot more stuff YumJS can do. See more examples at https://yumjs.net/ and the docs at https://yumjs.net/docs/

More to do

Trying to keep it short here so I didn't explain the component syntax in depth (have a look at the site or the code). Maybe I can cover it further in a future post.

The documentation still needs some work and while there are examples on the site, many more need to be created.

I'm sure there is plenty more to do but that is where you come in!

If you find YumJS interesting or useful let's make it better together. Again the GitHub repo is: https://github.com/bretgeek/yumjs

Let me know your thoughts...

*Thanks for taking the time to read! *