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!
Top comments (0)