JavaScript and web development in 2017

# JavaScript and Web Development in 2017

A talk about the history, the evolution and the latest trends in the JavaScript world.

These slides are online: http://js2017.surge.sh/

Saturday, February 18, 2017
: [Kansai Developers & Designers meetup event](https://www.meetup.com/Osaka-Web-Designers-and-Developers-Meetup/events/235750563/?rv=me1&_af=event&_af_eid=235750563&https=on)

---

A presentation by [Michael Rambeau](http://michaelrambeau.com/)

Creator of:

* [bestof.js.org](http://bestof.js.org/): the best of JavaScript, HTML, CSS...
* [Rising Stars 2016](https://risingstars2016.js.org/): an article about 2016 trends, available in Japanese

![image](https://cloud.githubusercontent.com/assets/5546996/21958450/fceccf32-daf1-11e6-8913-a0fce9c4e7bf.png)


---

## PART I - History of Evolution

---

### The early days

* JavaScript was born in 1995
* A "toy" language for the browser, inspired by the Java syntax
* Goal: make web pages more dynamic by adding interaction with the user
* It gives access to the DOM (the Document Object Model) to manipulate by program an HTML page

---

### The bad and the good parts

2 kinds of problems with JavaScript...

Problem #1: the language itself has a lot of "quirks"

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/8ac2df24-01ab-2793-a0d8-8b6e6acb904f.png)

---

Problem #2: The DOM API is not consistent, each browser has its own implementation.

A lot of browser compatibility problems:

* no standard (Internet Explorer vs Netscape Navigator) 
* Example: DHTML VS. layers

---

### 2004: the AJAX revolution

* With AJAX, it's possible to fetch piece of data without refreshing the whole page
* Using AJAX, rich web applications were made possible

---

#### Gmail example

* A free webmail without ad, with a lot storage space
* A great User eXperience (for example: autocompletion to select a recipient when composing a new mail)

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/3a08f760-56a9-3a16-32a0-d328dd66b15d.png)

---

### The war of libraries

Library | Released | Logo
--- | --- | ---
[Prototype](http://prototypejs.org/) | 2005 | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/f2c5b4aa-f141-4240-cc08-3f67ea0b00f8.png)
[Dojo](http://dojotoolkit.org) | 2005 | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/e228321d-a898-ff3a-c23a-eec410cf0e9e.png)
[jQuery](https://jquery.com/) | 2006 | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/48d45e29-fec7-441d-0b71-c84d62157272.png)
[YUI](https://yuilibrary.com/) | 2006 | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/0831c1ff-7b1d-4a27-8879-24784349c151.png)
[Mootools](https://mootools.net/) | 2007 | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/31dbd472-9da0-0917-d461-80b8d4f320f6.png)

---

### And the winner was... jQuery

From jQuery website, in 2006:

> jQuery is designed to change the way that you write Javascript. jQuery works in Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+.

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/9e2f58de-80ef-fb9b-1528-172ddb7365f9.png)


---

3 things that make jQuery great:

* A nice and consistent API that makes the DOM manipulation easy. Everything  starts with CSS selectors `$('.my-input')`
* An API that handles the browser quirks
* An eco-system of plugins that all implement the **same** pattern


```js
$('.my-input').datePicker(options)
```

---

### The era of jQuery "plugins"

* jQuery almost became a standard: a lot of web sites and application include jQuery
* There were plugins for everything:
  * a date time picker
  * an autocomplete field
  * a picture slider ("carousel")

---

### The problem with jQuery

Pattern: 
* STEP 1: a page is rendered server-side (using PHP, ASP, JSP...)
* STEP 2: a jQuery plugin is used to add a feature, JavaScript is used to re-render small parts in the page

You end up rendering things in both the server (the initial rendering) and the client... duplicated code!

---

### The rise of Single Page Applications (SPA)

#### Why a SPA?

* Build the html **only** on the client, not on the server
* Make things decoupled: REST API vs Web client


---

### Frameworks to build SPA

Library | Released | Comments | Logo
--- | --- | --- | ---
[Backbone]() | 2010 | Based on the model–view–presenter application design paradigm | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/6eb76283-f8fe-598e-6cdb-363f4511b6e0.png)
[AngularJS](https://angularjs.org/) | 2010 | What HTML would have been, had it been designed for building web-apps. | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/5b5c5b0c-cd5e-3755-5a85-01fdd6ecb01d.png)
[Ember](http://emberjs.com/) | 2011 | "A framework for creating ambitious web applications." Inspired by Ruby on Rails | ![image](https://qiita-image-store.s3.amazonaws.com/0/72726/c1de7204-95f3-14eb-8e0f-c429d60d22ae.png)
[React]() | 2013 | "A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES" |![image](https://qiita-image-store.s3.amazonaws.com/0/72726/432f8cae-d448-a888-d450-ab8bd87d301b.png)

---

## PART II - JavaScript in 2017 - The big picture

---

### JavaScript has improved!

#### Vanilla JavaScript

Browsers have improved and respect the standards better than before: you can use the native DOM API instead of jQuery.
See [You might not need jQuery](http://youmightnotneedjquery.com/)

---

#### ES6

The language itself evolved.

ES6 features are inspired by patterns seen on other languages like Ruby or Python.

* Native Promises
* Arrow function
* Destructuring

```js
const { size, speed} = options
const fn = x => x * x
```

You need a **transpiler** to convert ES6 code into traditional JavaScript code that the browser can read.

[Babel](http://babeljs.io) is the most popular transpiler.

---

### JavaScript is everywhere

* In the browser of course! Chrome DevTools is a great tool to debug JS code.
* In Desktop applications: [Electron](http://electron.atom.io/)
* In Mobile applications: [React Native](http://facebook.github.io/react-native/)
* In the server side [node.js](https://nodejs.org/en/)
* In the tooling chain (tools to build applications: compile template, build and minify assets...)

---

### Package manager: the success of npm

* [npm](https://www.npmjs.com/) is by far the most popular package manager
* [Bower](https://bower.io/) is no more used

Numbers from http://www.modulecounts.com/

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/77c9d41f-fd07-9e34-d1b5-a1e0c23db4b7.png)

---

### The building tools

No standard for modules in the browser
You need a tool to **bundle** the libraries coming from npm

* [Webpack](https://webpack.js.org/)
* [Browserify](http://browserify.org/)
* [Rollup](http://rollupjs.org/)
* [Fuzebox](http://fuse-box.org/)

---

## PART III - Which framework to choose?

---

### 2 different approaches

* **Full** frameworks that include all features to create a modern web application (routing, data fetching, state management).
  * Angular
  * Ember
  * Aurelia 
* Lighter solutions that focus on the **view** layer
  * React
  * Vue 

---

### The 3 main contenders

* Angular 2
* React
* Vue.JS

---

### Angular 2

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/79595095-7a60-d244-ddfd-374aafe17b0f.png)

* **Full** framework: you have to do things the "Angular way", high learning curve
* Templates look like regular HTML, enhanced by "directives"
* The killer feature: "2-way data binding" (input and model are synchronised)
* Transition from Angular 1 to Angular 2 is not so easy, a lot of things changed

---

Strong points

* Big community
* Written in TypeScript... developers familiar with typed languages (C#, Java) may love it!
* The eco-system includes 2 popular mobile frameworks
  * [Ionic](http://ionicframework.com/)
  * [NativeScript](http://www.nativescript.org/)

---

### React

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/ca85cc87-71cc-ff5c-d2ed-0a89ad4aa666.png)

* A lighter approach: only the view layer
* For big applications, you need to add a state management solution (the most popular one is [Redux](http://redux.js.org/))
* Component approach: your application is a tree of nested components
* Uses a "Virtual DOM" algorithm to make renderings fast
* No "2-way data binding" but uni directional data flow: from top to bottom
* Templates are written in JSX (JavaScript with HTML tags inside)


---

Strong points:

* Functional approach, everything is a function, Higher-Order Functions to enhance components
* Some people don't like JSX
* Big eco-system (React components for everything: chars, forms, maps...)
* [React Native](http://facebook.github.io/react-native/) is built on top of React

```js
const TodoList = ({ items }) => items.map(
  item => <TodoItem item={item} />
)
```

---

### Vue.js

![image](https://qiita-image-store.s3.amazonaws.com/0/72726/7d170f74-7aa8-5787-c880-784dd8028173.png)

* The hottest project in 2016! (see results from [JavaScript Rising Stars 2016](https://risingstars2016.js.org/))
* Used in production by major Chinese companies like Alibaba and Baidu
* HTML-based template engine
* Vue.js took the best of React (the component approach, the Virtual DOM) and Angular 1 (templates are html code enhanced by the framework features)

---

#### Strong points

* Simplicity (the easiest of the modern JavaScript frameworks to work with)
* Great documentation
* Easy to start with a simple `script` tag in an HTML page, no building process required
* Powerful features (like computed properties)
* Official add-ons
    *  [vue-router](http://router.vuejs.org/): router for SPAs
    *  [vuex](https://vuex.vuejs.org/) state management

---

#### Vue.js killer feature

Single File Components: template + logic + style in one `.vue` file

```html

<template>
  <div class="example">{{ msg }}</div>
</template>
 
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
 
<style>
.example {
  font-weight: bold;
}
</style>
```

---

### Other contenders to mention

* [Preact](https://preactjs.com/)
* [Inferno](http://infernojs.org/)
* [Aurelia](http://www.aurelia.io/)
* [Choo](https://choo.io/)
* [Riot](http://riotjs.com/)
* [Svelte](https://svelte.technology/)

---

### THE END

Thank you!

Discussion: 
  * Which framework do you use?
  * Which framework do you want to learn?