using clojurescript with heavy industrial equipment - yow ......specification techniques screen!...

79
Using ClojureScript with heavy industrial equipment Kevin Lynagh Keming Labs 2015 May 22

Upload: others

Post on 30-Dec-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Using ClojureScript with heavy industrial equipment

Kevin Lynagh Keming Labs 2015 May 22

Page 2: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 3: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 4: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

f(x) = x

Page 5: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 6: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Things you can take home

Page 7: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

(defn hello [name] (str "Hello " name "!"))   (hello "YOW") ;;=> "Hello YOW!"

Things you can take home

Page 8: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

contributed articles

MARCH 2009 | VOL. 52 | NO. 3 | COMMUNICATIONS OF THE ACM 71

Speaking in the strict mathematical sense of power of expression, hierarchy and orthogonality are but helpful ab-breviations and can be eliminated; the hierarchy can be flattened, writing ev-erything out explicitly on a low level, and orthogonality can be removed by taking the Cartesian product of the compo-nents (as in the top of the figure). Thus, these features do not add raw expres-sive power, and their value is reflected mainly in additional naturalness and convenience. However, they also (in gen-eral) provide great savings in size; for ex-ample, orthogonality can yield an expo-nential improvement in succinctness in both upper- and lower-bound senses.3

Incidentally, orthogonal state-com-ponents in statecharts do not necessari-ly represent concurrent or parallel com-ponents of the system being specified. They need not represent different parts of the system at all but can be intro-duced to help structure its state space

to be able to sense properties of a part of the specification in another without worrying about implementation details. I definitely do not recommend having a single statechart for an entire system. Rather, as I discuss later, there will al-most always be a decomposition of the system into functions, tasks, objects, and the like, each endowed with its own behavior (described by, for example, a statechart). In this way, the concurrency occurs on a higher level.

I return now to the two adjectives dis-cussed earlier—“clear” and “precise”—behind the choice of the term “visual formalism.”14,16 Concerning clarity, the fact that a picture is worth a thousand words demands special caution. Not ev-erything is beneficially depicted visually, but the basic topology-inspired graphics of statecharts seemed from the start to jibe well with the IAI avionics engineers; they quickly grasped the hierarchy and orthogonality, high- and low-level tran-

and arrange the behavior in portions that are conceptually and intuitively separate, independent, and orthogo-nal. I emphasize the word “conceptu-ally” because what counts is whatever is in the mind of the person doing the specification.

This motivation has many ramifica-tions. I chose the broadcast communi-cation mechanism of statecharts not because it is preferred for actual com-munication between a system’s compo-nents. It is merely one way to coordinate the orthogonal components of the stat-echart, between its “chunks” of state-space, if you will; these will often not be the components—physical or soft-ware—of the system itself. Broadcasting is a way to sense in one part of the state space what is going on in another part and does not necessarily reflect actual communication between tangible as-pects of the actual system. On certain lev-els of abstraction one often really wants

Figure 2: Explaining statecharts (1984); note the temporal logic bottom right.

This one weird trick Hacker News keeps off the frontpage

Things you can take home

Page 9: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Things you can take home

f(x) =

Page 10: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Things you can take home

Page 11: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Talk outlinecontributed articles

MARCH 2009 | VOL. 52 | NO. 3 | COMMUNICATIONS OF THE ACM 71

Speaking in the strict mathematical sense of power of expression, hierarchy and orthogonality are but helpful ab-breviations and can be eliminated; the hierarchy can be flattened, writing ev-erything out explicitly on a low level, and orthogonality can be removed by taking the Cartesian product of the compo-nents (as in the top of the figure). Thus, these features do not add raw expres-sive power, and their value is reflected mainly in additional naturalness and convenience. However, they also (in gen-eral) provide great savings in size; for ex-ample, orthogonality can yield an expo-nential improvement in succinctness in both upper- and lower-bound senses.3

Incidentally, orthogonal state-com-ponents in statecharts do not necessari-ly represent concurrent or parallel com-ponents of the system being specified. They need not represent different parts of the system at all but can be intro-duced to help structure its state space

