Building resuable and customizable Vue components

Customization-first
Vue components
Lessens learned from building Storefront UI
Filip Rakowski Co-founder @ Vue Storefront @filrakowski

Storefront UI
storefrontui.io
github.com/DivanteLtd/storefront-ui

Why it’s good to
have component
library?

Save time on creating common UI elements

Save time on learning conventions behind UI logic

Save time on figuring out this conventions for every project

Save time on documenting UI components

Help with good accessibility

Help with avoiding bugs

Help with avoiding bugs
Help with partially separating business logic from UI logic

So why we still build
a lot of things from
scratch?

Problem with
component libraries

Let’s build UI library!
…and see what problems with
components customization we can
encounter

Problem #1
What exactly we are
making? Why?

Goals
What problem we are trying to solve?
Faster prototyping / Ability to reuse UI
atoms (buttons, inputs etc) / Having
common design system across all the
projects to omit a lot of groundwork
Who is gonna use this?
Everyone / Whole company / One team?
How they’’re gonna use this?
Copy whole pages and modify / Build
websites from scratch / Customize only
colors / Customize whole designs ?

Problem #2
How to deliver 
components to the user?

Option 1
Deliver as a Vue plugin
+ Easy to understand
+ Simple installation
+ Abstraction over „installation"
process

Option 1
Deliver as a Vue plugin
+ Easy to understand
+ Simple installation
+ Abstraction over „installation"
process
- Limiting in customization
- Bad for performance (unless
you do a lot of hacks)
- Feels more distant from the
source code
- Abstraction over „installation"
process
Good tutorial on this by Linus borg
https://github.com/LinusBorg/talks/tree/master/2019-02-15%20Vue.js%20Amsterdam

Option 2
Ship „raw” source
+ Full control over imported
files
+ Great for performance
+ Better understanding of what
you’re importing
+ Direct interactions with
objects
+ No need to think about build-
time optimization and polyfills
while shipping the lib

Option 2
+ Full control over imported
files
+ Great for performance
+ Better understanding of what
you’re importing
+ Direct interactions with
objects
+ No need to think about build-
time optimization and polyfills
while shipping the lib
- Requires build step on the
application level
- Requires more knowledge
about the project itself
- A bit harder to use

Option 2
Use CopyPlugin to deliver
„production” raw sorce:
- Flatten files tree
- Ignore development-only
files
- Update imports
VS

Problem #3
Which components
should we create?

Think in Atoms
Having reasonable amount of granular (atomic)
components ensures that library can be used in almost
any context.
Instead of providing complex components specific for
some context provide context-less granular atoms that
everyone can use in any way they want.
Start with a complex component and figure out which of
it’s parts could be reusable atoms. With each new
component you’’ have less atoms to

Problem #4
How to customize
components globally?

Start with a
style guide
Style guide is a great starting point
for every project.
Define a style guide with available
colors, font sizes, headings, fonts,
spacings etc.
If possible use only those values in
components.
By doing this you can easily follow
same conventions in all of your
components.

Start with a
style guide
Make CSS/SCSS variables from
this style guide and make them
easily overridable (for example
with SCSS !default
Refer to this variables in your
components

Use one
config file
Then you can make it much easier
for others to share and reuse their
configuration

Problem #5
How to customize individual
components?

Props
Props are great if we want to
customize component for specific
use case.
They are not so good for a very
generic components though.
Props are perfectly suitable for
tasks like filling text blocks/
attributes, providing sources for
images and icons, changing
component behavior etc.

Don’t overuse props!
The main problem with props is that we tend to use
them for everything even if it doesn’t make sense and
end up with Button component having 20 props…
Don’t use props to fulfill more use cases or make
component more generic then it should.
Atoms in most cases should have either 1-3 props or
a slot.
If you have more you probably overcomplicate
stuff.
Remember that every prop is API - too many of
them makes it hard for people to be „fluent” in your
library,

Don’t use props for
CSS classes
Using props for purely CSS-related
changes is: bad for many reasons
including:
- It adds abstraction layer that
gives you absolutely nothing in
return
- It;’s harder to understand what is
happening therefore to debug/
customize component
Bad
Good

Don’t use props for
CSS classes
If some modification is done
purely in CSS don’t make
meaningless abstraction

Don’t use props to
fulfill another use
case
If you try to fulfill more and more
use cases with props maybe it’s
better to provide a slot and leave
fulfilling different use cases to
developer.s
Props are great because they give
a lot out of the box but if you cut
on customization in return it’s
usually not worth it.
Bad
Good

Slots
The best way to make
components really generic and
context-less is to use slots.
Users can pass any content they
want inside of it so there are no
direct limitation as with props.
We cut a little bit of out-of-the-
box experience but got a lot of
customization in return.

Props & Slots
You can use slots in combination
with props to make components
easy to use out of the box while
keeping them generic and highly
customizable at the same time.
Divide your components template
into sections and use them as
default slot content.
Users can replace those sections
with their own HTML if they need
to.
Btw - Imagine fulfilling every use
case here with just props

Props & Slots
You can use slots in combination
with props to make components
easy to use out of the box while
keeping them generic and highly
customizable at the same time.
Divide your components template
into sections and use them as
default slot content.
Developers can replace those
sections with their own HTML if
they need to.
Btw - Imagine fulfilling every use
case here with just props

Revenue
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id
est laborum.
200%
lorem ipsum dolor
68%
lorem ipsum dolor
184%
lorem ipsum dolor

Presentation Title
What I learned after doing
Magento PWA for 1,5 year
Speaker
Name
Position @ Vue Storefront @nick @nick

Agenda
16:00-16:15  
Introduction
16:15-16:30  
Goals
16:30-16:50  
Progressive Web Apps
16:50-17:20  
Vue Storefront
17:20-17:30  
Podsumowanie

This text is a little
introduction to
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id
est laborum.
This one

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
This one
magna aliqua.
This one
magna aliqua.
This one

incididunt ut labore et dolore magna aliqua.
THIS ONE
SECOND ONE
THIRD ONE HERE

Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
et
This one
et
This one
et
This one

COMMUNITY
800 3300 85
COMMUNITY
MEMBERS
GITHUB
STARS
CONTRIBUTORS

Here you can show
future plans
2018
2019 2020

What if you want
to present few
ideas like
This feature
And this
And that one

That’s how you
use images
If you really have to.

Also this is  
how we do it
consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna

And what about this. Pretty cool huh?
consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna

from Singapore
nomosreddot.thehourglass.com

2014
ComScore
MOBILE TRAFFIC
Business Insider
MOBILE PAYMENTS
Outerbox design
MOBILE FIRST DESIGN
45% 80%

Building resuable and customizable Vue components

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Building resuable and customizable Vue components

Similar a Building resuable and customizable Vue components (20)

Último

Último (20)

Building resuable and customizable Vue components