XAF - New SPA UI for Web & Mobile (v18.2)

In addition to WinForms and ASP.NET UI enhancements announced a couple of days ago (XAF - Access v18.2 Features Today for Early Testing and BONUS for v18.1.6), I wanted to share our updated vision for XAF Web & Mobile development – one that’s based on an entirely new SPA driven UI. When this ASP.NET Core and React-based solution matures, it will supersede/replace existing WebForms and Mobile user interfaces.

New SPA UI architecture and technologies (the 'WHAT' part)

Over the last few years, we've been hard at work adapting XAF for the mobile world. As the tech landscape evolved, so did our strategy - new server-side solutions mandated pursuit of alternate (and more progressive) client-side UI paradigms.

Today, we still build Web applications with distributed client-server architectures like those in our former Mobile UI. However, both server and client technologies and their communication protocols have evolved. The client is now a single-page application (SPA) based on Facebook's React JavaScript library and our React Wrappers for DevExtreme. The server backend uses ASP.NET Core 2.1 with the full .NET Framework 4.6.1 (for now). The npm command-line tool bundled with Node.js and Visual Studio 2017 are required to install React and other packages. Visual Studio and .NET Framework support will likely to expand to .NET Core 2.2+ and other IDEs like VS Code (assuming demand exists).

User benefits & problems this new SPA UI should ultimately address (the 'WHY' part)

Why React and not, for example, Xamarin for mobile development? It’s simple - we (and I’d argue many of our users) prefer a single, unified development system. The Web is a common denominator that covers multiple platforms well. A reliable and modern Web solution is something most want/need to deliver and if one does a good job in this regard, a mobile solution should follow automatically (at almost no cost).  Promising technologies like React Native, Electron and WebAssembly could also give us expanded opportunities in the future to address the needs of those who prefer the “native” option. Xamarin did not meet this basic requirement and would have forced us to create separate solutions for the Web and Mobile (you would need investments for both Android and iOS platforms as well).

To shape our vision, we relied on user feedback and listened to customer comments on existing XAF platforms. Here is a categorized list of SPA UI benefits many of you have asked us to deliver:

Common

  • Deliver more on the "Design Once. Run Everywhere." promise and lessen associated costs with the unified Web and improved code sharing. Potentially, there will be one code base that can even replace XAF WinForms apps with Web apps running inside Electron (Microsoft Teams and Visual Studio Code are good examples of such hybrid desktop software). 
  • Get rid of old technologies with an unclear future and lowered levels of support from Microsoft, third party vendors and the dev community (ASP.NET WebForms, WCF Data Services);
  • React to changing market needs faster, open new opportunities to deliver more features with a bigger vendor and community support for new and popular technologies;
  • Offer assurances that XAF Web and Mobile applications will stay up-to-date for at least the lifecycle of ASP.NET Core 2.x and React – two of the leading frameworks for server and client Web development.

Client/frontend

  • Faster responses to user actions and less traffic sent from the server to clients;
  • A more modern-looking UI, including Material themes supported by DevExtreme components;
  • More natural UX and intuitive screen flows, for instance, auto-save detail collection data instead of explicit master object save (example);
  • Responsive designs for different screen resolutions and devices: desktop, tablet, phone;
  • Cutting-edge technology (webpack) for optimized client application build and delivery;
  • Allow users to publish Web apps in stores via PhoneGap, Electron and other native containers. 

