Modern Web Apps Development 101

Modern Web Apps
Development
by Stanimir Todorov
linkedin.com/in/stanimirt
github.com/stanimirtt
stanimir.todorof@gmail.com

Agenda
1. Intro
2. React
3. MobX
4. Redux
5. Angular (if we have the time)

Nowadays
ExecutionProject Files Transpiling

Project Structure
git clone git@github.com:stanimirtt/modern-web-apps-development-course-2018.git

Component
1. JSX
2. ES6 Import Statements
3. ReactDOM

1. Export Statements
2. Class-Based Components
3. Handling User Events
4. State
5. Controlled Components vs Uncontrolled Components
(refs)

1. Axios
2. Props
3. Keys
4. Selection
5. Styling

1/ State Should Be Minimally Defined
1. No Caching
2. No Data Duplication
3. No Cascading State Changes

2/ Everything Should Be Derived
1. Automatically
2. Define derivations and reactions
3. Mobx ensures efficiency and consistency

Modern Web Apps Development 101

observable
Enables MobX to observe your data
observer
MobX ensures that this component is consistent with the state
computed
Mobx ensures that this value is consistent with the state

1/ Define your state and make it observable
1. import { observable } from 'mobx';
2. const appState = observable({
items: [],
selectedItem: ''
});

2/ Create a view that responds to changes in the
State
1. import { observer } from 'mobx-react';
2. export default observer(App);
3. ReactDOM.render(<App appState={appState} />,
document.querySelector('.container'));

3/ Modify the State
1. appState.setSelectedItem = action(item => {
appState.selectedItem = item;
});
2. this.props.appState.setSelectedItem(response.data);

@decorators
1. yarn add babel-plugin-transform-decorators-legacy -D
2. .babelrc
{
...
"plugins": ["transform-decorators-legacy"]
}
3. .eslintrc.json - "experimentalDecorators": true

React and MobX
1. Provider
2. Inject

Examples for Route
● Route: `http://localhost:8080/`
● Route: `http://localhost:8080/items/5`
● Route: `http://localhost:8080/items/new`

3 Principles
Single source of truth
State is read-only
Changes are made with pure functions

State
The state of your whole application is stored in an object tree within a single store.
console.log(store.getState())
/* Prints
{
itemSelected: {...},
items: [
{
id: 1,
title: 'My Item',
},
...
]
}
*/

Actions
The only way to change the state is to emit an action, an object describing what
happened.
store.dispatch({
type: 'ITEM_SELECTED',
item: { … }
})

Reducers
To specify how the state tree is transformed by actions, you write pure reducers.
function itemSelected(state = [], action) {
switch (action.type) {
case 'ITEM_SELECTED':
return action.item;
default:
return state
}
}

Containers - Connecting Redux to React

Wrap-up
1. Add reducer in reducers folder with name of state key (Redux)
2. Import the created reducer in reducers/index.js and register with
combineReducers
3. Add action creator in action/index.js file
4. Identify which component need to be connect to the store (Redux)
5. Create a container file in containers folder
6. Import the component that need props and dispatch from the store in that
container

7. Wire the component to the store with the container following these steps:
a. import { connect } from 'react-redux';
b. import { bindActionCreators } from 'redux'; // in case you need to dispatch an action
c. const mapStateToProps = state => ({ items: state.items });
d. const mapDispatchToProps = dispatch => bindActionCreators({ onItemSelect: selectItem }, dispatch);
// in case you need to dispatch an action
a. export default connect(mapStateToProps, mapDispatchToProps)(Component); // name of the imported
component

Components
@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Templates
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes"
(click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<app-hero-detail *ngIf="selectedHero"
[hero]="selectedHero"></app-hero-detail>

Data binding
<li>{{hero.name}}</li>
<app-hero-detail
[hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

Pipes

<p>Today is {{today | date}}</p>

<p>The date is {{today | date:'fullDate'}}</p>

<p>The time is {{today | date:'shortTime'}}</p>

Directives
● Structural directives
<li *ngFor="let hero of heroes"></li>
<app-hero-detail
*ngIf="selectedHero"></app-hero-detail>
● Attribute directives
<input [(ngModel)]="hero.name">

Services
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}

Services
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes:
Hero[]) => {
this.logger.log(`Fetched
${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}

Dependency Injection
constructor(private service: HeroService) { }

Resources
● https://github.com/ryanmcdermott/clean-code-javascript#introduction
● https://vasanthk.gitbooks.io/react-bits/
● https://github.com/stanimirtt/modern-web-apps-development-course-2018
● https://gist.github.com/stanimirtt/4537fe1ad1f3c209043e305dc0e2b990

Modern Web Apps Development 101

More Related Content

What's hot (20)

Similar to Modern Web Apps Development 101 (20)

Recently uploaded (20)

Modern Web Apps Development 101

Editor's Notes