Declarative business logic | ReactJS Norway

Declarative code is more readable, but what is it really? How do we write it and what other benefits can it give us? In this presentation we will move far beyond the boring examples of declarative value transformation and see how we can build real complex business logic in a declarative manner.

=====================================================
Follow us and join our Slack community:

- ReactJS Norway's site: http://bit.ly/2ka4hC8
- Facebook: http://bit.ly/2kxmHxW
- Instagram: http://bit.ly/2kpysnJ
- Twitter: http://bit.ly/2kaehvl
- Youtube: http://bit.ly/2kANuJl
- Slack Community: https://goo.gl/YwUUKJ

Sponsored by Stooic Labs (http://bit.ly/2oTE4dF)
Organizer: Domenico Solazzo (http://bit.ly/2jRxj8j)

Transcript

5. christianalfoni [ ] # Title <Youtube />
9. Declarative business logic
10. Declarative business logic Context independence Pure functions Referential transparency What not how
11. <ul> <li>Foo</li> </ul> Declarative
12. const ul = document.createElement(‘ul’) const li = document.createElement(‘li’) li.innerHTML = ‘Foo’ ul.appendChild(li) Imperative
13. const ul = document.createElement(‘ul’) const li = document.createElement(‘li’) li.innerHTML = ‘Foo’ ul.appendChild(li) <ul> <li>Foo</li> </ul> (Declarative) Developer to Developer (Imperative) Developer to Computer
14. no declarative without imperative
15. data-structures are declarative
16. const user = new Object() user.name = ‘bob’ const list = new Array() list[0] = ‘apple’ Declarative Imperative const user = { name: ‘bob’ } const list = [ ‘apple’ ]
17. { tag: ‘ul’, children: [{ tag: ‘li’, children: [‘Foo’] }] } <ul> <li>Foo</li> </ul>
18. ul([ li([‘Foo’]) ]) <ul> <li>Foo</li> </ul>
19. render( ul([ li([‘Foo’]) ]) , document.body)
20. 1. Run functions in a sequence 2. Run functions asynchronously 3. Run functions in parallel 4. Run functions conditionally INTERPRETER
21. render(...) run(...)
22. [ setCurrentPage, setThemeFromLocalStorage ] 1. Run functions in a sequence
23. [ getUser, setUser ] 2. Run functions asynchronously
24. 3. Run functions in parallel [ setLoadingApp, parallel([ getNotifications, getArticles ]), unsetLoadingApp ]
25. [ whenUserRole, { admin: changeSetting, user: showError } ] 4. Run functions conditionally
26. 1. Set loading state 2. Get user success: Set user and notify success error: Set error and notify error 3. Unset loading state [ setLoading(true), getUser, { success: [setUser, notify(‘User loaded’, ‘success’)], error: [setError, notify(‘User error’, ‘error’)] }, setLoading(false), ]
27. function run () { this.isLoading = true return http.get(‘/user’) .then((response) => { this.user = response.result notifier.add(‘User loaded’, ‘success’) this.isLoading = false }) .catch((error) => { this.error = error notifier.add(‘User error’, ‘error’) this.isLoading = false }) }
29. [ ] Function Tree
30. const ft = new FunctionTree({ axios })
31. const sequence = [ doSomething, somethingElse ] ft.run(sequence, { foo: ‘bar’ })
32. function doSomething ({ axios, props }) { }
33. app.get(‘/articles’, handle([ getUser, roleEquals, { admin: getAdminArticles, user: getUserArticles }, sendArticles ])) export const initialize = thunk([ getUser, dispatch(SET_USER), parallel([ getProfile, getNotifications ]), dispatch(SET_APP_DATA) ]) export const initialize = [ getUser, set(state`auth.user`, props`user`), parallel([ getProfile, getNotes ]), set(state`app.profile`, props`profile`), set(state`app.notes`, props`notes`) ]
34. execution:start function:start function:end function:start function:async function:end path:start sequence:start function:start function:end function:start function:end sequence:end path:end function:start function:end execution:end [ setLoading(true), getUser, { success: [setUser, notify(‘User loaded’, ‘success’)], error: [setError, notify(‘User error’, ‘error’)] }, setLoading(false), ]
35. [ setLoading(true), getUser, { success: [setUser, notify(‘User loaded’, ‘success’)], error: [setError, notify(‘User error’, ‘error’)] }, setLoading(false), ] CRITICAL RENDER
36. [ {type: ‘function’, name: ‘setLoading’}, {type: ‘function’, name: ‘getUser’}, {type: ‘path’, outputs: {} } {type: ‘function’, name: ‘setLoading’}, ]
39. 1. Declarative improves developer to developer communication 2. Data structures are the holy grail of declarative 3. Interpret as business logic SUMMARY
40. www.cerebraljs.com [ ]