Tag: mobile-web

201622Jan

CoreSheet: Responsives Sass/CSS3-Framework

Für die Websites meiner Open Source-Projekte habe ich bisher eine CSS-Codebasis sowie ein entsprechendes HTML-Template eingesetzt. Da ich den CSS-Code stetig erweitert habe, ist daraus schließlich ein eigenes Framework entstanden. Es hat eine eigene Website erhalten und steht ab sofort bei GitHub, NPM und Bower zur Verfügung: CoreSheet stellt ein responsives Sass/CSS3-Framework dar, das ein prozentuales Grid-System sowie verschiedene Komponenten enthält. Dazu zählen gestaltete Formulare, Tabellen, Navigationsmenüs, Schaltflächen sowie ein Sticky Footer.

CoreSheet - Responsive Sass/CSS3 framework including a grid system

CoreSheet an sich ist kompakt und beinhaltet nur rudimentäre CSS-Resets und -Normalisierungen. Das primäre Layout setzt sich aus einem horizontal zentrierten Container und den Spalten des Grid-Systems bzw. Rasters zusammen. Das Grid-System ist wie alle anderen Komponenten konfigurierbar, so dass die Anzahl der Spalten und die Breite der Stege eingestellt werden können. Es gibt einen zentralen Breakpoint bei 767px, bei dem alle Elemente umbrechen und auf die volle Breite des Fensters gestreckt werden. Mit den bestehenden Konzepten und Elementen von CoreSheet können direkt responsive Seiten-Layouts erstellt werden. Die Grundidee besteht in einem minimalistischen Framework, das durch eigene Stile erweitert und so auf das Erscheinungsbild (Corporate Design) des eigenen Projekts zugeschnitten wird.
Es gibt zudem Themes, die als Vorlage genutzt werden können. Die Kompilierung der SCSS-Dateien erfolgt durch Gulp. Durch die beiliegende gulpfile.js werden die Sass-Dateien von CoreSheet (Framework, Konfiguration und Theme) eingelesen und die finale CSS-Datei inklusive der minifizierten Variante werden erzeugt. Ein Watcher für die Echtzeit-Aktualisierung ist ebenfalls enthalten.

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.

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.

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.

201502Sep

Pixi.js: 2D-Render-Engine für WebGL- und Canvas-Spiele

Anfang 2013 wurde die Alpha-Version der Engine veröffentlicht, mittlerweile ist das Projekt ausgereift und hat viele neue Features spendiert bekommen: Mit Pixi.js steht eine Render-Engine zur Verfügung, die auf WebGL oder Canvas zurückgreift und an Adobe Flash/ActionScript angelehnt ist. Die Bibliothek basiert auf dem Scene Graph-Konzept und bietet unter Anderem Touch-Support, Unterstützung von SpriteSheet-Animationen, WebGL-Filter, Blend-Modi und vieles mehr.

Pixi.js - 2D WebGL renderer with canvas fallback

Die Beispiele der Engine zeigen verschiedene Szenarien. Mittlerweile gibt es ein breites Spektrum an Projekten, da sich Pixi.js zu einer soliden Render-Engine für HTML5-Browserspiele gemausert hat. Das Open Source-Projekt steht bei GitHub zum Download bereit.

201527Mai

Mobile Apps: Entwicklung mit einer JavaScript-Codebasis

Es ist wieder Zeit für eine Matrix: Diesmal geht es um die Entwicklung von mobilen Apps mit einer zentralen JavaScript-Codebasis. Dies wird mit bestimmten Frameworks möglich, die Cross-Plattform-Support durch HTML oder eine dynamische Runtime ermöglichen. Zu diesem Thema habe ich daher die Mobile App Framework Matrix entwickelt. Sie zeigt Technologien auf, mit denen sich iOS-/Android-Apps durch einen zentralen JavaScript-Code entwickeln lassen. Webentwickler sollen sich ein Bild von den derzeitigen Technologien und ihren Kehrseiten machen können.

Mobile App Framework Matrix - iOS-/Android-Apps in JavaScript entwickeln

Da mobile Cross-Plattform-Apps unterschiedliche Anforderungen haben, eignet sich nicht jede Lösung für jedes Szenario. Wenn es um Erweiterbarkeit, Leistung und Skalierbarkeit geht, variieren die Frameworks in verschiedenen Bereichen.

