Front-End
Software Architecture
Software architecture refers to the high level structures of a software system, the discipline of creating such structures, and the documentation of these structures. These structures are needed to reason about the software system. Each structure comprises software elements, relations among them, and properties of both elements and relations.[1] The architecture of a software system is a metaphor, analogous to the architecture of a building.[2]
Architecture is about change
The measure of a design is how easily it accommodates changes
Software architecture is about organizing the structure of systems that will handle, store & represent information.
Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.[1] Typically, it involves a model or concept of information that is used and applied to activities which require explicit details of complex information systems. These activities include library systems and database development.
We Become Information Architects
What are we organizing?
files
folders
fonts
CSS
SASS
LESS
PostCSS
JSX
JS
controllers
services
gateways
APIs
typescript
configs
webpack
babel
env
eslint
views
dumb/smart
how easily can it accommodate change?
How are we organizing?
Be Pragmatic
Sometimes just restructuring a project can help you to bring clarity to it and make it more understandable to yourself and others.
how easily can it accommodate change?
File-Type First
app/
reducers/
index.js
auth/
memberships.js
1.js
...
commentable/
comments.js
2.js
...
... many more folders/ ...
components/
auth/
login.jsx
...
commentable/
comments.jsx
...
...
Get's you going
Lots of tutorials do this
Scale
Debugging
actions/
CommandActions.js
UserActions.js
components/
Header.js
Sidebar.js
Command.js
CommandList.js
CommandItem.js
CommandHelper.js
User.js
UserProfile.js
UserAvatar.js
containers/
App.js
Command.js
User.js
reducers/
index.js
command.js
user.js
routes.js
how easily can it accommodate change?
Feature First (Pods)
app/
app.jsx
authentication/
authenticationContainer.jsx
actions/
...
comments/
commentsContainer.jsx
actions/
...
...
app/
settings/
profile/
notifications/
...
Clear
Can split code further
how easily can it accommodate change?
Component
/src
/components
/Button
/Notifications
/components
/ButtonDismiss
/images
/locales
/specs
/index.js
/styles.scss
/index.js
/styles.scss
/scenes
/Home
/components
/ButtonLike
/services
/processData
/index.js
/styles.scss
/Sign
/components
/FormField
/scenes
/Login
/Register
/locales
/specs
/index.js
/styles.scss
/services
/api
/geolocation
/session
/actions.js
/index.js
/reducer.js
/users
/actions.js
/api.js
/reducer.js
index.js
store.js
composable
HOC
how easily can it accommodate change?
Mix w/ Conditions
how easily can it accommodate change?
how easily can it accommodate change?
Client-Side Architecture
Model-View-Whatever (MVW)
a collection of implementations of behavior
Most templating systems bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.
Have one single source of truth (from the state)
States are read only and immutable
Changes are made with pure functions.
just the View
ok so now what?
Redux
Flux
Flow
Typescript
Thunks
Sagas
Observables
Mobx
Promise
Logic
Effects
Router
ES6
Babel
{
type: 'DEPOSIT',
value: 10
}
function counter(state = 0, action) {
switch (action.type) {
case 'DEPOSIT':
return state + action.value
case 'WITHDRAW':
return state - action.value
default:
return state
}
}
{ type: 'FETCH_ACCOUNT_REQUEST' }
{ type: 'FETCH_ACCOUNT_SUCCESS', account: { ... } }
{ type: 'FETCH_ACCOUNT_FAILURE', error: 'Oops' }
function receiveAccount(account) {
return {
type: FETCH_ACCOUNT_SUCCESS,
account
}
}
let getAccount = id => dispatch => {
dispatch(requestAccount(id));
return fetch('/account', id)
.then(account => dispatch(receiveAccount(account)))
.catch(error => dispatch(throwError(error)));
};
thunky?
keep in mind
you're only as good as the problems you solve
questions?