Tag: entwicklung

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.

201525Mai

JavaScript: Alternative Konzepte zu Flux und React

Mittlerweile dürften die meisten JavaScript-Entwickler mit den Begriffen Flux oder React etwas anfangen können. Facebook hat damit neue Methoden zur Entwicklung moderner Webanwendungen geschaffen. Neben einem virtuellem DOM und einem unidirektionalen Datenfluss stehen bei React ein Klassensystem, Event-Emitter, Actions und Stores im Vordergrund der Funktionsweise. Das ganze stellt eine mögliche Lösung dar, bietet aber zugleich Raum für Weiterentwicklungen.

Flux - Application Architecture for Building User Interfaces

Inzwischen gibt es zwei Vertreter, welche die Paradigmen von Facebook analysiert und verändert haben. Zum einen hat der Entwickler Matti Lankinen eine Alternative beschrieben, die auf Bacon.js und React basiert: Hier wird also die Flux-Architektur mit ihren Konventionen aufgelöst und durch "Functional Reactive Programming (FRP)" ersetzt, bei dem Event-Streams die Grundlage bilden. Actions und Stores werden überflüssig, da eine "öffentliche API" als lokaler Dispatcher agiert und die Zustände innerhalb der Anwendung regelt. Eine beispielhafte TodoMVC-App demonstriert die Funktionsweise.
Der zweite Ansatz bezieht sich auf das UI-Framework Deku: Hierbei handelt es sich um eine funktionale Alternative zu React, die auf das Klassensystem verzichtet. ES6, JSX sowie Komponenten kommen hier weiterhin zum Einsatz, lediglich das Rendering gleicht bei dieser Idee dem einer Game-Engine.

201524Mai

JavaScript: Sonnensystem der Skriptsprache in 2015

JavaScript ist zu einer wichtigen und soliden Skriptsprache geworden, die maßgeblich zur Entwicklung des Webs beiträgt und auch für die Umsetzung mobiler Apps oder nativer Desktop-Anwendungen genutzt werden kann. ECMAScript 6 ist zwar noch nicht in allen Browsern vollständig implementiert, kann aber dank Transpiler schon jetzt genutzt werden: Für Browser, die ES6 noch nicht unterstützen, werden dann entsprechende Code-Fallbacks erzeugt.
Neben ES5-Transpilern gibt es noch andere Tools und Weiterentwicklungen, die sich derzeit im JavaScript-Ökosystem (oder -Sonnensystem) befinden.

Solar System of JS

Anlässlich der Space City JS-Konferenz hat der Entwickler Shaun LeBron das "Solar System of JS" entwickelt. Dabei handelt es sich um eine interaktive Illustration aktueller JavaScript-Technologien und -Entwicklungen. Neben Transpilern, Lintern und Modul-Systemen werden Features von ES7 und ES8 gezeigt, Tools zur statischen Typisierung (wie beispielsweise TypeScript oder Flow) sowie Sprachen, die nach JavaScript kompilieren (z.B. ClojureScript).

201506Mai

JavaScript: Einführung in die Konzepte von React.js

Mit React.js stellen die Entwickler von Facebook schon seit geraumer Zeit eine Alternative zu AngularJS oder anderen MVW-Frameworks zur Verfügung. Zuletzt wurde mit React Native sogar ein Framework vorgestellt, mit dem sich native Mobile-Apps auf der Basis des JavaScript-Frameworks entwickeln lassen.
Der Einstieg in das vielseitige Framework gestaltet sich aber nicht unbedingt einfach, da verschiedene Konzepte verwendet werden und komplexe Bereiche abgedeckt werden. Die Entwickler von RisingStack haben daher ein ausführliches Tutorial veröffentlicht, das die Welt von React besser verständlich machen soll.

React - A JavaScript library for building user interfaces

Behandelt werden in dem Artikel die grundlegenden Themen rund um die JavaScript-Bibliothek. React setzt auf ES6 (mittels Babel-Transpiler) und Komponenten, die wiederum JSX-Templates beinhalten. Bei JSX handelt es sich um eine JavaScript-Erweiterung, welche die direkte Einbindung von XML-Code in JavaScript und Zwei-Wege-Bindings ermöglicht. React verarbeitet schließlich die JSX-Views, verknüpft dynamische Daten (Backend) in einem virtuellem DOM, welches für die Präsentation sorgt und auf Änderungen wartet (unidirektionaler Datenfluss). Dieser Sachverhalt wird ausführlich in dem Artikel beschrieben und am Ende wird noch eine mögliche Anwendungsstruktur aufgezeigt.
Mittlerweile ist auch schon der zweite Teil von insgesamt drei Teilen veröffentlicht worden.

201530Apr

Visual Studio Code: Cross-Plattform-Editor für Entwickler

Anlässlich der Build 2015 hat Microsoft ein wirklich interessantes Projekt für Webentwickler vorgestellt: Visual Studio Code heißt eine neue, kostenlose und plattformübergreifende (Windows, Mac OS X, Linux) Entwicklungsumgebung, die an Webentwickler gerichtet ist. Der Editor basiert auf Electron (zuvor Atom Shell) und damit auf Node.js, HTML und CSS. Dennoch bietet er alles, was das Entwickler-Herz begehrt: Bracket-Matching, IntelliSense, Multi-Cursor-Support, Parameter-Hints, Snippets, Breakpoints, Git-Integration und vieles mehr. Die Anwendung gibt Entwicklern 3 Themes zur Auswahl und die Konfiguration ist direkt über die Bearbeitung von JSON-Dateien möglich.

