Tag: oop-mvc

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.

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.

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.

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.

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.

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.

201519Jul

JavaScript: Weitere nützliche Artikel zu ECMAScript 6

Aktuell tauchen immer wieder interessante Artikel und Anleitungen rund um den kommenden JavaScript-Standard ES6 auf, der längst durch Transpiler wie Babel genutzt werden kann. Zuletzt zeigten namhafte Entwickler auf, wie sich ES6 schon jetzt durch entsprechende Tools in Projekten nutzen lässt. Im vorherigen ES6-Round-Up ging es primär um Maps, Module und Template Strings.

ECMAScript 6 - Harmony

Die folgenden Artikel befassen sich mit Destructuring, Loops, Arrays, Promises und Module im Detail.

Der letzte Link zeigt nur auf einen Teilbereich bei Medium — dort findet sich eine ganze Reihe mit ausführlichen Erklärungen rund um ES6-Themen.