Writing & Evolving Hootsuite’s UI

Ideology, Methodology and Implementation

Presented at CodeCore | February 19th 2015

Transcript

1. Writing & Evolving Hootsuite’s UI Ideology, Methodology and Implementation
2. internet.com/@stevemynett
4. CAUTION!!!
5. Overview 1. CSS in Single Page Applications 2. Components 3. Ideology 4. Methodology 5. Implementation Brad Westfall - CSS Methodologies
6. CSS in Single Page Applications (SPA)
7. – Pete Hunt “All the problems you have with CSS get 10X worse when you write Single Page Applications. Any or all of your CSS may get loaded at any time; and in any order ” Pete Hunt - How Instargram Works
8. Single Page App • We only want to download the assets that we need at any point in time • Subsequent assets should not be downloaded unless required with no duplicates • Want to reuse the assets we have already downloaded
9. CSS in SPA’s • Specificity Wars • Random Cascade • Hard to remove code • Unknown dependencies for UI Components
10. h2 {} .home #sidebar .widget h2 {} #content h2 {} .contact .module h2 {}
12. Components
13. https://twitter.com/stubbornella/status/455516290300407808
14. Expectations • Portability • Encapsulation • Eliminate Engineering overhead
16. Components • Self Contained • Small • Encapsulated • Building Blocks
17. React.JS
21. React.js • Define and render components • Components are reusable • Define and trace dependancies
22. Ideology
23. An ideology is a set of conscious ideas which constitute one's goals, expectations, and actions. An ideology is a comprehensive normative vision, a way of looking at things. Wikipedia
24. Ideology • All Components are universal • All Components are encapsulated
28. Ideology • All Components are universal • All Components are encapsulated
29. Methodology
30. There is no special or unique CSS or preprocessor magic that happens with a Methodology. It's a re- conceiving of how organize and think of writing CSS.
31. Design Principles • Single Responsibility • Extension over Modification • Composition over inheritance • Avoid Dependencies • Encapsulation Adapted from Nicholas Gallagher - SuitCSS
36. Extender Example
39. Implementation
40. Techniques should be adopted that allow an engineering team to work faster, and more consistently
41. LESS @ Hootsuite • Nesting • Variables • Mixins • Import • Parent Selectors • Colour Functions (Operation and Blending Functions)
43. Variables • Only for values (not selectors or properties) • Exception is media query strings • Only use for global values • Never use for scoped sections/components
44. Variables • Font Family: Every font family string • Colours: Every colour • Media Queries: both responsive and HiDPI • Z-Index: with z-index mapping • Font size & line-height
50. Putting it all together with React
51. React.js • Define and render components • Components are reusable • Define and trace dependancies
52. A React Component • Everything is a React component • A specific React component contains only a uniqueComponentName and related descendants and extenders. • Contains and defines 
 dependancies for that component
54. CAUTION!!
55. Caveat?
59. Conclusion
60. CSS in SPA’s • Specificity Wars: Unique Component Names • Random Cascade: Encapsulation & TK • Hard to remove code: Trace dependancies • Unknown dependencies for UI Components: Scope them to individual components
61. Wrap-up 1. CSS in Single Page Applications 2. Components 3. Ideology 4. Methodology 5. Implementation Brad Westfall - CSS Methodologies
62. Ideology • All Components are universal • All Components are encapsulated
63. Thank you! @stevemynett mynettworks.com/codecore2015