to be able to sense properties of a part of the specification in another without worrying about implementation details. I definitely do not recommend having a single statechart for an entire system. Rather, as I discuss later, there will al-most always be a decomposition of the system into functions, tasks, objects, and the like, each endowed with its own behavior (described by, for example, a statechart). In this way, the concurrency occurs on a higher level.

I return now to the two adjectives dis-cussed earlier—“clear” and “precise”—behind the choice of the term “visual formalism.”14,16 Concerning clarity, the fact that a picture is worth a thousand words demands special caution. Not ev-erything is beneficially depicted visually, but the basic topology-inspired graphics of statecharts seemed from the start to jibe well with the IAI avionics engineers; they quickly grasped the hierarchy and orthogonality, high- and low-level tran-

and arrange the behavior in portions that are conceptually and intuitively separate, independent, and orthogo-nal. I emphasize the word “conceptu-ally” because what counts is whatever is in the mind of the person doing the specification.

This motivation has many ramifica-tions. I chose the broadcast communi-cation mechanism of statecharts not because it is preferred for actual com-munication between a system’s compo-nents. It is merely one way to coordinate the orthogonal components of the stat-echart, between its “chunks” of state-space, if you will; these will often not be the components—physical or soft-ware—of the system itself. Broadcasting is a way to sense in one part of the state space what is going on in another part and does not necessarily reflect actual communication between tangible as-pects of the actual system. On certain lev-els of abstraction one often really wants

Figure 2: Explaining statecharts (1984); note the temporal logic bottom right.

(optional)

Page 12: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 13: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 14: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 15: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 16: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 17: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 18: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 19: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 20: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Needed: A better workflow

Paperwork is hard to sync, bulky

Enable preventative maintenance

Photos are easy + more detailed

Page 21: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 22: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Complex details

Page 23: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Page 24: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Discussion

Page 25: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Flow charts

Page 26: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Screen flows

Add Observation“Add Observation” button is available on components that allow open observations. Button always appears at the bottom of the observation list.

12:30

A

Add Observation+

Select Observation TypeModal overlay with scrolling list of open observations.

12:30

Middle

Add Observation+ Tip to Root Interference

Unknown Damage

Micropitting

Scratch

Electric Discharge

Inaccessible

Possible Crack

Macropitting

12:30

A

Electric Discharge MinorAdd notes

Add Observation+

"

Page 27: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

“Ted the technician wants to…”

User stories

“Mary the manager needs to…”

Page 28: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Prototypes

Page 29: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Page 30: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Informal

Page 31: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specification techniques

Formal

Page 32: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Harel’s Statechartscontributed articles

MARCH 2009 | VOL. 52 | NO. 3 | COMMUNICATIONS OF THE ACM 71

Speaking in the strict mathematical sense of power of expression, hierarchy and orthogonality are but helpful ab-breviations and can be eliminated; the hierarchy can be flattened, writing ev-erything out explicitly on a low level, and orthogonality can be removed by taking the Cartesian product of the compo-nents (as in the top of the figure). Thus, these features do not add raw expres-sive power, and their value is reflected mainly in additional naturalness and convenience. However, they also (in gen-eral) provide great savings in size; for ex-ample, orthogonality can yield an expo-nential improvement in succinctness in both upper- and lower-bound senses.3

Incidentally, orthogonal state-com-ponents in statecharts do not necessari-ly represent concurrent or parallel com-ponents of the system being specified. They need not represent different parts of the system at all but can be intro-duced to help structure its state space

to be able to sense properties of a part of the specification in another without worrying about implementation details. I definitely do not recommend having a single statechart for an entire system. Rather, as I discuss later, there will al-most always be a decomposition of the system into functions, tasks, objects, and the like, each endowed with its own behavior (described by, for example, a statechart). In this way, the concurrency occurs on a higher level.

I return now to the two adjectives dis-cussed earlier—“clear” and “precise”—behind the choice of the term “visual formalism.”14,16 Concerning clarity, the fact that a picture is worth a thousand words demands special caution. Not ev-erything is beneficially depicted visually, but the basic topology-inspired graphics of statecharts seemed from the start to jibe well with the IAI avionics engineers; they quickly grasped the hierarchy and orthogonality, high- and low-level tran-

