Тема доклада «React и его архитектурная периферия» React - мощнейшая библиотека для создания технических интерфейсов, но порой одного реакта не достаточно для полноценной и гибкой разработки. Мы будем обсуждать и сравнивать разные подходы для разработки современных React приложений. В программе: React&Redux, React&Meteor, React&Relay, React&MobX, React&PRPL

1. Architectural Peripherals of React
Vadym Zhiltsov

3. 1. Redux
2. Redux & Immutable
3. MobX
4. GraphQL
5. Relay
6. Meteor
Table of content

6. • Flux
• CQRS
• Event sourcing
Redux follows the steps of

7. Command–query separation

8. Every method should either be a command that
performs an action, or a query that returns
data to the caller, but not both
Command–query separation

9. Command–query separation

10. Command Query Responsibility Segregation

11. Applies the CQS principle by using separate
Query and Command objects to retrieve
and modify data
Command Query Responsibility Segregation

12. Command Query Responsibility Segregation

13. Idea to store application events instead of current
app state. You can produce current state from
event sequence.
Event sourcing
Events are actions that change application state

14. Redux distinctive features
• Encourages writing “pure” functions
• Promote immutable data
• Gives ”time-trevel debugging”
• Focused on Data Flow
• Produces many boilerplate code

15. Questions time!

17. Immutable data cannot be changed once created,
leading to much simpler application
development and enabling advanced
memoization and change detection techniques
with simple logic.
Immutable.js
Immutable.js provides many Persistent Immutable
data structures including: List, Stack, Map,
OrderedMap, Set, OrderedSet and Record.

18. Typical Reducer with nested data

19. Typical Reducer with nested data and ImmutableJS

20. But does it worth it?

21. We lose spread operator

22. We lose the destructuring on Objects

23. How was I supposed to do?
No metters, I used or not Immutble.js, but try to
keep you state as flat, as possible.
Use different kinds of ORM in Redux state and
operate nesting by ID, but not by nested objects

24. Redux&Immutable features
• Forces Immutability
• Makes easier state changes
• Makes read operation not so elegant

25. Questions time!

26. MobX

27. MobX is a library that makes state management simple
and scalable by transparently applying functional
reactive programming (TFRP).
MobX
The philosophy behind MobX is very simple:
Anything that can be derived from the application
state, should be derived. Automatically.

29. MobX easy to use and easy to go
• @obervable
• @computed
• @oberver
• @action
• AutoRun

32. All we need to update view – update observable

33. MobX distinctive Features
• Makes some parts of data “observable”, no
meters where they are.
• Save native ways of mutation
• Typical MobX code stores data nested by direct
object reference
• In compare with Redux, you don’t see where
and how your data updates

34. Questions time!

36. GraphQL is just another Query Language,
but unlike the most client-server approaches it
• Client controls what data will be respond
• Makes easier data aggregation from different
data sources
• Uses declares types to describe project entities

37. Simple GraphQL query

38. Simple GraphQL response

39. But why GraphQL
names Graph?

40. Because it handles
greatly Graph queries

41. But how to make API documentation?
Seems to be complicated
No, you don’t need to make documentation at all. You have a
GraphQL schema, so you have a documentation.
GraphiQL is a graphical interactive in-browser GraphQL IDE

43. Mutations look like function
call where you list the
return arguments you
want to receive

44. Here must be a slide about Mutations

45. Questions time!

46. Relay
A JavaScript framework for building data-driven React
applications

47. Relay uses GraphQL, created for
React, created by Facebook

48. Relay helps to build GraphQL query for
data presented on the page

49. We declares Fragment Container

50. Compose fragments

51. And then set it just to Route or QueryRenderer

52. Here must be a slide about Relay Mutations and
Optimistic Updates

53. Relay Classic cares about data caching out of a box
But for Relay Modern you need to implement
chaching by your own

54. Relay distinctive Features
• Optimistic updates
• Data caching out of box (Was purged in the lastest version)
• Provides patterns for paginations
• Both client and server framework
• Unlike Redux/MobX, it cares about data
fetching

55. Questions time!

56. Meteor.js is a full stack framework build on
concept to use the same code on Frontend
and Backend

57. Meteor is good for prototyping
It allows to use the same data Models on client and server
and increase your development
And with Autopublish Mode you have access to all data on the client side.

58. Insecure
Mode
Allows us execute CRUD
operations without any
server call

59. Meteor elegantly handles client-server
communications
Client and server communication is build on
publish/subscribe approach.

60. Server need to publish some data

61. And client make subscription

62. Meteor advantages
• Real time development
• One of the most straightforward approaches
for full stack development
• The best framework for POC/Prototype
development

63. Thank You!
Any questions?