Backend & Frontend architecture scalability & websockets
-
Upload
anne-jan-brouwer -
Category
Internet
-
view
461 -
download
6
Transcript of Backend & Frontend architecture scalability & websockets
![Page 1: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/1.jpg)
Backend & Frontend architecturescalability & websockets
09-03-2016Searchlite HQ
Anne Jan BrouwerNoProtocol
![Page 2: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/2.jpg)
About me
● Anne Jan Brouwer● Professional developer since 2001
– C++– Sysadminning– PHP 2004– NodeJS 2010
● NoProtocol– Realization
● Full stack implementation
![Page 3: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/3.jpg)
Backend & Frontend architecturescalability & websockets
● About this talk:– Language agnostic
● Mostly . .
– Architecture focussed
● For anyone involved with web– Sites
– Apps
● Fun
![Page 4: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/4.jpg)
Kinds of applications
● Content driven websites● Realtime data driven
– Physical data– News– Chat
● ??● Most common are multi-user CMS-like systems
– Right??
![Page 5: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/5.jpg)
Backend & Frontend
● Back in the olden days– Didn't used to be like that– Everything was done serverside– Frontend was just styling
● These days– Code running serverside gets smaller– Code running clientside gets larger– Everything is (ran through) an API
![Page 6: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/6.jpg)
Scalability
● What– More iron– Distribution (CDNs etc)
● How?– Handling state?– Getting rid of state?– Different models?
● Performance
![Page 7: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/7.jpg)
Performance
![Page 8: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/8.jpg)
Scalability
![Page 9: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/9.jpg)
High availability
● What are we talking about?– Failovers?– Handovers?
● How do we achieve that?– Handling application state?– Getting rid of state?– Different models / patterns / paradigms?
![Page 10: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/10.jpg)
Websockets
● Back in the olden days– Polling– Long Polling
● Standard since 2011– RFC6455
● Implementations available for mostprogramming languages– Yes, even for PHP
![Page 11: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/11.jpg)
Websockets
![Page 12: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/12.jpg)
Websockets
● They're nice for things like chat and games● But what about serious applications?
– Etherpad– Ethercalc– Etherdraw
● Google docs
![Page 13: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/13.jpg)
Websockets
● But how does that apply to my CMS● What about application state?● Websockets have inherent state● Coming from classic website model?
– You probably need a different pattern / paradigm
![Page 14: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/14.jpg)
pub/sub
● Publish–subscribe pattern● Does literally what it says● First described in 1987
– In a talk at the SOSP conference– As part of “news” subsystem of Isis toolkit
● Not one standard but a pattern● WAMP
– Web Application Messaging Protocol (draft)
![Page 15: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/15.jpg)
pub/sub
![Page 16: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/16.jpg)
pub/sub
● Publish● .. to a channel
– sometimes called a topic
● Most implementations return number of subscribers
![Page 17: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/17.jpg)
pub/sub
● Subscribe to (one or more) channels● Subscribe to (one or more) patterns
– For example: news.*
● Some servers / libraries– Faye– RabbitMQ– Redis– many more . .
![Page 18: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/18.jpg)
Tying it all together
![Page 19: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/19.jpg)
Tying it all together
● What is it good for?– Absolutely everything
● Subscribing to channels for pages and widgets– Your “user” list view
– Any widget really
● Subscribing to alerts
● Collaborating
![Page 20: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/20.jpg)
Tying it all together
● Take a look at your “CMS”● Any table could be an “auto-updating” list
– Get initial data old-school page-load or via API● Paginated
– Subscribe to data channel● Go fancy; subscribe to channel + pattern
● Any form could be a “multi-player” form– Implement field locking for bonus points
![Page 21: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/21.jpg)
Tying it all together
● You (client) send event to API (sync)● API (server) broadcasts to channel (async)● “Other” clients pick up on change
– Only when applicable
![Page 22: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/22.jpg)
Implementation
![Page 23: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/23.jpg)
On the backend
● Redis (or other messaging bus)● NodeJS (or other socket server)● Some other backend language (optionally)
– Legacy reasons
● Your favorite database– For long-term storing/logging
![Page 24: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/24.jpg)
Interesting Redis perks
● Key-value store– With TTL
● Distributed API rate-limiting
● Partitioning● Distributed locks● Cache store
– Auto-eviction
● Lua scripting
![Page 25: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/25.jpg)
On the frontend
● RxJS● Angular
– Listeners, data objects
– With RxJS
● React– Something something Flux
● Not a lib but a pattern● Redux
● PubSubJS– Nice and small
![Page 26: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/26.jpg)
But will it scale?
![Page 27: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/27.jpg)
But will it scale?
● Subscribers are “cheap”● Load balancing is simplified
– Easiest round-robin setup mostly suffices
● Requests are lighter (less data)– Only wanted (subscribed) data gets transmitted
● Easy to add more (micro) servers
● Works very well with automatic scaling (AWS)
![Page 28: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/28.jpg)
How gracefully will it fail?
● Reload drops current subscriptions● You start again
– Get initial data
– Subscribe to channel
● Handling a closed socket– Opportunity for an “event”
● Fail-fast
![Page 29: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/29.jpg)
What about security?
![Page 30: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/30.jpg)
What about security?
● WSS– Mandatory when serving over https
● JWT– Just as safe as session cookies
● Subscriptions dropped when connection closes– Safer than token based systems
● Have a TTL
![Page 31: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/31.jpg)
What about security?
● Unit-testable– Via mockups– Echo service
● Graceful degradation– Since (in most cases) it's just an addition
● Ledger– Accountability– Why not a blockchain?
![Page 32: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/32.jpg)
Retrofitting
![Page 33: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/33.jpg)
Retrofitting
● Fitting pub/sub into existing systems● A-sync all the things?● Starting small
– Polling widget was hated during writing– Usually a retrofit in itself
● Things fall into place– On initial load get data directly (old-school) or via API– Subscribe and receive changes
![Page 34: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/34.jpg)
Wrapping up
![Page 35: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/35.jpg)
Wrapping up
Use these modern web paradigms
Over 95% browser support*
* Probably even better depending on your target audience
![Page 36: Backend & Frontend architecture scalability & websockets](https://reader031.fdocuments.us/reader031/viewer/2022021815/5871bbcf1a28ab55058b59e3/html5/thumbnails/36.jpg)
Questions?
AnneJan.com
@annejanbrouwergithub.com/annejan
NoProtocol.com