1. ENGINEERING CONCURRENT AND EVENT-DRIVEN
WEB APPS: AN AGENT-ORIENTED APPROACH
BASED ON THE SIMPAL LANGUAGE
ALMA MATER STUDIORUM
UNIVERSITÀ DI BOLOGNA
SECONDA FACOLTÀ DI INGEGNERIA
CORSO DI LAUREA MAGISTRALE IN INGEGNERIA INFORMATICA
SUPERVISOR:
PROF. RICCI ALESSANDRO
CO-SUPERVISOR:
DOTT. SANTI ANDREA
PRESENTED BY:
DOTT. FABBRI FRANCESCO

2. Objectives
 Objectives:
 Analysis of state-of-the-art technologies for Web apps
programming
 Focusing on:
→ Asynchronous programming
→ Concurrency
→ Related problems
 Investigating how the Agent-oriented programming
paradigm could enhance Web apps programming
→ simpAL as reference language
 Our contribution:
 Definition of an AOP model for Web apps programming
 Design and development of the simpAL-web platform
→ Which enables simpAL to deal with Web apps programming

3. Introduction
 Web is becoming the deployment target de facto for new software systems
 Ubiquity
 Mantainablility
 Open standards: HTML, CSS, ECMAScript, JSON
 Several well known examples: Facebook, Google Docs, Gmail
 Native (desktop and mobile) applications are moving to Web apps
 Web standards are bridging the gap on usability and performance
→ AJAX: asynchronous interaction with (RESTFul) Web services
→ HTML5 new features: Web Workers, Web Storage, Offline Web Apps, ...
 JavaScript is the lingua franca for Web apps programming
 However it suffers of several problems:
 Issues concerning in-the-large programming
→ Lack of structure and typing
→ Poorness of development tools
 Issues concern asynchronous programming and concurrency
 Compatibility
 Security

4. JavaScript: improve or dismiss it?
 JavaScript frameworks and libraries
 DOM manipulation frameworks
→ jQuery
 MVC frameworks
→ Backbone.js
 Node.js
 JavaScript as intermediate language
 Toward structured Web apps:
→ Dart (Google)
→ TypeScript (Microsoft)
 Evolution of the ECMAScript standard
→ JavaScript 6th Edition (Harmony)

5. Async programming
 Event-loop architecture:
 Widely adopted in GUI systems
 Program’s control flow is determined by events
→ Handled through callbacks
 Issues:
 Asynchronous spaghetti
→ Application business
logic is fragmented
among event handlers
→ Matryoshka doll
programming style
(= callbacks +
anonymous functions)
 Inversion of Control «I love async, but I can't code like this»
 Web programming is strongly based on the Asynchronous paradigm:
→ User events from the Web page
→ Asynchronous requests to Web services

6. Promises / Futures
 Problem: not always effective
→ How to model complex workflows, where the execution of a set of tasks
depends on the outcome of a previous task, with Promises?
 Constructs to tame the Asynchronous
Spaghetti issue
 Proposed in [1]
 A Promise is a place holder for a
value that will exist in the future
 Ability to chain or combine Promises
 Web implementations:
→ jQuery Deferred-Promise
→ Dart Completer-Future
[1] Friedman, Daniel; David Wise (1976). "The Impact of Applicative Programming on Multiprocessing".
International Conference on Parallel Processing, pp. 263-272.

7. Concurrency
 Based on the Actor-model:
 Computational entities with
their own control flow which
interact by asynchronous
message passing
→ HTML5 Web Workers
→ Dart Isolates
 Easily integrable with the
asynchronous programming
model
 Issues:
 Pure reactive entities: they do
something only in reaction to
the reception of a message
→ How to implement proactive
behaviours?
 Heavy weight

8. AOP & simpAL
 Agent-Oriented programming paradigm
 Human-inspired computing
 simpAL
 General purpose AOP
 Statically typed
 Extension of OOP (Java)
 Agents and Artifacts (A&A) conceptual model
 Belief-Desire-Intention (BDI) architecture
 simpAL main abstractions:
 Agents
 Artifacts
 Workspaces
 Organization

9. simpAL: Agent model & architecture
PlanDef :
'plan-for' TaskId
ActionRuleBlock;
ActionRuleBlock :
{ ActionBlockAttribute }
'{'
ActionRuleDef | BeliefDef [';']
'}';
ActionBlockAttribute :
'using:' Expression
{',' Expression}
| 'completed-when:' Expression
| 'atomically:';
ActionRuleDef :
WhenBlock '=>' AgentAction
| AgentAction {';' AgentAction };
WhenBlock :
( 'when' | 'every-time' )
EventTemplate [':' Expression]
| ( 'when' | 'every-time' )
Expression
| 'always';
EventTemplate :
'done' IdExpr | 'failed' IdExpr
| 'assigned' IdExpr
| 'told' Expression
| 'changed' Expression
 Beliefs
 Describe the agent’s internal state
 Tasks
 What agents have to do
 Plans
 How they do it
 Collections of action rules
