Webble World 3.0

Abstract

Webble World 3.0 is the latest and most advanced and accessible of the meme media implementations, which allow users to fully participate in the process of building the next generation of the Web. Allowing the users of the World Wide Web to design and develop interactive building blocks for wrapping web resources, which then anyone may combine and use in any way imaginable. One important goal is to put the mainly passive web user in the driving seat and with this tool make him or her feel empowered to actively engage in building the web of our shared need and joy, but also to attract skilled web developers to work in a more modeled and collaborative environment.

1 Introduction

Webbles are based on the philosophy of memes [3, 4], that every thought and knowledge shared by humans may collide with other thoughts and knowledge and then reproduce or mutate, all in favor of survival and adaptation. The meme is a paraphrase which is supposed to make us see that human knowledge and cultural expressions are like genes in the way they evolve.

1.1 IntelligentPad

The idea of the meme has stimulated the research on how to make human digital knowledge fit the meme description so that creativity may easier spread, evolve and enhance in a shared environment. One of these attempts was done by Tanaka and his group at Hokkaido University which gave us the theoretical as well as the practical creation of the IntelligentPad [1, 2, 5–7]. The purpose of this IntelligentPad, this meme media, is to work as smart containers of digital knowledge that may freely be connected and disconnected in arbitrary ways to form any imaginable compound object. Such an object can be anything digitally available in a computer today, from simple web blocks of images and textboxes to more complex gadgets and even full featured applications.

1.2 History

During the 1990s several IntelligentPad implementations were made, even one developed by the Japanese company Fujitsu. The latest were developed in the early 2000 and goes by the name ‘Plexware’ and is still in use in some commercial projects in Japan. All these systems were limited to desktop pc only though and possibilities to share pads were very limited.

In the beginning of 2008 began the development of a new type of IntelligentPad system that would be accessible online via an ordinary web browser. The end result saw the light of day around 2010, now under a new name called ‘Webble World’ and the pads were now Webbles. This version was developed using the early version of Microsoft Silverlight and required a free browser plugin provided by Microsoft to work. But it was very powerful in comparison to previous versions, especially when it came to form, shape and design of the individual Webbles.

The Silverlight plugin evolved and increased in power so in order to keep up, in 2012 Webble World 2.0 followed, and soon thereafter 2.5, together with a wide range of Webbles to help users and developers to create tools, games and web applications. This version is still available and actively used, though no longer maintained and improved upon.

But the Silverlight plugin had many faults. The first and foremost problem was the fact that it was a plugin and required users to install it before Webble World could work, something which could not be done satisfyingly on Mac, not at all on Linux and never on smart phones or tablets. Alongside with that, Silverlight became less and less maintained by Microsoft and the eminent feeling that it would be deprecated became more and more apparent to the community of Silverlight users.

Therefore in the summer of 2013, the development began to solve all these problems, by creating a new version of Webble World, version 3.0.

1.3 A Webble Under the Hood

Before getting into detail of what Webble World 3.0 is and what it can do, let’s clarify what a ‘Webble’ really is.

The Concept. A Webble is the latest-generation Meme Media object, available inside a web-browser. It can be developed by a programmer within ordinary software development restrictions. When it has been deployed to the web it can be downloaded into the browser via a specialized web site by any Internet user together with other Webbles and combined together to form new compound Webbles which the user can configure so that they may solve some tasks, or present some content the user wants to share. Many such compound Webbles can also be combined as a larger and more complex Webble application. Webbles evolves step by step every time it gets reused and republished. Advanced web application development can be done, without additional programming, directly in the browser with these building blocks of ‘meme Lego’, called Webbles [8–10].

The Design. The Model-View-Controller structure is an essential part of the internal design of the Webble and fully supported by current (latest) implementation. In the previous version this was implemented by creating a separate model-module which was more a virtual model than a real one, while in this version we exploit the natural design of the AngularJS framework we use (see Sect. 2.2 – Client Side) which separates the controller into a JS-file (named controller.js) and the View which, naturally, is the HTML file (with support of CSS) named view.html. The model is the internal variables and the core code which the system inserts in each Webble, with main focus on slot management (see below).

