▪ Code is likely in a monolithic Javascript ▪ Hold element ids for where each piece of data should be shown ▪ Retrieves element and display data ▪ Complex model requires customized code: • Find pieces of data, and update pieces of element • Functional: ◦ Example: React code ▪ Code is contained within each React element: ▪ Each React element declares which part of data to pass on to children ▪ Each React element declares how to render data it receives ▪ Simplified model reduces code relinquish more to framework: • Provide data to top view, and cascading views redraws themselves
customized code ▪ Dig through customized code to understand relationships ▪ Different pieces of code to initialize UI, and update based on interaction • Functional: ◦ Simplified model reduces code relinquish more to framework ▪ Relationship and data-flow is top-down ▪ Same piece of code to initialize, and update UI
entire UI from the top component ◦ Each component render itself with data for self ◦ Each component pass data to child ◦ To change component, just change data Framework • Handle initializing/updating UI with the right pieces of data How • Re-drawing all UI pieces efficiently
lead to single top view ◦ Single-parent cascading views • Controllers-Models collapsed into Stores to co- locate logic & state MVC Flux React Store Store
Creator var event = action.event; switch(action.actionType) { case TodoConstants.TODO_CREATE: // Do whatever, e.g., update local store data or fetch fresh data from server TodoStore.emitChange(); break; …. } } register
◦ By Facebook • Redux: ◦ Not pure Flux per se, but embraces its spirit ◦ Server-side rendering built-in ◦ Growing super-fast • Alt: ◦ Pure Flux compliant ◦ Well-documented, great community ◦ Server-side rendering built-in
Facebook dispatcher ◦ Use official Facebook dispatcher • Does not use Flux-Utils ◦ Use Flux-Utils to create Stores without code duplication Rails with pure Flux: https://medium.com/@khor/back-to-front-rails-to-facebook-s-flux-ae815f81b16c
Store ◦ Endpoint for Category ◦ Endpoint for Product • Server-controlled query ◦ Query for store returns email, name, address, etc. whether you want it or not • Multiple round-trips vs. impure-REST/endpoint proliferation ◦ Get Store, get each Category, get each Product in each Category ◦ Lumping them together creates view-specific endpoints
Shape of this type argument :email, !types.String, "Email of Store owner" ... # Retrieve data resolve -> (obj, args, ctx) do Store.find_by_email(args[:email]) # ActiveRecord stuff end end query { store(email: "[email protected]") { name, address } }
"Store" description "Store Data" … field :name, !types.String, "Store name" # From ActiveRecord field field :address, !types.String, "Store address" # From ActiveRecord field field :categories, !types[CategoryType], “Category list” # From ActiveRecord field end query { store(email: "[email protected]") { name, address } }
need from server endpoint Framework • A single API endpoint to respond to query • Query language that enables client to specify data required, ala SQL • No over-fetch • Request all data in a single query
‘Loading….’ ◦ Data re-fetching ◦ Caching ▪ Figuring out batching, reading/writing caching, fetching only missing pieces ▪ NOTE: Caching is NOT new but handling caching for hierarchical data is rather new ◦ Managing errors, retry failed requests ◦ Optimistic updates ◦ Pagination Framework • Use GraphQL to fetch all required data declaratively • Handle all the above
stores (one per domain) Single store (GraphQL server) Explicit subscription Implied subscription based on data required Actions (possibly with AJAX) Mutations (query with changes) REST API pros, and cons Efficient data handling (batching, caching, no over-fetching, etc.) More customized coding Generic framework for data access, updates, etc. Prefer imperative debugging Love magic, abstractions, and puzzle debugging
top? Must top do all data manipulation? • GraphQL ◦ Can I just use GraphQL? Do I need Relay? • Relay ◦ How to modify Model without AJAX? ◦ There is no gem?
GraphQL: http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html Thinking In GraphQL: https://facebook.github.io/relay/docs/thinking-in-graphql.html Thinking In Relay: https://facebook.github.io/relay/docs/thinking-in-relay.html