EmberConf2018: Toyota's Shared Component Library

Slides for my talk at EmberConf 2018 on the Ember addon we created at Toyota Connected

Link: https://youtu.be/bt9MRkf5Mus?t=6h43m56s

Transcript

1. Tony Ward
   Pg. 001
   Toyota’s Shared
   Component Library
   

   View Slide

2. • Creating solutions for the auto industry
   using data driven innovations
   
   • Car and ride sharing
   
   • Chose Ember
   
   • Need for an addon for quick
   development
   Toyota
   Connected
   Tony Ward
   Pg. 002
   

   View Slide

3. • Produce vehicles efficiently, while
   maintaining quality
   
   • Eliminate:
   
   • Muda: Waste
   
   • Mura: Inconsistencies
   
   • Muri: Excessive demands
   
   • Can apply to software too!
   Tony Ward
   Pg. 003
   Toyota
   Production
   System
   

   View Slide

4. • Ember addon
   
   • Common web components, template
   helpers, Sass functions, and Sass
   mixins
   
   • Designers created same components
   as Symbols in Sketch
   
   • Design and Dev pull from the same
   toolbox
   Tony Ward
   Pg. 004
   Loom
   

   View Slide

5. Tony Ward
   Pg. 005
   {{#form-item
   flow='column'
   label='Email'}}
   {{!-- input —}}
   {{/form-item}}
   

   View Slide

6. {{input-toggle
   action=(action ‘toggle')
   isChecked=keepLoggedIn
   disabled=task.isRunning}}
   Tony Ward
   Pg. 006
   

   View Slide

7. {{button-async
   theme='primary'
   default='Sign In'
   pending='Signing In...'
   width='full'
   action=(perform submitTask)}}
   Tony Ward
   Pg. 007
   

   View Slide

8. • Well tested components
   
   • Shared language/tools between design
   and development
   
   • Shared translations
   
   • Scalable
   
   • Efficiency, Consistency, Quality
   
   • Eliminate muda, mura, and muri
   Tony Ward
   Pg. 008
   Advantages
   

   View Slide

9. Tony Ward
   Pg. 009
   Thanks
   EmberConf! YnotDraw
   @_ynotdraw
   YnotDraw
   

   View Slide