patternplate

Develop frontend components the npm(-ish) way

/ Frontend Developer

/ SinnerSchrader

/ Initial author of patternplate

 

 

 

      marionebl          @marionebl

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

  • 1,615