Tag: mobile-web

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, doch für echte Cross-Plattform-Apps auf JavaScript-Basis empfiehlt sich bis auf Weiteres immer noch Ionic, das auf AngularJS, PhoneGap und 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 extrem 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.

201405Nov

Angular 2.0: Ausblick auf die Zukunft des Frameworks

Wer ab und zu auf der offiziellen AngularJS-Website vorbeischaut, wird eventuell auch das Video "Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014" gesehen haben. Die kommende Version 2.0, die frühestens Ende 2015 erwartet wird, zeichnet sich durch eine komplette Rundumerneuerung aus: An der Template-Engine hat sich Einiges getan, Web Components werden unterstützt und der neue Core basiert schließlich auf ES6 — genauer gesagt basiert er auf AtScript, einem TypeScript-Pendant von Google. Die Keynote zu AtScript findet sich bei YouTube. Natürlich wird AngularJS 2.0 auch nach ES5 kompilieren, um jetzige Browser zu unterstützen.

AngularJS - Superheroic JavaScript MVW Framework

Auch der Einsatz des jqLite-Wrappers wird optional, da Angular 2.0 auf neue Browser-Technologien ausgelegt sein wird. Diese beinhalten moderne DOM-Methoden, Web Components, Shadow DOM, Object.observe(), ES6 und ES7. Das sind die Funktionalitäten, die Angular bereits jetzt größtenteils abgedeckt und simuliert. Mit Object.observe() etwa werden Zwei-Wege-Data-Bindings nativ möglich sein und viele weitere Bereiche werden Angular in seiner jetzigen 1.x-Form ablösen. Die Community ist hier derzeit gespalten, da sich eine Migration von 1.x auf 2.x sehr komplex gestalten wird. An die Anpassungen, die Angular-Frameworks wie Ionic vornehmen müssen, ist hier noch garnicht zu denken.
Es gibt natürlich kritische Stimmen, die die negativen Seiten des MVW-Frameworks beleuchten und auch widerlegen. Doch viele der Punkte werden in Angular 2.0 nicht mehr relevant sein, da es beispielweise kein $scope mehr geben wird. Entgegen einiger Meinungen hat die Erfahrung gezeigt, dass sich AngularJS hervorragend für größere Projekte, mobile WebApps (PhoneGap/Cordova) oder gar Desktop-Anwendungen eignet und durch eventuell notwendige Optimierungen eine solide Arbeitsweise an den Tag legt.

201415Sep

Chartist.js: Skript für responsive SVG-Diagramme

Sie heißen Highcharts, Raphaël, D3.js oder gar C3.js: Interaktive Chart-Bibliotheken, mit denen sich SVG-Diagramme aller Art erstellen lassen. Dank HTML5 ist die Darstellung von Vektorgrafiken und -Graphen kein Problem mehr und durch JavaScript lässt sich Interaktivität hinzufügen.
Dem Entwickler Gion Kunz genügte dieser Zustand allerdings noch nicht, denn er wollte eine SVG-Bibliothek, die noch einfacher zu konfigurieren ist und zudem auch mit responsiven Websites funktioniert. Daher schuf er das Skript Chartist.js, dessen Diagramme sich unter Anderem mit CSS und SASS anpassen lassen. Hier sind zudem Animationen möglich.

Chartist.js - Simple responsive charts

Weiterhin lässt sich die Bibliothek per JavaScript konfigurieren, wobei hier auf eine Art Media Queries zurückgegriffen werden kann:

  • var responsiveOptions = [
  • ['screen and (max-width: 640px)', {
  • showLine: false,
  • axisX: {
  • labelInterpolationFnc: function(value) {
  • return 'Week ' + value;
  • }
  • }
  • }]
  • ];

Dadurch sind auch skalierbare Auswertungen einfach umzusetzen, die zudem auf Smartphones und Tablets optimiert werden können. Mehr Infos gibt es wieder bei GitHub.

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.

201429Aug

Marka: Skript für animierte CSS3-Icon-Transformationen

