Tag: entwicklung

201619Jan

Vue.js: Modernes und kompaktes Reactive-Framework

Es gibt einen neuen Stern am Framework-Himmel, der sich neben anderen Web 3.0-Frameworks wie React, AngularJS oder Riot.js aufstellt: Es ist von Vue.js die Rede und es sei gleich vorab erwähnt, dass diese Bibliothek auf jeden Fall einen Blick wert ist. Sie vereint Konzepte von React und AngularJS, bleibt dabei aber einfach und dennoch komfortabel. Vue.js bietet reaktive Data-Bindings, um DOM und Daten zu synchronisieren. Es kommt mit einer Template-Sprache, Filtern, Directives, Komponenten und sogar Mixins.

Vue.js - Reactive Components for Modern Web Interfaces

Das Framework biete im Grunde alles, was eine moderne Webanwendung oder mobile App benötigt. Für Single-Page-Applications (SPAs) darf auch ein Router nicht fehlen. Hier ein Code-Snippet, welches Event Handling demonstriert. Der HTML-Code:

  • <div id="example-2">
  • <button v-on:click="say('hi')">Say Hi</button>
  • <button v-on:click="say('what')">Say What</button>
  • </div>

Und der JavaScript-Teil:

  • new Vue({
  • el: '#example-2',
  • methods: {
  • say: function(msg) {
  • alert(msg);
  • }
  • }
  • });

Die Entwickler hinter Vue.js haben sogar einen ausführlichen Vergleich mit den führenden Web-Frameworks zusammengestellt, in dem die einzelnen Unterschiede sowie Nachteile sehr genau beleuchtet werden. Hier wird auch die Funktionsweise von Vue.js noch deutlicher. Bei GitHub steht das Projekt bereit und hat mittlerweile Version 1.0 erreicht.

201618Jan

VerbalExpressions: Reguläre Ausdrücke leicht gemacht

Reguläre Ausdrücke sind auch in der Webentwicklung ein wichtiges Werkzeug, wenn es beispielsweise um die Validierung von Zeichenketten geht. Die Ausdrücke an sich können jedoch schnell sehr komplex werden und diese sind nicht immer leicht zu meistern. Zwar gibt es Tools zur Visualisierung von regulären Ausdrücken, allerdings hilft das nur bedingt.
Vereinfachen lassen sich die Ausdrücke aber dennoch: Zum Beispiel mit einer Bibliothek wie VerbalExpressions, die auch für JavaScript (Browser und Node.js) zur Verfügung steht.

VerbalExpressions - JavaScript Regular Expressions made easy

Dabei handelt es sich um eine Art Hochsprache für reguläre Ausdrücke, die solche durch einfache Funktionen generiert. So lassen sich verschiedene Bedingungen durch Chaining aneinander hängen. Mit Funktionen wie maybe() oder anythingBut() können dann komplexe Abfragen vereinfacht geschrieben werden:

  • var tester = VerEx()
  • .startOfLine()
  • .then('http')
  • .maybe('s')
  • .then('://')
  • .maybe('www.')
  • .anythingBut(' ')
  • .endOfLine();
  •  
  • var testMe = 'https://www.google.com';
  •  
  • if (tester.test(testMe)) {
  • alert('We have a correct URL'); // Output
  • } else {
  • alert('The URL is incorrect');
  • }
  •  
  • console.log(tester);
  • // Output: /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/

Die VerbalExpressions-Bibliothek steht bei GitHub bereit und gibt es gibt Portierungen für nahe zu jede Sprache, darunter PHP, Dart, Swift, Java, Lua und C#.

201615Jan

Chakra: Microsofts JavaScript-Engine wird Open Source

Wie seit kurzem auf dem MSEdge-Developer-Blog zu lesen ist, steht der Quellcode des Kerns der JavaScript-Engine "Chakra" jetzt bei GitHub bereit. Bei Chakra handelt es sich um die JavaScript-Engine von Microsoft, die seit Internet Explorer 9 im Einsatz ist. Bei GitHub steht nun "ChakraCore" zur Verfügung: Dabei handelt es sich um die Kernmodule der Engine, die sich aus verschiedenen Komponenten wie dem JIT-Compiler, dem Interpreter und der Runtime zusammensetzt. Mehr dazu findet sich in der Architektur-Übersicht.

