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.

of

Automating UI development Slide 1 Automating UI development Slide 2 Automating UI development Slide 3 Automating UI development Slide 4 Automating UI development Slide 5 Automating UI development Slide 6 Automating UI development Slide 7 Automating UI development Slide 8 Automating UI development Slide 9 Automating UI development Slide 10 Automating UI development Slide 11 Automating UI development Slide 12 Automating UI development Slide 13 Automating UI development Slide 14 Automating UI development Slide 15 Automating UI development Slide 16 Automating UI development Slide 17 Automating UI development Slide 18 Automating UI development Slide 19 Automating UI development Slide 20 Automating UI development Slide 21 Automating UI development Slide 22 Automating UI development Slide 23 Automating UI development Slide 24 Automating UI development Slide 25 Automating UI development Slide 26 Automating UI development Slide 27 Automating UI development Slide 28 Automating UI development Slide 29 Automating UI development Slide 30 Automating UI development Slide 31 Automating UI development Slide 32 Automating UI development Slide 33 Automating UI development Slide 34 Automating UI development Slide 35 Automating UI development Slide 36 Automating UI development Slide 37 Automating UI development Slide 38 Automating UI development Slide 39 Automating UI development Slide 40 Automating UI development Slide 41 Automating UI development Slide 42 Automating UI development Slide 43 Automating UI development Slide 44 Automating UI development Slide 45 Automating UI development Slide 46 Automating UI development Slide 47 Automating UI development Slide 48 Automating UI development Slide 49 Automating UI development Slide 50 Automating UI development Slide 51 Automating UI development Slide 52 Automating UI development Slide 53 Automating UI development Slide 54 Automating UI development Slide 55 Automating UI development Slide 56 Automating UI development Slide 57 Automating UI development Slide 58 Automating UI development Slide 59 Automating UI development Slide 60 Automating UI development Slide 61 Automating UI development Slide 62 Automating UI development Slide 63 Automating UI development Slide 64 Automating UI development Slide 65 Automating UI development Slide 66 Automating UI development Slide 67 Automating UI development Slide 68 Automating UI development Slide 69 Automating UI development Slide 70 Automating UI development Slide 71 Automating UI development Slide 72 Automating UI development Slide 73 Automating UI development Slide 74 Automating UI development Slide 75 Automating UI development Slide 76 Automating UI development Slide 77 Automating UI development Slide 78 Automating UI development Slide 79 Automating UI development Slide 80 Automating UI development Slide 81 Automating UI development Slide 82 Automating UI development Slide 83 Automating UI development Slide 84 Automating UI development Slide 85 Automating UI development Slide 86 Automating UI development Slide 87 Automating UI development Slide 88 Automating UI development Slide 89 Automating UI development Slide 90 Automating UI development Slide 91 Automating UI development Slide 92 Automating UI development Slide 93 Automating UI development Slide 94 Automating UI development Slide 95 Automating UI development Slide 96 Automating UI development Slide 97 Automating UI development Slide 98 Automating UI development Slide 99 Automating UI development Slide 100 Automating UI development Slide 101 Automating UI development Slide 102 Automating UI development Slide 103
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Automating UI development

Download to read offline

Design systems and pattern libraries help designers and developers to get a common understanding of user interfaces. But even with such tools in place, there's a ton of processes and handovers involved. Each one causing possible friction and information loss. Especially over time. This might lead to new features feeling outdated on release, and screens and mock-ups getting too old too fast.