and arrange the behavior in portions that are conceptually and intuitively separate, independent, and orthogo-nal. I emphasize the word “conceptu-ally” because what counts is whatever is in the mind of the person doing the specification.

This motivation has many ramifica-tions. I chose the broadcast communi-cation mechanism of statecharts not because it is preferred for actual com-munication between a system’s compo-nents. It is merely one way to coordinate the orthogonal components of the stat-echart, between its “chunks” of state-space, if you will; these will often not be the components—physical or soft-ware—of the system itself. Broadcasting is a way to sense in one part of the state space what is going on in another part and does not necessarily reflect actual communication between tangible as-pects of the actual system. On certain lev-els of abstraction one often really wants

Figure 2: Explaining statecharts (1984); note the temporal logic bottom right.

Page 33: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Back in the 80’scontributed articles

MARCH 2009 | VOL. 52 | NO. 3 | COMMUNICATIONS OF THE ACM 71

Speaking in the strict mathematical sense of power of expression, hierarchy and orthogonality are but helpful ab-breviations and can be eliminated; the hierarchy can be flattened, writing ev-erything out explicitly on a low level, and orthogonality can be removed by taking the Cartesian product of the compo-nents (as in the top of the figure). Thus, these features do not add raw expres-sive power, and their value is reflected mainly in additional naturalness and convenience. However, they also (in gen-eral) provide great savings in size; for ex-ample, orthogonality can yield an expo-nential improvement in succinctness in both upper- and lower-bound senses.3

Incidentally, orthogonal state-com-ponents in statecharts do not necessari-ly represent concurrent or parallel com-ponents of the system being specified. They need not represent different parts of the system at all but can be intro-duced to help structure its state space

to be able to sense properties of a part of the specification in another without worrying about implementation details. I definitely do not recommend having a single statechart for an entire system. Rather, as I discuss later, there will al-most always be a decomposition of the system into functions, tasks, objects, and the like, each endowed with its own behavior (described by, for example, a statechart). In this way, the concurrency occurs on a higher level.

I return now to the two adjectives dis-cussed earlier—“clear” and “precise”—behind the choice of the term “visual formalism.”14,16 Concerning clarity, the fact that a picture is worth a thousand words demands special caution. Not ev-erything is beneficially depicted visually, but the basic topology-inspired graphics of statecharts seemed from the start to jibe well with the IAI avionics engineers; they quickly grasped the hierarchy and orthogonality, high- and low-level tran-

and arrange the behavior in portions that are conceptually and intuitively separate, independent, and orthogo-nal. I emphasize the word “conceptu-ally” because what counts is whatever is in the mind of the person doing the specification.

This motivation has many ramifica-tions. I chose the broadcast communi-cation mechanism of statecharts not because it is preferred for actual com-munication between a system’s compo-nents. It is merely one way to coordinate the orthogonal components of the stat-echart, between its “chunks” of state-space, if you will; these will often not be the components—physical or soft-ware—of the system itself. Broadcasting is a way to sense in one part of the state space what is going on in another part and does not necessarily reflect actual communication between tangible as-pects of the actual system. On certain lev-els of abstraction one often really wants

Figure 2: Explaining statecharts (1984); note the temporal logic bottom right.

Page 34: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

68 COMMUNICATIONS OF THE ACM | MARCH 2009 | VOL. 52 | NO. 3

contributed articles

this button is pressed?” In response, a weighty two-volume document would be brought out and volume A would be opened to page 389, clause 6.11.6.10, which says that if you press that button such then such a thing would occur. At which point (having by then learned some of the system’s buzzwords) I would say: “Yes, but is that true even when an infrared missile is locked on a ground target?” To which someone might say, “Oh no, in volume B, page 895, clause 19.12.3.7, it says that in such a case this other thing happens.” These Q&A sessions would continue, and when it would get to the fifth or sixth question the engineers were no longer sure of the answer and would have to call the customer (the Air Force people) for a re-sponse. By the time we got to the eighth or ninth question even the customer didn’t have an answer.

