/h2js

Ultra lightweight, coder centric, web application framework.

Primary LanguageJavaScriptMIT LicenseMIT

h2js

H2JS is a coder centric web application framework. H2JS attempts to limit itself to vanilla javascript and standard browser features. If you enjoy writing in code and prefer standard browser features over the latest framework h2js may be for you.

SEE

h2js-init -- Creates scaffolding

h2js-element -- Simple custom element wrapper class

TRY IT

Create Project Scaffolding

$ npx h2js-init   ... note: depending on your network speed this step may take a little time.

Build Project

$ cd app

(edit ./src files)

$ npx h2js build

Run/View

$ python -m http.server ./dist   (or your fav local web server)

http://localhost:8000

DESIGN

  • VanillaJS / Browser as a platform
  • Simple thin framework
  • Webpack compiled (use npm libraries)

STRUCTURE (and interesting files)

Project File Structure

File Structure 1

src = application source files

dist = project compiles here (copy these files to your production server to go live)

Application Structure

File Structure 2

index.html - doc setup

app.js - your application specific code

( sub directories and files optional for organization )

EXAMPLE

$ npm i -S h2js-element

app.js

import ElementClass from 'h2js-element'
import Clock from './clock-element.js'

class App extends ElementClass {
	constructor(){
		let name = 'app'
		let C = `
			<style>
			</style>
			`

		super(name,C)
		
		let i = new Clock('green')
		this.shadow.appendChild(i.element)	
		}
	}

export default App

 

clock-element.js

import ElementClass from 'h2js-element'

class ClockElement extends ElementClass{

	constructor(faceColor){
		faceColor = faceColor || 'white'
	
		let C = `
			<style>
				.display {color: ${faceColor};}
			</style>
			<div class='display'></div>
			`
		super('clock',C)
		this.shadow.querySelector('.display').textContent = new Date()
		}
	}

export default ClockElement