7 Technologien & Tools die wir in der Webentwicklung einsetzen

17. April 2018
Webentwicklung

Mein Name ist Florian und ich bin Webentwickler bei der Kleitsch Internet GmbH. Ich gebe euch in diesem Artikel einen kleinen Überblick über die Programmiersprachen & Tools, die wir in der Webentwicklung verwenden. Da dies keine abschließende Auflistung ist, werden in Zukunft immer mal wieder Artikel zu diesem Thema erscheinen.

1. PHP

Für die serverseitige Programmierung kommt bei uns die mit Abstand gängigste Technologie in diesem Bereich zum Einsatz (Quelle: https://w3techs.com/technologies/overview/programming_language/all, abgerufen am 12.04.2018). PHP wird bei uns derzeit in der aktuellsten Version 7 verwendet. Serverseitige Programmierung bedeutet, dass der Quelltext nicht an den Browser übermittelt wird. Somit bleibt der PHP Quellcode für den Nutzer unsichtbar und kann auch nicht heruntergeladen werden. Unsere Projekte sind objektorientiert programmiert.

2. MySQL

Ebenfalls eines der verbreitetsten Systeme in seiner Kategorie ist MySQL. Das relationale Datenbanksystem bildet die Grundlage aller Projekte der Kleitsch Internet GmbH. Gerade der strukturierte Aufbau von MySQL Datenbanken schafft die Vorraussetzung, dass unsere Projekte stets schnell und zuverlässig erreichbar sind. Sicherlich ist ein weiterer Grund für die Nutzung von MySQL, dass es – eben gerade durch seine Bekanntheit – eigentlich von jedem Webentwickler beherrscht wird.

3. Smarty

Zur Trennung der eigentlichen Anwendung inklusive Prozessen, Funktionen etc. (PHP) von der Präsentation durch ein Template (HTML 5) nutzen wir die Template-Engine Smarty in der aktuellen Version 3.
Durch die Trennung dieser beiden Komponenten, bietet Smarty einen großen Vorteil gegenüber reinem PHP.
Personen, die zwar HTML, aber keine PHP Kenntnisse haben, besitzen dadurch die Möglichkeit Templates zu verändern.
Die für das Template benötigten Objekte und Variablen werden vom PHP-View an das Smarty Template übergeben.

Ein simples Beispiel könnte etwa so aussehen:

VariablenTemplateHTML Ausgabe
$title = 'Titel';

$h1= 'Überschrift 1';

$content= 'Hallo Welt';
<!DOCTYPE html>

<html>

    <head>

        <title>{$title}</title>

    </head>

    <body>

        <h1>{$h1}</h1>

        <div>{$content}</div>

    </body>

</html>


<!DOCTYPE html>

<html>

    <head>

        <title>Titel</title>

    </head>

    <body>

        <h1>Überschrift 1</h1>

        <div>Hallo Welt</div>

    </body>

</html>

4. jQuery

Die JavaScript-Bibliothek jQuery sollte jedem Webentwickler bekannt sein. jQuery ist inzwischen nicht mehr wegzudenken, da es die Verwendung von JavaScript für den Entwickler sehr stark vereinfacht. Dadurch, dass weniger Code geschrieben werden muss, kann viel Zeit bei der Webentwicklung gespart werden. Außerdem muss der Programmierer nicht darauf achten Sonderfälle für einzelne Browser einzubauen, da dies bereits von jQuery gemacht wurde.

5. Taskrunner: gulp.js

Der auf Node.js basierende Taskrunner gulp.js macht es möglich, einzelne Aufgaben automatisch im Hintergrund zu erledigen. Diese Aufgaben werden in einer Datei mit dem Namen „gulpfile.js“ definiert. Damit die Aufgaben erledigt werden können, muss das jeweilige gulp-Modul installiert sein. Einige der Module, die wir verwenden habe ich euch in folgender Tabelle aufgelistet.

Gulp ModulAufgabe die das Modul erfüllt
browser-syncAktualisiert das Browserfenster beim speichern ausgewählter Dateien um Änderungen sofort anzuzeigen
gulp-autoprefixerSetzt benötigte Browserspezifische CSS-Präfixe automatisch
gulp-concatBietet die Möglichkeit mehrere JavaScript Dateien zu einer Datei zusammenzufassen
gulp-cssnanoKomprimiert CSS Dateien (minify)
gulp-renameKann CSS Dateien umbenennen
gulp-sassWandelt die Sass Dateien (.scss) in CSS-Dateien (.css) um
gulp-uglifyKomprimiert JavaScript Dateien (minify)

Diese Module zeigen Ihre gesamte Stärke erst wenn man ihre Funktionen kombiniert. Als Beispiel schauen wir uns einmal den Gulp-Task an, der unsere Sass Dateien vollständig zu unseren CSS Dateien umwandelt.

gulp.task('style', function(){
    gulp.src('style/main.scss')
        .pipe(sass({ includePaths : ['style/breakpoints/'] }).on('error', sass.logError))
        .pipe(autoprefixer('last 2 versions'))
        .pipe(gulp.dest('../themes/css/'))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssnano())
        .pipe(gulp.dest('../themes/css/'))
        .pipe(browserSync.reload({
        stream: true
    }))
});

Der Task betrachtet die main.scss im Ordner /style/, welche sämtliche anderen .scss Dateien inkludiert. Im Anschluss werden die CSS-Präfixe gesetzt, die für die jeweils letzten zwei Browserversionen aller gängigen Browser benötigt werden. Die Datei wird nun als main.css im Ordner ../themes/css/ gespeichert. Im Anschluss wird ein neuer Dateiname „main.min.css“ definiert. Die Datei wird minifiziert und im selben Ordner ../themes/css/ gespeichert. Im Anschluss wird per Browsersync das Browserfenster neu geladen in dem das Projekt geöffnet ist.

6. CSS Präprozessor: Sass

Bei uns wird seit 2017 anstatt der Stylesheet-Sprache CSS der CSS-Präprozessor Smarty verwendet. Sass (Syntactically Awesome Stylesheets) erweitert die herkömmliche CSS-Syntax um Variablen und weitere nützliche Funktionen wie Beispielsweise Mixins.

7. SourceTree

Unsere Projekte werden mit git versioniert. Zur Verwaltung aller git-Repositories verwenden wir SourceTree von Atlassian. SourceTree ist ein kostenloser git-Client und bietet eine übersichtliche Auflistung der verschiedenen Commits und Branches. Außerdem können Code-Änderungen im direkten Vergleich betrachtet werden.

Interesse geweckt?

Die Kleitsch Internet GmbH bietet regelmäßig Praktika im Bereich Web Development an. Das im März oder September startende Praktikum dauert 6 Monate und bietet Studierenden einen interessanten und abwechslungsreichen Einblick in die Webentwicklung.