another_javascript_framework

a little framework that lets you use html in javascript

pros and cons

pros

• it's just 1kb (es5.min version, no shorthands)
• an easy to use component system(similar to ReactJS's way)
• the framework works with strings
• a light "virtual dom"(not kinda a virtual dom)

cons

• it's not reactive(see ReactJS, PreactJS or VueJS for a reactive framework)
• it's not ready for production environment
• updates for the framework will come slow (not all of them)

installing

method 1

do:

npm i another_javascript_framework -S

then add these script tags:

<script src="./node_modules/another_javascript_framework/dist/a_js_f.es5.min.js"></script>
<!-- the next is optional but recomended -->
<script src="./node_modules/another_javascript_framework/dist/a_js_f.shorthands.es5.min.js"></script>

method 2

add these script tags to your html page:

<script src="https://cdn.jsdelivr.net/npm/another_javascript_framework/dist/a_js_f.es5.min.js"></script>
<!-- the next is optional but recomended -->
<script src="https://cdn.jsdelivr.net/npm/another_javascript_framework/dist/a_js_f.shorthands.es5.min.js"></script>

examples

<example 1>

html:

<div id="app"></div>

javascript:

const App = () => (
    div(
        h1('Hello world')
    )
)

render({
    template: App(),
    element: 'app'
})

output:

<div id="app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>

</example 1>

<example 2>

html:

<div id="app"></div>

javascript:

const App = () => (
    div({
        class: 'center big red',
        id: 'loool',
        render: (
            h1({
                class: 'blue-text',
                render: 'Hello world'
            })+
            br()+
            ul(
                li('Hy man')+
                li('how are you?')
            )
        )
    })
)

render({
    template: App(),
    element: 'app'
})

output:

<div id="app">
    <div class="center big red" id="loool">
        <h1 class="blue-text">Hello world</h1>
        <br />
        <ul>
            <li>Hy man</li>
            <li>How are you?</li>
        </ul>
    </div>
</div>

</example 2>

<example 3>

html:

<div id="app"></div>

const HelloWorld = number => 'Hello World no.' + number

const AnotherComponent = props => (
    h1('Hy ' + props.name)+
    br()+
    h5(`My friend told me you like the color ${props.favoriteColor}.`)
)

const App = () => (
    div(
        HelloWorld(1)+
        br()+
        HelloWorld(2)
    )+
    AnotherComponent({
        name: 'Bob',
        favoriteColor: 'red'
    })
)

render({
    template: App(),
    element: 'app'
})

output:

<div id="app">
    <div>
        Hello World no.1
        <br />
        Hello World no.2
    </div>
    <h1>Hy Bob</h1>
    <br />
    <h5>My friend told me you like the color red.</h5>
</div>

</example 3>

<example 4 no-shorthands>

html:

<div id="app"></div>

javascript:

const App = () => (
    a_js_f._('div', (
        a_js_f._('h1', 'Hello world')
    ))
)

a_js_f.$({
    template: App(),
    element: 'app'
})

output:

<div id="app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>

</example 4>

<example 5 no-shorthands>

html:

<div id="app"></div>

javascript:

const App = () => (
    createElement('div', (
        createElement('h1', 'Hello world')
    ))
)

render({
    template: App(),
    element: 'app'
})

output:

<div id="app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>

</example 5>

comparison with other frameworks

all other frameworks are more complex and better than mine, easy.

contact

contact me at [email protected] for anything related to the framework

sorry everyone for the email typo, the last 0 from my email needed to be a 1

author(s)

• me (duh)

license

just the default npm licence (I need to make some research on that)

more info:

global variables:

• createElement
• render
• a_js_f

global variables if you use the shorthands:

• h1
• div
• and all html element...

exceptions for html elements:

• var() -> is now Var()

common errors:

Uncaught ReferenceError: --insert here html element name-- is not defined

solution:

try to do like I did on examples 4 and 5 for that element or mail me the error