F(E)utter – Initialisierung von externen JS-APIs „Singleton“-Way

F(E)utter – Denkanstöße zu FE-Themen
Diese Blogreihe soll „Futter“ für das Frontend-Hirn bieten.
Es werden verschiedene Themen wie neue Technologien, Herangehensweisen an Problemstellungen u.ä. angeschnitten. Dabei ist eine Diskussion durchaus gewünscht und wir freuen uns über jeden Input.


 

An dieser Stelle möchte ich meinen Ansatz zum einmaligem Initialisieren von JS-API-Scripts auf einer Webpage vorstellen.

(mehr …)

Frontend – Websecurity

Websecurity war lange ein unterschätztes und wenig behandeltes Risiko. Seit Angriffen auf große Portale kommt das Thema immer öfter zur Sprache bzw. es werden Sicherheitsmaßnahmen geschaffen.

In diesem Artikel möchte ich im speziellen auf Frontend-Websecurity eingehen, also sicherheitsrelevante Themen, die auch ohne Backend existieren können. (mehr …)

Was man über HTTP/2 wissen sollte

HTTP2-blog-image-test

HTTP/2 ist seit Februar 2015 standardisiert und wird von immer mehr Servern und Browsern unterstützt. Dieser Blogbeitrag soll einen kurzen Überblick über die Erweiterungen geben und zeigen worauf man zukünftig bei der Entwicklung einer Webseite mit HTTP/2 achten sollte.

One-Way-Data-Binding, Two-Way-Data-Binding und Virtual DOM Diff

model-view

Diesen Begriffen begegnet man immer wieder und den meisten dürfte bekannt sein, dass es dabei um Datenverarbeitung in Client-Applikationen geht. Genau genommen um die Verbindung zwischen Daten und dem UI. Aber worum handelt es sich bei diesen Begriffen genau? Stehen … Weiterlesen

MeteorJS – one above all JS?

meteorjs

Frameworks wie AngularJS spriessen aus dem Boden. Ein solches ist MeteorJS. In den nächsten paar Minuten möchte ich euch dieses – meiner Meinung nach – wunderbare Framework etwas näher bringen und meine eigenen „Pitfalls“ aufzeigen. Was ist MeteorJS? Meteor is … Weiterlesen

Frontend Build-Prozess mit Grunt

Grunt ist ein Tool, mit welchem sich wiederkehrende Aufgaben im Frontend automatisieren lassen. Das ganze basiert auf einem Ökosystem an Plugins, welche in einem Gruntfile.js konfiguriert und so an das jeweilige Projekt angepasst werden können.

grunt-logo

Zu diesem Blogpost gibt es ein Grunt Beispielprojekt auf GitHub, welches die nachfolgend beschriebenen Features abdeckt:

Zudem werden CSS und Javascript Sourcemaps unterstützt sowie Live Reloading im Browser.

github-logoGrunt Beispielprojekt auf GitHub

(mehr …)

Dart. TypeScript. JavaScript Supersets / Compiled JavaScript.

compiledjs

Die Popularität von Frameworks wie AngularJS zeigt deutlich, dass Webapplikationen und moderne Webauftritte immer Frontendlastiger werden. Um den Nutzern ein reibungsloseres/flüssigeres Ergebnis zu bieten, wird immer mehr Funktionalität in JavaScript implementiert, welches häufig nur noch via Services zum Backend kommuniziert. … Weiterlesen

Defer JavaScript für schnelleres Laden

JavaScript blockiert den Ladevorgang

Wenn der Browser-HTML-Parser zu einem SCRIPT-Tag mit SRC-Attribut gelangt, wird die entsprechende JavaScript-Datei heruntergeladen und der darin enthaltene Code sofort ausgeführt. Inhalte die nach dem SCRIPT-Tag stehen werden erst geparsed, nach dem das JavaScript ausgeführt wurde. Abhängig von Dateigrösse und Komplexität der JavaScript-Datei, kann der Parse-Prozess des Browsers und die Ladezeit der Website zum Teil massiv beeinträchtigt werden. Das führt zu einer unnötig langen Wartezeit für den Benutzer und einer schlechteren Position im Suchresultat von Suchmaschinen wie Goolge. Die Wartezeit kann verkürzt werden in dem das JavaScript, oder zumindest ein Teil davon zeitlich verschoben (engl. defer) geladen und ausgeführt wird. Dieser Vorschlag stammt von Google und ist als Best Practice unter den PageSpeed-Regeln dokumentiert.

(mehr …)