A Webble can be or contain anything its creator wants, but in order to be called a Webble there are two things it must be able to have; relationships and slots.

Parent - Child relationship is how you structure the Webbles together. A child can only have one parent but a parent can have unlimited children.

Slots are where a Webble store its properties which can be configured and shared. The name slot is pointing out, that the outside world and other Webbles can plug into the value for various purposes (Fig. 1).

Fig. 1.

Simplicity is the main focus in Webble design

With these basic features the Webble can be used to create complex applications within Webble World.

2 Webble World 3

Webble World 3 is a web-based federation of Webbles, which comes as building blocks, software tools, applications and entertainment widgets that can be used, configured, combined, altered, disassembled and improved etc. by any user at will.

2.1 Main Features

What we want to achieve with Webble world is a platform where users finds software, tools and interactive data the same way one would “Google” for information today. But also, within the same environment, allows the user to add, build, change and improve upon the system and the repository, with minimal skill-requirements. By the power of re-usage and shared resources, as well as the Webble’s power to wrap most web content we hope that web apps can be built at a much more higher rate and less effort and also by ordinary people with little or no programming skills.

As a developer one can interact either by building core Building blocks (known as templates) with traditional web scripting, directly in the browser, or by building Webble software with the Webble World Interface by combining and configuring those mentioned building blocks with no scripting or programming.

Webble World has high focus on sharing and collaboration, in order to make each piece of development faster and easier.

Webble World 3 runs everywhere, without any plugin or installation, directly in any browser of your choice and on any device you currently use. Webble World also use secure transfer with SSL and https, making everything you do in Webble World as safe and private as basic online communication can be. An additional supportive security feature within the site itself which we call ‘Trust’ [11] allows users to create a circle of trust in order to safer control which Webbles to use. Sharing is a key element of Webble World, but sometimes one would like to know where specific Webbles come from and who you collaborate with. Higher security and trust-like features have been a request from previous possible industry partners whom have considered using our system for some of their software development.

We believe that with the Webble World approach to software development and user’s self-improvement and configuration possibilities we minimize the distance and bridge the gap between traditional users and trained developers to eventually make them one and the same.

2.2 Under the Hood

Webble World 2.5 and earlier versions were dependent on the Silverlight plugin and Microsoft technology to work but the new version has been developed in order to, as far as possible, eliminate any form of 3^rd party dependencies and limitations by using the most open, free and standardized technology available.

Server Side. The underlying technology and engine which drives the system of the Webble World server is built with node.js (a JavaScript syntax developing language for server side development). All data managed by the server, like Webbles and users etc. are stored and managed with mongoDB, a very fast non-SQL document database engine.

By choosing node.js and MongoDB the server side is extremely easy to maintain and scale up, as well as to deploy and replicate on any machine with any OS, which is why these particular technologies were chosen, even though others were considered.

For most people this information is completely irrelevant though, since there is no need to set up your own server. All Webble development is done on the client side via the Webble World site deployed by Hokkaido University.

Client Side. Webble World 3 is all HTML5 driven. With ‘HTML5’ we mean a combination of latest HTML, CSS3 styles and JavaScript.

The main work horse is a JavaScript library called AngularJS, developed by Google which is the nerve system of our creation and the key part to the MVC structure. JavaScript is powerful, though unruly, but with AngularJS, one gets much more structure and control. AngularJS may be seen as 3^rd part library of course, but it is deeper embedded and Webble World is not dependent on future changes of the library outside our control, like was the case with MS Silverlight. AngularJS was not the only framework considered initially, but it was by far, the most powerful and innovative as well as user-friendly once the basic foundation of the framework was understood.

As a Webble template developer, one is not demanded to use AngularJS, but it will definitely empower and simplify your coding. One of AngularJS major strengths is the genius separation of the DOM and the application logic. Tutorials on how to master AngularJS may be found online. Webble World also fully supports JQuery for those who are familiar with and fond of that library. Any other JavaScript library or code that exists can be added and used in individual Webbles at the discretion of the developer. No limits.