Visual Studio Code - Cross-Plattform-Editor für Webentwickler

Obwohl Visual Studio Code bisher nur in der Version 0.1.0 vorliegt, hat er sich schon jetzt als ultimatives Tool für Node.js-Apps bewährt: Node.js-Anwendungen können einfach per Knopfdruck gestartet und analysiert werden (Breakpoints, Step-Through, etc.) und in der Sidebar werden in Echtzeit die aktuellen Variablen angezeigt. Damit dürfte Microsoft ein kleiner Durchbruch gelungen sein, denn das Tool ist trotz seiner Kompaktheit sehr umfangreich. Es werden sämtliche Web-Sprachen (HTML, JavaScript, CSS, Less, Sass, TypeScript, PHP, CoffeeScript, Go, Handlebars, Markdown, Python, Ruby, SQL, YAML, etc.) unterstützt und durch seine Anpassbarkeit könnte Visual Studio Code schon bald zum Standard im Bereich kostenloser Editoren für Webentwickler werden. Natürlich gibt es weiterhin GitHubs Atom und auch Facebooks Nuclide könnte interessant werden.
Und Visual Studio 2015 wird es ebenfalls in sich haben: Laut einem Blog-Beitrag will man verstärkt auf die Entwicklung mobiler Apps setzen. Hier werden bisher Apache Cordova und Xamarin genannt. Es bleibt also spannend.

201530Apr

Edge: Nachfolger des Internet Explorers vorgestellt

Das blaue "e" bleibt: Microsofts neuer Windows 10-Browser wird "Edge" heißen und ersetzt damit den bisherigen Internet Explorer. Der bisherige Projektname "Spartan" des kommenden Webbrowsers wird damit ebenfalls abgelöst. Der Browser kommt im neuen Windows-Design und zeigt eine entsprechend flache und minimalistische Benutzeroberfläche auf. Zudem wird der Browser endlich Extensions erlauben, die allerdings erst später kommen werden, also wahrscheinlich nicht mehr zum Release von Windows 10. Positiv ist aber, dass bestehende Chrome-Erweiterungen ohne großen Aufwand in Edge-Erweiterungen umgewandelt werden können.

Microsoft Edge

Weiterhin wird der Browser eine Markierungsfunktion enthalten, mit der sich bestimmte Bereiche einer Website visuell markieren und mit Anderen teilen lassen. Unter der Haube des Browsers arbeitet laut Wikipedia eine neue Layout-Engine, die den Namen "EdgeHTML" trägt und ein Fork der bisherigen Trident-Engine ist. Laut AnandTech soll auch die WebGL-Performance von Edge besser sein als in Chrome oder Firefox. Man darf also gespannt sein.

201516Apr

Osmosis: Website-Quelltexte verarbeiten mit Node.js

Wer mit Node.js den Quelltext von Webseiten auslesen und verarbeiten möchte, kann dazu beispielsweise das Modul Scraper.js nutzen, das bereits mit ausreichend Funktionalitäten bestückt ist. Neu in diesem Bereich ist das Modul Osmosis, das auf Promises basiert und dadurch Piping ermöglicht. Zudem werden verschachtelte Callbacks überflüssig.

Mit Osmosis lassen sich GET- und POST-Abfragen auf eine URL schicken und anschließend mit verschiedenen Funktionen verarbeiten. Per .find() sind CSS- und XPath-Queries möglich und weiterführende Links können mit .follow() ausgelesen werden. Per .set() lassen sich Informationen in das finale data-Objekt schreiben, das die gewünschten Daten repräsentiert. Das Projekt sollte im Auge behalten werden, denn laut Entwickler wird das Modul um eine Funktionalität erweitert werden, mit der auch dynamisch erzeugter Inhalt von Websites verarbeitet werden kann.

201516Apr

Node.js: Skripte per Windows-Kontextmenü ausführen

Node.js-Entwickler, die in Windows unterwegs sind, können von der Anpassbarkeit des Systems Gebrauch machen und beispielsweise das Kontextmenü dazu nutzen, Node.js-Skripte direkt per Klick auszuführen. Dazu braucht es nur ein paar Einträge in der Windows-Registrierung sowie den dazugehörigen Befehl. Voraussetzung ist, das Node.js auf dem Rechner installiert ist. Dann lassen sich Skripte einfach über den Befehl cmd in Verbindung mit der Node-Anwendung ausführen.

Node.js - Skripte per Windows-Kontextmenü ausführen

Mit dem Parameter /k wird cmd dazu angewiesen, den Prozess nicht zu beenden. Das entsprechende Fenster, also die Eingabeaufforderung, bleibt in diesem Fall nach der Ausführung des Skripts bestehen. Wer hingegen nur das Skript ausführen und das dazugehörige Konsolenfenster direkt wieder schließen möchte, verwendet stattdessen einfach den Parameter /c.

Weiterlesen...