o Event : Condition → Action
o Possibly structured in blocks
o Syntactic sugar to enforce
sequentiality
 Multiple plans for different tasks
 Inter Agent comunication
 Asynchronous message passing with
speach acts
 Environment interaction
 External actions
 Percepts

10. simpAL: Agent execution semantics
 Agent control loop
 Sense stage
→ Processes an external event
→ Updates its belief base
 Plan stage
→ Handles new tasks
→ Drops intentions for fulfilled
tasks
→ Selects all the actions
amenable to be performed
for ongoing intentions
 Act stage
→ Performs all the selected
actions

11. simpAL-web
 Requirements and assumptions:
 Single-page web applications
 Elements accessible by id
 Perceive certain events from
certain elements
 Access to element's content and
attributes
 Structure of a simpAL Web app:
 Separation of concerns
 Web agents: encapsulating /
decentralizing the control logic of
the application
 Web environment: integration with
low-level existing technologies
→ Built-in artifacts to handle the
Web page and its elements
→ Interaction with Web services
delegated to ad-hoc artifacts

12. Modeling the Web environment
WebPageArtifact
 loaded: boolean
 closed: boolean
⃝ getElement(id: String, elemArtifact:
WebElemInterface #out)
WebElemArtifact
 clicks: int
 doubleClicks: int
 pressed: boolean
 focused: boolean
 pointerCoord: PointerCoordinates
 keyPressed: boolean
 key: int
⃝ getContent(html: String #out)
⃝ setContent(html: String)
⃝ getAttribute(att: String, value:String #out)
⃝ setAttribute(att: String, value: String)
 Part of the environment which
model the interaction with the Web
page and its elements
→ Similar to the DOM APIs for
traditional languages
 WebPageArtifact
→ Wraps the app Web page
→ Provide operations to access HTML
elements of interest, through
proper artifacts.
 WebElemArtifacts
→ Wraps an HTML element in the
Web page
→ Provide operations to access
element’s content and attributes
→ Allow to perceive user events,
through observable properties

13. simpAL-web: Hello World

14. Interaction with Web services
 Designing artifacts which model the Web
services themselves, in terms of:
 Operations
→ To query or act on the services
 Observable properties:
→ To perceive events or status
changes from the services
 Allows to abstract from:
→ The concrete Web service implementation
→ The low-level logic needed to query the Web service
→ Operational restrictions due to HTTP
FacebookArtifact
 lastFeed: String
⃝ getFriends(friends: List<Friend> #out)
⃝ getPhotos(photos: List<Photo> #out)
⃝ getEvents(events: List<Event> #out)
⃝ publishStatus(status: String)
 How to enable simpAL Web 2.0 apps to asynchronously interact
with (RESTfull) Web services?

15. Async programming in simpAL-web
 Native support for structured
async programming
 Through ECA action rules
 No callbacks
→ No Asynchronous
spaghetti
→ No Inversion of Control
 Events
 As changes in the Web
Environment state
→ Web page and elements
→ Web services
 Tasks and labelled action
rules completion / failure
YouTubeArtifact
⃝ queryViewCount(search: String,
views: long #out)

16. Concurrency in simpAL-web
Do you remember the
JavaScript implementation?
This is the simpAL one!
 Allows to integrate reactive and
proactive behaviours
 Logic concurrency: virtually many
and many concurrent agents
→ Scalability

17. simpAL-web: implementation notes
 Integrating the simpAL runtime with a custom Web browser
→ Built through the WebEngine and WebView JavaFx components
→ Based in turn on the WebKit open-source layout engine

18. Conclusions
 simpAL-web pros
 Asynchronous programming
→ No Asychronous spaghetti
→ No Inversion of Control
 Concurrency
→ Mixing of autonomous and
reactive behaviours
→ Logic concurrency: virtually many
and many concurrent agents
→ Scalability
 Software engineering and in-the-
large programming
→ Separation between interfaces and
implementations
→ Separation between active and
passive components
→ Modularity
→ Error checking at compile-time
 Future works
 Aim of our work was to lay the
foundations for the investigation of
simpAL as language for cliet-side
programming
→ NOT to replace JavaScript or
other reference technologies
 Evaluate simpAL-web performance
 Improve robustness and
integration with Web browsers
→ simpAL-web as plugin for
popular browsers (Chrome,
Firefox, etc...)
 Sub-typing and inheritance in
simpAL: to model hierarchies of
element artifacts

19. Any questions?

20. Thank you for your
attention