With our recent move to Angular and Sketch, we were able to automate 70% of our UI development. Helping our developers to focus on the real problems, and reducing the UI review efforts tremendously. Join us and see how we produce a single source of truth for developers and designers, and how we are able to consume this source in our tool of choice.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Automating UI development

  1. 1. Automating UI Development Angular Connect 2018 @ddprrt @Ka_TriN_F
  2. 2. Slide about usKatrin Freihofner
 @Ka_TriN_F devone.at
  3. 3. Slide about usStefan Baumgartner
 @ddprrt javascript-podcast.com
  4. 4. expert groups
  5. 5. Highly specialised screens … with lots of generic, flexible components
  6. 6. Git Design System update Symbols library
  7. 7. Git Design System update Symbols library
  8. 8. Design System update
  9. 9. Design System update
  10. 10. You might wonder …how will this affect the product?
  11. 11. Initial idea
  12. 12. UX + design Initial idea
  13. 13. UX + design Initial idea Sketch lib
  14. 14. UX + design Initial idea Angular component lib Product code Sketch lib
  15. 15. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  16. 16. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  17. 17. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  18. 18. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  19. 19. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  20. 20. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  21. 21. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  22. 22. Angular component lib
  23. 23. Barista Design System Product code Angular component lib
  24. 24. Barista Design System Product code ? Angular component lib
  25. 25. Barista Design System Product code UX + design Sketch lib Angular component lib
  26. 26. Transform Angular to Sketch Angular library Sketch library ?
  27. 27. .sketch is bunch of JSON files library.sketch pages D91775B4-2C6C-4FCC-9209-6D8C930B9013.json document.json meta.json user.json
  28. 28. .sketch is bunch of JSON files library.sketch pages D91775B4-2C6C-4FCC-9209-6D8C930B9013.json document.json meta.json user.json We can hack that!
  29. 29. CSS equivalents in .sketch JSON button { width: 122px; height: 32px; background-color: #00f; } ShapeGroup: { frame: {x: 0, y: 0, width: 122, height: 32} layers: [ ShapePath: { points: [‘{0,0}’,‘{0,1}’,‘{1,1}’,‘{1,0}’] } ], style: { fills: [ color: { red: 0, green: 0, blue: 1, alpha: 1 } ] } }
  30. 30. CSS equivalents in .sketch JSON button { width: 122px; height: 32px; background-color: #00f; } ShapeGroup: { frame: {x: 0, y: 0, width: 122, height: 32} layers: [ ShapePath: { points: [‘{0,0}’,‘{0,1}’,‘{1,1}’,‘{1,0}’] } ], style: { fills: [ color: { red: 0, green: 0, blue: 1, alpha: 1 } ] } }
  31. 31. { "_class": "page", "do_objectID": "6224EB85-9573-4D33-BEE5-C57F892B94E4", "exportOptions": { "_class": "exportOptions", "exportFormats": [], "includedLayerIds": [], "layerOptions": 0, "shouldTrim": false }, "frame": { "_class": "rect", "constrainProportions": false, "height": 300, "width": 300, "x": 0, "y": 0 }, "isFlippedHorizontal": false, CSS equivalents in .sketch JSON button { width: 122px; height: 32px; background-color: #00f; }
  32. 32. CSS equivalents in .sketch JSON button { width: 122px; height: 32px; background-color: #00f; }
  33. 33. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  34. 34. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  35. 35. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  36. 36. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  37. 37. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  38. 38. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  39. 39. parsable properties export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; }
  40. 40. export class StyleDeclaration { borderTop = '0px none rgb(0, 0, 0)’; borderLeft = '0px none rgb(0, 0, 0)’; borderBottom = '0px none rgb(0, 0, 0)'; borderRight = '0px none rgb(0, 0, 0)'; borderColor = 'rgb(0, 0, 0)'; borderTopLeftRadius = '0px'; borderTopRightRadius = '0px'; borderBottomRightRadius = '0px'; borderBottomLeftRadius = '0px'; borderWidth = '0px'; boxShadow = 'none'; padding = '0px'; backgroundImage = ‘none'; backgroundColor = 'rgba(0, 0, 0, 0)’; color = 'rgb(0, 0, 0)'; fill = 'rgb(0, 0, 0)’; strokeWidth = '1px'; fontFamily = 'Helvetica Neue'; fontSize = '16px'; fontStyle = 'normal'; fontWeight = '400'; letterSpacing = ‘normal'; whiteSpace = ‘normal'; lineHeight = 'normal'; textDecoration = 'none solid rgb(0, 0, 0)'; textAlign = 'start'; textTransform = 'none'; transform = 'none'; opacity = ‘1'; display = ‘block'; visibility = 'visible'; } “browser stylesheet”
  41. 41. CSS+HTML to Sketch <button …> + CSSStyleDeclaration <div …> + CSSStyleDeclaration <h1> + CSSStyleDeclaration … … "frame": { "_class": "rect", "constrainProportions": false, "height": 44, "width": 764, "x": 0, "y": 0 }, … .json
  42. 42. Transform Angular to Sketch Angular library Sketch library ? CSSDecl jsonSketch Generator
  43. 43. Generate CSS Declaration files CSS scraper
  44. 44. Generate CSS Declaration files CSS scraper
  45. 45. Generate CSS Declaration files CSS scraper <button …>
  46. 46. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle()
  47. 47. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle() ➡ getBoundingClientRect()
  48. 48. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle() ➡ getBoundingClientRect() <div …>
  49. 49. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle() ➡ getBoundingClientRect() <div …> ➡ getComputedStyle() ➡ getBoundingClientRect()
  50. 50. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle() ➡ getBoundingClientRect() <div …> ➡ getComputedStyle() ➡ getBoundingClientRect() <h1> ➡ getComputedStyle() ➡ getBoundingClientRect() …
  51. 51. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle() ➡ getBoundingClientRect() <div …> ➡ getComputedStyle() ➡ getBoundingClientRect() <h1> ➡ getComputedStyle() ➡ getBoundingClientRect() … <button …> + CSSStyleDeclaration <div …> + CSSStyleDeclaration <h1> + CSSStyleDeclaration …
  52. 52. Generate CSS Declaration files CSS scraper <button …> ➡ getComputedStyle() ➡ getBoundingClientRect() <div …> ➡ getComputedStyle() ➡ getBoundingClientRect() <h1> ➡ getComputedStyle() ➡ getBoundingClientRect() …
  53. 53. Generate CSS Declaration files CSS scraper
  54. 54. Generate CSS Declaration files CSS scraper update!
  55. 55. Generate CSS Declaration files CSS scraper update!
  56. 56. Generate CSS Declaration files CSS scraper update!
  57. 57. Transform angular to sketch Angular library Sketch library ? CSSDecl jsonSketch GeneratorApp CSS scraper
  58. 58. Parsing component code Angular component lib
  59. 59. TS Parsing component code Angular component lib Parses AST
  60. 60. A ‘pure’ example and component variants TSAngular component lib Parses AST
  61. 61. A ‘pure’ example and component variants TSAngular component lib examples
  62. 62. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } examples
  63. 63. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } examples
  64. 64. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } examples variants
  65. 65. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } @Component({ selector: `button[dt-button], button[dt-icon-button]`, templateUrl: 'button.html', }) export class DtButton extends … { @Input() get variant(): ‘primary’ | ‘secondary’ { return this._variant; } } examples variants
  66. 66. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } @Component({ selector: `button[dt-button], button[dt-icon-button]`, templateUrl: 'button.html', }) export class DtButton extends … { @Input() get variant(): ‘primary’ | ‘secondary’ { return this._variant; } } examples variants
  67. 67. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } @Component({ selector: `button[dt-button], button[dt-icon-button]`, templateUrl: 'button.html', }) export class DtButton extends … { @Input() get variant(): ‘primary’ | ‘secondary’ { return this._variant; } } examples variants
  68. 68. A ‘pure’ example and component variants TSAngular component lib @Component({ moduleId: module.id, template: `<button dt-button>Simple button</button>`, }) export class ButtonPureExampleComponent { } @Component({ selector: `button[dt-button], button[dt-icon-button]`, templateUrl: 'button.html', }) export class DtButton extends … { @Input() get variant(): ‘primary’ | ‘secondary’ { return this._variant; } } examples variants
  69. 69. A ‘pure’ example and component variants TSAngular component lib examples variants
  70. 70. A ‘pure’ example and component variants TSAngular component lib examples + variants
  71. 71. A ‘pure’ example and component variants TSAngular component lib examples + variants
  72. 72. A ‘pure’ example and component variants TSAngular component lib examples + variants
  73. 73. A ‘pure’ example and component variants TSAngular component lib examples + variants
  74. 74. Transform Angular to Sketch Angular library Sketch libraryCSSDecl json Sketch GeneratorApp CSS scraper Library App generator
  75. 75. UX + design Initial idea Angular component lib Product code Sketch lib Barista Design System
  76. 76. Angular component lib Barista Design System Sketch lib Product code UX + design
  77. 77. $royalblue-700: #393db0; dt-theme-palette($green-600, $green-700, $green-800),
  78. 78. Lukas Holzer
 @luka5c0m
  79. 79. Katrin Freihofner
 @Ka_TriN_F Stefan Baumgartner
 @ddprrt Office hours
 12:30 - 13:00
  • ali2005

    Jan. 6, 2019

Design systems and pattern libraries help designers and developers to get a common understanding of user interfaces. But even with such tools in place, there's a ton of processes and handovers involved. Each one causing possible friction and information loss. Especially over time. This might lead to new features feeling outdated on release, and screens and mock-ups getting too old too fast. With our recent move to Angular and Sketch, we were able to automate 70% of our UI development. Helping our developers to focus on the real problems, and reducing the UI review efforts tremendously. Join us and see how we produce a single source of truth for developers and designers, and how we are able to consume this source in our tool of choice.

Views

Total views

1,635

On Slideshare

0

From embeds

0

Number of embeds

583

Actions

Downloads

9

Shares

0

Comments

0

Likes

1

×