• Thomas Pollinger
• 25.04.2019
• DE

SmartExtensions: Projektaufbau und Struktur

Im vorherigen Artikel SmartExtensions: Einstieg haben wir uns über die Frameworks, Werkezuge und Hilfmitteln beschätigt. Der nun folgende Artikel beleuchtet das Framework selbst und zeigt auf, was man wo findet. Wie die Struktur der Projektes aussieht und alles im Verhältnis steht. Dies macht es einfacher, für den Einstieg in das neue Framework und bringt die Idee dahinter näher.
 

Projektaufbau

Die Verzeichnisstruktur ist wie folgt aufgebaut bzw. in verschieden Bereiche aufgeteilt:

EXTENSIONS
├───archive
├───backup
├───build
├───development
└───releases

Nun die Erläuterung der jeweiligen Aufgabe bzw. Funktionen der Ordner auf der ersten Ebene:

• .\archive: der Build-Prozess legt automatisch ein Backup des jeweiligen Build-Paketes an: build-{paketname}-{build-version}.zip.
• .\backup: der Build-Prozess erzeugt autoamtisch ein Backup des Ordners development im Format: backup-development-{build-version}.zip.
• .\build: hier werden die Ergebnisse des jeweiligen Build-Paketes aus dem Build-Prozess abgelegt. Das Verzeichnis räumt sich automatisch auf und je Build-Paket gibt einen namensgleichen Ordner.
• .\development: in diesem Ordner wird gearbeitet und hier liegen auch alle notwendigen, wichtigen und benötigten Dateien für die Erweiterungen vor.
• .\releases: in diesem Ordner lege ich immer die finalen Release-Versionen der jeweiligen Build-Pakete ab.
• .\*.ps1: auf dieser Ebene liegen noch die PowerShell-Skripte, welche ich für den Build-Prozess nutze.
   

Struktur

Die Struktur im Ordner development sieht wie folgt aus:

EXTENSIONS
├───...
├───development
│   ├───components
│   │   ├───controller
│   │   └───libraries
│   ├───config
│   ├───embedded
│   │   ├───config
│   │   ├───css
│   │   ├───img
│   │   └───js
│   ├───extensions
│   │   ├───{extension-name}
│   │   │   ├───config
│   │   │   ├───css
│   │   │   ├───img
│   │   │   └───js
│   ├───global
│   │   ├───config
│   │   ├───css
│   │   ├───img
│   │   └───js
│   ├───includes
│   ├───libraries
│   │   ├───bootstrap
│   │   │   └───4.3.1-dist
│   │   │       ├───css
│   │   │       └───js
│   │   ├───clipboardjs
│   │   │   └───2.0.4
│   │   ├───font-awesome
│   │   │   └───5.8.1
│   │   │       ├───css
│   │   │       └───webfonts
│   │   ├───gijgo
│   │   │   ├───1.9.13
│   │   │   │   ├───css
│   │   │   │   ├───fonts
│   │   │   │   └───js
│   │   │   │       └───messages
│   │   │   └───1.9.6a
│   │   │       ├───css
│   │   │       ├───fonts
│   │   │       └───js
│   │   │           └───messages
│   │   ├───handlebars
│   │   │   └───4.1.2
│   │   ├───jquery
│   │   │   ├───3.4.0
│   │   │   └───plugins
│   │   │       ├───freeze-table
│   │   │       │   └───1.2.0
│   │   │       │       └───dist
│   │   │       │           └───js
│   │   │       └───scrolling-tabs
│   │   │           └───2.5.0
│   │   │               └───dist
│   │   ├───js-cookie
│   │   │   └───2.2.0
│   │   ├───lodash
│   │   │   └───4.17.11
│   │   └───moment
│   │       ├───js
│   │       │   └───2.24.0
│   │       ├───msdate
│   │       │   └───2.0.1
│   │       └───timezone
│   │           └───0.5.25-2019a
│   └───other
└───...

Hier die Erläuterung der jeweiligen Funktionen der Ordner innerhalb von development:

• .\components: hier liegen die wichtigen Komponenten für die Kommunikation zwischen Browser und den APIs des Management Servers.
  • .\controller: alles zum Core-RQL-Connector inkl. der ASP/ASPX-Proxies bzw. Bridges.
  • .\libraries: alle RQL-API-Calls verpackt in JavaScrpt-Funktionen (ES6-Standard) und geordnet nach Themenblöcke (an den Aufbau der RQL-Dokumentation angelehnt).
• .\config: hier liegen zentrale Konfigurations oder Paket-Dateien, welche für den Build-Prozess geladen und verarbeitet werden.
• .\embedded: in diesem Ordner liegt das Paket für die Embedded-Version des Frameworks. Embedded bedeutet, dass es innerhalb von SmartEdit funktioniert.
  • .\config: relevante und ergänzenden Konfigurationsdateien.
  • .\css: relevante und ergänzenden Stylesheets.
  • .\img: relevante und ergänzenden Bilder/Assets.
  • .\js: relevante und ergänzenden JavaScripts.
  • .\index.html: das HMTL-File als Beispiel für eine Management Server Content-Klasse.
• .\extensions: in diesem Ordner liegen alle Erweiterungen in eigenen Ordnern:
  • .\{extension-name}: 
    • .\config: relevante und ergänzenden Konfigurationsdateien.
    • .\css: relevante und ergänzenden Stylesheets.
    • .\img: relevante und ergänzenden Bilder/Assets.
    • .\js: relevante und ergänzenden JavaScripts.
    • .\index.html: das HMTL-File der jeweiligen Erweiterung.
  • .\*.xml: zusätzlich noch die Import-XML-Dateien für den Management Server je Erweiterung.
• .\global: hier werden alle Dateien abgelegt, also Configs, Stylesheets, JavaScripts und Assets, welche für alle Erweiterungen oder der Embedded-Version benötigt werden.
  • .\config: zentrale Konfigurationsdateien.
  • .\css: zentrale Stylesheets.
  • .\img: zentrale Bilder/Assets.
  • .\js: zentrale JavaScripts.
  • .\favicon.ico: ein generisches/zentrales Favoriten-Icon.
• .\includes: während des Build-Prozesses werden aus diesem Ordner die jeweiligen HTML-Fragmente geladen und in die Erweiterungen an die dafür vorgesehen Stelle inkludiert. ;)
• .\libraries: dieser Ordner dient dazu, alle 3rd-Party Framework-Pakete abzulegen.
• .\other: hier findest sich alles, was zentral benötigt wird, jedoch nicht eindeutig einordenbar ist. Wie z.B. der Inahlt für Kontakt, Lizenz und Libraries für das Hilfe-Menü.
• .\*.*: auf dieser Ebene liegen noch zwei Dateien, eine ist für die Build-Version und die andere für die UUIDs zuständig. Dazu später noch weitere Infos.
   

Der Build-Prozess verarbeitet diese Struktur und erzeugt dann automatisch die jeweiligen, kompakten und passend zugeschnitten Pakete. Doch dazu später mehr in einem eigenen Artikel. ;)
 

Fazit

Aktuell bin ich mir nicht zu 100% sicher, ob die o.g. Struktur für die kommenden Jahre ausreichend ist. Jedoch habe ich in den letzten 12 Monaten gemerkt, dass man sehr flexibel damit zu arbeiten und sie ist nicht zu komplex. Doch wenn es eine Verbesserung dazu gibt, bin ich jederzeit offen dazu und würde das gerne im Slack in Ruhe besprechen ;)

Im nächsten Artikel beschäftigen wir uns mit SmartExtensions: RQL-Connector inkl. Session- und Objektaufbau ;)

Über den Autor: