Over the last few months one of our development teams has been working on content-driven mobile apps for multiple customers. The architecture, design and technology choices have gone through various iterations and we have learned a lot along the way. In this talk we want to share some of the experiences we have made, talk about architecture and design decisions. We will discuss some core design concepts that have proven their value, for content-driven mobile apps as well as other types of applications.

1. Content-Driven Apps with React
Corsin Decurtins, Netcetera
2016-10-17
/Bern
BärnerJS

2. Notes
Content-Driven Apps with React
This talk is a story about a family of projects or apps
Actually not just individual apps, but app platforms
Same team, same technology (roughly)
Multiple projects, multiple apps, multiple customers
But the same kind of app or actually app platform
Mobile app, heavily content driven
Customers are publishers, users are readers
It all started with a proof-of-concept…

4. Notes
Proof of Concept
Customer had a hybrid mobile app, Cordova and Angular (1)
It was too slow for them, which resulted in a bad UX
PoC done with React to see if we can improve the performance
In particular the performance of the home page / start screen
PoC showed, that we can
Goal was a 50% improvement, he had up to 80% improvement
This talk is about the app architecture that started with this PoC
But it will be about anything but performance

5. Disclaimer

6. Notes
Disclaimers
I’m just the person giving the talk; other people did the
actual work
If something is wrong or does not make sense, it’s probably
me who messed it up
I’m familiar with the architecture, design and technologies
If you have very detailed questions about the
implementation, I will refer you to my colleagues

7. Ognen Ivanovski, Netcetera
Principal Architect
Andon Sikavica, Netcetera
Senior Software Engineer

8. Notes
Who are you?
Who is already familiar with…
… React
… React Native
… Redux
… Immutable Data, ImmutableJS
… Pure Functions, Functional Programming

9. React

10. React Native

11. Redux

12. Functional Programming
Pure Functions

13. Immutable Data
immutable.js

14. Notes
Setting the Scene

15. Web-Based
Hybrid Mobile Apps

16. Notes
Web-Based Hybrid Mobile Apps
Mobile apps for smartphones and tablets
Hybrid, i.e. one code base for all the platforms
Based on web technologies, i.e. HTML, Javascript, CSS and
JSON
Based on web tooling (debuggers, CSS, NPM, gulp,
ECMAScript, …)
Cordova is the most common runtime platform for creating
packaged apps that can be delivered to the app store

17. Web-Based*
Hybrid Mobile** Apps***

18. Notes
Web-Based Hybrid Mobile Apps
Web based can be interpreted loosely
Instead of HTML, other markup is possible, including
markup for native components
Also not restricted to mobile apps, you can build other apps
as well
Not even restricted to apps, can be used for “websites”

19. Content-Driven Apps

20. Notes
Content-Driven Apps
Mobile apps that are mostly used to consume and browse
through content
News apps for example
Get content from a server
Content from the server determines the screens, the
interaction and the navigation
The browser is probably the ultimate example

21. Notes
Content-Driven Apps
We started out with news apps for publishers
But there are a lot of other examples

22. Notes
High-Level Architecture

23. App
Cordova
app.js
Libraries
CMS
DAM
Ads
IAM
Entitlement
Platform
SkinningConfig
API
Cache
Widgets
Metrics
Analytics

24. Notes
Architecture
Client App, JS, packaged with Cordova
Libraries, Widgets, Generic Platform Code
These are part of the platform and the same for all the apps of
the platform
App-specific configuration and skinning
Content is retrieved from the server-side through an API
Abstracts various backend systems such as the CMS, DAM, …
API might have a server-side cache

25. Notes
Challenges
App Platform vs. just an app
Reuse of code, platform, configuration, customising,
skinning
API Evolution
Apps are deployed, no instant updates
Performance, User Experience (UX)
Time-To-Market and Price

26. Notes
Design, Patterns, Concepts,
Technologies, …

27. React

