The 4 Layers of Single Page Applications You Need to Know

The 4 Layers of Single Page Applications
You Need to Know
Daniel Dughilă
Senior Software Development Engineer

3 Orange Restricted
Big ball of mud architecture

Every successful project needs
a clear architecture, understood by all
team members

Let’s architect a React application

Our app will display a list
of articles
As a user, I will be able to
create, delete and like
articles

Today’s frameworks are declarative
React, Angular, Vue, encourage us to use elements of
functional programming
Have you ever seen a flip book?

Credits theflippist @youtube.com

“Design simple views for each state in your
application and React will efficiently update
and render just the right components when
your data changes …”
“Build features quickly with simple,
declarative templates …”

Frameworks help us build apps consisting of views
Views are representations of state
But what is the state?

The state represents every piece of data that changes in
an application
The state should be immutable
Credits James K Nelson

Immutability
“Immutability makes tracking changes cheap.
A change will always result in a new object so we
only need to check if the reference to the object
has changed”
Controversial in OOP, especially in large-scale
applications, the anemic domain model is
acceptable when working with immutable data.

Let’s model the Article entity
// @flow
export type Article = {
+id: string;
+likes: number;
+title: string;
+author: string;
}

Article service
export type ArticleFields = {
+title: string;
+author: string;
}
export const createArticle = (articleFields: ArticleFields): ?Article => {
const {title, author} = articleFields;
return isTitleValid(title) && isAuthorValid(author) ?
Object.freeze({
id: v1(), likes: 0, title, author
}) :
null;
};
export const updateLikes = (article: Article, likes: number) => ...
export const isTitleValid = (title: string) => ...
export const isAuthorValid = (author: string) => ...

Creating Articles, agnostic of a framework
import * as articleService from "../domain/ArticleService";
const article = articleService.createArticle({
title: '12 rules for life',
author: 'Jordan Peterson'
});
/*
const itWillPrint = {
id: "92832a9a-ec55-46d7-a34d-870d50f191df",
likes: 0,
title: "12 rules for life",
author: "Jordan Peterson"
};
*/

ArticleState
// @flow
import type {Article} from "./Article";
export type ArticleState = Article[];

ArticleStore
let articleState: ArticleState = Object.freeze([]);
let subscribers: Function[] = Object.freeze([]);
export const notify = (articleState: ArticleState, subscribers: Function[]) => ...
export const addArticle = (article: Article) => ...
export const removeArticle = (article: Article) => ...
export const updateArticle = (article: Article) => ...
export const subscribe = (subscriber: Function) => ...
export const unsubscribe = (subscriber: Function) => ...

For whatever reason,
a designer comes and
demands all author names
to be UPPERCASE

ArticleUi service
export const displayAuthor = (author: string) => author.toUpperCase();
export const fetchInitialArticles = (): Article[] => ...

App component
class App extends Component<Props> {
render() {
return (
<div>
<ArticleFormContainer/>
<ArticleListContainer/>
</div>
);
}
}

ArticleForm Container
ArticleForm Component
Store

ArticleForm component
Change
title
Change
author
Submit
form

export class ArticleFormContainer extends Component<Props, FormData> {
...
submitForm(event: Event) {
...
if (isTitleValid && isAuthorValid) {
const newArticle = articleService.createArticle({
title: articleTitle,
author: articleAuthor
});
if (newArticle) { articleStore.addArticle(newArticle); }
...
}
render() {
return (
<ArticleFormComponent
submitForm={this.submitForm.bind(this)}
...
ArticleForm container

ArticleList Container
ArticleList Component
Store

ArticleList container
export class ArticleListContainer extends React.Component<Props, State> {
...
constructor(props: Props) {
super(props);
this.state = {
articles: []
};
this.subscriber = articleStore.subscribe((articles: Article[]) => {
this.setState({articles});
});
}
...
render() {
return <ArticleListComponent {...this.state}/>;
}
}

Article component
Delete action
Uppercase Projection
Like action

Article Container
Article Component
Store

export const ArticleComponent = (props: Props) => {
...
return (
<Card>
<CardBody>
<CardTitle>{article.title}</CardTitle>
<CardSubtitle>
{articleUiService.displayAuthor(article.author)}
</CardSubtitle>
<CardText>{article.likes}</CardText>
<Button onClick={() => likeArticle(article)}>Like</Button>{' '}
<Button onClick={() => deleteArticle(article)}>Delete</Button>
</CardBody>
</Card>
...
Article component

Article container
export class ArticleContainer extends Component<Props> {
likeArticle(article: Article) {
const updatedArticle = articleService.updateLikes(article, article.likes + 1);
articleStore.updateArticle(updatedArticle);
}
removeArticle(article: Article) {
articleStore.removeArticle(article);
}
render() {
return (
<ArticleComponent
article={this.props.article}
likeArticle={(article: Article) => this.likeArticle(article)}
deleteArticle={(article: Article) => this.removeArticle(article)}
/>
...

We now have a fully functional
React app and a robust, clear
defined architecture.
Anyone who joins our team
can feel comfortable to
continue our work.

Thank you
medium.com@danieldughila
@danielDughy
github.com/intojs

The 4 Layers of Single Page Applications You Need to Know

More Related Content

What's hot (20)

Similar to The 4 Layers of Single Page Applications You Need to Know (20)

Recently uploaded (20)

The 4 Layers of Single Page Applications You Need to Know