• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Randori design goals and justification
 

Randori design goals and justification

on

  • 2,312 views

Problem statement and architectural ideas for approaching large JavaScript projects

Problem statement and architectural ideas for approaching large JavaScript projects

Statistics

Views

Total Views
2,312
Views on SlideShare
2,312
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Randori design goals and justification Randori design goals and justification Presentation Transcript

    • Page 0 of 59Randori Design Goals and Justification Michael Labriola WORLDWARE CONFERENCE
    • Page 3 of 59 TerminologyIn our parlance, the client side of an application looks likethis: Σ WORLDWARE CONFERENCE
    • Page 3 of 59 Traditional UI ModelThe model followed by Flex, Silverlight, GWT, ExtJS andothers goes something like this:Ultimately, it is the developers job to create the userinterface through code. WORLDWARE CONFERENCE
    • Page 3 of 59 Problem 1The problems with thismethod were numerous.Most importantly, each timea design change needs tooccur, our most expensiveresources, developers,needed to be involved. WORLDWARE CONFERENCE
    • Page 3 of 59 Problem 2In a world of inconsistent rendering of the user interface,the problem compounds dramatically. WORLDWARE CONFERENCE
    • Page 3 of 59 Proposed SolutionMany organizations have tried to solve this problemthrough abstraction and encapsulation WORLDWARE CONFERENCE
    • Page 3 of 59 Problem 3This abstraction layer is destined to grow larger over timeand you generally pay for the compatibility even if you arenot using it WORLDWARE CONFERENCE
    • Page 3 of 59 Problem 4There is an inherent lag in the maintenance of theabstraction layer. When a new feature is released, yourarely have immediate access and if there is a bug, you arewaiting for an API revision. WORLDWARE CONFERENCE
    • Page 3 of 59 UI Round UpOur most expensive resources are involved in the mosttime consuming process, that requires the most iterationand is the most likely to grow in scope as browserscontinue to add features.Translates to : Death Spiral WORLDWARE CONFERENCE
    • Page 3 of 59 Business Logic ExpectationsIn our experience, developers of business logic havedifferent expectations of a language and environment thando UI designers. They expect things like: – Strong Types – Refactoring Support – Code Completion / Type Assist – Object Oriented – Unit TestingIn general, these developers are used to more maturelanguages and tools. WORLDWARE CONFERENCE
    • Page 3 of 59 Contrasted WithFrom 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
    • Page 3 of 59 Proposed SolutionThere have been multiple attempts at giving users theability to cross-compile projects to JavaScript to retainthese features. Some have been moderately successful,but all retain the original fatal flaw:Additionally, cross-compilation techniques that attempt toaddress UI lengthen the lag between new browser featuresand/or bug fixes and their use in a project. WORLDWARE CONFERENCE
    • Page 3 of 59 Cross CompliationWe don’t however believe that cross-compilation isinherently flawed. Its the cross-compilation of UI thatcauses the problems noted previously.Cross-compilation of business logic can work quite well,providing for the needs of the business logic developer butallowing for the needed deployment model. WORLDWARE CONFERENCE
    • Page 3 of 59 Separation of ConcernsThe interesting issue is that all of these solutions attempt tosolve the problem at the expense of good separation ofconcerns.HTML/JavaScript actually natively has a reasonably goodseparation between visual design and code.We believe an adequate solution only comes fromembracing that ability instead of side-stepping it WORLDWARE CONFERENCE
    • Page 3 of 59 A ProjectThis is our view of the time required on any given project,per type of work, adjusted for dealing with multiplerendering targets WORLDWARE CONFERENCE
    • Page 3 of 59 Tech ChoicesTherefore we see the technology choices breaking downinto the follow selections. WORLDWARE CONFERENCE
    • Page 3 of 59 HTML/CSS JustificationHTML/CSS is the native way that browsers use to createand 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 coredevelopers and hence there is a significant economy forallowing these resources to handle the most timeconsuming portion of the process WORLDWARE CONFERENCE
    • Page 3 of 59 JavaScript JustificationThere are some tasks which require understanding of thebrowser and deep knowledge of the virtual machine inwhich the code is executing.JavaScript is the native languages of this environment. Likean 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 sameconcerns addressed previously. WORLDWARE CONFERENCE
    • Page 3 of 59 Business Logic JustificationThe business logic of the system should not need to knowmuch about the environment in which it is executing.If the business logic does have this deep knowledge, wehave a problem with separation of concerns.Business logic can be written in a higher level language,assuming we can abstract away the implementation detailsthrough the use of various APIs. WORLDWARE CONFERENCE
    • Page 3 of 59 Ultimate Design GoalWhat we effectively need is appropriate plumbing to allowthe business logic, JavaScript and HTML/CSS to worktogether seamlessly, but allow enough separation thatthese tasks can be accomplished via separate roles.Doing so is the primary goal of this design. WORLDWARE CONFERENCE
    • 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
    • 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
    • Page 3 of 59 Proposed SolutionUse the correct technology for the correct function and usea framework to enforce strict separation of concerns Σ WORLDWARE CONFERENCE
    • Page 3 of 59 Randori – Seizing ChaosWe just need a safe way to bring them together. We callthat way the Randori Enterprise Framework.It is effectively the lines of the pie chart, rather than the piechart itself. WORLDWARE CONFERENCE
    • Page 3 of 59 HTML PagesThe 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 afragment – 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
    • Page 3 of 59 MediatorEach HTML page can define a mediator. A mediatorcontains 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 twoways WORLDWARE CONFERENCE
    • Page 3 of 59 Mediator DefinedMediators can be defined in line via a data-mediatorattribute. This attribute causes the appropriate mediator tobe 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
    • Page 3 of 59 Mediator CSSMediators can also be defined in CSS, which has theadvantages 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
    • Page 3 of 59 Mediator View InjectionMediators gain access to parts of the view by asking forreferences to be injected. In this way, the layout of the viewis 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
    • Page 3 of 59 Mediator InjectionMediators, like other classes written in C#, can indicate thatthey require additional classes that need to be injected asproperties, methods or via the constructor.public class MyMediator : AbstractMediator { [View(required = true)] public jQuery someContainer; [Inject] public UserService service;} WORLDWARE CONFERENCE
    • Page 3 of 59 DependenciesAs the C# is compiled, we are able to observe and notedependencies. As such, when MyMediator is requested,we can know that UserService must be load first. Thiscan occur recursively to any depth.We can do this automatically, without requiringdependencies to be manually noted or maintained.public class MyMediator : AbstractMediator { [View(required = true)] public jQuery someContainer; [Inject] public UserService service;} WORLDWARE CONFERENCE
    • Page 3 of 59 View/Business SeparationRaw HTML nodes can be injected into the View. When thisoccurs, you are provided a reference to the node wrappedin jQuery.However, this leads to bad coupling wherein the mediatordoes too much visual manipulation. The mediator should beabout business logic and only communicate via fullymockable APIs. WORLDWARE CONFERENCE
    • Page 3 of 59 BehaviorTo help enforce this separation, there is a concept of abehavior. A behavior is reusable functionality thatmanipulates or works within a given HTML node.•Can be written in C# or JavaScript directly•Intended to provide a clean, ‘close to the metal’ approachwhere JS devs can work on complex behavior, but exposeit to the C# business logic via a known public interface•Any page can have (n) behaviors WORLDWARE CONFERENCE
    • Page 3 of 59 Behavior DefinedBehaviors can be defined in line via a data-mediatorattribute. This attribute causes the appropriate behavior tobe 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
    • Page 3 of 59 Behavior CSSBehaviors can also be defined in CSS, which has theadvantages 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
    • Page 3 of 59 JS/C# MappingOn the C# side, we can create compile-time constructs thatdefine the contents of an external library.For example, here is a snippet of code that defines part ofthe 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
    • Page 3 of 59 JS/C# MappingThis code is only used during development to ensure statictype checking, provide code hinting, etc. It simply providesa definition for a class that will be available at runtime.The actual Crypto library is written in JavaScript. Throughthis technique, we can use any existing library written inJavaScript, but use it from our C# code… and mock itduring testing. WORLDWARE CONFERENCE
    • Page 3 of 59 Some Existing Libraries• jQuery • ExtJS• KnockoutJS • TinyMCE• KendoUI • QUnit• PhoneGap • jQueryUI• Sencha-Touch • Raphael• jQueryMobile • KineticJS• jQTouch • SignalR WORLDWARE CONFERENCE
    • Page 3 of 59 BehaviorsThis same capability allows our behaviors to be writtencompletely in JS where performance and/or code reusebenefits us, however, each of these interfaces is thenavailable to the mediator. WORLDWARE CONFERENCE
    • Page 3 of 59 Behavior/Mediator InjectionWhen a behavior is defined for a node, the Mediator isgiven access to the behavior instead of the node. Throughthis 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
    • Page 3 of 59 Randori Enterprise FrameworkThis begins to build the core of the page based model Mediator JQuery Services Model Notifications User Behavior Defined HTML/CSS Objects View WORLDWARE CONFERENCE
    • 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
    • Page 3 of 59 Randori Stack• Randori has compile time and runtime dependencies. WORLDWARE CONFERENCE