29. Notes
React Components
Tree of React Components
JS objects, can be as simple as one function
Every component has a render() function
Can be static (children are hard-coded in the parent) or
dynamic (children are added based on data of the parent-
components)

31. Notes
State
Every React component can have an inner state
State is optional
State must only be manipulated through an defined interface
Gives React a chance to know when the state has changed
and the component needs to be re-rendered

33. Notes
Attributes
In addition to the internal state, React components can also
receive data from parent components through attributes
Can be used for rendering
Can be used for initialising state

34. const CommentForm = React.createClass({
getInitialState: () => {
return {author: '', text: ''};
},
handleAuthorChange: (e) => {
this.setState({author: e.target.value});
},
handleTextChange: (e) => {
this.setState({text: e.target.value});
},
handleSubmit: (e) => {
e.preventDefault();
// do something
},
...
});

35. const CommentForm = React.createClass({
...
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type=“text" placeholder="Your name"
value={this.state.author} onChange={this.handleAuthorChange}
/>
<input type=“text" placeholder="Say something..."
value={this.state.text} onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
}
});

36. React Components Virtual DOM DOM

37. Notes
React Rendering
React Components have a render() function that produces
HTML
Actually it produces a tree of objects that correspond to
HTML
The React Components are rendered into a Virtual DOM first
The Virtual DOM is then rendered into the actual DOM

38. Notes
React Rendering
Pure Functions for the transformations (aka rendering)
Events flow in reverse to the transformation flow
React Optimisations
Propagate diffs rather than new trees
Lots and lots of checks for changes for trees and subtrees
Modify data (state or attributes) only through well-defined
interfaces

39. Immutable Data

40. React Components Virtual DOM DOM

41. Notes
Immutable Data
Data cannot be changed
Every change results in a new copy of a data structure
Optimisation: Data structure can contain references to data of
other data structures (since they can never change)
Equality check with immutable data becomes very efficient
Check if the reference is the same
React change check (shouldComponentUpdate) can be
implemented very efficiently

42. Redux

43. Dan Abramov
Hot Reloading with Time Travel
https://youtu.be/xsSnOQynTHs

44. reducerreducerreducerreducer

45. const newsReducer = (state = {}, action) => {
if (action.type === ‘NEWS_UPDATE’) {
return Object.assign(
{},
state,
{stories: action.stories}
);
}
return state;
};

46. Notes
Redux
Application state consists of one state object
React components do not have a state anymore
Application state is passed into React as an attribute
Reducers handle all the events and transfer the app from one
state into another
Creation of the React Component tree is a pure function
Rendering of the React Component tree is a pure function
Reducers are pure functions

47. reducerreducerreducerreducer reducerreducerreducerreducer
reducerreducerreducerreducer

48. Notes
Loading Content
from the Server
(or from a local cache)

49. Content API
{
"kind": ["image", "diagram"],
"imageUrl": “http://example.com/diagram.png"
"caption": “Super Cool Diagram"
}

50. Notes
Content API
Objects in the content tree are called elements
Kind describes the (hierarchical) type of an element
Additional type-specific attributes are part of the element
Above example is the element description for an image
Can for example be a nice diagram
Customer wants to add support for an interactive diagram (zoom and
pan, play around with values, …)
Create a new element, support on the CMS and in the app
Create the new element as an extension/refinement of the old one

51. Content API
{
"kind": [“image”, “diagram”, “interactive”],
“dataUrl”: “https://example.com/data/diagram.json”,
"imageUrl": “https://example.com/diagram.png"
"caption": “Super Cool Diagram"
}

52. Notes
Content API
New sub-type ‘interactive’
Data URL for loading the data for the diagram
But the component is also an [‘image’, ‘diagram’] with
‘imageUrl’ and ‘caption’
If a client does not support ‘interactive’ yet, the component
can also just be rendered as an image/diagram

53. reducerreducerreducerreducer reducerreducerreducerreducer
reducerreducerreducerreducer

