Reducing the
Tech Stack
An empty Vue CLI project
- 20198 files
- 151.8 MB
... After build, it's still 100kb JS!
A simple Gulp setup
- Compile SCSS
- Create CSS Maps
- Minify JS
- 8220 files
- Modules dependencies
- Security risks
Let's go back in time (1993)
Perfect Filer 1.23
Released in 1983
- 261 KB
- ... but required 320 KB!
- And 128 KB of RAM!
We needed a GUI
- SQL Server - OS/2 only
- Microsoft Access 1.0
- Visual Basic for Applications
- MBs instead of KBs
With VBA you could (can) build
- A database application
- Custom forms
- Custom navigation
- Custom reports
- App Icon etc.
And 3 years later (1996) ...
Using the same database
- More than 50.000 comics
- More than 5.000 books
- More than 5.000 games, figures, films etc.
- More than 10.000 customers
21 years later ...
Hmm ...
We want a modern search experience
We can build it for 100.000
- Using WordPress
- Using a shop-plugin
- Using a payment plugin
With 100.000 products and more than 10.000 customers?
Nope
Active Server Pages
- Released in 1996
- Last stable release in 2000
- Succeeded by .Net in 2002
Supported 10 years from Windows 10 release
- ... that's 2025
- What if ...
- But ...
Splitting code into
- Modules
- Services
- Components
Making sure to
- Use Input sanitation everywhere
- Connection re-use
- Not to overuse session-objects
- Best practices ... from 2000 and onwards
But why not add
- Modern, semantic, 100% valid markup
- Structured markup
- Google search snippet
- Mega-menu
- Autosuggest
Why not add ...
- Google Analytics Enhanced Ecommerce
- Product impressions
- Detail-click
- Detail-impressions
- Add-to-basket transaction
- Remove-from-basket transaction
- Purchase transaction
And while we're at it ...
- Google Merchant Feed
- Facebook Business Feed
And tweak performance and accessibility ...
Let's recap
- Complete re-write of "backend" code, into: Modules, services and components
- Complete re-write of HTML (no <table>!)
- Complete re-write of CSS
- Complete re-write of JS
- Structured, semantic and valid markup
- Google search snippet
- Google Enhanced Ecommerce integration
- Google Merchant and Facebook Business integration
- Structured, measurable goal-friendly checkout-flow
- Performance optimizations
- A11y check
- ... and much more!
And how long did it take (only one developer)?
- 6 months
- 3 months
- 1 month
- 1 week
And the credit goes to
The reduced Tech Stack
Re-usable components, not depending on any framework
The Tech Stack:
- HTML5 / ASP*
- CSS3
- JS (EcmaScript 5)
*) Some quirks needed in order to setup ASP initially on IIS.
With a single developer,
you get:
- Just the Tech Stack you want
- No "that's not possible" from a BE-developer
- No "Can you add a 2px box-shadow" from a designer
- No UX-discussions
- No JIRA
- No Project Manager
- No Scrum Master
- etc.
But this won't work in
the real world!
- Simplifying the FE process / tooling / setup
- Have a simple setup for quick prototypes
- Teach new FE's the basics first, then the libraries and frameworks
- Do we really need library X for simple stuff?
You're right, but we could look into:
Thank you
Reducing the tech stack
By Mads Stoumann
