The document discusses the concept of modular design in front-end architecture, emphasizing its components such as atoms, molecules, organisms, and templates. It outlines the benefits of modular design for creating reusable and improved features in software development. The speaker, Mikael Stenstrand, addresses the challenges of integrating modular design into legacy applications using modern tools like npm and ReactJS.

1. Modular Design
In Practice!

2. Agenda
WHAT
WHY
HOW
YOU
Modular Design

3. Who?
Mikael Stenstrand
Front-end developer, software architect, development
processes, quality > code.length(), people > code

4. Modular Design?
Modular front-end architecture

5. Modular Design
www.patternlab.io
ATOMS MOLECULES ORGANISMS TEMPLATES

6. Modular Design
ELEMENTS COMPONENTS MODULES WIDGETS

7. Modular Design
WIDGETS

8. Modular Design
WIDGETS

9. The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
ELEMENTS
Buttons
Buttons
Buttons
+
-

10. COMPONENTS
Social Component
Image Component
Buttons
Type to search…
Button Component
Search Component

11. MODULES
NAME SURNMAE
AGE: X,xx
DIIBADAABA
Social ModuleProfile Module

12. WIDGETS
Contact
NAME SURNMAE
AGE: X.xx
RECORDS
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, ei
nec fabulas consulatu…
Profile Module
Text Component
Button Component
Social Module

13. Why?

16. Why?

17. WHY Lean Development
Element
Component
Module
Widget
Lean UX Book – Jeff Gothelf
Libraries Style guidelines

18. Lean Development
Lean UX Book – Jeff Gothelf
DEV
PO
UX

19. Distributed Development
Lean UX Book – Jeff Gothelf
WIDGETS
TEAM 1 TEAM 3
TEAM 2

20. In Practice – WHY
LEGACY
APPLICATION v. 2NEW FEATURES – WIDGETS
GOAL

21. In Practice – HOW
LEGACY
APPLICATION
NPM PRIVATE
WIDGETS
SHARED STYLES

22. Widgets
LEGACY
APPLICATION
NPM PRIVATE
Package Manager
Versioning
ES5
WIDGETS
ReactJS
ES6
Tests

23. Widgets
LEGACY
APPLICATION
NPM PRIVATE
var MyWidget = require('@org/widgets').MyWidget;
MyWidget(’div-id’, data);
INTEGRATE IN JAVASCRIPT

24. Widgets
LEGACY
APPLICATION
NPM PRIVATE
import {MyWidget} from '@org/widgets';
render() {
<MyWidget
data: [{…},{…}] />
}
INTEGRATE IN REACTJS

25. Modules
LEGACY
APPLICATION
NPM PRIVATE
WIDGETS

26. You & Modular Design
Elements library Style Guideline
Component library
Module library
Create new features

27. Modular Design
Modularize, Reuse and Improve!
Mikael Stenstrand
mikael.stenstrand@netlight.com