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.

Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"

Модель компонентов существует уже несколько лет, однако только за последний год она действительно обрела силу, пожалуй, благодаря React.
Компоненты играют ключевую роль в Angular 2.0, однако использовать их уже можно и нужно сейчас в существующем коде.
В этой лекции мы разберем по косточкам все супер-силы, которые есть у Angular Components и возможности, которые открываются с их использованием на основе реального приложения. После этого, Вам вряд ли захочется возвращаться в обычный мир Angular.

  • Be the first to comment

  • Be the first to like this

Сергей Больщиков "Angular Components: все уже за, а вы еще нет?"

  1. 1. Сергей Больщиков Wix Angular Components: все уже за, а вы еще нет?
  2. 2. Все уже за, Angular Components А вы еще нет? github.com/bolshchikov@bolshchikovsergeyb@wix.com 2
  3. 3. Quick exercise Category #1 Who is writing in Angular 1.x? 3
  4. 4. Quick exercise Category #1 Who is writing in Angular 1.x? Category #2 Who is writing in Angular 2? 4
  5. 5. Quick exercise Category #1 Who is writing in Angular 1.x? Category #2 Who is writing in Angular 2? Who is writing in React? Category #3 5
  6. 6. You will learn today Category #1 Who is writing in Angular 1.x? Category #2 Who is writing in Angular 2? Who is writing in React? Category #3 6 ● Current problems ● Components architecture ● Components are essentials for Angular 2 ● Components architecture ● Missing components test kit ● Current problems ● Components architecture ● Cleaner code ● Components in Angular 1.x ● Components test kit ● You know that components are great ● Learn to test components ● Missing components test kit
  7. 7. Sergey Bolshchikov Developer Advocate @ Wix Father of YGFL Conference Maintainer of js-must-watch 7 github.com/bolshchikov @bolshchikov sergeyb@wix.com
  8. 8. A bit about myself What are the problems? How can we solve them with components? Can they make our code better? How Angular Components solve them? You Are Here Agenda 8
  9. 9. And it all starts from the... 9
  10. 10. - Pearl Buck “ “ 10 If you want to understand today, You have to search yesterday.
  11. 11. It’s all history Jan, 2016Aug, 2013May, 2013 Oct, 2011Feb, 2011Oct, 2010 Components Model Web Components Presentation Angular Directives React Angular Components Ember Components 11
  12. 12. 01 / Problems 12
  13. 13. We almost don’t write code, 13
  14. 14. We almost don’t write code, We maintain it. 14
  15. 15. Maintain the soup of services, controllers, templates, directives, factories… is freaking hard 15
  16. 16. Just for you to visualize what I am talking about 16
  17. 17. 17 ctrl1 s1 d1 с1 с2 ctrl2 s2 s3 s4 d2
  18. 18. 18 ctrl1 s1 d1 с1 с2 с3 ctrl2 ctrl3 s2 s3 s4 s5 s6 d2 d3
  19. 19. 19 ctrl1 s1 d1 с1 с2 с3 с4 с5 ctrl2 ctrl3 ctrl4 ctrl5 s2 s3 s4 s5 s6 s7 s8 s9 10 11 d2 d3 d4 d5 d6 d7 ctrl6
  20. 20. 20 ctrl1 s1 d1 с1 с2 с3 с4 с5 ctrl2 ctrl3 ctrl4 ctrl5 s2 s3 s4 s5 s6 s7 s8 s9 10 11 d2 d3 d4 d5 d6 d7 ctrl6
  21. 21. This is not a fake, this is real app 21
  22. 22. Ahh, and one more thing - We need to test all of it. 22
  23. 23. 02 / Can we do better? 23
  24. 24. Image app My Images 24
  25. 25. My Images 25
  26. 26. My Images app 26
  27. 27. My Images app media item 27
  28. 28. My Images app media item preview 28
  29. 29. The component tree app media item preview 29 1..n
  30. 30. Clear API app media item preview 30 1..n item item
  31. 31. Clear API app media item preview 31 1..n item item on-remove() on-prev() on-next()
  32. 32. Clear API app media item preview 32 1..n item item on-remove() on-prev() on-next() Smart component Dumb component Dumb component
  33. 33. It scales 33
  34. 34. 03 / Angular Components 34
  35. 35. @Component({ selector: 'hero-list', templateUrl: 'app/hero-list.component.html', directives: [HeroDetailComponent], providers: [HeroService] }) Cornerstone @ ng2 35
  36. 36. Components are introduced in Angular 1.5 or with polyfill even before 36
  37. 37. angular .module('totallyDifferentAngularAppInternal') .directive('test', () => ({ template: '<div></div>', controller: Test, controllerAs: 'test', scope: { name: '=' }, bindToController: true, restrict: 'E' })); Directive vs. Component 37 angular .module('totallyDifferentAngularAppInternal') .component('test', { template: `<div></div>`, controller: Test, bindings: { name: '=' } });
  38. 38. class Test { $onInit() { // initialization code for constructor } $onDestroy() {} $postLink() {} } angular .module('totallyDifferentAngularAppInternal') .component('test', { template: `<div></div>`, controller: Test, bindings: { name: '=' } }); Lifecycle hooks 38
  39. 39. Now let’s talk about testing. Scaling is hard without it. 39
  40. 40. Are you doing TDD? 40
  41. 41. Ahh, OK. How about just testing? 41
  42. 42. Tests’ types Test Type Speed Amount Check Coupling Unit (Karma) Fast Many Logic Isolated 42
  43. 43. Tests’ types Test Type Speed Amount Check Coupling Unit (Karma) Fast Many Logic Isolated Integration (Protractor) Slow Few UI Very Coupled 43
  44. 44. Missing something? 44
  45. 45. Tests’ types Test Type Speed Amount Check Coupling Unit (Karma) Fast Many Logic Isolated Fast Many Logic + UI Some Integration (Protractor) Slow Few UI Very Coupled 45
  46. 46. Tests’ types Test Type Speed Amount Check Coupling Unit (Karma) Fast Many Logic Isolated Component (Karma) Fast Many Logic + UI Some Integration (Protractor) Slow Few UI Very Coupled 46
  47. 47. Meet component test kit! 47
  48. 48. 04 / Show us code 48
  49. 49. 49 Component Test Usual tests
  50. 50. 50 Component TestDriver Adding driver
  51. 51. 51 Component TestDriver Sub Component Sub Component Component and its children
  52. 52. 52 Component TestDriver Sub Component Driver Driver Sub Component Driver and its children
  53. 53. This is where you are going to present your final words. This slide is not meant to have a lot of text. Problems / Solutions 53 Maintenance Scaling Testing Clear Input/Output Components tree Component Test Kit
  54. 54. This is where you are going to present your final words. This slide is not meant to have a lot of text.Exciting news! We are hiring in Kiev! http://bolshchikov.net Sergey Bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com 54
  55. 55. This is where you are going to present your final words. This slide is not meant to have a lot of text.Thank You! Any Questions? http://bolshchikov.net Sergey Bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com 55

×