Javascript + HTML5: The Future of Educational Software

   
   
   
   
   

Several months ago, I wrote how to make activity designers happy by making it easier to create simple learning activities using popular software development tools, particularly for the Sugar learning environment. Back then, I concluded that Adobe's Flash player and Flex libraries were the proper tools for this purpose. I was wrong.

flash

Adobe's flash and flex are great tools but they will never form the basis of a thriving ecosystem of open-source educational software. This is because Adobe's flash files are distributed in binary format, an immediate disincentive to sharing the source code.

By contrast, you download the source automatically when you load a javascript + html application. The newest version of HTML, HTML 5, now has feature parity with virtually all of flash's multimedia functionality. Combine this with the exponential growth of javascript user interface tools, continued performance enhancement, ubiquitous run-time and we have a toolset that can transform the world of educational software.

Everybody is reinventing the Wheel . . . Again and Again

I didn't intend to become an open-source educational software publisher, it just happened that way. I got involved in the OLPC project roughly 3 years ago to this date and one of the first requests I heard from kids, parents, teachers, government officials, etc. was for localized learning content tied to the national curriculum.

My colleagues and I at OLE Nepal embarked on a long, tortured odyssey into the world of software development. We landed in the current spot where we develop our learning activities in Flash despite many grievances and I am looking into the distance at Javascript + html5.

At first we were a bunch of volunteers trying to create open-source learning activities, then two full-time programmers, and now a team of 10 full-time staff that includes 6 programmers, 2 graphic designers, and 2 educators. We create our own images, our own layout for presenting activities, our own audio files, and our own work process. Whew! That was a lot of work. We wanted to reuse the work of others but found that there are incredibly few open-source resources available for education and among the great projects that exist, such as Etoys and Gcompris, the communities are small and documentation limited.

Now multiply our little effort times 100 and you have what is happening right now in the world of those creating educational software both proprietary and open-source. Think about all that waste! All that duplication of effort! The ones that really lose here are the learners.

html5

The Big Picture

Educational software would really benefit from broadly adopting tools and practices that enable and facilitate sharing and the openness of content. Using javascript + html5 for learning activities is the first step to creating a healthy ecosystem of activity development. Then we can see the explosion of education-specific tools that will drive the dynamism of educational software just like django, ruby-on-rails, dojo, jquery, etc. have done for the wider web.

A World of Walled Gardens

All these proprietary educational apps and open-source educational packages with extensive system dependencies are in essence "walled gardens." This is because they are only functional under a set of very constrained circumstances and there is very little sharing of tools and knowledge between them. This is true of the closed-source applications because they have no interest in sharing and in the open-source tools because they lack the community resources to maintain extensive documentation and often have extensive software dependencies that hinder sharing component libraries.

We need to bust open this walled-garden by utilizing the universal application run-time, the browser, and using an application toolset that makes it hard not to share your code. That is not say that learning begins and ends in the browser. Rather, I advocate a framework that has basic functionality in a regular browser but can also bind to Sugar's sharing features, the Journal, and run completely offline. Activity developers shouldn't have to choose between Mac OS X, Windows, Gnome, KDE, or Sugar. They should be able to create basic activities and then be able to extend them for a particular environment.

Sugar is not impressive until you witness a large # of people using it together, that is where collaboration and sharing facilities really shine. It is unfair to judge Sugar based on a single-user experience. But this makes it promote Sugar to government officials and school officials since they won't see the wonders of Sugar until after they have committed to it. This also hard to sell it to the handful of under-financed groups creating open-source education activities. They want their content to reach the widest audience possible per their limited resources. For that reason also I promote js + html5. Activities created w/ it can run anywhere but can conceivably do much more interesting things in the Sugar environment.

Keep it Simple and Open

Often when I talk with activity developers, the discussion invariably progresses from creating simple activities to creating complex, immersive environments. Kids and adults don't require immersive 3D environments for learning. Combine very simple animation, audio, and interaction and you can teach/learn almost anything. Most learning activities don't need alot of power and advanced functionality. Grammar games, math exercises, simple animations to demonstrate photosynthesis and cartesian geometry. I advocate a "composition of simple tools" philosophy over complex and inflexible environments.


Simple activities are powerful

I am not saying that javascript and html5 are the only tools you should use to create learning activities. Many activity developers are creating powerful activities with great tools such as Squeak and Pygame. I am simply advocating javascript + html5 as the toolset with the lowest barrier to entry for developers and one with tremendous potential.

There are open-source Flash and flex projects but they pale in comparison to the breadth and dynamism of the javascript community, despite the fact that Flash has been around for a long time. This is because Adobe distributes its flash code in binary swf files that are hard to reverse engineer. In contrast, you get the javascript source by default. It is hard to hide your
javascript code!

Think about how many websites like nytimes, bbc, google have to publish their front-end code (if not back-end) for the world to see if they have no desire to share it! This creates a virtuous circle of innovation in javascript libraries. The same is not true of Adobe Flash and Flex. Please note that I am referring to html5, the newest html standard. Prior to html5, it was difficult to create integrate animation and audio into an html document.

