Interactive frontend development

Urmas Talimaa

SaleMove Inc

​

Developing React Component Look and Feel

When adding a React Component to a non-trivial application it is not feasible to

1. start up the whole application,
2. manipulate application to achieve state required for Component,
3. make changes to the component,
4. reload and repeat from step 2

Developing React Component Look and Feel

• Unit tests (which can be run very fast in watch mode) only help to verify that the functionality of the Component works

Developing React Component Look and Feel

Idea:

Create a React application with only one component, develop the application in ordinary fashion: using a browser.

Developing React Component Look and Feel

Note that for this to work seamlessly

• Components should be separated from business logic �(i.e they should be presentational components)
• Components should not have complex dependencies�(ideally only require props as input)
• Components should not have complex state

React Storybook

One implementation of this idea is React Storybook

• Repository
• Docs

A storybook allows declaring stories, each of which will just be a rendering of a component in a particular state.

The stories can be viewed and switched through a convenient interface.

When a component is changed, the story either hot-reloads or refreshes automatically.

Example

Code example

Visual tests?

There are various tools that test website visuals.

• Some spin up actual browsers and take screenshots.
• Some verify visual properties either through actual browsers or DOM implementations in NodeJS �(e.g 20px <= height <= 30px, etc)

Either way such tests can be included in the build-chain.

When going with an actual browser + screenshot approach, it is usually better to offload running such tests to a Continuous Integration (CI) machine.

Visual tests!

A storybook setup greatly simplifies creating and maintaining visual tests as the tests can be created for the isolated components.

​

Trying to use the full application and create the required state can be very complex and hard to maintain.

​

​

Pull request

diff example

Designers will eat this up

Middlewares for handling side effects

• We implemented middlewares on our own for sending XMLHttpRequests and connecting to WebSockets.
• This is fine if the APIs of the objects are simple and there are no concurrency concerns.

​

Middlewares for handling side effects

If an application requires chaining multiple asynchronous behaviours and having precise termination control, simple solutions are not enough.

Remember: Anything that deals with non-trivial asynchronous behaviour is always far more complex than you expect.

Middlewares for handling side effects

In such a case, avoid rolling out your own concurrency framework and use a library.

Good ones provide a declarative way for describing the desired side effects and their composition AND provide ways to test the declarations.

Managing asynchronous side effects

Example library: https://github.com/redux-saga/redux-saga

Note that this library is built in exactly the same way as our own middlewares. The container components that dispatch actions know nothing about what goes on behind the scenes nor have references to the XMLHttpRequests or similar objects.

The saga middleware hooks up to plain actions and dispatches separate actions when required.

Managing asynchronous side effects

The sagas are written using generator functions which is an ES6 feature for chaining asynchronous operations without requiring nested callbacks.

Generator function documentation

Two consecutive yields after transpilation

Generator functions are not intuitive at first, but the idea of managing side-effects in a declarative way in a middleware should be familiar by now.

Observable streams

Asynchronous concerns can also be captured by observable streams.

ReactiveX

​

Buffer example

Managing asynchronous side effects

Remember:

Declarative + Testable = Good times

Managing asynchronous side effects

Whatever asynchronous model you use,

sync it with the redux store at every step.

​

You don’t want to have complex, long running asynchronous behaviour that

• has state in memory,
• changes to which are not logged,
• and with state that cannot be introspected

​

Thanks for hanging on

• I hope you learned something
• I hope you had at least a bit fun
• I hope you got angry (need to have some emotion to be memorable)
• You should have an idea about some techniques for building arbitrary user interfaces

Front-end development

• Often regarded as non-issue, just hack it together
• Front-ends tend to influence back-end design
• Front-end applications need logs and error reports too
• Dynamically typed languages need tests
• Just because it is JavaScript does not mean that the code can be garbage

Thanks for hanging on

• Keep it simple (Composition! Pure functions!)
• Keep it declarative (Easy to read and understand!)
• Keep it testable (Less bugs!)
• Keep it traceable (Logs! Reproducible behaviour!)
• Keep concerns separated (domain logic, user interactions, presentation)

Exam

• Multiple choice questions
• One/two written questions
• All questions from slides + github
• 18.05 14:15

Sample exam questions

Following sample question list is not comprehensive.

If you understand the core concepts, principles and terminology of the technologies/techniques discussed on the slides you should have no problem answering the questions.�

​

Sample question

What is a transpiler?

Sample question

​

Identify/characterize a

• Pure function
• Stateful function
• Stateless function

Sample question

​

Characterize

• State
• Identity
• Shared mutable state

Sample question

Identify a pure function React component

Sample question

Identify/characterize a presentational/container React component

Sample question

Identify/characterize Redux

• action creators
• actions
• reducers
• middlewares

Sample question

​

Which of the following characterizes a `fetch`/WebSocket?

Sample question

What is the history API in the context of web applications?

Sample question

How to pause JavaScript execution at a specific line in JavaScript in a web browser?

Sample question

Write a React component named Names, that when provided array of arbitrary names ({names: [‘foo’, ‘bar’]}) as props will output the following HTML equivalent� <ul id=”names”>� <li>foo</li>� <li>bar</li>� </ul>

​

const Names = ({names}) => (� <ul id=”names”>� {names.map(name => <li>{name}</li>)}� </ul>�);

​