Search
  • Entelect Staff

Web components with ECMAScript 6


For the past 19 Months, I've been a full stack dev at ING bank Amsterdam.


ING underwent a lot of changes over the last couple years, not only from a technology perspective, but also their project management methodology. Fortunately, by the time that I joined, they have already implemented Spotify's implementation of scrum but they were still heavily Angular focused. The biggest challenge faced by a global bank like ING, is assuring component reuse and avoiding redeveloping the wheel, so to speak. An example of this is the fact that up until last year, they had more than 20 variations of their mobile banking application and 20 developer teams actively responsible for said apps.


On the back-end, TPA (touch point architecture) and Web components for front-end, were their solution. Using AngularJS, a lot of time was put into developing guide components, which can be used as "Lego blocks" but we still needed one global CSS file to apply ING level styling across all components and with the shift towards mobile applications, Angular is unnecessarily heavy and its digestive cycle makes it slow in comparison to web components.


Enter Web components


As a back-end dev, I really appreciate structure and a sound design approach. Web components with ECMAScript 6 started checking the right boxes for me! Web components offer many features but here are a few that comes to mind:


1) No new framework to learn :)


2) Use the platform Luke. Web components require no framework, they run natively on the browser == fast


3) Create custom components which extends the HTML element component and leads to cleaner code.


3) Create a component by extending another component.


4) Totally self contained components (each component contains all CSS, required libraries via HTML imports and javascript functions)


5) Self-contained components are easily testable. 


6) Shadow DOM and shady DOM allows us to prevent any changes to our component from the outside- gone are the days of CSS cross contamination


7) Mix-ins can be used to apply custom styling if you so wish and if the component allows it.


8) Components can be "tweaked" by injecting content into them by using the <slot/> tag. Sort of like transclude for Angular


Going the web component route via Polymer has facilitated front-end component reuse on a global scale and I am super stoked to be a part of this initiative.


Author:

Pierre Venter

0 views

©2018 by Entelect Software Limited.