Visual thought on UI structures

When a developer needs to develop a UI app which will have some scale, the quest for better maintainability, performance, readibility, ease of coding and testability is not straightforward.
From MVC to MVP via MVVM, the ages have seen different answers to this question. But what does it basically means?
From an mobile developer point of view I’ll try to divide the essential components of an classic featured-full android app. After that we just need to put each unique functionnality into the good block of the pattern.

Sample App

The application will be, hummm let’s say a GPS. This kind of app has multiple dynamic views, forms input, complex algorithm, lots of data, networks and asynchronous actions, …
Every use case exemple will be chosen from this perspective.

Dividing the functionnalities of an app

Notes

Logic and control are similar. Control would be more application-technical oriented to handle page opening, algorithm launch (gps fix lost, then launch a suite of position prediction according to speed)… Logic would be a set of logic rules related to business need (If a SuperBurger restaurant is around then add it to the map).

Schematisation

The following graphs are my interpretation of these pattern. They consist on grouping the different functionalities above into related block.

Model View Controller

In an android app, the view would be the xml layout while the controller is the associated activity java code. In simple XAML/C# this structure is pushed forward by hardly associating a C# code with any XAML layout file.

Model View Presenter

The main difference with MVC is splitting the java code of the activity in two. The code who is layout dependant (findViewById, setText) stay in the activity, and is considered as a View which become a dual-file system. The functionnal code (startActivity, …) is moved to the associated Presenter.
It becomes easy to change the View while keeping most of the code in the Presenter.

Model View ViewModel

This pattern becomes more declarative as we connect the data value and user edition with the model container directly. The VM is somewhat a proxy between both of them and control the data lifecycle.
Note that the non-visible UI interaction becomes declarative, like the sound. And that the view allow itself to connect to background services result.

Binding/qml

This one is my interpretation of a pure QML app developement (no C++ except for very extensive functions). It becomes even more declarative than MVVM.
Developing this app would require to follow these ideas:

  • The app heavily rely on signal/slot connection for data, action, dynamism
  • All UI are declaratives blocks in one file, declared in a way to be higly independant from the exterior
  • Very fiew code is outside the view, gathered in presenters/manager files.

Coding becomes very declarative, you think only of the behaviour of the smallest block, exposing signal and slots for every other component to interact with, in a complete loosely way.

The declarative config pattern

Some portion of code above was declarative, usually the view (these blocs had a green background). But most of the functionnalities of the app have to be developed by code.
From some developers point of view, this fact will soon be history. Powerful software would be able to generate the program directly from the user cases. Have a look at such articles

On the way to this User-Interface coding, we can find the config-oriented pattern.
The code consist mostly of a framework. All views, actions, interactions are somewhat configured in a custom format within one are multiple file.

The Witcher 2 and bohurt

Playing Witcher 2 this week-end, and suddenly… but I lived that. Could not resist to make a video about this. The real assault of a castle sounds no so different from the 21 vs 21 Battle Of Nations or Chateau-Thierry assault tournaments!
And mounting video is pretty fun, OpenShot is nice and easy for simple stuff like this:

Hexo as a Blog

This is not really an active blog. There is merely one article a month, that I write when I want to re-think an architecture I encountered or I want to keep a track on a receipe. If I take time to do so, why not sharing it into a blog!

I choose Hexo because it seems easy to add arcticles, to configure and to deploy while staying independant of blog platforms.
Here is my experience.

Tool

  • Visual Studio code has proven to be a perfect IDE to write markdown text on an Linux HiDPI environment. Exactly what I was looking for.
  • FileZila : I do not automatically upload via FTP to my server, I didn’t manage to make it work. But manual deployement is working well with this tool.

To start working on local, a simple all in one command line allow me to start everything on linux:

1
hexo generate --watch & hexo server -p 5000 & filezilla & /usr/bin/code '/media/data/workspace/notepadblog-hexo/source'

The server is set up, the auto-build feature too and my two tools are ready to be used.

Config

Starting up can take time, because the official documentation is a bit light and it’s difficult to counter bugs. I base my configuration only on working exemples. Here is mine.

Node.js requirements

1
2
3
4
5
6
7
8
9
10
11
12
npm install hexo
npm install hexo-cli -g
npm install hexo-cli
npm install hexo-server --save
npm install hexo-generator-feed --save
npm install hexo-generator-tag
npm install hexo-generator-category
npm install hexo-generator-index
npm install hexo-generator-archive
npm install hexo-renderer-ejs
npm install hexo-renderer-marked
npm install hexo-renderer-stylus

Here my config file in case anyone would like to compare to his version

package.json file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": "BlockNote",
"version": "1.0.0",
"private": false,
"hexo": {
"version": "3.1.1"
}
,

"dependencies": {
"hexo": "^3.1.1",
"hexo-deployer-ftpsync": "^0.1.1",
"hexo-generator-archive": "^0.1.2",
"hexo-generator-category": "^0.1.2",
"hexo-generator-feed": "^1.0.3",
"hexo-generator-index": "^0.1.2",
"hexo-generator-sitemap": "^1.0.1",
"hexo-generator-tag": "^0.1.1",
"hexo-renderer-ejs": "^0.1.0",
"hexo-renderer-marked": "^0.2.4",
"hexo-renderer-stylus": "^0.2.0",
"hexo-server": "^0.1.2"
}

}

_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# Site
title: BenNotes
subtitle:
description:
author: B. Delville
timezone:
language: en

# Third Parties
disqus_shortname: hithredin
google_analytics: UA-blablabla

# URL
url: http://blog.hithredin.eu
root: /
permalink: :category/:title/
language_detect_in_path: true
language_detect_first_level: true
permalink_defaults:
lang: en

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :lang/:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

sitemap:
path: sitemap.xml

feed:
type: atom
path: atom.xml
limit: 10

# Date / Time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 3
pagination_dir: page

# Extensions
theme: landscape

# Deployment
deploy:
type: ftpsync
host: ftp.hithredin.eu
user: blablabla
pass: blablabla
remote: /blog
port: 22
ignore: true
verbose: false

Todo

My next objective consists on having a working internationalization blog with most article availables on french and english.