This document discusses hexagonal architecture, also known as ports and adapters. It begins by explaining how web applications have evolved from static pages to dynamic pages supported across multiple devices. It then discusses limitations of the traditional MVC pattern, such as increasing complexity and technical debt over time. Hexagonal architecture is introduced as an alternative that separates the core domain and application services from external interfaces and infrastructure. This improves flexibility, reusability, and independence from frameworks. The document provides an example of how hexagonal architecture structures a media sharing application. It concludes by recapping the benefits of hexagonal architecture and inviting questions.

1. 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

2. TechnicalTelecomEngineer
ESP: Telematics (UJAEN, 2012)
Doing web stuff since 2007
Probably a bit earlier…
Back-endEngineerat LOOP
Since 2013. Between Salzburg and Berlin.
jespejo89jespejo89
Passionate aboutWeb Services/ APIs
And skydiving.
Jesús Espejo
ABOUT ME

3. STRATEGY
SET THE FRAME
DESIGN ANDUX
ADD SOUL
TECHNOLOGY
MAKE IT WORK
SOCIAL
MAKE ‘EM TALK
MOBILE
FIRST CHOICE
INNOVATION
ALL SET FOR 2020
MOTION
AND PHOTOGRAPHY
CONTENT
AND INFLUENCERS
ACTIVATION
TARGET THEM
ANALYTICS
UNTIL IT‘S DONE
ABOUT LOOP

4. HOW DID EVERYTHING START?

6. 1ST GENERATION
PLAIN-HTML-STATIC PAGES

7. 2ND GENERATION
DYNAMIC PAGES

8. 3RD GENERATION
DYNAMIC PAGES 2.0

9. 4TH GENERATION
DYNAMIC PAGES 2.0
MULTIPLE DEVICES
SERVICES

10. MVC ARCHITECTURAL PATTERN
MODEL
ENCAPSULATES
DATA
VIEW
INTERACTS WITH
USER
CONTROLLER
PROCESSES
REQUESTS
SEPARATES RESPONSIBILITIES

11. MVC ARCHITECTURAL PATTERN
BROWSER CONTROLLER
VIEW MODEL DATABASE
CONCERNS ARE CLEAR
Aren’t they?

12. MVC ARCHITECTURAL PATTERN
ACL System...
Data validation...
File processing...
File upload...
Email sending...
?Geolocate user...

13. MVC ARCHITECTURAL PATTERN
BROWSER
CONTROLLER
ACL SYSTEM
FILE UPLOAD
DATA VALIDATION
EMAIL SENDING
FILE PROCESSING
GEOLOCATE USER
VIEW MODEL DATABASE

15. MVC ARCHITECTURAL PATTERN
Mobile API...
Admin CMS...
Push notifications...
?

16. MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
MODEL
DATABASE
API
CONTROLLER
MOBILE APP
FRONTEND
CONTROLLER
LIBRARIES
BACKEND
CONTROLLER
BROWSER
VIEW

18. MVC ARCHITECTURAL PATTERN
Cronjobs...
Externalservices...
?

19. MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
MODEL
DATABASE
API
CONTROLLER
MOBILE APP
FRONTEND
CONTROLLER
LIBRARIES
BACKEND
CONTROLLER
BROWSER
VIEW
CRONJOB /
CONTROLLER
EXTERNAL
SERVICES

21. MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
DATABASE
API
CONTROLLER
MOBILE APP
FRONTEND
CONTROLLER
LIBRARIES
BACKEND
CONTROLLER
BROWSER
VIEW
CRONJOB /
CONTROLLER
EXTERNAL
SERVICES
MODEL MODEL MODEL. . .
REALLIFE

22. MVC ARCHITECTURAL PATTERN
?Add a new feature...
Upgrade a library...

23. MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
DATABASE
API
CONTROLLER
MOBILE APP
FRONTEND
CONTROLLER
LIBRARIES
BACKEND
CONTROLLER
BROWSER
VIEW
CRONJOB /
CONTROLLER
EXTERNAL
SERVICES
MODEL MODEL MODEL. . .
REALLIFE

24. ADDING A NEW FEATURE

25. UPDATING THE FACEBOOK SDK

26. TECHNICAL DEBT
TIME
COSTOFCHANGE
MAX. ALLOWED

27. The complexity of the architecture
grows along with the complexity
of our app.

28. Sometimes MVC is
not enough

