Component based architecture
- 1. Component-based Frontend Architecture Zaiyang, Steve, Alex, Dave
- 3. ● Discuss frontend architecture ● Frameworks? ● Why Component-based architecture is good ● Angular’s approach to components ● Good JavaScript tools and libraries
- 4. Traditional MVC (n-tiered) Architecture Tries to be Loosely Coupled ● Separation of concern ● App is divided into layers: Model, View, Controller, Service, Persistence, Networking, etc.
- 5. But MVC has lots of disadvantages: Complexity, Fragility, Non-reusable. Difficult to extend existing functionality
- 6. MVC is DEAD FAREWELL TO MVC
- 8. What is a component? A component is a self-contained object which owns its own presentation logic, view, and internal state
- 10. A Component owns its state
- 11. A Component knows how to render itself View = template + state
- 12. A Component is reusable They can be composed <ul> <li><button>hello</button></li> </ul>
- 14. function HeaderController($scope, $element, $attrs){ //... } angular.module(‘myApp’) .component(‘header’,{ template: `<h1>{{ header.title }}</h1>`, controller: HeaderController, controllerAs: ‘header’ bindings: { ‘title’: ‘@’ } }); //…. // <header title=”Pet Shop”></header> Angular’s Component Approach
- 16. Input Field Value = ‘hello’ Parent Child.onchange <- parent.textChanged parent.onchange(newValue) Value = ‘hello’ textChanged() Child.value <- parent.value
- 17. Input Field value=’hello’ Parent Parent.value = child.value value=’hello’ $scope.$watch(...)
- 18. Don’t use two-way data binding
- 19. Avoid Two-way data binding as much as possible Two-way databinding creates tight coupling between components Angular watchers creates performance issues ~ upper limit 2000
- 20. What about Application state? Services? Controller? View? X Maybe Maybe