Your Guide to the Essential Responsive/Mobile UI Technology Decisions
By Zach Brown, Head of UI Software Engineering, Catalyst UX
Want the secret to making the key UI technology choices that can make your applications responsive
It’s easy: answer 14 questions and summarize your decisions in a Presentation Layer
We found that using these 14 questions to guide your team discussion ensures that you consider all of
the essential issues.
Kendo UI, Angular 2, Bootstrap or React? The choices you make to build even simple responsive/mobile
apps seem endless. What UI controls, libraries and frameworks? SPA app or traditional? What are the
responsive and adaptive requirements, deployment model, mobile feature set? And that’s just the
The whole system is even more challenging. When you finally have it figured out, you have to
communicate to the working team how interconnected technologies fit together. Clearly, you need a
The Catalyst Discussion Guide for Responsive/Mobile UI Technology.
Use this Guide to diagram the Presentation Layer of your app. Then use the diagram to inform the major
development decisions you need for a Responsive/Mobile UI technology.
Here’s our 4-step recipe for making good decisions.
1. Review the Model Diagram. See the 14 issues you’ll need to address.
2. Read the Discussion Guide. Answer the questions for your situation.
Take your time and get accurate answers.
3. Diagram the user-facing aspect of your app. Detail the Presentation
Tier and how users will access it. The rest of the app is there for background.
4. Gain consensus. Get outside validation for your choices and go.
Determine Your Points of Presence:
Will you continue to have your solution accessible via the web? If so, what browsers will
Is there an existing expectation from current users that dictates technology? Are there
limitations in place that require support for older, out-of-date browsers?
What are the planned or intended device types the application will run on?
At a minimum you’ll have Desktop, Tablet or Mobile. In a lot of cases, multiple device types
will be targeted.
Is there a need for complex, real-time processing that requires native functionality to
achieve the required performance or capability?
If the app is operating in a largely disconnected model, and processing and acting on real-time
data, a hybrid container may not be able to perform fast enough. This is more common in machine
command and control environments or applications with a lot of 3D rendering (drone flight
What are the minimum resolutions that need to be supported? Is there a maximum?
This is largely dictated by the intended device types. There is rarely a maximum, especially
with a responsive design.
Evaluate These Presentation Tier Topics:
What is the core UI technology going to be to develop the application?
At least partially dictated by the intended device type, most commonly we see web-based
appropriate (WPF, Swift, Java).
What type of development pattern do we want to introduce when building the UI, keeping in
mind the need to enforce separation of concerns in the UI and to best factor code for
reusability and testability?
The two most common traditional patterns are MVC and MVVM, while newer frameworks like Angular
2 are component-reactive hybrids.
Are there any key, high-level development frameworks we need/want to consider to help
enforce development patterns for view composition?
In order to help us leverage strong development patterns—such as “Dependency Injection,”
“Inversion of Control,” correct separation of concerns, View Routing, etc.—we may want to
consider a framework like Angular 2, React or Caliburn.Micro.
For applications deployed via browser AND mobile/tablet, what hybrid wrapper will be used
and what native hardware functions need to be used (GPS, accelerometer, camera,
Most hybrid wrappers are based on the open-source Cordova container. Commonly, Cordova is used
as is, considering its great integration with IDEs like Visual Studio. Another common, mature
hybrid wrapper—like Ionic—is also viable.
What UI toolkit or library of controls is planned for use?
In a web environment, frameworks like Kendo UI or Ignite UI are very popular and work nicely
with most higher-level frameworks like React or Angular 2. Using a control library eases the
burden of managing and maintaining control functionality across browser/platform versions.
What are the fundamental units of design AND code reuse that we want to use?
Independent panels are designed to be grouped together for reuse across multiple views. Each
panel is responsive and adaptive as a standalone unit.
What type of build system or task runner will be used (if any)?
For web-based environments, the two most common are Gulp and Grunt. In some cases, TFS or
Jenkins is used to provide build and continuous-integration systems.
Where should business logic be managed?
In almost all cases, pure business logic should reside outside of the presentation tier in
either the service layer or a separate business/rules layer. Validation in the UI is limited to
input validation only (required fields, valid email addresses, phone number, credit card, etc.).
What data-exchange format and service type will be used to allow the client application to
talk to the “back end”?
The discussion around data-exchange formats is basically between JSON and XML. With the rise of
REST services and web applications consuming those services, JSON is the most common data
format. While XML can provide more structure and meta information about the data, it also tends
to be larger and more “chatty” in nature. Both formats are usually easily consumed by any
application type on any platform.
Where do data-based operations like sorting and filtering happen?
Depending on the size of the record (i.e., how many properties or “columns” per record),
datasets in the range of 200-500 are easily and performantly manipulated within the client UI
regardless of native or web-based technology. Records greater than 500 will typically need to be
managed on the back end in order to respect over-the-wire data-transfer size, latency, etc.
Back-end processing will often also need to be page aware, allowing data grids to be paged
WHAT TO DO NEXT
Best practice calls for outside validation of your technology choices. You can get it FREE, for the first
90 minutes, directly from Catalyst UX.
To schedule a Responsive/Mobile UX Technology validation or to learn more, click below. Tell
us your company name and your preferred contact method. That’s all it takes to pave the technology path
to a responsive/mobile UX for your application.
We design and build user experiences for complex Medical, Life Science, Financial, IoT and Cloud