Tag: tricks

201522Nov

PhotonKit: UI-Komponenten für Electron-Apps

Vor ein paar Wochen berichtete ich über ein Tutorial für Electron/AngularJS. Wer mit dem JavaScript-Framework für plattformübergreifende Desktop-Anwendungen experimentieren möchte, kann mit der Anleitung beginnen. Wer zudem fertige HTML/CSS-Bedienelemente für Electron sucht, sollte einen Blick auf PhotonKit werfen.

PhotonKit - The fastest way to build beautiful Electron apps using simple HTML and CSS

Dabei handelt es sich um eine Sammlung verschiedener Komponenten, die für eine Desktop-App erforderlich sein können. Dazu zählen Header/Footer, Navigationen, Buttons, Tabs, Listen, Tabellen sowie eine Icon-Schriftart. PhotonKit könnte also auch als "Bootstrap für Electron" verstanden werden. Das Projekt steht bei GitHub bereit und die CSS-Komponenten liegen im SASS-Format vor.

201524Okt

CSS: Refresher Notes als modernes Kompendium

CSS ist zweifelsohne eine Design-Syntax, die immer wieder durch ihre Robustheit und Vielfältigkeit überzeugt. Mittlerweile finden die kaskadierenden Stylesheets nicht nur im Web-Bereich Verwendung, sondern verstärkt auch in mobilen Apps oder gar Desktop-Anwendungen. Dennoch stellt CSS nach wie vor eine Herausforderung dar, da komplexe Layouts auch komplexe Regeln erfordern. Und gerade responsive oder adaptive Designs verlangen Webdesignern Einiges an Know-How ab.
Zum Auffrischen, aber auch zum Nachschlagen hat der Entwickler Vasa aus San Francisco diesbezüglich die CSS Refresher Notes bei GitHub angelegt.

CSS Refresher Notes - a quick refresher of CSS concepts compiled from various articles online

Dabei handelt es sich um eine Art CSS-Kompendium, das Informationen aus verschiedenen Online-Quellen enthält. Behandelt werden die Themen Positioning, Display, Floats, CSS-Selektoren, Effizienz von Selektoren, Repaints und Reflows, CSS3-Properties, CSS3-Media Queries, responsives Webdesign, CSS3-Transitions, CSS-Animationen, SVG, CSS-Sprites und vertikale Ausrichtung. Für angehende und bestehende CSS-Experten sind die Refresher Notes in jedem Fall ein Platz in den Bookmarks wert.

201505Okt

JavaScript: Desktop-Anwendungen mit Electron/AngularJS

Plattformunabhängige Desktop-Anwendungen, die unter Windows, Mac OS X und Linux laufen, lassen sich seit geraumer Zeit auch mit einer JavaScript-Codebasis umsetzen. Dafür ist lediglich ein nativer Wrapper notwendig, der eine HTML-Engine integriert und die Ausführung von JavaScript über eine virtuelle Maschine ermöglicht. Diese beiden Aspekte werden mit dem Chromium-Framework erreicht. Damit auch native Fenster, Menüs und weitere Funktionalitäten möglich sind, ist ein Framework wie GitHubs Electron (zuvor Atom Shell) nötig. Hiermit kann direkt mit der Entwicklung der eigentlichen Anwendung gestartet werden.

Scotch.io - Creating Desktop Applications With AngularJS and GitHub Electron

Microsofts Visual Studio Code ist wahrscheinlich der bekannteste Vertreter der Electron-Ära. Wer eine eigene Desktop-Anwendung mit JavaScript entwickeln und dabei auch von AngularJS Gebrauch machen möchte, sollte sich dieses Tutorial ansehen. Darin wird Schritt für Schritt die Entwicklung einer nativen AngularJS-App beschrieben, die eine einfache Kundenverwaltung als Beispiel repräsentiert. Es werden die verschiedenen Schritte für Logik und User Interface bis hin zur Veröffentlichung mittels nativem Installer beschrieben.

201529Sep

