fitness365.ru
27 April 2017
About fitness365
One of the popular apps we developed using DevExpress tools at DevPark is fitness365.ru, which represents a paid service used by sport organizations such as fitness clubs for managing customers, ticket sales, club cards, attendance marks, booking workout courses, etc.
Technically, this service is represented by the XAF Web browser and XAF Windows desktop client with a common core and logic, both sharing a unified and modern DevExpress UI for supported platforms. The online XAF ASP.NET Web Forms client is currently used by approximately 120 concurrent users and is hosted in the Cloud run by Microsoft Azure (oblakoteka.ru). This web app mostly uses the pure XAF approach or standard modules; except for a few that are the most interactive or often used where we integrat fully custom user controls and forms. Even though these custom forms are using lightweight HTML5/JavaScript widgets on the client, they still heavily rely on the core XAF/XPO APIs on the servers, e.g. for getting data (see example below).
About the recent migration from XAF v14.1 to v16.1 with its New Web UI
With the XAF v16.1 release, we decided that the new Web UI is mature and well tested enough for us to finally do a full migration. The time has shown that this decision was worth it: after upgrading our web service to v16.1 the majority of end-users pointed out that the UI is now more modern and laconic. Moreover, ALL the users noticed the great acceleration in loading forms and a better overall usability of the new version (partially due to these framework changes). The new web style with its larger UI elements has also allowed us to rethink the whole UX concept and focus on the application data and functions that matter for end-users most of all.
Below sare screenshots and comments clarifying the main bonuses we received after migrating our web client to the new version.
In our previous XAF v14.1 based app, we had a bit overloaded main menu with a lot of commands (up to 15 in the Clients ListView), and we received user requests to improve this.
In the new version based on XAF v16.1, vital for business menu commands and data are emphasized while unimportant things are hidden.
The XAF v14.1 UI is not very usable on mobile devices due to several inconveniences, such as small fonts and small controls that require explicit zooming.
Today, more than 30% of our end-users communicate with the app using mobile devices, mostly phones. That is possible with the help of several related improvements to the XAF Web UI in v16.1.
fitness365.ru Screenshots
Sliding navigation menu
Collapsed menu
Adaptive Grid
Notice that only critical business data is shown by default. The order, in which less important columns will be shown can be configured using the IModelColumnWeb.AdaptivePriority property in the Model Editor. This is what expanded record details look like:
To finish with list forms, we also enabled endless paging in a number of ListViews using the IModelListViewWeb.EnableEndlessPaging option in the Model Editor.
The new Web UI also brought a more modern logon form with larger UI elements:
In addition to larger elements and fonts, DetailView has an adaptive layout where each input box is vertically arranged one below each other. This eliminates a horizontal scrolling on mobile devices. Finally, the main menu is fixed at the top, allowing end-users to execute a required command with ease after scrolling down.
Our experience in implementing very custom user-interactions and non-standard GUI with XAF
When starting XAF Web development, we needed to integrate custom UI elements into standard XAF views. For instance, there was an editable Excel-like grid (See Batch Edit Mode feature for this in the latest XAF versions). It is usually needed in about 5-10% (or less) cases where typical XAF forms do not fit well or customizing them via the Model Editor or using native approaches (e.g., creating custom Property and List Editors) will be too time consuming. In the case of such complex UI or user interaction requirements, we concluded that it will be easier for us to design a fully custom form from scratch while reusing the XAF data and logic.
During the time and generalization of such cases we developed an engine for fast production of custom non-XAF HTML5 forms still working based on the XAF core. For instance, we use this engine for booking workout courses, creating orders and other operations that need to be done as quickly and as comfortably as possible by an application operator. The client HTML5 forms communicate with the core XAF APIs that help load data and execute business logic written in C# on the server. This hybrid approach allows us to effectively reuse the same shared code in desktop and online web interfaces, while keeping easy debugging and a high JavaScript-based UI speed/interactivity with the minimal load of the server.
The latter is possible because the web server now delivers only data and is not engaged in page rendering. Here it is important to note that our engine relies on LINQ to XPO queries to obtain data for visible fields only without loading all associated data (references and collections). We plan to evolve our HTML5 engine further and create custom forms based on the Application Model structure is in our nearest plans for now. We are also looking forward to the new XAF Mobile UI (CTP), because it may solve this part for us in the future.
Below are a few screenshots of the custom forms integration in XAF:
fitness365.ru Screenshots
Custom scheduler view with greater interactivity (we still provide the standard XAF scheduler for backward compatibility).
Custom detail form with an adaptive layout that resembles the XAF one.
Custom detail form of an appointment sliding from the scheduler view.
About DevPark
Our company specializes in software development based on the core of the DevExpress eXpressApp Framework (XAF) since 2007 and currently consists of 4 XAF developers. Accounting systems and ERP are among several fields we mastered and have our focus. We developed a vast base of solutions for this line of business through these years. These are primarily Windows, Web and mobile apps developed for Russian and European companies. With that experience, we are also providing custom programming and consulting services.
Why we choose XAF
We already made a case study about our previous XAF experience in the past, but I would like to repeat the value XAF provides: we can quickly realize a new business idea and start using it in the app by adding a new business class, data field or logic easily. Further, and if necessary, we can customize the auto-generated GUI or add a fully custom one above without any limitations. I think that being able to freely customize, write custom code and reuse a lot of existing functionality at the same time is what made the development easier for us with XAF. This idea is further explained at XAF Overview, which attracted our attention almost a decade ago when we were looking for a development tool like this. Even though there are trade-offs, the overall advantages are still actual and more important today for our company.
fitness365.ru
https://www.fitness365.ru
