Tag: tutorials

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.

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.

201506Sep

AngularJS: Artikel für den Einstieg in Angular 2

Es wird noch eine Weile dauern, bis Angular 2.0 erscheinen wird: Ein offizielles Release-Datum gibt es nicht, es ist von Ende 2015, aber auch von 2017 die Rede. Dennoch können sich interessierte Entwickler schon jetzt mit der kommenden Version des MVW-Frameworks vertraut machen. Auf der neuen AngularJS-Website steht die Alpha-Version zum Download bereit und zudem gibt es verschiedene Einführungen in das Framework.

AngularJS - Superheroic JavaScript MVW Framework

Jetzt wurde noch eine weitere Website von Thoughtram ins Leben gerufen, auf der ausgesuchte und hochqualitative Artikel zum Thema Angular 2.0 bereitgestellt werden. Die Seite trägt den Namen "Exploring Angular 2" und ist bisher in diese Kategorien unterteilt: Getting Started, Dependency Injection, Routing, Views and Rendering und Migration / Upgrade. Die Seite wird zukünftig um weitere Anleitungen ergänzt werden und sollte bei AngularJS-Entwicklern daher einen Platz in den Lesezeichen finden.

201501Sep

JavaScript: Schnelleinstieg in ES6 durch ES5-Vergleich

Für den kommenden JavaScript-Standard gibt es mittlerweile eine große Auswahl an Artikeln, Einführungen, Playgrounds, Polyfills oder Use-Cases. Zudem stehen schon ausführliche Beschreibungen bereit, in denen gezeigt wird, wie sich ES6 schon jetzt für Projekte einsetzen lässt.
Der Entwickler Alex Bardanov hat vor kurzem noch ein nützliches GitHub-Repository erstellt, in dem die Unterschiede von ECMAScript 5 und 6 direkt aufgezeigt werden.

JavaScript - Comparison between ECMA5 and ECMA6 features

Das Repository ist unterteilt in die Kategorien Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default / Rest / Spread, Let / Const, Iterators / For..Of, Generators und Modules. Sogar das Array Comprehension-Feature von ES7 wird beleuchtet. Das Repository kann sehr gut als Schnelleinstieg genutzt werden, da lediglich Snippets von ES5- und ES6-Code zugrunde liegen und miteinander verglichen werden können.

201529Mai

JavaScript: JSX anhand von React-Komponenten erklärt

Mit React hat Facebook auch JSX eingeführt, eine JavaScript-Syntax-Erweiterung, mit der XML-Notationen in JavaScript-Objekte transformiert werden. Obwohl die Verwendung von JSX in React optional ist, empfiehlt sich die Anwendung von JSX-Templates in React-Komponenten. Allerdings sollte klar sein, dass sich bei JSX nicht um eine Template-Sprache (wie etwa Handlebars oder EJS) handelt: JSX stellt eine deklarative Syntax dar, um das virtuelle DOM von React darzustellen. Der virtuelle DOM-Tree wird schließlich mit dem eigentlichen DOM-Tree der HTML-Seite abgeglichen, wobei nur die Änderungen synchronisiert werden.

JSX muss zudem nicht ausschließlich für HTML verwendet werden, sondern kann allgemein für das Abbilden von beliebigen Objektbäumen genutzt werden. Auch das Event-Handling unterscheidet sich bei JSX zu dem von anderen Template-Engines: Events werden an die React-Root-Node delegiert, wodurch nicht für mehrere Elemente Event-Listener im Speicher gehalten werden müssen.
Diese und weitere Aspekte werden in einem Artikel auf Medium.com beschrieben. Entwickler sollen dadurch ein besseres Bild von der Technologie erhalten, um sie zusammen mit React-Komponenten einsetzen zu können.

201527Mai

JavaScript: Allgemeine Fehler bei Promises

Mit Promises steht JavaScript-Entwicklern schon seit geraumer Zeit ein Konzept zur Verfügung, mit dem sich eine "Callback Hell" vermeiden lässt, da Funktionen asynchron ausgeführt werden können. Ein Promise ist also eine wartende Funktion, die per resolve oder reject aufgelöst werden muss, damit die nachfolgenden Promises per .then() ausgeführt werden.

PouchDB - We have a problem with promises

Nolan Lawson hat in einem Artikel auf dem PouchDB-Blog allerdings die Feststellung gemacht, dass Promises häufig falsch verwendet werden. Daher zeigt er verschiedene Fehler und entsprechende Verbesserungsvorschläge auf. Gerade bei der Arbeit mit dynamischen Daten und forEach-Schleifen kann auch mit Promises die "Pyramid of Doom" entstehen, die es zu vermeiden gilt.