This summer I will start working on a particular framework using javascript and html5 for educational activities, well-integrated w/ Sugar, that I call Karma. In the fall I hope to start working on it full-time depending on my personal resources. If you know of an existing javascript framework for education, please let me know. I would love to collaborate.

Bryan W. Berry is the CTO of OLE Nepal and co-editor of OLPC News.

Related Entries

19 Comments

What? Someone thinking about the thing that matters, educational content?

I thought the whole point of this project was to be a circle jerk talking about how Sugar is a million times leaner than Windows, and complain that Windows is "taking over" even though I haven't seen it outside pilot deployments, and talking about how advanced the hardware is compared to netbooks, even though there's still missing hardware support in the OS, and talking about how great ARM will be because Windows can't compete.

Seriously I wish the best for the application developers, because regardless of the OS or the hardware, THAT is where the educational content is. I like this quote:
"one of the first requests I heard from kids, parents, teachers, government officials, etc. was for localized learning content tied to the national curriculum."

They want learning content tied to the national curriculum. That means they don't want 45 half finished abandoned games, and 16 different student programming languages. They want ACTUAL EDUCATIONAL CONTENT

Trouble is, educational content that results from the political process is liable to vary from "pretty good" all the way to "beyond belief" with no particular bias in favor of "pretty good".

How likely are terrible local standards, resulting from political compromises, to be converted by volunteers into content suitable to the XO?

It takes someone like Barry to admit being wrong. I remember him trying to convince me to go Flash (he almost succeeded), so I feel better now we are back to following an open source option. BTW, anything that is HTML has better chances to be platform-independent, something we need to consider when 4P competition is happening, plus of course easier localization, etc.

Yes John, there's a few, very few, who see that responding to the clients needs is the way to go - most of them hang around this website.

I wasn't too keen on Flash either, given how it isn't fully cross platform, and how much the performance of it sucks (for example a video can easily peg a CPU, while the same video played in an independent player can use 30% or less.

However it seemed like a good idea, as it would be a more compatible platform. Something like Javascript and HTML5 would be that much better because it uses open standards, making it compatible with that many more devices.

If you hope to get governments to buy this thing, they're going to want content to their standards, even if questionable. However with an open learning system, that means there'd be a whole library of other content available.

As near as I can tell, JavaScript and Java are not running on my XO with software build 801.

java does not run on the XO by default but javascript does run w/in the Browse activity.

Author wrote:

"By contrast, you download the source automatically when you load a javascript + html application."


Any sort of functional application will require server-side code, which, of course, you don't have access to through a browser. So, your assumption is completely wrong.

"The newest version of HTML, HTML 5, now has feature parity with virtually all of flash's multimedia functionality. Combine this with the exponential growth of javascript user interface tools, continued performance enhancement, ubiquitous run-time and we have a toolset that can transform the world of educational software."

Not true, either. HTML 5 is the subject of great controversy and very little support by mainstream browsers. Perhaps a few years down the road everyone will be onboard, but not any time soon.

Bottom line: if your rejection of Flash is lack of access to application source code, you are wasting your time: HTML (any flavor) plus Javascript is what you get AFTER the real application code is processed by the server.

Try GMail offline, with Gears. Server-side code is not really needed.

Most of the cool stuff in HTML 5 is already implemented in Gecko and WebKit, the two open source engines that matter. Opera is also on board. Internet Explorer as always is crap, but it doesn't really matter anymore (and there are stuff like ExCanvas).
Look at the Chrome experiments or Bespin.mozilla.com


Java != JavaScript.

The Java logo next to the third paragraph is misleading there. Java isn't even mentioned in the whole article.

So what's the difference, Maniqui? I thought JavaScript is an offshoot of Java, hence my adding that image to illustrate Bryan's post. Or am I missing something?

Besides the name and some syntax (inherited from C), they have absolutely nothing in common.

Okay, then what's the JavaScript logo? Or what's an image that can convey JavaScript?

Here is the logo of HTML 5
http://mauriziostorani.wordpress.com/2008/06/26/html-5-whats-news/?referer=sphere_related_content/

Here are "logos" for Javascript and Ajax
http://contented.it/profile/technologies/javascript/

Some of the online technologies suggested by the article are actually Ajax. But it is rather easy to run a (small) webserver locally to get Ajax on your netbook off-line.

Winter

> I thought JavaScript is an offshoot of Java, hence my adding that image to illustrate Bryan's post. Or am I missing something?

Putting the word "Java" in JavaScript was more of a marketing trick by Netscape to leverage the momentum of Java at that time. The two languages have very little in common.

It's a common misconception. Javascript however has got nothing to do with Java, except for a sneaky marketing ploy and some syntax conventions.

Maniqui, you are correct. Javascript has no relation in Java. It was very helpful of Wayan to add pictures to my otherwise austere post. Do to the shared string "java" it is very easy to confuse the two.

Thank you for this article.

This is the Java logo, no relation with JavaScript.

eLearning XHTML editor:
http://exelearning.org/

The developers are really nice and helpful and your teams might be able to collaborate to efficiently create XHTML/javascript tools and educational resources.

Thanks a lot! I will definitely check it out.

Close