hexagonal architecture for the web
TRANSCRIPT
![Page 1: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/1.jpg)
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
![Page 2: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/2.jpg)
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
![Page 3: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/3.jpg)
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
![Page 4: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/4.jpg)
HOW DID EVERYTHING START?
![Page 5: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/5.jpg)
![Page 6: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/6.jpg)
1ST GENERATION
PLAIN-HTML-STATIC PAGES
![Page 7: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/7.jpg)
2ND GENERATION
DYNAMIC PAGES
![Page 8: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/8.jpg)
3RD GENERATION
DYNAMIC PAGES 2.0
![Page 9: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/9.jpg)
4TH GENERATION
DYNAMIC PAGES 2.0MULTIPLE DEVICES
SERVICES
![Page 10: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/10.jpg)
MVC ARCHITECTURAL PATTERN
MODEL
ENCAPSULATESDATA
VIEW
INTERACTS WITH USER
CONTROLLER
PROCESSES REQUESTS
SEPARATES RESPONSIBILITIES
![Page 11: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/11.jpg)
MVC ARCHITECTURAL PATTERN
BROWSER CONTROLLER
VIEW MODEL DATABASE
CONCERNS ARE CLEAR
Aren’t they?
![Page 12: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/12.jpg)
MVC ARCHITECTURAL PATTERN
ACL System...
Data validation...
File processing...
File upload...
Email sending... ?Geolocate user...
![Page 13: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/13.jpg)
MVC ARCHITECTURAL PATTERN
BROWSER
CONTROLLERACL SYSTEMFILE UPLOAD
DATA VALIDATIONEMAIL SENDING
FILE PROCESSINGGEOLOCATE USER
VIEW MODEL DATABASE
![Page 14: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/14.jpg)
![Page 15: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/15.jpg)
MVC ARCHITECTURAL PATTERN
Mobile API...
Admin CMS...
Push notifications... ?
![Page 16: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/16.jpg)
MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
MODEL
DATABASE
APICONTROLLER
MOBILE APP
FRONTEND CONTROLLER
LIBRARIES
BACKENDCONTROLLER
BROWSER
VIEW
![Page 17: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/17.jpg)
![Page 18: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/18.jpg)
MVC ARCHITECTURAL PATTERN
Cronjobs...
External services... ?
![Page 19: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/19.jpg)
MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
MODEL
DATABASE
APICONTROLLER
MOBILE APP
FRONTEND CONTROLLER
LIBRARIES
BACKENDCONTROLLER
BROWSER
VIEW
CRONJOB /CONTROLLER
EXTERNAL SERVICES
![Page 20: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/20.jpg)
![Page 21: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/21.jpg)
MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
DATABASE
APICONTROLLER
MOBILE APP
FRONTEND CONTROLLER
LIBRARIES
BACKENDCONTROLLER
BROWSER
VIEW
CRONJOB /CONTROLLER
EXTERNAL SERVICES
MODEL MODEL MODEL. . .
REAL LIFE
![Page 22: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/22.jpg)
MVC ARCHITECTURAL PATTERN
?Add a new feature...
Upgrade a library...
![Page 23: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/23.jpg)
MVC ARCHITECTURAL PATTERN
BROWSER
VIEW
DATABASE
APICONTROLLER
MOBILE APP
FRONTEND CONTROLLER
LIBRARIES
BACKENDCONTROLLER
BROWSER
VIEW
CRONJOB /CONTROLLER
EXTERNAL SERVICES
MODEL MODEL MODEL. . .
REAL LIFE
![Page 24: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/24.jpg)
ADDING A NEW FEATURE
![Page 25: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/25.jpg)
UPDATING THE FACEBOOK SDK
![Page 26: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/26.jpg)
TECHNICAL DEBT
TIME
CO
ST
OF
CH
AN
GE
MAX. ALLOWED
![Page 27: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/27.jpg)
The complexity of the architecture grows along with the complexity
of our app.
![Page 28: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/28.jpg)
Sometimes MVC isnot enough
![Page 29: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/29.jpg)
HEXAGONAL ARCHITECTURE
ALSO KNOWN AS PORTS AND ADAPTERS
INTRODUCTION TO THE
![Page 30: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/30.jpg)
Identify the aspects that vary and separatethem from what stays the same
![Page 31: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/31.jpg)
HEXAGONAL ARCHITECTURE
DATABASEINFRASTR.
LOGGINGINFRASTR.
EMAILINFRASTR.
OTHERSERVICES
MOBILEAPI
USERINTERFACE
COMMANDLINE
TESTS
PUBLICAPI
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 32: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/32.jpg)
HEXAGONAL ARCHITECTURE
DOMAIN
BEHAVIORS AND
CONSTRAINTS
What the application can and cannot do.
Set of entities and how they interact.
![Page 33: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/33.jpg)
HEXAGONAL ARCHITECTURE
DOMAIN
APPLICATION SERVICES
ORCHESTRATES THE
DOMAIN
Uses domain entities and other application services to provide
higher-level services.
![Page 34: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/34.jpg)
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
![Page 35: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/35.jpg)
HEXAGONAL ARCHITECTURE
BOUNDARIES
Interfaces that define how
the inner layer can be accessed by the
outer layer.
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 36: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/36.jpg)
HEXAGONAL ARCHITECTURE
DEPENDENCY INVERSION
Dependency always flows
from outside in.
“Hollywood principle”
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 37: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/37.jpg)
• 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
![Page 38: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/38.jpg)
EXAMPLEQUICK
WITH NO CODE
![Page 39: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/39.jpg)
HEXAGONAL ARCHITECTURE
DOMAIN
User
Media
Comment
…User-> attachMedia( Media )
Media->attachComment( Comment )
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 40: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/40.jpg)
HEXAGONAL ARCHITECTURE
BOUNDARIES
UserRepositoryInterface
UserDAOInterface
MediaRepositoryInterface
CommentRepositoryInterface
…
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 41: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/41.jpg)
HEXAGONAL ARCHITECTURE
SERVICES PROVIDED(AND USED)
ValidationService
NotificationService
FilesystemService…
UploadMediaCommand
CreateMediaCommand
AddCommentCommand(using services above)
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 42: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/42.jpg)
HEXAGONAL ARCHITECTURE
BOUNDARIES
Each service or command
would implement their own interface, if it proceeds.
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 43: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/43.jpg)
HEXAGONAL ARCHITECTURE
ADAPTS REQUESTS
From outside > IN
MediaAPIController
LikeAPIController
MediaWebController
TestMediaUploadCommand
NotifyMediaUploadCLIAdapter
…
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 44: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/44.jpg)
HEXAGONAL ARCHITECTURE
ADAPTS REQUESTS
From inside > OUT
RedisCachingServices
MediaMongoDBRepository
UsersMySQLRepository
MandrillAppNotificationService
AmazonS3Service
…
DOMAIN
APPLICATION SERVICES
FRAMEWORK
![Page 45: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/45.jpg)
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 =
![Page 46: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/46.jpg)
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.
![Page 47: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/47.jpg)
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.
![Page 48: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/48.jpg)
QUESTIONS
![Page 49: Hexagonal architecture for the web](https://reader034.vdocuments.us/reader034/viewer/2022042706/587855021a28ab68198b7115/html5/thumbnails/49.jpg)
THANK YOUFOR YOUR ATTENTION
VISIT OUR WEBSITE
www.agentur-loop.com