Schlagwort-Archive: JavaScript

Alles über JavaScript bzw. EcmaScript

Algorithmen visualisieren

Zur Zeit arbeite ich mich vermehrt in Javascript ein, dort auch in die Visialisierungs-Bibliothek D3 von Mike Bostock. Der Informatiker hat lange für die New York Times aufwendige interaktive Grafiken erstellt, daraus ist diese Bibliothek entstanden. Eine tolle Funktionalität, die aber auch verstanden sein will.

Dabei bin ich über eine sehr schöne Seite gestolpert, wo Bostock an Beispielen für die Visualisierung von Algorithmen zeigt, dass die Qualität der Algorithmen dadurch in vielen Fällen gesteigert werden kann. Schon als Student habe ich ähnlich Demos programmiert, ich errinnere mich noch an einen Bubble- und Quicksort in Assembler auf einem Commodore PET 2001, der direkt auf dem Bildschirmspeicher arbeitet und so die Buchstaben sortierte. Spassig. In Perfektion macht dies allerdings Bostock:

https://bost.ocks.org/mike/algorithms/

Chrome unterstützt ES6 Module

Wer wie ich als Java-Entwickler in die Javascript-Welt eintaucht, vermisst eine vernünftige Gliederung in Module und die Definition von Abhängigkeiten dazwischen. In der alten Javascript-Welt wurden dafür viele Mechanismen geschaffen, deren Gebrauch für den Neuling verwirrend ist. 

Mit EcmaScript 6 (auch EcmaScript 2015) ist eine Definition von Modulen und imports bzw.  exports mit sauberen Sprachmitteln möglich. Ein Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <title>ES6 Module</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="module">
            import {getGreeting} from "./js/greeting.js";
            
            document.getElementById("content").textContent = getGreeting();
        </script>
    </head>
    <body>
        <div id="content">placeholder for content</div>
    </body>
</html>
import * as my from "./mylib.js";

export function getGreeting() {
        return my.addMy("Hello World!");
}
export function addMy(str) {
    return "My " + str;
}

Die gute Nachricht: Moderne Browser wie Chrome (ab Version 61 ohne Flags), Firefox, Safari und Edge (Edge und Firefox allerdings hinter Flags) unterstützen das bereits ohne Zusatzmittel wie Transpiler etc.:

https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

https://caniuse.com/#feat=es6-module

In EcmaScript 6 (synonym ES6 und EcmaScript 2015) sind aber noch viele andere gute Features und syntaktische Erleichterungen enthalten:

http://es6-features.org

JavaScript ist damit eine richtig erwachsene Sprache und wird damit Java immer ähnlicher 😉

Everything a Java Developer Should Know about the JavaScript Landscape

Als altgedienter Java-Programmierer ist mir die schnelle Evolution im Bereich HTML5, CSS3, Single Page Anwendung und Javascript oft suspekt. Was heute noch angesagt ist, ist morgen schon old school. Mit Entwicklung in Apache Wicket, mit dem ich gerne arbeite, bin ich ja auch ein Vertreter des alten serverzentrierten Ansatzes. Trotzdem bleibe ich am Ball und schaue mir die neuen Tendenzen und Hypes an.

Geertjan Wielenga hat auf der JAX London eine gute Präsentation zum Thema gehalten. Auch wenn ich nicht alle seine Tipps sofort akzeptiere (bei Tipp 8 und 9 kriege ich Gänsehaut) oder für richtig halte, sind seine Überlegungen und Empfehlungen sehr wertvoll.

Parallax Scrolling

Heute habe ich eine digitale Weihnachtskarte von Zyxel erhalten, die einen interessanten optischen Effekt verwendete: Beim Scrollen nach unten mit der Scrollbar wechselte das Bild  auf interessante Art und Weise. Faszinierend, was diese Javascript-Kiddies alles so zustande bringen. Da komme ich mir manchmal schon ein bisschen old-school vor. Es handelt sich dabei um skrollr, und hier ist ein Beispiel:

http://prinzhorn.github.io/skrollr/

Der Begriff dazu ist Parallax Scrolling, aber scrollr hat nur damit angefangen, kann inzwischen weit mehr.

Weiterlesen