Matreshka: Ereignisgesteuertes JavaScript-Framework

Webentwickler haben bei der Frage nach einem Framework für die nächste Webanwendung in der Regel freie Auswahl. Mit AngularJS, React, Backbone, Ember oder Knockout stehen komfortable Lösungen bereit, die keine Wünsche offen lassen und auch bei komplexeren Projekten eine gute Figur machen. Wenn es etwas kompakter sein soll, könnte Matreshka eine gute Wahl sein. Auch dabei handelt es sich um ein ereignisgesteuertes Framework, das Zwei-Wege-Bindings bietet und mit Klassen (ES5- und ES6-Stil möglich) arbeitet. Zudem ist ein Router für Single-Page-Applications integriert.

Matreshka - Event-driven JavaScript framework

Matreshka will in erster Linie durch Minimalismus und Schnelligkeit überzeugen: Auf der Seite gibt es Statistiken, wie es gegenüber anderen Frameworks wie AngularJS, React und Knockout abschneidet, wenn sich 100, 500 oder 1000 Objekte auf einer Seite befinden. Im Vergleich ist Matreshka also sehr schnell, wenn viele Objekte verarbeitet werden müssen.
Hier noch ein kleines Snippet von der Website, welches die Zwei-Wege-Bindings demonstriert:

  • <input type="text" class="my-input">
  •  
  • <script>
  • var app = new Matreshka();
  • app.bindNode("x", ".my-input");
  • app.x = "Two-way data binding in JS? O rly?";
  • </script>

Wer ein komplexeres Beispiel sehen möchte, kann sich den dokumentierten Code des TodoMVC-Projekts ansehen. Bei GitHub findet sich der Quellcode der Bibliothek.

201528Sep

StateMan: Standalone-JavaScript-Router für SPAs

Bei heutigen Webanwendungen handelt es sich oft um solche, die aus einer zentralen Seite bestehen und Inhalte per Ajax nachladen: Single-Page-Applications (SPAs) haben den Vorteil, dass gezielt Daten vom Server geholt werden (häufig in Form von JSON/REST) und nicht die komplette Seite neu geladen werden muss (per Roundtrip). Eine derartige Anwendung benötigt allerdings auch ein Konzept für URL-Pfade, damit Lesezeichen zu entsprechenden Seiten gesetzt werden oder URLs kopiert werden können. Für eine derartige Funktionalität ist etwas Aufwand nötig, da die URLs bestimmten Bereichen der Anwendung zugeordnet werden müssen (Routing) und auch die nativen Vor-/Zurück-Funktionen des Webbrowsers berücksichtigt werden müssen.
AngularJS-Entwickler können hierzu das ui-router-Modul einsetzen. Wer hingegen eine Standalone-Lösung sucht, die an ui-router angelehnt ist, sollte sich StateMan ansehen.

StateMan - A tiny foundation that providing nested state-based routing for complex web applications

Dabei handelt es sich um ein kompaktes Framework, das etliche Routing-Funktionen mitbringt. Das Beispiel zeigt die Bibliothek in Aktion. Mit StateMan lässt sich also die komplette Routing-Logik für eine SPA umsetzen und dabei sind natürlich auch verschachtelte URLs inklusive IDs oder eigenen Parametern möglich. Die Referenz gibt Aufschluss über die Funktionen des Skripts.

201526Sep

JavaScript: Erweiterbare reguläre Ausdrücke mit XRegExp

Dass in einer etwas komplexeren Webanwendung reguläre Ausdrücke zum Einsatz kommen, dürfte den meisten Webentwicklern klar sein. Sobald es um Formularvalidierung geht, sind reguläre Ausdrücke unverzichtbar. In der Regel reichen die Bordmittel von JavaScript bzw. ECMAScript 5 aus, um ordentliche Validierungen durchführen zu können. Wer jedoch etwas mehr Komfort benötigt oder nach erweiterbaren regulären Ausdrücken sucht, sollte einen Blick auf XRegExp werfen. Mit dieser Bibliothek dürften keine Wünsche offen bleiben, wenn es um die Arbeit mit den speziellen Zeichenketten geht.

