Redis and ReactJS
28th April 2015, NodeCPT
Evan Summers
My name is Evan and I was a Java developer.
I went “digital” in 2014
Front-end React and Webpack talk at CTFEDs
My “regrettable” technology choices for IOLmobile
Monolithic Java backend
prefer: NodeJS microservices
for: simplicity, rapid development, modularisation,
continuous delivery, scalability, performance
Angular templates
prefer: React components
for: isomorphism, simplicity, modularisation, reuse,
performance
SQL database
prefer: Redis in-memory database, JSON docs
for: performance, simplicity
"The Better Parts" (Douglas Crockford, JSConfUY 2014)
"JavaScript: The Good Parts" (Douglas Crockford, 2009)
Why not develop with JavaScript?
JavaScript, The Good Parts
by Douglas Crockford
“The world’s most popular, most misunderstood programming language.”
“JavaScript is the only language people feel like they don't need to learn first to use."
“Underneath the well-intentioned blunders is an elegant, expressive language”
Why develop with JavaScript?
The browser
and server-side too with Node, and npm rocks
Plenty of libraries
e.g. lodash, async
It’s has “good parts”
e.g. closures, object literals
Plenty of transcompilers
e.g. Babel, Traceur, TypeScript, CoffeeScript,
ClojureScript, Dart, OCaml
Evolutionary e.g. ES6, ES7
ES6 arrow functions fix “this”
ES7 async await
https://github.com/Microsoft/TypeScript/wiki/Roadmap
“Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language” (TechCruch, 2015)
Microsoft’s TypeScript
Superset of EcmaScript 5/6
Types, generics, classes, interfaces, decorators
Optional static types for compile-time type checking
IDE support: Visual Studio, WebStorm, Eclipse
Open source (Apache 2 license)
TS 1.5: ES6, and “decorators” for Angular2
TS 1.6: ES7 async await
ES8 (2017) = TypeScript ? ;)
http://stackoverflow.com/questions/5062614/how-to-decide-when-to-use-node-js
“Node.js for IOLmobile.co.za” (Evan Summers, NodeCPT, February 2015)
Why develop with Node.js?
JSON native
Rapid development of JSON microservices
Homogeneous
Code and mind sharing between SPA and Node back-end
High performance, low resource requirements
V8, async programming model
npm
Vibrant github community for 3rd party libraries
What is Redis?
“REmote DIrectory Server”
by Salvatore Sanfilippo
@antirez
Redis is…
A persistent in-memory key-value store
Matric Results from IOL
Matric Results: Node/Redis benchmarks
[iolmobile-matricresults]$ nodejs src/app_matricresults.js
stats { 'avg req duration (ms)': '0.435', 'ok req per sec': 1633 }
stats { 'avg req duration (ms)': '0.519', 'ok req per sec': 1484 }
stats { 'avg req duration (ms)': '0.535', 'ok req per sec': 1406 }
stats { 'avg req duration (ms)': '0.575', 'ok req per sec': 1371 }
stats { 'avg req duration (ms)': '0.808', 'ok req per sec': 1466 }
stats { 'avg req duration (ms)': '0.956', 'ok req per sec': 1528 }
stats { 'avg req duration (ms)': '1.089', 'ok req per sec': 1578 }
stats { 'avg req duration (ms)': '1.209', 'ok req per sec': 1621 }
stats { 'avg req duration (ms)': '1.271', 'ok req per sec': 1643 }
stats { 'avg req duration (ms)': '1.298', 'ok req per sec': 1659 }
stats { 'avg req duration (ms)': '1.244', 'ok req per sec': 1656 }
stats { 'avg req duration (ms)': '1.199', 'ok req per sec': 1647 }
Redis is…
A persistent in-memory key-value store
Keys
“Strings” e.g. namespaced ids e.g. "user:1234"
Values
List, set, sorted set, or hash table (dictionary)
or “string” e.g. numeric id, JSON, serialized data
Members
String e.g. text, JSON, numeric id e.g. “1234”
Redis “strings” are...
Used for:
keys, values, members (of lists, sets, sorted sets, hashes)
Binary-safe
and so can be any type of data e.g. an image even
Examples:
Namespaced id e.g. "user:1234" (especially keys)
Number e.g. “1234” (especially values, members)
Serialized JSON data e.g. JSON.stringify()
Hash tables
Store structured data
fields and members (both strings)
e.g. different fields of a “object” (or record, struct)
(or columns of a row)
evan@boromir:~$ redis-cli hgetall post:1
1) "title"
2) "my first post"
3) "description"
4) "so this is my first post"
5) "body"
6) "<p>first post first para</p><p>the second para</p>"
7) "published"
8) "1429378153371"
Strings
e.g. id, number, JSON, serializable data
Hashes
Structured data e.g. object properties
List
Queue with left and right sides
Members can be pushed and popped
Set
Unique members (e.g. ids)
Sorted set
Members given a numeric "score"
e.g. member is an id, score is a timestamp as integer
Persistence
Whole "database" stored in memory
RAM much faster than flash, disk
Database size limited to available RAM
Disk
Append-only log for recovery on restart
Snapshots e.g. every 2 seconds
Use case: "Persistent shared memory"
Storing session state
Enables stateless microservices in application containers
Use case: memory cache
Expiry times on keys
Alternative to memcache
e.g. Twitter 105 TB RAM, 10k instances,
39M queries/second
to drive timeline
Use cases: analytics server
INCR, INCRBY, HINCRBY commands
Use case: messaging
Message queue
List data type offers blocking pop operations
e.g. RSMQ similar to Amazon SQS, Disque
Pubsub
for asynchronous decoupled message passing
Use case: database
Persistent primary data storage
e.g. JSON document store
Database size limited to available RAM
[mobi@mobi3 storage]$ find a/ | wc -l
380147
[mobi@mobi3 storage]$ du -sh a/
2.1G a/
[mobi@mobi3 storage]$ ls -lh a/184/1846665.json
-rw-r--r-- 1 mobi mobi 17K Apr 17 11:45 a/184/1846665.json
[mobi@mobi3 storage]$ head a/184/1846665.json
{
"id": 1846665,
"link": "http://www.iol.co.za/scitech/science/discovery/de-extinction-no-mammoth-hollywood-plot-1.1846665",
"title": "De-extinction: no mammoth Hollywood plot",
"description": "Scientists are onto the idea of bringing extinct species back from the dead.",
"pubDate": "April 17, 2015 at 09:00am",
"byline": "By Independent",
"imageUri": "/polopoly_fs/iol-scitech-nov-27-britain-woolly-mammoth-1.1786985!/image/1254464397.jpg",
Redis Cluster
Key space sharding
16384 hash slots computed by CRC16
Master and replicas nodes for each hash slot
Replica promoted when master fails
Linear scalability up to 1000 nodes
Nodes continuously ping all other nodes
Gossip protocol for discovery and info propagation
Demo: Blog using Redis as DBMS
Demo: Redis as a DBMS for blog posts
redis-cli
redis-cli get post:seq
"2"
redis-cli hgetall post:dict:1
1) "title"
2) "my first post"
3) "description"
4) "so this is my first post"
5) "body"
6) "<p>first post first para</p><p>the second para</p>"
7) "published"
8) "1429378153371"
redis-cli zrange post:sorted:published 0 -1
1) "2"
2) "1"
redis-cli lrange post:list 0 -1
1) "2"
2) "1"
redis-cli smembers post:set
1) "1"
2) "2"
redis.sh bash script
apiserver.js
Queries
Updating
What is ReactJS?
React from Facebook...
Used to build “all new user interfaces” at Facebook
e.g. for facebook.com, m.facebook.com
instagram.com is entirely built using React
In production for “a couple of years”
Open sourced in May 2013
React is...
JavaScript rendering library for web components
The “V” in MVC
Compare with Angular directives,
Handlebars (Ember)
Flux architecture for React
Alternative to Angular, Ember, Backbone et al
Eschews MVC, data-binding
Prefers one-way data flow
More predictable, easier to debug
Interesting related projects
Flux
Relay/GraphQL
React Native
React Canvas
React is “isomorphic”
Render in the browser
or on the server using Node.js
e.g. for fast cached pages served by CloudFlare
Pre-render pages for search and social hits
Transition to dynamic pages on the browser
Static pages for search and social bots
Indexing by Google, Bing, et al
Page metadata for Facebook, Twitter, et al
PHP at Facebook
HTML strings in PHP insecure by default
One mistake by one developer
and the site is vulnerable to XSS
XHP (2010)
Extends PHP syntax to include XML markup
React was a JavaScript “rewrite” of XHP
blogdemo: Babel for JSX (and ES6)
$ redis-cli get post:seq
"2"
$ redis-cli hgetall post:dict:1
1) "title"
2) "my first post"
3) "description"
4) "so this is my first post"
5) "body"
6) "<p>first post first para</p><p>the second para</p>"
7) "published"
8) "1429378153371"
$ redis-cli smembers post:set
1) "1"
2) "2"
$ redis-cli zrange post:sorted:published 0 -1
1) "2"
2) "1"
$ redis-cli lrange post: 0 -1
1) "2"
2) "1"
postService.js
webserver.js
Post.jsx
PostPage.jsx
PostSummary.js
Take aways: Redis
Unbeatable performance
in-memory
Multiple use-cases
caching
persistent shared memory
message queues
primary data storage
analytics
Enables microservices
stateless, cacheable, scalable, decoupled
Take aways: React
JSX
HTML in your JavaScript
Babel transpiler for ES6/JSX scripts
Isomorphic
On Node: render components HTML text
e.g. for faster loading, also SEO and social bots
Virtual DOM
Less leaky abstraction than data-binding
One-way data flow from model to view:
simpler, more predictable, easier to debug
Thanks
@evanxsummers