Simple and very fast JavaScript Web Application Framework / Library just for real Hipsters. Because it is unique, different and totally cool. Just like Hipsters. Works best on MacBook Pro.
Seriously ... here is the simplest possible example to display remote data from remote endpoint in a list on your page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My remote data</title>
</head>
<body>
<template>
<ul>
${async () => this.template.forEach(await(await fetch("/endpoint/")).json(), value => `
<li>
${value}
</li>
`)}
</ul>
</template>
<script src="ihjs.js"></script>
</body>
</html>That is it. Really.
No dependencies - only one single script tag that can contains this framework only (with, optionally, your app bundled inside), complete with module loader and all that you need.
Dependency footprint is minimal as it can be.
There is no special directives, no special attributes, not special syntax that should be learned.
It is all JavaScript and Web standard and it's awesome!
You can use it with Typescript. Here is the demo,
It can be used with Typescript and with Web Components, here is the demo: demo,
You can even build Single Page Application in a single HTML file, here is the demo: demo, and much more... see demos.
And, it's fast and small.
Internet Explorer is not supported, nor it will be any time soon.
Started initially as frontend codebase for some other project that had very specific requirements for frontend part:
-
Clients are expected to be using latest browser technology - no transpilation to old ES5 JavaScript is required.
-
For older browsers like Internet Explorer that doesn't support at least ES6 standard - user would be politely warned that they need to update their browsers to use this application.
-
Client JavaScript code should be smaller and faster as possible - served in a single bundle file preferably.
-
Client JavaScript code should include AMD (Asynchronous Module Definition) module loader. Requirement is to be able to work with libraries that follow AMD module definition standard.
-
Module loader should also be able to output format from Typescript and optionally Babel.
-
Fast templating support (inside document, module or standalone html file) - supported natively by newest browsers tech.
-
Independent modules and templates should be able to be bundled in a single file together with module loader and framework.
-
Async support in everything from bottom up.
This framework is a side-project that resulted from initial work on vanilla ES5 JavaScript code base of that project.
Side note:
It is possible that there was/is such system or framework that would support such requirements, but, nevertheless, working on this project is invaluable learning experience and great fun. I hope someone will like it and find it useful.
Include script tag for this library build ihjs.js in your document like in example above:
<script src="ihjs.js"></script>Build for current version is here: /src/ihjs/build/1.0.0/
You can create you own custom build using build tools.
You can get it by simply downloading ihjs.js file - or - by cloning this repository or by installing NPM package (coming soon).
Additionally, you can also include ihjs.js file script from dev dir, which would include unbundled and uncompressed source (for debugging purposes).
After that, you can dive into demos and samples. That's all.
To run demos:
- Clone this demo
- Install npm
- type node run-demos
$ git clone https://github.com/vbilopav/iHipsterJS.git
$ npm install
$ node run-demos
That will run http-server and open /demos/ url.
If you prefer any other server (like LLive Server for Visual Studio code for example) - you can skip all of these steps after cloning and just run your web server in your clone root, run the sever and navigate to /demos/.
This is open source project, everybody is welcome to contribute. Let's make something simple and powerful together.
However, is you like what I'm doing and you find it useful, you can support me by buying me beer or pizza or dinner or trip around the world if you would:
Copyright (c) Vedran Bilopavlović.
This source code is licensed under the MIT license.