Plaintext
Technical Disclosure Commons
Defensive Publications Series
July 27, 2017
Zero-JavaScript Stateful User Interface Framework
Matthew Steven Frisbie
Follow this and additional works at: http://www.tdcommons.org/dpubs_series
Recommended Citation
Frisbie, Matthew Steven, "Zero-JavaScript Stateful User Interface Framework", Technical Disclosure Commons, ( July 27, 2017)
http://www.tdcommons.org/dpubs_series/608
This work is licensed under a Creative Commons Attribution 4.0 License.
This Article is brought to you for free and open access by Technical Disclosure Commons. It has been accepted for inclusion in Defensive Publications
Series by an authorized administrator of Technical Disclosure Commons.
Frisbie: Zero-JavaScript Stateful User Interface Framework
Zero-JavaScript Stateful User Interface Framework
The JavaScript language was created so that web pages could become dynamic.
JavaScript allows for nearly unlimited extensibility in terms of making web pages do pretty
much anything a developer can think of. JavaScript is an interpreted language, which means that
code sent to the browser is executed as the code is delivered to the browser (instead of being
compiled beforehand). This may be slow, and may cause web pages to be bloated because
developers included too much JavaScript. This document discusses a solution to provide some
of the functionality of JavaScript without using JavaScript.
Without using JavaScript, a developer had difficulty creating a piece of a web page to
maintain state, for example, the ability of a web page to remember and reference previous
behavior and information. State may be useful in the context of a user interface. For example,
using HTML and pseudo-JavaScript, a developer may create a button and a box.
<button></button>
<box visible=false></box>
The initial state of this system (when the page loads) is that the box is hidden. The
developer may wish to make this system stateful by making the box visible when the button is
clicked. With JavaScript, a developer would add a click listener to the button, and a click
handler that executes when a click happens to change the visibility of the box.
var button = get('button')
button.onClick(function() {
Published by Technical Disclosure Commons, 2017 2
Defensive Publications Series, Art. 608 [2017]
button.visible = true
})
The above example is a stateful system. The example uses a click input by the user to
transition from the first and initial state, to a second and final state. For a system to be stateful,
there should be some store of information that maintains the state. This information store can
take many forms and should be writable. In this example, the writable state is maintained inside
the button element, which has a visibility property that may persist through the lifetime of the
page. This document discusses a solution to creating a stateful user interface without the use of
JavaScript. This solution may be useful in serving advertisements, where the format and content
of what an advertisement provider may place on publisher pages may be limited. May other uses
existed outside of the advertising space where a developer wishes to have a lightweight, stateful
web page without using JavaScript.
To create a stateful web page without using JavaScript, it may be helpful to provide an
example definition of stateful. For a user interface to be stateful, the user interface should be
able to be represented and act as a “finite state machine.” A finite state machine may have
several requirements for a user interface finite state machine.
The state machine should have the ability for the system to assume different states. A
finite state machine may only exist in one state at any given time. The state machine should
have the ability to recognize what state the system is in, and to project that state onto the user
interface. The state machine should have the ability to transition between states based on some
outside input. For the purposes of web environments, this may relate to “click events,” which
may be individual clicks of a mouse, touches on a screen, voice input, or any other similar input.
http://www.tdcommons.org/dpubs_series/608 3
Frisbie: Zero-JavaScript Stateful User Interface Framework
A developer should be able to represent a user interface as a “state diagram.” In some instances,
the state diagram may not have an output. Instead, the output may be the user interface
changing.
Click events may be an input that will change the state of the system, and a developer
should have a way for the system to “remember” that a click occurred. Browser click events may
be transient. For example, if a user clicks a certain part of a page, and there is no JavaScript set
up to detect that a click occurred, the click event will traverse through the page and then be
destroyed. Upon the next click, the browser will have no memory that the initial click occurred.
This is an example of a stateless system.
HTML does have a construct that can hold state, for example, a form. Forms may be used
in various pages throughout the internet for their intended purpose, for example, to collect
information in a variety of forms, and to relate all the pieces of together. Forms may have
various elements that developers may be familiar with such as text inputs, checkboxes, radio
buttons, submit buttons, etc. Many browsers natively support elements.
To create state, the form input elements that may be useful are the radio button and the
checkbox. Radio buttons may be defined to be part of a collection and identified by name. In a
collection of radio buttons, either no buttons are selected, or only one button can be selected at
any given time. Radio buttons are selected by clicking them. Clicking a selected radio button
again will have no effect, the radio button will remain selected. Clicking a different radio button
will change that radio button to be selected, and the original will be deselected.
Checkboxes in a form may be similar to radio buttons, but there is no enforced exclusive
state. Clicking a checkbox will check the box, and clicking it again will uncheck it. Checkboxes
Published by Technical Disclosure Commons, 2017 4
Defensive Publications Series, Art. 608 [2017]
can be assigned to a collection, but clicks on other checkboxes in a collection may have no effect
between each other. Each checkbox may be independently toggled by clicking it.
Although both of these allow a developer to maintain state, the example below discusses
using radio button input for constructing a finite state machine. A “checked” radio button may
represent an active state, and each individual radio button can represent a different state. These
require no JavaScript to operate.
By itself, a set of radio buttons may be considered a finite state machine. However, this
state machine may not be satisfactory for a developer who wishes to have ability to make our
user interface appear in any form. Also, a developer should have the ability for different inputs to
cause a transition to one state.
To set an initial state for both radio buttons and checkboxes, each be assigned an initial
value when the page loads. This assignment may be done by giving the <input> tag a
checked=“checked” attribute. The browser constraints for radio buttons may still be applied.
This allows a developer to set an initial state for the system.
For projecting state, a developer should have a form to manage the state of a system. The
developer may wish to have the ability to use different HTML to construct the user interface.
The developer may use CSS pseudoselectors to project the checked state of a radio button onto
HTML elsewhere, and toggle visibility, animations, and other user interface elements.
The ~ selector in CSS is the general sibling selector. When a selector condition is met, it
allows a developer to apply a style to any element at the same level in the DOM that matches the
defined conditions. The :checked pseudoselector in CSS is a property which is applied when a
“checkable” element becomes checked. This can be used for both radio buttons or checkboxes.
http://www.tdcommons.org/dpubs_series/608 5
Frisbie: Zero-JavaScript Stateful User Interface Framework
With these two CSS tools, a developer may be able to project the state of radio buttons
onto sibling HTML, which can act as the user interface.
<style>
#view1,
#view2,
#view3 {
display: none;
}
#state1:checked ~ #view1,
#state2:checked ~ #view2,
#state3:checked ~ #view3 {
display: block;
}
</style>
/*Click a radio button to change the state*/
<form>
<input id=state1 type=radio name=collectionA checked=checked>
<input id=state2 type=radio name=collectionA>
<input id=state3 type=radio name=collectionA>
Published by Technical Disclosure Commons, 2017 6
Defensive Publications Series, Art. 608 [2017]
<div id=view1>View 1</div>
<div id=view2>View 2</div>
<div id=view3>View 3</div>
</form>
The following images illustrate the three different states of this example.
For transitioning state, a developer should have the ability to interact with different pieces
of the user interface, instead of interacting with the form. This interaction can be accomplished
with the “for” attribute of form labels. This attribute allows a developer to associate a label,
which is an HTML element that can be arbitrarily styled, with an input inside the same form
(associated by the matching ID). Multiple labels can be associated to the same input.
Additionally, clicks on this label may serve as a click on the associated form element.
Therefore, this technique allows a developer to add components inside the views that can
take clicks as inputs and mutate the state of the system. These components, or labels, can be
styled as buttons, menus, anything that a developer may normally do on a web page.
Furthermore, since these labels can act as the inputs, the original radio buttons can be set
to hidden, and the user interface can stand on its own.
http://www.tdcommons.org/dpubs_series/608 7
Frisbie: Zero-JavaScript Stateful User Interface Framework
<style>
input,
#view1,
#view2,
#view3,
#view4 {
display: none;
}
div {
padding: 5px;
border: 1px solid black;
}
label {
display: inline-block;
padding: 5px;
margin: 5px;
color: white;
background-color: black;
}
#state1:checked ~ #view1,
Published by Technical Disclosure Commons, 2017 8
Defensive Publications Series, Art. 608 [2017]
#state2:checked ~ #view2,
#state3:checked ~ #view3,
#state4:checked ~ #view4 {
display: block;
}
</style>
<form>
<input id=state1 type=radio name=collectionA checked=checked>
<input id=state2 type=radio name=collectionA>
<input id=state3 type=radio name=collectionA>
<input id=state4 type=radio name=collectionA>
<div id=view1>
<h2>View 1</h2>
<label for=state2>Go to state 2</label>
<label for=state4>Go to state 4</label>
</div>
<div id=view2>
<h2>View 2</h2>
<label for=state3>Go to state 3</label>
<label for=state4>Go to state 4</label>
</div>
http://www.tdcommons.org/dpubs_series/608 9
Frisbie: Zero-JavaScript Stateful User Interface Framework
<div id=view3>
<h2>View 3</h2>
<label for=state1>Go to state 1</label>
</div>
<div id=view4>
<h2>View 4</h2>
<label for=state2>Go to state 2</label>
</div>
</form>
The following images illustrate the four different states of this example.
Published by Technical Disclosure Commons, 2017 10
Defensive Publications Series, Art. 608 [2017]
Sending GET network requests upon a click may be useful. Browsers may intelligently
load resources once they are needed. One example of this loading is with CSS-defined
background image. Browsers may only load the image once the container the image is defined
for is actually displayed. However, the browser may not know what is and is not an image, and
may silently fail if the request fails or whatever is or is not returned is not an image. Thus, it may
be possible to associate a network request with a particular state by setting the desired request as
a background image URL.
<style>
input,
#view1,
#view2 {
display: none;
}
div {
padding: 5px;
border: 1px solid black;
}
http://www.tdcommons.org/dpubs_series/608 11
Frisbie: Zero-JavaScript Stateful User Interface Framework
label {
display: inline-block;
padding: 5px;
margin: 5px;
color: white;
background-color: black;
}
#state1:checked ~ #view1,
#state2:checked ~ #view2 {
display: block;
}
#network_request {
display: inline;
opacity:0;
height: 1px;
width: 1px;
background-image:url('https://my.network.request?some=information');
}
</style>
<form>
Published by Technical Disclosure Commons, 2017 12
Defensive Publications Series, Art. 608 [2017]
<input id=state1 type=radio name=collectionA checked=checked>
<input id=state2 type=radio name=collectionA>
<div id=view1>
<h2>View 1</h2>
<label for=state2>Go to state 2</label>
</div>
<div id=view2>
<h2>View 2</h2>
<label for=state1>Go to state 1</label>
<div id=network_request></div>
</div>
</form>
The following images illustrate the two different states of this example.
In some instances, the browser may try the network request once.
http://www.tdcommons.org/dpubs_series/608 13
Frisbie: Zero-JavaScript Stateful User Interface Framework
There may be no restriction to having multiple state machines, or a state machine within a
single UI view. Defining multiple forms and UIs inside those forms may be acceptable, and these
forms can be used to define nested and arbitrary complexity inside the UI.
The techniques described above accomplish several goals such as the ability to define a
finite state machine of arbitrary complexity and the ability to build a user interface that accepts
clicks as inputs and can interface with the finite state machine to use these clicks to transition
throughout the system without JavaScript.
The techniques described above may not be limited to uses where JavaScript is not
available. In some cases, where a developer is looking to reduce the JavaScript payload size,
these techniques may be a good option. In cases where better performance is desired, a developer
may use these techniques to outperform JavaScript since these techniques can be accomplished
entirely with CSS and native browser tooling.
Published by Technical Disclosure Commons, 2017 14
Defensive Publications Series, Art. 608 [2017]
ABSTRACT
To create a web page with state, a developer may not be required to use JavaScript. The
developer may be able to use HTML and CSS to create a lightweight web page that can
remember whether a user clicked on a web page or the location of the user click or selection
without JavaScript. The developer may use checkboxes or radio buttons or both to create web
pages with state without using JavaScript.
http://www.tdcommons.org/dpubs_series/608 15