Monday, November 23, 2015

Our Adventures into Creating a Secure MVC Framework - Part 3 - Experimentation

Now that we have defined our design requirements, we needed to determine the tools and approach that we would use to create our framework.

We had created previous versions of iPhora Touch using Dojo and wanted to start from scratch on what tools we would use to create our framework. Everyone that I talked to asked me why I was using Dojo since it is big and slow.  So we started looking at different options.  Do we take one of the existing more bare bones MVC framework like Backbone and take components from them to create our framework or do we start totally from scratch using JavaScript or jQuery.

There are so many frameworks out there it is amazing. You can find many examples of MVC frameworks in action at It was very difficult reading up on each framework, understanding them, and experimenting with them to see if they would work for us. Since we were already familiar with Dojo, we decide to start from there.  We found a couple of articles and frameworks that others had already done. However, as usual documentation was lacking.  What we did find was a very basic framework created by Christian Hoegl called Dojorama, and this served as our starting point. However it was built using version Dojo 1.9 the AMD version of Dojo.

Though we have been using Dojo for many years, we were using the non AMD version of Dojo and to us the new approach was like reading a foreign language. The structure of Dojo AMD and how it is used is totally different than previous versions of Dojo.  You had to type so much more code in order to do the same thing.  It seems ridiculous to us at that time. We struggled to make sense of what Christian was discussing. It seem to be too much work.  So we drop Dojo as a possible approach.

We tried Backbone, but we had to rewrite many of our widgets that we already created in Dojo.  In addition, we had to write more code to integrate with Backbone. Therefore, we dropped Backbone and went back to Dojo. So we spent many weeks learning and understanding the AMD approach used in newer versions of Dojo. Like always, most articles only presented simple examples.  We were struggling to understand the newer approach since our mindset on how to approach a problem was totally different.

As a precursor to further our discussion, we need to talk about Dojo widgets. A Dojo widget is a collection of HTML template and JavaScript. One hot topic of discussion in the Web development in recent years has been the concept of web components.  However, in Dojo this concept is no more than just a Dojo widget. Therefore, the concept of view/controller, it is just a Dojo widget.

A Dojo widget does not need to be a combobox or a field, it is can be as simple or comprehensive as you want it to be.  The class inheritance nature of Dojo widget makes it possible to extend the Dojo widget concept from being just a simple widget to a container widget or even something bigger and much more complex that inherits behavior from parent widgets.  The critical part that Dojo provides is the ability to create classes, superclasses, and class inheritance without having to create your own structure. This is one of the biggest advantages that most developers using Dojo have never utilized. Unless one has created complex Dojo widgets, one probably would not be familiar with these features. The OOP nature of Dojo with classes forces you to follow structured design patterns which makes it much easier for others to follow and manage your development process.

When a Dojo widget starts up it goes through a series of lifecycle methods including:
  • constructor
  • postscript
  • create
  • postMixInProperties
  • buildRendering
  • postCreate
  • startup

This lifecycle methods define how a widget is created, initiated, and displayed. A Dojo widget can inherit the behavior and functionality from superclasses or from other widgets.  In addition to these 7 lifecycle method for creating a widget you also have one method to destroy the widget.
  • destroy
For almost all cases the only one you normally would be using are:
  • constructor
  • postCreate
Most of the time, if you are using a multiple page application, you would never need to call the destroy method since the widget will be destroyed as a you navigate between pages. For a single page application however, the destroy method is critical. What we learned as we will discuss later, the standard Dojo lifecycles was not sufficient for us and we had to create many of our own in order to make everything work the way we needed to.

With this body of knowledge and experience we went back to the Dojorama framework to see if you can utilize any of the concepts presented by Christian to create our framework. Christian treated a web page simply as a Dojo widget.  As one navigates between pages you were displaying a different widget. The Dojo widgets (pages) were containers with simple HTML element inside. He used Javascript within each container to controller the behavior of the elements within each view.  This immediately hit us that the use of Dojo widgets in creating our MVC framework was the right direction.

