hexagonal architecture for the web

Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/

Hexagonal Architecture for the Web

Leganés, 11 y 12 de febrero

Jesús Espejo

Technical Telecom Engineer ESP: Telematics (UJAEN, 2012)

Doing web stuff since 2007Probably a bit earlier…

Back-end Engineer at LOOPSince 2013. Between Salzburg and Berlin.

jespejo89jespejo89

Passionate about Web Services / APIsAnd skydiving.

Jesús Espejo

ABOUT ME

STRATEGYSET THE FRAME

DESIGN AND UXADD SOUL

TECHNOLOGYMAKE IT WORK

SOCIALMAKE ‘EM TALK

MOBILEFIRST CHOICE

INNOVATIONALL SET FOR 2020

MOTIONAND PHOTOGRAPHY

CONTENTAND INFLUENCERS

ACTIVATIONTARGET THEM

ANALYTICSUNTIL IT‘S DONE

ABOUT LOOP

HOW DID EVERYTHING START?

1ST GENERATION

PLAIN-HTML-STATIC PAGES

2ND GENERATION

DYNAMIC PAGES

3RD GENERATION

DYNAMIC PAGES 2.0

4TH GENERATION

DYNAMIC PAGES 2.0MULTIPLE DEVICES

SERVICES

MVC ARCHITECTURAL PATTERN

MODEL

ENCAPSULATESDATA

VIEW

INTERACTS WITH USER

CONTROLLER

PROCESSES REQUESTS

SEPARATES RESPONSIBILITIES


BROWSER CONTROLLER

VIEW MODEL DATABASE

CONCERNS ARE CLEAR

Aren’t they?


ACL System...

Data validation...

File processing...

File upload...

Email sending... ?Geolocate user...


BROWSER

CONTROLLERACL SYSTEMFILE UPLOAD

DATA VALIDATIONEMAIL SENDING

FILE PROCESSINGGEOLOCATE USER

VIEW MODEL DATABASE


Mobile API...

Admin CMS...

Push notifications... ?


BROWSER

VIEW

MODEL

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW


Cronjobs...

External services... ?


BROWSER

VIEW

MODEL

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW

CRONJOB /CONTROLLER

EXTERNAL SERVICES


BROWSER

VIEW

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW

CRONJOB /CONTROLLER

EXTERNAL SERVICES

MODEL MODEL MODEL. . .

REAL LIFE


?Add a new feature...

Upgrade a library...


BROWSER

VIEW

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW

CRONJOB /CONTROLLER

EXTERNAL SERVICES

MODEL MODEL MODEL. . .

REAL LIFE

ADDING A NEW FEATURE

UPDATING THE FACEBOOK SDK

TECHNICAL DEBT

TIME

CO

ST

OF

CH

AN

GE

MAX. ALLOWED

The complexity of the architecture grows along with the complexity

of our app.

Sometimes MVC isnot enough

HEXAGONAL ARCHITECTURE

ALSO KNOWN AS PORTS AND ADAPTERS

INTRODUCTION TO THE

Identify the aspects that vary and separatethem from what stays the same


DATABASEINFRASTR.

LOGGINGINFRASTR.

EMAILINFRASTR.

OTHERSERVICES

MOBILEAPI

USERINTERFACE

COMMANDLINE

TESTS

PUBLICAPI

DOMAIN

APPLICATION SERVICES

FRAMEWORK


DOMAIN

BEHAVIORS AND

CONSTRAINTS

What the application can and cannot do.

Set of entities and how they interact.


DOMAIN


ORCHESTRATES THE

DOMAIN

Uses domain entities and other application services to provide

higher-level services.


ADAPTS REQUESTS

Defines how external services can interact to our app, and how our

app interacts with external services.

DOMAIN


FRAMEWORK


BOUNDARIES

Interfaces that define how

the inner layer can be accessed by the

outer layer.

DOMAIN


FRAMEWORK


DEPENDENCY INVERSION

Dependency always flows

from outside in.

“Hollywood principle”

DOMAIN


FRAMEWORK

• Flexibility to changes.

• Code stable and easily testable.

• Low coupling.

• Code easy to maintain.

• Independence from UI.

• Independence from infrastructures.• Framework independence.

• Reusable code.

LowTechnical Debt

WHAT ACHIEVE WITH HEXAGONAL ARCHITECTURE

EXAMPLEQUICK

WITH NO CODE


DOMAIN

User

Media

Comment

…User-> attachMedia( Media )

Media->attachComment( Comment )

DOMAIN


FRAMEWORK


BOUNDARIES

UserRepositoryInterface

UserDAOInterface

MediaRepositoryInterface

CommentRepositoryInterface

…

DOMAIN


FRAMEWORK


SERVICES PROVIDED(AND USED)

ValidationService

NotificationService

FilesystemService…

UploadMediaCommand

CreateMediaCommand

AddCommentCommand(using services above)

DOMAIN


FRAMEWORK


BOUNDARIES

Each service or command

would implement their own interface, if it proceeds.

DOMAIN


FRAMEWORK


ADAPTS REQUESTS

From outside > IN

MediaAPIController

LikeAPIController

MediaWebController

TestMediaUploadCommand

NotifyMediaUploadCLIAdapter

…

DOMAIN


FRAMEWORK


ADAPTS REQUESTS

From inside > OUT

RedisCachingServices

MediaMongoDBRepository

UsersMySQLRepository

MandrillAppNotificationService

AmazonS3Service

…

DOMAIN


FRAMEWORK


UploadMediaCommand

USER MEDIA->attachMedia( )

ValidationService

NotificationService

FilesystemService

ValidationLib

AmazonS3Adapter Amazon S3

DOMAINAPP. SERVICESFRAMEWORK

LEGEND:

INFRASTRUCT.

PusherAdapter Pusher

MediaWebController

MediaAPIController

MobileDevice Tests

WebBrowser

??

CreateMediaMEDIA =

The app is not tied to a UI, a protocol or a framework.

WHAT WE HAVE ACHIEVED

The app is not built upon specific systems or

infrastructures, but it rather uses them as services.

Modules in the app are not coupled so they can be easily exchangeable and tested in isolation.

LET’S RECAP

• How people consume web services has evolved.

• MVC has dominated the web world.• Sometimes MVC is not enough.• Hexagonal architecture might be useful.• Identify the aspects that vary and separate them from what

stays the same.

• Don’t depend on frameworks, systems or infrastructures: Apply Dependency Inversion instead.

QUESTIONS

THANK YOUFOR YOUR ATTENTION

VISIT OUR WEBSITE

www.agentur-loop.com

hexagonal architecture for the web

Technology