29. HEXAGONAL
ARCHITECTURE
ALSOKNOWN AS PORTS AND ADAPTERS
INTRODUCTION TO THE

30. Identify the aspects that vary and separate
them from what stays the same

31. HEXAGONAL ARCHITECTURE
DATABASE
INFRASTR.
LOGGING
INFRASTR.
EMAIL
INFRASTR.
OTHER
SERVICES
MOBILE
API
USER
INTERFACE
COMMAND
LINE
TESTS
PUBLIC
API
DOMAIN
APPLICATION SERVICES
FRAMEWORK

32. HEXAGONAL ARCHITECTURE
DOMAIN
BEHAVIORS AND
CONSTRAINTS
What the applicationcan and
cannot do.
Set of entities and how they
interact.

33. HEXAGONAL ARCHITECTURE
DOMAIN
APPLICATION SERVICES
ORCHESTRATES THE
DOMAIN
Uses domainentitiesand other
applicationservicesto provide
higher-level services.

34. HEXAGONAL ARCHITECTURE
ADAPTS REQUESTS
Defines how external services can
interact to our app,and how our
app interactswith external
services.
DOMAIN
APPLICATION SERVICES
FRAMEWORK

35. HEXAGONAL ARCHITECTURE
BOUNDARIES
Interfaces that define how
the inner layer can be
accessed by the
outer layer.
DOMAIN
APPLICATION SERVICES
FRAMEWORK

36. HEXAGONAL ARCHITECTURE
DEPENDENCY INVERSION
Dependency always flows
from outside in.
“Hollywood principle”
DOMAIN
APPLICATION SERVICES
FRAMEWORK

37. • Flexibility to changes.
• Code stable and easily testable.
• Lowcoupling.
• Code easy to maintain.
• Independence from UI.
• Independence from infrastructures.
• Framework independence.
• Reusable code.
Low
Technical Debt
WHAT ACHIEVE WITHHEXAGONAL ARCHITECTURE

38. EXAMPLE
QUICK
WITH NO CODE

39. HEXAGONAL ARCHITECTURE
DOMAIN
User
Media
Comment
…
User-> attachMedia( Media )
Media->attachComment( Comment )
DOMAIN
APPLICATION SERVICES
FRAMEWORK

40. HEXAGONAL ARCHITECTURE
BOUNDARIES
UserRepositoryInterface
UserDAOInterface
MediaRepositoryInterface
CommentRepositoryInterface
…
DOMAIN
APPLICATION SERVICES
FRAMEWORK

41. HEXAGONAL ARCHITECTURE
SERVICES PROVIDED
(AND USED)
ValidationService
NotificationService
FilesystemService
…
UploadMediaCommand
CreateMediaCommand
AddCommentCommand
(using services above)
DOMAIN
APPLICATION SERVICES
FRAMEWORK

42. HEXAGONAL ARCHITECTURE
BOUNDARIES
Each service or command
would implementtheir own
interface,if it proceeds.
DOMAIN
APPLICATION SERVICES
FRAMEWORK

43. HEXAGONAL ARCHITECTURE
ADAPTS REQUESTS
From outside > IN
MediaAPIController
LikeAPIController
MediaWebController
TestMediaUploadCommand
NotifyMediaUploadCLIAdapter
…
DOMAIN
APPLICATION SERVICES
FRAMEWORK

44. HEXAGONAL ARCHITECTURE
ADAPTS REQUESTS
From inside > OUT
RedisCachingServices
MediaMongoDBRepository
UsersMySQLRepository
MandrillAppNotificationService
AmazonS3Service
…
DOMAIN
APPLICATION SERVICES
FRAMEWORK

45. HEXAGONAL ARCHITECTURE
UploadMediaCommand
USER MEDIA-­>attachMedia( )
Validation
Service
NotificationService
FilesystemService
ValidationLib
AmazonS3Adapter Amazon S3
DOMAINAPP. SERVICESFRAMEWORK
LEGEND:
INFRASTRUCT.
PusherAdapter Pusher
MediaWeb
Controller
MediaAPI
Controller
Mobile
Device Tests
Web
Browser
??
CreateMediaMEDIA =

46. 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 testedin isolation.

47. LET’S RECAP
• How people consume web services has evolved.
• MVC has dominated the web world.
• Sometimes MVC is not enough.
• Hexagonal architecture mightbe 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.

48. QUESTIONS

49. THANK YOU
FOR YOUR ATTENTION
VISITOUR WEBSITE
www.agentur-loop.com