Tag: javascript

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.

201512Dez

Riot.js: Von React inspiriertes Micro-Framework

Das React-Framework von Facebook dürfte mittlerweile in aller Munde sein und stellt zusammen mit AngularJS bzw. Angular 2 das vielversprechendste JavaScript-Framework dar, wenn es um komplexe Single-Page-Applications (SPAs) sowie mobile Web-Apps geht. Wem React etwas zu umfangreich für eine Webanwendung ist, der kann einen Blick auf das Micro-Framework Riot.js werfen.

Riot.js - A React-like user interface micro-library

Dabei könnte man von einem kleinen Bruder von React sprechen, das bestimmte Dinge erweitert und dabei kompakt bleibt (18 KB in minifizierter Form). Riot.js bietet also einen unidirektionalen Datenfluss, einen virtuellen DOM, ES6-Funktionen sowie Expressions innerhalb von HTML. Zudem sind eigene Tags möglich und die Syntax ist etwas leichter zu erlernen als bei React. Riot.js kann auch zusammen mit jQuery eingesetzt werden. Der Quellcode sowie Code-Beispiele finden sich bei GitHub.

201504Nov

Platforms: 3D-WebGL-Spiel wird Open Source

Es gibt wieder ein kleines Update in eigener Sache: Auf eine Anfrage hin habe ich mein WebGL-Browserspiel Platforms in ein Open Source-Projekt umgewandelt. Der Quelltext steht ab sofort bei GitHub bereit. Entwickelt wurde Platforms zusammen mit dem Framework THREE.BasicThirdPersonGame, das auf THREE.js und Cannon.js basiert.

Platforms - A THREE.BasicThirdPersonGame project

Bei GitHub steht lediglich der Quelltext bereit, eine Dokumentation für Platforms gibt es nicht. Der Code ist weitestgehend kommentiert und selbsterklärend. Wer sich für die grundlegenden Konzepte des Spiels interessiert, kann einen Blick in die Dokumentation von THREE.BasicThirdPersonGame werfen.

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.