Watup, could you pick up this thing for me NEARBY? HOME NEARBY - - PowerPoint PPT Presentation

▶
watup could you pick up this thing for me nearby home
SMART_READER_LITE
LIVE PREVIEW

Watup, could you pick up this thing for me NEARBY? HOME NEARBY - - PowerPoint PPT Presentation

Jun 09, 2023 511 likes •866 views

Watup, could you pick up this thing for me NEARBY? HOME NEARBY After 20 metres After 10 metres After 5 metres Destination HOME NEARBY After 20 metres After 10 metres After 5 metres Destination You have to check out this RESTAURANT on your

slide-1
SLIDE 1

Watup, could you pick up this thing for me NEARBY?

slide-2
SLIDE 2

HOME NEARBY After 20 metres After 10 metres After 5 metres Destination

slide-3
SLIDE 3

HOME NEARBY After 20 metres After 10 metres After 5 metres Destination

slide-4
SLIDE 4

You have to check out this RESTAURANT on your trip abroad!

slide-5
SLIDE 5

HOTEL RESTAURANT

After 20 metres After 10 metres After 100 metres After 28 metres After 5 metres After 50 metres After 23 metres After 5 metres After 10 metres After 20 metres

slide-6
SLIDE 6

HOTEL RESTAURANT

After 20 metres After 10 metres After 100 metres After 28 metres After 5 metres After 50 metres After 23 metres After 5 metres After 10 metres After 20 metres

slide-7
SLIDE 7

HOTEL RESTAURANT

After 20 metres After 10 metres After 100 metres After 28 metres After 5 metres After 50 metres After 23 metres After 5 metres After 10 metres After 20 metres

IMPERATIVE DECLARATIVE

slide-8
SLIDE 8

Declarative state and side effects management for popular JavaScript frameworks

Cerebral

slide-9
SLIDE 9

Stateful Component method Mobx Action Redux Thunk/Reducer Cerebral Signal

APPLICATION LOGIC

slide-10
SLIDE 10
slide-11
SLIDE 11

webpackbin - 2016 collaboration - 2017

slide-12
SLIDE 12

DEBUGGER CODE PROJECT

slide-13
SLIDE 13 http://localhost

CODE EDITOR BROWSER COMPANION

slide-14
SLIDE 14

3 files

store/sequences.js store/actions.js store/factories.js

10 files

pages/index.js store/connection/actions.js store/connection/reducer.js store/user/actions.js store/user/reducer.js store/api/actions.js pages/Sandbox/index.js store/entities/sandboxes/actions/index.js store/entities/sandboxes/reducer.js store/entities/sandboxes/entity.js

21 state changes 9 side effects sandboxChanged

slide-15
SLIDE 15 export const loadSandbox = factories.withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);

3 files

store/sequences.js

store/actions.js store/factories.js

10 files

pages/index.js store/connection/actions.js store/connection/reducer.js store/user/actions.js store/user/reducer.js store/api/actions.js pages/Sandbox/index.js store/entities/sandboxes/actions/index.js store/entities/sandboxes/reducer.js store/entities/sandboxes/entity.js

21 state changes 9 side effects sandboxChanged

slide-16
SLIDE 16 export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);

export const loadSandbox = withLoadApp([

...

]);

slide-17
SLIDE 17 export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);

set(state`editor.error`, null),

slide-18
SLIDE 18 export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);

when(state`editor.sandboxes.${props`id`}`), { true: [

...

], false: [

...

], },

slide-19
SLIDE 19 export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);

set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace,

slide-20
SLIDE 20 export const loadSandbox = withLoadApp([ set(state`editor.error`, null), when(state`editor.sandboxes.${props`id`}`), { true: [ set(state`editor.currentId`, props`id`), set(props`sandbox`, state`editor.sandboxes.${props`id`}`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ], false: [ set(state`editor.isLoading`, true), set(state`editor.notFound`, false), set(state`editor.changedModuleShortids`, []), actions.getSandbox, { success: [ set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`), set(state`editor.currentId`, props`sandbox.id`), actions.setCurrentModuleShortid, actions.setMainModuleShortid, actions.setInitialTab, actions.setUrlOptions, actions.setWorkspace, ensurePackageJSON, ], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), }, ], }, set(state`editor.isLoading`, false), ]);

actions.getSandbox, { success: [

...

], notFound: set(state`editor.notFound`, true), error: set(state`editor.error`, props`error.message`), },

slide-21
SLIDE 21

Lessons learned refactoring Codesandbox.io from Redux to Cerebral

https://medium.com/@christianalfoni/lessons-learned-refactoring-codesandbox-io-from- redux-to-cerebral-40e9a5646281

slide-22
SLIDE 22

FACEBOOK FLUX

ACTION STORE DISPATCHER VIEW

slide-23
SLIDE 23 STORE STORE STORE STORE

ACTION DISPATCHER VIEW

FACEBOOK FLUX BAOBAB

VIEW

ELM DB INSIDE OUT

slide-24
SLIDE 24

tree.set([‘text’], ‘newText’) { method: ‘set’, path: [‘text’], value: ‘newText’ }

slide-25
SLIDE 25

May 9th

2015

May 8th

2015

July 2nd

2015

Immutable-store gets signals and a time machine Cerebral first commit Live React: Hot Reloading with Time Travel at react-europe 2015 https://www.youtube.com/watch?v=Txpw4wU4BCU&t=127s https://www.youtube.com/watch?v=xsSnOQynTHs

slide-26
SLIDE 26

[ ]

CEREBRAL

FUNCTION-TREE ADDRESSBAR

https://localhost

slide-27
SLIDE 27

67 CONTRIBUTORS

slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

www.cerebraljs.com

slide-31
SLIDE 31
slide-32
SLIDE 32

tree.set([‘text’], ‘newText’) { method: ‘set’, path: [‘text’], value: ‘newText’ } dispatch({ type: ‘UPDATE_TEXT’, payload: ‘newText’ }) { type: ‘UPDATE_TEXT’, payload: ‘newText’ } (state, action) => { return newState }

DISPATCH TRANSACTION MUTATION TREE

slide-33
SLIDE 33

tree.set([‘text’], ‘newText’) { method: ‘set’, path: [‘text’], value: ‘newText’ } dispatch({ type: ‘UPDATE_TEXT’, payload: ‘newText’ }) { type: ‘UPDATE_TEXT’, payload: ‘newText’ } (state, action) => { return newState }

DISPATCH TRANSACTION MUTATION TREE