Mario Nebl
Technical Director - Web Engineer - Nerd @SinnerSchrader Hamburg
patternplate
Develop frontend components the npm(-ish) way
Build stuff that enables people to do new things
Enableing (principle for invention - see Bret Victor)
This talk
- [x] It'se me, Mario
- [ ] This talk
- [ ] A (very) brief primer on Atomic Design
- [ ] An (even shorter) mention of Living Styleguides
- [ ] What patternplate actually is
- [ ] What patternplate can do for you
- [ ] QA
This talk
- [x] It'se me, Mario
- [x] This talk
- [ ] A (very) brief primer on Atomic Design
- [ ] An (even shorter) mention of Living Styleguides
- [ ] What patternplate actually is
- [ ] What patternplate can do for you
- [ ] QA
A (very) brief primer on Atomic Design
/ Coined by Brad Frost
/ Way to describe your frontend in a modular fashion
/ Teach everyone in a project to talk about the same things
Atoms → Molecules → Organisms → Templates → Pages
An (even shorter) mention of Living Styleguides
/ Bound to replace PDF styleguides
/ Try to evolve with the project they document
/ Show things PDF styleguides can not: animation, transition
/ Great for documentation of Atomic Design projects
What patternplate actually is
/ Development server
/ Living Styleguide interface
/ Component dependency manager
/ Customizable build tool
/ Universal React application
/ Open Source
https://github.com/sinnerschrader/patternplate
DEMO
/ Full dependency tree
/ Demo and library code
/ Presentation of frontend components
/ JSX Templates
/ Creation of arbitrary build artifacts
What patternplate can do for you
/ Static export of client (throw it at Apache)
/ Full integration of stateful React components
/ CSS Modules
Roadmap
QA
- [x] It'se me, Mario
- [x] This talk
- [x] A (very) brief primer on Atomic Design
- [x] An (even shorter) mention of Living Styleguides
- [x] What patternplate actually is
- [x] What patternplate can do for you
- [ ] QA
Thank you
patternplate
By Mario Nebl
patternplate
Develop frontend components the npm(-ish) way
