Ein Einblick in Facebook’s React

react-featured

React, Facebook’s JS Library für die Erstellung von User Interfaces, ist seit letztem Jahr mächtig im Aufwind. Der neuste Hype wurde durch die React Conf Keynote ausgelöst, an welcher React Native vorgestellt wurde: die Möglichkeit native iOS und Android Apps mit React zu entwickeln. (mehr …)

Frontend Conference 2014

frontend-conf14

Was bisher geschah

Ich bin dabei: Auf der diesjährigen Frontend Conference am 28. und 29. August in Zürich ist Namics nicht nur einer der Hauptsponsoren. Mit insgesamt sieben wissbegierigen Frontendlern auf dem Event sind wir auch personell stark vertreten. Die Conference bietet eine Plattform zum Austausch und zur Weiterbildung und richtet sich an Frontend- und UX-Entwickler und -Designer gleichermaßen. Das Event findet dieses Jahr bereits zum vierten Mal in Folge statt und erfreut sich stetig steigender Besucherzahlen. Grund genug für mich, die Veranstaltung dieses Jahr zu besuchen.

Donnerstag // Introduction Keynote

Mit der Introduction Keynote eröffnen die Veranstalter das Programm: Die Talks in den kommenden zwei Tagen verteilen sich auf zwei parallel laufendeTracks. Während im Tech-Track neue Entwicklungen, Tools und Techniken vorgestellt werden, widmet sich der Design-Track den Themen Layout, Storytelling und Design. Mir ist es also nicht möglich, alle Talks anschauen zu können. Macht aber nichts, denn alle Talks werden nicht nur in die weite Welt hinaus gestreamt, sondern auch anschließend in einer aufbereiteten Version im Netz zur Verfügung gestellt. Eine tolle Sache, wie ich finde. Hier stelle ich nun einige Talks vor, die ich als meine persönlichen Highlights empfunden habe.

Donnerstag // Tech-Highlight

Wie der Titel „ECMAscript 6: Wha’t next for JavaScript“ bereits erahnen lässt, stellt Axel Rauschmayer die Neuerungen der kommenden ECMAScript-Version 6 vor. ECMAScript bildet den standardisierten Sprachkern von JavaScript, der mächtigsten Waffe des Frontendlers im Kampf gegen starre und langweilige Websites. Fazit nach dem Talk: Da kommt einiges auf uns zu! Es wird dringend nötig sein, sich mit den neuen Möglichkeiten auseinander zu setzen und altbewährtes zu hinterfragen. Wir werden vorbereitet sein..!

Donnerstag // Design-Highlight

John Peebels erzählt gerne Geschichten. Sehr gerne. Im Grunde sein besteht Talk „Designing through narrative“ aus aneinandergereihten Anekdoten und während das Publikum gebannt an seinen Ohren hängt, erklärt er uns wie beiläufig, wie wir diese Technik des „Storytelling“ im Design einer Webseite unterbringen können. Dieser Talk ist eine Mischung aus Unterhaltung, Charmanz und Wissensvermittlung und damit ganz großes Kino.

Freitag // Tech-Highlight

Früher oder später kommt die Zeit im Leben eines Frontendlers, dass er sich mit Browserkompatibilität und Mobilen Viewports auseinandersetzen muss. Crashkurs gefällig? Bitte sehr: In seinem Talk „Mobile Viewport“ erklärt Peter-Paul Koch fundiert und humorvoll (und in sehr hoher Geschwindigkeit) so viel Basiswissen, Fortgeschrittene Techniken und echte Geheimtipps, wie in eine Stunde hineinpassen. Bitte mehr davon!

Freitag // Design Highlight

Was haben das Smashing Magazine und Responsive Webdesign gemeinsam? Richtig, einen vollen Saal bei der Frontend Conference. Und wenn man Vitaly Friedman sprechen gehört hat, dann weiß man auch warum. RWD ist bis heute eines der Top-Themen der vergangenen Jahre und im Talk „Responsive Design Workflow: Clever Tricks and Techniques“ erzählt uns Friedman, welche Methoden empfehlenswert sind und welche man besser vermeiden sollte.

Fazit // Fortsetzung folgt …

Webtechnologien entwickeln sich nach wie vor in sehr kurzer Zeit ständig weiter. Neue Erkenntnisse, Tools oder Technologien bringen uns dazu umzudenken, auszuprobieren und anzuwenden. Events wie die Frontend Conference helfen nicht nur, einen Überblick über aktuelle Trends und Entwicklungen zu bekommen oder besonders interessante Themen zu fokussieren. Auch der Austausch mit den Kollegen aus aller Welt ist es, der einen nicht nur menschlich, sondern auch fachlich voranbringt. Die Conference war für mich eine sehr gelungene Veranstaltung, deren Besuch sich auf jeden Fall gelohnt hat! Gegen eine Fortsetzung in einer der nächsten Jahre hätte ich sicherlich nichts einzuwenden..

