Modular design

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. ModularDesign
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. ModularDesign?
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
Loremipsumdolor sit amet, omnesquesententiaead
sed, causaepropriaemelex. Et idqueaeternovel, cu
clitaaliquidhis. Pro inermisperpetuapertinaciaea, ei
necfabulasconsulatu…
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
varMyWidget = 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. ModularDesign
Modularize, Reuse and Improve!
Mikael Stenstrand
[email protected]