Obviously, someone would eventual-ly have to decide what happens when you press a certain button under a certain set of circumstances. However, this per-son might turn out to be a low-level pro-grammer assigned to write some remote part of the code, inadvertently making decisions that influenced crucial behav-ior on a much higher level. Coming, as I did, from a clean-slate background in terms of avionics (a polite way of saying I knew nothing about the subject), this was shocking. It seemed extraordinary that such a talented and professional team knew in detail the algorithm used to measure the distance to a target but not many of the far more basic behavior-al facts involving the system’s response to a simple event.

To illustrate, consider the following three occurrences of a tiny piece of be-havior buried in three totally different locations in a large specification of a chemical manufacturing plant:

“If the system sends a signal hot then send a message to the operator”;

“If the system sends a signal hot with T >60° then send a message to the op-erator”; and

“When the temperature is maximum, the system should display a message on the screen, unless no operator is on the site except when T <60°.”

Despite my formal education in mathematical logic, I’ve never been able to understand the third item. Sar-casm aside, the real problem is that all three were obviously written by three

experts from the Lavi avionics team, no-tably Akiva Kaspi and Yigal Livne.

An avionics system is a wonder-ful example of what my colleague at Weizmann Amir Pnueli and I later identified as a reactive system.17 The main behavior that dominates such a system is its reactivity, that is, its event-driven, control-driven, event-response nature. The behavior is of-ten highly parallel and includes strict time constraints and possibly stochas-tic and continuous behavior. A typical reactive system is not predominantly data-intensive or algorithmic in na-ture. Behavior is the crucial problem in its development—the need to pro-vide a clear yet precise description of what the system does or should do over time in response to both external

and internal events. The Lavi avionics team consisted of

extremely talented people, including those involved in radar, flight control, electronic warfare, hardware, com-munication, and software. The radar people could provide the precise algo-rithm used to measure the distance to a target. The flight-control people could talk about synchronizing the controls in the cockpit with the flaps on the wings. The communications people could talk about formatting information traveling through the MuxBus communication line. Each had his own idiosyncratic ways of thinking about and explaining the system, as well as his own diagrams and emphases.

I would ask seemingly simple ques-tions, such as: “What happens when

Figure 1: Page from my early IAI notes (1983). Statechart constructs include hyper-edges, nested orthogonality (a kind of concurrency), and transitions that reset a collection of states (chart on right). Note the use of Cartesian products of sets of states (set-theoretic formulation at the top) to capture the meaning of the orthogonality and the straightforward algebraic notation for transitions between state vectors (lower right).

72 COMMUNICATIONS OF THE ACM | MARCH 2009 | VOL. 52 | NO. 3

contributed articles

sitions, default entries, and more. Interestingly, the same quick compre-

hension applied to nonexperts outside the avionics group. I recall an anecdote from late 1983 in which in the midst of one session the blackboard showed a complicated statechart specifying the behavior of some intricate portion of the Lavi’s avionics. A knock on the door brought in an Air Force pilot from the “customer” team who knew a lot about the aircraft being developed and its de-sired behavior but had never seen a state machine or a state diagram before, not to mention a statechart. I remember him staring at this intricate diagram (the statechart) on the blackboard, with its complicated mess of blobs inside other blobs, arrows splitting and merging, and

the right track (see Figure 3). Very en-couraging.

So much for clarity. As for precision and formality, full executability was al-ways central to the development of the language. I found it difficult to imagine the usefulness of a method that merely makes it possible to say things about behavior, give snippets of the dynam-ics or observations about what happens or what could happen, or provide some partially connected pieces of behavior. The whole idea was that if one builds a statechart-based specification every-thing must be rigorous enough to be run (executed) just like software written in a programming language. Executabil-ity was a basic, not-to-be-compromised, underlying concern during the process of designing the language. It might sound strange to a reader 26 years later, but in 1983 system-development tools did not execute models at all. Thus, turning doodles like those in the figure into a real language could be done only with great care.

