
{"id":2234,"date":"2015-09-16T16:02:19","date_gmt":"2015-09-16T16:02:19","guid":{"rendered":"http:\/\/www.codergears.com\/Blog\/?p=2234"},"modified":"2015-09-16T16:02:19","modified_gmt":"2015-09-16T16:02:19","slug":"exploring-another-mvc-variant-puremvc","status":"publish","type":"post","link":"https:\/\/codergears.com\/Blog\/?p=2234","title":{"rendered":"Exploring another MVC variant : PureMVC"},"content":{"rendered":"<p style=\"color: #555555;\">According to MVC definition from wikipedia:<\/p>\n<p style=\"color: #555555;\">\u201cModel View Controller (MVC) pattern creates applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements.\u201d<\/p>\n<p style=\"color: #555555;\">We can enumerate many\u00a0MVC frameworks : MVC1, MVC2, MVC3,\u00a0<a style=\"color: #2970a6;\" href=\"http:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93presenter\">MVP<\/a>,\u00a0<a style=\"color: #2970a6;\" href=\"http:\/\/en.wikipedia.org\/wiki\/Model_View_ViewModel\">MVVM<\/a>\u00a0and<a style=\"color: #2970a6;\" href=\"http:\/\/en.wikipedia.org\/wiki\/PureMVC\">PureMVC<\/a>.<!--more--><\/p>\n<p style=\"color: #555555;\">In this article we try using\u00a0<a style=\"color: #2970a6;\" href=\"http:\/\/www.jarchitect.com\/\">JArchitect<\/a>\u00a0to discover the PureMVC in depth, and talk about the main difference between it and the other variants.<\/p>\n<p style=\"color: #555555;\">PureMVC was popularized first by Flex and Flash developers, but it was ported after to many other languages. The following\u00a0<a style=\"color: #2970a6;\" href=\"https:\/\/github.com\/PureMVC\/puremvc-java-demo-gwt-employeeadmin\">GWT sample<\/a>\u00a0use the java PureMVC framework, let\u2019s analyze it to explore the PureMVC concepts.<br \/>\n<span id=\"more-273\"><\/span><br \/>\n<span style=\"font-weight: bold; color: #3333ff;\">PureMVC basic Concepts<\/span><\/p>\n<p style=\"color: #555555;\">Here\u2019s the structure of the project<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/11\/structure.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-290\" title=\"structure\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/11\/structure.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">This structure shows the main PureMVC concepts:<\/p>\n<ul style=\"color: #555555;\">\n<li>Facade: Initializes and caches the core actors (model, view, and controller) and provides a single place to access all of them.<\/li>\n<li>Proxies: Expose an API for manipulating the data model ,including data retrieved from remote services.<\/li>\n<li>Mediators: The view communicates with their Mediators using Events and exposing some properties for the concrete Mediator to inspect or manage. A Mediator connects a View Component with its data and communicates with the rest of the system on its behalf.<\/li>\n<li>Commands: A Command may retrieve and interact with Proxies, communicate with Mediators, or execute other Commands. Commands are often used to orchestrate complex or system-wide activities such as application startup and shutdown.<\/li>\n<\/ul>\n<p style=\"color: #555555;\">The PureMVC best practices encourage developers to put each actor into a specific package, to modularize better the application.<\/p>\n<p style=\"color: #555555;\">The matrix gives us more details about dependency weight between all namespaces.<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/11\/matrix2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-277\" title=\"matrix\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/11\/matrix2.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p>There\u2019s no dependency cycle, it\u2019s well layered what makes it very clear and simple to understand.<\/p>\n<p style=\"color: #555555;\"><span style=\"font-weight: bold; color: #3333ff;\">The PureMVC glue<\/span><\/p>\n<p style=\"color: #555555;\">To go deep inside the sample let\u2019s discover the dependency graph between all classes<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/notif.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-293\" title=\"notif\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/notif.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">What\u2019s interesting in this dependency graph, is that almost all classes uses INotification.<\/p>\n<p style=\"color: #555555;\">PureMVC use the publish-subscribe pattern to communicate between all actors(Model,View,Controler), and for this reason INotification is mainly used, and to check that let\u2019s discover the most popular types, for that we can use the TypeRank metric.<\/p>\n<pre style=\"color: #555555;\">SELECT TOP 100 TYPES ORDER BY TypeRank DESC, TypeCa DESC\r\n<\/pre>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/typerank2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-305\" title=\"typerank\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/typerank2.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">The three most popular types concern notification mechanism, what\u2019s proof that this concept is the glue of the PureMVC framework, almost all communication between actors use notification, that make them less coupled.<\/p>\n<p style=\"color: #555555;\">Publish\u2013subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers. Published messages are characterized into classes, without knowledge of what, if any, subscribers there may be. Subscribers express interest in one or more classes, and only receives messages that are of interest, without knowledge of what, if any, publishers there are.<\/p>\n<p style=\"color: #555555;\">This allows asynchronous, event-driven communications between the actors of the system, and also promotes a loose coupling between those actors, since the subscriber never needs to have direct knowledge of the publisher.<\/p>\n<p style=\"color: #555555;\">For our sample we can search for all classes using Notifier class to notify the other actors.<\/p>\n<pre style=\"color: #555555;\">SELECT METHODS FROM JARS \"PureMVC\"  WHERE \r\nIsDirectlyUsing \"<span class=\"skimlinks-unlinked\">org.puremvc.java.multicore.patterns.observer.Notifier<\/span>\"\r\n<\/pre>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/notifused1.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-317\" title=\"notifused\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/notifused1.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">Almost all actors: Mediators, Commands and proxies use the notification mechanism to communicate with each others.<\/p>\n<p style=\"color: #555555;\">Here\u2019s a concrete example of adding a new user from view.<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/notification21.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-296\" title=\"notification2\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/notification21.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">In this sample the mediator ask the proxy to add a user and after send a notification to inform all the other components that a user was added.<\/p>\n<p style=\"color: #555555;\">What\u2019s interesting to note here is the fact that the mediator communicate directly with the proxy, in PureMVC, proxies can\u2019t act as subscribers, and can only publish notification.<\/p>\n<p style=\"color: #555555;\"><span style=\"font-weight: bold; color: #3333ff;\">Inside PureMVC Concepts<\/span><\/p>\n<p style=\"color: #555555;\"><span style=\"font-weight: bold; color: #3333ff;\">Facade<\/span><\/p>\n<p style=\"color: #555555;\">\u2013 Facade is singleton<br \/>\nIf we search where the facade is instantiated<\/p>\n<pre style=\"color: #555555;\">SELECT METHODS WHERE \r\nDepthOfCreateA \"<span class=\"skimlinks-unlinked\">org.puremvc.java.multicore.patterns.facade.Facade<\/span>\" == 1<\/pre>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/facade2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-308\" title=\"facade\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/facade2.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">Only one static method getInstance instantiate it, this method has one parameter, so we can create many facades, each component has its own singleton facade identified by a name, and it\u2019s why we talk about PureMVC MultiCore.<\/p>\n<p style=\"color: #555555;\">\u2013 Facade Initialization:<\/p>\n<pre style=\"color: #555555;\">SELECT METHODS WHERE \r\nIsDirectlyUsedBy \"<span class=\"skimlinks-unlinked\">org.puremvc.java.multicore.patterns.facade.Facade<\/span>\"<\/pre>\n<p style=\"color: #555555;\">The facade initializes all the other actors.<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/facadeinitialize.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-309\" title=\"facadeinitialize\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/facadeinitialize.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">\u2013 Facade and notification:<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/11\/notification31.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-283\" title=\"notification3\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/11\/notification31.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">The facade caches all actors, and when a notification is published, the facade notifies all observers.<\/p>\n<p style=\"color: #555555;\"><span style=\"font-weight: bold; color: #3333ff;\">Commands<\/span><\/p>\n<p style=\"color: #555555;\">Let\u2019s search for all methods used by DeleteUserCommand, the command responsible of deleting a user.<\/p>\n<pre style=\"color: #555555;\">SELECT METHODS WHERE \r\nIsDirectlyUsedBy \"<span class=\"skimlinks-unlinked\">org.puremvc.java.multicore.demos.gwt.employeeadmin.controller.DeleteUserCommand<\/span>\"<\/pre>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/command.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-314\" title=\"command\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/command.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">The command doesn\u2019t communicate directly with other components, except for the proxy as we observed before.<\/p>\n<p style=\"color: #555555;\"><span style=\"font-weight: bold; color: #3333ff;\">Mediators<\/span><\/p>\n<pre style=\"color: #555555;\">SELECT METHODS WHERE \r\nIsDirectlyUsedBy \"<span class=\"skimlinks-unlinked\">org.puremvc.java.multicore.demos.gwt.employeeadmin.view.UserFormMediator<\/span>\"<\/pre>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/mediator1.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-311\" title=\"mediator\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/mediator1.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">Like Commands, mediators use mainly notifications to interact with other classes except for proxies.<\/p>\n<p style=\"color: #555555;\"><span style=\"font-weight: bold; color: #3333ff;\">Proxies<\/span><\/p>\n<p style=\"color: #555555;\">The question that makes a difference using PureMVC and gives us three more other variants is:<\/p>\n<p style=\"color: #555555;\">Who communicate with the proxy?<\/p>\n<p style=\"color: #555555;\">Here we can differentiate between three ways used by developers using PureMVC:<\/p>\n<p style=\"color: #555555;\">\u2013 Only Commands use proxies: we suppose that only commands have to abstract the logic of the application, this solution makes the code more reusable, for example deleteuser could be used by many classes, and if this logic exist in mediator instead of command, we have to duplicate the code if another mediator need to also delete a user.<\/p>\n<p style=\"color: #555555;\">\u2013 Commands and mediators use the proxy: For our sample it\u2019s what happens, the AddUser is invoked from a mediator and the deleteuser from a command.<\/p>\n<p style=\"color: #555555;\"><a style=\"color: #2970a6;\" href=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/model.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-312\" title=\"model\" src=\"https:\/\/javadepend.files.wordpress.com\/2011\/12\/model.png?w=595\" alt=\"\" \/><\/a><\/p>\n<p style=\"color: #555555;\">\u2013 Only Mediators use proxies and commands are used only for startup: Some developers prefer not use Commands and use only Mediators, to not add more classes and maybe more complexity to the code.<\/p>\n<p style=\"color: #555555;\">The main difference between PureMVC and the other variants, is the way that all actors communicate with each other\u2019s, PureMVC choose the asynchronous and the less coupled solution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>According to MVC definition from wikipedia: \u201cModel View Controller (MVC) pattern creates applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements.\u201d We can enumerate many\u00a0MVC frameworks : MVC1, MVC2, MVC3,\u00a0MVP,\u00a0MVVM\u00a0andPureMVC.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-2234","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=\/wp\/v2\/posts\/2234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2234"}],"version-history":[{"count":6,"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":2240,"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions\/2240"}],"wp:attachment":[{"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codergears.com\/Blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}