0.1.6 • Published 7 years ago
another_javascript_framework v0.1.6
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 mixerandr3w001@gmail.com 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