Weiterlesen...
201501Apr

React Native: Native Apps mit React/JavaScript erstellen

Und noch einmal Facebook: Bei den hauseigenen Open Source-Projekten tut sich momentan etwas. Noch steht die Veröffentlichung der eigenen IDE namens Nuclide aus und inzwischen wurde auch das Framework React Native zum Open Source-Projekt gemacht. Damit lassen sich native Apps für mobile Geräte auf Basis von React erzeugen. Derzeit steht nur die iOS-Version bereit, womit sich jedoch schon arbeiten lässt. Installiert wird das Framework per Node.js und auch die App-Entwicklung stützt sich ganz auf die V8-Engine: Zu Beginn läuft ein lokaler Server, auf den die App zugreift, so dass die App bzw. der View bei Code-Änderungen nur per Tastenkürzel neu geladen und nicht neu kompiliert werden muss.

React Native - A framework for building native apps using React

Das Beispiel funktioniert soweit einwandfrei, doch will man komplexere Anwendungen erstellen oder andere React-Widgets benutzen, erfordert es schon tiefer gehende Kenntnisse des Facebook-Frontend-Frameworks. Bei GitHub finden sich schon etliche Beispiele, welche die verschiedenen Komponenten oder gar Spiele demonstrieren.
Insgesamt ist der Ansatz interessant, allerdings lässt die Android-Unterstützung noch auf sich warten. Daher empfiehlt sich für die schnelle Entwicklung hybrider Cross-Plattform-Apps auf JavaScript-Basis vorerst das Ionic-Framework, das auf AngularJS und PhoneGap bzw. Cordova basiert und eigene JavaScript-/CSS-Komponenten bietet. Wer also ohnehin schon mit AngularJS vertraut ist, dürfte mit dem Ionic-Framework bestens bedient sein. Auch hier geht die App-Entwicklung dank Node.js und LiveReload sehr schnell von statten.

201410Nov

Firefox Developer Edition: Webbrowser für Webentwickler

Anlässlich des zehnjährigen Jubiläums von Firefox hat Mozilla heute die Firefox Developer Edition veröffentlicht, die speziell an Webentwickler gerichtet ist und verschiedene Tools zum Entwickeln moderner WebApps bietet. Der neue Browser soll vor allem das plattformübergreifende Arbeiten von einem Gerät aus erleichtern, was durch das Add-On "Valence" (zuvor: Firefox Tools Adapter) erreicht wird. Dabei handelt es sich um eine Erweiterung, welche die Anbindung an Android-, iOS- oder Firefox OS-Geräte (also Tablets und Smartphones) ermöglicht.

Firefox Developer Edition

Die Firefox Developer Edition besteht also in erster Linie aus dem aktuellen Firefox-Build, der WebIDE und dem Valence-Add-On: Damit können lokale WebApps aber auch Remote-Projekte mit den gängigen Firefox-Tools (Web-Konsole, Seiten-Inspektor, Javascript-Debugger, Netzwerkanalyse, Audio-Editor, etc.) untersucht werden. Die WebIDE enthält verschiedene Integrationen von Laufzeitumgebungen wie beispielsweise einem Simulator, einem Remote-Browser, einer Chrome Desktop-Anwendung, einer Firefox OS-App oder einer normalen Website. Für das Debuggen von Android-Apps wird natürlich ein entsprechender USB-Treiber für das angeschlossene Smartphone benötigt und die Android Debug Bridge (ADB) muss das Gerät per adb devices auflisten. Unter Mac OS X gestaltet sich der Prozess für iDevices etwas einfacher. Besteht schließlich eine USB-Verbindung, können die Tabs des Smartphone-Browsers mit dem Inspektor oder der Konsole bearbeitet werden. Schließlich ist noch ein Tool zur schnellen Kommunikation enthalten: Per Klick können Links erzeugt werden, die dann an andere Entwickler weitergeschickt werden können, wodurch eventuelle Probleme direkt im Browser-Chat diskutiert werden können.
Die Developer Edition von Firefox ersetzt damit den Aurora-Build und wird alle 6 Wochen neue Funktionen erhalten.