Since we wanted iPhora Touch to be a multi-pane single page application, the structure need to be far more complex while being more robust.  The HTML components within a Dojo widget page needed to be complex Dojo widgets and they themselves can be containers contain widgets.  So we came up a layered Dojo widget based architecture that had the following structure.

Each layer was a Dojo widget starting from the core application layer all the way up to a widget like a combobox.

Next time:  Creating the Architecture - Dojo Widget Galore

Thursday, November 12, 2015

Our Adventures into Creating a Secure MVC Framework - Part 2 - Design Requirements

When we created iPhora Touch version 2, it was a multiple page application that utilized Dojo 1.53 and Bootstrap 2.32.  The interface worked well on desktops but broke down when used on tablets. It was totally unusable in a phone environment.  Since it was a multiple page solution each page needed to reload Dojo as you jump from page to page. Since we wanted a secured environment, pages could not be cached. However, this slowed down the loading and response of each page.  Since we were using Dojo 1.53 at the time we did not benefit from any form of AMD.

iPhora Touch V2 Community Home Page

We wanted to redesign the interface to work well with mobile devices and desktops, have better performance, but at the same time to be a secured environment.

Though our iPhora Touch solution is a social community-based solution, we designed it to be a closed environment by default and it is assumed that you are not allowed access to anything, which is contrary to how most social collaboration platform are designed.  Social collaboration no matter how any analyst or others spin it, is all about data. Who has access to this data needs to be securely controlled. Being openly social and with no control leads to data breaches. Security is not just about SSL, firewalls, and encryption.

So for any community you may have access to one piece of information at any given state, but in another one you may have no access or limited access.  This holds true not only within a community but all the way down to individual web containers and components part of a community.

So the challenge was to create an infrastructure and interface that met these requirements. Over the course of many months, we looked at many interfaces and did not find anything that we thought was appropriate. I asked my oldest son who is an industrial designer on design, but that was of no avail.  So it was a struggle to find something that would work.

My youngest son is a big user of Pandora and was listening to music when I noticed their application on his iPad.  I thought to myself this is a nice and simple interface, but very powerful. So I borrowed his iPad and played with Pandora for hours trying to understand its functionality. Unfortunately, there was a number of things that I thought was not usable for us, but it was a good starting point, a design inspiration. The multiple pane approach is what we needed, but how in the heck do we implement something like that. Many of the cool things it did we did not need or I was not sure we could even do on a web browser-based interface.

So using my favorite mockup tool, Balsamiq, I moved forward in laying out what the next version of iPhora Touch would might look like.  So we came up with a multiple pane environment that is shown below.  Depending on the state of the application some panes would be hidden and some not.  Many application used a similar approach including applications like Facebook on the phone.

This was the easiest part.  The challenge was to create a multi-pane single page application framework and make it work.

So we came up with our design requirements and they were as follows:
  • The JavaScript library that would be used to drive iPhora Touch need to utilize AMD to reduce the loading process
  • The JavaScript library components needed to only load once during a session and when needed.
  • Each pane needed to have its own independent security environment but at the same time could be dependent on the state of a different pane and controlled by the application developer
  • The content of each pane had to handle multi-state of existence:
    • Fully Cached, where both the view and scope is cached
    • View Cached, where only the view is cached and scope is destroyed after use
    • No Cached, where both the view and scope are destroyed after use.
    • Defined Cached, where the existence of view and scope is programmatically controlled by the application developer or the server
  • No data can be stored locally on the client, but create the illusion that data is local
  • The MVC framework had to handle not only the defined pane structure shown above, but needed to function in any multiple pane layout that one can come up with. For example, it should easily function in a three pane environment shown below.
  • All web container and components had to inhere to iPhora multiple level state environment. What this means is that for any web component there is a number of possible state of existence and the state in which it exist varies depending on the level of user access at any given time within its parent.
  • The MVC framework had to use dynamic routing. Since the state of any content within a pane is dynamic and ever changing, routing needed to be dynamic so static hash tag routing was totally out.
  • Data binding for components needed to be controlled by the application designer rather than being automatically performed by the system.
  • Web containers and components within a pane had to inherit the security of its parent container
  • All web containers and components needed to be generated dynamically and can not pre-exist since it is dependent on what a user is doing as it interacts with the application.
  • The MVC framework had to function with the iPhora RESTful APIs controlled by the Gatekeeper on the server.
  • The framework had to be lightweight and as small as possible
  • It needed to function in all favors of web browsers, both desktop and mobile devices (modern versions)
  • It needed a responsive UI.

