anvaka/require from html.md

## require from html.md

      
    Raw
  

              require from html.md
            
          
    Browserify and HTML

Today most people include bundle.js into their html:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>javascript first</title>
</head>
<body>
  <script src='bundle.js'></script>
</body>
</html>
// index.js
console.log('hello world');
And then produce bundle.js with browserify:
browserify index.js > bundle.js

Is there any benefit of reversing this paradigm? Can't we just require from html?
Example 1: Simple require

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>html first</title>
</head>
<body>
  <require src='index.js'></require>
</body>
</html>
// index.js
console.log('hello world');
And then we would just compile with imaginary tool, let's call it reht (REquire HTml):
reht index.html -ohtml final.html -ojs bundle.js

reht will traverse dependency tree (with browserify) and produce two files as an output: html markup and javascript bundle.
In current examlpe there is no exports in the index.js so the output of reht is:
<!-- final.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>html first</title>
</head>
<body>
  <script src='bundle.js'></script>
</body>
</html>
// bundle.js
/*  [browserify header goes here] */
console.log('hello world');
/*  [browserify footer goes here] */
So what?

Now that we have a very basic set up, let's imagine second step: exporting js/html/css?
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>require html</title>
</head>
<body>
  <require src='button.html'></require>
</body>
</html>
<!-- button.html -->
<button name="button">Click me</button>
Now the output of compilation will be:
<!-- final.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>require html</title>
</head>
<body>
  <button name="button">Click me</button>
</body>
</html>
There is no script included, since noone required javascript file. How would we include javascript here?
Add some javascript

Let's start with the same initial markup:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>require html</title>
</head>
<body>
  <require src='button.html'></require>
</body>
</html>
But now we will print greeting message every time when button is clicked:
<!-- button.html -->
<button name="button">Click me</button>
<require src='button.js'></require>
We've added new button.js:
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function () {
  console.log('hello world');
});
The final output of the compilation will be:
<!-- final.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>require html</title>
</head>
<body>
  <button name="button">Click me</button>
  <script src='bundle.js'></script>
</body>
</html>
// bundle.js
/*  [browserify header goes here] */
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function () {
  console.log('hello world');
});
/*  [browserify footer goes here] */
As you can see, there is no magic so far. Everything is very straightforward.
I hope with these basic primitives we can build higher level abstractions, e.g. libraries of reusable components. What do you think?