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.

Building Framework Agnostic UI with Web Components

107 views

Published on

Nowadays many web apps are built with a selected library/framework like ReactJS, Angular, VueJS, etc. It makes your code bound tighly to a specific approach presented by a selected tool. What if you could develop parts of code that can be easily re-used in any place of Web, no matter the framework or library laying underneath it? I'll provide information how to develop web apps based on that approach so you'll keep your components library framework/library agnostic.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Building Framework Agnostic UI with Web Components

  1. 1. Building framework agnostic UI with Web Components Piotr Nalepa @ Auto1 Polska | 4Developers Katowice 2019 @sunpietro https://blog.piotrnalepa.pl
  2. 2. Building framework agnostic UI with Web Components Piotr Nalepa ● Senior Software Engineer @ Auto1 Polska ● Blogger ● Football fan 2
  3. 3. Building framework agnostic UI with Web Components The story 3
  4. 4. Building framework agnostic UI with Web Components Many different projects with similar UI 4
  5. 5. Building framework agnostic UI with Web Components 5
  6. 6. Building framework agnostic UI with Web Components Many different ways to keep UI similar 6
  7. 7. Building framework agnostic UI with Web Components 7 Bootstrap, Foundation, other
  8. 8. Building framework agnostic UI with Web Components Challenges with existing tools 8
  9. 9. Building framework agnostic UI with Web Components UI development challenges 9
  10. 10. Building framework agnostic UI with Web Components It’s difficult 10
  11. 11. Building framework agnostic UI with Web Components Design consistency 11
  12. 12. Building framework agnostic UI with Web Components Likely work duplication 12
  13. 13. Building framework agnostic UI with Web Components What does agnostic mean? 13
  14. 14. Building framework agnostic UI with Web Components ● Not using any specialized tools, like frameworks ● Making software working everywhere no matter the platform 14
  15. 15. Building framework agnostic UI with Web Components 15 Framework agnostic UI
  16. 16. Building framework agnostic UI with Web Components 16 Design consistency
  17. 17. Building framework agnostic UI with Web Components Development time reduction 17
  18. 18. Building framework agnostic UI with Web Components Code reusability 18
  19. 19. Building framework agnostic UI with Web Components As less dependencies as possible needed 19
  20. 20. Building framework agnostic UI with Web Components But it still sounds like definition of Bootstrap, right? 20
  21. 21. Building framework agnostic UI with Web Components Web Components 21
  22. 22. Building framework agnostic UI with Web Components ● Templates ● Shadow DOM ● Custom Elements ● Modules 22
  23. 23. Building framework agnostic UI with Web Components Why Web Components? 23
  24. 24. Building framework agnostic UI with Web Components Browser native technology 24
  25. 25. Building framework agnostic UI with Web Components Decent support in modern browsers 25
  26. 26. Building framework agnostic UI with Web Components 26
  27. 27. Building framework agnostic UI with Web Components UI element as HTML tag 27
  28. 28. Building framework agnostic UI with Web Components 28
  29. 29. Building framework agnostic UI with Web Components SSR support 29
  30. 30. Building framework agnostic UI with Web Components Simple to use 30
  31. 31. Building framework agnostic UI with Web Components 31
  32. 32. Building framework agnostic UI with Web Components 32 When debugging
  33. 33. Building framework agnostic UI with Web Components 33
  34. 34. Building framework agnostic UI with Web Components 34 Scoping
  35. 35. Building framework agnostic UI with Web Components Creating reusable Web Components 35
  36. 36. Building framework agnostic UI with Web Components 36Building framework agnostic UI with Web Components
  37. 37. Building framework agnostic UI with Web Components 37 Web Component lifecycle
  38. 38. Building framework agnostic UI with Web Components 38 constructor()
  39. 39. Building framework agnostic UI with Web Components 39
  40. 40. Building framework agnostic UI with Web Components connectedCallback() 40
  41. 41. Building framework agnostic UI with Web Components 41
  42. 42. Building framework agnostic UI with Web Components disconnectedCallback() 42
  43. 43. Building framework agnostic UI with Web Components 43
  44. 44. Building framework agnostic UI with Web Components attributeChangedCallback() 44
  45. 45. Building framework agnostic UI with Web Components 45
  46. 46. Building framework agnostic UI with Web Components adoptedCallback() 46
  47. 47. Building framework agnostic UI with Web Components 47 Including web component
  48. 48. Building framework agnostic UI with Web Components Web Component in action 48
  49. 49. Building framework agnostic UI with Web Components Web Components + JS frameworks/libraries 49
  50. 50. Building framework agnostic UI with Web Components It’s possible! 50
  51. 51. Building framework agnostic UI with Web Components Custom Elements + React 51
  52. 52. Building framework agnostic UI with Web Components 52
  53. 53. Building framework agnostic UI with Web Components 53 Just like native
  54. 54. Building framework agnostic UI with Web Components Custom Elements + VueJS 54
  55. 55. Building framework agnostic UI with Web Components 55
  56. 56. Building framework agnostic UI with Web Components Custom Elements + Angular 56
  57. 57. Building framework agnostic UI with Web Components Requires more effort 57
  58. 58. Building framework agnostic UI with Web Components 58 Angular module definition
  59. 59. Building framework agnostic UI with Web Components 59 Angular CLI config - angular.json the config property path: projects.<project-name>.architect.build.options.scripts
  60. 60. Building framework agnostic UI with Web Components Using Web Component in component 60
  61. 61. Building framework agnostic UI with Web Components 61 In case of supporting older browsers Use polyfills https://www.webcomponents.org/polyfills
  62. 62. Building framework agnostic UI with Web Components Web Components frameworks ● LitHTML ● Stencil ● SkateJS ● other 62
  63. 63. Building framework agnostic UI with Web Components Web Components + Micro Frontends 63
  64. 64. Building framework agnostic UI with Web Components Micro Frontends architecture 64
  65. 65. Building framework agnostic UI with Web Components 65
  66. 66. Building framework agnostic UI with Web Components App per feature 66
  67. 67. Building framework agnostic UI with Web Components Feature ownership 67
  68. 68. Building framework agnostic UI with Web Components Independency 68
  69. 69. Building framework agnostic UI with Web Components Micro Frontends pros 69
  70. 70. Building framework agnostic UI with Web Components Simplified web development 70
  71. 71. Building framework agnostic UI with Web Components Self-contained code 71
  72. 72. Building framework agnostic UI with Web Components Faster and independent web development 72
  73. 73. Building framework agnostic UI with Web Components Autonomous teams 73
  74. 74. Building framework agnostic UI with Web Components Micro Frontends cons 74
  75. 75. Building framework agnostic UI with Web Components Not proper for small projects 75
  76. 76. Building framework agnostic UI with Web Components Payload size 76
  77. 77. Building framework agnostic UI with Web Components Environment differences vel. outdated project 77
  78. 78. Building framework agnostic UI with Web Components Micro Frontends + Web Components. Good to go? 78
  79. 79. Building framework agnostic UI with Web Components It depends 79
  80. 80. Building framework agnostic UI with Web Components Takeaways 80
  81. 81. Building framework agnostic UI with Web Components Avoid UI code duplication 81
  82. 82. Building framework agnostic UI with Web Components Think about UI consistency 82
  83. 83. Building framework agnostic UI with Web Components Save your time 83
  84. 84. Building framework agnostic UI with Web Components Follow the checklist https://github.com/webcomponents/gold-standard/wiki 84
  85. 85. Building framework agnostic UI with Web Components Companies can hire developers from different domains 85
  86. 86. Building framework agnostic UI with Web Components Where you can find me? Blog: https://blog.piotrnalepa.pl Twitter: https://twitter.com/sunpietro Github: https://github.com/sunpietro 86
  87. 87. Building framework agnostic UI with Web Components Slides will be posted on Twitter 87
  88. 88. Building framework agnostic UI with Web Components Thank you! 88

×