jQuery Mobile und jQuery UI sind tot

Die bekannte JavaScript-Bibliothek jQuery, welche unter anderem zur Manipulation des DOMs genutzt wird, wird von zwei Bibliotheken flankiert, welche sich dem UI annehmen. Die Rede ist von jQuery Mobile und jQuery UI. Mithilfe dieser Bibliotheken ist es möglich Oberflächen für Webanwendungen zu entwickeln.

Eine mittels jQuery UI entwickelte Webapplikation

Während sich die Bibliotheken weiterhin sehr beliebt sind, was sich unter anderen in den Fragen auf Stack Overflow widerspiegelt, gibt es ein Problem mit den Projekten; sie sind praktisch tot. Der letzte Commit für jQuery UI ist vom Mai 2017 und auch die Entwicklung der letzten Jahre von jQuery Mobile ist sehr übersichtlich. Ansonsten sind viele andere Zeichen zu entdecken das die beiden Projekte tot sind.

Für neue Projekte in der Webentwicklung, sollte sich deshalb nach einem anderen Framework für die Erstellung von Weboberflächen umgesehen werden. Eine Alternative stellt unter anderem Framework 7 dar, welches von der Einfachheit der jQuery UI– und jQuery Mobile-Bibliotheken inspiriert ist.

Internationalisierung mittels JavaScript

Für mein neues Projekt Wryte war ich auf der Suche nach einer Möglichkeit die Anwendung zu lokalisieren. Das genutzte Framework 7 unterstützt leider keine Lokalisierung von Haus aus, so das diese nachgerüstet werden musste. Zum Tragen kam hierbei die JavaScript-Bibliothek i18next. Nach dem Download und der Einbindung der Bibliothek kann diese initialisiert werden:

i18next
  .use(window.i18nextBrowserLanguageDetector)
  .init({
    debug: false,
    resources: {
      en: {
        translation: {
          "about": "About"
        }
      },
      de: {
        translation: {
          "about": "Über"
        }
      }
    }
  });

In diesem Fall wird zusätzlich der i18nextBrowserLanguageDetector eingebunden, damit die Sprache des Nutzers automatisch erkannt wird. Anschließend kann die Übersetzung abgerufen werden:

$('#tab-author').html(i18next.t('author'));

Nach diesem Schema lässt sich anschließend die gesamte Anwendung übersetzen. Die offizielle Projektseite von i18next ist unter i18next.com zu finden. Die Quelltexte der einzelnen Projektbestandteile sind auf GitHub zu finden. Lizenziert ist i18next unter der MIT-Lizenz und damit freie Software.

OpenUI

Frameworks zum Bau von Web-Apps gibt es eine Menge. Neben den bekannteren wie z.B. React und Vue existieren auch einige unbekanntere Frameworks. Eines dieser Frameworks ist OpenUI. OpenUI ist die freie Variante von SAPUI, einer von SAP entwickelten Bibliothek für Web-Apps. OpenUI bietet eine große Anzahl an Komponenten, welche zum Bau von Applikationen genutzt werden können.

Ein Beispiel-App welche mittels OpenUI realisiert wurde

Neben der Unterstützung für MVC, bietet OpenUI eine Reihe von Funktionalitäten wie Lokalisation, Theming, Data Bindings, so das selten andere 3rd-Party Bibliotheken benutzt werden müssen. Integriert in OpenUI ist daneben eine jQuery-Version, so das DOM-Manipulationen mit dieser vorgenommen werden können. Problematisch an OpenUI ist, das es neben der ausgezeichneten Dokumentation, relativ wenige Tutorials und Hilfestellungen im Netz zu finden sind. Die offizielle Seite des Projektes kann unter openui5.org besucht werden. Der Quelltext von OpenUI ist auf GitHub zu finden. Er ist unter der Apache License in Version 2 lizenziert und damit freie Software.

Geocoding in Verbindung mit einer Leaflet-App

Gestern schrieb ich in einem Artikel, wie Adressen aus Koordinaten mittels des Dienstes Nominatim, unter Zuhilfenahme von OpenStreetMap-Daten, ermittelt werden können. Mithilfe der freien Bibliothek Leafleat, kann dies nun in eine kleine Webapplikation gegossen werden.

