How to Troubleshoot Apps for the Modern Connected Worker
Randori design goals and justification
1. Page 0 of 59
Randori Design Goals and
Justification
Michael Labriola
WORLDWARE
CONFERENCE
2. Page 3 of 59
Terminology
In our parlance, the client side of an application looks like
this:
Σ
WORLDWARE
CONFERENCE
3. Page 3 of 59
Traditional UI Model
The model followed by Flex, Silverlight, GWT, ExtJS and
others goes something like this:
Ultimately, it is the developers job to create the user
interface through code.
WORLDWARE
CONFERENCE
4. Page 3 of 59
Problem 1
The problems with this
method were numerous.
Most importantly, each time
a design change needs to
occur, our most expensive
resources, developers,
needed to be involved.
WORLDWARE
CONFERENCE
5. Page 3 of 59
Problem 2
In a world of inconsistent rendering of the user interface,
the problem compounds dramatically.
WORLDWARE
CONFERENCE
6. Page 3 of 59
Proposed Solution
Many organizations have tried to solve this problem
through abstraction and encapsulation
WORLDWARE
CONFERENCE
7. Page 3 of 59
Problem 3
This abstraction layer is destined to grow larger over time
and you generally pay for the compatibility even if you are
not using it
WORLDWARE
CONFERENCE
8. Page 3 of 59
Problem 4
There is an inherent lag in the maintenance of the
abstraction layer. When a new feature is released, you
rarely have immediate access and if there is a bug, you are
waiting for an API revision.
WORLDWARE
CONFERENCE
9. Page 3 of 59
UI Round Up
Our most expensive resources are involved in the most
time consuming process, that requires the most iteration
and is the most likely to grow in scope as browsers
continue to add features.
Translates to : Death Spiral
WORLDWARE
CONFERENCE
10. Page 3 of 59
Business Logic Expectations
In our experience, developers of business logic have
different expectations of a language and environment than
do UI designers. They expect things like:
– Strong Types
– Refactoring Support
– Code Completion / Type Assist
– Object Oriented
– Unit Testing
In general, these developers are used to more mature
languages and tools.
WORLDWARE
CONFERENCE
11. Page 3 of 59
Contrasted With
From Wikipedia:
JavaScript (sometimes abbreviated JS) is a prototype-based scripting language
that is dynamic, weakly typed and has first-class functions. It is a multi-
paradigm language, supporting object-oriented, imperative, and functional
programming styles.
Moock Quote:
“The interesting thing about JavaScript is that you can have an apple and a cat.. and
you can decide the apple should be able to meow, or that a cat no longer should at any
point in the system.. and regardless of who is using the ‘objects’”
WORLDWARE
CONFERENCE
12. Page 3 of 59
Proposed Solution
There have been multiple attempts at giving users the
ability to cross-compile projects to JavaScript to retain
these features. Some have been moderately successful,
but all retain the original fatal flaw:
Additionally, cross-compilation techniques that attempt to
address UI lengthen the lag between new browser features
and/or bug fixes and their use in a project.
WORLDWARE
CONFERENCE
13. Page 3 of 59
Cross Compliation
We don’t however believe that cross-compilation is
inherently flawed. Its the cross-compilation of UI that
causes the problems noted previously.
Cross-compilation of business logic can work quite well,
providing for the needs of the business logic developer but
allowing for the needed deployment model.
WORLDWARE
CONFERENCE
14. Page 3 of 59
Separation of Concerns
The interesting issue is that all of these solutions attempt to
solve the problem at the expense of good separation of
concerns.
HTML/JavaScript actually natively has a reasonably good
separation between visual design and code.
We believe an adequate solution only comes from
embracing that ability instead of side-stepping it
WORLDWARE
CONFERENCE
15. Page 3 of 59
A Project
This is our view of the time required on any given project,
per type of work, adjusted for dealing with multiple
rendering targets
WORLDWARE
CONFERENCE
16. Page 3 of 59
Tech Choices
Therefore we see the technology choices breaking down
into the follow selections.
WORLDWARE
CONFERENCE
17. Page 3 of 59
HTML/CSS Justification
HTML/CSS is the native way that browsers use to create
and display user interfaces.
There are some complexities which need to be address,
including technical challenges such as global ids.
HTML/CSS folks are generally less expensive than core
developers and hence there is a significant economy for
allowing these resources to handle the most time
consuming portion of the process
WORLDWARE
CONFERENCE
18. Page 3 of 59
JavaScript Justification
There are some tasks which require understanding of the
browser and deep knowledge of the virtual machine in
which the code is executing.
JavaScript is the native languages of this environment. Like
an assembly language, it should be used for tasks that are
‘close to the metal’ and require this level of interaction.
Attempting to cross-compile this logic, causes the same
concerns addressed previously.
WORLDWARE
CONFERENCE
19. Page 3 of 59
Business Logic Justification
The business logic of the system should not need to know
much about the environment in which it is executing.
If the business logic does have this deep knowledge, we
have a problem with separation of concerns.
Business logic can be written in a higher level language,
assuming we can abstract away the implementation details
through the use of various APIs.
WORLDWARE
CONFERENCE
20. Page 3 of 59
Ultimate Design Goal
What we effectively need is appropriate plumbing to allow
the business logic, JavaScript and HTML/CSS to work
together seamlessly, but allow enough separation that
these tasks can be accomplished via separate roles.
Doing so is the primary goal of this design.
WORLDWARE
CONFERENCE
21. Page 3 of 59
Primary Concerns
• The system must be extensible
• The system must allow dynamic code loading
• The system must be able to resolve dependencies dynamically
without manual maintenance
• The system must allow large teams to work simultaneously
• The system must allow for unit testing
• The system must work on both mobile and desktop
• The system must be deployable in multiple containers
• The system must be able to reuse existing JavaScript libraries
• The system must be fully capable of internationalization and
localization
WORLDWARE
CONFERENCE
22. Page 3 of 59
Secondary Concerns
• The system should allow for code coverage analysis
• The system should allow for refactoring support
• The system should allow for testing with mock objects
• The system should allow for 100% business logic test coverage
• The components created for an application should be reusable to
allow for the construction and reusable of libraries
• The system must allow for responsive designs
• The core system must be functional on IE7 and greater
WORLDWARE
CONFERENCE
23. Page 3 of 59
Proposed Solution
Use the correct technology for the correct function and use
a framework to enforce strict separation of concerns
Σ
WORLDWARE
CONFERENCE
24. Page 3 of 59
Randori – Seizing Chaos
We just need a safe way to bring them together. We call
that way the Randori Enterprise Framework.
It is effectively the lines of the pie chart, rather than the pie
chart itself.
WORLDWARE
CONFERENCE
25. Page 3 of 59
HTML Pages
The first key to this approach is HTML Pages.
•An HTML page is the visual component of the View
•Each HTML page is a complete HTML document, not a
fragment
– The HTML page may define style sheets or even scripts which
can be used during testing
– When the page is loaded, these elements are stripped so they
do not impact the runtime
– Only the body is used at runtime
WORLDWARE
CONFERENCE
26. Page 3 of 59
Mediator
Each HTML page can define a mediator. A mediator
contains the business logic that runs the view.
•A mediator is written in C#
•Like all dependencies, it can be loaded dynamically
•Mediators can be associated with an HTML page in two
ways
WORLDWARE
CONFERENCE
27. Page 3 of 59
Mediator Defined
Mediators can be defined in line via a data-mediator
attribute. This attribute causes the appropriate mediator to
be loaded (if needed) and instantiated.
HTML package.MyMediator
Document
<!DOCTYPE html>
<html>
<head>
<title>My View</title>
</head>
<body data-mediator="package.MyMediator">
<div id="someContainer">
</div>
</body>
</html>
WORLDWARE
CONFERENCE
28. Page 3 of 59
Mediator CSS
Mediators can also be defined in CSS, which has the
advantages of cleaner HTML and reconfiguration via CSS
HTML CSS package.MyMediator
Document Document
<!DOCTYPE html> .someClass {
<html> -randori-mediator: package.MyMediator;
<head> }
<title>My View</title>
</head>
<body class="someClass">
<div id="someContainer">
</div>
</body>
</html>
WORLDWARE
CONFERENCE
29. Page 3 of 59
Mediator View Injection
Mediators gain access to parts of the view by asking for
references to be injected. In this way, the layout of the view
is separate from the logic of the mediator.
HTML package.MyMediator
Document
<!DOCTYPE html> public class MyMediator : AbstractMediator {
<html>
<head> [View(required = true)]
<title>My View</title> public jQuery someContainer;
</head>
<body class="someClass"> }
<div id="someContainer">
</div>
</body>
</html>
WORLDWARE
CONFERENCE
30. Page 3 of 59
Mediator Injection
Mediators, like other classes written in C#, can indicate that
they require additional classes that need to be injected as
properties, methods or via the constructor.
public class MyMediator : AbstractMediator {
[View(required = true)]
public jQuery someContainer;
[Inject]
public UserService service;
}
WORLDWARE
CONFERENCE
31. Page 3 of 59
Dependencies
As the C# is compiled, we are able to observe and note
dependencies. As such, when MyMediator is requested,
we can know that UserService must be load first. This
can occur recursively to any depth.
We can do this automatically, without requiring
dependencies to be manually noted or maintained.
public class MyMediator : AbstractMediator {
[View(required = true)]
public jQuery someContainer;
[Inject]
public UserService service;
}
WORLDWARE
CONFERENCE
32. Page 3 of 59
View/Business Separation
Raw HTML nodes can be injected into the View. When this
occurs, you are provided a reference to the node wrapped
in jQuery.
However, this leads to bad coupling wherein the mediator
does too much visual manipulation. The mediator should be
about business logic and only communicate via fully
mockable APIs.
WORLDWARE
CONFERENCE
33. Page 3 of 59
Behavior
To help enforce this separation, there is a concept of a
behavior. A behavior is reusable functionality that
manipulates or works within a given HTML node.
•Can be written in C# or JavaScript directly
•Intended to provide a clean, ‘close to the metal’ approach
where JS devs can work on complex behavior, but expose
it to the C# business logic via a known public interface
•Any page can have (n) behaviors
WORLDWARE
CONFERENCE
34. Page 3 of 59
Behavior Defined
Behaviors can be defined in line via a data-mediator
attribute. This attribute causes the appropriate behavior to
be loaded (if needed) and instantiated.
HTML package.MyBehavior
Document
<!DOCTYPE html>
<html>
<head>
<title>My View</title>
</head>
<body data-mediator="package.MyMediator">
<div id="someContainer"
data-behavior="package.MyBehavior">
</div>
</body>
</html>
WORLDWARE
CONFERENCE
35. Page 3 of 59
Behavior CSS
Behaviors can also be defined in CSS, which has the
advantages of cleaner HTML and reconfiguration via CSS
HTML CSS package.MyBehavior
Document Document
<!DOCTYPE html> .someClass {
<html> -randori-mediator: package.MyMediator;
<head> }
<title>My View</title>
</head> .otherClass {
<body class="someClass"> -randori-behavior: package.MyBehavior;
<div id="someContainer“ }
class=“otherClass”>
</div>
</body>
</html> WORLDWARE
CONFERENCE
36. Page 3 of 59
JS/C# Mapping
On the C# side, we can create compile-time constructs that
define the contents of an external library.
For example, here is a snippet of code that defines part of
the Google Crypto library
[JsType(JsMode.Prototype, Name = "CryptoJS", Export=false)]
public class CryptoJS {
public static Encodings enc;
public static Hash SHA256(JsString message, JsObject options = null) {
return null;
}
public static Hash MD5(JsString message, JsObject options = null) {
return null;
}
WORLDWARE
CONFERENCE
37. Page 3 of 59
JS/C# Mapping
This code is only used during development to ensure static
type checking, provide code hinting, etc. It simply provides
a definition for a class that will be available at runtime.
The actual Crypto library is written in JavaScript. Through
this technique, we can use any existing library written in
JavaScript, but use it from our C# code… and mock it
during testing.
WORLDWARE
CONFERENCE
39. Page 3 of 59
Behaviors
This same capability allows our behaviors to be written
completely in JS where performance and/or code reuse
benefits us, however, each of these interfaces is then
available to the mediator.
WORLDWARE
CONFERENCE
40. Page 3 of 59
Behavior/Mediator Injection
When a behavior is defined for a node, the Mediator is
given access to the behavior instead of the node. Through
this model, we keep the mediators focused on logic.
HTML package.MyBehavior package.MyMediator
Document
<!DOCTYPE html> public class MyMediator : AbstractMediator {
<html>
<head> [View(required = true)]
<title>My View</title> public MyBehavior someContainer;
</head> }
<body data-mediator="package.MyMediator">
<div id="someContainer"
data-behavior="package.MyBehavior">
</div>
</body>
</html> WORLDWARE
CONFERENCE
41. Page 3 of 59
Randori Enterprise Framework
This begins to build the core of the page based model
Mediator
JQuery Services Model
Notifications User
Behavior Defined
HTML/CSS
Objects
View
WORLDWARE
CONFERENCE
42. Page 3 of 59
Randori Provides
• A dependency injection model for dealing with business
dependencies
• A injection model for accessing view components
• A mediator pattern to act upon HTML views
• A strongly typed environment for all business logic construction
• Dynamic loading and dynamic resolution of dependencies
• A defined behavior pattern for augmenting and creating ad-hoc
components
• CSS Parsing and decoration for responsive design
• G11n support
• Templating Engine
• Templates capable of WYSIWIG editing
WORLDWARE
CONFERENCE
43. Page 3 of 59
Randori Stack
• Randori has compile time and runtime dependencies.
WORLDWARE
CONFERENCE