Alternative Multi-pane layouts

So these were the design requirements and which there are many.

Coming next time, Part 3 - The Experiments

Friday, November 6, 2015

Our Adventures into Creating a Secure MVC Framework - Part 1 - Introduction

As I was writing this series, it cause me to rethink some approaches and redesign part of our MVC framework. Therefore, it took me a bit longer to start this series than I thought. But here goes.

The concept of Model-View-Controller MVC can be implemented in two ways, using a server-side component framework that generates the Web application interface/view or as a JavaScript framework that gets data from the server and generates the Web application interface/view .

In this series, we will be discussing how we created and implemented a JavaScript MVC framework. If you a Java developer and would like to implement a server-side MVC framework, Vaadin is a good server-side MVC framework to look into.  For developers in the XPages community, Ulrich Krause and Paul Withers has been blogging about Vaadin.

Each approach has its advantages and which approach you use is based on your development skills, tools, and architecture of your web application. If you are a XPages developer and plan to continue implementing web applications strictly on the server-side, I suggest you seriously look into Vaadin and move away from the whole XPages approach.  Vaadin provide you a more standardized and reusable approach.

What is an MVC Framework?
The goal with most MVC framework is to separate the application into 3 primary components that are use to generate the interface used to interact with the data, the model (data), the view (presentation), and the controller (manipulator).

If you are using a server-based approach, everything is done on the server. For a JavaScript-based MVC, the client retrieves the data and templates from the server. The controller facilitates the binding process and interface manipulation to generate what you see on the device. One addition component is the router which facilitates the communication between the client and the server.  For our architecture, the router is a separate component layer.  In some frameworks it is part of the model.

They are many different derivatives of the MVC concept. Some are very basic and some more encompassing. The model can reside both in memory and in local storage. In some approaches, the model structure is a directly reflection of the data on the server and the data is automatically synced. The controller always accesses the model locally whether in memory or local storage. As a result, any changes to the local data propagates back to the server.

MVC frameworks can implement either a one-way or bi-directional binding of the model with the view. Bi-directional binding significantly reduces the need to manage the data. One of the best examples of MVCs utilizing bi-directional binding is Angular. At this time, it is the most popular JavaScript-based MVC framework. Marky Roden has done a number of blogs and presentations at MWLUG and IBM Connect relating to Angular. Angular makes it easy for you with the help of some CSS create some very nice applications. Dojo also provides the ability for this two-way binding process, but it requires must more coding than Angular.

Two-way binding is great, but what happens when you start applying strict security rules on read/write/delete access that dynamically changes during a session. Well, the beautiful bi-directional binding falls apart and everything you do becomes a hack.

Secure MVC framework
As I mentioned in my prologue, our goal was to create a secure MVC framework. So what constitutes a secure MVC framework versus a regular MVC framework? A secure MVC framework has to perform like a regular MVC framework, but must take into account that data and information security trumps over the user interface. At no time can data reside locally on the client. It should only be in memory and if it is no longer needed it should automatically be destroyed. It needs to work in an environment where user access to any particular data at any instance is dynamic, access level is dynamic and may be revoked at any time during a session. It needs to respond accordingly to handle multi access level from the application level all the way up to the widgets level.

In addition, our framework needed to be server technology agnostic and work in a multiple pane environment where user access rights maybe different for each pane. So that was our goal.

Coming Part 2, Design Requirements

Thursday, October 22, 2015

Fall 2015 GRANITE LUG Meeting, December 2, 2015

Fall 2015 GRANITE LUG Meeting

December 2, 2015
IBM Center
Downtown Chicago
Room 6601

