Reducing the
Tech Stack

An empty Vue CLI project

• 20198 files
• 151.8 MB

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 ...

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 Tech Stack:

• HTML5 / ASP*
• CSS3
• JS (EcmaScript 5)

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?

Thank you