In this talk, we will dive into what software architecture is, why it exists, what problems it seeks to solve, how different architectures seek to solve the problems, how effective each are, and then the future. This talk is from the 2018 JavaScript for WordPress Conference. https://javascriptforwp.com/conference/

1. I serve to empower WordPress developers.
@hellofromtonya
@KnowTheCodePro
Tonya MorkProgress of JavaScript
Architecture

2. This talk will cover…
➡ The What - what software architecture is.
➡ The Why - What problems is it seeking to solve.
➡ The How - Look at the different architectures.
➡ The Effective - Score each.
➡ The Future - Look at what’s next.

3. My Goals for You…
Develop your architectural mindset
and decision-making process.
Challenge you to think about the
key concepts in your work.

4. What is
software architecture?
?

5. Answers that I’ve heard include…
• Filesystem structure of our code
• Structure of the code itself
• Abstract visualization of what we might build

6. Software architecture is about
making fundamental structural
choices which are costly to
change once implemented.
“
https://en.wikipedia.org/wiki/Software_architecture

7. Huh?

8. Code’s Blueprint
Requirements Plan Code

9. Software architecture is
about making decisions
and defining the blueprint.
Emphasis on
• how all the pieces will interact,
• the role each plays,
• and how it all fits together
• over the entire lifecycle.

10. It’s the big picture.
Step out of the code.
Think about the building blocks.

11. The Why
What problems does
it seek to solve?
?

12. Synchronized Data
#1

13. Performance
#2

14. Developer Experience
#3

15. User Experience
#4

16. Business of Software
#5

17. What drives our
thinking and decision-
making?
?

18. Drives Our Thinking & Decisions:
How all the pieces will interact,
the role each plays,
and how it all fits together
over the entire lifecycle.
Leverage Principles & Design Patterns.

19. 0 Retired
↓ Costs
↓ Risks
↓ Time
↑ Effectiveness
↑ Experience
↑ Performance
Software Lifecycle
What drives our decisions?

20. How have we solved
these problems?
How effective?
?

21. Layered Architecture
Presentation Layer
Business Layer
Data Layer

22. MV* Architectures
MVC
MVP
MVVM
Credit: Learning JavaScript Design Patterns by Adnan Osmani
Synchronized
Performance
Developer Experience
User Experience
Business

23. MV* + REST have not solved
all of the problems.
Why?
?

24. Mutability
#1

25. mutability adjective
Subject to change.
Problems are:
• Synchronized Data
• How reliable is the data?
• How long do we have to wait for reliable data?
• Adds complexity
We want
immutability

26. Functional Programming
• Pure functions
• input -> output
• side effects
• globals
• data in, data out
• Immutable data

27. REST Overfetching
#2

28. User information GET /wp/v2/users/<id>
Event information GET /wp-json/foo/v2/users/<id>/events
Payment information GET /wp-json/foo/v2/users/<id>/payments
…
Overfetching:
Multiple REST endpoints + Extra Unneeded Data
Synchronized
Performance
Developer Experience
User Experience
Business

29. MV* + REST have not solved
all of the problems.

30. Component-Based Architectures or Hybrid
Internals
Interface
Internals
Interface
Internals
Interface
Facade
Mediator
• Self-sufficient
• Easy to integrate
• Swappable
• Blackbox
Synchronized
Performance
Developer Experience
User Experience
Business

31. Engineering old principles in
new ways while innovating
new solutions.

32. DOM diffing
Virtual DOM
Incremental DOM
Leverages:
• Tree Data Structures
• Diffing - diff algorithms
Synchronized
Performance
Developer Experience
User Experience
Business

33. Incremental DOM
http://google.github.io/incremental-dom/
Real DOM
Virtual DOM
Diffing
Real DOM
Incremental DOM
Diffing
React’s Virtual DOM
https://reactjs.org/docs/faq-internals.html

34. Immutability
Data does not change.
Leverages:
• Tree Data Structures
• Structural Sharing
Functional programming
Synchronized
Performance
Developer Experience
User Experience
Business

35. The last thing you wanted
any programmer to do is
mess with internal state.…
“ Alan Kay, Creator of Smalltalk
The Early History of Smalltalk
1993

36. We believe that the major contributor
to this complexity in many systems is
the handling of state and the burden
that this adds when trying to analyse
and reason about the system.
“
Ben Moseley and Peter Marks
Out of the Tar Pit
2006
http://curtclifton.net/papers/MoseleyMarks06a.pdf

37. Immutability
Develop how we think about the state of data,
i.e. as a single occurrence and can’t change.

38. Immutability
user = {
id: 1,
firstName: 'Tonya',
lastName: 'Mork',
role: 'admin',
twitter: ‘@hellofromtonya’,
github: ‘hellofromtonya’
}
1 ‘Tonya’ ‘Mork’ ‘admin’
‘@hellofr
omtonya’
‘hellofro
mtonya’
‘id’ ‘firstName’ ‘lastName’ ‘role’ ‘twitter’ ‘github’
user
10 ‘Tonya’ ‘Mork’ ‘admin’
‘@hellofr
omtonya’
‘hellofro
mtonya’
‘id’ ‘firstName’ ‘lastName’ ‘role’ ‘twitter’ ‘github’
newUser
Copy don’t change.

39. Trie + Structural Sharing
1 ‘Tonya’ ‘Mork’ ‘admin’
‘@hellofr
omtonya’
‘hellofro
mtonya’
‘id’ ‘firstName’ ‘lastName’ ‘role’ ‘twitter’ ‘github’
usernewUser
10 ‘Tonya’
‘id’ ‘firstName’
Advantages:
• Less Memory
• More Performant
• Data Persist
Synchronized
Performance
Developer Experience
User Experience
Business
https://www.youtube.com/watch?v=Wo0qiGPSV-s

40. Immutable Data Structures

41. Immutable Architecture
Synchronized
Performance
Developer Experience
User Experience
Business

42. How do we solve the problem
of REST overfetching?
Synchronized
Performance
Developer Experience
User Experience
Business
GraphQL

43. What are the next
steps forward?

44. Immutable
Declarative
Executable
Architecture
IDEA Architecture by Lee Byron
https://www.youtube.com/watch?v=oTcDmnAXZ4E

45. IDEA Architecture
Credit: “Immutable Application Architecture”
by Lee Byron
at React Europe 2018
https://www.youtube.com/watch?v=oTcDmnAXZ4E
Queue
Actions
Views
Components
Models
State
Server
{
Server: (State) => Promise<State>
Optimistic: (State) => State
}

46. Let’s Review the Key
Take Aways

47. Key Takeaways:
• Software Architecture is all about making structural
decisions.
• We think about the big picture and break it down into
building blocks.
• Emphasize role, interaction, relationships, etc.
• Decisions are based on synchronizing data, performance,
DX, UX, and business.

48. We are very close to solving all of
the problems.
Future will be about maximization
and solving tomorrow’s problems.

49. I serve to empower WordPress developers.
Tonya Mork
@hellofromtonya
https://KnowTheCode.io
Questions?