View
231
Download
1
Category
Preview:
Citation preview
Building a system with messages and functionsSugak AlexanderSigma Software
https://github.com/AlexSugak
Case study: the “connected devices” project• A server accepting connections from devices,• Listening to, accumulating, filtering and
mapping devices’ state and sending updates to• A web app: SPA used to manage all connected
devices (including video streams from devices and a geo map displaying devices’ positions)
• And two types of mobile apps used to view/trigger devices state changes.
Case study: the “connected devices” project• A server implemented in F#, managing TCP
connections to devices and using WebSockets as a transport between server and connected clients;
• F# Actors to handle connected devices state;• Reactive Extensions to manage state updates;• JS, Redux and React DOM to build web client;• JS, Redux and React Native to build two
Android mobile clients.
Case study: the “connected devices” projectConstruction phase:• Two developers;• ~6 weeks;• 4 bugs found.
Simplicity is a prerequisite for reliability.
Edsger W. Dijkstra (c)
Rich Hickey,“Simple Made Easy”
Pure functions – simple possible things of programming?
Pure functions – simple possible things of programming?
As a developer, I want to write most of my program’s code in pure functions, so that I could easier maintain it.
What about IO? Design using Messages!
state -> msg -> state’f(state, message)
Message
Current State New State
What about IO? Design using Messages!
plusOne(acc, msg)
Increment!
2 3
What about IO? Design using Messages!
f(s,m)
m
s s’ f(s,m)
m
s’’ f(s,m)
m
s’’’
Managing state: reducing
Managing state: reactively
Managing state: reactive reducer
Demo: “Telekom” dashboard
https://github.com/AlexSugak/village-internet
Designing state
https://fsharpforfunandprofit.com/posts/designing-with-types-single-case-dus/
Designing messages
Designing messages
Reducing state from events
http://ionide.io/ https://github.com/Krzysztof-Cieslak
Receiving client messages
Receiving client messages
Receiving client messages
Parsing client messages
Validating client commands
Endpoint Agent
Endpoint Agent
Endpoint Agent
Connecting clients and endpoints
Connecting clients and endpoints
Connecting clients and endpoints
Connecting clients and endpoints
Connecting clients and endpoints
agent
Measurement!
Prev. State New State
Command!
Sending state updates to clients
Sending state updates to clients
Combine latest
1
2
11
2
1
2
1
2
1
1 1
2 2
Sending state updates to clients
Sending state updates to clients
React components are functions too!
ReactApp State HTML
React components are functions too!
https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
React components are functions too!
React components are functions too!
Rx is on the client too!
Rx is on the client too!
Lessons learned: key productivity drivers• Universal approaches: functional programming,
immutability, message-based design;• Universal libraries: Rx on both server and
client, React for both web and mobile;• Fast feedback: hot reload for UI development
(both web and mobile), REPL for F#.
Thank you!
Recommended