Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(javascript): add soc and logic #44

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

docs(javascript): add soc and logic #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
743f582
feat(docusaurus): Add docusaurus and design sections (#1)
MatanBorenkraoutNielsen Aug 17, 2020
22e4bc0
chore(docusaurus): Update config file
MatanBorenkraoutNielsen Aug 17, 2020
7f8505a
fix(yarn): Change npm registry to remove exelator's nexus
MatanBorenkraoutNielsen Aug 17, 2020
14df085
fix(docusaurus): Remove the showReadTime since it failed the build
MatanBorenkraoutNielsen Aug 17, 2020
1a180cb
fix(docusaurus): Fix broken build
MatanBorenkraoutNielsen Aug 17, 2020
a2b08ac
Merge remote-tracking branch 'upstream/master'
MatanBorenkraoutNielsen Oct 12, 2020
359cdd4
docs: add soc and business logic
MatanBorenkraoutNielsen Oct 12, 2020
405d578
fix: code review
MatanBobi Oct 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# IDE
/.idea/
.vscode
.DS_Store
.DS_Store
/node_modules/
/build/
1 change: 1 addition & 0 deletions javascript/javascript-docs/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
registry=https://registry.npmjs.org
19 changes: 17 additions & 2 deletions javascript/javascript-docs/docs/high-level-design-fe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,26 @@ TBD

## Where should the business logic reside?

TBD
Most of our applications use Redux, therefor this section will focus on where to locate logic using redux.
In redux there are actions and reducers. A reducer is a pure function which returns the same value for a specific input and has no side effects.
We also use Selectors ([reselect](https://github.com/reduxjs/reselect)) to fetch data from the store.
In a react redux application, the data should be kept on the store.
We prefer putting as much logic in the reducer rather than the selector/action/event handler who started the operation.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't the business logic be on a redux middleware?
unless you dont want to talk about middlewares since its not part of redux, and you need to add it manually

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, I guess we can talk about it but I believe that redux-logic messes up the clear separation of concerns. A middleware is only a tool for us to achieve something, IMO it shouldn't contain real logic, but that's my opinion, lets discuss it :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically, I believe in what redux claim in their docs:
https://redux.js.org/style-guide/style-guide#put-as-much-logic-as-possible-in-reducers

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I agree, if its logic related to the store than it should be in the reducer, I think I got confused with different kind of logic like async logic https://redux.js.org/style-guide/style-guide#use-thunks-for-async-logic

Copy link
Contributor Author

@MatanBobi MatanBobi Oct 12, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, async logic should happen within a middleware, definitely.

Having most of the logic located in the reducer lets us easily test that our flow works as expected since the reducer is a pure function.

## Separation of concerns

TBD
Let's start by saying what SoC even means:
"Separation of Concerns (SoC) is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern" ([Wikipedia](https://en.wikipedia.org/wiki/Separation_of_concerns)).
In React we separate our concerns by using a few tools: Redux, Selectors, React Hooks and React Components (Containers vs Presentational Components).
1. Redux Manages our data flow and data storage.
2. Selectors help us fetch data from the store and if needed manipulate it for the presentational layer.
3. React Hooks encapsulate a shared logic that can be used wherever needed (`useEventListener`, `useOnClickOutside` etc.).
4. React Components: In here we should distinguish between Containers and Presenetational components.
1. Containers - Pull out the data from the store and manage all data process.
2. Presenetational Components - Present the data to the user. They are our **view** layer and should manage the UI and interactions with the user.

Following these rules helps us create building blocks that can be shared and re-used everywhere.

## Compose in Frontend

Expand Down
2 changes: 1 addition & 1 deletion javascript/javascript-docs/docs/testing-style-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ jest.mock('moment', ()=> ({

The below diagram illustrates main blocks that involved in End-to-end test: [Test](#test), [Page Object](#page-object), [Flow](#flow)

![End-to-end Test diagram](./resources/e2eDiagram.png)
![End-to-end Test diagram](../static/img/e2eDiagram.png)

##### Page Object

Expand Down
17 changes: 6 additions & 11 deletions javascript/javascript-docs/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
module.exports = {
title: 'My Site',
tagline: 'The tagline of my site',
url: 'https://your-docusaurus-test-site.com',
title: 'Nielsen OSS',
tagline: 'Docs',
url: 'https://nielsen-docs.netlify.app',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
organizationName: 'nielsen',
projectName: 'nielsen-oss',
themeConfig: {
navbar: {
title: 'Nielsen OSS',
logo: {
alt: 'Nielsen',
src: 'img/logo.svg',
},
links: [
items: [
{
to: 'docs/',
activeBasePath: 'docs',
Expand Down Expand Up @@ -50,10 +50,6 @@ module.exports = {
{
title: 'More',
items: [
{
label: 'Blog',
to: 'blog',
},
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
Expand All @@ -69,7 +65,6 @@ module.exports = {
'@docusaurus/preset-classic',
{
docs: {
showReadingTime: true,
// It is recommended to set document id as docs home page (`docs/` path).
homePageId: 'high-level-design-fe',
sidebarPath: require.resolve('./sidebars.js'),
Expand Down