Juten Tach,
this post will be about language and thus i have to send out a word of warning first, because i am not writing in my mother language, so i am not 100% sure, if I always use the right words. Anyway, let’s give it a try.
There are many hot debates about a variety of aspects of JavaScript. One of them is the question, if it is a wise thing to emulate classes, knowing that it does not support them natively. I want to give you my perspective on this subject.
Let’s look at human languages first. With human languages, we find, that some languages are very good a describing certain things than others. You have probably heard of the Inuit having dozens of different words for different types of ice and snow. That of course also means, that some languages lack the words to describe things. Sometimes this makes people use the respective words from other languages (I believe in English you also say “Gesundheit”) and sometimes people start to paraphrase, what they want to say. Let’s take GDP, for example: Gross domestic product. There is no word, that directly defines the concept behind GDP, that’s why we use this combination of three words to paraphrase it (in German, it is even weirder, literally translated we say “gross social product”).
If one has never paid attention to the subject of macro economics in school or has never read any newspapers and so on, she or he will have problems understanding, what it means. So in order to understand certain paraphrases, you have to have some kind of understanding of the underlying concepts. Now the good thing is, that after a while, some of those paraphrases really catch on and get used by a majority of people. So today, we normally understand, what is meant by GDP, not because the paraphrase is very elegant, but because it is used so widely, that a majority of people knows, what it stands for. Of course, other paraphrases do not get adopted and thus almost nobody knows, what it means.
Now back to programming languages. I think, we have similar mechanisms here. There are programming languages, which are able to say things, which other languages cannot directly say. For instance, C# in my opinion is a language, that has a pretty extensive vocabulary, so it can describe quite a lot of concepts. Of course, the downside is, you have to learn all this vocabulary. JavaScript’s vocabulary is simpler (i hear, it was developed in 10 days, so no wonder). So things, that can be said directly in C# cannot be said directly in JavaScript. So, that’s where paraphrasing comes into play. Although we cannot say some things in JavaScript directly, we can still paraphrase, what we mean. So for example, JavaScript has no word for the concept of a class. The best thing we can do is to paraphrase it. Some of those paraphrases are more elegant than others. And the deeper we go with this, the more complicated the paraphrases get. For example, JavaScript also doesn’t have words for “private” and “public”. So people come up with more or less elegant paraphrases, that try to describe these concepts.
And again, if you are not familiar with these concepts and the paraphrases, you will probably have a hard time understanding the code, same with understanding, what GDP is. But over time, some of those paraphrases get adopted by a growing community. And then suddenly you don’t have to think about them anymore. They appear as being a natural part of the language. Think of it. If you hear GDP nowadays, you don’t really think of it as a paraphrase anymore, because it used so widely and naturally, as if it was a concrete word on its own.
The same will happen with some paraphrases in programming languages over time. After some years, developers talk about them so fluently, as if they would be a natural part of the language, although they never were. And the ones, which are too clunky and complex, simply will not get adopted and be forgotten after a little while.
Juten Tach,
caution: rant ahead!
I am currently sitting in the middle of an emotional triangle of
- being in the midst of developing a website
- having seen this talk from Bret Victor about “having an immediate connection to your creation”
- having seen this talk from Ethan Marcotte about Responsive Web Design
And the sum of these impressions for me is frustration.
For the last decades we have seen technologies in the broad field of multimedia (including the web) explode. Nowadays we have HTML5, CSS3, WebGL, Flash, Native Apps, Native Desktop Apps, Sandboxed Desktop Apps and a bunch of more stuff at our fingertips. The limitations on what we can build are getting narrower and narrower. Of course, we have to look on performance here and there, of course we have to deal with limitations some environments put on us, but if you compare the current possibilities to what we had 10 years ago, it’s like we’re in multimedia heaven. Or isn’t it?
Problem is, on a creation level, for me it still feels like 10 years ago or even more. Of course, we have fancy editors now with syntax highlighting, for some parts, we even have refactoring tools. But all these editors make the problem even more apparent in my view. We are having a huge gap between our creative ideas and the real result. And it is growing every year, it feels. Just look at how many technologies todays web developers can choose from or even have to master at the same time. It is not just HTML, CSS, Javascript. It is also the browsers, it is the various javascript libraries, the css frameworks, minifiers, boilerplates, grid systems, the build scripts, the CSS enhancer languages, languages that build on top of javascript or compile into javascript. Not to mention the new kids like WebGL, Web Workers (and the new paradigm this introduces) and so on.
Don’t get me wrong, i love all of this. It is exciting and if you start to dream about what incredible things we can build with these, it is taking my breath away. But this complexity has a bad side effect: It is not possible to master all of these fields (except for some few geniuses who do, but unfortunately the most of us are pretty much average, aren’t we?!). Which is OK you might say, so there can be experts in every field. But every expert introduces another layer between the original creator (or author or thinker, etc.) and the actual result. And every layer most naturally always also functions as some kind of filter, taking just some tiny bit of idea away from the original, even if it is unintentional. Still the result can be stunning and innovative. But in too many cases it is not, because too much of the idea gets lost along the way of briefings, meetings, static photoshop layouts, concept documents and false or incomplete interpretations of the experts.
For an example, just have a look at the content industry, like magazines, news sites and so on. Go to their website or look at their tablet apps or mobile apps. The majority of their content is text, some images and sometimes a video. Every once in a while they feature an “interactive experience”, which gets promoted highly then. But most of the time, they have some standard templates with text and images. And who would want to blame them for it? It is extremely costly to produce highly interactive and dynamic pieces of content. Many work-hours have to be put into such a thing. Many people from various fields are needed. It is simply no possible to do that for every piece of content.
And why? Because we are lacking the tools to do it. Heck, the web is 20 years old and we’re still hacking html code into text editors. In order to build some piece of web content, we have to mentally compile at least three languages (HTML,CSS, Javascript) and imagine, what it will look like, then type everything into the editor and then look at the result. Of course this is nerdy and cool and we feel like we’re in total control, but let me tell you: It is bullshit. It is a massive waste of time. The computer should be doing most of this and let us concentrate on thinking and articulating, how we want things to look and behave in the easiest and fastest way.
Instead we’re seeing an ever increasing gap between an explosion of new technologies and features and a just moderately evolving field of tools, that should help us using those technologies. Just think about it: What is the biggest innovation in tools, that you have seen in the last 10 years, when it comes to developing websites? And i am not talking about libraries, frameworks and the like, i am talking about tools! Here are some, that come to my mind:
- firebug (and the respective tools in the other browsers)
- sort-of-sometimes-working code completion for HTML, CSS and Javascript
- REPL
You probably know some more, but the fact is, it still pretty much comes down to manually hacking code into a text editor and then testing, what comes out of it. I remember, that sometime in the 90s, there where these WYSIWIG editors, like Frontpage, Dreamweaver and so on. But they produced ugly code and even today everyone i know, wouldn’t think of using these tools.
I think, if we really want to move forward with all these new possibilities, we need better tools for creating multimedia user experiences. As hard as it might sound to some of the experts, i think we need to get rid at least of some of the layers between the creator and the result to come closer to the creative ideas again and to be able to spend less time and money on the creation itself. Only better tools can make that happen.
Juten Tach,
I’m working quite a lot with HTML / CSS / JavaScript these days (wonder why …). Sometimes, you want to build a component completely through JavaScript. For example, you might want to build a component, that uses the canvas, where you draw things. That component has a JavaScript function object (some sort of class) and the canvas element.
Now, I thought, I would like to style this component with CSS. Problem is, since I am using a JavaScript / Canvas component, CSS cannot affect my drawing on the canvas, since this is done through JavaScript. Still, I would like to define things in CSS.
After digging a little bit, here is my solution (in a little example):
First, in my HTML page I have a simple canvas element with an id “myCanvas”. Since I am using jquery I use this little on ready function:
<script>
$(document).ready(function(){
var myComponent = new CanvasComponent($("myCanvas"));
});
</script>
OK, so this instantiates my JavaScript component object an passes it a reference to the respective canvas DOM element.
Next, I define the CSS, that I would like to have for my component. Note, I do not necessarily define css for the canvas element itself, but rather css for what I will do on the canvas. Sounds weird? Bear with me.
canvas-component {
background-color: #cacaca;
line-height: 2px;
}
Ok, let’s see. First of all, you notice, that the selector says “canvas-component”, which is not a known HTML tag. But that’s OK, because HTML5 allows for custom tags officially. Second, the style attributes are not meant to affect the canvas directly, as I already said. I declare styles, that I want to use later in my drawings on the canvas. There is a little downside: unfortunately you cannot define your own custom style attributes here, because the browsers will ignore them, so you have to use the best next existing attribute, that comes close semantically. For this little example, I just choose a background-color and a line-height.
Now all we have to do, is bring my JavaScript component and the style declaration together. I do this in the constructor of my JavaScript component object:
function CanvasComponent(canvas) {
this.canvasElement = canvas;
this.styleClass = null;
// Some IE use 'rules', other browsers mainly use 'cssRules', which is official
var allCSSRules =
document.styleSheets[0].cssRules
|| document.styleSheets[0].rules;
for(var i = 0; i < allCSSRules.length; i++) {
if(allCSSRules[i].selectorText == "canvas-component")
this.styleClass = allCSSRules[i].style;
}
alert("line-height: " + this.styleClass.getPropertyValue("line-height"));
}
So, as we can see, in document.styleSheets we have an Array of all the different embedded or loaded stylesheets. In my example, I have only one stylesheet declaration as an external file, that’s why I can use document.styleSheets[0]. Within the stylesheet, there a many rules, of which one is the rule, i have printed above. We have to find it manually, since the DOM API does not provide any functionality for that. So i go through all the rules and search for the selector “canvas-component”. If I find it, I save it. And now I can access the declarations via <code>getPropertyValue()</code>, for example. There are other functions as well, but this one is probably the most useful one.
Now that I can access the declaration, I can use them in my canvas drawings. For example, when drawing a line, I can now set the thickness of the line according to the line-height from my CSS, or if I draw some big background rectangle, I can use the background-color from CSS.
Well, that’s it, perhaps that comes in handy for you some time.
Juten Tach,
should you be scratching your head like i did, when trying to understand, how you would add an event listener to simple DOM elements in GWT, here’s how i do it currently:
Element myDOMElement = Document.get().getElementById("someDOMElement"); Event.setEventListener(myDOMElement, new EventListener() { @Override public void onBrowserEvent(Event event) { // TODO Do crazy stuff here } }); Event.sinkEvents(myDOMElement, Event.ONCLICK);
Note the last line here. Only once you’ve called sinkEvents(), do you really get the events for the particular event type(s).
I find this much more usable, than the nasty Event.addNativePreviewHandler() method, that they talk about in the GWT documentation, because you only get the event, you’re interested in.
In general it appears to me, that GWT is more geared towards using their components (or widgets), than working with the DOM directly.
Juten Tach,
another project just went online this week, in which i was involved: Drive and Seek – The Prologue. Together with Harald, who was the lead here, we were responsible for the development. I took special care of the interface to facebook and the customization features of the end video, in which you can put your own picture either by uploading one or via webcam.
It was a fun project, going for a about a month.
What did i learn? First of all, i have mixed feelings about robotlegs. I like the DI part, but i cannot get used to these top-down mvc structures, which seem to put too much emphasis on infrastructure and too little on conceptual entities. I have to admit, that robotlegs technically does not tell you how to structure your application, but the best practices documentation does promote the approach of using mediators, commands and so on and tying it all together via bunch of events. This sounds all nice in theory, in practice for me, it is too technical and does not reflect the individual, conceptual relations of the components and modules i like to build. But this is stuff for another post.
I do like the Facebook API, although its documentation leaves a lot to be desired. The JavaScript SDK is nice and after fighting with the Facebook ActionScript library initially (couldn’t get it to initialize reliably), i soon abandoned it and used the JavaScript SDK directly via ExternalInterface.
