A presentation at JSWorld by Adrià Fontcuberta
The Art(?) of Front-end Architecture
👋 Hi! I’m Adrià Fontcuberta Senior(?) Software Engineer @ Holaluz Member of the official Vue Test Utils Member of Testing Library Co-organizer of VueJS Barcelona @afontq afontcu.dev
What are* we aiming for?
What are* we aiming for? Write maintainable, scalable apps
What are* we aiming for? Write maintainable, scalable apps Stay away from the framework
What are* we aiming for? Write maintainable, scalable apps Share knowledge between teams and areas Stay away from the framework
What are* we aiming for? Write maintainable, scalable apps Stay away from the framework Share knowledge between teams and areas Reduce the gap between Front and Back
This is not about writing good software, but how to build software that can change over time
Business stuff Delivery stuff
Business stuff Delivery stuff
Business stuff Delivery stuff
Business stuff Delivery stuff
Delivery stuff
Domain Use cases Delivery stuff
Domain
Domain Use cases
Domain Use cases Delivery
This layer has two streams of data
Infrastructure
Infrastructure UI / Input
Infrastructure API repositories Cookies Web Storage
UI ¯_(ツ)_/¯
What does layer really mean?
Dependencies only point inwards
Dependencies only point inwards An inner layer should never rely on anything from an outer layer.
Dependencies only point inwards An inner layer should never rely on anything from an outer layer.
Use case “Get user information” depends on “User”
Use case “Get user information” depends on “User”
Use case “Get user information” depends on “User”
Use case “Get user information” depends on “User” Use case “Get user information” depends on the UI framework
Use case “Get user information” depends on “User” Use case “Get user information” depends on the UI framework
Use case “Get user information” depends on “User” Use case “Get user information” depends on the UI framework
The Web is a delivery mechanism
It is not the center. It is external.
It is really, really hard to get it right
We need to adapt its content for our inner layers
We need to adapt its content for our inner layers
Domain Use cases Infrastructure Adapter UI
Domain Use cases Infrastructure Adapter UI
Domain Use cases Infrastructure Adapter UI Independent of the framework
Domain Use cases Independent of the framework Infrastructure Adapter UI The framework™
Domain Use cases Infrastructure Independent of the framework
Domain Use cases Infrastructure Independent of the framework
infra UI adapter app* domain
infra 👩 UI adapter app* domain
Actions Reducers View State Actions Mutations View State
infra 👩 UI adapter app domain
infra state 👩 UI mutations actions app domain
type Coordinate = 0 | 1 | 2 type Sign = “X” | “O” | “” class Board { public isFull(): boolean {} public isPositionTaken(cell: Cell): boolean {} public fillPosition(cell: Cell, player: Player): void {} } class Cell { private row: Coordinate private col: Coordinate } class Player { public sign: Sign public equals(player: Player): boolean {} }
type Coordinate = 0 | 1 | 2 type Sign = “X” | “O” | “” class Board { public isFull(): boolean {} public isPositionTaken(cell: Cell): boolean {} public fillPosition(cell: Cell, player: Player): void {} } T O N S I S I TH ” Y A W E T I R E H “T class Cell { private row: Coordinate private col: Coordinate } class Player { public sign: Sign public equals(player: Player): boolean {} }
type Coordinate = 0 | 1 | 2 type Sign = “X” | “O” | “” class Board { public isFull(): boolean {} public isPositionTaken(cell: Cell): boolean {} public fillPosition(cell: Cell, player: Player): void {} } class Cell { private row: Coordinate private col: Coordinate } class Player { public sign: Sign public equals(player: Player): boolean {} }
class Game { private board: Board private isEnded: (): boolean private getLastPlayer(): Player public makeMove(player: Player, cell: Cell): void { if (this.isEnded()) throw new FinishedGameException() if (player.equals(this.getLastPlayer())) throw new AlreadyPlayedException() if (this.board.isPositionTaken(cell)) throw new AlreadyTakenException() this.board.fillPosition(cell, player) } }
function makeMoveUseCase({ game, player, cell }, { onSuccess, onError }) { try { game.makeMove(player, cell) } catch (error) { onError(error) return } onSuccess(player, cell) }
function makeMoveUseCase({ game, player, cell }, { onSuccess, onError }) { try { game.makeMove(player, cell) } catch (error) { onError(error) return } onSuccess(player, cell) }
function makeMoveUseCase({ game, player, cell }, { onSuccess, onError }) { try { game.makeMove(player, cell) } catch (error) { onError(error) return } onSuccess(player, cell) }
import { makeMoveUseCase } from ‘application/!!…’ const actions = { makeMove({ state, commit }, cell) { commit(‘MAKE_MOVE_REQUEST’) makeMoveUseCase({ player: state.currentPlayer, game: state.game, cell }, { onSuccess: (player) !=> commit(‘MAKE_MOVE_SUCCESS’, player), onError: (error) !=> commit(‘MAKE_MOVE_ERROR’, error.message) }) } }
import { makeMoveUseCase } from ‘application/!!…’ const actions = { makeMove({ state, commit }, cell) { commit(‘MAKE_MOVE_REQUEST’) makeMoveUseCase({ player: state.currentPlayer, game: state.game, cell }, { onSuccess: (player) !=> commit(‘MAKE_MOVE_SUCCESS’, player), onError: (error) !=> commit(‘MAKE_MOVE_ERROR’, error.message) }) } }
import { makeMoveUseCase } from ‘application/!!…’ $(‘#submit_move’).click(function() { makeMoveUseCase( { player: $(‘#current_player’).val(), game: window.game, cell: [$(‘input[name=”row”]’).val(), $(‘input[name=”col”]’).val()] }, { onSuccess: () !=> $(‘#success_message’).fadeIn(‘slow’), onError: () !=> window.alert(‘oops something went wrong’) } ) })
infra UI adapter app domain
Disclaimer #1 You might not need any of this
Disclaimer #1 You might want some parts of it
Disclaimer #2 This talk was actually about the front end
Front-end development is software development
Disclaimer #3 Nothing explained here today is new
Wrapping up
Wrapping up Organize code around business rules, not frameworks
Wrapping up Organize code around business rules, not frameworks Dependency Rule Keep details away from the core
Wrapping up Organize code around business rules, not frameworks Make everything easy to test Dependency Rule Keep details away from the core
Wrapping up Organize code around business rules, not frameworks Dependency Rule Keep details away from the core Make everything easy to test Front-end development is software development
This is not about writing good software, but how to build software that can change over time
Ok Adri this is cool Where should I start?
Ok Adri this is cool Where should I start? noti.st/afontcu
👋 That’s all! @afontq afontcu.dev noti.st/afontcu
Front-end apps are growing in complexity, so we need to uncover better ways to build durable, maintainable codebases.
In this talk, we’ll discuss some ideas, principles, and patterns that might help us regardless of the framework we’re using.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.