Building a Tool Once the basics of the language were established, it seemed natural to want a tool that could be used not only to prepare statecharts but also to execute them. So in April 1984, three colleagues (the brothers Ido and Hagi Lachover and Amir Pnueli) and I founded a company, Ad Cad, Ltd., later (1987) reorganizing it as I-Logix, Inc., with Ad Cad as its R&D branch. By 1986, we had built a tool for statecharts called Statemate.

In extensive discussions with the two most senior technical people as-sociated with the company, Rivi Sher-man and Michal Politi, along with Amir Pnueli, we were able to figure out during the Ad Cad period how to em-bed statecharts into a broader frame-work that was capable of capturing the structure and functionality of a large complex system. To this end, we proposed a diagrammatic language to structure a model that we called activity-charts, an enriched kind of hi-erarchical data-flow diagram whereby arrows represent the possible flow of information between the incident functions (activities). Each activity can be associated with a controlling statechart (or code) that would also be responsible for interfunction commu-nication and cooperation.

asking, “What’s that?” One of the engi-neers said, “That’s the behavior of the so-and-so part of the system, and, by the way, these rounded rectangles are states, and the arrows are transitions between states.” The pilot studied the blackboard for a couple of minutes, then said, “I think you have a mistake down here; this arrow should go over here and not over there.” He was right.

For me, this little event indicated that we might be doing something right, that maybe what I was proposing was a good and useful way of specifying reactive behavior. If an outsider could come in, just like that, and grasp something that complicated without being exposed to the technical details of the language or the approach, then maybe we were on

Figure 3: Page from the IAI notes (1983, events in Hebrew) showing a relatively “clean” draft of the top levels of behavior for the main flight modes of the Lavi avionics, including A/A (air-air), A/G (air-ground), NAV (automatic navigation), and ON GRD (on ground). Note early use of a history connector in the A/G mode.

Harel’s doodles

Page 35: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that
Page 36: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Page 37: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

Page 38: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

Page 39: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

submit credentials

Page 40: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

Logging in

submit credentials

Page 41: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

Logging in

submit credentials

Appvalid credentials

Page 42: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

Logging in

submit credentials

invalid credentials

Appvalid credentials

Page 43: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

Login

Logging in

Sorry

submit credentials

invalid credentials

Appvalid credentials

timeout

Page 44: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semanticsThe user starts on the login screen. They can enter some credentials and then hit the button to submit the credentials. The user is now “logging in” and we are waiting for a response from the server. If the server replies that the login is valid, the user is sent into the app. If the server replies that the login is not valid, the user is sent back to the login screen with an error message. There is also a 5 second timeout, so if we don’t hear back from the server by then, the user is sent to a screen that explains that they need to be online to use this app.

Page 45: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Statechart semantics

OnlineOffline

Page 46: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Offline Online

disconnect

connect

Statechart semantics

Page 47: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Implementing our app

?

Page 48: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Implementation

Page 49: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Logging in

Sorry

submit credentials

invalid credentials

Appvalid credentials

timeout

Lets start at “Login”

Login

Page 50: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Login screen(defn login-template [username password transition]   [:div [:h1 "Login Plz"]   [:form {:on-submit (fn [e] (transition "submit credentials" username password))} [:input {:type "text" :value username}] [:input {:type "password" :value password}] [:input {:type "submit"} "Login"]]])

Page 51: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Transition fn from statechart(defn login-template [username password transition]   [:div [:h1 "Login Plz"]   [:form {:on-submit (fn [e] (transition "submit credentials" username password))} [:input {:type "text" :value username}] [:input {:type "password" :value password}] [:input {:type "submit"} "Login"]]])

submit credentials

Login

Page 52: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Similar states share templates

Logging in

Sorry

submit credentials

invalid credentials

Appvalid credentials

timeout

Login

Page 53: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

(defn login-template [state username password transition]   [:div [:h1 "Login Plz"]   [:form {:on-submit (fn [e] (transition "submit credentials" username password))} [:input {:type "text" :value username :disabled (when (= "logging in" state) true)}] [:input {:type "password" :value password :disabled (when (= "logging in" state) true)}] [:input {:type "submit" :disabled (when (= "logging in" state) true)} state]]])