Come join us for the fall 2015 GRANITE Lotus User Group meeting.  We have a packed day of presentations for administrators, developers and managers.
Breakfast and lunch will be generously provided by Ytria, Inc.

To register for this event go to:

For community members that can not attend in person, Ytria has set up a web broadcast for this event.

8:30 AM - 09:00 AM
Breakfast and Networking

ben9:00 AM - 10:00 AM
Mastering Your Logs, Everything You Should Know about Logging in IBM Domino
Presenter: Benedek Menesi, Head of Product, Ytria Inc.
Domino Properly logging and monitoring what happens in your Domino environment is critically important for both security and performance. In order to get the most out of your log data when things go wrong, it’s vital to understand its structure, how and what is (or isn’t) logged, and how to search logs effectively. In this in-depth session we will talk about the inner workings of various Domino logging mechanisms by dissecting the structure of log event documents such as Miscellaneous, Replication, Usage Session, User Activity etc. You’ll learn how to deal with verbose logging, retention best practices, monitoring bottlenecks, as well as behind-the-scenes data such as status codes and how to best use them. After this presentation you will walk away with a solid understanding of your log architecture, the means to set up notifications for when things go wrong and faster ways to find what you’re looking for.

10:00 AM - 10:15 AM

Mike10:15 AM - 11:15 AM
Building on Properties
Presenter: Mike McGarel, Collaborative Solutions Developer, Czarnowski Display Services, Inc.
The custom property can be a simple yet powerful tool for both your UI and data needs. Properties can contain a variety of objects, from strings to Java beans. This presentation will demo practical examples of custom properties in two design elements, the custom control and the XPage.

11:15 AM - 11:30 AM

ben11:30 AM - 12:30 PM
Hands on with Ytria's administration & development tools: understanding your logs, documents, replication, designs, etc. 
Presenter: Benedek Menesi, Head of Product, Ytria Inc.
As a company that has been developing software tools to help IBM Domino Administrators and Developers for over 15 years, we continue to talk to hundreds of customers and assist them with tackling interesting, tedious, and annoying problems every week. During this BYOP session (Bring Your Own Problem), you're welcome to share your own dilemmas as we dive straight into a troublesome live environment to find, understand, and resolve the toughest problems Notes professionals face on a daily basis.  We'll make use of the Ytria tools to get a quicker (and better) understanding of Log.nsf, identify and fix inconsistent replicas, discover and patch security holes, analyze application usage, documents and more. 

12:30 PM - 01:00 PM
Come join us for our stuff pizza lunch and networking with other community members.

01:00 PM - 02:00 PM
Creating a Secure MVC Framework
Presenter: Richard Moy, Managing Director, Phora Group
There are many popular open source MVC frameworks available for developers including Angular, Backbone, Ember, and React. These frameworks make it easy for developers to quickly create dynamic web applications.  However, what do you when these solutions do not meet your needs? You create your own framework. Join Richard for this enlightening presentation on their trials and tribulations in creating their own secure MVC framework.  Richard will describe their experiences, the issues and pitfalls that they encountered and what to avoid.

Tuesday, September 29, 2015

Our Adventures into Creating a Secure MVC Framework - Prologue

Now that MWLUG 2015 is history and MWLUG 2016 is in the planning stage, I can now start writing a series that I have wanted to do for awhile about creating a MVC framework.

This will a multi-part series on my adventure into creating my own MVC framework.  I will be talking about MVC in the generic sense and it will include MV* of all types.

Creating your own MVC framework? Am I out of my mind? Why in the world would you do that you may ask. There are so many popular and great MVC frameworks available including Angular, Backbone, Ember, React, and etc.


When we rolled out iPhora Touch v2 just before MWLUG 2014, the feedback for the interface was lukewarm at best, it was slow since the page had to be refreshed each time and it did not work well on tablets and other devices.  Though we were using Bootstrap the interface it just would not respond the way that we wanted.

