Download to read offline
Komponenty v kaskákdě
- 1. Komponenty v kaskádě Reactisti- Praha, Prosinec 2015
- 2. Filip Mareš Principal SoftwareEngineer Monster Worldwide @etylsarin
- 3. Komponenty kam se podíváš „UIby se měly skládat z opětovně použitelných komponent s dobře definovaným rozhraním“
- 4.
- 5. CSS a komponenty Christopher“vjeux” Chedeau React: CSS in JS
- 6. 7 „problémů“ CSS •Všechno je v globálním namespace • Závislosti • Eliminace mrtvého kódu • Minifikace • Sdílení konstant • Umístění ve stylopisu hraje roli • Izolace
- 7. CSS v JS In-linestyly FTW!
- 8.
- 9. Cascading Style Sheets • Selektor≠ proměnná • CSS vzniklo v době webových stránek a dokumentů
- 10. 7 „problémů“ CSS •Všechno je v globálním namespace • Závislosti • Eliminace mrtvého kódu • Minifikace • Sdílení konstant • Umístění ve stylopisu hraje roli • Izolace
- 11. Nevýhody CSS vJS • Globální styly • Použití stávajících knihoven • Styly pro různé prohlížeče / uživatele • Svázání konkrétního vzhledu s komponentou • Svázání konkrétní technologie s komponentou
- 12. Nevýhody in-line CSS •(Ne)ukládání do mezipaměti • Velikost HTML hraje roli • :hover/:focus/:active • Media queries (@ pravidla) • CSS Animace • Stylování pro různé prohlížeče • DevTools / SourceMaps
- 13.
- 14.
- 15.
- 16. Ideální řešení • Sass,Less, nebo PostCSS syntaxe • Nezávislé na frameworku • Nezávislé na CSS názvosloví • Žádná extra režie při renderování stylů na klientu
- 17. Jak si zvolitkonvence? • Velikost projektu • Externí knihovny • Časová náročnost • Don’t Repeat Yourself • Modifikace • Izolace
- 18.
- 19.
- 20.
- 21. Kam dál? • ReactNative • Shadow DOM • MSS ?
- 22.
- 23. Reference • https://github.com/MicheleBertoli/css-in-js • https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ •https://medium.com/@jviereck/modularise-css-the-react-way- 1e817b317b04 • http://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/ • http://glenmaddern.com/articles/interoperable-css • https://medium.com/seek-ui-engineering/the-end-of-global-css- 90d2a4a06284
Editor's Notes
- #4 S komponentama se v poslední době roztrhl pytel Polymer má custom elementy Angular má direktivy W3C má Web Components React má komponenty V dokumentaci Reactu se dokonce dočteme, že … React a JSX?
- #5 React a JSX! Sloučení HTML a JavaScriptu dává smysl
- #6 Konec 2014
- #7 Nelze aplikovat pouze na určitou část markupu CSS v čase narůstá Může přinést řadu problémů např. při asynchronním načítání
- #8 Celá komponenta je pohromadě Nechce vytvořit dogma, ale otevřít debatu
- #9 Michele Bertoli Drtivá většina převzala myšlenku Chrise
- #10 Je opravdu chyba v návrhu CSS? První návrh koncem roku 1994 IE 3 a Netscape Navigator 4 měly dost úděsnou implementaci CSS Reálné nasazení CSS přišlo s IE 4 (koncem roku 1997) CSS parser je rychlej JavaScript bylo v té době sprostý slovo
- #11 BEM / SUIT Dobrá architektura uncss Gulp / WebPack / gzip SASS / LESS / PostCSS Dobrá architektura / zvýšení specificity OOCSS Testování…
- #12 Kam patří normalize? A co typografie? … Co komponenty, které budeme chtít použít na jiném projektu, nebo publikovat na internetu? Pokud do nich nacpeme CSS, nutime ostatni, aby pouzivali to samy reseni.
- #13 How do you do :hover/:focus/:active in inline styles? You don't. You fake it.
- #14 ES7 decorator, používá css-loader … Mark Dalgleish - Dokumentace “standardu”, postcss moduly, příklady použití s webpackem, browserify a jspm Rozšíření téhož
- #15 css-loader je webpack loader pro css
- #17 no extra dependencies can be used with React, Angular, Ember can use BEM, SUIT Takže ideální řešení je vlastně hlavně o nastavení a dodržování konvencí
- #18 Kolik lidí bude zároveň na stylech pracovat? Kolik času bude potřeba na přípravu dev stacku VS kolik času tím potenciálně ušetříme do budoucna při psaní nových komponent? Jaké externí knihovny se budou používat? Bootstrap ani GMD nepoužívá BEM/SUIT Jak moc mi danné řešení umožní reuse stylů? Umožní mi danné řešení odlišit konkrétní instanci komponenty od ostatních? Můžu v případě potřeby ovlivnit např. sourozence?
- #19 Harry Roberts Převrácený trojúhelník
- #20 Settings: Global variables, config switches. Tools: Default mixins and functions. Generic: Ground-zero styles (Normalize.css, resets, box-sizing). Base: Unclassed HTML elements (type selectors). Objects: Cosmetic-free design patterns. Components: Designed components, chunks of UI. Trumps: Helpers and overrides.
- #22 v React Native jsou pouze inliny styly Shadow DOM umožňuje zapouzdření JavaScriptu, CSS a šablony do Web Componenty. Modular Style Sheet