All configurations and current state of a Webble is stored as JSON data. This is the main file for any Webble because it tells us how a specific Webble is glued together and what parts it needs. The choice to use JSON was primarily made due to its natural connection with JavaScript, node.js and MongoDB. XML was also considered since previous Webble implementations had used it, but was eventually regarded slower in parsing and larger in transfer-size in comparison.

2.3 Core System Description

The features available in Webble World aims to help people design and create their own web experience and tools and easily share it with the rest of the world, all with a minimum of advanced computer skills. Below follows a description of how that is pursued and achieved.

Server Side. There is little one need to know about the server since all its work is automated and all its needed interfaces are moved to the client side, but among its tasks is of course to manage and maintain all Webbles in the system. It also keeps track of individual user’s all specific connections to its accounts, groups, Webbles, Workspaces etc., all which is managed via the client or automatically by server-side sensors.

Client Side. When the Webble World 3.0 web site is first loaded the user see a blank work area with a top main menu. In the top right corner, the user can register and/or login, which is a requirement before one can create and save one’s own Webbles, but not needed for just loading and using Webbles. User accounts can also be linked to social media accounts for easier access and future interaction and sharing of Webbles to the outside world.

The top menu has five sections; Workspace, Webbles, Edit, View and Help, where Webbles and Edit are the most important. Under ‘Webbles’ the user can open the Webble Browser where one can search for Webbles for specific purposes, like text Webbles, Image Webbles, Chart Webbles, Window Webbles etc. The search is conducted upon key words, names, descriptions and developer. When a Webble of interest is found the user can load it into the work area via the load button or drag and drop its image (Fig. 2).

Fig. 2.

The Webble Browse and search interface.

Webbles may also be loaded directly as JSON files from the local computer or remote servers, without using the Webble browser, if such files exist.

When one or more Webbles have been loaded, the user can begin to interact with them. There are basically two ways of Webble interaction available.

One is the most obvious, by using the Webble, its intended way as we are taught by previous web software experience, meaning select something in a list, press a button or type text in the text box. This is the common way of interacting with the web with or without Webbles and the result of such interaction depends on the Webble. This approach would be the way to go if one is looking for a specific tool or application and have found such in the Webble browser and now intend to use it as declared.

The other way is to edit, configure and combine the Webble in order to create a new tool or web application, one that maybe does not yet exist in the Webble browser or, one that could be made much better. To do so the Edit part of the main menu will be of use, as well as the Webble’s own menu, and if the Execution mode of Webble World 3 is set to ‘Developer’, which is recommended, also by the use of the Webble attached interaction balls, activated by double click.

The common workflow when creating a new Webble by configuration and combination of existing Webbles is to load the required Webbles into the work surface and then save it as a personal workspace.

A workspace can be saved and loaded via the Workspace section in the menu and will contain those Webbles included by the user. A workspace helps the user to separate Webble projects and applications in personal and private setups and for easy access during development. A workspace can also be easily shared with other Webble users, for collaborative development or real time communication. Changes to a workspace are immediately communicated to all other users in real time. Using a workspace is not required but it simplifies the work, especially when one is working on several Webble projects.

Webble Configuration. As the requested Webbles are loaded the user can begin configure and shape it to his/her current need and also combine them accordingly. For that the ‘Edit’, Webble pop-up menu or Webble interaction balls are invoked (Fig. 3).

Fig. 3.

Webble World 3.0 web interface, with a few different Webbles loaded.

Besides the self-explanatory Webble interactions like ‘Delete’ and ‘Duplicate’ the user can edit the Webble properties or slots via the ‘Properties’ form. There the user can alter any slot value available for wanted effect. Some control the inner logic, while others control the appearance.