Server/backend

  • Stateless application design by default. In addition to lower maintenance costs, this should also help users enable more cloud hosting features easier, for instance, load balancing.
  • Optionally, support a stateful architecture to provide a better performance and richer functionality in standard usage scenarios. This is helpful for the majority of our users who rarely have more than 50 concurrent users at peak times and 5-10 users typically.
  • More deployment options. At present, any web server deployment for ASP.NET Core and full .NET Framework 4.6.1 is supported. .NET Core 2.2+ support in the future will unleash multi-platform hosting (Apache, Docker, etc.).
  • More modern and flexible infrastructure with built-in features like OAuth2 authentication powered by the ASP.NET Core framework;
  • The https://github.com/DevExpress/DevExtreme.AspNet.Data library optimized for DevExtreme controls comes with many useful features like virtual paging (most operations are executed on the server rather than on the client). 
  • Ways to reuse XAF data and logic from external non-XAF clients and services (of course, everything passes through XAF authentication and security system rules);
  • eXpress Persistent Objects (XPO) classes and non-persistent POCO are supported for data access and presentation. Entity Framework (EF) and Domain Components (DC) interfaces are not supported.
  • Avoid limitations of the former WCF Data Services/OData V3-based server. CriteriaOperator expressions, previously translated to OData queries, are now directly translated to LINQ expressions. This enables the following features: more ListView grouping options, ContainsOperator and aggregate functions in ListView filters (T549081), ListViews for non-associated collections, lookup editors filtered by arbitrary or non-associated collections with DataSourcePropertyAttribute.

Existing XAF development values we want to preserve, FAQ & More...

