Download as PDF, PPTX
Component based architecture
- 1.
- 2.
- 3. ● Discuss frontendarchitecture ● Frameworks? ● Why Component-based architecture is good ● Angular’s approach to components ● Good JavaScript tools and libraries
- 4. Traditional MVC (n-tiered) ArchitectureTries to be Loosely Coupled ● Separation of concern ● App is divided into layers: Model, View, Controller, Service, Persistence, Networking, etc.
- 5. But MVC haslots of disadvantages: Complexity, Fragility, Non-reusable. Difficult to extend existing functionality
- 6. MVC is DEAD FAREWELLTO MVC
- 7.
- 8. What is a component? Acomponent is a self-contained object which owns its own presentation logic, view, and internal state
- 9.
- 10. A Component owns itsstate
- 11. A Component knows howto render itself View = template + state
- 12. A Component is reusable Theycan 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
- 15.
- 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-waydata binding
- 19. Avoid Two-way databinding as much as possible Two-way databinding creates tight coupling between components Angular watchers creates performance issues ~ upper limit 2000
- 20.
- 21.
- 22.
- 23.