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.

Thomas Lobinger

439 views

Published on

(Web?)Components in production

Published in: Software
  • We had to change focus a little in the last month and have created a version 2 that is more capable last Friday. We haven't forgotten about open sourcing and plan the next big tasks in the next weeks. I hope we will decide spending time to open source or at least talk about the tech in more detail.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I follow the Olga's speech in Verona https://vimeo.com/album/4046719/video/174669126 and you work is amazing. Did you have any idea when the open source code will be available ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Thomas Lobinger

  1. 1. (WEB?) COMPONENTS IN PRODUCTION
  2. 2. AMAZON WEB SERVICES
  3. 3.  
  4. 4. SERVICE TEAMS Small Strong ownership Independence
  5. 5. NO GOLDEN HAMMER Pick what works best for your team. This includes processes, languages, and tools. There is no single answer.
  6. 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. 7. SO HOW CAN WE HELP OUR TEAMS?
  8. 8. CHOCOLATE FACTORY INCREASE DEVELOPER HAPPINESS AND PRODUCTIVITY!
  9. 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. 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. 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. 12. WEB COMPONENTS TO THE RESCUE!
  13. 13. Chrome Firefox Internet Explorer Edge Safari Templates HTML Imports Custom Elements Shadow DOM
  14. 14. POLYFILLS ARE ASYNC BY NATURE MISSING FRAMEWORK INTEGRATION
  15. 15. WEB COMPONENTS TO THE RESCUE!
  16. 16. IDEAS WE KEPT Custom elements Style encapsulation De ned API
  17. 17. ARCHITECTURE Components Framework Wrapper Runtime Browser Environment
  18. 18. RUNTIME Custom element declaration and lifecycle Custom events, property and region handling Render engine (mithril) Validation of property types Metrics
  19. 19. FRAMEWORK WRAPPER GWT AngularJS React Angular 2 (prototype) Web Components (hack day)
  20. 20. FRAMEWORK WRAPPER FOR ANGULARJS The AngularJS wrapper is a script that declares an Angular directive for each component at runtime.
  21. 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. 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. 23. OKAY, ... SHOW ME A COMPONENT
  24. 24. DEMO CodeFest 2010 <awsui-conference> <div class="awsui-conference"> <div class="awsui logo red"></div> CodeFest 2010 </div> </awsui-conference>
  25. 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. 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. 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. 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. 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. 30. IT WORKS!
  31. 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. 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. 33. CODIFY YOUR STYLE GUIDES!
  34. 34. USAGE OF OUR COMPONENTS
  35. 35. FUTURE Grow our team in Berlin and Seattle Build more tools that help frontend developers and designers Open source what we have done
  36. 36. THANK YOU CODEFEST.RU Thomas Denis @tlobinger @pragmadash

×