Netlighter Mikael Stenstrand presentation at Edge Academy 2016 in Helsinki. Modular design is all about modularizing the front-end of an application to increase code reusability and ease the development of new features. Additionally, the tools created will support the communication between UX and developers. © All rights reserved.

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