If the Webble lacks a slot according to the user, he/she can then add one or more custom slots. There are three types of custom slot available. Either a basic value slot which only has a name and a value (of any type), or a CSS related slot whose value will affect some part of an element of the Webble, or the final one which is called a merged combo slot. A merged combo slot is a slot which carries the values of two or more other slots in one container. This is useful when a Webble needs to communicate several of its values through the chain of relatives. For avoidance of complex connections which is hard to oversee and follow, Webbles can only communicate one slot value to each Webble it is related to. A lot of the time that is sufficient, but in some cases one need to communicate more values, and then the possibility to create a single slot that holds multiple values is very useful.

In order to be able to communicate slot values between Webbles they need to be related in a parent child connection. That is easily done via the Webble menu and a mouse click. When a Webble is connected with another, the user can configure slot communication between them via the child Webble. Via the Webble menu one opens the slot communication form and there select what slot value in the parent and what in the child should communicate and in what direction. If a combo slot is used one can also channel the internal slots of the combo. Many Webbles have a default slot communication that gets enabled as soon as a relationship is created, this is to simplify and speed up default behavior, but the user can change that easily via the Webble menu.

There is another form of relationship and communication available as well which is called ‘shared model duplicate’. When that is selected in the Webble menu a duplicate is created of the selected Webble which is not related as a child or parent but still share all its slot values with its origin. In the properties form the user can enable or disable which slot values should be shared between shared model duplicates, but the default is all, except position. This feature is not that commonly used but can be very powerful at times (Fig. 4).

Fig. 4.

Load Webbles, configure its slot properties, connect to other Webbles and configure slot communication. Building a paint web app without any code in 15 min.

These fairly simple steps are all it takes; slot value editing, perhaps adding custom slots, parent child connection and slot communication configuration, and perhaps a shared model setup. By using these techniques via simple mouse operations and straight forward keyboard inputs the user can create any complex application or Webble Widget for any type of use (regarding that there are proper Webble templates available).

Webble Deployment. When a Webble is finished, content and behavior wise, the user may want to package and polish the Webble before it is published online. One way to do that is to enable a set of protection flags on the Webble in order to adjust the Webble for its intended use. Such things like locking a Webble from being moved or deleted or showing popup menu can be an important part of getting the Webble to be more user-friendly. The user can also wrap all the contained Webble templates in a bundle in order to hide the internal parts of the Webble. The Bundling process also allows the user to select which slots should be visible and usable from outside to those who load the Webble.

Since Webble world is an open collaborative environment, any protection flag or bundling can always be undone by any other user who wants to experiment or understand the inner workings of a Webble, but for those who do not care for that, they will find a bundled Webble to be much more accessible and user-friendly and easy to use.

The last step is of course to publish the Webble to the online server for others to find in the Webble browser. That process is as simple as all previous ones. Select Publish in the Webble menu, fill in some descriptive data about the Webble to be easy to find and make it look tempting to use and click the submit-button and a second later the world can rejoice in the latest Webble crafting available.

User Management and Support. The user account allows the user to be connected and anonymously identified as the developer of the Webbles he/she have created. It also helps in collaboration between other Webble users as well as in sharing of ones work. The Webble user account can be connected to other social media sites and simplify login and prepare for sharing of posts and Webble updates, though the latter is not fully implemented yet.

An important security feature of Webble world is the concept of groups and trust. Groups are organizations, companies and such which can have additional sub groups which users can join and be a part of and use as a platform which through Webbles are shared and published from. This makes these Webbles not only the responsibility of the developer but also a responsibility of the group. Groups are created and controlled by appointed administrative group managers and not by every user. Users can then select a group and mark it as ‘trusted’, in order to help the user to select safe and trustworthy Webbles when using Webble World. Trusted Webbles are highlighted in the Webble browser for easy search and Webble World will clearly show and warn the user when a Webble which originates from an untrusted source is present in a Webble compound [11]. Groups also allow member users to share API keys and software licenses used within that group’s Webble development.

In the help menu the user will find manuals, support contact info, FAQ and development packages which contains all needed references and information for any form of Webble development and Webble template creation. There is also a real-time chat available for direct access to other users currently online for fast response and community shared support.