So after MWLUG 2014, I set out to figure out a way to improve the design so that it would be faster, more responsive, and easier to maintain.  The previous UI framework was built using Dojo 1.53 which needed a significant amount of Javascript to be loaded before the page would initialize.  So moving forward we wanted a AMD JavaScript framework to reduce the loading time.

We wanted to provide a simple and usable user interface for our iPhora solutions that would work for both desktop and tablets.  In our iPhora technology, the UI is totally decoupled from the server and there is a total separation between the data and the form.  We have never been a big fan of having the server generate the HTML interface. That approach requires you to couple the data with the UI. By decoupling the data and UI, what technology is used to generate the data is irrelevant. Currently, it is Domino, but it could easily be a combination of other propriety or open source technologies.  All information is sent and received through a series of JSON RESTful APIs that is managed by the iPhora Gatekeeper. What information you have access to is based on user authentication, roles, ACLs, and permissions. Note for Domino developers, don't use DAS.

Our approach of using Restful APIs makes the use MVC framework ideal. We have long been intrigued by the different MVC frameworks including the popular ones like Angular and Backbone. So our goal was to replace our entire front end with one of these open source MVC frameworks. Even Dojo has a MVC framework, kind of.

However, the selected MVC framework had to meet a number of criterion including easy adaption to how our iPhora data security model worked. It had to handle our multi-level UI Bootstrap-based widget design that is part of the iPhora security model. It had to be lightweight, while being very structured allowing the use of design patterns to help maintainability. In addition, the goal was to have a multi-pane single page application (SPA) interface to help to reduce the constant loading of core libraries over and over again while allowing for constant changes to what appeared on the screen. Since iPhora is designed to handle sensitive information, we needed to control when and how information was to be cached or destroyed both in memory and visually.

From our research and experimentation, we decide the popular MVC frameworks were not going to meet our needs.  Stuff like bi-directional coupling did not work for us since it is assumed that at every RESTful API call your security level and access might have changed.  Not only that, the security level for each of the multi-panes within the single page application interface may be different.

So our adventure of creating our own MVC framework began.  We rolled up our sleeves, got many 6-packs of beer and started laying out want we needed.

Next time, Design Requirements.

Thursday, September 17, 2015

Get Ready for Another Great ESS aka ICS aka Lotus User Group Conference, ICONUK 2015

If you have not registered for ICONUK 2015, there is still time.  It is coming up next week, September 21-22nd at the IBM Client Centre at IBM South Bank.

Tim Clark has done an amazing job in pulling this conference together.  ICONUK 2015 has over 40 incredible sessions.

If you missed MWLUG 2015, here is your opportunity to attend some of the best sessions for a small donation of 50 pounds to The Rainbow Trust Children’s Charity.

To register go to:

Sunday, August 23, 2015

MWLUG 2015 Summary and Beyond

As we wind down MWLUG 2015, I want to express a few thoughts.

My goal each year has been to create a unique and fun event that provides the best of the best in educating and collecting our community regarding our incredible technologies that we have built our careers around. Each year we try something different making the experience a memorable one. This year we had it in the Ritz-Carlton with the Thursday evening event at the Shakespeare Tavern Theater. Unfortunately, I went to the washroom when the best entertainment was on stage. Damn anybody have pictures.

Time to time again you will never see many of the MWLUG sessions at IBM Connect/Lotusphere/IBM Connect ED. The more out of the box from what IBM is telling you the better.  I don't care if you are new to speaking.  If you can communicate and have a topic that would be interesting to the community, then you will be selected. We all have to start from somewhere. Truly great speakers practice and learn from their experience.

Louis Richardson who spoke during the Thursday Keynote contacted me right after his session to see if he can see the video of himself so that he can improve on it.

For myself, I am not a good speaker because I do not practice enough and ad lip too much. But over the years I have improved. Starting from my first presentation in front of management where my knees where shaking so much that I almost fell down to speaking in front of all of you.

This has been the most successful MWLUG conference we have ever had.  This truly is the result of great support by the community. I want to give a special thanks to Lisa and Darren Duke for making this happen.  It takes a lot of work and risk to create such a conference. Each year I have to personally guarantee the hotel. So the support of others in the community is extremely important. Ray Bilyk and I worked on the secret surprise for close to a year and it turned out great.  Ray had to try a couple of times to get it right the way he wanted.

