User experience

Web applications inherently provide their experiences through a user interface, and application authors need to consider a wide variety of factors to best present this interface to their users. Consistent visual presentation and accessibility are typically the most obvious but there are also concerns around efficiency and performance, both within the application logic and delivery of its assets, that all contribute to how users experience a web application.

Theming

One way applications provide optimal user experiences is via a consistent presentation to end users. This may be as simple as using a consistent font family across similar elements, but often extends to presenting the application in a corporate color palette, or even implementing an entire design language such as Material Design.

Dojo’s styling pipeline makes use of CSS modules to encapsulate style rules to specific widgets and avoid cross-contamination across large codebases. Styles are not entirely isolated however - centralized CSS variables can define common theme attributes and be shared between all application widgets. Custom theming can also be provided for Dojo’s widget suite.

See the Dojo Styling and Theming reference guide for information on how to create application themes.

User interface widget suite

Dojo provides several off-the-shelf user interface components through its widget suite. Developers can make immediate use of widgets that address many common user interface patterns such as comboboxes, buttons, lists, tabs, text input and calendar entry widgets amongst others.

Dojo’s widgets natively support internationalization, accessibility and theming, giving developers flexibility in delivering user experiences that are unique to their application without needing to create bespoke user interface components.

Navigational routing

While some applications provide users a primary view in which to conduct the majority of their work, many applications contain more areas that a user can access. Help pages, settings panels or multi-step workflows are examples of where an application may have several different interfaces that a user could access at any given time.

Sections of an application need to be uniquely identifiable in order for users to access them. These identifiers are also required to support bookmarking and sharing of links to a particular section of an application. Users also need a way to navigate between sections in order to access all functionality an application may provide. Navigation could simply be going forward to the next step of a process, backwards to a previous step, or ad-hoc jumping between several options depending on what the user chooses.

Traditional websites that use static files naturally have separately-identifiable sections, in that each static file within the site can be individually accessed. HTML files can use anchor elements to allow users to navigate between files by clicking on links, rather than having to manually change the URI in their browser’s address bar.

Single-page web applications, as their name suggests, only contain a primary file through which a user accesses the entire application. However, these single-page applications can make use of URIs (together with all their inherent benefits) to identify each subsection.

A router component provides navigation options across a hierarchy of routes, and handles dispatching to relevant application subsections that correspond to identifiable routes. A router will also handle any error conditions, such as navigation to non-existent routes.

Routing in Dojo

Dojo’s routing system allows applications to register URL subpaths as routes that link to a specific type of widget, called an Outlet. When a user navigates to a particular route, the outlet widget registered against the route will be rendered.

While outlets are ‘rendered’ when users navigate to them, they seldom deal directly with the rendering of application functionality. Outlets are primarily wrappers that handle navigational concerns - passing of query parameters, or handling error fallbacks - and instead delegate to other widgets within an application for functional rendering.

Applications can provide navigation options to users via Link widgets which are associated with Outlets, in a similar manner to using anchors in traditional HTML pages.

When using routing, Dojo’s build system can automatically generate separate bundles for each top level route within the application. Each bundle can then be independently delivered to users as they are needed.

See the Dojo Routing reference guide for details on how to implement routing within your application.