Links

Web Components: HTML Imports

Web Components

In einem früheren Post zu HTML Templates wurde erklärt wie Templates erstellt werden können. Um eine grosse Anzahl solcher Templates übersichtlich zu verwalten müssen diese ausgelagert werden und wie Stylesheets oder Skripte eingebunden werden. Dieses Ziel erreicht man durch den … Weiterlesen

Spartan – Next Generation Grid System

Spartan ist ein simples und doch extrem flexibles LessCSS Grid System, welches einem ermöglicht mit Leichtigkeit verschiedenste responsive Layouts aufzusetzen.

Egal was der Designer einem präsentiert, mit diesem Grid lässt sich alles umsetzen. Ob viewport abhängige Gutter oder sogar unterschiedliche Anzahl Columns, Spartan sind keine Grenzen gesetzt.

Dynamische online Demo.
(mehr …)

Frontend Build-Prozess mit Grunt

Grunt ist ein Tool, mit welchem sich wiederkehrende Aufgaben im Frontend automatisieren lassen. Das ganze basiert auf einem Ökosystem an Plugins, welche in einem Gruntfile.js konfiguriert und so an das jeweilige Projekt angepasst werden können.

grunt-logo

Zu diesem Blogpost gibt es ein Grunt Beispielprojekt auf GitHub, welches die nachfolgend beschriebenen Features abdeckt:

Zudem werden CSS und Javascript Sourcemaps unterstützt sowie Live Reloading im Browser.

github-logoGrunt Beispielprojekt auf GitHub

(mehr …)

Web Components: HTML Templates

Web Components Logo
HTML Templates, das erste Puzzlestück zum Verständniss von Web Components.

Wer Mustache, Handlebars oder doT.js bereits einmal eingesetzt hat ist vertraut mit dem Konzept des Frontend Templating. HTML Templates ist die native Browserumsetzung dieses Konzepts.

HTML Templates sind Markup Schnippsel die es vereinfachen nach dem Laden einer Seite dynamisch Markup hinzuzufügen. Der Inhalt des Templates ist zu Beginn inaktiv und wird beim Seitenaufbau lediglich auf Validität überprüft. Sprich Script Code wird nicht interpretiert, Bilder, Audio sowie andere Resourcen werden nicht geladen und das Markup wird nicht gerendert.
Auf das Markup im Template kann man auch nicht zugreifen über das Dokument Objekt (sprich mit dem querySelector). Erst beim Klonen eines Templates erwacht das Template zum Leben.

(mehr …)

Web Components: Einführung

Web Components

Web Components geben den Entwickler die Möglichkeit das bestehende Set an HTML Elementen mit eigenen Definitionen zu erweitern. Diese Definitionen kapseln Markup und Styles gegen aussen und gewährleisten dass die Elemente immer wie gewünscht aussehen, ungeachtet des Kontexts. Das Konzept … Weiterlesen

Dart. TypeScript. JavaScript Supersets / Compiled JavaScript.

compiledjs

Die Popularität von Frameworks wie AngularJS zeigt deutlich, dass Webapplikationen und moderne Webauftritte immer Frontendlastiger werden. Um den Nutzern ein reibungsloseres/flüssigeres Ergebnis zu bieten, wird immer mehr Funktionalität in JavaScript implementiert, welches häufig nur noch via Services zum Backend kommuniziert. … Weiterlesen

Defer JavaScript für schnelleres Laden

JavaScript blockiert den Ladevorgang

Wenn der Browser-HTML-Parser zu einem SCRIPT-Tag mit SRC-Attribut gelangt, wird die entsprechende JavaScript-Datei heruntergeladen und der darin enthaltene Code sofort ausgeführt. Inhalte die nach dem SCRIPT-Tag stehen werden erst geparsed, nach dem das JavaScript ausgeführt wurde. Abhängig von Dateigrösse und Komplexität der JavaScript-Datei, kann der Parse-Prozess des Browsers und die Ladezeit der Website zum Teil massiv beeinträchtigt werden. Das führt zu einer unnötig langen Wartezeit für den Benutzer und einer schlechteren Position im Suchresultat von Suchmaschinen wie Goolge. Die Wartezeit kann verkürzt werden in dem das JavaScript, oder zumindest ein Teil davon zeitlich verschoben (engl. defer) geladen und ausgeführt wird. Dieser Vorschlag stammt von Google und ist als Best Practice unter den PageSpeed-Regeln dokumentiert.

(mehr …)