XRegExp - The one of a kind JavaScript regular expression library

XRegExp erlaubt beispielsweise benannte Flags und Back-References, Verkettungen oder gar das Zusammensetzen mehrerer Ausdrücke. Sogar eine forEach-Funktion ist möglich:

  • var evens = [];
  •  
  • XRegExp.forEach("1a2345", /\d/, function(match, i) {
  • if (i % 2) evens.push(+match[ 0 ]);
  • });
  •  
  • // evens -> [2, 4]

Weiterhin stehen verschiedene Erweiterungen für die Bibliothek bereit. XRegExp steht als gewöhnliches Browser-Skript oder auch als NPM-Modul bereit. Bei GitHub findet sich der Code zum Download.

201523Sep

JavaScript: Einführung in React ohne JSX, ES6 und Flux

Für die Umsetzung moderner Webanwendungen eignen sich inzwischen diverse Frameworks und Ansätze. Was die Backend-Architektur angeht, ist die Verwendung einer RESTful-API schon fast selbstverständlich geworden. JavaScript-Frameworks wie AngularJS, Backbone.js oder React eignen sich bestens für REST-Schnittstellen und bieten komfortable Möglichkeiten, was die clientseitige Datenbehandlung angeht. Jedes komplexere MV*-Framework bringt eine gewisse Lernkurve mit sich. Im Fall von React gibt es allerdings mögliche Stolpersteine außer dem Konzept des Frameworks selbst: Entwickler müssen die Flux-Architektur, ES6-Syntax und die ECMAScript-Erweiterung JSX verstehen.

James K. Nelson - Learn Raw React — no JSX, no Flux, no ES6, no Webpack

Wer erst einmal nur React verstehen möchte, ist womöglich mit dem Artikel von James K. Nelson gut aufgehoben. Darin setzt er nämlich eine kleine React-App um, ohne auf ES6 und JSX zurückzugreifen. In der Anleitung werden Daten mittels Template dargestellt und eine React-Komponente wird erstellt. Abschließend wird der App noch ein interaktives Formular hinzugefügt.
Wer also in die Welt von React eintauchen möchte, ist mit dieser Anleitung bestens bedient.

201523Sep

Webentwicklung: Statistiken der Frontend-Tools in 2015

Wer als Webentwickler tätig ist, sollte stets auf dem neuesten Stand sein, was Web-Technologien und künftige Standards angeht. Tatsache ist, dass die Browserhersteller, Konsortien und auch unabhängige Entwickler ständig neue Möglichkeiten in Form von Tools oder Funktionen veröffentlichen, mit denen sich Webanwendungen oder mobile Apps umsetzen lassen.
Der Entwickler Ashley Nolan hat einmal die Tools von unabhängigen Entwicklern unter die Lupe genommen eine kleine Umfrage gestartet, in der es um die Frontend-Tools in 2015 geht. Insgesamt haben über 2000 Webentwickler an der Umfrage teilgenommen, so dass einigermaßen repräsentative Ergebnisse zustande kommen.

The State of Front-End Tooling – 2015

Die Ergebnisse der Umfrage hat er in diesem Artikel veröffentlicht. Bei der Umfrage ging es um verschiedene Tools: CSS-Präprozessoren (LESS, SASS, etc.), Task-Runner (Gulp, Grunt, NPM, usw.), JavaScript-Bibliotheken und -Frameworks, Module-Bundler (RequireJS, Webpack, JSPM, etc.), Testing-Frameworks (Jasmine, Mocha, QUnit, usw.) und sonstige Tools wie Yeoman und Bower. Kurz zusammengefasst lässt sich sagen, dass die Mehrheit auf SASS und jQuery setzt, Gulp mittlerweile Grunt verdrängt hat, AngularJS in vielen Projekten eingesetzt wird und Mocha/Jasmine für Unit-Tests eingesetzt werden.