Context of the project

My.PORTAL is a customizable web platform which is instantiable for various domains like cities, companies and schools.

The Backend

• Microservices primarly with .NET
• In the past RESTful
• Almost shifted to GraphQL

The Frontend

• Monolithic Vue-Application
• Modularized App Dependencies

Challenges of the Frontend

1. Redundant CSS Definitions

								.main-header
									+make-container

								.site-nav
									+make-row
									&__item
										+make-col-ready
										+make-col(4)
							

								.user-list-section
									+make-container
	
								.user-list
									+make-row
									&__item
										+make-col-ready
										+make-col(4)
										+md\-
											+make-col(6)
										+sm\-
											+make-col(12)
							

							.main-header {
								width: 100%;
								padding-right: 15px;
								padding-left: 15px;
								margin-right: auto;
								margin-left: auto;
							}
							
							.user-list-section {
								width: 100%;
								padding-right: 15px;
								padding-left: 15px;
								margin-right: auto;
								margin-left: auto;
							}
							
							.site-nav {
								display: flex;
								flex-wrap: wrap;
								margin-right: -15px;
								margin-left: -15px;
							}
							
							.user-list {
								display: flex;
								flex-wrap: wrap;
								margin-right: -15px;
								margin-left: -15px;
							}
							
							.site-nav__item {
								position: relative;
								width: 100%;
								padding-right: 15px;
								padding-left: 15px;
								flex: 0 0 33.33%;
								max-width: 33.33%;
							}
							
							.user-list__item {
								position: relative;
								width: 100%;
								padding-right: 15px;
								padding-left: 15px;
								flex: 0 0 33.33%;
								max-width: 33.33%;
							}
							
							@media (max-width: 991.98px) {
								.user-list__item {
									flex: 0 0 50%;
									max-width: 50%;
								}
							}
							
							@media (max-width: 767.98px) {
								.user-list__item {
									flex: 0 0 100%;
									max-width: 100%;
								}
							}
						

2. Unused CSS Classes

3. Property Hell

• Properties which had been introduced for only one-time usage
• Properties which are piped through different components

4. Component-Management

• Atomic Design Classification Problems
• One-Time Components are blowing up category-directories

							// Component patterns/Navbar.vue imports:
							import NavTab from '../../molecules/Navigation/NavTab.vue'
							import NavTabButton from '../../molecules/Navigation/NavTabButton.vue'
							// both are only used by Navbar.vue and 
							// therefore polluting /molecules 
						

5. Post-Modularization

6. Manual Component Documentation

• requires effort for developers
• developers are lazy

7. Dependency of portal-config in portal-global-components

• portal-config: A Portal-Konfiguration File
• pattern library therefore not usable in other projects
• maintanance of two repositories when configuration changes

Development of the new Component Library

Requirements

• Introduction of Tailwind CSS
• Isolated component development
• Automatic documentation of components
• Easy component management

Possible Frameworks

• Vue-Styleguidist: Code commentaries generating a documentation
• Vue Design System: Relies on Vue-Stylguidist, introduces an alternative to default atomic design:
  Design Tokens, Elements, Patterns, Templates
• Storybook.js: Strong Foundation with alot of Plugins. Documentation via File-Imports.

Descision: Storybook.js

• Storefronts (Vue-Styleguidist): Represenation of the whole Design System
• Workshop (Storybook): Envoirment for creating components
• Requirements more workshop-related
• But with usage of terminologies from Vue Design System

> Demo of Repository

Introduction of
Tailwind CSS

“While the utility-class-focused approach of new frameworks like Tailwind CSS make you question everything you know about writing “proper” semantic CSS, its 81% satisfaction ratio means that it might be time to reconsider our old preconceived notions...”

General Pros

• Algolia decreased their css size by 60%
• Adaptability
• Controllable file size
• PurgeCSS
• Compression capabilities

My.PORTAL Chances and Risik

> Demo of Repository

Results

Improvements

• Mixin alone was effecting +34kB
• Now Tailwind CSS equivalent: +3,9kB
• No complete frontend shift to tailwind yet, expecting same improvements like Agolia
• CSS classes getting pruged
• Property Hell only partially improved: Slot design introduces further improvements
• CSS easily post-modularizable, Script still hard
• base tailwind.config.js much more adaptable then portal-config
• developers like the tailwind style over sass

Confirmed Risks

• Bootstraps reboot.scss vs Tailwinds reset.css
• Third-Party Plugin Styles vs PurgeCSS
• Node v12 upgrade still not possible as node-sass still exists in My.PORTAL

Further Observations

• Debugging: Utilities in markup are making it harder to identify specific sections.
• Longer Build Time caused by PurgeCSS

Outlook: Vue.js Version 3

Most relevant modification: Composition API

• Alternative to the Options API
• Composables are categorzied by context
• helps to understand complex components better
• supports code reusage between multiple components
• helps to extract code