Trends

1. Artificial intelligence

2. Web VR/MR/AR

3. IoT (Internet of Things)

4. WebAssembly

5. High-level framework

6. One code – many platforms

7. PWA (Progressive Web Applications)

8. Variable fonts

9. CSS Grid Layout

10. Functional Reactive Programming

Libraries / Frameworks

The deepest reason why modern JS frameworks exist

• They are based on components
• They have a strong community
• They have plenty of third party libraries to deal with things
• They have useful third party components
• They have browser extensions that help debugging things
• They are good for doing single page applications

The essential, fundamental reason

1. Getting Angular CLI tool

$ npm i -g @angular/cli

2. Creating the project

$ ng new my-first-app

$ npm start

3. Starting the app

4. That's it 😎

Component approach

Typical component

import {
    Component,
    OnInit,
    Input,
    Output,
    EventEmitter
} from '@angular/core';
import { Hero } from '@hero/models';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;
  @Output() expand = new EventEmitter();

  constructor() { }

  onExpand() {
      this.expand.emit({});
  }

  ngOnInit() {
    console.debug('ngOnInit hook');
  }

}

Components communication

Component Lifecycle

• Forms API
• HTTP
• Async Pipe
• Router

Example of using RxJS + Angular

this.sectionsSub = this.sections$
      .pipe(
        debounceTime(100),
        map((sections) => {
          return sections.map(s => s.section).join(',');
        }),
        distinct()
      )
      .subscribe(() => {
        const scrollElement = document
          .querySelector('.container__content');
        if (scrollElement) {
          scrollElement.scroll({
            top: scrollElement.scrollHeight,
            behavior: 'smooth'
          });
        }
      });
  }

Compilation

• Just In Time (JIT)
• Ahead Of Time (AOT)

• Great performance
• TypeScript
• RxJS
• Component approach
• Modules
• Angular CLI
• Styles encapsulation
• Regular DOM
• Full set of tools

• Might be difficult in learning

1. Getting "create-react-app" tool

$ npm i -g create-react-app

2. Creating the project

$ create-react-app my-first-app

3. Starting the app

$ npm start

4. That's it 😎

Typical component

class Board extends React.Component {
  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  render() {
    const winner = calculateWinner(this.state.squares);
    const status = `Next player: ${ this.state.xIsNext ? 'X' : 'O') }`;

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          { this.renderSquare(0) }
          { this.renderSquare(1) }
          { this.renderSquare(2) }
        </div>
      </div>
    );
  }
}

Think components

React component syntax

State vs Props

• Just the V from MVC
• No routing
• No dependency injection
• No major logic components

Virtual DOM

Lifecycle Methods

State Management: Redux

Pros

- Solid conventions

- Your state is immutable

- Time travel

- It is light

- Pretty much backed by Facebook

- Dev tools

Cons

- Takes a while to learn and implement

- Lots of code

- No batching

- Thunks

- Refs are a pain to manage

State Management: MobX

Pros

- Just makes sense

- Less refactoring and boilerplate

- Open to any architecture

- No thunks or middlewares

- Your stores can be anything

Cons

- Open to interpretation

- The isArray (ObservableArray) pitfall

React Ecosystem

• Easy to start writing
• Total separation of data and presentation
• DOM binding isn’t our concern
• Create-react-app tool
• React isn’t a framework

•  React isn’t a framework

1. Getting Vue CLI tool

$ npm i -g @vue/cli

2. Creating the project

$ vue create my-first-app

3. Starting the app

$ npm run serve

4. That's it 😎

Typical component

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">
        vue-cli documentation
      </a>.
    </p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

• Reactivity
• Declarative rendering
• Data binding
• Directives
• Loops & Conditionals
• Component Encapsulation
• Event Handling
• Computed Properties & Watchers
• Transitioning Effects
• Custom fIlters

Component Lifecycle

State Management: Vuex

• Small size
• Ease of understanding and development
• Simple integration
• Styles encapsulation
• Vue CLI
• Flexibility
• Facilitates two-way communication

• A closed community development
• Language barrier

Other libraries / frameworks

👽

Aurelia

Preact

Polymer

Ember

Meteor

Backbone

Riot.js

Knockout

The only thing that matters

This presentation