Armağan Amcalar

WebTech Conference, Munich

Oct 26th, 2015

Who am I?

Armağan Amcalar

unu GmbH Head of Software Engineering 
Lonca Founder, master craftsman

 

Hobby projects

pedals.io
trax.io

The current state of UI architectures

Framework economy

Marketing-driven

Framework-dependent

Too complex

Not solution-oriented

Information pollution

Lack of context and experience

Why Vieux?

Developers deserve better

Easy to reason about, easy to apply

Framework agnostic

Doesn't carry the baggage of the past

Unambiguous concepts

Proven in hardest applications

Approach

A consistent story
Companionship instead of pedantry
Modular architecture
Single responsibility
Extensible
Low complexity
Object oriented
Event-driven

Structure

3-layered architecture

4 core, 3 auxiliary roles

 

Culture
Representative
Regime
Undertaker
Stereotype
Diplomat
Satellite

Union*

Structure

Roles

Stereotype*

Classes that store data about a known identity
User, Account, Product, ShoppingCartItem, CreditCard, etc.
May contain simple, related methods
Created and managed by Regimes

 

 

*Entity

Roles

Culture*

Governs the UI
Exhibits a set of predefined behaviors
As dummy and ignorant as possible, no memory or state
Interprets user input and sends to a Representative
Can contain subcultures that exhibit different behaviors

List, ListItem, etc.
Can contain immigrant subcultures temporarily

 

*View

Roles

Representative*

Keeps Culture's state
If a Culture has a Stereotype instance, keeps that, too
Represents a Culture to the Regime
Every Culture breeds their own Representatives

 

 

 

*ViewModel

Roles

Regime*

Keeps and manages application's state in application layer
Breeds, manages, and operates on Stereotypes
May communicate with other Regimes through Diplomats
Delegates persistence to Undertakers
Lives as a Singleton
More complex apps can use two layers of Regimes


*Domain Model / Service

Roles

Undertaker*

Works at the infrastructure layer, persists state
Doesn't keep state, takes orders from the Regime
May include technology-specific code (e.g. WebSQL, LocalStorage, AJAX, WebSockets)
May utilize Satellites for keeping state in multiple technologies
Lives as a Singleton


*Repository

Roles

Diplomat*

Coordinates communication between Regimes.
Quasi-autonomous
Lives as a Singleton
On rare occasions, may coordinate communication between Representatives

 

 

*Event Manager

Roles

Satellite*

Abstracts a certain persistence technology
Persists serialized data
Mostly redundant

 

 

 

 

*Event Manager

Roles

Union*

Brings together contextually-similar roles that work together under an umbrella
Eases to see the big picture
Provides a clear file structure

 

 

 

*Package

Example

How can you contribute?

Our GitHub organisation

https://github.com/vieuxio

 

Our Slack group

http://slack.vieux.io

 

We need more examples, more detailed documentation and more voice!

The Team is important!

WE WANT YOU!

Thanks a lot!

Armağan Amcalar

hello@arm.ag
twitter: @dashersw
github: dashersw
blog: arm.ag

Introducing Vieux: The Bureaucratic, Humanitarian Approach to UI Architecture

By Armağan Amcalar

Introducing Vieux: The Bureaucratic, Humanitarian Approach to UI Architecture

Every other day a new approach to UI application architecture arrives on the market. Similar names with different meanings, altogether with hard-to-reason-about constructs, make it a nightmare for the developer who just wants to make sure their app will stay maintainable at scale. In this talk, we present Vieux; a consistent story for building scalable UI applications with succinct, humanitarian roles and definitions that is inspired by the life itself.

  • 3,671