Strings API

by Vladimir Minkin

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Wire

Intoduction to Wire

WHO
AM

I

Vladimir Minkin, MSc.

More than 13 years of IT production experience

WHO AM I

I'm Software Engineer, Tech Lead and System Architect

For those who think -
your work speaks for itself

WHO AM I

Agenda

  • Design

  • Strings

  • Flux

  • Wire

  • Example

Design

A design is a plan or specification for the construction of an object or system.

Wikipedia

Design

Why?

What?
 Where?

How?

When?

Who?

It is bout answering questions

Design

Architecture is not about making decisions earlier, but making decisions late.

Robert C. Martin

another common definition of design is the word - architecture

Design

Everything is a plugin, a black boxes

  • No direct references
  • Dependency injection
  • Input and output

ideal representation of system parts

Design

Data distribution mechanism

Events propagation system

(Finite State Machine)

every software system is based on

Signals API

System could be presented as 2 sets of strings

Data API

  • UPDATE_USER_NAME
  • CREATE_TODO_ITEM
  • MOVIE_SELECTED
  • FILTERS_UPDATED
  • SAVE_TO_FAVOURITE
  • LOAD_NEXT_PAGE
  • TURN_OFF_SOUND
  • PURCHASE_PRODUCT
  • ...
  • USER_PROFILE
  • MOVIE_BY_ID
  • FILTER_CONDITIONS
  • GAME_DATA
  • UNITS_LIST
  • TODO_BY_ID
  • SOUND_SETTINGS
  • CURRENT_LANGUAGE
  • ...

Design

Communication Layer

Data container Layer

key - value

They can be represented with 2 layers

Strings API

  • Immutable

  • Value types

Strings are good candidates for keys in a set

Strings API

Set of signals it produces  or consumes

any "Black Box" can be described as two sets of strings:

Set of keys to retrieve data

Strings API

User_Account: {
    name : "Vladimir Minkin"
    email : "vladimir.minkin@gmail.com"
}

Submit_User_Account: {
    payload (DTO)
}

abstract representation of UI component

Data API - input

Signals API - output

Strings API

Data API:
USER_ACCOUNT

Singals API:
SUBMIT_USER_ACCOUNT

component described in Strings constants:

Strings API

export default UserDataKeys: { 

    ACCOUNT: "UserAccount",
    POSTS: "UserPosts",

}
export default UserSingals: { 

    SUBMIT_ACCOUNT: "AccountSubmit",
    CREATE_POST: "CreatePost",
}

system's functional parts can be united in a set of String keys:

Strings API

UserSingals.SUBMIT_ACCOUNT

another "Black Box" in the system listening for the signals and process them 

{ Payload }

A processor that knows how to analyze signals and makes decisions based on other data sources

Strings API

independent components in the system

Components don't know about the source of their data nor who will handle the signals they produce


implement Component Driven Development concept

Strings API

Components can be
loaded dynamically and

use sets of Strings API

from the system

Components retrieve data with Data API

They listen and send messages with Signals API

Communication Layer

Data container Layer

Strings API

FLUX

Flux is a pattern for managing data flow in application. The most important concept is that data flows in one direction.

https://github.com/facebook/flux

FLUX

Conceptual diagram

FLUX

what else do we need?

Component reaction

on data changes

but component already know about data

FLUX

observer pattern

Let's wrap data in container, and modify the data through it

"UserAccount"

value: {
    name: ""
    email: ""
}

- subscribe (params)

- unsubscribe (params)

- value (set / get )

FLUX

observer realizes unidirectional data flow

"UserAccount"

subscribe (callback)

Send signals

know how to update itself

Process signals

Update data

black box

another black box

FLUX

in result:

  • Updates from one source

  • Explicit re-render

  • No hidden methods

  • Language independent

Wire

Implementation of Strings API concept with communication and data container layers.

 

Originally written in Dart but available in other languages.
 

https://github.com/wiresware 

Wire

  • Communication Layer - consists of "signals", strings keys with associated listeners bounded to specific scope.
     
  • Data Container Layer - key-value in-memory map, value is an instance of an observer object with dynamic value.

Two static layers

Wire

API

// Signals API
Wire .add(scope, signal, listener)
bool .send(signal, {payload, scope})
bool .remove(signal, {scope, listener})
bool .has({signal, wire})

// Data API
WireData .data(key, [value])

Wire

Processors
(or Controllers)

  • listen for signals,

  • business logic units,

  • know about externals,

  • trigger update of the data,

  • sends consequent signals.

Possible to distinguish two types of entities in the system:

​Consumers
(or View)

  • retrieve data container, 

  • subscribe for updates,

  • unsubscribe,

  • send signals with payload,

  • can listen for signals.

Wire

Active Models *

Made with Slides.com