Evolving Web Applications with Modular Design Components

Web applications need to evolve over time. The best way to encourage this evolution is by building module based component systems. This allows for easier iteration, less refactoring, and better products for the consumers.

Mike Kivikoski will show how to design a module based component system using a CSS preprocessor, such as Sass. This technique allows us to design faster and in the browser, gives us the chance to put together various layouts while reusing UI patterns, and to help create cohesion and comfort for the user. Mike will demonstrate how to setup this system, build it, and use it within a product.

Transcript

1. Evolving Web Applications with Module Based 
 Design Components Mike Kivikoski – @mkivikoski – cantina.co
2. Hi! I’m Mike Kivikoski @mkivikoski
3. A Designer that develops
4. A Developer that designs
5. A Front End Designer
6. I work here, at Cantina
7. 5 Developers Case study project Cantina
8. 5 Developers Cantina ~65 Developers Client Case study project
9. How to keep everyone 
 in sync with styles?
10. How to keep everyone 
 in sync with styles? Let’s use a Module Component System!
11. What is a Module Component System? A design approach that subdivides a system into smaller parts.” “ Wikipedia https://en.wikipedia.org/wiki/Modular_design
12. http://s3images.coroflot.com/user_files/individual_files/196273_sUPk9iv_JftrlZlmeCETPZLfS.jpg
13. http://ecx.images-amazon.com/images/I/71G8mbuSlOL._SL1500_.jpg
14. https://thepeachreview.files.wordpress.com/2012/05/img_1945.jpg
15. https://c1.staticflickr.com/5/4025/4436381310_4cc857eecf_b.jpg
16. https://thepeachreview.files.wordpress.com/2012/05/img_1934.jpg
17. Benefits Cohesion
18. Benefits Cohesion UI/UX Patterns
19. Benefits Cohesion UI/UX Patterns Responsive Design
20. Benefits Cohesion UI/UX Patterns Responsive Design Browser Testing
21. Benefits Cohesion UI/UX Patterns Responsive Design Accessibility Browser Testing
22. Benefits Cohesion UI/UX Patterns Responsive Design Accessibility Browser Testing Perfomance
24. netflix.com
25. netflix.com
26. netflix.com
27. netflix.com
28. netflix.com
29. netflix.com
30. netflix.com
50. vv
51. vv
55. vv
56. vv
58. Why does this happen? Segregated departments Company merges/acquisitions Legacy code Tight deadlines Lack of reviews
60. Stop designing screens Start designing components
61. Atomic Design A methodology for creating design systems, with five distinct levels” “ Brad Frost, @brad_frost
62. “ http://bradfrost.com/blog/post/atomic-web-design/
63. Build faster (and easier) Sketch layouts with pre-built components.
68. Benefits Decrease design time Faster testing of ideas Quicker Stakeholder approval
69. How to start Use .classes instead of IDs Single Responsibility Principle Allow classes to combine Use variables Review everything
70. https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers?slide=41 Harry Roberts, @csswizardy
71. https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers?slide=41 Harry Roberts, @csswizardy
72. Use variables for size
73. Classes on typography
74. Use variables for colors
75. Use variables for colors
76. Use variables for colors
77. Media queries
78. Build tool https://www.npmjs.com/package/grunt-combine-media-queries
79. File organization Files based on components, 
 not screens alerts.less buttons.less forms.less
80. Use a grid http://getbootstrap.com/css/#grid
81. Grid classes
82. Grid classes http://neat.bourbon.io/examples/
83. Check outputted CSS Ensure outputted CSS is slim Ensure CSS follows conventions Build tools
84. CSS Methodologies
85. http://sassmeister.com/gist/657b64eb3c7bca6679e3 Show errors
86. Linters https://github.com/postcss/postcss-bem-linter
87. Linters https://www.npmjs.com/package/sass-lint
88. Review everything Variables used Writing syntax Component is reusable Reused component follows convention
89. Starting the style guide
90. Styleguide CSS Connect it to the outputted application CSS.
91. Living Styleguide http://cantina.co/styleguide/
92. Living Styleguide https://www.lightningdesignsystem.com/components/button-groups
93. Living Styleguide
94. Documentation Writing/syntax examples Show each combo Write for a n00b Don’t let it die Let it evolve
95. Writing Example https://github.com/airbnb/javascript
96. Component
97. Combos x1 https://www.lightningdesignsystem.com/components/buttons#brand
98. Combos x2 https://www.lightningdesignsystem.com/components/buttons#brand
99. Making changes Don’t make one offs Change components globally Create new class, if needed
100. Don’t make one offs
101. https://css-tricks.com/css-wisdom-from-goofus-and-gallent/
102. Refactoring Don’t be afraid Refactor everything Don’t take it personal Refactor often
103. Regression testing
104. Auto compare https://github.com/Huddle/PhantomCSS
105. Auto compare https://github.com/Huddle/PhantomCSS
106. Style guide audit https://github.com/straker/css-style-guide-audit
107. When to start regression After initial components are created Otherwise, you may go mad Try to test components, not screens
108. Deeper dive https://css-tricks.com/automating- css-regression-testing/ https://davidwalsh.name/visual- regression-testing-angular-applications https://css-tricks.com/visual-regression- testing-with-phantomcss/
109. Frameworks
110. Frameworks
111. Frameworks
112. Communication Make the styleguide public to team Give people freedom
113. Play nice with others The name ‘LEGO’ is an abbreviation of the two Danish words “leg godt”, meaning “play well”. http://www.lego.com/en-us/aboutus/lego-group/the_lego_history
114. Thank you. @mkivikoski cantina.co http://shop.oreilly.com/product/0636920035251.do