No content

No content

No content

No content

christianalfoni [ ] # Title 

No content

No content

No content

Declarative business logic 

Declarative business logic Context independence Pure functions Referential transparency What not how 

• Foo

Declarative 

const ul = document.createElement(‘ul’) const li = document.createElement(‘li’) li.innerHTML = ‘Foo’ ul.appendChild(li) Imperative 

const ul = document.createElement(‘ul’) const li = document.createElement(‘li’) li.innerHTML = ‘Foo’ ul.appendChild(li)

• Foo

(Declarative) Developer to Developer (Imperative) Developer to Computer 

no declarative without imperative 

data-structures are declarative 

const user = new Object() user.name = ‘bob’ const list = new Array() list[0] = ‘apple’ Declarative Imperative const user = { name: ‘bob’ } const list = [ ‘apple’ ] 

{ tag: ‘ul’, children: [{ tag: ‘li’, children: [‘Foo’] }] }

• Foo



ul([ li([‘Foo’]) ])

• Foo



render( ul([ li([‘Foo’]) ]) , document.body) 

1. Run functions in a sequence 2. Run functions asynchronously 3. Run functions in parallel 4. Run functions conditionally INTERPRETER 

render(...) run(...) 

[ setCurrentPage, setThemeFromLocalStorage ] 1. Run functions in a sequence 

[ getUser, setUser ] 2. Run functions asynchronously 

3. Run functions in parallel [ setLoadingApp, parallel([ getNotifications, getArticles ]), unsetLoadingApp ] 

[ whenUserRole, { admin: changeSetting, user: showError } ] 4. Run functions conditionally 

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), ] 

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 }) } 

No content

[ ] Function Tree 

const ft = new FunctionTree({ axios }) 

const sequence = [ doSomething, somethingElse ] ft.run(sequence, { foo: ‘bar’ }) 

function doSomething ({ axios, props }) { } 

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`) ] 

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), ] 

[ setLoading(true), getUser, { success: [setUser, notify(‘User loaded’, ‘success’)], error: [setError, notify(‘User error’, ‘error’)] }, setLoading(false), ] CRITICAL RENDER 

[ {type: ‘function’, name: ‘setLoading’}, {type: ‘function’, name: ‘getUser’}, {type: ‘path’, outputs: {} } {type: ‘function’, name: ‘setLoading’}, ] 

No content

No content

1. Declarative improves developer to developer communication 2. Data structures are the holy grail of declarative 3. Interpret as business logic SUMMARY 

www.cerebraljs.com [ ]