It is all about a huge knowledge chasm created by a few years out of practical programming and especially without experiencing web programming. This speech is about many of us that have knowledge of programming other technologies and have to face a new challenge, in this case: developing a web application.

1. Catching-up web
technologies - an endless
story
Cleber Jorge Amaral
Supervised by Professor Stephen Cranefield and Jomi Fred Hubner
nzdis meeting of 13th February 2020

2. Background: JaCaMo, a platform for developing
Multiagent Systems
Room2Room1
a company
Organisation
Environment
Agents

3. My Background
● Good knowledge on C, C++, and some knowledge on programming
non-visual Java applications
● No experience with web applications

4. How it started...
I was presented to
jacamo-web:
● REST endpoints
for JaCaMo
facilities
● Web Interface
for programming
Multiagent
Systems
This was the agents
interface when I was
presented to it

5. Interface to send new
plans to an agent
(which is a way to
“teach” an agent)

6. Interface for the
directory facilitator (a
way to know which
services each agent
can provide)

7. Interface for
inspecting an artifact
and its complex way
to show details

8. Roadmap:
● Improve the User Interface (UI)
Source: https://www.vebo.pl/kurs-ux-ui-sztuka-uzytecznego-projektowania

9. In short… HTML, CSS and JS
Source: https://moz.com/blog/javascript-seo, originally from https://img0.etsystatic.com/000/0/6007442/il_fullxfull.281148222.jpg,
http://i.ebayimg.com/00/s/NTAwWDQ1Mg==/z/0FYAAOxyRhBS-qzb/$_3.JPG?set_id=2 and https://imgur.com/hjRn2ZM

10. CSS in one slide
● Cascading Style Sheets describes how HTML will be displayed
● Basic structure:
● Selectors:
● DEMO: https://www.w3schools.com/css/css_intro.asp

11. CSS framework?
bootstrap

12. Chosen CSS framework
● Lightweight
● Has a clear
example to base
our app

13. But...
● It is not very
flexible
○ No frames
○ Few modal
options
○ Nothing to
handle instant
messages
○ ...

14. So… adapting mini.css and creating an endpoint to
return CSSs
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color:
var(--header-fore-color);
color: white;
}
...
@Path("/css/{resourcepathfile}" )
@GET
@Produces("text/css")
public Response getStyleCSS(@PathParam("reso... {
StringBuilder so = new StringBuilder();
try {
BufferedReader in = null;
File f = new File("src/resources/css/" + ...);
if (f.exists()) {
in = new BufferedReader( new FileReader(f));
...
return Response.ok(so.toString(), "te...;
}
}

15. Agent’s mind before and after

16. But we are writing HTML as Java coded Strings
Everytime we need to change any HTML we have to compile the entire
project and the project is getting bigger!
Agent’s mind in previous version was written in 50 lines, including the JS
https://github.com/jacamo-lang/jacamo-rest/blob/ea5a673e2c8accb8a541d24
88c279e05d4b9ccf9/src/java/jacamo/web/RestImplAg.java#L166
The new version was written in 120 lines of HTML. (JS and CSS was put
apart!!!)
https://github.com/jacamo-lang/jacamo-rest/blob/e227d83eac560bd98a8f2dc3
34f2d0c71a822d63/src/java/jacamo/web/RestImplAg.java#L294

17. Roadmap:
● [done] Improve the UX
● Split front from backend
○ For more
productivity when
developing new
features
Source: http://apexensino.com.br/front-end-back-end-e-fullstack-voce-sabe-o-que-faz-cada-um-destes-profissionais/

18. Understanding the problem
jacamo-web
css js
Client
HTTP
request
HTTP
response
html
Bad way:
- Low
productivity
- Not good
separation of
concerns
jacamo-web
Better way:
- Standard
- More
productivity
- Good frontend
frameworks html css
Client
HTTP
request
HTTP
response
js
Front and
backend as
a
monoblock
Backend
Frontend
Architecture

19. Frontend and Backend in one slide
● Backend is the part of an application that runs in the server-side managing
requests from clients
○ Usually we have a server (a machine), an application (e.g. jacamo-web
provided by some web containers manager) and a database (a SGDB or
files)
● Frontend runs in client-side, it is concerned with the way the user interacts
with the application

20. Backend technology?

21. Chosen backend technology
● JaCaMo, the “core” of our
application is written in java
● Current version is already in
Java

22. Java backend framework?

23. Chosen Java backend framework
● No framework, using
primitive libraries
● Strengths:
○ Better to understand
what happens behind
scenes
○ It is currently working
for jacamo-web
● Weaknesses:
○ You have to solve each
problem by your own
○ Jersey lacks support to
some technologies like
websockets
○ Jersey is not being
updated very often

24. Frontend technology?

25. Chosen frontend technology
● No framework, using plain
JavaScript
● Strengths:
○ Better to understand what
happens behind scenes
○ It is currently working for
jacamo-web
● Weaknesses:
○ You have to solve each
problem by your own
○ Clients does not support
modules
○ Hard to make things
reusable

26. Roadmap:
● [done] Improve the UX
● [done] Split front from backend
● Improve productivity on
programming JavaScript
Source: https://forestry.io/blog/write-better-javascript-with-webpack/

27. JS on designing and JS on client-side?

28. Chosen module bundler
● No particular reason

29. Web service architecture?

30. Chose Architecture
● We already have endpoints
using REST
● Strengths:
○ Most common, everybody
loves it!
● Weaknesses:
○ Not easy to customise
○ Not good to deal with
different kind of clients
(desktop, mobile...)

31. REST in one slide
● Representational state transfer is an architecture that defines constraints on
designing web services
● RESTful: Services that model elements as resources, use HTTP verbs (GET,
POST, DELETE,...) and can be “discovered” by consumers
Source: https://terasolunaorg.github.io/guideline/1.0.x/en/ArchitectureInDetail/REST.html

32. But...
● REST has its problems, e.g.,
rendering the envir. menu
○ It show all workspaces,
and also the artifacts of
the selected workspace.
● Two solutions:
○ multiple asynchronous
calls which can be slow
○ create a new endpoint
which pushes a need to
change the back
● And if we want to make a
lightweight mobile app using
less data, so we have to
create a kind of “/mobile_api”
adding each wanted
endpoint?
https://app.swaggerhub.com/apis/sma-das/jacamo-rest/0.3

33. Roadmap:
● [done] Improve the UX
● [done] Split front from backend
● [done] Improve productivity on JS
● Look for a more flexible architecture
● Develop the frontend using some
framework for better productivity and
support
● Develop the backend using some
java framework for better
productivity and support
● Add more unit tests and mock tests
Source: https://www.thedigitaltransformationpeople.com/channels/people-and-change/give-it-up-productivity-and-engagement/

34. Our planned stack
● React since it has a strong
community, it is good to develop for
multiple platforms and it seems to
provide a good model with reusable
components.
● GraphQL since it allows clients to tell
what they need avoiding necessity of
multiple asynchronous calls and
sending unnecessary data.
● Spring because of its strong
community. Spring boot makes
easier application setup and
dependencies management.

35. What you think about our technology stack?

36. Questions?

37. Thanks for
coming
and for your
participation!
Jacamo-web is an open source project available at:
https://github.com/jacamo-lang/jacamo-web
A demo is running at:
http://jacamo-web.herokuapp.com/