Thomas Lobinger
0 likes568 views
This document discusses Amazon's approach to developing web components for use across their teams. It outlines how they standardized on web components to provide reusable UI elements that work across JavaScript frameworks like Angular and React. The document shares the benefits they saw, such as reduced onboarding time and enforced design compliance. It also discusses lessons learned, like how reinventing components paid off and the importance of support. Examples are provided of how their conference component can be used in different frameworks.
![COMPONENT'S CODE
AwsUi.__addComponent('awsui-conference', {
properties: {
title: { type: 'string' },
counter: { type: 'integer', defaultValue: 2010 }
},
render(m, h) {
const component = this;
const color = this.counter % 2 === 0 ? 'red' : 'purple';
const logo = m('div',
h.copyDefined({ className: `awsui logo ${color}` }));
return m('div', h.copyDefined({
className: 'awsui-conference',
onclick: () => component.counter++
}), [logo, `${component.title} ${this.counter}`]);
}
});](https://image.slidesharecdn.com/webcomponentsinproduction-160328131246/85/Thomas-Lobinger-25-320.jpg)
Thomas Lobinger
- 5. NO GOLDEN HAMMER Pick what works best for your team. This includes processes, languages, and tools. There is no single answer.
- 6. DEVELOPERS ❤ JS FRAMEWORKS 200X: jQuery, MooTools, Prototype & script.aculo.us 2010: Ext JS 2011: Google Web Toolkit 2012: Backbone.js 2013: Ember.js 2014: AngularJS 2015: React 2016: Angular 2? ... to be continued
- 7. SO HOW CAN WE HELP OUR TEAMS?
- 8. CHOCOLATE FACTORY INCREASE DEVELOPER HAPPINESS AND PRODUCTIVITY!
- 9. OPTION 1 DESIGN GUIDE Rather low initial cost Derive patterns from what you already have One time cost to implement per JS framework N-time cost of continuous changes to style guide Very high cost to enforce compliance Hard to make sure it doesn't contradict itself
- 10. OPTION 2 CSS FRAMEWORK Much better! Render example pages and use cases But CSS de nes Markup No clear boundary of ownership / CSS overwrites Can't incorporate a11y and functionality Hard to maintain and update
- 11. OPTION 3 SOMETHING IN CODE THAT ... Supports all frontend frameworks Supports currently used browsers Decouples style and markup Is performant Is accessible Has tests and a deployment strategy And last but not least a contribution model
- 12. WEB COMPONENTS TO THE RESCUE!
- 13. Chrome Firefox Internet Explorer Edge Safari Templates HTML Imports Custom Elements Shadow DOM
- 14. POLYFILLS ARE ASYNC BY NATURE MISSING FRAMEWORK INTEGRATION
- 15. WEB COMPONENTS TO THE RESCUE!
- 16. IDEAS WE KEPT Custom elements Style encapsulation De ned API
- 18. RUNTIME Custom element declaration and lifecycle Custom events, property and region handling Render engine (mithril) Validation of property types Metrics
- 19. FRAMEWORK WRAPPER GWT AngularJS React Angular 2 (prototype) Web Components (hack day)
- 20. FRAMEWORK WRAPPER FOR ANGULARJS The AngularJS wrapper is a script that declares an Angular directive for each component at runtime.
- 21. FRAMEWORK WRAPPER FOR REACT We have a wrapper around the React.createClass function that converts our component speci cations to the native React components.
- 22. FRAMEWORK WRAPPER FOR GWT A library that provides a GWT Widget API class for each component. These classes are generated at build-time.
- 23. OKAY, ... SHOW ME A COMPONENT
- 24. DEMO CodeFest 2010 <awsui-conference> <div class="awsui-conference"> <div class="awsui logo red"></div> CodeFest 2010 </div> </awsui-conference>
- 25. COMPONENT'S CODE AwsUi.__addComponent('awsui-conference', { properties: { title: { type: 'string' }, counter: { type: 'integer', defaultValue: 2010 } }, render(m, h) { const component = this; const color = this.counter % 2 === 0 ? 'red' : 'purple'; const logo = m('div', h.copyDefined({ className: `awsui logo ${color}` })); return m('div', h.copyDefined({ className: 'awsui-conference', onclick: () => component.counter++ }), [logo, `${component.title} ${this.counter}`]); } });
- 26. VANILLA JAVASCRIPT <script src="js/awsui.min.js"></script> <script src="js/awsui-conference.js"></script> const node = AwsUi.createComponent('awsui-conference'); node.component.title = 'CodeFest'; document.body.appendChild(node);
- 27. REACT <script src="js/awsui.min.js"></script> <script src="js/awsui-react.min.js"></script> <script src="js/awsui-conference.js"></script> import React, { Component } from 'react'; export default class FancyPage extends Component { render() { return (<Conference title="CodeFest"/>); } }
- 28. ANGULAR <script src="js/awsui.min.js"></script> <script src="js/awsui-angular.min.js"></script> <script src="js/awsui-conference.js"></script> <div ng-controller="Data"> <awsui-conference title="{{name}}"></awsui-conference> </div>
- 29. AND EVEN GWT import com.amazonaws.ui.gwt.js.client.AwsUiInjector; <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:awsui="urn:import:com.amazonaws.ui.gwt.widget.components"> <awsui:Conference title="CodeFest"/> </ui:UiBinder>
- 30. IT WORKS!
- 31. BENEFITS WE SAW On-boarding new teams is less than one day of work Teams are compliant out of the box Zero or low e ort for teams after design changes Sparked community engagement and contribution
- 32. LESSONS LEARNED It was a hard decision to re-invent some things, but it payed o SLA is key to build trust Our teams liked having form elements most Even implementing a tooltip component can be a challenge
- 33. CODIFY YOUR STYLE GUIDES!
- 34. USAGE OF OUR COMPONENTS
- 35. FUTURE Grow our team in Berlin and Seattle Build more tools that help frontend developers and designers Open source what we have done