Evolution of MALL.CZ web
Radim Štěpaník | teamleader | Web empire
🥅 Goal
Web Empire
⚡️Fast web - 📉 3s
💥 Break up monolith
🤖 Modern technologies
🤑 Money
👇
🥰 Happier customers
👇
🧹 Tech debt
🥰 Happier developers
🗿 Stability
Original web architecture
- millions lines of code
- hard to prepare local development environment
- still connected to original database
- do lots of stuffs
Web Empire
Transformation to JS application
git clone git@gitlab.mallgroup.com:qt/mal-mallweb.git
yarn // install dependencies
yarn dev // start application
- easy to run
- only JS and http calls
- should be faster
Web Empire
🐣 Not revolution but evolution
-
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
Web Empire
⚙️ Main parts of our work
🤩 Mall.cz
web
📊 Graphql API
📦 Library of
web components
⚙️ Infrastructure
Web Empire
🤩 Frontend technologies
Web Empire
-
Nuxt - universal application (Nuxt 3 in 6 days 🎉)
-
pros
- Vue.js
- SSR
- Code splitting
- Apollo
- Community support
-
cons
- router
- translations
-
pros
- Typescript (because makes sense with graphql)
- Fast Integration tests with cypress
Web Empire
⚡️Render optimization
🕺 Users
- hybrid rendering
- optimization for page load
- balance between what should be SSR and speed
- mobile vs desktop
🤖 Bots
- full server side rendering
- ~70 percent of resources for bots scraping
- rate limiting
Web Empire
📦 Web components
- storybook
- UI components
- without business logic
- from ⚛️ atoms - colors, fonts, icons to 🧠 molecules
- unit tests
- used by 5 teams
- not only for this project ❗️
Web Empire
📊 GRAPHQL
- client 👉 server
- graphql 👉 typescript
- apollo library
- call only necessary
- services
- cache layer
- server
- frontend - load once
Web Empire
📊 GQL Federation
- a collection of subgraphs
- how to split schema
- responsibility for data
category
xsell
Web Empire
📊 GQL Federation
- in production for one
service - problems of distributed
systems
category
product
xsell
Web Empire
💥 Circuit breaker
- communication with lot of services (not under our control)
- fail fast
- time for recovery
- alerting/monitoring
⚙️ Infrastructure
- OS 👉 Karaka 👉 Helm
- Mallweb - 190 pods | ~40 CPUs
- Release ~ 3 minutes
- up to 16 000 req/min
- Helm - 50 pods, 10 CPUs
- ~200 000 queries per minute
Mallweb
Urban
Web Empire
☢️ Alerting/Monitoring/Logs
- SMS
- Teams
- Dashboards
- Open tracing
⚙️ Opentracing
Web Empire
💯Numbers
📈~20 LPS 👉 50 - 70 LPS
😝 Better than alza
5+ s 📉 3 s
Web Empire
🙏 Thank you
sMALLtalk
By Radim Štěpaník
