Slide from the talk I gave at React Sydney on 4 December 2017

1. iress.com 1
Monolith to Modern
Frontend
iress.com
Leon Bezuidenhout
Technical Lead
https://github.com/thirty3
https://stackoverflow.com/users/1226744/leon

2. iress.com 2
Legacy code is real
Always code as if the guy who ends up maintaining your code
will be a violent psychopath who knows where you live
John F. Woods

3. iress.com 3
This is how real

4. iress.com 4
Legacy systems become large

5. iress.com 5

6. iress.com 6
Our SPAs are also tightly coupled

7. iress.com 7
Web components to the rescue
NOT!

8. iress.com 8

9. iress.com 9

10. iress.com 10
Micro Frontends

11. iress.com 11
Time to build some tools

12. iress.com 12
UI Toolkit

13. iress.com 13
Designed for composition

14. iress.com 14
Multiple view modes for extra
complexity

15. iress.com 15
Now we can build our new front end

16. iress.com 16
Managing state

17. iress.com 17
Async Actions
Before
Success
Complete
Error
Cancel

18. iress.com 18

19. iress.com 19
Let’s make a library for that

20. iress.com 20
export function createEpic<TStoreState = any, TResponse = any>(
service: (payload: any, state: TStoreState) => Observable<TResponse>,
actions: AsyncActions
): ((
action$: ActionsObservable<ObservableAction>,
store: Store<TStoreState>
) => Observable<ObservableAction>) {
const epicType = actions.execute().type;
const epicCancellationType = actions.cancel().type;
return (action$, store) =>
action$.ofType(epicType).switchMap((action: PayloadAction) =>
service(action.payload, store.getState())
.map(actions.success)
.catch(e => Observable.of(actions.error(e)))
.takeUntil(action$.ofType(epicCancellationType))
.concat(Observable.of(actions.complete()))
.startWith(actions.before())
);
}

21. iress.com 21

22. iress.com 22
Event handling
this.firstNameBlur$
.distinctUntilChanged()
.combineLatest(
this.lastNameBlur$.distinctUntilChanged(),
(firstName, lastName) => ({ firstName, lastName })
)
.do((request: DuplicateCheckRequest) => {
this.props.checkForDuplicateEntities({
entityType: this.props.entityType,
request,
});
})
.subscribe();

23. iress.com 23
Ajax
ajax(settings).map(e => {
if (isSuccess(e.status)) {
return JsonUtils.parseJson<TResponse>(e.response, decoders);
}
return e;
})
.retryWhen(attempts =>
attempts
.filter(e => isError(e.status))
.zip(Observable.range(1, ATTEMPT_LIMIT), (a, i) => ({
attempt: a,
count: i,
}))
.mergeMap(obj => {
return Observable.if(
() =>
isClientError(obj.attempt.status) ||
obj.count === ATTEMPT_LIMIT,
Observable.throw(attempts),
Observable.timer(obj.count * BACKOFF_PERIOD)
);
})
);

24. iress.com 24
Logging
this.event$ = new Subject();
this.bufferedEvent$ = this.event$
.bufferWhen(
Observable.race(
Observable.interval(bufferPeriodMs),
Observable.fromEvent(window, 'beforeunload')
)
)
.filter(events => events.length > 0)
.switchMap(events =>
ajax.post(
this.baseUrl + RESOURCE_URL,
{
entries: events,
},
{
'Content-Type': 'application/json',
}
)
);

25. iress.com 25
Testing

26. iress.com 26

27. iress.com 27
Enzyme for React components

28. iress.com 28
Because of abstractions, epics are
generally not tested

29. iress.com 29
RxJs

30. iress.com 30
Ajax testing with nock
nock(host)
.get(resource)
.reply(200);
get<string>(url).subscribe(() => {
nock.isDone();
done();
});

31. iress.com 31
Where are we now?

32. iress.com 32
Webpack with multiple entry points

33. iress.com 33
Dynamic loading of JavaScript

34. iress.com 34

35. iress.com 35

36. iress.com 36
What’s next?

37. iress.com 37
Thank you