Javascript for everything

8th January 2014

The web is built on HTML, styled in CSS and enhanced with Javascript. Search engines have been optimised to cope with this format and so when somebody is developing a website they keep in mind the front-end content consists of a compilation of these. Utilities have also been built to help the user deliver their content in this format and some languages such as Coffeescript and LESS have been built to make life easier using this format. Javascript frameworks are built with the expectation of working on HTML delivered by user, look at Angular JS or Ember JS and you will see a struggle between Javascript and the HTML content.

Life for a developer would be much simplier if we could work with just one language for everything, your DOM, stylesheets and scripting.

Enter Javascript

If you need to do something complicated with your website, you are going to need to use Javascript. The latest and greatest CSS and HTML will still only take you so far. Understand Javascript and you can appreciate it as a flexible, powerful programming language - a language that is suitable to create and manage your DOM components, interactivity and style.

The serialisation format of choice - JSON

In order to send data from server to client requires a flat data format and JSON is the format most suitable to work with Javascript, or you just transfer Javascript code directly, though that is a bit risky over non-HTTPS sites.

So using JSON instead of HTML and CSS means that you have the flexibility to define what you are storing and extend it however you like, without waiting for a new standard to be adopted. For example, your html code would be created by passing a JSON object to a Javascript method that creates the dom automatically - valid JSON will result in valid HTML and Javascript objects that you can use instantely without needing to traverse the dom to get references to your dom elements.

HTML:

<h1 style="text-align: right;">This is my title</h1>
<p>This is my <b>description</b></p>
<img src="src.jpg" />

JS:

[
	{ type: "h1", text: "This is my title", style: {"text-align": "right"} },
	{ type: "p", text: "This is my ", children: [
		{ type: "b", text:"description"}
	]},
	{ type: "img", attributes: {src: "src.jpg"}}
]

Using JSON allows you to fully customise the output in Javascript and when your dom grows, you could use JSON to store and re-use the object, for example:

HTML & Templating:

<div class="custom_image">
	<img src="{src}" />
	<span>{description}</span>
</div>

JS:

{type: "custom_image", data: {src: "", text: ""}}

The above in Javascript can be used as the print what would otherwise require a template to be defined , assuming that the type has been defined in Javascript and produces comparable results to the html equivalent. Using Javascript also means we can monitor the data bound to the object and update the underlying DOM on demand without needed to do this manually.

The search engine bottleneck

The main issue with using Javascript for everything is that search engines are not optimised for it and your content will not get indexed.

A possible solution: deliver raw html and then get Javascript to automatically convert it into objects for use - this is already what happens with some libraries like jQuery but goes against the idea of using one language for everything.

Another solution: Google has made attempts to index content that has been generated with Javascript and allows you to provide alternative content with altering hashes in urls. You could present raw content to this and continue to provide users of the website a complete JS experience.

Comments

ghj
jfg - 7th May 2016 09:00

Make a comment

Contribute to this article and have your say.