Want the secret to making the key UI technology choices that can make your applications responsive and/or mobile?

It’s easy: answer 14 questions and summarize your decisions in a Presentation Layer Diagram.

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 Presentation Layer.

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 diagram first.(Create your own diagram using the blank one on the last page.)

Your Guide to the Essential Responsive/Mobile UI Technology DecisionsBy Zach Brown, Head of UI Software Engineering, Catalyst UX

www.CatalystUX.com 1.800.313.7874

Determine Your Points of Presence:

Will you continue to have your solution accessible via the web? If so, what browsers will you support?

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 control, games).

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 technologies (HTML, JavaScript, CSS). In other cases, native technologies may be more 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, notifications)?

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.

continued...

We design and build user experiences for complex Medical, Life Science, Financial, IoT and Cloud software.

Check us out: Medical | Life Science | Financial | IoT | Cloud

01

02

03

04

05

06

07

08

09

10

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 or email business@catalystUX.com with the word “Validate” in the subject line. 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.

CLICK HERE

www.CatalystUX.com 1.800.313.7874

We design and build user experiences for complex Medical, Life Science, Financial, IoT and Cloud software.

Check us out: Medical | Life Science | Financial | IoT | Cloud

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 correctly.

11

12

13

14

www.CatalystUX.com 1.800.313.7874

We design and build user experiences for complex Medical, Life Science, Financial, IoT and Cloud software.

Check us out: Medical | Life Science | Financial | IoT | Cloud

Here’s our 4-step recipe for making good decisions.

(Use this chart to jot down your 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.