Thinking in components

Components and Web Components

Transcript

1. Thinking in components
2. An introductory story:
3. An introductory story: B f !
4. An introductory story: B f !
5. Agenda: 1. 2.
6. ➔ Web development now and then
7. ➔ Web development now and then 2011
8. Components Web Components
9. Components - DOM conflicts Web Components
10. Going back to our little story: *
11. Going back to our little story: *
12. Conventions & Methodologies
13. Conventions & Methodologies • •
14. Conventions & Methodologies
15. Agenda: 1. 2.
16. ➔ Past development analysis
17. a-B.E.M ➔ Past development analysis
18. Atomic Design • Aimed towards both designers and developers • Provides a system for composing components • Offers a tool for keeping track of components
19. Designers and developers The Component concept needs to be mastered by both departments. Bridging the gap between design and development is more important now than ever.
20. A system for composing components Atomic Design brings us a few “new” terms, inspired from chemistry. Combining lesser stages result in greater stages (e.g.: atom + atom = molecule) Atom Molecule Organism Template Page
21. Atoms In Chemistry, atoms are the basic building blocks of matter. In Web Interfaces, atoms are the building blocks of an interface. Atoms cannot be broken down any further. Often, atoms aren’t too useful on their own. e.g.: input, image, button
22. Molecules In Chemistry, molecules are chemically joined atoms. Also, they represent the smallest unit of a compound. In Web Interfaces, molecules consist of two or more atoms. They are the backbone of a more complex system. e.g.: search bar = label + input + button
23. Organisms In Chemistry, organism are complex systems of chemical compounds. The molecule is the smallest unit of a compound*. In Web Interfaces, organisms are a group of different or the same type of molecules. e.g.: header = logo + search bar + menu *the compound is probably missing from the Atomic Design terminology as there was no need for an extra level of component complexity
24. Templates The Chemistry lessons end here. Templates are wireframes, comprised of groups of organisms. They eventually become the production code. e.g.: homepage template = header + hero banner + article(s) + footer
25. Pages An atomic design Page is a specific instance of a template. The template content is replaced with real/sample content. Variations of the content will help identify corner cases and the effectiveness of the system.
26. All together demo https://vimeo.com/174472797
27. Keeping track of components Applications evolve in time. We develop new pages, with new components and with new functionality. It is important to index all components.
28. Enter PatternLab PatternLab is an open-source tool. It’s purpose is to help us build user interfaces in a pattern manner based on the atomic design principles. It provides several tools to ease our work: • a pattern starter kit • a design system builder • a viewport resizer PatternLab comes in several editions: Node, Gulp, Grunt, Webpack and PHP
29. Block Element Modifier (B.E.M.) • Conceived for developing the Yandex search engine with minimum effort • Solid naming conventions • Improves code readability • Offers a series of tools
30. B.E.M. timeline Started in 2005 Open Sourced in 2010 Launched in 2009
31. Blocks A block is a top-level abstraction of a new component. The block is thought of as a parent. The block’s name can have multiple words separated by 1 hyphen. e.g.: section-promo
32. Elements Elements are the children of blocks. An element’s name is prefixed by the block and double underscore. e.g.: section-promo__banner, section-promo__title
33. Modifiers Modifiers are meant to manipulate the blocks in order to theme or style the particular component without inflicting changes on another module. A modifiers name is prefixed by the block and double hyphens. e.g.: section-promo--active
34. Short recap: .block__element--modifier
35. All together demo https://codepen.io/razvan-rosu/pen/MQqVKv
36. B.E.M. + preprocessors = <3 B.E.M. methodology results in having less CSS selectors, therefore our styles become much cleaner. By introducing a preprocessor into our application build, we take it one step further: component scoping. https://codepen.io/razvan-rosu/pen/QQVrQJ
37. Atomic Block Element Modifier (a-B.E.M.) An unofficial fusion between Atomic Design and B.E.M.
38. Atomic design prefixes .[a/m/o]-block__element--modifier
39. Improved readability (lisp-case => camelCase) B.E.M. a-B.E.M.
40. Refactored demo https://codepen.io/razvan-rosu/pen/bLmpVO
41. Thank you! Questions ?
42. References: Atomic design: Atomicdesign.bradfrost.com patternlab.io B.E.M.: en.bem.info/methodology getbem.com a-B.E.M.: css-tricks.com/abem-useful-adaptation-bem Design systems: http://ui-patterns.com/patterns