Roberto Fuentes
fullstack devops
DOWNTOWN REACTJS MEETUP
Front-End
Software Architecture
Overview
- Software Architecture
- Folder Structure
- Tools
- ReactJS
- App
Software Architecture
- What is architecture?
- What is software architecture?
- What is information architecture?
- Why/how does it apply to you?
Architecture
What is Architecture?
- "Architecture consists of building stuff, like forks, chairs, tables, tree houses, and stuff even as big as houses and cities."
- "Ability to dream like an artist, think like an engineer."
- "Architecture is art and engineering. It manifests itself in design. That is the creative part. Science tries to discover something."
- "Architecture is a systematic arrangement of components."
- "The study of form, space, and order is called architecture."
- "... the planned design of any kind of system"
What is 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]
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.
What is Information Architecture?
- Information architecture is the practice of deciding how to arrange the parts of something to be understandable.
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.
- Information architecture forms a foundation for User Experience Design
- We like to say that if you’re making things for others, you’re practicing information architecture.
Why/How does it apply to us?
Why/How does it apply to us?
- we build structures
- we build presentation
- we build logic
- we build for the web
- we build for multiple devices
- we build to be consumed
- we take artsy designs & make them 'real'
- we create web experiences for our users
- we compose elements to make products
- we manage state to remember our users
- digital form, digital space, digital order
- our nature is the web
- we build the portals so that users can join us as we explore the vastness of the net
Why/How does it apply to us?
- building components
- wrapping elements (HOC)
- HTML - Structure
- CSS - Presentation
- JS - User Interaction
-
composing libraries & functions
- react, redux, sagas, thunks, promises, generators, etc
- building WEB apps
We Become Information Architects
Folder Structure
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?
Folder Structure
- separate HTML/CSS/JS - separation of concerns/tehcnology
- File-Type First (natural/functional)
- Feature First (Domain/Pods)
- Modular Component Architecture
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?
Folder Structure
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.jshow easily can it accommodate change?
Folder Structure
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?
Folder Structure
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.jscomposable
HOC
how easily can it accommodate change?
Folder Structure
Mix w/ Conditions
- no more than two levels deep
- smart/dumb per folder
- folder named after component
- shared folder
- Internal vs External
how easily can it accommodate change?
how easily can it accommodate change?
Tools
- MVC
- Frameworks
- Libraries
Client-Side Architecture
Model-View-Controller (MVC)
- Model
- Data
- View
- Interface to view & modify data
- Controller
- Operations to perform on data
Model-View-Whatever (MVW)
Frameworks
- Collection of libraries
- Self-Contained
- Gets you going fast
- Black-box
- Inflexible
Libraries
- Bug Propagation
- Limitations
- Single Responsibility Principle
- Modularity
- Testability
a collection of implementations of behavior
AngularJS
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.
ReactJS
- Unidirectional User Interface Architecture
- It also makes state predictable*
-
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?
Recap
- we got an understanding of information architecture
- we understand the impact of folder structure with our mental app structure
- we understand that our decision to use a tool will limit our solutions to problems
- we chose ReactJS
ReactJS
and friends
Redux
Flux
Flow
Typescript
Thunks
Sagas
Observables
Mobx
Promise
Logic
Effects
Router
ES6
Babel
Redux
ReactJS + Redux
{
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)));
};ReactJS + Redux + Side Effects
ReactJS + Redux + Side Effects
ReactJS + Redux + Side Effects
thunky?
ReactJS + Redux + Side Effects
ReactJS + Redux + Side Effects
- What are you building?
- How are you organizing?
- What are the pieces?
- How are the pieces talking to each other?
- What are the actions?
- What is the pipeline?
keep in mind
Buena Nota App
you're only as good as the problems you solve
questions?
front-end-architecture
By Roberto Fuentes
