ReactFoo Mumbai - How initial designing helped a small team @Agrostar helped deliver apps quickly

This is about how is CSS hard to maintain and how styled-components makes job easy. Using yarn-workspaces, we can share part of the code with other projects.

Transcript

1. How initial designing helped a small team @AgroStar deliver apps quickly ~ Basavaraj Sonnad
3. HTML CSS JS design.forEach(page =>
4. PIXEL MATCHING PHASE
5. Example
6. Lets change Section heading to “40px” How come the Modal Heading style changed ? global.css
7. Side Effect
8. CSS is HARD CSS is HARD Lets make it simple
9. Revamp Phase
10. import styled from “styled-components”; const AgroLabel = styled.label` color: #000; margin: 0; font-size: 20px; ` styled-components(css-in-js)
11. import styled from “styled-components”; const AgroLabel = styled.label` color: #000; margin: 0; font-size: 20px; ` styled-components(css-in-js)
12. import styled from “styled-components”; const AgroLabel = styled.label` color: #000; margin: 0; font-size: ${props => { const agSize = props.agSize || "default"; return props.theme.fonts[agSize]; }} ` styled-components(css-in-js)
13. <AgroLabel>React Foo</AgroLabel> React Foo Font-size: 20px(default)
14. <AgroLabel agSize=“md”>React Foo</AgroLabel> Font-size: 25px(medium) React Foo Font-size: 25px(medium)
15. Now we like CSS
16. styled label.js button.js table.js panel.js input.js theme.js • Themeing • SSR • Global styling • Isolated and collocated • Remember this is a subdirectory • inside main project
17. New Project Idea Project Manager Developer No! No! No! We can’t write CSS altogether again
18. styled label.js button.js table.js panel.js input.js theme.js • Themeing • SSR • global styling • Isolated and collocated • Remember this is a subdirectory • inside main project Can we reuse this ?
19. YARN WORKSPACES https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/
20. Setup - step 1 1. yarn config set workspaces-experimental true
21. Setup - step2 { "name": "react-foo-demo", "version": “0.0.1", "dependencies": { .. } } package.json
22. Setup - step2 { "name": "react-foo-demo", "version": “0.0.1", "private": true, "workspaces": [ "packages/**" ], "dependencies": { .. } } package.json
23. app/ package.json packages/ repo1/ package.json repo2/ package.json Monorepos Sample directory structure
24. app/ package.json node_modules/ packages/ repo1/ package.json repo2/ package.json Monorepos Sample directory structure
25. DEMO
26. npm install agro-styled-components https://github.com/basav22/agro-styled-components https://basav22.github.io/agro-styled-components/ https://codesandbox.io/s/5xv9q9z7y4 And we published…
27. Takeaways 3. Yarn workspaces get you out of the ../../ hell 4. Yarn workspaces lets you write code in decoupled way 5. Easy debugging 2. Yarn workspaces: Easy code sharing Takeaways 1. Using styled-components, CSS made EASY
28. @basavaraj_sonnad github.com/basav22 My DM is open. Say Hi