The inner workings of Edge

Adobe Edge relies heavily on three related technologies: HTML, CSS, and JavaScript. There are also specific JavaScript libraries that play an essential role in making all of this work together. These include jQuery and the Adobe Edge Runtime. In order for Edge content to work successfully, all of these components must be in their correct place, and there are certain files which should not be edited once generated by the application. The Edge application itself also requires an .edge file type to be present in order to author and edit a project.

Note

Note that any .html file can also be opened up within Edge and be worked upon. An .edge file and associated imports will be created upon saving and publication.

HTML, CSS, and JavaScript

Edge primarily targets HTML for display, supported by both CSS and JavaScript. Why? Well, the fact is that these technologies have finally become capable of handling rich motion and interactive content and as they are the core technologies of the web, it really only makes sense to use them whenever we can.

Let's have a quick look at these three specifications in light of their primary function on the web and relation to one another.

HTML

Hyper Text Markup Language is the core of the web. With the HTML5 specification (still in draft), we not only have an organic evolution of the language through additional semantic tags, but also a new set of APIs, which can allow elements within the documents to be greatly influenced through JavaScript.

CSS

Cascading Style Sheets determine to a great extent how a website is visually structured and designed. With the CSS3 specification (still in draft), designers can also be used to influence the way certain elements behave.

JavaScript

The JavaScript language is a superset of ECMAScript (ECMA-262) Edition 3, formalized by ECMA International, a worldwide standards body. The latest version of the language is JavaScript 1.8.5 but the real improvements in recent years have come from the browser manufacturers themselves, as they seek to improve JavaScript execution through the development of faster JavaScript engines.

When we look into an HTML document produced by Edge, we see the following:

<div id="stage" class="EDGE-937066003">
</div>

This is the Stage Symbol element within which all other elements are injected upon runtime, through the use of JavaScript libraries.

Note

Note that this is the only HTML element you will ever see produced by Edge. Everything else is handled via JavaScript Object Notation (JSON) objects and specialized JavaScript includes.

How jQuery is used in Edge

It is no exaggeration to state that jQuery is the most popular JavaScript framework in use today. Many similar JavaScript frameworks arose in 2007 with the emergence of AJAX (Asynchronous JavaScript and XML) and more dynamic HTML data transfer methods. At one point, there existed over 250 of these frameworks, but with the passing of time, only a handful remains in active development.

As stated on the project website, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. In a nutshell, jQuery aims to make JavaScript more tolerable, more consistent across browsers, and more powerful in its simplicity. Documentation for jQuery can be found online at http://docs.jquery.com/.

Adobe Edge leverages jQuery and builds upon it within the "Adobe Edge Runtime" and also makes use of the jQuery library when dealing with motion. When opening any HTML generated by Edge, we can see these includes in the head of our published document.

Note

Note that other Adobe products, such as Adobe Dreamweaver, also make heavy use of jQuery. In fact, Adobe actively contributes back to the jQuery and jQuery Mobile libraries.

JSON

JavaScript Object Notation is a data-interchange format used to exchange data from one system to another. Over the past few years, it has been adopted by a variety of languages and systems for both data transmission and storage. In some ways, it is very similar to XML. Unlike XML, JSON is not a markup language but rather stores data in objects and structures represented in name/value pairs.

Edge uses JSON to store element definitions and attributes with a project. For example, the following JSON fragment represents a red rectangle on the stage:

content: {
dom: [
{
id:'Rectangle',
type:'rect',
tag:'div',
rect:[117,56,185,185],
fill:['rgba(192,192,192,1)'],
stroke:[0,"rgba(0,0,0,1)","none"]
}],
symbolInstances: [
]
},

To learn more about JSON visit http://www.json.org/.

The Adobe Edge Runtime

The set of JavaScript libraries used in an Edge project is collectively referred to as the "Adobe Edge Runtime". Normally, when we think of a runtime, we are talking about a piece of software such as Flash Player, the Adobe Integrated Runtime (AIR), or the Java Runtime Environment. These are all self-contained pieces of software that enable the playback of applications and other content, which targets these specific runtimes. The Adobe Edge Runtime is very different in that it is a set of files that supports the content defined through the Adobe Edge application, but even these libraries rely upon another piece of software for them to run properly: the web browser.

If you look within an HTML file produced by Edge, you will see a JavaScript include, which handles the runtime libraries included within the head of that document.

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="BasicEdgeProject_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->