Enterprise Interface Architecture:
Seeking Scalable Design

Tomasz Ducin

21st October 2015, Warsaw

#14

Tomek Ducin

JavaScript, Java, Python

senior software consultant @ Cybercom Poland

blah, blah, blah...

@tomasz_ducin

ducin

ducin.it

Seeking Scalable Design

  1. business environment
  2. architecture:
    layers and components
  3. solutions

Agenda

Business Environment

  • budget-driven development

  • big, distributed teams

  • build/deploy time being long

  • code is big & still growing
    -> lots of copy-paste

  • backends being unavailable

ŻabaScript

Architecture:

layers & components

here be dragons...

Client-Side

business module
demo

Challenges of enterprise frontend

  • websockets
  • visualisations
  • webworkers
  • multimedia
  • asynchronicity
  • websockets
  • visualisations
  • webworkers
  • multimedia

Promise Diagram

of an example flow

Single Step Promises

Promise Diagram

of an example flow

to REST or not to REST

Solutions

... or at least the proposals

Best Practices

in Enterprise Systems

  • there are no best practices ☺

FE

BE

What is more important?

API Contracting

  • stored in repository
  • available in CI
  • used by many
    automates
/songs
  get
  post
  /{songId}
    get
    /file-content
      get
      post
/artists
  get
  post
    /{artistId}
      get
      /albums
        get
/albums
  get
  post
    /{albumId}
      get
      /songs
        get
/songs:
  description: Collection of available songs in Jukebox
  get:
    description: Get a list of songs based on the song title.
    queryParameters:
      songTitle:
        description: "The title of the song to search (...)"
        required: true
        minLength: 3
        type: string
        example: "Get L"
[...]

Contract

Example

[...]
    responses:
      200:
        body:
          application/json:
            example: |
              "songs": [
                  {
                    "songId": "550e8400-e29b-41d4-a716-446655440000",
                    "songTitle": "Get Lucky"
                  },
                  {
                    "songId": "550e8400-e29b-41d4-a716-446655440111",
                    "songTitle": "Loose yourself to dance"
                  },
                  {
                    "songId": "550e8400-e29b-41d4-a716-446655440222",
                    "songTitle": "Gio sorgio by Moroder"
                  }
                  ]

API Contracting Tools

  • documentation generators
  • mock data
  • stub servers
  • test generators & runners

Contracting

Tool Stacks

API Blueprint

Swagger

RAML:
RESTful API Modelling Language

Backend-less Development

mock your API

  • Parallel work of Frontend & Backend teams
  • Core & Backend system failures
  • Business Circumstances

Loose Coupling

  • big initial cost of implementation
  • small cost of maintaining
  • flexibility
  • independence
  • faster development

writing JavaScript is not trendy anymore

ES6

https://github.com/lukehoban/es6features

TypeScript

  • most of what ES6 has

  • type checks

  • templates typecheck
    (ongoing)
  • TS -> ES6 (ongoing)
function add(a: number, b: number): number {
	return a + b;
}
add("32", 12);

compile error:
 Argument of type 'string' is not assignable
  to parameter of type 'number'.

  • big code needs typechecks

  • easier refactoring

  • less runtime errors

  • find your bugs while migrating to TS

Automation: instances

{
    "name": "myInstance",
    "fullname": "MyBank default settings",
    "title": "MyBank",
    "api": "mock", // OR http://api.mybank
    "modules": [
        "core",
        "search",
        "transfers"
    ],
    "languages": [
        "en",
        "de",
        "pl"
    ],
    "styles": "default",
    "defaultLanguage": "pl",
    "debugMode": false
}
  • multiple parametrized instances of the same application
  • the same codebase used for private banking and business banking 
JSON

Yeoman

keeping project structure concise

  • custom generators
  • generating module skeleton in seconds
  • all modules share the same structure

Summary

  • specific

  • challenging

  • still being explored

THX!

@tomasz_ducin

4  Q&A

tomasz@ducin.it