modular design
TRANSCRIPT
![Page 1: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/1.jpg)
Modular DesignIn Practice!
![Page 2: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/2.jpg)
Agenda
WHAT
WHY
HOW
YOU
Modular Design
![Page 3: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/3.jpg)
Who?Mikael StenstrandFront-end developer, software architect, development processes, quality > code.length(), people > code
![Page 4: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/4.jpg)
Modular Design?Modular front-end architecture
![Page 5: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/5.jpg)
Modular Design
www.patternlab.io
ATOMS MOLECULES ORGANISMS TEMPLATES
![Page 6: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/6.jpg)
Modular Design
ELEMENTS COMPONENTS MODULES WIDGETS
![Page 7: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/7.jpg)
Modular Design
WIDGETS
![Page 8: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/8.jpg)
Modular Design
WIDGETS
![Page 9: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/9.jpg)
The quick brown foxThe quick brown foxThe quick brown foxThe quick brown fox
ELEMENTSButtons
Buttons
Buttons
+
-
![Page 10: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/10.jpg)
COMPONENTS
Social Component
Image Component
Buttons
Type to search…
Button Component
Search Component
![Page 11: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/11.jpg)
MODULES
NAME SURNMAEAGE: X,xxDIIBADAABA
Social ModuleProfile Module
![Page 12: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/12.jpg)
WIDGETS
Contact
NAME SURNMAEAGE: X.xxRECORDS
Lorem ipsum dolor sit amet, omnesque sententiae ad sed, causae propriae mel ex. Et idque aeterno vel, cu clita aliquid his. Pro inermis perpetua pertinacia ea, einec fabulas consulatu…
Profile Module
Text Component
Button Component
Social Module
![Page 13: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/13.jpg)
Why?
![Page 14: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/14.jpg)
![Page 15: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/15.jpg)
![Page 16: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/16.jpg)
Why?
![Page 17: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/17.jpg)
WHY Æ Lean Development
Element
ComponentModuleWidget
Lean UX Book – Jeff Gothelf
Libraries Æ Style guidelines
![Page 18: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/18.jpg)
Lean Development
Lean UX Book – Jeff Gothelf
DEV
PO
UX
![Page 19: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/19.jpg)
Distributed Development
Lean UX Book – Jeff Gothelf
WIDGETS
TEAM 1 TEAM 3
TEAM 2
![Page 20: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/20.jpg)
In Practice – WHY
LEGACY APPLICATION v. 2NEW FEATURES – WIDGETS
GOAL
![Page 21: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/21.jpg)
In Practice – HOW
LEGACY APPLICATION
NPM PRIVATE
WIDGETS
SHARED STYLES
![Page 22: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/22.jpg)
Widgets
LEGACY APPLICATION
NPM PRIVATEPackage ManagerVersioningES5
WIDGETS
ReactJSES6Tests
![Page 23: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/23.jpg)
Widgets
LEGACY APPLICATION
NPM PRIVATE
var MyWidget = require('@org/widgets').MyWidget;
MyWidget(’div-id’, data);
INTEGRATE IN JAVASCRIPT
![Page 24: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/24.jpg)
Widgets
LEGACY APPLICATION
NPM PRIVATE
import {MyWidget} from '@org/widgets';
render() {<MyWidget
data: [{…},{…}] />}
INTEGRATE IN REACTJS
![Page 25: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/25.jpg)
Modules
LEGACY APPLICATION
NPM PRIVATE
WIDGETS
![Page 26: Modular design](https://reader033.vdocuments.us/reader033/viewer/2022042706/588071041a28ab64028b52dd/html5/thumbnails/26.jpg)
You & Modular Design� Elements library Æ Style Guideline
� Component library
� Module library
� Create new features