54. Notes
Loading Content (Simplified)
Reducer triggers a request for loading content
Technically, this is a side-effect and the reducer is not a pure function
anymore
Side-Effect is on an external system, asynchronous handling
When the data arrives, that triggers a new event for the reducers
Data passes through a series of transformers (“pure” functions) that
transform the received data into data that can be incorporated into the
application state … as well as side-effect events for loading additional
data

55. Notes
React / Redux / Immutable
Pure functions everywhere
Logically, everything is immutable and pure functions
Physically, React makes optimisations

56. Notes
Interesting Properties
Serialisable application state
Testing
Time-Machine
Performance
Code Quality
Code Reuse

57. Notes
Excursions

58. Web Applications

59. Notes
Web Applications
Nothing mentioned above is specific to mobile apps
You can also use the architecture for “normal” web
applications
Desktop web applications, mobile apps, responsive apps, …

60. React Native

61. React
React DOM React Native

62. Notes
React Native
Relatively recent extension of the React Framework
Everything remains the same, React Components and if you
use it Redux, …
Instead of rendering HTML objects (using ReactDOM and
JSX), you render markup for Native Components
Native Runtime, Native Apps, Javascript as Scripting Engine
Native Performance, but still Hybrid

63. Server-Side Rendering

64. React Components Virtual DOM HTML Document
HTML

65. Notes
Server-Side Rendering
React Components can be rendered into a string
HTML code only
HTML code is dead, i.e. it does not contain any active parts
(Javascript)
Can be used for pre-rendering on the server-side
Make content available for search engine and other non-browser
clients
Testing

66. Notes
Summary

67. Technologies and Concepts

68. reducerreducerreducerreducer reducerreducerreducerreducer
reducerreducerreducerreducer

69. Notes
Technologies and Concepts
Technology choices have a big impact on design and fundamental
concepts
React, Redux and other members of this family have a clear heritage of
functional programming
This has a learning curve
It takes some time until you “get it”
And then it takes some more time until you really “get it”
Concepts are very different from what our developers were used too
There was a learning curve until it really clicks

70. Notes
Technologies and Concepts
Some things seem unnecessarily complicated and limiting
Most of the time, they are actually not
They seem complicated, because they are unfamiliar and you have
not started to think in a React/Redux/Functional way
Code Base in the end is much more fragmented
More small granular components than with other core technologies
Complexity is still smaller though, because the small components
follow very clear, simple and orthogonal concepts

71. Notes
Technologies and Concepts
Concepts (and technologies) allow for really cool and helpful
things
Testing, Time-Machine, React DevTools
Clean, simple, well-abstracted and clean code
Reusable and extensible code
Content API allows for very powerful customisation and
extension … of existing apps and use cases

72. Girders Elements
https://github.com/netceteragroup/girders-elements

73. Notes
Girders Elements
We had the chance to go through multiple iterations with the described
architecture
Both with React DOM and React Native
One of the current customers gave us the chance to extract the core
framework of the architecture and open-source it
This is called Girders Elements
It is currently being developed … in parallel with the platform and some
apps for the mentioned customer
Not production-ready yet

74. Notes
Girders Elements
React, React DOM or React Native, Redux and other core
libraries
Framework, Wiring, Configuration, UI Widgets
(Customisable, Skinnable)

75. Notes
Girders Elements
If you are very familiar with the concepts and libraries that I
mentioned -> use it and contribute to it
If you are not familiar with the concepts and libraries yet ->
wait for a few months
Girders Elements is still under development
Documentation is not there yet
But we will get there eventually

76. Corsin Decurtins, Netcetera
Chief Technology Officer
corsin.decurtins@netcetera.com
@corsin

77. reducerreducerreducerreducer reducerreducerreducerreducer
reducerreducerreducerreducer

78. Content-Driven Apps with React
Corsin Decurtins, Netcetera
2016-10-17
/Bern
BärnerJS