Mit HTML, CSS3 und entsprechenden Stilen lassen sich diverse Symbole erzeugen. Mit etwas JavaScript können dann animierte Transformationen durchgeführt werden, die beispielsweise an ein Klick-Ereignis gekoppelt sind. Wofür solche Transformationen gut sein können, ist beispielsweise in Googles Design Guidelines für das neue Material Design zu sehen. Auf mobilen Geräten können derartige Animationen verwendet werden, um ein verbessertes Verständnis der verschiedenen Navigationsebenen zu ermöglichen.
Mit Marka steht eine kompakte JavaScript/CSS3-Lösung bereit, mit der sich genau solche Animationen erzeugen lassen.

Marka - Beautiful transformable icons

Mit der Bibliothek kommen 36 einfache Icons die per JavaScript animiert werden können. Neben Form-Transformationen können auch Farbübergänge erzeugt werden. Eine genaue Dokumentation findet sich hier und das gesamte Projekt gibt es wieder bei GitHub.

201422Aug

DeLorean.js: Framework für Flux-Architekturen

Mit React wurde vor einiger Zeit ein JavaScript-Framework von und für Facebook veröffentlicht: Dabei handelt es sich um eine Komponente der Flux-Architektur, die sich als Pattern für Web-Applikationen versteht und bei dem sozialen Netzwerk zum Einsatz kommt. React stellt in der Flux-Architektur einen "View-Controller" dar, der sich bei dem Konzept in den unidirektionalen Datenfluss einfügt — dadurch wird die Business-Logik einfacher als bei einer MVC-Anwendung und die Daten bleiben in allen Bereichen, also auf dem Server und im Client, konsistent.

Flux - Application Architecture for Building User Interfaces

Eine Flux-Anwendung besteht also aus den drei folgenden Bereichen: Dispatcher, Stores und Views, wobei Letztere durch das React-Framework und JSX-Templates repräsentiert werden. Änderungen im Client werden also von einer React-Komponente erkannt und an eine Web-API weitergegeben, die wiederum lokale Stores durch entsprechende Dispatcher aktualisiert, wobei ein Dispatcher dafür sorgt, dass auf eventuelle Callbacks von anderen abhängigen Stores gewartet wird. Wer das Ganze in Aktion sehen möchte, kann sich das Flux Chat Example dazu ansehen.
Eine weitere interessante Anlaufstelle für das Flux-Pattern stellt nun auch das Framework DeLorean.js dar, das nicht nur mit React, sondern auch mit anderen Lösungen, wie etwa Flight.js von Twitter, eingesetzt werden kann. Durch entsprechende Fiddles von DeLorean.js dürfte die Funktionsweise von Flux etwas einfacher zu verstehen sein.

201414Aug

Next-Gen-JS-Frameworks: Pro, Contra und Neuansatz

Sie heißen AngularJS, Backbone.js, Ember.js, Polymer und React: Die Next-Gen-JavaScript-Frameworks, mit denen schon jetzt moderne Webanwendungen und Portale realisiert werden. Die Frameworks bieten in der Regel keine gewöhnlichen Funktionen wie DOM-Manipulationen, Effekte oder Ähnliches, sondern warten mit neuartigen Konzepten für Client-Templates, Bindings und Model-View-Controller-Alternativen auf. Ende letzten Jahres hatte ich einen Artikel darüber verfasst, wie sich die Welt der JavaScript-Frameworks in den kommenden Jahren verändern wird.

Google Trends - angularjs, knockoutjs, ember js, backbone.js

Auch gibt es bereits ausführliche Vergleiche der Next-Gen-Frameworks, in denen die Bibliotheken beleuchtet und mit einem Fazit versehen werden. Im Blog von "&yet" findet sich nun ein aktueller "Opinionated Rundown of JS Frameworks", in dem auch React und Polymer betrachtet werden. Neben Pros und Contras stellen die Entwickler am Ende des Artikels schließlich ihr eigenes Framework Ampersand.js vor, das die genannten Punkte verbessern will. Ob sich das "highly modular, loosely coupled, non-frameworky" Framework durchsetzen wird, dürfte sich bald herausstellen.
AngularJS erfreut sich immer größerer Beliebtheit und inzwischen gibt es mit Ionic sogar schon eine PhoneGap-/Cordova-Erweiterung, die auf AngularJS basiert und eine solide Basis für native Smartphone-Apps darstellt, die mit JavaScript entwickelt werden können.