Anhand der Geo-Koordinate wird die Adresse ermittelt und dargestellt.

Ziel ist es eine Applikation zu bauen, welche eine Karte darstellt und bei einem Klick auf diese Karte den Geocoding-Dienst anfragt. Sobald die Antwort vom Dienst eingetroffen ist, soll in einem Pop-up die Adresse dargestellt werden. Nachdem ein Grundgerüst in Form einer HTML-Datei erstellt wurde, werden dort die benötigten Bibliotheken (Leaflet und jQuery) eingebunden. Anschließend kann die Karte erzeugt werden. Damit diese im Vollbild dargestellt wird, findet sich eine entsprechende CSS-Definition in der Datei:

<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	html, body, #map {
		height: 100%;
	}
</style>

Anschließend kann der TileLayer angelegt werden und der Map zugewiesen werden:

// Options
var centerLatitude=53.49577;
var centerLongitude=13.30873;
var zoomLevel=15;

// Define layer
var openStreetMapLayer = new L.TileLayer(
		'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});

// Define map
var map = L.map('map', {
	center: new L.LatLng(centerLatitude, centerLongitude),
	zoom: zoomLevel,
	layers: [openStreetMapLayer]
});

Für die Karte muss im nächsten Schritt ein Click-Event definiert werden, welches den AJAX-Request gegen den Geocoding-Dienst auslöst und den Marker erstellt. Der jeweilige Marker wird in eine separate Ebene gepackt und beim nächsten Klick wieder gelöscht und anschließend ein neuer Marker erstellt:

// Marker managment
var markerLayer;
map.on('click', function(e){

	// Console debug
	var coord = e.latlng;
	var lat = coord.lat;
	var lng = coord.lng;
	console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

	// Marker managment		
	if(markerLayer != undefined) {
		map.removeLayer(markerLayer);
	}
	
	markerLayer = new L.Marker(e.latlng);
	map.addLayer(markerLayer);

	// Call geocode api
	var request =	$.ajax({
		method: "GET",
		url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
	});

	request.done(function( json ) {
		console.log(json);
		markerLayer.bindPopup(json.display_name).openPopup();
	});
});

Am Stück sieht die Applikation wie folgt aus:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet address encoder</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
	
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 100%;
		}
	</style>
	
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="map"></div>
	
	<script>
	        // Options
		var centerLatitude=53.49577;
		var centerLongitude=13.30873;
		var zoomLevel=15;
		
		// Define layer
		var openStreetMapLayer = new L.TileLayer(
				'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
				{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});
		
		// Define map
		var map = L.map('map', {
		    center: new L.LatLng(centerLatitude, centerLongitude),
		    zoom: zoomLevel,
		    layers: [openStreetMapLayer]
		});
		
		// Marker managment
		var markerLayer;
		map.on('click', function(e){

			// Console debug
			var coord = e.latlng;
			var lat = coord.lat;
			var lng = coord.lng;
			console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

			// Marker managment		
			if(markerLayer != undefined) {
				map.removeLayer(markerLayer);
			}
			
			markerLayer = new L.Marker(e.latlng);
       		map.addLayer(markerLayer);

			// Call geocode api
			var request =	$.ajax({
				method: "GET",
				url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
			});

			request.done(function( json ) {
				console.log(json);
				markerLayer.bindPopup(json.display_name).openPopup();
			});
  		});
	</script>
</body>
</html>

Alternativ kann der Quelltext heruntergeladen bzw. ausprobiert werden.

Unterschiedliche Views in einer Single Page Application

Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:

<div id="options" class="widget" style="display: none">
</div>

<div id="game" class="widget">
</div>

Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:

switchView() {
	  
    if(this.activeView==this.Views.Game) {
        $("#game").css({"display": "none"});
        $("#options").css({"display": "block"});
        this.activeView = this.Views.Options;
    }
    else if (this.activeView==this.Views.Options) {
        $("#options").css({"display": "none"});
        $("#game").css({"display": "block"});
        this.activeView = this.Views.Game;
    }
}

In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.