Made modern JavaScript Flash obsolete

Matthias Schütz - Web design / web development / AngularJS / Photoshop / TYPO3

201330Dec

Web 3.0: JavaScript Frameworks and the Future

The headline was intentionally given the buzzword "Web 3.0", as the "version number of the web" is often used as a synonym for the future of the Internet and the term gets to the heart of this article: It is not about Web 3.0 in its entirety, So it's about artificial intelligence and ubiquitous computing, but about the beginning of a new JavaScript era. While the term "Web 2.0" in relation to JavaScript characterizes the previous JavaScript frameworks and thus above all jQuery, a change in the area of ​​web development can be seen in 2013, which is characterized by new approaches such as MVC frameworks or Node.js. The jQuery era is still ubiquitous, but with the increasing spread of modern web browsers and HTML5 / CSS3 as well as ECMAScript 5 and 6 that will change in the future.

The graphic is intended to roughly illustrate how the development of web standards and JavaScript frameworks has progressed since 2009. ECMAScript 6 alias "Harmony" should reach its final status at the end of 2013. Libraries like MooTools, Prototype or Dojo were once developed to make writing JavaScript applications easier and to make it easier to add special features to a website. This mainly included animation and the use of Ajax, which ultimately helped JavaScript to make its breakthrough. Even today, the features of current frameworks are still essential, although the distribution and popularity of the various libraries has changed somewhat. The graphic above shows the popularity of the JavaScript frameworks and jQuery is likely to be the clear favorite in the field of Ajax and DOM frameworks today, i.e. at the end of 2013.

A look at this Google Trends analysis shows the search history of the most popular JavaScript frameworks from 2006 to 2008. After 2008, the curve of jQuery search queries continues to rise steeply.

The situation is similar with searches for "next-gen frameworks" such as AngularJS, Knockout.js or Backbone.js: Here, too, AngularJS seems to slowly but surely stand out from the other libraries, as this analysis shows.

There are no real winners or losers with the Ajax / DOM frameworks or the MVC frameworks: It depends on the respective project and the preferences of the developer which frameworks are ultimately used for implementation:

  • What are the minimum requirements for the target audience's web browser?
  • What are the requirements for the application's user interface?
  • Is a database connection required and thus a corresponding API or JSON endpoints?
  • Should a single-page application be implemented in which the routing is handled by JavaScript?

Choosing the right framework plays an important role, especially when it comes to the question of whether navigation through a web application takes place via Ajax or via round trips. It can be said, however, that HTML5 and CSS3 will change the world of JavaScript frameworks. Animations and effects can be implemented with CSS3, HTML5 offers numerous interfaces for multimedia content as well as interactions and native JavaScript functions make parts of existing frameworks superfluous. Solutions such as Knockout.js or AngularJS will become even more important in the next few years, whereas the use of Ajax / DOM frameworks will become of secondary importance. In 2012 Steven Sanderson, the developer of Knockout.js, had already published a summary of the 7 next-gen frameworks that should shape the web in the future.

It continues in the server area: With Node.js, the script language can now also be used in a server environment and the browser manufacturers have given developers an extensive repertoire with ECMAScript 5, in which more than enough interesting functions for a modern Web application are included. There are now a number of larger projects that use Node.js or require Internet Explorer 9 (and thus ES5) as a minimum.
With Node.js, JavaScript code can therefore be used on the client and on the server. Such apps are described at Airbnb as "Isomorphic JavaScript". In a blog entry, the Airbnb developers took a look into the future of JavaScript apps and highlighted possible advantages and disadvantages if JavaScript is also used on the server. There are already interesting solutions such as the Meteor Framework that are designed precisely for this. But the question remains whether classic approaches such as Apache / PHP / MySQL, Apache / Ruby on Rails / MySQL or IIS / ASP.NET / MSSQL can and should be replaced by JavaScript and a NoSQL solution. In addition to the fact that only one language has to be used on the client and server side, these points should contribute to a decision:

  • Development Environments (IDE)
  • Standard libraries (ORM, Security, Cryptography, Globalization, etc.)
  • Type safety, language features (e.g. reflection) and compiler errors
  • Scalability, load balancing

On the client side, however, the above-mentioned MVC frameworks have already proven themselves and the journey continues steadily: Web Components and, for example, the Polymer Project are also an interesting method for realizing modern web applications. This means that HTML / JavaScript components can be generated where the configuration is carried out using HTML attributes. An example:

  • params = '{"old": "json", "q": "chrome"}'
  • handleAs = "json"
  • on-polymer-response = "{{handleResponse}}">
  • </polymer-ajax>

It is therefore the counterpart to Directives as they can be used in AngularJS. With this technology, web applications can be built up modularly and in the HTML source text it is easy to see how a component is set.

In addition to HTML components, JavaScript templates are also an important aspect of future web applications. The developers of Facebook have already published an interesting approach in this regard called React, with which JavaScript-XML notations (JSX) are possible:

  • var app = ;

As with Knockout.js or AngularJS, the React framework focuses on declarative bindings that enable the connection of DOM elements and JavaScript variables. The development of web applications will become easier in the future, since such libraries already relieve developers of a lot of work and enable reusable building blocks. In summary, the main criteria of modern JavaScript applications can be broken down as follows:

  • Configurable HTML components
  • Two-way data bindings
  • Extended JavaScript templating
  • JavaScript modules (AMD, ES6)
  • Test Driven Design, Unit Testing

The different MVC / MVVM frameworks have different functionalities and most libraries should cover the first 3 points. When it comes to the last point, AngularJS should be the first choice: Thanks to Karma, a very fast test runner based on Node.js, the development of a JavaScript app can be completely test-driven. Automated unit tests can be easily written in Jasmine and can even be executed directly in WebStorm.

Overall, the next few years should remain exciting for web developers, as not only browser manufacturers and consortia, but also the developer community themselves contribute to the modernization of web applications.