Frontend State
Pain points
- Cofee
- Backbone
- jQuery Endpoints
- Webpack configuration (support of coffee etc)
- No spec
Patient client
APP
Modules
Hybrid Bridge
BUS
Mobile
Activation
Conversation
Signup
- Remove unused modules
- Move modules to React controller-view
- Make services aware of Store
- Create React-Router
Controller View
- Self-aware
- Connects to stores
- Sends actions
- Doesn't need extra data from props
- "Stateless"
Propositions
const SomeSampleScreenView = ({elements}) => {
return (
<ul>
{elements.map((element) =>
<li key={element.id}>{element.name}</li>
}
</ul>
);
}
const someSampleScreen = React.createClass({
compoenentDidMount() {
ASDStore.addChangeListener(this.setStateFromStore);
},
setStateFromStore(){
this.setState({ elements: ASDStore.getElements() });
},
const {elements} = this.state;
render() {
return <SomeSampleScreenView elements={elements} />
}
});
Element
Propositions
- no function inside render function
- shouldn't connect to store/actions directly
- Pure Stateless if possible
render() {
const elements, name = {this.props};
const renderPartA() {
return <h1>{name}</h1>;
}
return(<div>{renderPartA()}</div>);
}
// =================
const renderPartA(name) {
return <h1>{name}</h1>;
}
render() {
const elements, name = {this.props};
return(<div>{renderPartA(name)}</div>);
}
Store / Action
export const ACTION_TYPES = {
patientReceived: 'PATIENT_RECEIVED',
patientSearchResultsReceived: 'PATIENT_SEARCH_RESULTS_RECEIVED',
patientIssuesReceived: 'PATIENT_ISSUES_RECEIVED',
};
export function loadPatientDataAction(patientId, patientData) {
return {
actionType: ACTION_TYPES.patientReceived,
patientId,
patientData,
};
}
=====
import { ACTION_TYPES } from 'stores/abcStore';
Services
Types
- Libs (HTTP Service)
- State listeners
- Separate Serivces
TODO
- Separation
- Naming
- Initialization
Router
Router
Propositions
- Multiple Routes
- Singleton Router (state in store)
- Allow mutation/ disallow mutation
- Push state / setState
- Auth
Roadmap
Patient client to react
Tests
Unify services
Unify endpoints
Reimplement auth
Sockets
Frontend State
By Michał Koźmiński
Frontend State
- 305