Despite these forthcoming changes, we will do our best to maintain XAF as the go to rapid application development toolset for .NET developers – allowing you to quickly create Office-like line-of-business apps for various platforms simultaneously. To support this long-term vision in the new SPA UI, we hope to keep and further evolve the following fundamental XAF values:

  • Automatically generate database & CRUD UI for popular RDBMS and Windows, Web and Mobile platforms, reduce associated low-level coding and other complexities;
  • Focus on business rules, share pure .NET code (C#, VB.NET and minimal JavaScript) and configuration settings across platforms and databases as much as possible;
  • Ship built-in business-specific functionality such as reporting, security, validation, and data analysis  - and give you the flexibility to customize as needed;
  • Unsupported or complex functionality not available by default can still be implemented in code by incorporating framework flexibility and customization options;
  • Comprehensive options for both developers and end-users to customize applications after deployment. For instance, modify application settings stored in a database using administrative tools or directly within an app (at runtime) using visual designers (and updated accordingly without re-deployment).

For more technical information and answers to questions we anticipate most, refer to the updated FAQ: New XAF HTML5/JavaScript SPA UI for Web & Mobile (CTP) KB article.

Our short term plans and what to test today!

Right away, existing XAF Mobile UI users are welcome to migrate to our newest server features: How to connect an existing XAF Mobile application to the new ASP.NET Core Data Service (CTP)The new SPA UI will use this server and you can help us release this portion faster by providing feedback.

We hope to publish new SPA UI demos online after our v18.2 release. In the meantime, anyone is welcome to check screenshots of our prototypes and discuss their specs in our forum with peers (see below).

No promises at this stage, but our hope is to offer this SPA UI for production use around the v19.1 timeframe (at least for simple scenarios). 

Your feedback counts!

To discuss this vision, roadmap and technical requirements more effectively with the XAF community, we have setup a private discussion forum - exclusively for Universal customers. Feel free to leave comments to this post, email us at xafteam@devexpress.com or submit tickets using the Support Center if this is of more convenience.  

By this and by providing early build access, we hope to find out whether our new features and solutions address your requirements and issues. Your testing efforts and your feedback help us deliver the best possible final implementation. We have described other benefits of this cooperation in this post.

In advance, thank you very much for your help!

28 comment(s)

Great job guys. I am waiting impatiently to play with them.

Thanks for providing us such a wonderful framework.

19 September, 2018

Great decisions here!!! Very promising!

20 September, 2018

Need to touch it.

20 September, 2018

Looking great ! A most anticipated feature, moving to this SPA UI...

20 September, 2018

Excellent news Dennis (and DX).

20 September, 2018

Bold move in the right direction! Highly appreciated!

Congrats!

20 September, 2018

Great job!!!

20 September, 2018

Awesome! Sounds very promising.

20 September, 2018

Why react and not Angular? Why not both?

20 September, 2018

This is very exciting.  

20 September, 2018

Finally! #jawdropping

20 September, 2018

Will there be an offline mode available in the future? When I think about XAF it's business software and being out in the real world, connection still is an issue. Without internet the app would be useless than.

20 September, 2018

Nice job.

Sounds very promising

20 September, 2018

Will there be an offline mode +1

21 September, 2018

Exactly what's in our minds. Great job.

21 September, 2018

SPA web applications sound really great! WebForms needs a change and SPA + NETCore is the best tandem to speed up web performance and improve user experience, so congratulations.

Regarding mobile apps, I understand your points but have really clear that all my business apps will continue to be done with Xamarin Forms (native) and offline first approach. Maximizing the UX is a must in mobility.

21 September, 2018

@Daniel Fischer, Paolo KALC:

We have not researched ways to support such scenarios yet. Feel free to share your business requirements and considerations here: www.devexpress.com/.../proposed-solution-for-offline-application.

For more technical information and answers to questions we anticipate most, feel free to check the updated FAQ: www.devexpress.com/.../faq-new-xaf-html5-javascript-spa-ui-for-web-mobile-beta or use our discussion forum for Universal customers: community.devexpress.com/.../386.aspx

21 September, 2018

@Sigurd Decroos:

I've just added the following answer to our FAQ: New XAF HTML5/JavaScript SPA UI for Web & Mobile (CTP) KB article:

Q: Why is React and not Angular, XXX,  or all at once?

A: Let me clarify this in detail:

1. Our target audience is mostly C#/VB .NET developers. The majority of existing XAF users does not often make complex customizations of underlying controls and the rest infrastructure. Since the framework generates the UI transparently and you also have a high-level control over it using the Model Editor or attributes, whether React, Angular, Vue or Knockout is in use does not matter much, of course, unless they have existing knowledge investments.

2. Unlike Angular, React is a lightweight and very flexible library, not a heavy framework. From our experience, Angular is also more difficult to get started with, troubleshoot and use for our specific requirements.

3. Both React and Angular provide means for native rendering, but React Native has a greater popularity and community support.

4. Use of React still leaves us opportunities to support other popular client-side frameworks in the future. APIs that we will provide to SPA UI developers for client-side customizations will be transparent and client-side framework agnostic anyway. Supporting Angular or another framework is costly and there must be good reasons for this. We will unlikely think about it until we move the new SPA UI out of CTP and have most our users happy with the platform-agnostic features in the first place.


@José Enrique:
Thank you for sharing your experience with us.

21 September, 2018

Great job! Good choice for going for React and ASP.NET Core

21 September, 2018

Excelent! Long-awaited decision.

23 September, 2018

Great news!!

24 September, 2018

Can i request a webinar walk through? TBH I don't know react at all and its a bit intimidating. I think if we could see a good walk through of implement familiar crud operation thru a React UI it would really help the new generation of XAF.

24 September, 2018

So will Domain Components only be supported in the Win versions?

24 September, 2018

@Mr292: Thank you for your suggestions. As for the React tutorials, would you please clarify your idea? I do not quite understand it or why existing React documentation in public community resources is insufficient.

@Michael Gibson - PatTrac: The Domain Components (DC) technology is still supported in the WinForms and ASP.NET WebForms UIs (and we had no plans to remove this support there). DC and EF is unsupported in the Mobile and SPA UIs.

25 September, 2018

Hi Dennis,

great news! Strategy wise I am very happy about the direction you are heading, meaning that the usage of your mighty XAF will stay as valuable as it was for the last years. Next bullet point on my wishlist would be a better integration of DI pattern to strengthen the testability of my XAF applications.

Cant wait to get my hands on the new client!

26 September, 2018

Great Job! :) Looking forward for a CTP!

27 September, 2018

Great news!

6 October, 2018

We will be sticking with Xamarin for mobile development.   We prefer to keep as many things in C# as possible so maybe we will consider this approach if you ever support Blazor (assuming it gets released).

18 October, 2018

Please login or register to post comments.