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)

Date of Birth: May 1995
Standardization: June 1997
jQuery's Date of Birth: January 2006

jQuery's 3.0.0 Birthday Party: Jun 9, 2016
webpack's Date of Birth: Feb 19, 2014

webpack's 4.0.0 birthday party: Feb 25, 2017

Backbone by google — Source: https://www.google.sk/search?q=backbone+js

Backbone Models and Views

Model-View Separation.

Model

Orchestrates data and business logic.
Loads and saves from the server.
Emits events when data changes.

View

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

Links

webpack
Front-end libraries & frameworks: jQuery Vue.js React.js Angular
Reactive streams: Introduction to Reactive Programming Callbags most Reactive extensions
Backend for frontend: Pattern: Backends For Frontends GraphQL

Keep exploring
Rethink best practices
...
Thank you