Download as PDF, PPTX
![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)
Uploaded byCodeFest
Thomas Lobinger
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.
More Related Content
Thomas Lobinger
- 1.
- 2.
- 3.
- 4.
- 5. NO GOLDEN HAMMER Pickwhat works best for your team. This includes processes, languages, and tools. There is no single answer.
- 6. DEVELOPERS ❤ JSFRAMEWORKS 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 CANWE HELP OUR TEAMS?
- 8. CHOCOLATE FACTORY INCREASE DEVELOPER HAPPINESS ANDPRODUCTIVITY!
- 9. OPTION 1 DESIGN GUIDE Ratherlow 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 Muchbetter! 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 INCODE 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 THERESCUE!
- 13. Chrome Firefox Internet Explorer EdgeSafari Templates HTML Imports Custom Elements Shadow DOM
- 14. POLYFILLS ARE ASYNCBY NATURE MISSING FRAMEWORK INTEGRATION
- 15. WEB COMPONENTS TO THERESCUE!
- 16. IDEAS WE KEPT Customelements Style encapsulation De ned API
- 17.
- 18. RUNTIME Custom element declarationand 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 TheAngularJS wrapper is a script that declares an Angular directive for each component at runtime.
- 21. FRAMEWORK WRAPPER FOR REACT Wehave a wrapper around the React.createClass function that converts our component speci cations to the native React components.
- 22. FRAMEWORK WRAPPER FOR GWT Alibrary that provides a GWT Widget API class for each component. These classes are generated at build-time.
- 23. OKAY, ... SHOW MEA COMPONENT
- 24. DEMO CodeFest 2010 <awsui-conference> <div class="awsui-conference"> <div class="awsuilogo 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> <scriptsrc="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> <scriptsrc="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> <scriptsrc="js/awsui-conference.js"></script> <div ng-controller="Data"> <awsui-conference title="{{name}}"></awsui-conference> </div>
- 29. AND EVEN GWT importcom.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.
- 31. BENEFITS WE SAW On-boardingnew 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 wasa 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 STYLEGUIDES!
- 34. USAGE OF OURCOMPONENTS
- 35. FUTURE Grow our teamin Berlin and Seattle Build more tools that help frontend developers and designers Open source what we have done
- 36.