ChakraCore - JavaScript-Engine von Microsoft nun Open Source

ChakraCore beherrscht ECMAScript 2015 und lässt sich zudem mit der JSRT-API (JavaScript Runtime) nutzen. So kann die Engine in eigenen Anwendungen genutzt werden. Der in C++ geschriebene Code kann für x86-, x64- oder ARM-Plattformen kompiliert werden. Dazu ist mindestens Windows 7 (mit SP1) sowie Visual Studio 2013 oder 2015 erforderlich. Eine Linux-Portierung der Engine ist laut Microsoft schon geplant.

201611Jan

Imba: Neue Web-Sprache für Ruby- und Python-Fans

Wer gerne mit Ruby oder Python entwickelt und bei seiner nächsten Webanwendung verstärkt JavaScript einsetzen möchte, könnte einen Blick auf Imba werfen. Dabei handelt es sich um eine neue Web-Sprache, die nach JavaScript kompiliert und sowohl auf der Client- als auch auf der Serverseite eingesetzt werden kann. Der Compiler kann per npm installiert und anschließend per CLI genutzt werden.

Imba - Create complex web apps with ease

Imba versteht sich als minimalistische Sprache und vereint verschiedene Konzepte, unter Anderem auch Konzepte von React und JSX. Zudem arbeitet es in einer TodoMVC-Beispielanwendung bis zu 10x schneller als React. Die Syntax von Imba ist an Ruby angelehnt und es stehen komfortable Funktionen für die Erzeugung und Manipulation von DOM-Elementen bereit. Auf der Website finden sich diverse Beispiele, bei denen auch der generierte JavaScript-Code eingesehen werden kann. Ein Blick in die Dokumentation dürfte mehr Klarheit schaffen.

201610Jan

JavaScript: Jeden Tag ein neuer Tipp

Das neue Jahr ist angebrochen und die Motivation stimmt. Auch für Entwickler kann dies Anlass sein für ein neues Projekt: Wie zum Beispiel die Javascript Tips von Joel Lovera. Es handelt sich dabei um ein GitHub-Repository, das seit dem 29. Dezember 2015 mit nützlichen JavaScript-Tipps erweitert wird.

Dabei decken die Tipps unterschiedliche Bereiche ab: Sowohl Vanilla-JavaScript als auch Frameworks wie AngularJS oder React sind hierbei vertreten. Zudem werden diverse ES6-Funktionen erklärt. Viele Tipps dürften für die meisten Webentwickler selbstverständlich sein, aber es könnte auch die eine oder andere neue Hilfestellung dabei sein. Der Autor freut sich übrigens über weitere Tipps, die bei ihm eingereicht werden können.

201523Okt

Popmotion: Kompakte Bibliothek für Tweening und mehr

Wer DOM-Elemente animieren möchte und dabei eine möglichst realistische Darstellung wünscht, muss sich einer gewissen Mathematik und Physik bedienen. Für derartige Szenarien gibt es bereits fertige Physik-Engine-Portierungen wie beispielsweise Box2D für jQuery. Dabei handelt es sich allerdings um eine sehr komplexe Bibliothek: Wer es etwas schlanker mag, sollte einen Blick auf Popmotion werfen.

Popmotion - JavaScript animation, physics and input tracking

Dabei handelt es sich um eine kleine JavaScript-Bibliothek, die Tweening/Easing und physikalische Eigenschaften (Acceleration, Bounce, Friction, Spring und Velocity) unterstützt. Diese können auf DOM-Elemente und SVG-Pfade angewandt werden. Auch für Touch-Unterstützung ist gesorgt. Wenn man sich dann noch den Vergleich mit Velocity.js und TweenMin/TweenMax von Greensock anschaut, stellt Popmotion eine wirklich interessante Lösung für diese Zwecke dar.

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.