The Front End Architecture Revolution GOTO Chicago 2015 Simplicity - - PowerPoint PPT Presentation

▶
the front end architecture revolution
SMART_READER_LITE
LIVE PREVIEW

The Front End Architecture Revolution GOTO Chicago 2015 Simplicity - - PowerPoint PPT Presentation

Mar 10, 2023 502 likes •969 views

The Front End Architecture Revolution GOTO Chicago 2015 Simplicity spina de pesce herring bone brick! many mainstream practice emphasize only the separation of concerns at the detriment of global coordination opportunities Simplicity

slide-1
SLIDE 1

The Front End Architecture Revolution

GOTO Chicago 2015

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

Simplicity

slide-8
SLIDE 8
slide-9
SLIDE 9

spina de pesce herring bone brick!

slide-10
SLIDE 10

many mainstream practice emphasize

  • nly the separation of concerns at the

detriment of global coordination

  • pportunities
slide-11
SLIDE 11

๏ Simplicity scales ๏ Pervasive simplicity permits more

  • pportunity for global optimization

๏ Question designs, tools, processes that

don’t lead to global optimization

๏ Global optimization is not at odds with

modularity (Garbage Collection)

slide-12
SLIDE 12

Possible Stack

๏ React / Relay ๏ ClojureScript (Google Closure) ๏ Transit ๏ Relay / Datomic

slide-13
SLIDE 13

Support immutability at every layer

slide-14
SLIDE 14

Benefits

๏ Enable simpler reasoning (which

permits wider / deeper reasoning)

๏ Agility (remove needless coordination) ๏ Performance

slide-15
SLIDE 15

Client Layer

slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

Mutability should be an implementation detail

Forcing mutability is like forcing someone pick a database, this is just bad design

slide-20
SLIDE 20
slide-21
SLIDE 21

Rule 5. Data dominates. If you've chosen the right data structures and organized things well, the algorithms will almost always be self evident. Data structures, not algorithms, are central to programming.

  • Rob Pike
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

Which Language?

slide-26
SLIDE 26
slide-27
SLIDE 27

+

slide-28
SLIDE 28

ClojureScript

๏ Now industry leading experts on

effective UI/UX over immutable data

๏ React Native permits targeting all

major platforms with one language

๏ Without throwing out multi-threaded

server side programs

slide-29
SLIDE 29

Closure Compiler

๏ Whole program optimization ๏ Dead Code Elimination ๏ Optimal code splitting ๏ Cross module code motion ๏ ES2015, CommonJS, AMD consumption

slide-30
SLIDE 30

Moving Data

slide-31
SLIDE 31

Transit

๏ Leverage JSON (pervasive) ๏ Provide richer types out of the box ๏ Extensible ๏ In some cases can decode Transit

payload into immutable data structures as fast as equivalent JSON

slide-32
SLIDE 32

[["~#point",[1.5,2.5]],["~#cache",1],["^1",1]]

slide-33
SLIDE 33

Server Side

slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39

Big Ideas

๏ UI components define what they need ๏ Use a recursive description (JSON,

EDN, etc)

๏ Batching

slide-40
SLIDE 40
slide-41
SLIDE 41

Datomic

๏ Immutable relational database ๏ Powerful auditing capabilities ๏ Efficient queries of arbitrary points

in the past

๏ Datalog-style queries are themselves

data (easy to compose)

slide-42
SLIDE 42

[:artist/name :artist/startYear]

slide-43
SLIDE 43

[{:release/media [{:medium/tracks [:track/name {:track/artists [:artist/name]}]}]}]

slide-44
SLIDE 44

Radical Simplicity

๏ Revisit your assumptions / biases about

any element of your stack that creates complexity

๏ Examine unfamiliar but time-tested

ideas for complexity reduction

slide-45
SLIDE 45

Questions?