Building Component Based Web Apps with YumJS

Using YumJS YumApp


## 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! ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t68puthwkj9k53on73hh.png) ### 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](https://yumjs.net)** and in my Introducing __YumJS__ Dev.to article **[HERE](https://dev.to/bretgeek/introducing-yumjs-16bi)**. ### 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](https://yumjs.net/#yum). ### 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. ```javascript cd yumapp/build ``` __4.__ Run _npm install_ to install the dependencies need for minification and for node. ```javascript npm install ``` __5.__ Run the example app which will launch the boilerplate app in your default browser. ```javascript 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](https://yumjs.net/docs/) and the [code](https://github.com/bretgeek/yumjs) 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!