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

MVC ARCHITECTURAL PATTERN

BROWSER CONTROLLER

VIEW MODEL DATABASE

CONCERNS ARE CLEAR

Aren’t they?

MVC ARCHITECTURAL PATTERN

ACL System...

Data validation...

File processing...

File upload...

Email sending... ?Geolocate user...

MVC ARCHITECTURAL PATTERN

BROWSER

CONTROLLERACL SYSTEMFILE UPLOAD

DATA VALIDATIONEMAIL SENDING

FILE PROCESSINGGEOLOCATE USER

VIEW MODEL DATABASE

MVC ARCHITECTURAL PATTERN

Mobile API...

Admin CMS...

Push notifications... ?

MVC ARCHITECTURAL PATTERN

BROWSER

VIEW

MODEL

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW

MVC ARCHITECTURAL PATTERN

Cronjobs...

External services... ?

MVC ARCHITECTURAL PATTERN

BROWSER

VIEW

MODEL

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW

CRONJOB /CONTROLLER

EXTERNAL SERVICES

MVC ARCHITECTURAL PATTERN

BROWSER

VIEW

DATABASE

APICONTROLLER

MOBILE APP

FRONTEND CONTROLLER

LIBRARIES

BACKENDCONTROLLER

BROWSER

VIEW

CRONJOB /CONTROLLER

EXTERNAL SERVICES

MODEL MODEL MODEL. . .

REAL LIFE

MVC ARCHITECTURAL PATTERN

?Add a new feature...

Upgrade a library...

MVC ARCHITECTURAL PATTERN

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

HEXAGONAL ARCHITECTURE

DATABASEINFRASTR.

LOGGINGINFRASTR.

EMAILINFRASTR.

OTHERSERVICES

MOBILEAPI

USERINTERFACE

COMMANDLINE

TESTS

PUBLICAPI

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

DOMAIN

BEHAVIORS AND

CONSTRAINTS

What the application can and cannot do.

Set of entities and how they interact.

HEXAGONAL ARCHITECTURE

DOMAIN

APPLICATION SERVICES

ORCHESTRATES THE

DOMAIN

Uses domain entities and other application services to provide

higher-level services.

HEXAGONAL ARCHITECTURE

ADAPTS REQUESTS

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

app interacts with external services.

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

BOUNDARIES

Interfaces that define how

the inner layer can be accessed by the

outer layer.

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

DEPENDENCY INVERSION

Dependency always flows

from outside in.

“Hollywood principle”

DOMAIN

APPLICATION SERVICES

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

HEXAGONAL ARCHITECTURE

DOMAIN

User

Media

Comment

…User-> attachMedia( Media )

Media->attachComment( Comment )

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

BOUNDARIES

UserRepositoryInterface

UserDAOInterface

MediaRepositoryInterface

CommentRepositoryInterface

…

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

SERVICES PROVIDED(AND USED)

ValidationService

NotificationService

FilesystemService…

UploadMediaCommand

CreateMediaCommand

AddCommentCommand(using services above)

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

BOUNDARIES

Each service or command

would implement their own interface, if it proceeds.

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

ADAPTS REQUESTS

From outside > IN

MediaAPIController

LikeAPIController

MediaWebController

TestMediaUploadCommand

NotifyMediaUploadCLIAdapter

…

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

ADAPTS REQUESTS

From inside > OUT

RedisCachingServices

MediaMongoDBRepository

UsersMySQLRepository

MandrillAppNotificationService

AmazonS3Service

…

DOMAIN

APPLICATION SERVICES

FRAMEWORK

HEXAGONAL ARCHITECTURE

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