Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progress of JavaScript Architecture

535 views

Published on

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/

Published in: Engineering
  • Be the first to comment

Progress of JavaScript Architecture

  1. 1. I serve to empower WordPress developers. @hellofromtonya @KnowTheCodePro Tonya MorkProgress of JavaScript Architecture
  2. 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. 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. 4. What is software architecture? ?
  5. 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. 6. Software architecture is about making fundamental structural choices which are costly to change once implemented. “ https://en.wikipedia.org/wiki/Software_architecture
  7. 7. Huh?
  8. 8. Code’s Blueprint Requirements Plan Code
  9. 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. 10. It’s the big picture. Step out of the code. Think about the building blocks.
  11. 11. The Why What problems does it seek to solve? ?
  12. 12. Synchronized Data #1
  13. 13. Performance #2
  14. 14. Developer Experience #3
  15. 15. User Experience #4
  16. 16. Business of Software #5
  17. 17. What drives our thinking and decision- making? ?
  18. 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. 19. 0 Retired ↓ Costs ↓ Risks ↓ Time ↑ Effectiveness ↑ Experience ↑ Performance Software Lifecycle What drives our decisions?
  20. 20. How have we solved these problems? How effective? ?
  21. 21. Layered Architecture Presentation Layer Business Layer Data Layer
  22. 22. MV* Architectures MVC MVP MVVM Credit: Learning JavaScript Design Patterns by Adnan Osmani Synchronized Performance Developer Experience User Experience Business
  23. 23. MV* + REST have not solved all of the problems. Why? ?
  24. 24. Mutability #1
  25. 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. 26. Functional Programming • Pure functions • input -> output • side effects • globals • data in, data out • Immutable data
  27. 27. REST Overfetching #2
  28. 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. 29. MV* + REST have not solved all of the problems.
  30. 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. 31. Engineering old principles in new ways while innovating new solutions.
  32. 32. DOM diffing Virtual DOM Incremental DOM Leverages: • Tree Data Structures • Diffing - diff algorithms Synchronized Performance Developer Experience User Experience Business
  33. 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. 34. Immutability Data does not change. Leverages: • Tree Data Structures • Structural Sharing Functional programming Synchronized Performance Developer Experience User Experience Business
  35. 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. 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. 37. Immutability Develop how we think about the state of data, i.e. as a single occurrence and can’t change.
  38. 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. 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. 40. Immutable Data Structures
  41. 41. Immutable Architecture Synchronized Performance Developer Experience User Experience Business
  42. 42. How do we solve the problem of REST overfetching? Synchronized Performance Developer Experience User Experience Business GraphQL
  43. 43. What are the next steps forward?
  44. 44. Immutable Declarative Executable Architecture IDEA Architecture by Lee Byron https://www.youtube.com/watch?v=oTcDmnAXZ4E
  45. 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. 46. Let’s Review the Key Take Aways
  47. 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. 48. We are very close to solving all of the problems. Future will be about maximization and solving tomorrow’s problems.
  49. 49. I serve to empower WordPress developers. Tonya Mork @hellofromtonya https://KnowTheCode.io Questions?

×