Michał Załęcki, woumedia
Bulletproof and Maintainable JS Applications
13th July 2016
What I'm going to talk about
- approaches
- patterns
- overall tips
What I'm not going to talk about
MVC
- since 1976 (introduced in Smalltalk-76)
- works... on the server
MVC
MVC-ish
- MVC
- MVVM
- MVP
- MVW
- MV* gets really complicated really quickly
MVC
MVC
MVVM
Flux
- "An Application Architecture for React"
- Unidirectional data flow
- Uses subset of Pub/Sub
- Introduced by Jing Chen, Software Enginieer at Facebook in talk called "Rethinking Web App Development at Facebook"
Flux
Flux
Redux
- Predictable state container for JavaScript apps
- Extensible thanks to robust middleware
- Great community
- Hot Module Replacement (reducers)
- Time Traveling Debugger
- DevTools extension
Redux
Redux
Redux: Root Reducer
Redux: Containers
Reducing side effects
- Extreacting side effects to separate part of the applicatiion allows for writing pure functions everyware else
- One place to deal with localStorage, redirects and such
Redux Saga
- Side Effects middleware (aka Asynchronous Actions) for Redux applications
- Responsible for orchestrating complex/asynchronous operations
- Composable
Redux Saga
Redux Saga
export function* deliverShipmentSaga({ payload, meta: { token } }) {
yield put(activateLoader());
const { response, error } = yield call(api.deliverShipment, payload, token);
if (response) {
yield put(deliverShipmentSuccess(response));
const toast = { content: "Shipment marked as delivered.", type: "success" };
yield fork(addToastAndRemoveIn, toast, 3000);
} else {
yield put(deliverShipmentFailure(error));
yield fork(handleError, "cannot mark shipment as delivered", error);
}
yield put(deactivateLoader());
}
Reactive State
import Rx from "rxjs";
function createState(reducer$, initialState$ = Rx.Observable.of({})) {
return initialState$
.merge(reducer$)
.scan((state, [scope, reducer]) =>
({ ...state, [scope]: reducer(state[scope]) }))
.publishReplay(1)
.refCount();
}
export default createState;
Reactive State: connect
function connect(state$, selector = state => state) {
return function wrapWithConnect(WrappedComponent) {
return class Connect extends React.Component {
componentWillMount() {
this.subscription = state$.map(selector).subscribe(::this.setState);
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
render() { ... }
};
}
}
Model-View-Intent
- Focused on Human-Computer interaction
- Reactive
- Whole application is build from pure functions
- Side effects happen inside drivers which you probably not going to write
- Developed for Cycle.js
MVI
MVI
Use object mappers
- Normalize API communication
- Flatten nested responses
- Solve inconsistency between empty string, null and undefined
- Omit values based on the predicate
- MichalZalecki/mappet
mappet
const schema = [
["firstName", "first_name", text => text.toUpperCase()],
["cardNumber", "card.number"],
];
const mapper = mappet(schema);
const source = { first_name: "Michal", age: 21, card: { number: "555..." } };
const result = mapper(source);
// {
// firstName: "MICHAL",
// cardNumber: "5555-5555-5555-4444"
// }
Use TypeScript or Flow
- TypeScript is a JavaScript superset and compiler
- Flow is a static type checker and can be added gradually
- Nuclide experience isn’t nearly as good as Visual Studio Code
- Flow is much better than TypeScript in inferencing types
- Most TypeScript annotations are compatible also with Flow
- In Flow null is a distinct value and has it’s own type.
- http://michalzalecki.com/typescript-vs-flow
Build from modules
- Good module is independent, small and reusable
- Keep your modules stateless
- Avoid tight coupling (e.g. with base library)
- Isolate modules
- Access module only though its interface
Name things correctly
- Use short but descriptive names
- Don't Helper and Utils, you can do better than that!
- Be consistent
- If applied, this commit will…
git commit -m "Extract responsibility of loading state from orderReducer"