Similar states share templates

Page 54: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

(defn login-template [state username password transition]   [:div [:h1 "Login Plz"]   [:form {:on-submit (fn [e] (transition "submit credentials" username password))} [:input {:type "text" :value username :disabled (when (= "logging in" state) true)}] [:input {:type "password" :value password :disabled (when (= "logging in" state) true)}] [:input {:type "submit" :disabled (when (= "logging in" state) true)} state]]])

Similar states share templates

Page 55: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

“Templates” = Functions

Reuse + abstraction

Page 56: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Things you can take home

Page 57: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

[:html [:body (login-template "login" "Mr. Shortname" "******") (login-template "logging in" "Mr. Shortname" "******") (login-template “login failed" "Mr. Shortname" "******") (login-template "login" "Mrs. very super long name" "******") (login-template "login" "" "")]]

Designers love it!

Page 58: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

[:html [:body (login-template "login" "Mr. Shortname" "******") (login-template "logging in" "Mr. Shortname" "******") (login-template “login failed" "Mr. Shortname" "******") (login-template "login" "Mrs. very super long name" "******") (login-template "login" "" "")]]

Designers love it!

12:30

Tip

Overview MinorAdd notes

Observation Group #1

Distance from Root (m)

Damage Type Cracking

Damage Severity Minor

!

Distance from Leading Edge (cm)

Distance from Trailing Edge (cm)

Distance WidthChord-wise (cm)

Distance WidthSpan-wise (cm)

12:30

Tip

Overview MinorAdd notes

Observation Group #1

Distance from Root (m)

Damage Type Cracking

Damage Severity Minor

!

Distance from Leading Edge (cm)

Distance from Trailing Edge (cm)

Distance WidthChord-wise (cm)

Distance WidthSpan-wise (cm)

12:30

Tip

Overview MinorAdd notes

Observation Group #1

Distance from Root (m)

Damage Type Cracking

Damage Severity Minor

!

Distance from Leading Edge (cm)

Distance from Trailing Edge (cm)

Distance WidthChord-wise (cm)

Distance WidthSpan-wise (cm)

12:30

Tip

Overview MinorAdd notes

Observation Group #1

Distance from Root (m)

Damage Type Cracking

Damage Severity Minor

!

Distance from Leading Edge (cm)

Distance from Trailing Edge (cm)

Distance WidthChord-wise (cm)

Distance WidthSpan-wise (cm)

12:30

Tip

Overview MinorAdd notes

Observation Group #1

Distance from Root (m)

Damage Type Cracking

Damage Severity Minor

!

Distance from Leading Edge (cm)

Distance from Trailing Edge (cm)

Distance WidthChord-wise (cm)

Distance WidthSpan-wise (cm)

12:30

Tip

Overview MinorAdd notes

Observation Group #1

Distance from Root (m)

Damage Type Cracking

Damage Severity Minor

!

Distance from Leading Edge (cm)

Distance from Trailing Edge (cm)

Distance WidthChord-wise (cm)

Distance WidthSpan-wise (cm)

Page 59: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

(defn checklist-item [{:keys [path name note value] :as op} ctrl]   [:li [:p.name name] [:p.note {:on-click #(ctrl "expand note" {:path path :note note})} (or note "Add notes")]   [:.value (observation-point-selector op ctrl #(ctrl "update" {:path (get-in @op [:observation :path]) :update %}))] ! (photo-icon ctrl path op)]

Composition

Page 60: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Functions are real nice

(f x) =

Page 61: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

The entire UI can be a single function

(f x) =

Page 62: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

“Immediate mode” UI

(render x) =

Page 63: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Explicit application state

?

(render x) =

Page 64: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Explicit application state

(render x’) =

?

Page 65: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Explicit application state

{:state "login" :login {:username "foo" :password "bar"} :inspecting {…} …}

Page 66: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Explicit application state

An immutable graph database

Page 67: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Benefits of explicit app state

Page 68: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Benefits of explicit app state

Viewable{:state "login" :login {:username "foo" :password "bar"} :inspecting {…} …}

Page 69: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Benefits of explicit app state

Serializable{:state "login" :login {:username "foo" :password "bar"} :inspecting {…} …}

Page 70: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Benefits of explicit app state

Reloadable

(f x) (f’ x)

Page 71: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Benefits of explicit app state

Undo(f x) (f x’) (f x’’)

Page 72: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Wrap up

Page 73: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Specs are tricky…

Add Observation“Add Observation” button is available on components that allow open observations. Button always appears at the bottom of the observation list.

12:30

A

Add Observation+

Select Observation TypeModal overlay with scrolling list of open observations.

12:30

Middle

Add Observation+ Tip to Root Interference

Unknown Damage

Micropitting

Scratch

Electric Discharge

Inaccessible

Possible Crack

Macropitting

12:30

A

Electric Discharge MinorAdd notes

Add Observation+

"

PrototypeFlow charts

Screen flows

Discussions

Page 74: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

contributed articles

MARCH 2009 | VOL. 52 | NO. 3 | COMMUNICATIONS OF THE ACM 71

Speaking in the strict mathematical sense of power of expression, hierarchy and orthogonality are but helpful ab-breviations and can be eliminated; the hierarchy can be flattened, writing ev-erything out explicitly on a low level, and orthogonality can be removed by taking the Cartesian product of the compo-nents (as in the top of the figure). Thus, these features do not add raw expres-sive power, and their value is reflected mainly in additional naturalness and convenience. However, they also (in gen-eral) provide great savings in size; for ex-ample, orthogonality can yield an expo-nential improvement in succinctness in both upper- and lower-bound senses.3

Incidentally, orthogonal state-com-ponents in statecharts do not necessari-ly represent concurrent or parallel com-ponents of the system being specified. They need not represent different parts of the system at all but can be intro-duced to help structure its state space

to be able to sense properties of a part of the specification in another without worrying about implementation details. I definitely do not recommend having a single statechart for an entire system. Rather, as I discuss later, there will al-most always be a decomposition of the system into functions, tasks, objects, and the like, each endowed with its own behavior (described by, for example, a statechart). In this way, the concurrency occurs on a higher level.

I return now to the two adjectives dis-cussed earlier—“clear” and “precise”—behind the choice of the term “visual formalism.”14,16 Concerning clarity, the fact that a picture is worth a thousand words demands special caution. Not ev-erything is beneficially depicted visually, but the basic topology-inspired graphics of statecharts seemed from the start to jibe well with the IAI avionics engineers; they quickly grasped the hierarchy and orthogonality, high- and low-level tran-

and arrange the behavior in portions that are conceptually and intuitively separate, independent, and orthogo-nal. I emphasize the word “conceptu-ally” because what counts is whatever is in the mind of the person doing the specification.

This motivation has many ramifica-tions. I chose the broadcast communi-cation mechanism of statecharts not because it is preferred for actual com-munication between a system’s compo-nents. It is merely one way to coordinate the orthogonal components of the stat-echart, between its “chunks” of state-space, if you will; these will often not be the components—physical or soft-ware—of the system itself. Broadcasting is a way to sense in one part of the state space what is going on in another part and does not necessarily reflect actual communication between tangible as-pects of the actual system. On certain lev-els of abstraction one often really wants

Figure 2: Explaining statecharts (1984); note the temporal logic bottom right.

Statecharts = formal specs

Page 75: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Model state explicitly

(transition x “some event”) ⟹ x’

≣ transition

Page 76: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Build your UI as a function

(render x) =

Page 77: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Functions are awesome!

• Reuse • Composition • Testing

(render x) =

Page 78: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Explicit data are awesome!

• Introspection • Serializability • Reloadable • Undo

(render x) =

Page 79: Using ClojureScript with heavy industrial equipment - YOW ......Specification techniques Screen! flows Add Observation ÒAdd ObservationÓ button is available on components that

Thanks!

Kevin Lynagh @lynaghk Keming Labs

https://keminglabs.com/talks/