Developing mobile applications involves two primary concerns:
The MVVM (Model-View-ViewModel) approach is a way of separating the above concerns into distinct areas of development so that:
In the Zebble MVVM approach, the lifecycle of a typical project is the following:
This is a vital step in the project lifecycle and provides a foundation for the whole team to collaborate effectively. The purpose of this process is to convert the structure of the UI screens and states, previously represented as visual wireframes, into their C# equivalent models.
For each app page in the wireframes, an abstract Page class is defined.
For every dynamic (data-based) visible element of the page, a property is defined as:
All such state objects (bindables) must have a default value (ideally not null) to provide a solid zero state. This is important to allow the UI developers to create and test the template ZBL files against those without facing null errors.
For every interactable action on the page, a method is defined as:
Defining the ViewModel skeleton in this way will provide a strongly typed object model, to orchestrate all UI development efforts. It's a technical design excercise and is normally done by the tech lead in the project, with the rest of the team participating to understand it. It should not take more than a few minutes per page to create this. So this whole excercise should not take more than a few hours for an average sized project. This should be done as the first step in the technical implementation phase, on the first day of the project.
In a typical Zebble solution in Visual Studio, the Domain project (shared source) contains the business logic, and the App.UI project contains the UI code. There are also 3 runtime projects for each platform (UWP, Android and iOS) all under the Run folder. In MVVM model, 2 new projecs are added to the solution:
All 4 runtime projects (UWP, Android, iOS and now VM) will reference the Domain and the new App.ViewModel projects.
The App.UI project will be referenced only in the platform specific ones, but not the Run\VM console app.
The Run\VM project plays a key role in the MVVM development model. It is a pure (c# only) runtime environment to run the application's logic.
This allows non Zebble developers, i.e. people with just C# skills, to develop the vast majority of the mobile apps' code. It also makes it much faster to run and test the app and speeds up the development iterations. In addition, it makes it easy to write end-to-end unit and integration code to test the logic and workflow of the apps based on an abstract page model, without worrying about the real UI rendering.