Web Performance Optimisation (Part 2): Perceived Performance

In the previous article of this series we talked about the boundaries of Web performance optimization (WPO). We introduced some metrics and a scale of measurement but we omitted one large part of the problem due to the purely technical point of view we took previously. In reality, while time and performance can be measured objectively it is perceived subjectively by humans. Static measurement scales and performance analyses are relevant for performance measurements but largely irrelevant in real world usage. As long as users have to interact with an application we have to make sure that we test and evaluate the application’s performance from a real user’s perspective. Consequently in this part of the series we want to talk about perceived performance and why it makes sense to put the user first when it comes to WPO. Weiterlesen

Using ReactJS with AngularJS

After releasing React in 2013, Facebook kicked off some discussions in the JavaScript community about comparing React with common libraries. Indeed, the library increases the pressure on established Frameworks because of its many modern ideas and patterns. Concepts like the implementation of a virtual DOM and the component architecture allowed programmers to create web applications which run faster and are more easily maintainable. At the same time frameworks like Angular still suffer from performance problems heating up the discussions about their concurrency.

Beside the ongoing competition between React and Angular, some people try to benefit from both technologies. The ngReact library is an example of such an approach. The Angular module allows using React as a view component inside Angular applications. Usual Angular templates can be replaced with React components which try to give you more flexibility and promise to improve the overall performance.

This blog article examines the use of the ngReact module to speed up Angular’s list rendering performance. Weiterlesen

Angular 2 und Third-party Libraries

Will man seine Anwendung schrittweise von Angular 1 auf Angular 2 upgraden, gibt es neben den neuen Konzepten und Features auch Nebeneffekte, die ein einfaches Upgraden der Anwendung erschweren. Gemeint ist die Kompatibilität von Third-party Libraries, die in Angular 2 nur noch bedingt oder gar nicht mehr funktionsfähig sind. In diesem Teil soll deshalb ein Überblick über die Bibliotheken gegeben werden, die im Verlauf unseres Upgrades auf Angular 2 Probleme aufgeworfen haben. Weiterlesen

Web Performance Limitations (Part 1)

When web developers talk about the web today they often discuss topics around web performance optimization (WPO). Nowadays it’s an even more important topic, since we use the browser for almost any type of application with many different devices and different connection types from all over the world. It’s a complex environment where dozens of lines of code get written and executed. Companies like Amazon and eBay have huge decreases in revenue when their site loading times increase. In 2008, Amazon reported that they approximately lose 1% of revenue for every 100 ms increase in loading time, which when we think about the revenues of Amazon in 2015 (107 billion dollar a year) would imply a loss of 1.07 billion dollar a year.

And that’s by far not everything. In a recent talk given by one of the head Opera developers, Bruce Lawson mentioned that more users and devices will hit the WWW: Emerging markets like Africa and India are growing fast. He predicts that we will have roughly 3 billion more users using the WWW in the next 50 years and that they will come from emerging markets. They will not connect to the internet with a high end desktop computer, they will start using the internet with a low budget smartphone, with slow internet connections and low processing capabilities. These markets will eventually be our next customers, and therefore we need to emphasise the need of performance, so that everybody is able to use our web applications no matter their device or internet connection quality!

In this blog series I want to discuss what web performance is, how to look at it from a user-centric perspective and show which kind of optimization techniques we can use to make our web applications faster.

First, let’s start this series by showing the limits of web performance optimization to increase awareness for measurement parameters like seconds (sec) and milliseconds (ms). Weiterlesen

Anwendungen von AngularJS auf Angular 2 migrieren [Tutorial]

AngularJS 1 ist ein gutes, stabiles Framework, um Web-Anwendungen zu erstellen. Durch die Entscheidung der Angular(JS)-Entwickler, die Nachfolgeversion des Frameworks auf komplett neue Füße zu stellen, sind viele Entwickler unsicher, ob sie ihre bestehende, gut funktionierende AngularJS-Anwendung updaten sollen oder nicht. Das Elster-Naturell vieler Entwickler trägt wahrscheinlich seinen Teil dazu bei. Zur Beruhigung dieser Leser kann gesagt werden: AngularJS 1 wird nicht morgen als deprecated gekennzeichnet werden; durch die große Verbreitung von AngularJS 1 wird dieses Framework noch eine ganze Weile eine wichtige Rolle in der Entwicklung von Web-Anwendungen spielen. Ein Upgrade kann dennoch sinnvoll sein, da Angular 2 viele sinnvolle neue Konzepte und Features einführt, von denen die Entwicklung einer wartbaren, sauber strukturierten Anwendung nur profitieren kann. Weiterlesen

Comparing Cloud Providers: Amazon vs. Google vs. Microsoft

If you ask a developer about their favorite programming language, the answer will most likely be the one they are most familiar with. The same applies to decisions about which public cloud provider to choose. In this post we’ll take a look at a different approach, which allows us to compare the three big public cloud providers (Amazon, Google and Microsoft) in a reproducible way. To be more precise, we’ll take a look at the Infrastructure as a Service (IaaS) offerings with some glances to additional services in the field of cloud computing. Weiterlesen

Google I/O 2016: Zusammenfassung & Podcast

Vom 18. bis 20. Mai fand in Mountain View die Google I/O 2016 statt. Das Wochenende ließ genug Zeit zu reflektieren und zu analysieren, welche Ankündigungen der Entwicklerkonferenz relevant waren – und genau diese fassen wir in unserer Übersicht zusammen. Die besonders diskussionswürdigen Ankündigungen besprechen wir zudem in einem Sonder-Podcast. Weiterlesen

Cross-compiling binaries for fun and… no, just for fun

Today we’re going to mix things up a little bit with something not so enterprise-y. This is from a side-project of mine. As is always the case with side-projects, you need to strike the right balance between „Oh, look at this shiny new technology!“ and „I wanna get things done!“. For this specific project, I’m more on the side of getting things done. Also, this is not a concrete How-To—just an account of my travels. Weiterlesen

Polymer: Flux-Architektur im DOM

Mit Polymer und Web Components kann durch hierarchische Unterteilung und Komposition eine aufgeräumte, gut erweiterbare Struktur einer Web App aufrechterhalten werden. Wächst die Anwendung jedoch konstant weiter, müssen zusätzliche Strukturen gefunden werden, um den Datenfluss durch die Anwendung vorhersagbar und wartbar zu machen. Wer mit seiner Anwendung an diese Stelle im Entwicklungsverlauf kommt, hat die Möglichkeit, eine maßgeschneiderte, für die Anwendung genau passende Architektur selbst zu entwerfen und umzusetzen. Diese Vorgehensweise führt jedoch oft nicht zum gewünschten Ergebnis, da in dieser Phase leicht subtile Fehler gemacht werden können, die sich im späteren Projektverlauf stärker und stärker auswirken und schwer zu beheben sind, da die Fehler schon im grundlegenden Aufbau liegen.

Mit der von Facebook veröffentlichten Flux-Architektur, die als über die Jahre entwickelte Best-Practice-Lösung von Facebooks eigener Web App zu verstehen ist, steht ein Entwurf bereit, der von vielen kleineren und größeren Anwendungen adaptiert und daher gut getestet und validiert wurde.

Weiterlesen