Radim Štěpaník
👀 CTO
👷 Teamleader
👩💻 JS developer
🎤 Moderátor
🎸 Kytarista
👨👧 Rodič
(snad lepší než kytarista)
🎧 Listen on spotify
🐦 Follow me on twitter
kinapets
QCAST
🤩 Mall.cz
web
📊 Graphql API
📦 Library of
web components
⚙️ Infrastructure
Implement non visible things
Webadmin - integration shopconfig
Feature flags
Translations
Fail fast
Smooth and fast fallback - SPA vs monolith
Page type by page type
Implement things which we don't want
Release - with monolith is easier
page load performance - html vs JS app
every page is completely new html file
Harder, better, faster, stronger
Old way
New way
search
customer
cart
bestsellers
banners
menu
category
products
filters
content
# Calls category
getCategory(categoryUrl: $categoryUrl) {
id
howto
# Calls content service
... on ContentCategory {
content {
id
title
body
}
}
# Calls product service
... on ProductCategory {
productCollection {
items {
... on Product {
...productForList
}
# Calls estimated delivery service
... on BonusSet {
estimatedDeliveries {
...productEstimatedDeliveryFragment
}
}
# Calls banners service
... on SectionBannerSlideImage {
...sectionBannerSlide
}
}
}
}
}
@Component<CampaignContent>({
apollo: {
getCampaign: {
fetchPolicy: 'cache-and-network',
query: GET_CAMPAIGN_CONTENT,
result(res: Result) {
return res.data?.getCampaign
},
variables() {
const campaignId = this.campaignId
const isBefore = this.isBefore
return {
campaignId,
isBefore,
}
},
},
},
components: { DynamicContent, NotFoundErrorHandler },
})
export default class CampaignContent extends Vue {
@Prop(String) campaignId: string
@Prop({ default: true, type: Boolean }) isBefore: boolean
getCampaign: GQLCampaign
}