Extending HTML means to implement new behavior of existing elements in HTML. There are a number of default behaviors. Like a click on a link open the page defined by the href attribute. A select is able to get changed by the user. A form is able to submit data. And so on. With extending HTML you define new behaviors and rules when they get applied. Once the extension is defined a developer can create elements of a certain type to get the new behavior applied. This will help to reduce code, compared to specifying the making for making an pageLoad stript, that will fild the button, apply the custom behavior and has a section for each of the elements on the page with some special requirements. This is useful, if you have a website, that delivers page by page from the server, as it is done my most PHP sides and using systems like wordpress, drupal and in most cases synfony and zend. I will discuss in a future post about the advantages and disadvantages of such systems over single-page applications. Second improvement by building HTML extensions is the separation of concerns you are defining the behavior on one place and the compositions and style of those components is defined in other places, like templates.

I heard about HTML-extensions while a javascript meetup at The NetCircle in Shanghai. There was a talk given by Billy Shen. In his presentation he spoke about his implementation using Promises and jQuery. But in the following I want to show an approach, that I would prefer to implement html-syntax-extensions using jQuery in a small example. The following example will allow to define a button that when clicked to load data from a given url, to get displayed on some other element, given by a selector, but only if the user allow that.

1
2
3
4
5
6
7
8
9
10
11
12
13
// get some event on a certain type of element. in this case buttons with the class of loadJSON.
$(document).on("click", "button.loadJSON", function (e) {
// when there was a click on a button that has the loadJSON class
// read parameter from the attributes and validate them, before doing the logic.
var message = e.target.getAttribute('data-message') || 'should we do it?';
var url = e.target.getAttribute('data-url');
var destiny = e.target.getAttribute('data-destiny')
if(url && destiny && confirm(message)) {
$.get(url, function(data) {
$(destiny).text(data);
});
}
});

As you can see, the click-Event is registered on the document. That means every click is going to be evaluated with the selector “button.loadJSON”. This approach is good. to add some behaviors to an existing Website. I think this might be ok as link as you don’t have more then a hundred extensions. But for a single-page application where basically very element can show some specific and unique functionality. You should go and bind the events direct on those elements when you create them. Or let that handle by some framework, like Backbone.js, React, Angular, Ember,…

In conclusion, extending HTML is just giving you a new perspective, how you can implement simple components. So, Can you be a great software developer Javascript UI developer without extending the HTML-syntax? Yes. Do you need that to implement apps? no. Is it interesting, and could probably save some time? Yes.

These days more and more Webservices let you manage all kinds of data. Recently I am tracking my fitness using a Mi-Band. And write every day my weight into the MI-Fit app. After two months, I installed an update to this app, with the result, that my weight data was lost. That made me very angry. ater a new update one week later the data is back, but the presentation is very bad. so from a diagam only a line is left. That let me don’t see any progress.

That was my intention to do a new app. The app is made to get used in mobilephones, because data is out there, more seldom in front of your PC. But it also works on desktop. So this app let you organise data in lists. For that the user will define a schema, with fields and datatypes. currently there are text,password, shortText, image, url, data, color. basically, what the html-input element has to offer. One special datatype is the enumeration where some options can get defined. I am planing to use other tables as value too. that would make this app, a relational database system.

The data is stored in a JSON-File. To store I use a imple download-link(an a-Tag with download Attribute that is giving the fileName) and to load data i use an input type file. and trigger on click on it, to open the fileFinder. when the user selects a file, I can load it using the browsers FileReader and parse the JSON-content. This is a good solution for an app, that does not need to get installed. Maybe I transform this app, to be a cordova app, to store the file on the system and sync data on the fly, without the users need to “download”. On an Android phone I get asked if I want to replace the previouse downloaded file. That is convinient.

Let me sum up some great points on that app, even we both know the app is very simple and limited, but the potential is huge and the and the used technology is great. The data is stored in a JSON-file, that makes it easy in any application to adopt thouse data. The UI is not beautiful, but very efficient on mobile. Try it out and convince yourself: ddata

When developing web application you need many programms in a modern environment. That leads many to use tools like grunt or gulp to run tasks automatically. Using thouse tools requires all tools to get translated to thouse frameworks. And some even don’t fit into this setting.

twatch will run many programms simultanously on a single console, making it ease to reason what output came from witch programm. When I develop nodeApplications I have running the node-server, JS-lint, babeljs, regenerator, mocha and other tools running in watch-mode. Normally each of thouse would use one console or run in background printing the output mixed into one open console. Restarting the commands is difficult or timeconsuming.

With twatch you prepare a single file, that will start all programms on a single terminal, helping you to reason what programm printed the output.

For various Projects I thought it would be great to have a graphical programming language, that had cover all Javascript specialities. After I did something like that before. Where I wanted to build a AI simulation MMOG. Now I wanted to build it for more general purpose. When this works. It could work with a whide range of applications. Because today I would build it on top of babylon.js. Babylon would parse any Javascript-file and provide an AST(abstract source tree). The ast could easily get displayed with graphical components. and get changed and moved by drag and drop. When Changing a function or object definition all positions where this was used could automatically get changed.

with that setup, you could build apps, where the users could implement there own logic.

Let’s say you make a Jump and run. Then you tell the player to move left. the user tries. Then you open a message this method is not implemented jet, can you do it. so the user implements a method to move the hero. and then the user can do it for all hero actions. When the user is arriving at a closed door. The user could implement the toogle method to open and close the doore. with a heros cction.

A second example could be a data-management-app. where the user yould define macros and forms to input data in his most efficient way, without a need to a special ajusted app. he could just code the logic with moving blocks.

The possiblilities are endless. before I looked ad scratch, whitch is a programming language that also can compile to Javascript. but this is not using the flexibilities of javascript. second Scratch is implemented on a canvas. that makes it difficult to change the theme. So in all apps. it will look like a toy for children. if the components are displayed with HTML they could be styled easily using CSS. to look like an actual programming lanugage, or more like blocks to move for the younger generation. I could even imagine, that it would be possible to build an IDE based on the Babylon abstract source tree.

how do you think about that Idea, should we start that project, to provide a general purpose graphical programming language supporting all the greatness of javascript?

Recently I found an interesting theory, that said that OOP is bad. The author Brian Will is showing many code examples, where OOP will never match the right criteria to solve a real world problems. As an alternative he prefer functional or procedural programming. His thoughts made be thinking a lot about good software design. And I decided to make a little HTML/javascript app, completely in functional style.

To do so, there are a few rules to follow. The simple ones are “no new and no this.” Next is “let data be data”. In object oriented programming you bind functionality to your objects, but now only plane simple objects get used as you create them using curly braces {}. The objects get used to structure the app-data and to namespace your functions.

Next I thought the abstraction of the DOM tReeact, that I developed serval months ago, where useful. Actually, when rendering a Template, that is happen in pure functional style. That made me render the UI using underscore-templates. tReeact has the Component-system, that let me handle the UI events.

The plan is now the Events will trigger some functions to change the data and course an re-rendering of the entire application ui. This approach has lead to a great separation of concerns. UI is defined in the templates, Events are handled in Components, the logic is implemented in functions, and the models are just plane data in a structured object-tree.

It has shown, that this way to build an app is very effective, the app is showing a good performance and the structure could easily scale to very complex applications.

The application is available at http://tobiasnickel.github.io/.
next time I will tell you why I made this app.