Webble Template Development. In order for Webble World to be really effective and useful for the average Web user there is a need for having many basic Webble building blocks available in the Webble browser, so called Webble templates. These are the smallest parts, the atoms, of Webble World, and they are created with code. One cannot directly see the difference between Webble templates or a compound Webbles in the Webble browser, but the basic concept is that a template Webble is a non-configured and non-combined Webble who cannot be broken apart into smaller parts. It has only been created with ordinary web scripting using JavaScript, CSS and HTML.

Template Webbles are created by web programmers inside the Template Editor section of Webble World, either from scratch or by creating a base foundation from an existing Webble.

Anyone that knows basic JavaScript and HTML can create their own Webble templates, and with the help of the carefully commented default code that is auto generated with each new Webble created and the downloadable reference and development support package, it should be fairly easy for most to learn how to master the process. Users can also benefit from other developers work by creating a template copy based from an already existing Webble, via the ‘About’ section in the Webble menu. That will minimize the risk of reinventing the wheel as well as making sure Webbles evolve in a more natural way.

In the Template Editor the user can then write the necessary code for the Webbles to be created following the simple guidelines. When a Template is saved it can be loaded into the work surface via the top menu as a ‘sandbox-Webble’, a Webble which is not yet published and only available to the template developer. A sandbox Webble can still interact with any other Webble the user chose to load for testing and debugging. When the template feels finished and working, the user publish the sandbox Webble the same way he/she would publish any other Webble and make it available to the world in the Webble browser.

In the earlier stages of Webble World 3.0, it will be more common that Webble users will find that the Webble template they need is not yet created, and that is when a new template hopefully will be designed and added, so that future users will less and less often need to include some template development within their Webble project.

Personal Investigation and Webble Application Examples. The best way to fully understand the content of this paper is of course by personal experience and by visiting Webble World 3, and maybe also the older previous version of 2.5, and load interesting Webbles that tickles ones curiosity and use them and maybe even break them apart to see how they were put together.

Since the new version is still very young it does not yet has a large amount of Webbles, especially of the more complex kind, but such can be found and experimented with in the 2.5 version just for reference and understanding. There are all form of widgets, applications, editors, tools and games available; all accessible online by googling Webble World (Fig. 5).

Fig. 5.

A multiple range of applications created for Webble World 2.5, soon also in 3.0

When one is ready to start developing one’s own Webbles, one will quickly notice that the time needed to create a Webble application in comparison to a traditional Web- or desktop application is highly reduced, and the more stand-alone parts that becomes available the quicker the development will be.

3 Summary

Webble World 3.0 is a web top development and visualization tool based on meme media architecture that view all web content and its peripheral infrastructure as standalone objects which can be manipulated, rearranged and personalized as easy as one would edit a text document with basic mouse operations and simple keyboard inputs. It is available online, open and free for anyone who wants to try, individuals or organizations, at the following web address: https://wws.meme.hokudai.ac.jp/.

Webble World 3.0 aims to make software application development a more globally shared effort that involves people also outside the realm of programmers and to minimize the time and workload of making software due to the capabilities to adapt, adjust, modify and combine freely already fully working and available building blocks.

Webble World 3 is reaching to bridge the distance between those who use the web and those who develop it and make them work closer together in a worldwide collaboration between both friends and strangers, and maybe even making them become one and the same.

The current version of Webble World is designed based on a combination of original theoretical concepts of IntelligentPad and Meme Media architecture, modern web technology practices, frameworks and libraries together with unofficial user queries. No official user survey has yet been done for any version of Webble World.

Software users have often been very frustrated of the fact that they are in the hands of developers who do not fully understand the need of the user, and developers are often forced to develop systems they do not care for, just because they have programming skills. With Webble World 3.0 we believe that much of that frustration can be cured. Those who have the skill for coding can write the building blocks and templates that tickle their interest, focusing on the technical details and narrowed down problem of their fancy, while the classic software users can then on their own put together their own personal applications, tweaked and configure exactly as they want without having to learn how to write computer code or sit in long development meetings trying to communicate a vision they already see so clearly.