When Gregg Eldred and I conceived MWLUG in 2008, our goal was to create a local Midwest conference to help connect Midwest members of the ICS community together, learn, network, and have fun. Over the years I have connected to other community members that I would not have ever met many who have become good friends.

Over the years, participation in MWLUG has been growing outside of the Midwest region. So when we were looking at MWLUG 2015, we evaluated each city based on the voting and the possible participation and local support. The success of the conference relies on significant support by the local community members along with all the sponsors, speakers, and volunteers.

Many have commented on how come Atlanta was chosen this year for MWLUG.  It is technically not part of the Midwest region of the United States. Of all the cities we looked at not only did Atlanta receive the most votes, but the local support was truly solid.

The success of MWLUG 2015 I would say without a doubt was the result of receiving help from Lisa and Darren Duke. Without them, I would have not consider organizing MWLUG 2015.

So as I evaluated whether we should have MWLUG for 2016, local support was my number one priority.  My participation for MWLUG in 2016 needed to be reduced since I need to spend more time on other things. I provided feelers out there based on five cities and Austin was just a thought and was not even a significant consideration. However, as I talked to individuals from Texas, they were not only enthusiastic but they were willing to step up to the plate to give me the support. The same enthusiasm that Lisa and Darren Duke provided for MWLUG 2015.

So as we wind down this years event. We decided that MWLUG 2016 will be in Austin, TX. So if we continue MWLUG into 2017 and you want your city to be the host city, then start telling us why we should have MWLUG in your city and what you are willing to do to help.

I already have in my mind a few surprises that we have never done before. So stay tune.

Highlights of MWLUG 2015

  • Meeting everyone in the community, that is what it is all about
  • Fitting 54 sessions in less than 3 days
  • William Malichsky in a bow tie
  • Surprise on Devin Olson's face when we pulled out the secret gifts of MWLUG 2015, MWLUG Beer
  • The mystery flasher at the Shakespeare Tavern Theater
  • The mystery flasher at the CGS
  • Presentation by Professor Katherine Rhodes Fields and learning why uppercase and lowercase are called that way
  • Tony Holder and Ulrich Krause stepping up to help us to get non-urine beer
  • IBM getting us the additional funds that we needed to add additional attendees after we had no more funds
  • Ritz-Carlton have amazing bathrooms in the Ballroom
  • Meehan's where majority of us hung out in the evenings
  • Louis Richardson's presentation
  • And finally the most important thing being with my family. Without them it would be hard to get this off the ground.

See everyone in MWLUG 2016 in Austin Texas

Sunday, August 16, 2015

Business Partner Development Session at MWLUG 2015

If you are IBM business partner coming to MWLUG 2015, we are please to announce the BP session for Wednesday, August 19, 2015.  The session will start at 12:30 PM in the Congress room.  Our friend and community member William Malchisky will help start off this session.

Below is the abstract for this presentation.

The Business Partner Development session is provided in two cohesive parts allowing for significant feedback and learning. First, join Bill Malchisky and Prabu Ayyagari as they engage the audience in solution-based dialogue around hot topics within Voice of the Partner and provide your feedback directly to IBM. Be certain you will be provided the last information on that project.

Second, Larry McCants and Ernie Sutter from IBM's Social Business and Digital Experience Channels have plenty of product updates and demonstrations of IBM's Social Business product portfolio including IBM Social Messaging & Collaboration solutions, IBM Connections, and IBM Connections Cloud--IBM Verse inclusive. There will also be an update on the IBM Business Partner program plus an open discussion and Q & A session on how existing IBM Business Partners can make more money selling IBM Social Collaboration and Digital Experience solutions and services.

If you are a business partner, this is a key session during your time in Atlanta.

Note: To ensure that your voice is heard, we reserved the Georgia Room for one-on-one meetings with Prabu on Wednesday afternoon and all day Thursday. Please make sure you book some time with him.