Unstoppable growth of front-end frameworks

A simple summary of the web front-end evolution, which will try to describe how and why tools improve & why there is still something to explore.

JavaScript.addEventListener('birthday-parties', presentation.log)

  1. Date of Birth: May 1995
  2. Standardization: June 1997
  3. jQuery's Date of Birth: January 2006
    jQuery's 3.0.0 Birthday Party: Jun 9, 2016
    jQuery statistics from github jQuery statistics from npm
  4. webpack's Date of Birth: Feb 19, 2014
    webpack's 4.0.0 birthday party: Feb 25, 2017
    webpack statistics from github webpack statistics from github
Backbone by google
Source: https://www.google.sk/search?q=backbone+js

Backbone Models and Views

Model-View Separation.
  • Orchestrates data and business logic.
  • Loads and saves from the server.
  • Emits events when data changes.
  • Listens for changes and renders UI.
  • Handles user input and interactivity.
  • Sends captured input to the model.
knockout by google
Source: https://www.google.sk/search?q=knockout+js

Knockout basics

Knockoutjs source code example
angular by google
Source: https://www.google.sk/search?q=angular+js

AngularJS Tutorial steps:

0 - Bootstrapping
1 - Static Template
2 - AngularJS Templates
3 - Components
4 - Directory and File Organization
5 - Filtering Repeaters
6 - Two-way Data Binding
7 - XHR & Dependency Injection
8 - Templating Links & Images
9 - Routing & Multiple Views
10 - More Templating
11 - Custom Filters
12 - Event Handlers
13 - REST and Custom Services
14 - Animations
The End
angular2 by google
Source: https://www.google.sk/search?q=angular2
angular2 architecture
Source: https://angular.io/generated/images/guide/architecture/overview2.png
react by google
Source: https://www.google.sk/search?q=react
react by google
Source: https://medium.com/@murtazazaidi_/
vue by google
Source: https://www.google.sk/search?q=vue
vue by google
Source: https://vuejs.org/
vue by google
Source: https://dev.afas.nl/blog-dev/

Google trends

google trends graph
Source: https://trends.google.com/trends/explore?cat=32&date=all&q=%2Fm%2F0j45p7w,%2Fm%2F012l1vxv,jquery

npm downloads

npm downloads graph
Source: https://npm-stat.com

github stars

github stars graph
Source: http://www.timqian.com/star-history/
Duration in milliseconds ± standard deviation (Slowdown = Duration / Fastest)
Source: https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html
Startup metrics
Source: https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html
Memory allocation in MBs ± standard deviation
Source: https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html
  • Client applications are getting richer
  • Backend for frontend
  • Systems are more reactive
  • Keep exploring
  • Rethink best practices
  • ...
  • Thank you